[{"data":1,"prerenderedAt":8150},["ShallowReactive",2],{"resume":3,"skills":55,"projects":97,"recent-blogs":1988},{"id":4,"basic_info":5,"extension":15,"meta":16,"projects":20,"self_evaluation":48,"stem":53,"__hash__":54},"resume\u002Findex.yml",{"name":6,"email":7,"job_direction":8,"advantage":13,"intro":14},"后山人","24981376@qq.com",[9,10,11,12],"前端开发","全栈开发","Python Web 开发","AI 应用开发","前端体系完整（HTML\u002FCSS\u002FJS\u002F工程化\u002FVue\u002FReact\u002F小程序\u002FUni-app），具备 Node.js 与 Python Web 开发能力，并关注 LLM 应用开发与 Agent 工具链（LangChain \u002F LangGraph \u002F LlamaIndex \u002F MCP \u002F Skill 等）","一个野生大龄程序员，OPC践行者，热爱编程、热爱足球、热爱骑行...","yml",{"education":17,"portfolio":19},{"school":18,"degree":18,"time":18},"__",{"github":18,"demo":18,"articles":18},[21,28,35,42],{"name":22,"tech_stack":23,"content":24,"output":25},"前端交互与组件化案例合集","HTML\u002FCSS\u002FJavaScript、DOM 事件、AJAX、jQuery、Axios","购物车、轮播图、倒计时、放大镜、Tab 切换、表格生成、模态框拖拽等常见交互组件与页面特效",[26,27],"沉淀可复用的交互组件与代码片段","能独立完成常见页面效果与数据交互模块开发",{"name":29,"tech_stack":30,"content":31,"output":32},"Vue 体系化实战项目（电商\u002F后台管理\u002F搜索等）","Vue2\u002F3、Vue Router、Vuex\u002FPinia、Axios","路由与权限、组件通信、状态管理、页面动效、缓存与导航守卫",[33,34],"构建可维护的页面与组件结构","能处理复杂路由、跨组件通信与状态管理问题",{"name":36,"tech_stack":37,"content":38,"output":39},"Python Web 服务 \u002F REST API","Django \u002F DRF 或 FastAPI、MySQL","接口开发、数据模型设计、基础鉴权",[40,41],"完成从数据到 API 的闭环开发","具备将业务能力服务化的意识",{"name":43,"tech_stack":44,"content":45,"output":46},"AI 应用开发探索（RAG \u002F Agent）","LangChain \u002F LangGraph \u002F LlamaIndex、MCP、提示词工程","知识库问答、工具调用、流程编排、Agent 设计",[47],"能将模型能力与工具\u002F数据源结合，完成可用的应用原型",[49,50,51,52],"具备系统化学习能力与完整的前端知识体系，能覆盖从基础到框架与工程化的开发流程","同时具备 Node.js 与 Python Web 能力，能承担前后端协作或简单全栈开发任务","持续关注 AI 应用开发方向，具备将 LLM 与工具链结合落地为应用的探索与实践能力","深度结合 AI 编程，熟练掌握ClaudeCode、OpenCode、Trae等编程工具","index","hHGN8FwQdSwXBlbz3otbgyRA6z5I4QKxjdGZ_pPcXwg",{"id":56,"ai":57,"backend":60,"cross_platform":68,"extension":15,"frameworks":71,"frontend_basic":78,"javascript":85,"meta":89,"network":90,"stem":95,"__hash__":96},"skills\u002Fskills.yml",{"tools":58,"practice":59},"LangChain、LangGraph、LlamaIndex、AI Agent、提示词工程等","具备LLM本地部署能力，能结合本地模型搭建、优化RAG系统，熟练运用ClaudeCode、OpenCode、Trae等工具提升编程效率",{"nodejs":61,"python":62,"mysql":67},"掌握 Node.js 核心知识及常用内置模块的使用，能熟练运用 Express 等框架快速搭建基础的 Web 服务与 API 接口",{"basic":63,"visualization":64,"crawler":65,"web_framework":66},"掌握变量、列表、字典、函数、类、控制流等","了解 matplotlib \u002F Pygal 等工具的使用场景","熟悉 requests、bs4、lxml、selenium；了解异步编程、线程池、scrapy 等","了解 Django、Django REST Framework、FastAPI 的基本用法与项目结构","掌握基础 SQL 语法与常见数据操作",{"wechat_mini_program":69,"uni_app":70},"熟悉小程序配置、模板语法、事件绑定、常用组件与自定义组件；具备项目实战相关经验","熟悉基本开发方式与 uniCloud（云函数\u002F云对象）；具备独立跨端项目能力",{"vue":72,"react":77},{"core":73,"advanced":74,"state":75,"router":76},"模板语法、响应式原理（数据代理）、事件处理、计算\u002F侦听、条件\u002F列表渲染、表单处理、生命周期、指令、组件化、插槽等","组件通信、全局事件总线、发布订阅、过渡动画、自定义事件等","理解 Vuex，了解 Pinia 的使用方式","熟悉基本使用、动态路由、路由守卫、缓存、replace、query\u002Fparams\u002Fprops 等配置","掌握基础概念与常见开发流程；了解 Redux 与 React Router 的使用",{"html":79,"css":80,"engineering":81},"掌握 HTML 基础、表单相关能力，理解语义化与常用页面结构","掌握盒模型、浮动、定位、背景与三大特性等核心知识；熟悉响应式与移动端适配方案（flex、rem、流式布局）",{"git":82,"package_manager":83,"preprocessor":84},"熟悉常用命令、版本控制流程与仓库协作","了解 npm、yarn 等常用工具链","了解 Sass \u002F Less 的使用场景与基本语法",{"es6_es11":86,"dom_bom":87,"ajax":88},"熟悉 async\u002Fawait、Promise、Set\u002FMap、Class、解构、迭代器\u002F生成器、模块化等","掌握 DOM 节点与事件机制、定时器、本地存储等常见能力","了解原生 AJAX、Axios、jQuery；理解跨域与常见处理方式",{},{"computer_network":91,"http":92,"domain":93,"security":94},"了解网络分层、传输层、网络层、数据链路层\u002F局域网、物理层、无线与移动网络等基础知识","掌握 HTTP 基础、实战与性能优化相关知识点","了解域名基础与解析相关概念","了解网络安全基础知识","skills","pmspZYzGHXx8YlLcFKCtqri2iWazt1GBbiVYFuYlcXU",[98,707,1340],{"id":99,"title":100,"body":101,"date":696,"description":697,"extension":698,"meta":699,"navigation":700,"path":701,"seo":702,"stem":703,"summary":704,"tech_stack":705,"__hash__":706},"projects\u002Fprojects\u002Ftokenwise-ai-token-monitor.md","TokenWise - AI编码助手Token监控",{"type":102,"value":103,"toc":673},"minimark",[104,109,114,127,145,167,170,174,178,192,195,233,235,239,242,386,389,449,452,462,464,468,472,511,515,541,545,564,568,585,589,607,609,613,627,629,633,671],[105,106,108],"h1",{"id":107},"tokenwise-ai-编码助手-token-使用监控桌面应用","TokenWise — AI 编码助手 Token 使用监控桌面应用",[110,111,113],"h2",{"id":112},"一项目概述","一、项目概述",[115,116,117,118,122,123,126],"p",{},"随着 AI 编码助手（Claude Code、OpenCode 等）在日常开发中的深度使用，Token 消耗与 API 余额逐渐成为开发者关注的核心成本指标。然而，目前缺乏一款轻量、隐私友好的桌面工具，能帮助开发者",[119,120,121],"strong",{},"实时掌握 Token 用量","并",[119,124,125],{},"按模型\u002F来源精细分析","。",[115,128,129,132,133,136,137,140,141,144],{},[119,130,131],{},"TokenWise"," 是一款基于 ",[119,134,135],{},"Tauri 2 + Vue 3 + Rust"," 构建的桌面应用，通过",[119,138,139],{},"离线日志文件解析","与",[119,142,143],{},"实时 HTTP 代理拦截","两种方式采集数据，配合 Chart.js 可视化仪表盘与系统托盘集成，让开发者在编码过程中对 Token 消耗\"一目了然\"。",[146,147,148,155,161],"ul",{},[149,150,151,154],"li",{},[119,152,153],{},"项目形态","：macOS 桌面应用（Tauri 2 原生窗口）",[149,156,157,160],{},[119,158,159],{},"核心能力","：双源数据采集、按模型分布可视化、API 余额查询、系统托盘实时显示、HTTP 代理实时监控",[149,162,163,166],{},[119,164,165],{},"适用场景","：重度使用 Claude Code \u002F OpenCode 的开发者，需要追踪每日 Token 消耗与成本",[168,169],"hr",{},[110,171,173],{"id":172},"二业务痛点与目标","二、业务痛点与目标",[175,176,177],"h3",{"id":177},"痛点",[146,179,180,183,186,189],{},[149,181,182],{},"AI 编码助手的 Token 消耗分散在不同平台和日志中，难以汇总统计",[149,184,185],{},"多个模型（DeepSeek、Kimi、Claude、Qwen 等）同时使用时，无法按模型维度分析用量",[149,187,188],{},"API 账户余额查询需手动登录各平台，操作繁琐",[149,190,191],{},"缺乏实时监控手段，只能事后查看消耗",[175,193,194],{"id":194},"目标",[146,196,197,206,213,220,227],{},[149,198,199,200,122,203],{},"将 Claude Code \u002F OpenCode 的 Token 数据",[119,201,202],{},"自动采集",[119,204,205],{},"统一展示",[149,207,208,209,212],{},"按",[119,210,211],{},"模型维度","展示 Token 分布，帮助优化模型选择策略",[149,214,215,216,219],{},"支持",[119,217,218],{},"API 余额一键查询","（DeepSeek、Kimi）",[149,221,222,223,226],{},"提供",[119,224,225],{},"系统托盘常驻","，无需打开窗口即可查看今日用量",[149,228,215,229,232],{},[119,230,231],{},"实时代理监控","，在 API 调用时即捕获 Token 数据",[168,234],{},[110,236,238],{"id":237},"三技术方案与架构","三、技术方案与架构",[175,240,241],{"id":241},"技术栈",[243,244,245,261],"table",{},[246,247,248],"thead",{},[249,250,251,255,258],"tr",{},[252,253,254],"th",{},"层级",[252,256,257],{},"技术",[252,259,260],{},"说明",[262,263,264,278,295,308,321,334,347,360,373],"tbody",{},[249,265,266,272,275],{},[267,268,269],"td",{},[119,270,271],{},"桌面框架",[267,273,274],{},"Tauri 2",[267,276,277],{},"Rust 后端 + WebView 前端，轻量原生",[249,279,280,285,288],{},[267,281,282],{},[119,283,284],{},"前端框架",[267,286,287],{},"Vue 3（Composition API）",[267,289,290,294],{},[291,292,293],"code",{},"\u003Cscript setup>"," + TypeScript strict",[249,296,297,302,305],{},[267,298,299],{},[119,300,301],{},"样式方案",[267,303,304],{},"TailwindCSS 4.x",[267,306,307],{},"PostCSS 插件集成，支持明暗主题",[249,309,310,315,318],{},[267,311,312],{},[119,313,314],{},"图表库",[267,316,317],{},"Chart.js 4.x",[267,319,320],{},"环形图 + 折线图，自定义 HTML tooltip",[249,322,323,328,331],{},[267,324,325],{},[119,326,327],{},"后端语言",[267,329,330],{},"Rust（edition 2021）",[267,332,333],{},"高性能数据处理与系统交互",[249,335,336,341,344],{},[267,337,338],{},[119,339,340],{},"HTTP 代理",[267,342,343],{},"hyper 1.0",[267,345,346],{},"内置代理服务器，SSE 流解析",[249,348,349,354,357],{},[267,350,351],{},[119,352,353],{},"本地数据库",[267,355,356],{},"rusqlite（bundled SQLite）",[267,358,359],{},"代理监控数据持久化",[249,361,362,367,370],{},[267,363,364],{},[119,365,366],{},"异步运行时",[267,368,369],{},"tokio 1（多线程）",[267,371,372],{},"Rust 异步任务调度",[249,374,375,380,383],{},[267,376,377],{},[119,378,379],{},"本地存储",[267,381,382],{},"tauri-plugin-store 2",[267,384,385],{},"API Key 等配置安全存储",[175,387,388],{"id":388},"双源数据采集架构",[146,390,391,415],{},[149,392,393,396],{},[119,394,395],{},"来源 1 — 离线日志解析（被动）",[146,397,398,405,412],{},[149,399,400,401,404],{},"OpenCode：直接查询本地 SQLite 数据库（",[291,402,403],{},"~\u002F.local\u002Fshare\u002Fopencode\u002Fopencode.db","），SQL 聚合统计",[149,406,407,408,411],{},"Claude Code：遍历 ",[291,409,410],{},"~\u002F.claude\u002Fprojects\u002F*\u002Fconversations\u002F*.jsonl"," 日志文件，JSONL 逐行解析、去重统计",[149,413,414],{},"自动推断 API 提供商（阿里云百炼、火山引擎、Anthropic、DeepSeek、Kimi 等）",[149,416,417,420],{},[119,418,419],{},"来源 2 — HTTP 代理监控（主动\u002F实时）",[146,421,422,429,432,435,446],{},[149,423,424,425,428],{},"在 ",[291,426,427],{},"127.0.0.1:7890"," 启动内置 hyper HTTP 代理",[149,430,431],{},"自动修改 Claude 配置文件将 API 请求路由至代理",[149,433,434],{},"识别 Claude CLI\u002FCode 请求（User-Agent 过滤），仅拦截相关流量",[149,436,437,438,441,442,445],{},"解析 SSE 响应流，从 ",[291,439,440],{},"message_start"," \u002F ",[291,443,444],{},"message_delta"," 事件中提取 usage 数据",[149,447,448],{},"代理停止时自动恢复原始配置，不破坏用户设置",[175,450,451],{"id":451},"项目组织",[453,454,459],"pre",{"className":455,"code":457,"language":458},[456],"language-text","tauri2-jiankong\u002Fmac\u002F\n├── src\u002F                          # Vue 3 前端\n│   ├── App.vue                   # 根组件（数据加载、页面路由）\n│   ├── components\u002F\n│   │   ├── UsageCard.vue         # Token 使用卡片（环形图 + 指标）\n│   │   ├── BalanceCard.vue       # API 余额卡片\n│   │   ├── DonutChart.vue        # Chart.js 环形图\n│   │   ├── LineChart.vue         # Chart.js 折线图\n│   │   ├── DetailPage.vue        # 详情页（表格 + 趋势）\n│   │   └── Settings.vue          # 设置页（API Key + 代理开关）\n│   └── types\u002F                    # TypeScript 类型定义\n├── src-tauri\u002F                    # Rust 后端\n│   └── src\u002F\n│       ├── lib.rs                # Tauri 命令注册、托盘、插件\n│       ├── claude_query_token.rs # Claude JSONL 日志解析\n│       ├── opencode_query_token.rs # OpenCode SQLite 查询\n│       ├── proxy\u002F                # HTTP 代理模块\n│       │   ├── server.rs         # Hyper 代理服务器\n│       │   ├── handler.rs        # SSE 流解析与 Token 提取\n│       │   ├── config.rs         # Claude 配置备份\u002F修改\u002F恢复\n│       │   └── state.rs          # 代理运行状态\n│       └── storage\u002F              # SQLite 持久化\n│           └── token_db.rs       # 数据库操作（建表、插入、查询）\n","text",[291,460,457],{"__ignoreMap":461},"",[168,463],{},[110,465,467],{"id":466},"四核心功能实现","四、核心功能实现",[175,469,471],{"id":470},"_1双源-token-数据采集","1）双源 Token 数据采集",[146,473,474,480,502],{},[149,475,476,479],{},[119,477,478],{},"OpenCode 数据源","：通过 rusqlite 直接查询本地 SQLite 数据库，SQL 聚合统计今日 input_tokens、output_tokens、cache_creation、cache_read 等指标",[149,481,482,485,486,489,490,493,494,497,498,501],{},[119,483,484],{},"Claude Code 数据源","：使用 walkdir 遍历 JSONL 日志文件，逐行解析后按 ",[291,487,488],{},"message_id"," 去重，",[291,491,492],{},"stop_reason"," 过滤（仅统计 ",[291,495,496],{},"end_turn"," 和 ",[291,499,500],{},"tool_use","），UTC 时间戳自动转换为本地时间",[149,503,504,507,508,510],{},[119,505,506],{},"HTTP 代理源","：基于 hyper 1.0 构建正向代理，对 SSE 响应流进行实时解析，从 ",[291,509,444],{}," 事件提取 usage 写入 SQLite",[175,512,514],{"id":513},"_2可视化仪表盘","2）可视化仪表盘",[146,516,517,523,529,535],{},[149,518,519,522],{},[119,520,521],{},"使用卡片（UsageCard）","：Chart.js 环形图按模型分布展示 Token 消耗，指标行展示输入\u002F输出\u002F缓存写入\u002F缓存读取\u002F调用次数",[149,524,525,528],{},[119,526,527],{},"余额卡片（BalanceCard）","：DeepSeek 和 Kimi 账户余额实时展示，含自定义渐变配色",[149,530,531,534],{},[119,532,533],{},"详情页（DetailPage）","：折线趋势图 + 数据表格，按模型分类的数据集，自定义 HTML tooltip 展示完整指标",[149,536,537,540],{},[119,538,539],{},"模型配色方案","：DeepSeek V4 Flash（天蓝）、DeepSeek V4 Pro（蓝色）、Kimi（紫色）、GLM（绿色）、Claude（橙色）、Qwen（靛蓝）",[175,542,544],{"id":543},"_3api-余额查询","3）API 余额查询",[146,546,547,554,561],{},[149,548,549,550,553],{},"调用 DeepSeek 余额 API（",[291,551,552],{},"\u002Fuser\u002Fbalance","）提取 CNY 余额",[149,555,556,557,560],{},"调用 Kimi 余额 API（",[291,558,559],{},"\u002Fv1\u002Fusers\u002Fme\u002Fbalance","）提取可用余额",[149,562,563],{},"API Key 通过 tauri-plugin-store 安全存储在本地配置文件中",[175,565,567],{"id":566},"_4系统托盘集成","4）系统托盘集成",[146,569,570,576,579,582],{},[149,571,572,573],{},"菜单栏托盘图标实时显示今日 Token 总数：",[291,574,575],{},"{Claude total} | {OpenCode total}",[149,577,578],{},"数字自动格式化（≥1M 显示 \"X.XXM\"，≥1K 显示 \"X.XK\"）",[149,580,581],{},"窗口关闭时隐藏到托盘而非退出，保持统计持续运行",[149,583,584],{},"点击托盘图标显示\u002F聚焦应用窗口",[175,586,588],{"id":587},"_5http-代理实时监控","5）HTTP 代理实时监控",[146,590,591,594,601,604],{},[149,592,593],{},"一键启动\u002F停止代理，实时状态指示（绿色\u002F灰色圆点）",[149,595,596,597,600],{},"代理自动修改 ",[291,598,599],{},"~\u002F.claude\u002Fsettings.json"," 将 API 请求路由至本地代理",[149,602,603],{},"代理停止时自动恢复原始配置，确保用户设置不被破坏",[149,605,606],{},"支持 Android 12+ 精确闹钟权限检查",[168,608],{},[110,610,612],{"id":611},"五项目效果","五、项目效果",[146,614,615,618,621,624],{},[149,616,617],{},"将\"登录各平台后台查余额\"的流程改为\"桌面一键查看\"，大幅提升查询效率",[149,619,620],{},"通过双源数据采集，实现从历史统计到实时监控的全链路覆盖",[149,622,623],{},"按模型维度的可视化分析帮助开发者优化模型选择、降低成本",[149,625,626],{},"系统托盘常驻显示，编码过程中随时掌握消耗动态",[168,628],{},[110,630,632],{"id":631},"六可扩展与复盘","六、可扩展与复盘",[146,634,635,641,647,653,659,665],{},[149,636,637,640],{},[119,638,639],{},"更多 AI 工具支持","：扩展至 Cursor、Windsurf 等 AI 编码助手的日志解析",[149,642,643,646],{},[119,644,645],{},"成本估算","：根据各模型单价自动计算每日\u002F每月 API 花费",[149,648,649,652],{},[119,650,651],{},"历史趋势","：增加周\u002F月维度的时间趋势分析",[149,654,655,658],{},[119,656,657],{},"告警机制","：Token 日消耗或 API 余额低于阈值时推送系统通知",[149,660,661,664],{},[119,662,663],{},"多代理协同","：支持同时监控多个代理端口，适配不同工具的并发使用",[149,666,667,670],{},[119,668,669],{},"Windows\u002FLinux 支持","：当前仅 macOS，可基于 Tauri 2 跨平台能力扩展",[168,672],{},{"title":461,"searchDepth":674,"depth":674,"links":675},3,[676,678,682,687,694,695],{"id":112,"depth":677,"text":113},2,{"id":172,"depth":677,"text":173,"children":679},[680,681],{"id":177,"depth":674,"text":177},{"id":194,"depth":674,"text":194},{"id":237,"depth":677,"text":238,"children":683},[684,685,686],{"id":241,"depth":674,"text":241},{"id":388,"depth":674,"text":388},{"id":451,"depth":674,"text":451},{"id":466,"depth":677,"text":467,"children":688},[689,690,691,692,693],{"id":470,"depth":674,"text":471},{"id":513,"depth":674,"text":514},{"id":543,"depth":674,"text":544},{"id":566,"depth":674,"text":567},{"id":587,"depth":674,"text":588},{"id":611,"depth":677,"text":612},{"id":631,"depth":677,"text":632},"2025-06","基于 Tauri 2 的桌面端 AI 编码助手 Token 使用监控工具","md",{},true,"\u002Fprojects\u002Ftokenwise-ai-token-monitor",{"title":100,"description":697},"projects\u002Ftokenwise-ai-token-monitor","针对 AI 编码助手（Claude Code \u002F OpenCode）Token 消耗难以追踪的痛点，构建基于 Tauri 2 的桌面监控应用。支持离线日志解析与实时 HTTP 代理双重数据采集，提供可视化仪表盘、API 余额查询与系统托盘集成。","Tauri 2, Vue 3, TypeScript, Rust, Chart.js, TailwindCSS","Ojb-cMqCIz-Ipfbbm34g6R-RnQzCW8TPhhu2zG9nqJY",{"id":708,"title":709,"body":710,"date":1331,"description":1332,"extension":698,"meta":1333,"navigation":700,"path":1334,"seo":1335,"stem":1336,"summary":1337,"tech_stack":1338,"__hash__":1339},"projects\u002Fprojects\u002Ffootball-ai-worldcup-prediction.md","预见足球AI - 世界杯AI智能预测",{"type":102,"value":711,"toc":1304},[712,716,718,729,738,755,757,759,761,775,777,803,805,807,809,926,929,935,937,943,945,947,951,986,990,1021,1025,1096,1100,1126,1130,1151,1155,1169,1171,1173,1197,1199,1203,1206,1226,1230,1247,1250,1258,1260,1264,1302],[105,713,715],{"id":714},"预见足球-ai-世界杯赛事-ai-智能预测小程序","预见足球 AI — 世界杯赛事 AI 智能预测小程序",[110,717,113],{"id":112},[115,719,720,721,724,725,728],{},"2026 年 FIFA 世界杯即将来临，球迷和竞猜爱好者需要一款能",[119,722,723],{},"整合赛事数据、AI 预测与赔率信息","的一站式工具。然而现有应用要么仅有赛程展示，要么预测维度单一，缺少将 AI 预测、市场预期、博彩赔率进行",[119,726,727],{},"多维度对比","的综合平台。",[115,730,731,132,734,737],{},[119,732,733],{},"预见足球 AI",[119,735,736],{},"uni-app + Vue 3"," 构建的微信小程序，接入 BSD Sports Data API 获取赛事与预测数据，为用户提供 48 支参赛球队的赛程浏览、积分榜排名、AI 智能预测推荐、Polymarket 市场预期与多公司赔率对比，帮助用户从多个角度评估比赛走向。",[146,739,740,745,750],{},[149,741,742,744],{},[119,743,153],{},"：微信小程序（主力）+ 多端适配",[149,746,747,749],{},[119,748,159],{},"：赛事数据展示、AI 预测推荐、赔率对比、市场预期、积分榜计算、微信一键登录",[149,751,752,754],{},[119,753,165],{},"：世界杯赛事追踪、AI 预测参考、竞猜策略辅助",[168,756],{},[110,758,173],{"id":172},[175,760,177],{"id":177},[146,762,763,766,769,772],{},[149,764,765],{},"赛事信息分散在官网、体育 App、社交媒体，缺乏聚合展示",[149,767,768],{},"AI 预测、市场预期、博彩赔率三个维度各自独立，无法同屏对比",[149,770,771],{},"积分榜数据需手动计算，小组出线形势判断困难",[149,773,774],{},"48 支参赛队伍，赛程密集，用户难以快速找到关注球队的比赛",[175,776,194],{"id":194},[146,778,779,785,790,797],{},[149,780,781,782],{},"将赛事赛程、AI 预测、市场预期、赔率信息",[119,783,784],{},"整合在同一应用",[149,786,222,787,789],{},[119,788,727],{},"：AI 推荐概率 vs 市场预期概率 vs 博彩赔率，辅助决策",[149,791,792,793,796],{},"自动计算",[119,794,795],{},"积分榜","，支持按球队筛选查看所有比赛",[149,798,222,799,802],{},[119,800,801],{},"48 队全量中文名映射","与队徽加载，降低认知门槛",[168,804],{},[110,806,238],{"id":237},[175,808,241],{"id":241},[243,810,811,821],{},[246,812,813],{},[249,814,815,817,819],{},[252,816,254],{},[252,818,257],{},[252,820,260],{},[262,822,823,836,849,861,874,887,900,913],{},[249,824,825,830,833],{},[267,826,827],{},[119,828,829],{},"跨平台框架",[267,831,832],{},"uni-app (DCloud)",[267,834,835],{},"微信小程序为主力平台",[249,837,838,842,844],{},[267,839,840],{},[119,841,284],{},[267,843,287],{},[267,845,846,848],{},[291,847,293],{}," 模式",[249,850,851,855,858],{},[267,852,853],{},[119,854,301],{},[267,856,857],{},"SCSS + rpx 响应式",[267,859,860],{},"uni.scss 全局变量",[249,862,863,868,871],{},[267,864,865],{},[119,866,867],{},"云服务",[267,869,870],{},"uniCloud 阿里云",[267,872,873],{},"用户认证 + 云函数 + 云数据库",[249,875,876,881,884],{},[267,877,878],{},[119,879,880],{},"数据源",[267,882,883],{},"BSD Sports Data API v2",[267,885,886],{},"赛事、预测、赔率、场馆",[249,888,889,894,897],{},[267,890,891],{},[119,892,893],{},"认证方案",[267,895,896],{},"微信一键登录（openid）",[267,898,899],{},"Token SHA-256 签发",[249,901,902,907,910],{},[267,903,904],{},[119,905,906],{},"构建工具",[267,908,909],{},"Vite + @dcloudio\u002Fvite-plugin-uni",[267,911,912],{},"HBuilderX 管理",[249,914,915,920,923],{},[267,916,917],{},[119,918,919],{},"图标方案",[267,921,922],{},"jk-icon (iconify)",[267,924,925],{},"SVG 图标自定义字体",[175,927,928],{"id":928},"数据流架构",[453,930,933],{"className":931,"code":932,"language":458},[456],"BSD Sports Data API (UTC)\n        │\n        ▼\n   API 封装层 (api\u002F)\n   ├── client.js      # uni.request + Token 注入 + 超时处理\n   ├── events.js      # 赛事列表 + 单场详情\n   ├── predictions.js # AI 预测列表 + 单场预测\n   ├── standings.js   # 积分榜计算逻辑\n   ├── team-names.js  # 48 队英→中映射 + 队徽 CDN\n   └── time.js        # UTC ↔ 北京时间转换\n        │\n        ▼\n   页面层 (pages\u002F)\n   ├── 首页        # 今日赛事 + AI 预测卡片\n   ├── 赛事页      # 积分榜 + 分类浏览 + 球队筛选\n   ├── AI 预测页   # 日期筛选 + 预测统计\n   ├── 详情页      # AI 预测 + 市场预期 + 赔率对比\n   └── 我的        # 登录\u002F注销\u002F使用说明\n        │\n        ▼\n   uniCloud 阿里云\n   ├── user 云函数  # 登录\u002F验证\u002F退出\u002F注销\n   └── users 表    # openid + Token + 注册时间\n",[291,934,932],{"__ignoreMap":461},[175,936,451],{"id":451},[453,938,941],{"className":939,"code":940,"language":458},[456],"预见足球AI\u002F\n├── api\u002F                           # API 封装层\n│   ├── config.js                  # API Token + Base URL + 世界杯联赛 ID\n│   ├── client.js                  # uni.request 封装（Token 注入、超时、错误处理）\n│   ├── events.js                  # 赛事列表 + 单场详情接口\n│   ├── predictions.js             # AI 预测列表 + 单场预测接口\n│   ├── team-names.js              # 48 队英→中映射 + 队徽 CDN URL\n│   ├── time.js                    # UTC ↔ 北京时间转换工具\n│   ├── standings.js               # 积分榜计算逻辑\n│   └── user.js                    # 用户登录\u002FToken 管理\u002F注销\n├── pages\u002F                         # 页面\n│   ├── index\u002Findex.vue            # 首页（世界杯横幅 + 今日赛事 + 数据洞察）\n│   ├── matches\u002Findex.vue          # 赛事页（积分榜 + 分类浏览 + 球队筛选）\n│   ├── ai-predict\u002Findex.vue       # AI 预测页（日期筛选 + 预测统计 + 准确率）\n│   ├── detail\u002Findex.vue           # 比赛详情页（AI 预测 + 市场预期 + 赔率对比）\n│   ├── profile\u002Findex.vue          # 我的页面（微信登录 + 使用说明 + 注销）\n│   └── login\u002Findex.vue            # 独立登录页（备用入口）\n├── components\u002F\n│   └── CustomTabBar\u002F              # 自定义胶囊样式底部导航\n├── uniCloud-aliyun\u002F               # uniCloud 云服务\n│   ├── cloudfunctions\u002Fuser\u002F       # 用户认证云函数\n│   └── database\u002Fusers.schema.json # 用户表 Schema\n└── static\u002F                        # 静态资源 + 图标字体\n",[291,942,940],{"__ignoreMap":461},[168,944],{},[110,946,467],{"id":466},[175,948,950],{"id":949},"_1首页-今日赛事与-ai-预测","1）首页 — 今日赛事与 AI 预测",[146,952,953,959,965,971,977,983],{},[149,954,955,958],{},[119,956,957],{},"世界杯横幅","：纯 CSS 绘制足球场线条（中圈、点球区、球门），深绿色背景 + \"进行中\"徽章",[149,960,961,964],{},[119,962,963],{},"今日赛事卡片","：小组\u002F轮次标签、北京时间、主客队名 + 圆形队徽、比分（完赛\u002F进行中）",[149,966,967,970],{},[119,968,969],{},"AI 预测进度条","：主胜\u002F平局\u002F客胜概率可视化 + 推荐标签（主胜\u002F平局\u002F客胜）",[149,972,973,976],{},[119,974,975],{},"预测结果缎带","：完赛后对比 AI 预测与实际结果，45° 旋转显示\"已中\"（绿色）\u002F \"未中\"（红色）",[149,978,979,982],{},[119,980,981],{},"数据洞察卡片","：今日赛事场数 + 预测准确率统计",[149,984,985],{},"支持下拉刷新和错误重试",[175,987,989],{"id":988},"_2赛事页-积分榜与分类浏览","2）赛事页 — 积分榜与分类浏览",[146,991,992,998,1003,1009,1015],{},[149,993,994,997],{},[119,995,996],{},"两行 Tab 导航","：积分榜、全部比赛、小组赛、1\u002F16 决赛、1\u002F8 决赛、1\u002F4 决赛、半决赛、季军赛、决赛",[149,999,1000,1002],{},[119,1001,795],{},"：按字母分组的 48 队积分表（排名、队徽、场次、胜\u002F平\u002F负、净胜球、积分），支持组别筛选",[149,1004,1005,1008],{},[119,1006,1007],{},"比赛列表","：按分组头（如\"小组赛·第一轮 3 场\"）分类展示",[149,1010,1011,1014],{},[119,1012,1013],{},"日期筛选","：横向滚动芯片选择器，支持\"全部\"和具体日期",[149,1016,1017,1020],{},[119,1018,1019],{},"球队筛选","：点击积分榜队伍自动跳转查看该队所有比赛",[175,1022,1024],{"id":1023},"_3ai-预测页-多维度预测分析","3）AI 预测页 — 多维度预测分析",[146,1026,1027,1032,1038,1044],{},[149,1028,1029,1031],{},[119,1030,1013],{},"：双日滚动（全部 + 今天 + 未来天数），切换日期自动拉取对应预测",[149,1033,1034,1037],{},[119,1035,1036],{},"统计卡片","：已预测场次数 + 预测准确率",[149,1039,1040,1043],{},[119,1041,1042],{},"预测卡片","：与首页一致的 AI 推荐展示 + 进度条 + 百分比",[149,1045,1046,1049,1050],{},[119,1047,1048],{},"预测字段","：\n",[146,1051,1052,1065,1071,1078,1084,1090],{},[149,1053,1054,1055,441,1058,441,1061,1064],{},"胜平负概率（",[291,1056,1057],{},"prob_home",[291,1059,1060],{},"prob_draw",[291,1062,1063],{},"prob_away","）",[149,1066,1067,1068,1064],{},"预期进球（",[291,1069,1070],{},"expected_goals",[149,1072,1073,1074,1077],{},"大小球概率（",[291,1075,1076],{},"over_under","：1.5\u002F2.5\u002F3.5）",[149,1079,1080,1081,1064],{},"双方进球概率（",[291,1082,1083],{},"btts",[149,1085,1086,1087,1064],{},"最可能比分（",[291,1088,1089],{},"most_likely",[149,1091,1092,1093,1064],{},"模型置信度（",[291,1094,1095],{},"confidence",[175,1097,1099],{"id":1098},"_4比赛详情页-多维度对比","4）比赛详情页 — 多维度对比",[146,1101,1102,1108,1114,1120],{},[149,1103,1104,1107],{},[119,1105,1106],{},"沉浸式头部","：深色背景 + 自定义导航栏 + 对阵信息（队徽 + 队名 + 比分 + 半场比分）",[149,1109,1110,1113],{},[119,1111,1112],{},"AI 预测区","：主胜\u002F平局\u002F客胜三进度条 + 推荐标签 + 预期进球 + 进球概率 + 最可能比分 + 大球概率 + 置信度",[149,1115,1116,1119],{},[119,1117,1118],{},"市场预期（Polymarket）","：1x2 胜率、半场结果、大小球、让球、双方进球、精确比分 Top 10、进球球员预测",[149,1121,1122,1125],{},[119,1123,1124],{},"赔率对比","：博彩公司最佳赔率（主胜\u002F平局\u002F客胜\u002F大小球\u002F双方进球）+ 多公司赔率详细列表",[175,1127,1129],{"id":1128},"_5用户认证系统","5）用户认证系统",[146,1131,1132,1135,1138,1141,1148],{},[149,1133,1134],{},"基于 uniCloud 阿里云 + 微信 openid",[149,1136,1137],{},"云函数处理 login \u002F checkToken \u002F logout \u002F deleteAccount",[149,1139,1140],{},"Token SHA-256 生成，30 天有效期",[149,1142,1143,1144,1147],{},"App.vue 在 ",[291,1145,1146],{},"onLaunch"," 中静默验证已有 Token",[149,1149,1150],{},"已登录用户显示彩色头像（基于 openid hash 计算颜色）+ ID + 注册时间",[175,1152,1154],{"id":1153},"_6自定义胶囊-tabbar","6）自定义胶囊 TabBar",[146,1156,1157,1160,1163,1166],{},[149,1158,1159],{},"禁用原生 TabBar，使用 CustomTabBar 组件实现圆角胶囊样式",[149,1161,1162],{},"四个 Tab：首页（足球图标）、赛事（奖杯）、AI 预测（机器人）、我的（用户）",[149,1164,1165],{},"选中项绿色填充 + 白色图标，未选中灰色",[149,1167,1168],{},"支持安全区适配",[168,1170],{},[110,1172,612],{"id":611},[146,1174,1175,1182,1188,1194],{},[149,1176,1177,1178,1181],{},"将赛事信息、AI 预测、市场预期、博彩赔率",[119,1179,1180],{},"整合在同一界面","，免去多平台切换",[149,1183,1184,1185],{},"通过 AI 预测概率进度条和推荐标签，用户可",[119,1186,1187],{},"快速获取预测结论",[149,1189,1190,1191],{},"积分榜自动计算 + 球队筛选，帮助用户",[119,1192,1193],{},"快速定位关注球队的比赛",[149,1195,1196],{},"预测结果缎带直观展示 AI 预测准确率，建立用户信任",[168,1198],{},[110,1200,1202],{"id":1201},"六技术亮点","六、技术亮点",[175,1204,1205],{"id":1205},"时区处理",[146,1207,1208,1211,1217],{},[149,1209,1210],{},"API 全部使用 UTC 时间，前端展示使用北京时间（UTC+8）",[149,1212,1213,1216],{},[291,1214,1215],{},"utcWindowForBeijing()"," 生成精确 UTC 窗口，避免跨日边界问题",[149,1218,1219,441,1222,1225],{},[291,1220,1221],{},"toBeijingTime()",[291,1223,1224],{},"toBeijingLabel()"," 统一转换展示格式",[175,1227,1229],{"id":1228},"_48-队全量映射","48 队全量映射",[146,1231,1232,1238,1244],{},[149,1233,1234,1237],{},[291,1235,1236],{},"api\u002Fteam-names.js"," 包含全部 48 支世界杯参赛队英文到中文映射",[149,1239,1240,1241,1064],{},"队徽通过 CDN 加载（",[291,1242,1243],{},"https:\u002F\u002Fsports.bzzoiro.com\u002Fimg\u002Fteam\u002F{team_id}\u002F",[149,1245,1246],{},"图片加载失败时显示中文队名首字兜底（如\"中\"代表\"中国\"）",[175,1248,1249],{"id":1249},"空值兜底",[146,1251,1252,1255],{},[149,1253,1254],{},"预测数据在比赛临近时才生成，代码已做\"暂无预测\"空值处理",[149,1256,1257],{},"API 请求封装统一超时和错误处理，网络异常时展示重试按钮",[168,1259],{},[110,1261,1263],{"id":1262},"七可扩展与复盘","七、可扩展与复盘",[146,1265,1266,1272,1278,1284,1290,1296],{},[149,1267,1268,1271],{},[119,1269,1270],{},"实时比分推送","：接入 WebSocket 实现实时比分更新",[149,1273,1274,1277],{},[119,1275,1276],{},"用户预测竞猜","：支持用户提交自己的预测，与 AI 对比排名",[149,1279,1280,1283],{},[119,1281,1282],{},"历史赛事分析","：积累完赛数据后提供球队\u002F联赛维度的历史统计",[149,1285,1286,1289],{},[119,1287,1288],{},"社交分享","：分享预测结果到微信好友\u002F朋友圈",[149,1291,1292,1295],{},[119,1293,1294],{},"多语言支持","：扩展英文、日文等国际化版本",[149,1297,1298,1301],{},[119,1299,1300],{},"多联赛覆盖","：除世界杯外支持欧洲杯、英超、西甲等主流联赛",[168,1303],{},{"title":461,"searchDepth":674,"depth":674,"links":1305},[1306,1307,1311,1316,1324,1325,1330],{"id":112,"depth":677,"text":113},{"id":172,"depth":677,"text":173,"children":1308},[1309,1310],{"id":177,"depth":674,"text":177},{"id":194,"depth":674,"text":194},{"id":237,"depth":677,"text":238,"children":1312},[1313,1314,1315],{"id":241,"depth":674,"text":241},{"id":928,"depth":674,"text":928},{"id":451,"depth":674,"text":451},{"id":466,"depth":677,"text":467,"children":1317},[1318,1319,1320,1321,1322,1323],{"id":949,"depth":674,"text":950},{"id":988,"depth":674,"text":989},{"id":1023,"depth":674,"text":1024},{"id":1098,"depth":674,"text":1099},{"id":1128,"depth":674,"text":1129},{"id":1153,"depth":674,"text":1154},{"id":611,"depth":677,"text":612},{"id":1201,"depth":677,"text":1202,"children":1326},[1327,1328,1329],{"id":1205,"depth":674,"text":1205},{"id":1228,"depth":674,"text":1229},{"id":1249,"depth":674,"text":1249},{"id":1262,"depth":677,"text":1263},"2025-05","基于 uni-app 的世界杯赛事 AI 预测微信小程序",{},"\u002Fprojects\u002Ffootball-ai-worldcup-prediction",{"title":709,"description":1332},"projects\u002Ffootball-ai-worldcup-prediction","2026 世界杯足球赛事 AI 智能预测应用，接入 BSD Sports Data API 获取赛事与赔率数据，前端进行 AI 预测结果分析与展示。支持赛程浏览、积分榜、AI 预测推荐、赔率对比与市场预期，微信一键登录。","uni-app, Vue 3, uniCloud, BSD Sports Data API, SCSS","kV2fJWn2u6hhkE9b1kvAfc5Bl3TugbD2cFM6OIbNRLs",{"id":1341,"title":1342,"body":1343,"date":1331,"description":1980,"extension":698,"meta":1981,"navigation":700,"path":1982,"seo":1983,"stem":1984,"summary":1985,"tech_stack":1986,"__hash__":1987},"projects\u002Fprojects\u002Fyikang-health-manager.md","宜康管家 - 手绘风服药提醒与血压监测",{"type":102,"value":1344,"toc":1953},[1345,1349,1351,1374,1391,1393,1395,1397,1411,1413,1441,1443,1445,1447,1571,1573,1579,1581,1583,1587,1592,1600,1605,1634,1639,1650,1654,1678,1682,1713,1717,1739,1741,1745,1748,1751,1822,1825,1859,1861,1865,1868,1879,1882,1897,1900,1911,1913,1915,1951],[105,1346,1348],{"id":1347},"宜康管家控压-手绘风服药提醒与血压监测","宜康管家（控压）— 手绘风服药提醒与血压监测",[110,1350,113],{"id":112},[115,1352,1353,1354,1357,1358,1361,1362,1365,1366,1369,1370,1373],{},"高血压患者需要长期按时服药并定期监测血压，但市面上多数健康管理应用界面冰冷、操作复杂，且服药提醒不够精确（依赖 JS 定时器，App 被杀后失效）。",[119,1355,1356],{},"宜康管家（控压）"," 是一款面向高血压患者的手绘风格健康管家应用，以",[119,1359,1360],{},"智能服药提醒","和",[119,1363,1364],{},"血压监测记录","为核心功能，在 Android 端使用",[119,1367,1368],{},"原生 AlarmManager 精确闹钟","确保提醒不遗漏，UI 采用独特的",[119,1371,1372],{},"手绘美学","设计，让健康管理更有温度。",[146,1375,1376,1381,1386],{},[149,1377,1378,1380],{},[119,1379,153],{},"：原生移动应用（Android 主力 + iOS + HarmonyOS）",[149,1382,1383,1385],{},[119,1384,159],{},"：智能服药提醒（原生闹钟）、血压等级监测、服药历史追踪、完全离线使用",[149,1387,1388,1390],{},[119,1389,165],{},"：高血压及慢性病患者日常服药管理与血压监测",[168,1392],{},[110,1394,173],{"id":172},[175,1396,177],{"id":177},[146,1398,1399,1402,1405,1408],{},[149,1400,1401],{},"慢性病患者需长期按时服药，但常因遗忘或外出导致漏服",[149,1403,1404],{},"普通提醒类 App 依赖 JS 定时器，App 被系统杀死后提醒失效",[149,1406,1407],{},"血压数据记录分散，缺乏等级分类与可视化呈现",[149,1409,1410],{},"医疗类应用界面过于冰冷，老年用户使用门槛高",[175,1412,194],{"id":194},[146,1414,1415,1422,1428,1435],{},[149,1416,1417,1418,1421],{},"实现",[119,1419,1420],{},"可靠的服药提醒","，即使 App 不在前台也能准时提醒",[149,1423,222,1424,1427],{},[119,1425,1426],{},"血压等级分类","（正常\u002F正常高值\u002F1-3级高血压），帮助患者自我评估",[149,1429,1430,1431,1434],{},"采用",[119,1432,1433],{},"手绘风格 UI","，降低使用门槛，提升亲和力",[149,1436,1437,1440],{},[119,1438,1439],{},"完全离线运行","，无需注册、无需联网，保护用户隐私",[168,1442],{},[110,1444,238],{"id":237},[175,1446,241],{"id":241},[243,1448,1449,1459],{},[246,1450,1451],{},[249,1452,1453,1455,1457],{},[252,1454,254],{},[252,1456,257],{},[252,1458,260],{},[262,1460,1461,1473,1485,1498,1513,1525,1538,1550,1560],{},[249,1462,1463,1467,1470],{},[267,1464,1465],{},[119,1466,829],{},[267,1468,1469],{},"uni-app x (DCloud)",[267,1471,1472],{},"支持 Android \u002F iOS \u002F HarmonyOS",[249,1474,1475,1479,1481],{},[267,1476,1477],{},[119,1478,284],{},[267,1480,287],{},[267,1482,1483,848],{},[291,1484,293],{},[249,1486,1487,1492,1495],{},[267,1488,1489],{},[119,1490,1491],{},"开发语言",[267,1493,1494],{},"UTS (TypeScript 方言)",[267,1496,1497],{},"uni-app x 原生开发语言",[249,1499,1500,1505,1510],{},[267,1501,1502],{},[119,1503,1504],{},"模板格式",[267,1506,1507],{},[291,1508,1509],{},".uvue",[267,1511,1512],{},"uni-app x Vue 单文件组件",[249,1514,1515,1519,1522],{},[267,1516,1517],{},[119,1518,301],{},[267,1520,1521],{},"SCSS + 手绘主题",[267,1523,1524],{},"不均匀圆角 + 粗边框 + 投影",[249,1526,1527,1532,1535],{},[267,1528,1529],{},[119,1530,1531],{},"原生插件",[267,1533,1534],{},"yk-native-alarm (UTS)",[267,1536,1537],{},"Android AlarmManager 精确闹钟",[249,1539,1540,1544,1547],{},[267,1541,1542],{},[119,1543,379],{},[267,1545,1546],{},"uni.getStorageSync \u002F setStorageSync",[267,1548,1549],{},"完全离线数据持久化",[249,1551,1552,1556,1558],{},[267,1553,1554],{},[119,1555,906],{},[267,1557,909],{},[267,1559,912],{},[249,1561,1562,1566,1568],{},[267,1563,1564],{},[119,1565,919],{},[267,1567,922],{},[267,1569,1570],{},"Material Design Icons 自定义字体",[175,1572,451],{"id":451},[453,1574,1577],{"className":1575,"code":1576,"language":458},[456],"宜康管家\u002F\n├── pages\u002F                         # 5 个应用页面\n│   ├── index\u002Findex.uvue           # 首页 — 今日用药列表 + 状态切换\n│   ├── add-medicine\u002Fadd-medicine.uvue  # 添加\u002F编辑药品表单\n│   ├── detail\u002Fdetail.uvue         # 药品详情（倒计时 + 7天历史）\n│   ├── records\u002Frecords.uvue       # 血压记录（测量 + 历史）\n│   └── mine\u002Fmine.uvue            # \"我的\" 页面（关于 + 使用说明）\n├── components\u002F                    # 可复用组件\n│   ├── TabBar\u002FTabBar.uvue         # 底部导航栏（首页\u002F记录\u002F我的）\n│   ├── TimePicker\u002FTimePicker.uvue # 时间选择器（AM\u002FPM + 小时\u002F分钟网格）\n│   └── FrequencyPicker\u002FFrequencyPicker.uvue  # 频率选择器（每日\u002F自定义星期）\n├── utils\u002F                         # 工具模块\n│   ├── storage.uts                # 数据持久化（药品、历史、血压记录）\n│   ├── frequency.uts              # 频率解析与校验\n│   ├── NotificationService.uts    # 核心提醒引擎（JS + 原生双方案）\n│   └── platform-notification\u002F     # 平台专属通知\n│       ├── android.uts            # Android 原生闹钟调度\n│       └── ios.uts                # iOS push 消息调度\n├── uni_modules\u002F\n│   ├── yk-native-alarm\u002F           # 自定义 UTS 原生 Android 闹钟插件\n│   └── jk-icon\u002F                   # 自定义图标字体生成器\n└── static\u002F                        # 静态资源 + 字体文件\n",[291,1578,1576],{"__ignoreMap":461},[168,1580],{},[110,1582,467],{"id":466},[175,1584,1586],{"id":1585},"_1智能服药提醒双引擎架构","1）智能服药提醒（双引擎架构）",[115,1588,1589],{},[119,1590,1591],{},"JS 引擎（通用兜底）：",[146,1593,1594,1597],{},[149,1595,1596],{},"30 秒轮询间隔 + 每个药品独立的 setTimeout 调度",[149,1598,1599],{},"适用于非 Android 平台或非\"每日1次\"的提醒场景",[115,1601,1602],{},[119,1603,1604],{},"Android 原生引擎（精确可靠）：",[146,1606,1607,1614,1621,1624,1631],{},[149,1608,1609,1610,1613],{},"使用 ",[291,1611,1612],{},"AlarmManager.setAlarmClock()"," 设置精确系统闹钟，App 被杀后仍可触发",[149,1615,1616,1617,1620],{},"自定义 ",[291,1618,1619],{},"BroadcastReceiver","（MedicineAlarmReceiver）接收闹钟广播并发送通知",[149,1622,1623],{},"5 分钟间隔重复提醒，持续 30 分钟，直到用户响应",[149,1625,1626,1627,1630],{},"监听 ",[291,1628,1629],{},"BOOT_COMPLETED"," 广播，设备重启后自动恢复所有闹钟",[149,1632,1633],{},"Android 12+ 自动检查并请求精确闹钟权限",[115,1635,1636],{},[119,1637,1638],{},"通知交互：",[146,1640,1641,1644,1647],{},[149,1642,1643],{},"点击\"已服\"：取消今日所有重复提醒，安排明日闹钟",[149,1645,1646],{},"点击\"稍后\"：清除重复提醒，10 分钟后发送新提醒",[149,1648,1649],{},"点击\"待服\"：重置状态为待处理，恢复提醒",[175,1651,1653],{"id":1652},"_2今日用药管理","2）今日用药管理",[146,1655,1656,1659,1662,1675],{},[149,1657,1658],{},"根据频率规则和当天星期过滤展示今日用药",[149,1660,1661],{},"每个药品卡片展示：时间（24h + AM\u002FPM）、药名、剂量、状态徽章",[149,1663,1664,1665,1668,1669,1668,1672],{},"状态三态切换：",[119,1666,1667],{},"待服"," → ",[119,1670,1671],{},"已服",[119,1673,1674],{},"稍后",[149,1676,1677],{},"支持 FAB 浮动按钮快速添加药品",[175,1679,1681],{"id":1680},"_3血压监测与等级分类","3）血压监测与等级分类",[146,1683,1684,1687,1707,1710],{},[149,1685,1686],{},"输入收缩压（30-300）、舒张压（10-200）、心率（20-300），含范围校验",[149,1688,1689,1690],{},"自动按中国高血压防治指南分级，颜色编码展示：\n",[146,1691,1692,1695,1698,1701,1704],{},[149,1693,1694],{},"🟢 正常（\u003C120\u002F80）",[149,1696,1697],{},"🟡 正常高值（120-139\u002F80-89）",[149,1699,1700],{},"🟠 1级高血压（140-159\u002F90-99）",[149,1702,1703],{},"🔴 2级高血压（160-179\u002F100-109）",[149,1705,1706],{},"⭕ 3级高血压（≥180\u002F110）",[149,1708,1709],{},"最近一次测量大号卡片突出显示",[149,1711,1712],{},"最多存储 30 条历史记录，最新优先",[175,1714,1716],{"id":1715},"_4药品详情与服药历史","4）药品详情与服药历史",[146,1718,1719,1722,1736],{},[149,1720,1721],{},"下次服药倒计时动态计算（\"X小时 Y分钟\"）",[149,1723,1724,1725],{},"7 天服药历史视图，颜色编码：\n",[146,1726,1727,1730,1733],{},[149,1728,1729],{},"红色 = 已服（✓ 图标）",[149,1731,1732],{},"黄色 = 今天（○ 图标）",[149,1734,1735],{},"灰色 = 错过\u002F跳过（✗ 图标）",[149,1737,1738],{},"编辑和删除药品功能",[168,1740],{},[110,1742,1744],{"id":1743},"五设计系统-手绘风格","五、设计系统 — 手绘风格",[115,1746,1747],{},"项目采用独特的手绘风格设计，打破医疗类应用的冰冷感：",[175,1749,1750],{"id":1750},"配色",[243,1752,1753,1765],{},[246,1754,1755],{},[249,1756,1757,1760,1763],{},[252,1758,1759],{},"用途",[252,1761,1762],{},"颜色",[252,1764,260],{},[262,1766,1767,1780,1796,1809],{},[249,1768,1769,1772,1777],{},[267,1770,1771],{},"背景",[267,1773,1774],{},[291,1775,1776],{},"#fdfbf7",[267,1778,1779],{},"暖米白色",[249,1781,1782,1785,1793],{},[267,1783,1784],{},"卡片",[267,1786,1787,441,1790],{},[291,1788,1789],{},"#ffffff",[291,1791,1792],{},"#fff9c4",[267,1794,1795],{},"白色 \u002F 暖黄色",[249,1797,1798,1801,1806],{},[267,1799,1800],{},"主色",[267,1802,1803],{},[291,1804,1805],{},"#ff4d4d",[267,1807,1808],{},"红色 — 行动按钮、已服状态",[249,1810,1811,1814,1819],{},[267,1812,1813],{},"边框",[267,1815,1816],{},[291,1817,1818],{},"#2d2d2d",[267,1820,1821],{},"深灰粗边框",[175,1823,1824],{"id":1824},"手绘特征",[146,1826,1827,1837,1850],{},[149,1828,1829,1832,1833,1836],{},[119,1830,1831],{},"不均匀圆角","：卡片 ",[291,1834,1835],{},"18rpx 6rpx 18rpx 6rpx","，模拟手绘不规则感",[149,1838,1839,1842,1843,1846,1847],{},[119,1840,1841],{},"粗边框 + 偏移投影","：",[291,1844,1845],{},"border: 3rpx solid #2d2d2d"," + ",[291,1848,1849],{},"box-shadow: 8rpx 8rpx 0 0 #2d2d2d",[149,1851,1852,1855,1856],{},[119,1853,1854],{},"手写字体","：标题使用 ",[291,1857,1858],{},"font-family: cursive, sans-serif",[168,1860],{},[110,1862,1864],{"id":1863},"六项目亮点","六、项目亮点",[175,1866,1867],{"id":1867},"可靠性",[146,1869,1870,1873,1876],{},[149,1871,1872],{},"Android 端使用原生 AlarmManager 精确闹钟，即使 App 不在前台也能准时提醒",[149,1874,1875],{},"设备重启后自动恢复所有闹钟，确保提醒不丢失",[149,1877,1878],{},"基于 SharedPreferences 去重，防止重复安排",[175,1880,1881],{"id":1881},"隐私性",[146,1883,1884,1887,1894],{},[149,1885,1886],{},"完全离线运行，无需注册、无需联网",[149,1888,1889,1890,1893],{},"所有数据通过 ",[291,1891,1892],{},"uni.setStorageSync"," 本地存储",[149,1895,1896],{},"无远程推送、无数据上报",[175,1898,1899],{"id":1899},"体验感",[146,1901,1902,1905,1908],{},[149,1903,1904],{},"手绘风格 UI 降低使用门槛，亲和力强",[149,1906,1907],{},"三态状态切换（待服\u002F已服\u002F稍后）交互简洁",[149,1909,1910],{},"血压等级颜色编码，一目了然",[168,1912],{},[110,1914,1263],{"id":1262},[146,1916,1917,1927,1933,1939,1945],{},[149,1918,1919,1922,1923,1926],{},[119,1920,1921],{},"iOS 原生提醒","：当前 iOS 使用 ",[291,1924,1925],{},"uni.createPushMessage"," 延迟调度，后续可开发原生 UTS 插件实现更精确的本地通知",[149,1928,1929,1932],{},[119,1930,1931],{},"数据导出","：支持将血压记录导出为 PDF\u002FExcel，方便就医时提供",[149,1934,1935,1938],{},[119,1936,1937],{},"趋势图表","：增加血压趋势折线图，帮助患者观察长期变化",[149,1940,1941,1944],{},[119,1942,1943],{},"家人共享","：通过局域网或蓝牙实现家属端同步查看老人用药与血压状态",[149,1946,1947,1950],{},[119,1948,1949],{},"鸿蒙原生","：适配 HarmonyOS NEXT 原生开发",[168,1952],{},{"title":461,"searchDepth":674,"depth":674,"links":1954},[1955,1956,1960,1964,1970,1974,1979],{"id":112,"depth":677,"text":113},{"id":172,"depth":677,"text":173,"children":1957},[1958,1959],{"id":177,"depth":674,"text":177},{"id":194,"depth":674,"text":194},{"id":237,"depth":677,"text":238,"children":1961},[1962,1963],{"id":241,"depth":674,"text":241},{"id":451,"depth":674,"text":451},{"id":466,"depth":677,"text":467,"children":1965},[1966,1967,1968,1969],{"id":1585,"depth":674,"text":1586},{"id":1652,"depth":674,"text":1653},{"id":1680,"depth":674,"text":1681},{"id":1715,"depth":674,"text":1716},{"id":1743,"depth":677,"text":1744,"children":1971},[1972,1973],{"id":1750,"depth":674,"text":1750},{"id":1824,"depth":674,"text":1824},{"id":1863,"depth":677,"text":1864,"children":1975},[1976,1977,1978],{"id":1867,"depth":674,"text":1867},{"id":1881,"depth":674,"text":1881},{"id":1899,"depth":674,"text":1899},{"id":1262,"depth":677,"text":1263},"基于 uni-app x 的手绘风格健康管家应用，支持服药提醒与血压监测",{},"\u002Fprojects\u002Fyikang-health-manager",{"title":1342,"description":1980},"projects\u002Fyikang-health-manager","面向高血压患者的移动健康应用，核心功能为智能服药提醒与血压监测记录。采用 uni-app x + Vue 3 + UTS 构建，Android 端使用原生 AlarmManager 精确闹钟，UI 采用独特手绘风格设计，完全离线本地存储。","uni-app x, Vue 3, UTS, Android AlarmManager, SCSS","UI9AhDZyltzDkyRvzjsfLy1ubmTUmOhxrRLRs62z06M",[1989,3277,5284],{"id":1990,"title":1991,"body":1992,"date":3266,"description":3267,"extension":698,"meta":3268,"navigation":700,"path":3269,"seo":3270,"stem":3271,"tags":3272,"__hash__":3276},"blogs\u002Fblogs\u002FLlamaIndex.md","LlamaIndex",{"type":102,"value":1993,"toc":3230},[1994,2000,2005,2009,2013,2016,2019,2022,2025,2030,2395,2400,2406,2477,2522,2526,2575,2600,2602,2606,2609,2613,2616,2620,2623,2680,2684,2687,2690,2703,2778,2785,2864,2868,2875,2879,2882,2904,2917,2921,2924,2928,2931,2935,2939,2942,2946,2953,2962,2969,2975,2992,2997,3000,3011,3015,3018,3026,3029,3041,3045,3048,3051,3054,3058,3061,3064,3067,3071,3075,3078,3082,3085,3093,3096,3113,3117,3120,3123,3126,3132,3135,3138,3141,3144,3148,3151,3154,3162,3168,3192,3196,3205,3209,3212,3226],[115,1995,1996,1997],{},"LlamaIndex 是一个专门为 RAG（检索增强生成）应用而生的开发框架。简单来说，它的核心作用是",[119,1998,1999],{},"帮你把私有的、不在大模型训练数据里的数据（如 PDF、API、SQL 数据库等）连接给大模型，让模型能基于这些数据回答问题和执行任务",[115,2001,2002],{},[119,2003,2004],{},"工作流程图：",[2006,2007],"mermaid",{"code":2008},"flowchart TD\n    subgraph 索引阶段\n        A[📄 原始文档] --> B[✂️ 切片\u003Cbr\u002F>Chunking]\n        B --> C[🔢 向量化\u003Cbr\u002F>Embedding]\n        C --> D[🗂️ 向量索引\u003Cbr\u002F>Vector Index]\n    end\n    \n    subgraph 查询阶段\n        E[❓ 用户问题] --> F[🔢 问题向量化]\n        F --> G[🔍 相似度检索\u003Cbr\u002F>Top-K]\n    end\n    \n    D --> G\n    G --> H[🤝 上下文 + 问题]\n    H --> I[🤖 LLM 生成]\n    I --> J[💡 最终答案]",[110,2010,2012],{"id":2011},"一使用llamalndex快速实现rag应用","一、使用Llamalndex快速实现RAG应用",[115,2014,2015],{},"通过Agent智能体构建大模型应用的方式，在很多业务场景中，都是非常有效的。不过，Agent却并不是Llamalndex的重点。",[115,2017,2018],{},"一方面，现在业界有LangChain框架，更适合构建Agelnt智能体。另一方面，除了Agent，业界还有大语言模型更重要的使用场景RAG。",[115,2020,2021],{},"RAG全称Retrieval Augmented Generation，检索增强生成。这是一种大模型应用落地最成熟的方式。RAG的核心思想是在询问大语言大语言模型时，给大语言模型提供更多的本地信息作为参考，从而让大语言模型能够更好的理解用户的问题，给出更有针对性的答案。",[115,2023,2024],{},"回到之前的案例，我们希望大语言模型回答\"怎么还款\"这个问题时，其实最需要的，还不是提供Agent，而是希望给大语言模型提供我们自己业务平台的业务规则，这样大语言模型才能根据业务规则，给出更符合业务场景的答案。",[115,2026,2027],{},[119,2028,2029],{},"Llamalndex简单案例：",[453,2031,2035],{"className":2032,"code":2033,"language":2034,"meta":461,"style":461},"language-python shiki shiki-themes one-dark-pro","from llama_index.core import SimpleDirectoryReader, VectorStoreIndex, Settings\nfrom langchain_community.chat_models import ChatTongyi\nfrom llama_index.embeddings.dashscope import (\n    DashScopeEmbedding,\n    DashScopeTextEmbeddingModels,\n    DashScopeTextEmbeddingType\n)\n\nfrom dotenv import load_dotenv\nimport os\n\nload_dotenv()\n\nSettings.embed_model = DashScopeEmbedding(\n    model_name=DashScopeTextEmbeddingModels.TEXT_EMBEDDING_V2,\n    text_type=DashScopeTextEmbeddingType.TEXT_TYPE_DOCUMENT,\n    api_key=os.getenv(\"BAILIAN_API_KEY\")\n)\n\nSettings.llm = ChatTongyi(\n    model=\"qwen-plus\",\n    api_key=os.getenv(\"BAILIAN_API_KEY\")\n)\n# 导入文档，只需提供文件夹名称即可，会自动读取该文件夹下的文档\ndocuments = SimpleDirectoryReader(\"data\").load_data()\n# 为文档建立索引\nindex = VectorStoreIndex.from_documents(documents)\n# 创建查询引擎\nquery_engine = index.as_query_engine()\n# 输入查询问题，打印结果\nresponse = query_engine.query(\"烟花爆竹零售店外部最小距离有什么要求\")\nprint(response)\n","python",[291,2036,2037,2056,2068,2080,2086,2092,2098,2104,2110,2123,2131,2136,2146,2151,2167,2186,2202,2225,2230,2235,2248,2261,2278,2283,2290,2314,2320,2337,2343,2359,2365,2386],{"__ignoreMap":461},[2038,2039,2042,2046,2050,2053],"span",{"class":2040,"line":2041},"line",1,[2038,2043,2045],{"class":2044},"seHd6","from",[2038,2047,2049],{"class":2048},"sn6KH"," llama_index.core ",[2038,2051,2052],{"class":2044},"import",[2038,2054,2055],{"class":2048}," SimpleDirectoryReader, VectorStoreIndex, Settings\n",[2038,2057,2058,2060,2063,2065],{"class":2040,"line":677},[2038,2059,2045],{"class":2044},[2038,2061,2062],{"class":2048}," langchain_community.chat_models ",[2038,2064,2052],{"class":2044},[2038,2066,2067],{"class":2048}," ChatTongyi\n",[2038,2069,2070,2072,2075,2077],{"class":2040,"line":674},[2038,2071,2045],{"class":2044},[2038,2073,2074],{"class":2048}," llama_index.embeddings.dashscope ",[2038,2076,2052],{"class":2044},[2038,2078,2079],{"class":2048}," (\n",[2038,2081,2083],{"class":2040,"line":2082},4,[2038,2084,2085],{"class":2048},"    DashScopeEmbedding,\n",[2038,2087,2089],{"class":2040,"line":2088},5,[2038,2090,2091],{"class":2048},"    DashScopeTextEmbeddingModels,\n",[2038,2093,2095],{"class":2040,"line":2094},6,[2038,2096,2097],{"class":2048},"    DashScopeTextEmbeddingType\n",[2038,2099,2101],{"class":2040,"line":2100},7,[2038,2102,2103],{"class":2048},")\n",[2038,2105,2107],{"class":2040,"line":2106},8,[2038,2108,2109],{"emptyLinePlaceholder":700},"\n",[2038,2111,2113,2115,2118,2120],{"class":2040,"line":2112},9,[2038,2114,2045],{"class":2044},[2038,2116,2117],{"class":2048}," dotenv ",[2038,2119,2052],{"class":2044},[2038,2121,2122],{"class":2048}," load_dotenv\n",[2038,2124,2126,2128],{"class":2040,"line":2125},10,[2038,2127,2052],{"class":2044},[2038,2129,2130],{"class":2048}," os\n",[2038,2132,2134],{"class":2040,"line":2133},11,[2038,2135,2109],{"emptyLinePlaceholder":700},[2038,2137,2139,2143],{"class":2040,"line":2138},12,[2038,2140,2142],{"class":2141},"sVbv2","load_dotenv",[2038,2144,2145],{"class":2048},"()\n",[2038,2147,2149],{"class":2040,"line":2148},13,[2038,2150,2109],{"emptyLinePlaceholder":700},[2038,2152,2154,2157,2161,2164],{"class":2040,"line":2153},14,[2038,2155,2156],{"class":2048},"Settings.embed_model ",[2038,2158,2160],{"class":2159},"sjrmR","=",[2038,2162,2163],{"class":2141}," DashScopeEmbedding",[2038,2165,2166],{"class":2048},"(\n",[2038,2168,2170,2174,2176,2179,2183],{"class":2040,"line":2169},15,[2038,2171,2173],{"class":2172},"s_ZVi","    model_name",[2038,2175,2160],{"class":2159},[2038,2177,2178],{"class":2048},"DashScopeTextEmbeddingModels.",[2038,2180,2182],{"class":2181},"sVC51","TEXT_EMBEDDING_V2",[2038,2184,2185],{"class":2048},",\n",[2038,2187,2189,2192,2194,2197,2200],{"class":2040,"line":2188},16,[2038,2190,2191],{"class":2172},"    text_type",[2038,2193,2160],{"class":2159},[2038,2195,2196],{"class":2048},"DashScopeTextEmbeddingType.",[2038,2198,2199],{"class":2181},"TEXT_TYPE_DOCUMENT",[2038,2201,2185],{"class":2048},[2038,2203,2205,2208,2210,2213,2216,2219,2223],{"class":2040,"line":2204},17,[2038,2206,2207],{"class":2172},"    api_key",[2038,2209,2160],{"class":2159},[2038,2211,2212],{"class":2048},"os.",[2038,2214,2215],{"class":2141},"getenv",[2038,2217,2218],{"class":2048},"(",[2038,2220,2222],{"class":2221},"subq3","\"BAILIAN_API_KEY\"",[2038,2224,2103],{"class":2048},[2038,2226,2228],{"class":2040,"line":2227},18,[2038,2229,2103],{"class":2048},[2038,2231,2233],{"class":2040,"line":2232},19,[2038,2234,2109],{"emptyLinePlaceholder":700},[2038,2236,2238,2241,2243,2246],{"class":2040,"line":2237},20,[2038,2239,2240],{"class":2048},"Settings.llm ",[2038,2242,2160],{"class":2159},[2038,2244,2245],{"class":2141}," ChatTongyi",[2038,2247,2166],{"class":2048},[2038,2249,2251,2254,2256,2259],{"class":2040,"line":2250},21,[2038,2252,2253],{"class":2172},"    model",[2038,2255,2160],{"class":2159},[2038,2257,2258],{"class":2221},"\"qwen-plus\"",[2038,2260,2185],{"class":2048},[2038,2262,2264,2266,2268,2270,2272,2274,2276],{"class":2040,"line":2263},22,[2038,2265,2207],{"class":2172},[2038,2267,2160],{"class":2159},[2038,2269,2212],{"class":2048},[2038,2271,2215],{"class":2141},[2038,2273,2218],{"class":2048},[2038,2275,2222],{"class":2221},[2038,2277,2103],{"class":2048},[2038,2279,2281],{"class":2040,"line":2280},23,[2038,2282,2103],{"class":2048},[2038,2284,2286],{"class":2040,"line":2285},24,[2038,2287,2289],{"class":2288},"sV9Aq","# 导入文档，只需提供文件夹名称即可，会自动读取该文件夹下的文档\n",[2038,2291,2293,2296,2298,2301,2303,2306,2309,2312],{"class":2040,"line":2292},25,[2038,2294,2295],{"class":2048},"documents ",[2038,2297,2160],{"class":2159},[2038,2299,2300],{"class":2141}," SimpleDirectoryReader",[2038,2302,2218],{"class":2048},[2038,2304,2305],{"class":2221},"\"data\"",[2038,2307,2308],{"class":2048},").",[2038,2310,2311],{"class":2141},"load_data",[2038,2313,2145],{"class":2048},[2038,2315,2317],{"class":2040,"line":2316},26,[2038,2318,2319],{"class":2288},"# 为文档建立索引\n",[2038,2321,2323,2326,2328,2331,2334],{"class":2040,"line":2322},27,[2038,2324,2325],{"class":2048},"index ",[2038,2327,2160],{"class":2159},[2038,2329,2330],{"class":2048}," VectorStoreIndex.",[2038,2332,2333],{"class":2141},"from_documents",[2038,2335,2336],{"class":2048},"(documents)\n",[2038,2338,2340],{"class":2040,"line":2339},28,[2038,2341,2342],{"class":2288},"# 创建查询引擎\n",[2038,2344,2346,2349,2351,2354,2357],{"class":2040,"line":2345},29,[2038,2347,2348],{"class":2048},"query_engine ",[2038,2350,2160],{"class":2159},[2038,2352,2353],{"class":2048}," index.",[2038,2355,2356],{"class":2141},"as_query_engine",[2038,2358,2145],{"class":2048},[2038,2360,2362],{"class":2040,"line":2361},30,[2038,2363,2364],{"class":2288},"# 输入查询问题，打印结果\n",[2038,2366,2368,2371,2373,2376,2379,2381,2384],{"class":2040,"line":2367},31,[2038,2369,2370],{"class":2048},"response ",[2038,2372,2160],{"class":2159},[2038,2374,2375],{"class":2048}," query_engine.",[2038,2377,2378],{"class":2141},"query",[2038,2380,2218],{"class":2048},[2038,2382,2383],{"class":2221},"\"烟花爆竹零售店外部最小距离有什么要求\"",[2038,2385,2103],{"class":2048},[2038,2387,2389,2392],{"class":2040,"line":2388},32,[2038,2390,2391],{"class":2159},"print",[2038,2393,2394],{"class":2048},"(response)\n",[115,2396,2397],{},[119,2398,2399],{},"代码解读：",[175,2401,2403],{"id":2402},"_1设置向量化embedding模型",[119,2404,2405],{},"1、设置「向量化（Embedding）模型」",[453,2407,2409],{"className":2032,"code":2408,"language":2034,"meta":461,"style":461},"Settings.embed_model = DashScopeEmbedding(\n    model_name=DashScopeTextEmbeddingModels.TEXT_EMBEDDING_V2,  # 模型版本\n    text_type=DashScopeTextEmbeddingType.TEXT_TYPE_DOCUMENT,   # 文档级向量\n    api_key=os.getenv(\"BAILIAN_API_KEY\")                       # 你的 DashScope 密钥\n)\n",[291,2410,2411,2421,2437,2453,2473],{"__ignoreMap":461},[2038,2412,2413,2415,2417,2419],{"class":2040,"line":2041},[2038,2414,2156],{"class":2048},[2038,2416,2160],{"class":2159},[2038,2418,2163],{"class":2141},[2038,2420,2166],{"class":2048},[2038,2422,2423,2425,2427,2429,2431,2434],{"class":2040,"line":677},[2038,2424,2173],{"class":2172},[2038,2426,2160],{"class":2159},[2038,2428,2178],{"class":2048},[2038,2430,2182],{"class":2181},[2038,2432,2433],{"class":2048},",  ",[2038,2435,2436],{"class":2288},"# 模型版本\n",[2038,2438,2439,2441,2443,2445,2447,2450],{"class":2040,"line":674},[2038,2440,2191],{"class":2172},[2038,2442,2160],{"class":2159},[2038,2444,2196],{"class":2048},[2038,2446,2199],{"class":2181},[2038,2448,2449],{"class":2048},",   ",[2038,2451,2452],{"class":2288},"# 文档级向量\n",[2038,2454,2455,2457,2459,2461,2463,2465,2467,2470],{"class":2040,"line":2082},[2038,2456,2207],{"class":2172},[2038,2458,2160],{"class":2159},[2038,2460,2212],{"class":2048},[2038,2462,2215],{"class":2141},[2038,2464,2218],{"class":2048},[2038,2466,2222],{"class":2221},[2038,2468,2469],{"class":2048},")                       ",[2038,2471,2472],{"class":2288},"# 你的 DashScope 密钥\n",[2038,2474,2475],{"class":2040,"line":2088},[2038,2476,2103],{"class":2048},[146,2478,2479,2489,2498,2512],{},[149,2480,2481,2484,2485,2488],{},[119,2482,2483],{},"作用","：把文本变成 1536 维向量，供后续 ",[291,2486,2487],{},"VectorStoreIndex"," 做相似度检索。",[149,2490,2491,1842,2494,2497],{},[119,2492,2493],{},"模型",[291,2495,2496],{},"text-embedding-v2"," 是 DashScope 免费模型，支持中英、8192 token，效果 ≈ OpenAI ada-002。",[149,2499,2500,2503,2504,2507,2508,2511],{},[119,2501,2502],{},"text_type"," 选 ",[291,2505,2506],{},"DOCUMENT"," 表示「一整段文本」级别；如果后续要嵌入用户问题，LlamaIndex 会自动切换为 ",[291,2509,2510],{},"QUERY"," 类型（DashScope 接口区分）。",[149,2513,2514,2517,2518,2521],{},[119,2515,2516],{},"DashScope","：DashScope（中文名“模型服务灵积”）是阿里云推出的 **Model-as-a-Service（MaaS）一站式模型服务平台。**它把「通义千问、CLIP、Paraformer、StableDiffusion」等 400+ 大模型\u002F小模型做成 ",[119,2519,2520],{},"标准化 HTTP API","，开发者无需本地 GPU 即可调用、微调、部署。",[175,2523,2525],{"id":2524},"_2设置大语言模型llm","2、设置「大语言模型（LLM）」",[453,2527,2529],{"className":2032,"code":2528,"language":2034,"meta":461,"style":461},"Settings.llm = ChatTongyi(\n    model=\"qwen-plus\",              # 通义千问 Plus 版本（对标 GPT-3.5）\n    api_key=os.getenv(\"BAILIAN_API_KEY\")\n)\n",[291,2530,2531,2541,2555,2571],{"__ignoreMap":461},[2038,2532,2533,2535,2537,2539],{"class":2040,"line":2041},[2038,2534,2240],{"class":2048},[2038,2536,2160],{"class":2159},[2038,2538,2245],{"class":2141},[2038,2540,2166],{"class":2048},[2038,2542,2543,2545,2547,2549,2552],{"class":2040,"line":677},[2038,2544,2253],{"class":2172},[2038,2546,2160],{"class":2159},[2038,2548,2258],{"class":2221},[2038,2550,2551],{"class":2048},",              ",[2038,2553,2554],{"class":2288},"# 通义千问 Plus 版本（对标 GPT-3.5）\n",[2038,2556,2557,2559,2561,2563,2565,2567,2569],{"class":2040,"line":674},[2038,2558,2207],{"class":2172},[2038,2560,2160],{"class":2159},[2038,2562,2212],{"class":2048},[2038,2564,2215],{"class":2141},[2038,2566,2218],{"class":2048},[2038,2568,2222],{"class":2221},[2038,2570,2103],{"class":2048},[2038,2572,2573],{"class":2040,"line":2082},[2038,2574,2103],{"class":2048},[146,2576,2577,2582,2594],{},[149,2578,2579,2581],{},[119,2580,2483],{},"：负责「理解问题 → 生成答案」；RAG 场景里会拿到检索到的上下文再回答。",[149,2583,2584,1842,2586,2589,2590,2593],{},[119,2585,2493],{},[291,2587,2588],{},"qwen-plus"," 价格比 ",[291,2591,2592],{},"qwen-turbo"," 贵 2×，但推理能力更强；与 DeepSeek\u002FGPT 一样走 OpenAI-Compatible 格式。",[149,2595,2596,2599],{},[119,2597,2598],{},"ChatTongyi"," 是 LlamaIndex 官方封装的 Tongyi 驱动，内部帮你把消息格式、温度、top_p 等转成 DashScope 所需字段。",[168,2601],{},[110,2603,2605],{"id":2604},"二llamaindex基础组件","二、LlamaIndex基础组件",[115,2607,2608],{},"在具体实现时，Lamalndex采用组件化的方式，将大语言模型、向量数据库、索引、数据源等组件进行组合，实现大语言模型与数据源的交互。通过组件化的方式，可以像拼积木一样，将不同的组件进行组合，实现更好的可扩展性。这里就介绍Lamalndex中几个重要的组件。",[175,2610,2612],{"id":2611},"_1prompts-构建提示词","1、Prompts 构建提示词",[115,2614,2615],{},"在和大语言模型交互的过程中，提示词是最为重要的工具。将对提示词的设计和处理封装成几个重要的参数，这也是构建AI应用最简单\n的一种方式。Llamalndex提供了很方便的组件，可以用来构建提示词。",[175,2617,2619],{"id":2618},"_2models-大语言模型","2、Models 大语言模型",[115,2621,2622],{},"Llamalndex通过抽象出LLM和Embedding类型，来实现与不同大语言模型以及向量化模型的兼容性。而针对不同大语言模型的具体实现都被封装到单独的依赖库中。具体参见官网: https:\u002Fdocs.lamaindex.ai\u002Fen\u002Fstable\u002Fmodule_guides\u002Fmodels\u002Flms\u002Fmodules\u002F\n这些不同的依赖库用法大都差不多。以阿里云百炼的Dashscop为例。需要引入对应的依赖库",[453,2624,2626],{"className":2032,"code":2625,"language":2034,"meta":461,"style":461},"#引入dashscope的依赖库\npip install llama-index-llms-dashscope\npip install dashscope\n# 向量化模型库(文本转成向量)\npip install llama-index-embeddings-dashscope\n",[291,2627,2628,2633,2653,2658,2663],{"__ignoreMap":461},[2038,2629,2630],{"class":2040,"line":2041},[2038,2631,2632],{"class":2288},"#引入dashscope的依赖库\n",[2038,2634,2635,2638,2641,2643,2645,2648,2650],{"class":2040,"line":677},[2038,2636,2637],{"class":2048},"pip install llama",[2038,2639,2640],{"class":2159},"-",[2038,2642,53],{"class":2048},[2038,2644,2640],{"class":2159},[2038,2646,2647],{"class":2048},"llms",[2038,2649,2640],{"class":2159},[2038,2651,2652],{"class":2048},"dashscope\n",[2038,2654,2655],{"class":2040,"line":674},[2038,2656,2657],{"class":2048},"pip install dashscope\n",[2038,2659,2660],{"class":2040,"line":2082},[2038,2661,2662],{"class":2288},"# 向量化模型库(文本转成向量)\n",[2038,2664,2665,2667,2669,2671,2673,2676,2678],{"class":2040,"line":2088},[2038,2666,2637],{"class":2048},[2038,2668,2640],{"class":2159},[2038,2670,53],{"class":2048},[2038,2672,2640],{"class":2159},[2038,2674,2675],{"class":2048},"embeddings",[2038,2677,2640],{"class":2159},[2038,2679,2652],{"class":2048},[175,2681,2683],{"id":2682},"_3loading-文档加载组件","3、Loading 文档加载组件",[115,2685,2686],{},"Llamalndex处理本地数据最基本的方式就是把本地档加载成Document，再把文档内容拆分成Node。这些Node就是Llamaindex处理本地数据的基本单位。Llamalndex中的Document可以代表一个本地的资源文件。并且不光是文本文件，图片、音频、视频等资源文件都可以作为Document。",[115,2688,2689],{},"一个Document代表的是一个本地资源文件。在对信息做处理时，则需要把Document拆分成Node，Node就是Llamalndex处理本地数据的基本单位。\n这时候，如何把Document拆分成Node呢?Llamaindex提供了多种NodeParser的具体实现类，用来按照不同的规则拆分Document。",[115,2691,2692,2693,2696,2699,2702],{},"为了简化Document和Node的加载过程，Lamalndex提供了一个非常简单易用的工具类**",[291,2694,2695],{},"SimpleDirectorvReader",[119,2697,2698],{},"。用于从本地目录加载文档。",[291,2700,2701],{},"SimpleDirectoryReader","**能够处理非常多常见的文档，包括csv、docx、md、pdf、png、pptx等多种文档内容。",[453,2704,2706],{"className":2032,"code":2705,"language":2034,"meta":461,"style":461},"from llama_index.core import SimpleDirectoryReader\n\nreader = SimpleDirectoryReader(input_dir=\".\u002Fresource\" ,required_exts=[\".txt\"])\ndocuments = reader.load data()\ndocuments\n",[291,2707,2708,2719,2723,2759,2773],{"__ignoreMap":461},[2038,2709,2710,2712,2714,2716],{"class":2040,"line":2041},[2038,2711,2045],{"class":2044},[2038,2713,2049],{"class":2048},[2038,2715,2052],{"class":2044},[2038,2717,2718],{"class":2048}," SimpleDirectoryReader\n",[2038,2720,2721],{"class":2040,"line":677},[2038,2722,2109],{"emptyLinePlaceholder":700},[2038,2724,2725,2728,2730,2732,2734,2737,2739,2742,2745,2748,2750,2753,2756],{"class":2040,"line":674},[2038,2726,2727],{"class":2048},"reader ",[2038,2729,2160],{"class":2159},[2038,2731,2300],{"class":2141},[2038,2733,2218],{"class":2048},[2038,2735,2736],{"class":2172},"input_dir",[2038,2738,2160],{"class":2159},[2038,2740,2741],{"class":2221},"\".\u002Fresource\"",[2038,2743,2744],{"class":2048}," ,",[2038,2746,2747],{"class":2172},"required_exts",[2038,2749,2160],{"class":2159},[2038,2751,2752],{"class":2048},"[",[2038,2754,2755],{"class":2221},"\".txt\"",[2038,2757,2758],{"class":2048},"])\n",[2038,2760,2761,2763,2765,2768,2771],{"class":2040,"line":2082},[2038,2762,2295],{"class":2048},[2038,2764,2160],{"class":2159},[2038,2766,2767],{"class":2048}," reader.load ",[2038,2769,2770],{"class":2141},"data",[2038,2772,2145],{"class":2048},[2038,2774,2775],{"class":2040,"line":2088},[2038,2776,2777],{"class":2048},"documents\n",[115,2779,2780,2781,2784],{},"大部分常用的文档，比如txt、pdf、docx等，都可以通过SimpleDirectoryReader加载。SimpleDirectoryReader还提供了很多扩展属性可以加载非常多的文件。但是如果遇到一些特殊的文档，也可以通过Llamalndex的设计扩展出来。例如对于常用的JSON文件，或者JSONL文件，SimpleDirectoryReader只能加载出一个文档。但是使用**",[291,2782,2783],{},"JSONReader","**可以解析JSON文件，按照指定的格式加载出多个文档。",[453,2786,2788],{"className":2032,"code":2787,"language":2034,"meta":461,"style":461},"#加载扩展依赖 pip install llama-index-readers-json\nfrom llama_index.readers.json import JSONReader\n\nreader = JSONReader(is_jsonl=True)\ndocuments = reader.load_data(input_file=\".\u002Fjsonl\u002Fencyclopedia.jsonl\", extra_info={})\n",[291,2789,2790,2795,2807,2811,2832],{"__ignoreMap":461},[2038,2791,2792],{"class":2040,"line":2041},[2038,2793,2794],{"class":2288},"#加载扩展依赖 pip install llama-index-readers-json\n",[2038,2796,2797,2799,2802,2804],{"class":2040,"line":677},[2038,2798,2045],{"class":2044},[2038,2800,2801],{"class":2048}," llama_index.readers.json ",[2038,2803,2052],{"class":2044},[2038,2805,2806],{"class":2048}," JSONReader\n",[2038,2808,2809],{"class":2040,"line":674},[2038,2810,2109],{"emptyLinePlaceholder":700},[2038,2812,2813,2815,2817,2820,2822,2825,2827,2830],{"class":2040,"line":2082},[2038,2814,2727],{"class":2048},[2038,2816,2160],{"class":2159},[2038,2818,2819],{"class":2141}," JSONReader",[2038,2821,2218],{"class":2048},[2038,2823,2824],{"class":2172},"is_jsonl",[2038,2826,2160],{"class":2159},[2038,2828,2829],{"class":2181},"True",[2038,2831,2103],{"class":2048},[2038,2833,2834,2836,2838,2841,2843,2845,2848,2850,2853,2856,2859,2861],{"class":2040,"line":2088},[2038,2835,2295],{"class":2048},[2038,2837,2160],{"class":2159},[2038,2839,2840],{"class":2048}," reader.",[2038,2842,2311],{"class":2141},[2038,2844,2218],{"class":2048},[2038,2846,2847],{"class":2172},"input_file",[2038,2849,2160],{"class":2159},[2038,2851,2852],{"class":2221},"\".\u002Fjsonl\u002Fencyclopedia.jsonl\"",[2038,2854,2855],{"class":2048},", ",[2038,2857,2858],{"class":2172},"extra_info",[2038,2860,2160],{"class":2159},[2038,2862,2863],{"class":2048},"{})\n",[175,2865,2867],{"id":2866},"_4indexing-索引组件","4、Indexing 索引组件",[115,2869,2870,2871,2874],{},"Indexing是一种数据结构，允许用户从Indexing中快速检索感兴趣的数据。在Llamalndex中，Index通常可以由一系列的Document构建出来，然后再构建出一个Query Engine或者Chat Eingine。用户就可以基于这些Engine快速检索出感兴趣的数据。在Index内部，则会以Node的形式保存数据。Node则是Document拆出来的一个片段。另外，Index也会暴露出一个Retriever接口，进一步支持文件检索。\n通常用得做多的是**",[291,2872,2873],{},"VectorStorelndex","**，存储自然语言处理后的向量数据。",[175,2876,2878],{"id":2877},"_5storing-数据存储组件","5、Storing 数据存储组件",[115,2880,2881],{},"把数据检索出来之后，当然就是需要存储了。llamalndex提供了非常多的数据存储组件，允许用户定制外部数据存储。",[146,2883,2884,2887,2890,2898,2901],{},[149,2885,2886],{},"Document stores:用来存储Document和Node.",[149,2888,2889],{},"Index stores: 用来存储index相关的元数据。",[149,2891,2892,2897],{},[119,2893,2894],{},[291,2895,2896],{},"Vector stores",": 用来存储向量数据。",[149,2899,2900],{},"Chat stores:用来存储聊天记录。",[149,2902,2903],{},"Property stores: 用来存储知识图谱相关的数据",[115,2905,2906,2907,2909,2910,2916],{},"其中，用的最多的，通常就是**",[291,2908,2896],{},"**向量存储了。\n在Llamalndex中，支持多种外部向量数据库来存储向量。具体参见官网",[2911,2912,2913],"a",{"href":2913,"rel":2914},"https:\u002F\u002Fdocs.llamaindex.ai\u002Fen\u002Fstable\u002Fmodule_guides\u002Fstoring\u002Fvector_stores\u002F",[2915],"nofollow","\n这里以常见的Redis为例。需要注意的是，Redis需要stack插件支持，才能作为向量数据库使用。stack在Redis7版本中需要额外安装，在Redis8中则默认集成了stack，Llamalndex中要使用Redis作为向量存储，需要先添加对应的依赖库。",[175,2918,2920],{"id":2919},"_6querying-查询引擎","6、Querying 查询引擎",[115,2922,2923],{},"查询引擎是Llamalndex中最为核心的组件，因为他是直接暴露给用户的，用户可以基于查询引擎进行查询。 Llamalndex中同样也提供了非常多的Querying组件，用来支持不同的查询场景。\n例如之前使用的Retriever就是一种Querying查询引擎。他的作用主要是检索出和问题最相关的文档。但是Retriever并不直接回答问题。如果需要回答问题，就可以进一步的封装成Query Ergine。",[175,2925,2927],{"id":2926},"_7settings-全局设置","7、Settings 全局设置",[115,2929,2930],{},"Settings是Llamalndlx中的全局设置管理器。它允许用户设置全局的配置，如LLM、索引、查询引擎、Chat Engine等，有了Settings，用户就不用在每个组价中单独配置这些参数了。\n例如Lamalndex默认都是使用的OpenAI相关的组件，在之前的示例中，我们想要使用阿里云百炼的组件就可以使用Settings进行全局设置。",[110,2932,2934],{"id":2933},"三rag应用的评估","三、RAG应用的评估",[175,2936,2938],{"id":2937},"_1建立自动化评测机制","1、建立自动化评测机制",[115,2940,2941],{},"如果我们发现了RAG应用某一个具体问题回答效果不佳，那么我们可以逐步去排查RAG应用在哪个环节出现了问题，并逐步去优化。但通常构建RAG应用时，我们要面临的问题是无穷无尽的。我们不可能穷尽所有问题进行分析。在测试价段就无法对RAG应用形成一个比较正确的评估。测试不充分，自然就无法形成比较靠谱的应用。\n因此，对整个RAG应用进行效果评测的第一步，是需要构建一个自动化的评测体系。通过自动化的评通常则体系进行大量样本的综合分析，这样才能对RAG应用的整体效果进行合理的评估。",[175,2943,2945],{"id":2944},"_2使用ragas评估rag应用表现","2、使用Ragas评估RAG应用表现",[115,2947,2948,2949,2952],{},"这类测试框架有很多，主流的有",[291,2950,2951],{},"Ragas","\\DeepEval\\Trulens等。Llamalndex框架自己也提供了检测功能。甚至按照Llamalndex的设计模式，还提供了和其他主流评测框架集成的实现。",[115,2954,2955,2956,2958,2959,2961],{},"这里就以",[291,2957,2951],{},"为例，来介绍一下如何来评估RAG应用的准确性。",[291,2960,2951],{},"是这个领域里非常著名的一个框架",[115,2963,2964,2965],{},"官网地址：",[2911,2966,2967],{"href":2967,"rel":2968},"https:\u002F\u002Fdocs.ragas.io\u002Fen\u002Fstable\u002Fgetstarted\u002F",[2915],[115,2970,2971,2972,2974],{},"他的核心思想和我们之前的简单应用差不多，也是让大模型来帮助你评估RAG系统，更重要的是，",[291,2973,2951],{},"设计的评估指标非常契合RAG系统的特点。Ragas提供的评测指标有很多，对于RAG应用，主要关注以下几个指标：",[146,2976,2977,2980,2983,2986,2989],{},[149,2978,2979],{},"Answer Correctness, 用于评估 RAG 应用生成答案的准确度。",[149,2981,2982],{},"Context Precision, 用于评估 contexts 中与正确答案相关的条目是否排名靠前、占比高（信噪比）。",[149,2984,2985],{},"Context Recall, 用于评估有多少相关参考资料被检索到。",[149,2987,2988],{},"Answer Relevancy, 用于评估 RAG 应用生成的答案是否与问题相关。",[149,2990,2991],{},"Faithfulness, 用于评估 RAG 应用生成的答案和检索到的参考资料是否一致。",[2993,2994,2996],"h4",{"id":2995},"评估rag应用回答质量","评估RAG应用回答质量：",[115,2998,2999],{},"Ragas提供了Answer Correctness指标，用于评估RAG应用的整体回答质量。使用这个指标时，需要准备以下数据",[146,3001,3002,3005,3008],{},[149,3003,3004],{},"question:输入给RAG应用的样本问题",[149,3006,3007],{},"groud_truth:样本问题的正确答案",[149,3009,3010],{},"answer:RAG应用给出的回答",[2993,3012,3014],{"id":3013},"评估rag应用检索召回的效果","评估RAG应用检索召回的效果：",[115,3016,3017],{},"检索召回阶段，主要使用Context precision和Cantext recall两个指标来评估RAG应用的召回效果。",[146,3019,3020,3023],{},[149,3021,3022],{},"Context precision: precision表示检索出来条目有多少是正确的，或者说相关的。Ragas在评估这个指标时，还会计算与正确答案相关的条目是否靠前、是否占比高。更加则重于相关性。",[149,3024,3025],{},"Context recall:Recall有多少正确的条目被检索出来。主要是评估contexts与groud_truth的一致性，侧重于事实准确度。",[115,3027,3028],{},"计算这些指标时，需要准备以下数据:",[146,3030,3031,3033,3036,3039],{},[149,3032,3004],{},[149,3034,3035],{},"contexts:RAG应用返回的答案片段",[149,3037,3038],{},"ground_truth:问题对应的真实答案",[149,3040,3010],{},[2993,3042,3044],{"id":3043},"ragas核心提示词分析","Ragas核心提示词分析：",[115,3046,3047],{},"Ragas的许多评测指标也是基于大模型实现的。用户可以直接看到Ragas的很多核心提示词，也同样可以替换他的核心提示词。比如把Ragas默认的英文提示词翻译成中文，这样可以让评测结果更符合中文问答场景。",[115,3049,3050],{},"其实，如果你认真分析这些提示词，也大概能够猜想到Ragas一些核心指标的计算过程。 对于answer_crrectness，他的打分过程需要用到LLM大语言模型和Embedding向量化模型。在打分时，会综合计算answer和ground_truth的语义相似度和事实准确度。",[115,3052,3053],{},"语义相似度主要是通过Embedding模型得到answel和ground_truth的文本向量，然后计算两个文本向量的相似度。向量相似度的计算方法有很多种，比如余弦相似度、欧式距离、曼哈顿距离等。Ragas使用的是最常用的余弦相似度。 事实准确度会衡量answer和ground_truth在事实描述上的一些差异。在计算指标时，会把answer和ground_truth拆分成一些相对独立的观点列表，然后综合比较answer和ground_truth的这些观点列表的匹配程度，统计F1指标。\n在计算context_recall和context_precision时，也会采用计算 answe_correctness 相似的方法。拆分成一些观点，再来计算匹配程度。如果你对ragas的具体实现感兴趣，可以尝试去研读Ragas的源码。",[2993,3055,3057],{"id":3056},"总结","总结：",[115,3059,3060],{},"对大模型的能力进行合理的评估，这是深度使用大模型必须要走的一个过程。这一章节介绍了针对RAG应用，构建自动化评测体系的基础思路，也演示了如何通过Ragas构建更专业的评测体系，这些评测的经验都是行业内不可多得的宝贵财富。",[115,3062,3063],{},"对于这些评测框架，我们也只介绍了一些简单的实现。实际上，Ragas除了构建RAG的相关指标外，针对其他大模型的应用场景也构建了非常多的指标。比如针对机器翻译、文本摘要、NI2SQL(自然语言转换成SQL)、Agent等场景，也有非常多的指标。",[115,3065,3066],{},"另外像Llamalndex、Trulens、Deepeval等其他的大模型评测框架也都从同样的角度提供了对大模型进行评则的思路和实现。",[110,3068,3070],{"id":3069},"四优化rag应用提升回答准确度","四、优化RAG应用提升回答准确度",[175,3072,3074],{"id":3073},"_1文档准备阶段","1、文档准备阶段",[115,3076,3077],{},"对RAG应用来说，文档的质量可以说直接决定了整个RAG应用的质量。因此，我们需要针对文档进行持续的优化。比如引入专家验证提升文档质量。跟踪用户反遗，不断调整文档内容。查漏补缺，同时定期剔除无关的或过时的内容，都是必要的措施。",[175,3079,3081],{"id":3080},"_2文档解析与切片阶段","2、文档解析与切片阶段",[115,3083,3084],{},"在使用Llamalndex构建RAG应用时，他是会自动挥析文档内容并进行切片的。这对于大部分的场景是够的。但是，实际工作中，当文档变得更复杂时，对文档进行合理的解析和切片就变得非常重要了。",[115,3086,3087,3088,3092],{},"比如，在Llamalndex中，通常使用SimpleDirectdryReader加载本地文件，实际上，Llamalndex同样提供了一些扩展插件，可以加载Notion、Slack、Discord、Google Docs等外部自文档。具体可以参见:",[2911,3089,3090],{"href":3090,"rel":3091},"https:\u002F\u002Fdocs.llamaindex.ai\u002Fen\u002Fstable\u002Fmodule",[2915]," guides\u002Floading\u002Fconnector\u002Fmodules\u002F",[115,3094,3095],{},"当文档多了之后，如果文档来源不统一，文档形式又五花八门，这是不利于统一进行解析的。我们上面就演示了把PDF格式的文档转换成为结构规整的Markdown格式，这样是可以提高RAG应用的效率的。对于docx、xlsx等格式的文档，如果结果过于复杂，把他们统一转换成为Markdown格式也是一个不错的选择。在做格式转换时，有些比较麻烦的问题，也可以借助大模型来进行深度调整。比如将转换的Markdown文本用大模型进行润色、修正目录层级、补充缺失信息等。当文档被正确加载成Document后，接下来Llamalndex也会完成对Document的切片工作，将Document切分成为多个相关联的Node。Llamalndex中也提供了非常多的文档切分工具可以作为参考，当然，如果这些工具不够用时，也可以自己实现。",[146,3097,3098,3101,3104,3107,3110],{},[149,3099,3100],{},"TokenTextSpliter:按照Token进行拆分。比较适合对Token数量有严格要求的场景。比如使用上下文长度比较小的模型时,",[149,3102,3103],{},"SentenceSplitter:这是Llamalndexm默认的切片策略，切片时会尽量保持句子的完整性。",[149,3105,3106],{},"SentenceWindowNodeParser:基于句子进行切分。不过在切分时，每个Node会包含周围的句子作为上下文窗口，这样可以更好的保持句子的完整性。",[149,3108,3109],{},"SemanticSplitterNodeParser:根据语义相关新自适应进行切片。",[149,3111,3112],{},"MarkdownNodeParser;基于Markdown格式进行切分。Llamalndex提供的实现会根据Markdown文档的标题层级进行智能切分。",[175,3114,3116],{"id":3115},"_3文本向量化与存储阶段","3、文本向量化与存储阶段",[115,3118,3119],{},"文档切片后，我们就需要对其建立索引，以便后续检查。最常见的方案就是使用EmbeddingModel向量作模型将切片转成向量，然后存储到向量数据库当中。",[115,3121,3122],{},"首先，你要清楚，向量本质上是把不精确的自然语转成计算能够理解的精确的数字化的表达。转换出来的向量，主要包含的是自然语言的语义相似度信息。",[115,3124,3125],{},"这里需要注意的是，向量的本质是自然语言，而自然语言其实是一种非常不精确的表达方式。不同的人对语言的理解是不一样的，同样，不同的Embedding向量化模型对相同的文字计算，得到的向量也可能是完全不同的。例如上面的案例，可以分别使用阿里云提供的text-embedding-v2和test-embedding-v3模型，分别进行计算，得到的结果也是完全不同的。不过，一个通常的经验是，越新的Embedding模型，其表现通常越好。",[2993,3127,3129],{"id":3128},"然后如何选择向量数据库",[119,3130,3131],{},"然后，如何选择向量数据库?",[115,3133,3134],{},"向量数据库，通常要做的事情就两件，一是把向量诸起来，二是根据向量进行相似度检索。而实现这两个功能，其实并不一定需要额存外的数据库产品。Llamalndex内置的向量存储就是使用内存完成。这样的有点是快速上手，适合开发测试。但是缺点也很明显，数据量受限于内存的大小。",[115,3136,3137],{},"当数据量增大时，可以使用开源的向量数据库，如MiIvus、Qdrant等。这些数据库提供了数据持久化和高速检索的能力。很多传统的数据存储产品，也可以作为向量数据库使用。比如Redis、Elasticsearch等。这些本地数据库的优势是功能完整、可控性强。但是缺点是需要自行部署维护。",[115,3139,3140],{},"这时，也可以选择一些云服务提供的向量存储能力。例如阿里云上提供过的各种数据服务。像Redis也提供Redis Cloud云上服务，可以直接使用。",[115,3142,3143],{},"这些不同的向量数据库虽然具体的实现方式是天差地别的，但是他们的核心功能其实是差不多的。选择不同的向量数据库，通常不会对RAG应用的准确性产生太大的影响。",[175,3145,3147],{"id":3146},"_4检索召回阶段","4、检索召回阶段",[115,3149,3150],{},"检索阶段会遇到的主要问题是，很难从众多的文档切片中，找到和用户问题最相关、且包含正确答案信息的片段。所以这个阶段的优化过程，更多需要考虑如何提升检索的性能。",[115,3152,3153],{},"要优化检索召回的效果，通常要分为两个不同的思路:",[146,3155,3156,3159],{},[149,3157,3158],{},"在执行检索前，需要更多关注用户的问题。减少用户问题中描述不完整、甚至有歧义的地方，更好的还原用户的真实意图。",[149,3160,3161],{},"在执行检索后，可能会出现很多和用户问题无关的信息。这时需要想办法减少无关信息，避免干扰下一步生成答案的质量。",[2993,3163,3165],{"id":3164},"常见的策略有以下几种",[119,3166,3167],{},"常见的策略有以下几种:",[3169,3170,3171,3174,3189],"ol",{},[149,3172,3173],{},"用户提问前，对问题进行扩展 例如，将\"找王芳\"主动改写成\"王芳是哪个部门的?他的联系方式、职责范围、工作目标是什么\"，这样能让目标更清晰。例如，在用户询问\"工作注意事项有哪些\"时，主动根据用户的个人信息进行改写，扩展成\"项目经理的工作注意事项有哪些\"。对问题进行适当扩写，可以极大的提升检索的准确度。当然，在具体实现过程中，扩展的规则会有很多，你甚至可以引入大模型，让大模型来帮助进行问题扩写。",[149,3175,3176,3177,3185,3188],{},"将用户的单一查询，改写成多步问题 Llamalndex中就提供了两个强大的工具来实现这个功能:",[146,3178,3179,3182],{},[149,3180,3181],{},"StepDecomposeQueryTransform:这个工具可以帮你把一个复杂问题分解成多个子问题。比如对于\"王芳是哪个部门的”，他就可以分解成”公司里有几个叫王芳的员工?\"和\"这些王芳分别在哪些部门?\"两个问题，这样可以更全面地获取所有王芳的信息。",[149,3183,3184],{},"MultiStepQueryEngine:这个查询引擎会按顺序处理这些子问题。它会先获取公司所有王芳的信息，然后依次查询每个王芳的部门信息，最终答案聚合成一个完整回应。",[3186,3187],"br",{},"把大问题拆解成小问题往往更容易得到准确的答案。不过需要注意的是，Lamalndex的实现过程是通过多次调用大语言模型完成的，所以会消耗更多的Token。另外，也会带来过程的不确定性。",[149,3190,3191],{},"使用假设文档HyDE进行增强 这种方法的基础思路是先让大模型基于问题编写一个\"假象的答案文档”，然后用这个假象的文档来检索真实文档。最后用检索到的真实文档来生成实际答案。",[175,3193,3195],{"id":3194},"_5重排序rank","5、重排序Rank",[115,3197,3198,3199,3204],{},"想象一下，如果是一个人来回答RAG最终的问题，他会希望参考信息怎么组织呢?是不是希望参考信息尽量简单，不要包含多余的信息而且重要参考信息排在最前面。这样才能更方便的找到答案。 这个事情，其实也可以让大语言模型来处理。例如阿里云百炼上提供了文本重排序模型（",[119,3200,3201],{},[291,3202,3203],{},"gte-rerank-v2","），我们可以直接调用这个模型来对检索出的文本做一下处理。",[175,3206,3208],{"id":3207},"_6生成答案阶段","6、生成答案阶段",[115,3210,3211],{},"现在，大模型会根据你的问题和检索召回的内容，生成最终答案。这个过程更多的是由大模型进行处理，考验的是大模型的理解与总结能力。不过，你也可以从以下几个方面着手优化。",[3169,3213,3214,3217,3220,3223],{},[149,3215,3216],{},"选择合适的大模型 通常在这个阶段，大模型只需要做简单的信息总结，所以可以选择一些参数量比较小的模型就可以了。但是，如果你构建的RAG应用面向一些非通用领域，比如法律领域，那还是建议使用面向特定领域训练或者微调的模型。比如阿里云提供的通义法睿。",[149,3218,3219],{},"充分优化提示词模板 最终召回的信息和用户的问题，是需要整理成一个完整的提示词提供给大语言模型的。Llamalndex提供了默认的模板，将这些信息进行整合。但是，如果你希望大语言模型更理解你的要求，也可以自行修改模板。例如将默认的英文模板修改成中文。或者使用Llamalndex的refine模式，让大模型对输出结果再做一次整理。",[149,3221,3222],{},"调整大模型的参数 可以根据具体应用场景，适当调整大语言模型的参数。例如，如果你希望查询实时性的内容，可以适当降低temperature或top-p的值。如果是査询创造性的内容，可以适当增加他们的值。如果希望大模型在回答问题时不要总是用重复的句子，可以适当调presence_penalty值。如果希望限制字数，控制成本或减少响应时间，可以适当降低max tokens的值等。",[149,3224,3225],{},"调优大模型 如果试了很多方法后，仍然不及预期，或者希望更进一步提升效果，这时也可以尝试面向当前的业务场景单独微调一个新的模型。当然，这样难度比较高，成本通常也比较大，可以适当关注。",[3227,3228,3229],"style",{},"html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .subq3, html code.shiki .subq3{--shiki-default:#98C379}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":461,"searchDepth":674,"depth":674,"links":3231},[3232,3236,3245,3254],{"id":2011,"depth":677,"text":2012,"children":3233},[3234,3235],{"id":2402,"depth":674,"text":2405},{"id":2524,"depth":674,"text":2525},{"id":2604,"depth":677,"text":2605,"children":3237},[3238,3239,3240,3241,3242,3243,3244],{"id":2611,"depth":674,"text":2612},{"id":2618,"depth":674,"text":2619},{"id":2682,"depth":674,"text":2683},{"id":2866,"depth":674,"text":2867},{"id":2877,"depth":674,"text":2878},{"id":2919,"depth":674,"text":2920},{"id":2926,"depth":674,"text":2927},{"id":2933,"depth":677,"text":2934,"children":3246},[3247,3248],{"id":2937,"depth":674,"text":2938},{"id":2944,"depth":674,"text":2945,"children":3249},[3250,3251,3252,3253],{"id":2995,"depth":2082,"text":2996},{"id":3013,"depth":2082,"text":3014},{"id":3043,"depth":2082,"text":3044},{"id":3056,"depth":2082,"text":3057},{"id":3069,"depth":677,"text":3070,"children":3255},[3256,3257,3258,3261,3264,3265],{"id":3073,"depth":674,"text":3074},{"id":3080,"depth":674,"text":3081},{"id":3115,"depth":674,"text":3116,"children":3259},[3260],{"id":3128,"depth":2082,"text":3131},{"id":3146,"depth":674,"text":3147,"children":3262},[3263],{"id":3164,"depth":2082,"text":3167},{"id":3194,"depth":674,"text":3195},{"id":3207,"depth":674,"text":3208},"2026-04-17","LlamaIndex 是一个专门为 RAG（检索增强生成）应用而生的开发框架。简单来说，它的核心作用是帮你把私有的、不在大模型训练数据里的数据（如 PDF、API、SQL 数据库等）连接给大模型，让模型能基于这些数",{},"\u002Fblogs\u002Fllamaindex",{"title":1991,"description":3267},"blogs\u002FLlamaIndex",[3273,3274,3275,1991],"RAG","LLM","Python","_cdsYe0SOP-M_Sjp8gCdRyssGJ69LST7kqYMQv0oRqQ",{"id":3278,"title":3279,"body":3280,"date":5273,"description":5274,"extension":698,"meta":5275,"navigation":700,"path":5276,"seo":5277,"stem":5278,"tags":5279,"__hash__":5283},"blogs\u002Fblogs\u002Fcyberpunk-design-system.md","Cyberpunk \u002F Glitch 赛博朋克故障风设计系统",{"type":102,"value":3281,"toc":5246},[3282,3285,3288,3291,3297,3300,3308,3311,3317,3327,3333,3336,3374,3376,3380,3384,3587,3590,3595,3624,3629,3766,3769,3775,3788,3794,3887,3890,3895,4031,4036,4107,4112,4129,4133,4139,4232,4238,4326,4332,4338,4340,4343,4346,4349,4366,4371,4377,4382,4388,4393,4399,4404,4410,4416,4422,4426,4431,4437,4443,4449,4455,4461,4464,4470,4472,4475,4485,4490,4516,4529,4534,4556,4558,4562,4567,4630,4632,4635,4641,4646,4689,4694,4987,4989,4992,4997,5025,5031,5033,5036,5042,5047,5061,5066,5086,5091,5114,5119,5130,5132,5135,5141,5146,5198,5201,5211,5213,5216,5243],[105,3283,3279],{"id":3284},"cyberpunk-glitch-赛博朋克故障风设计系统",[110,3286,3287],{"id":3287},"设计哲学",[175,3289,3290],{"id":3290},"核心原则",[115,3292,3293,3296],{},[119,3294,3295],{},"\"高科技，低生活。\""," 这种美学是数字反乌托邦与高科技黑色现实的碰撞。它捕捉了先进技术与社会衰败之间的张力——一个地下黑客、霓虹浸透的巨型城市和腐败数据流的世界。这不是一个干净、乌托邦式的未来；它是粗糙的、不完美的、明显危险的。每个像素都应该感觉像是在东京雨巷中故障的 CRT 显示器上渲染，或是在地下掩体中的流氓终端上显示。",[175,3298,3299],{"id":3299},"氛围感",[115,3301,3302,3303,3307],{},"危险、带电、叛逆、激进的未来复古主义。它大量借鉴 80 年代科幻视觉语言（《银翼杀手》、《阿基拉》）和黑客文化（《黑客帝国》、《攻壳机动队》）。界面应该感觉",[3304,3305,3306],"em",{},"活着","且不稳定——充满数字能量的嗡嗡声、数据损坏的故障、原始力量的脉动。它不仅仅是一个网站；它是一个被黑掉的信号、一个被禁止的界面、一个通往城市蔓延的窗口。",[175,3309,3310],{"id":3310},"触觉体验",[115,3312,3313,3316],{},[119,3314,3315],{},"不完美的技术","：拥抱模拟到数字转换的产物。扫描线、色差（RGB 分离）和信号噪声不是 bug；它们是特性。UI 应该感觉像是在努力容纳它显示的数据。",[115,3318,3319,3322,3323,3326],{},[119,3320,3321],{},"虚空 vs 光明","：背景不仅仅是黑暗；它是虚空。在这片绝对的黑暗中，霓虹光（青色、洋红、酸绿）不仅仅是给元素着色——它",[3304,3324,3325],{},"照亮","了它们。光源应该感觉有形，投射出定义层次结构的光晕和阴影。",[115,3328,3329,3332],{},[119,3330,3331],{},"工业粗野主义","：形状是硬朗的、有角度的、实用的。倒角（45 度切割）取代了友好的圆角矩形。边框是技术性的、精确的，类似于蓝图或 HUD（抬头显示器）示意图，而非装饰性框架。",[175,3334,3335],{"id":3335},"令人难忘的视觉特征",[146,3337,3338,3344,3350,3356,3362,3368],{},[149,3339,3340,3343],{},[119,3341,3342],{},"色差","：文本和元素上的 RGB 颜色分离（红\u002F青色偏移阴影），模拟镜头畸变或信号干扰",[149,3345,3346,3349],{},[119,3347,3348],{},"扫描线","：微妙的水平线覆盖层，模仿旧 CRT 显示器的刷新率，增加纹理并统一构图",[149,3351,3352,3355],{},[119,3353,3354],{},"故障效果","：通过 clip-path 动画、倾斜变换和闪烁文本实现的故意\"损坏\"，暗示不稳定连接或被黑系统",[149,3357,3358,3361],{},[119,3359,3360],{},"霓虹光晕","：文本和边框的字面发光，使用强烈的多层 box-shadow\u002Ftext-shadow 堆叠，在暗背景上创造\"光剑\"或\"霓虹灯\"效果",[149,3363,3364,3367],{},[119,3365,3366],{},"切角","：卡片和按钮上的倒角\u002F切割角，创造军事化、科技面板美学",[149,3369,3370,3373],{},[119,3371,3372],{},"电路图案","：类似 PCB 走线或数据高速公路的装饰性 SVG 背景，暗示底层硬件",[168,3375],{},[110,3377,3379],{"id":3378},"设计-token-系统dna","设计 Token 系统（DNA）",[175,3381,3383],{"id":3382},"颜色深色模式-强制","颜色（深色模式 - 强制）",[243,3385,3386,3398],{},[246,3387,3388],{},[249,3389,3390,3393,3396],{},[252,3391,3392],{},"Token",[252,3394,3395],{},"色值",[252,3397,260],{},[262,3399,3400,3415,3430,3445,3460,3475,3493,3511,3529,3544,3558,3572],{},[249,3401,3402,3407,3412],{},[267,3403,3404],{},[291,3405,3406],{},"background",[267,3408,3409],{},[291,3410,3411],{},"#0a0a0f",[267,3413,3414],{},"深虚空黑，带轻微蓝色底色",[249,3416,3417,3422,3427],{},[267,3418,3419],{},[291,3420,3421],{},"foreground",[267,3423,3424],{},[291,3425,3426],{},"#e0e0e0",[267,3428,3429],{},"主文本，非纯白（不那么刺眼）",[249,3431,3432,3437,3442],{},[267,3433,3434],{},[291,3435,3436],{},"card",[267,3438,3439],{},[291,3440,3441],{},"#12121a",[267,3443,3444],{},"卡片背景，深紫黑色",[249,3446,3447,3452,3457],{},[267,3448,3449],{},[291,3450,3451],{},"muted",[267,3453,3454],{},[291,3455,3456],{},"#1c1c2e",[267,3458,3459],{},"UI 装饰\u002F elevated 背景",[249,3461,3462,3467,3472],{},[267,3463,3464],{},[291,3465,3466],{},"mutedForeground",[267,3468,3469],{},[291,3470,3471],{},"#6b7280",[267,3473,3474],{},"次要文本，降低对比度",[249,3476,3477,3482,3487],{},[267,3478,3479],{},[291,3480,3481],{},"accent",[267,3483,3484],{},[291,3485,3486],{},"#00ff88",[267,3488,3489,3492],{},[119,3490,3491],{},"主霓虹色"," - 电光绿（受《黑客帝国》启发）",[249,3494,3495,3500,3505],{},[267,3496,3497],{},[291,3498,3499],{},"accentSecondary",[267,3501,3502],{},[291,3503,3504],{},"#ff00ff",[267,3506,3507,3510],{},[119,3508,3509],{},"次霓虹色"," - 热洋红\u002F粉色",[249,3512,3513,3518,3523],{},[267,3514,3515],{},[291,3516,3517],{},"accentTertiary",[267,3519,3520],{},[291,3521,3522],{},"#00d4ff",[267,3524,3525,3528],{},[119,3526,3527],{},"第三霓虹色"," - 青色\u002F电光蓝",[249,3530,3531,3536,3541],{},[267,3532,3533],{},[291,3534,3535],{},"border",[267,3537,3538],{},[291,3539,3540],{},"#2a2a3a",[267,3542,3543],{},"微妙边框",[249,3545,3546,3551,3555],{},[267,3547,3548],{},[291,3549,3550],{},"input",[267,3552,3553],{},[291,3554,3441],{},[267,3556,3557],{},"深输入框背景",[249,3559,3560,3565,3569],{},[267,3561,3562],{},[291,3563,3564],{},"ring",[267,3566,3567],{},[291,3568,3486],{},[267,3570,3571],{},"聚焦环匹配强调色",[249,3573,3574,3579,3584],{},[267,3575,3576],{},[291,3577,3578],{},"destructive",[267,3580,3581],{},[291,3582,3583],{},"#ff3366",[267,3585,3586],{},"错误\u002F危险红粉色",[175,3588,3589],{"id":3589},"排版",[115,3591,3592],{},[119,3593,3594],{},"字体栈：",[146,3596,3597,3606,3615],{},[149,3598,3599,1842,3602,3605],{},[119,3600,3601],{},"标题",[291,3603,3604],{},"\"Orbitron\", \"Share Tech Mono\", monospace"," — 几何、未来感、机械化",[149,3607,3608,1842,3611,3614],{},[119,3609,3610],{},"正文",[291,3612,3613],{},"\"JetBrains Mono\", \"Fira Code\", \"Consolas\", monospace"," — 干净的等宽字体，带来终端感觉",[149,3616,3617,1842,3620,3623],{},[119,3618,3619],{},"强调\u002F标签",[291,3621,3622],{},"\"Share Tech Mono\", monospace"," — 用于 UI 标签、时间戳、徽章",[115,3625,3626],{},[119,3627,3628],{},"比例与样式：",[243,3630,3631,3647],{},[246,3632,3633],{},[249,3634,3635,3638,3641,3644],{},[252,3636,3637],{},"元素",[252,3639,3640],{},"大小",[252,3642,3643],{},"字重",[252,3645,3646],{},"样式",[262,3648,3649,3676,3701,3723,3744],{},[249,3650,3651,3654,3663,3668],{},[267,3652,3653],{},"H1",[267,3655,3656,3659,3660],{},[291,3657,3658],{},"text-6xl"," 到 ",[291,3661,3662],{},"text-8xl",[267,3664,3665],{},[291,3666,3667],{},"font-black",[267,3669,3670,2855,3673],{},[291,3671,3672],{},"uppercase",[291,3674,3675],{},"tracking-widest",[249,3677,3678,3681,3689,3694],{},[267,3679,3680],{},"H2",[267,3682,3683,3659,3686],{},[291,3684,3685],{},"text-4xl",[291,3687,3688],{},"text-5xl",[267,3690,3691],{},[291,3692,3693],{},"font-bold",[267,3695,3696,2855,3698],{},[291,3697,3672],{},[291,3699,3700],{},"tracking-wide",[249,3702,3703,3706,3714,3719],{},[267,3704,3705],{},"H3",[267,3707,3708,3659,3711],{},[291,3709,3710],{},"text-xl",[291,3712,3713],{},"text-2xl",[267,3715,3716],{},[291,3717,3718],{},"font-semibold",[267,3720,3721],{},[291,3722,3672],{},[249,3724,3725,3727,3732,3737],{},[267,3726,3610],{},[267,3728,3729],{},[291,3730,3731],{},"text-base",[267,3733,3734],{},[291,3735,3736],{},"font-normal",[267,3738,3739,2855,3741],{},[291,3740,3700],{},[291,3742,3743],{},"leading-relaxed",[249,3745,3746,3749,3754,3759],{},[267,3747,3748],{},"代码\u002F标签",[267,3750,3751],{},[291,3752,3753],{},"text-sm",[267,3755,3756],{},[291,3757,3758],{},"font-mono",[267,3760,3761,2855,3763],{},[291,3762,3672],{},[291,3764,3765],{},"tracking-[0.2em]",[175,3767,3768],{"id":3768},"圆角与边框",[453,3770,3773],{"className":3771,"code":3772,"language":458},[456],"radius.none:     0px        \u002F\u002F 锐利切割是默认\nradius.sm:       2px        \u002F\u002F 最小柔化\nradius.base:     4px        \u002F\u002F 罕见，仅用于输入框\nradius.chamfer:  使用 clip-path 实现切角而非 border-radius\n",[291,3774,3772],{"__ignoreMap":461},[115,3776,3777,1842,3780,3783,3784,3787],{},[119,3778,3779],{},"边框宽度",[291,3781,3782],{},"1px"," 默认，",[291,3785,3786],{},"2px"," 强调，边框通常使用渐变或光晕效果",[115,3789,3790,3793],{},[119,3791,3792],{},"倒角图案","（通过 clip-path 应用）：",[453,3795,3799],{"className":3796,"code":3797,"language":3798,"meta":461,"style":461},"language-css shiki shiki-themes one-dark-pro","clip-path: polygon(\n  0 10px, 10px 0,                           \u002F* 左上切 *\u002F\n  calc(100% - 10px) 0, 100% 10px,           \u002F* 右上切 *\u002F\n  100% calc(100% - 10px), calc(100% - 10px) 100%,  \u002F* 右下切 *\u002F\n  10px 100%, 0 calc(100% - 10px)            \u002F* 左下切 *\u002F\n);\n","css",[291,3800,3801,3810,3827,3844,3863,3882],{"__ignoreMap":461},[2038,3802,3803,3807],{"class":2040,"line":2041},[2038,3804,3806],{"class":3805},"sVyAn","clip-path",[2038,3808,3809],{"class":2044},": polygon(\n",[2038,3811,3812,3815,3818,3821,3824],{"class":2040,"line":677},[2038,3813,3814],{"class":2044},"  0 10px",[2038,3816,3817],{"class":2048},",",[2038,3819,3820],{"class":2044}," 10px 0",[2038,3822,3823],{"class":2048},",                           ",[2038,3825,3826],{"class":2288},"\u002F* 左上切 *\u002F\n",[2038,3828,3829,3832,3835,3838,3841],{"class":2040,"line":674},[2038,3830,3831],{"class":2044},"  calc(100% - 10px",[2038,3833,3834],{"class":2048},") 0, 100% 10",[2038,3836,3837],{"class":2044},"px",[2038,3839,3840],{"class":2048},",           ",[2038,3842,3843],{"class":2288},"\u002F* 右上切 *\u002F\n",[2038,3845,3846,3849,3852,3855,3857,3860],{"class":2040,"line":2082},[2038,3847,3848],{"class":2048},"  100% ",[2038,3850,3851],{"class":2044},"calc(100% - 10px",[2038,3853,3854],{"class":2048},"), ",[2038,3856,3851],{"class":2044},[2038,3858,3859],{"class":2048},") 100%,  ",[2038,3861,3862],{"class":2288},"\u002F* 右下切 *\u002F\n",[2038,3864,3865,3868,3871,3873,3876,3879],{"class":2040,"line":2088},[2038,3866,3867],{"class":2048},"  10",[2038,3869,3870],{"class":2044},"px 100%",[2038,3872,3817],{"class":2048},[2038,3874,3875],{"class":2044}," 0 calc(100% - 10px",[2038,3877,3878],{"class":2048},")            ",[2038,3880,3881],{"class":2288},"\u002F* 左下切 *\u002F\n",[2038,3883,3884],{"class":2040,"line":2094},[2038,3885,3886],{"class":2048},");\n",[175,3888,3889],{"id":3889},"阴影与效果",[115,3891,3892,1842],{},[119,3893,3894],{},"霓虹光晕（CSS 变量 Token）",[453,3896,3898],{"className":3796,"code":3897,"language":3798,"meta":461,"style":461},"\u002F* 主霓虹光晕 - 用于悬停状态、聚焦环、高亮元素 *\u002F\n--box-shadow-neon: 0 0 5px #00ff88, 0 0 10px #00ff8840;\n\n\u002F* 小霓虹光晕 - 微妙强调 *\u002F\n--box-shadow-neon-sm: 0 0 3px #00ff88, 0 0 6px #00ff8830;\n\n\u002F* 大霓虹光晕 - 强调状态、hero 元素 *\u002F\n--box-shadow-neon-lg: 0 0 10px #00ff88, 0 0 20px #00ff8860, 0 0 40px #00ff8830;\n\n\u002F* 次霓虹（洋红） *\u002F\n--box-shadow-neon-secondary: 0 0 5px #ff00ff, 0 0 20px #ff00ff60;\n\n\u002F* 第三霓虹（青色） *\u002F\n--box-shadow-neon-tertiary: 0 0 5px #00d4ff, 0 0 20px #00d4ff60;\n",[291,3899,3900,3905,3924,3928,3933,3950,3954,3959,3983,3987,3992,4006,4010,4015],{"__ignoreMap":461},[2038,3901,3902],{"class":2040,"line":2041},[2038,3903,3904],{"class":2288},"\u002F* 主霓虹光晕 - 用于悬停状态、聚焦环、高亮元素 *\u002F\n",[2038,3906,3907,3910,3913,3915,3918,3921],{"class":2040,"line":677},[2038,3908,3909],{"class":2044},"--box-shadow-neon: 0 0 5px ",[2038,3911,3486],{"class":3912},"sLaUg",[2038,3914,3817],{"class":2048},[2038,3916,3917],{"class":2044}," 0 0 10px ",[2038,3919,3920],{"class":3912},"#00ff8840",[2038,3922,3923],{"class":2044},";\n",[2038,3925,3926],{"class":2040,"line":674},[2038,3927,2109],{"emptyLinePlaceholder":700},[2038,3929,3930],{"class":2040,"line":2082},[2038,3931,3932],{"class":2288},"\u002F* 小霓虹光晕 - 微妙强调 *\u002F\n",[2038,3934,3935,3938,3940,3942,3945,3948],{"class":2040,"line":2088},[2038,3936,3937],{"class":2044},"--box-shadow-neon-sm: 0 0 3px ",[2038,3939,3486],{"class":3912},[2038,3941,3817],{"class":2048},[2038,3943,3944],{"class":2044}," 0 0 6px ",[2038,3946,3947],{"class":3912},"#00ff8830",[2038,3949,3923],{"class":2044},[2038,3951,3952],{"class":2040,"line":2094},[2038,3953,2109],{"emptyLinePlaceholder":700},[2038,3955,3956],{"class":2040,"line":2100},[2038,3957,3958],{"class":2288},"\u002F* 大霓虹光晕 - 强调状态、hero 元素 *\u002F\n",[2038,3960,3961,3964,3966,3968,3971,3974,3976,3979,3981],{"class":2040,"line":2106},[2038,3962,3963],{"class":2044},"--box-shadow-neon-lg: 0 0 10px ",[2038,3965,3486],{"class":3912},[2038,3967,3817],{"class":2048},[2038,3969,3970],{"class":2044}," 0 0 20px ",[2038,3972,3973],{"class":3912},"#00ff8860",[2038,3975,3817],{"class":2048},[2038,3977,3978],{"class":2044}," 0 0 40px ",[2038,3980,3947],{"class":3912},[2038,3982,3923],{"class":2044},[2038,3984,3985],{"class":2040,"line":2112},[2038,3986,2109],{"emptyLinePlaceholder":700},[2038,3988,3989],{"class":2040,"line":2125},[2038,3990,3991],{"class":2288},"\u002F* 次霓虹（洋红） *\u002F\n",[2038,3993,3994,3997,3999,4001,4003],{"class":2040,"line":2133},[2038,3995,3996],{"class":2044},"--box-shadow-neon-secondary: 0 0 5px ",[2038,3998,3504],{"class":2141},[2038,4000,3817],{"class":2048},[2038,4002,3970],{"class":2044},[2038,4004,4005],{"class":3912},"#ff00ff60;\n",[2038,4007,4008],{"class":2040,"line":2138},[2038,4009,2109],{"emptyLinePlaceholder":700},[2038,4011,4012],{"class":2040,"line":2148},[2038,4013,4014],{"class":2288},"\u002F* 第三霓虹（青色） *\u002F\n",[2038,4016,4017,4020,4022,4024,4026,4029],{"class":2040,"line":2153},[2038,4018,4019],{"class":2044},"--box-shadow-neon-tertiary: 0 0 5px ",[2038,4021,3522],{"class":3912},[2038,4023,3817],{"class":2048},[2038,4025,3970],{"class":2044},[2038,4027,4028],{"class":3912},"#00d4ff60",[2038,4030,3923],{"class":2044},[115,4032,4033,1842],{},[119,4034,4035],{},"文本阴影深度",[453,4037,4039],{"className":3796,"code":4038,"language":3798,"meta":461,"style":461},"\u002F* 故障效果文本阴影（用于 hero 标题） *\u002F\ndrop-shadow: 0 0 10px rgba(0, 255, 136, 0.5);\n\n\u002F* 渐变文本光晕 *\u002F\ndrop-shadow: 0 0 20px rgba(0, 255, 136, 0.3);\n",[291,4040,4041,4046,4074,4078,4083],{"__ignoreMap":461},[2038,4042,4043],{"class":2040,"line":2041},[2038,4044,4045],{"class":2288},"\u002F* 故障效果文本阴影（用于 hero 标题） *\u002F\n",[2038,4047,4048,4051,4054,4056,4059,4061,4064,4066,4069,4072],{"class":2040,"line":677},[2038,4049,4050],{"class":3805},"drop-shadow",[2038,4052,4053],{"class":2044},": 0 0 10px rgba(0",[2038,4055,3817],{"class":2048},[2038,4057,4058],{"class":2044}," 255",[2038,4060,3817],{"class":2048},[2038,4062,4063],{"class":2044}," 136",[2038,4065,3817],{"class":2048},[2038,4067,4068],{"class":2044}," 0",[2038,4070,4071],{"class":2181},".5",[2038,4073,3886],{"class":2048},[2038,4075,4076],{"class":2040,"line":674},[2038,4077,2109],{"emptyLinePlaceholder":700},[2038,4079,4080],{"class":2040,"line":2082},[2038,4081,4082],{"class":2288},"\u002F* 渐变文本光晕 *\u002F\n",[2038,4084,4085,4087,4090,4092,4094,4096,4098,4100,4102,4105],{"class":2040,"line":2088},[2038,4086,4050],{"class":3805},[2038,4088,4089],{"class":2044},": 0 0 20px rgba(0",[2038,4091,3817],{"class":2048},[2038,4093,4058],{"class":2044},[2038,4095,3817],{"class":2048},[2038,4097,4063],{"class":2044},[2038,4099,3817],{"class":2048},[2038,4101,4068],{"class":2044},[2038,4103,4104],{"class":2181},".3",[2038,4106,3886],{"class":2048},[115,4108,4109,4111],{},[119,4110,3342],{},"（通过 .cyber-glitch 上的 CSS 动画实现）：\n通过 ::before 和 ::after 伪元素实现：",[146,4113,4114,4120,4126],{},[149,4115,4116,4119],{},[291,4117,4118],{},"text-shadow: -1px 0 #ff00ff","（洋红左）",[149,4121,4122,4125],{},[291,4123,4124],{},"text-shadow: -1px 0 #00d4ff","（青色右）",[149,4127,4128],{},"clip-path 动画实现故障效果",[175,4130,4132],{"id":4131},"纹理与图案深度关键","纹理与图案（深度关键）",[115,4134,4135,4138],{},[119,4136,4137],{},"1. 扫描线覆盖层","（CSS 伪元素）：",[453,4140,4142],{"className":3796,"code":4141,"language":3798,"meta":461,"style":461},"background: repeating-linear-gradient(\n  0deg,\n  transparent,\n  transparent 2px,\n  rgba(0, 0, 0, 0.3) 2px,\n  rgba(0, 0, 0, 0.3) 4px\n);\npointer-events: none;\n",[291,4143,4144,4149,4156,4163,4170,4196,4220,4224],{"__ignoreMap":461},[2038,4145,4146],{"class":2040,"line":2041},[2038,4147,4148],{"class":2044},"background: repeating-linear-gradient(\n",[2038,4150,4151,4154],{"class":2040,"line":677},[2038,4152,4153],{"class":2044},"  0deg",[2038,4155,2185],{"class":2048},[2038,4157,4158,4161],{"class":2040,"line":674},[2038,4159,4160],{"class":2044},"  transparent",[2038,4162,2185],{"class":2048},[2038,4164,4165,4168],{"class":2040,"line":2082},[2038,4166,4167],{"class":2044},"  transparent 2px",[2038,4169,2185],{"class":2048},[2038,4171,4172,4175,4177,4179,4181,4183,4185,4187,4189,4192,4194],{"class":2040,"line":2088},[2038,4173,4174],{"class":2044},"  rgba(0",[2038,4176,3817],{"class":2048},[2038,4178,4068],{"class":2044},[2038,4180,3817],{"class":2048},[2038,4182,4068],{"class":2044},[2038,4184,3817],{"class":2048},[2038,4186,4068],{"class":2044},[2038,4188,4104],{"class":2181},[2038,4190,4191],{"class":2048},") 2",[2038,4193,3837],{"class":2044},[2038,4195,2185],{"class":2048},[2038,4197,4198,4200,4202,4204,4206,4208,4210,4212,4214,4217],{"class":2040,"line":2094},[2038,4199,4174],{"class":2044},[2038,4201,3817],{"class":2048},[2038,4203,4068],{"class":2044},[2038,4205,3817],{"class":2048},[2038,4207,4068],{"class":2044},[2038,4209,3817],{"class":2048},[2038,4211,4068],{"class":2044},[2038,4213,4104],{"class":2181},[2038,4215,4216],{"class":2048},") 4",[2038,4218,4219],{"class":2044},"px\n",[2038,4221,4222],{"class":2040,"line":2100},[2038,4223,3886],{"class":2048},[2038,4225,4226,4229],{"class":2040,"line":2106},[2038,4227,4228],{"class":3805},"pointer-events",[2038,4230,4231],{"class":2044},": none;\n",[115,4233,4234,4237],{},[119,4235,4236],{},"2. 网格\u002F电路图案","（微妙背景）：",[453,4239,4241],{"className":3796,"code":4240,"language":3798,"meta":461,"style":461},"background-image:\n  linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),\n  linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);\nbackground-size: 50px 50px;\n",[291,4242,4243,4251,4284,4318],{"__ignoreMap":461},[2038,4244,4245,4248],{"class":2040,"line":2041},[2038,4246,4247],{"class":3805},"background-image",[2038,4249,4250],{"class":2044},":\n",[2038,4252,4253,4256,4258,4260,4262,4264,4266,4268,4271,4274,4276,4278,4281],{"class":2040,"line":677},[2038,4254,4255],{"class":2044},"  linear-gradient(rgba(0",[2038,4257,3817],{"class":2048},[2038,4259,4058],{"class":2044},[2038,4261,3817],{"class":2048},[2038,4263,4063],{"class":2044},[2038,4265,3817],{"class":2048},[2038,4267,4068],{"class":2044},[2038,4269,4270],{"class":2181},".03",[2038,4272,4273],{"class":2048},") 1",[2038,4275,3837],{"class":2044},[2038,4277,3817],{"class":2048},[2038,4279,4280],{"class":2044}," transparent 1px",[2038,4282,4283],{"class":2048},"),\n",[2038,4285,4286,4289,4291,4294,4296,4298,4300,4302,4304,4306,4308,4310,4312,4314,4316],{"class":2040,"line":674},[2038,4287,4288],{"class":2044},"  linear-gradient(90deg",[2038,4290,3817],{"class":2048},[2038,4292,4293],{"class":2044}," rgba(0",[2038,4295,3817],{"class":2048},[2038,4297,4058],{"class":2044},[2038,4299,3817],{"class":2048},[2038,4301,4063],{"class":2044},[2038,4303,3817],{"class":2048},[2038,4305,4068],{"class":2044},[2038,4307,4270],{"class":2181},[2038,4309,4273],{"class":2048},[2038,4311,3837],{"class":2044},[2038,4313,3817],{"class":2048},[2038,4315,4280],{"class":2044},[2038,4317,3886],{"class":2048},[2038,4319,4320,4323],{"class":2040,"line":2082},[2038,4321,4322],{"class":3805},"background-size",[2038,4324,4325],{"class":2044},": 50px 50px;\n",[115,4327,4328,4331],{},[119,4329,4330],{},"3. 噪点纹理","：应用微妙的 CSS 噪点滤镜或 5-10% 不透明度的 SVG 噪点覆盖层",[115,4333,4334,4337],{},[119,4335,4336],{},"4. 渐变网格","：角落处极低不透明度的强调色径向渐变",[168,4339],{},[110,4341,4342],{"id":4342},"组件样式",[175,4344,4345],{"id":4345},"按钮",[115,4347,4348],{},"所有按钮使用：",[146,4350,4351,4354,4357,4360,4363],{},[149,4352,4353],{},"字体：monospace",[149,4355,4356],{},"文本转换：uppercase",[149,4358,4359],{},"字间距：wider",[149,4361,4362],{},"过渡：all 实现平滑效果",[149,4364,4365],{},"聚焦环：2px 强调色",[115,4367,4368,1842],{},[119,4369,4370],{},"默认变体",[453,4372,4375],{"className":4373,"code":4374,"language":458},[456],"- 背景：transparent\n- 边框：2px solid accent (#00ff88)\n- 文本：accent 颜色\n- Clip-path: .cyber-chamfer-sm（较小倒角）\n- 悬停：背景填充 accent，文本变为背景色，霓虹光晕阴影\n",[291,4376,4374],{"__ignoreMap":461},[115,4378,4379,1842],{},[119,4380,4381],{},"次要变体",[453,4383,4386],{"className":4384,"code":4385,"language":458},[456],"- 边框：2px solid accentSecondary (#ff00ff)\n- 文本：accentSecondary\n- 悬停：填充洋红，neon-secondary 光晕\n",[291,4387,4385],{"__ignoreMap":461},[115,4389,4390,1842],{},[119,4391,4392],{},"轮廓变体",[453,4394,4397],{"className":4395,"code":4396,"language":458},[456],"- 边框：1px solid border (#2a2a3a)\n- 背景：transparent\n- 悬停：边框变为 accent，文本变为 accent，霓虹光晕出现\n",[291,4398,4396],{"__ignoreMap":461},[115,4400,4401,1842],{},[119,4402,4403],{},"幽灵变体",[453,4405,4408],{"className":4406,"code":4407,"language":458},[456],"- 无边框\n- 悬停：背景 accent\u002F10 不透明度，文本变为 accent\n",[291,4409,4407],{"__ignoreMap":461},[115,4411,4412,4415],{},[119,4413,4414],{},"故障变体","（CTA）：",[453,4417,4420],{"className":4418,"code":4419,"language":458},[456],"- 背景：solid accent (#00ff88)\n- 文本：背景色（高对比度）\n- 使用 .cyber-glitch 类实现色差效果\n- 悬停：亮度增加（filter: brightness(1.1)）\n",[291,4421,4419],{"__ignoreMap":461},[175,4423,4425],{"id":4424},"卡片容器","卡片\u002F容器",[115,4427,4428,1842],{},[119,4429,4430],{},"默认卡片变体",[453,4432,4435],{"className":4433,"code":4434,"language":458},[456],"- 背景：card (#12121a)\n- 边框：1px solid border (#2a2a3a)\n- Clip-path: 通过 .cyber-chamfer 类实现倒角\n- 过渡：all 300ms 实现平滑交互\n- 悬停：translateY(-1px)，边框变为 accent，霓虹光晕出现（如果 hoverEffect 属性）\n",[291,4436,4434],{"__ignoreMap":461},[115,4438,4439,4442],{},[119,4440,4441],{},"终端变体"," (variant=\"terminal\")：",[453,4444,4447],{"className":4445,"code":4446,"language":458},[456],"- 背景：background (#0a0a0f) 而非 card\n- 边框：1px solid border\n- 自动装饰标题栏带红绿灯点（红\u002F黄\u002F绿）\n- 内容 padding-top 以容纳标题栏\n- Clip-path: 倒角\n- 用于：博客卡片、FAQ 项、某些定价层级\n",[291,4448,4446],{"__ignoreMap":461},[115,4450,4451,4454],{},[119,4452,4453],{},"全息变体"," (variant=\"holographic\")：",[453,4456,4459],{"className":4457,"code":4458,"language":458},[456],"- 背景：muted (#1c1c2e) 30% 不透明度\n- 边框：1px solid accent 30% 不透明度\n- Box-shadow: 霓虹光晕\n- Backdrop-filter: blur 实现玻璃态效果\n- 角落装饰：卡片边缘的 4 个小边框角使用绝对定位\n- 用于：产品详情卡片、hero HUD 面板\n",[291,4460,4458],{"__ignoreMap":461},[175,4462,4463],{"id":4463},"输入框",[453,4465,4468],{"className":4466,"code":4467,"language":458},[456],"- 包装器：相对定位用于前缀图标\n- 前缀：\">\" 符号，强调色，绝对定位左侧\n- 背景：input (#12121a)\n- 边框：1px solid border (#2a2a3a)\n- Clip-path: .cyber-chamfer-sm\n- 文本：monospace，accent 颜色\n- Padding-left: 8（容纳前缀）\n- Placeholder：mutedForeground，样式化为终端提示符\n- 聚焦：边框变为 accent，霓虹光晕阴影，outline 移除\n- 过渡：all 200ms\n",[291,4469,4467],{"__ignoreMap":461},[168,4471],{},[110,4473,4474],{"id":4474},"布局策略",[115,4476,4477,4480,4481,4484],{},[119,4478,4479],{},"最大宽度","：主内容 ",[291,4482,4483],{},"max-w-7xl","，全出血区块内部内容受限",[115,4486,4487,1842],{},[119,4488,4489],{},"网格模式",[146,4491,4492,4502,4509],{},[149,4493,4494,4495,4498,4499],{},"特性：",[291,4496,4497],{},"grid-cols-1 md:grid-cols-2 lg:grid-cols-3","，容器带 ",[291,4500,4501],{},"-skew-y-1",[149,4503,4504,4505,4508],{},"定价：",[291,4506,4507],{},"grid-cols-1 md:grid-cols-3","，中间卡片放大",[149,4510,4511,4512,4515],{},"统计：带 ",[291,4513,4514],{},"divide-x divide-border"," 的水平 flex",[115,4517,4518,4521,4522,3659,4525,4528],{},[119,4519,4520],{},"间距","：8px 基础网格。宽裕的内边距（区块 ",[291,4523,4524],{},"py-24",[291,4526,4527],{},"py-32","）。密集的内部组件间距。",[115,4530,4531,1842],{},[119,4532,4533],{},"不对称要求",[146,4535,4536,4539,4542,4553],{},[149,4537,4538],{},"Hero：最小 60\u002F40 分割",[149,4540,4541],{},"至少一个区块有重叠元素（负边距）",[149,4543,4544,4545,4548,4549,4552],{},"区块容器使用 ",[291,4546,4547],{},"rotate-1"," 或 ",[291,4550,4551],{},"skew-y-1"," 变换",[149,4554,4555],{},"内容允许时网格中交错卡片高度",[168,4557],{},[110,4559,4561],{"id":4560},"非通用性大胆因素","非通用性（大胆因素）",[115,4563,4564,1842],{},[119,4565,4566],{},"强制大胆选择",[3169,4568,4569,4579,4585,4591,4597,4602,4618,4624],{},[149,4570,4571,4574,4575,4578],{},[119,4572,4573],{},"故障标题","：Hero h1 必须有",[119,4576,4577],{},"色差文本阴影","和偶尔\"故障\"的 CSS 动画（随机倾斜\u002F位移闪烁）",[149,4580,4581,4584],{},[119,4582,4583],{},"扫描线覆盖层","：整个页面有微妙的扫描线覆盖层（通过 body 或 main 上的 ::after）",[149,4586,4587,4590],{},[119,4588,4589],{},"终端美学","：至少一个区块必须感觉像终端（等宽、> 前缀、闪烁光标动画）",[149,4592,4593,4596],{},[119,4594,4595],{},"真正发光的霓虹边框","：不仅仅是彩色边框 - 堆叠的 box-shadows 创造真正的光晕效果",[149,4598,4599,4601],{},[119,4600,3366],{},"：卡片使用 clip-path 实现倒角\u002F切割角，而非圆角",[149,4603,4604,1842,4607],{},[119,4605,4606],{},"动画元素",[146,4608,4609,4612,4615],{},[149,4610,4611],{},"闪烁光标（animation: blink 1s step-end infinite）",[149,4613,4614],{},"微妙的悬停故障效果",[149,4616,4617],{},"渐变边框动画（色相旋转）",[149,4619,4620,4623],{},[119,4621,4622],{},"电路\u002F网格背景","：至少一个区块背景中可见科技图案",[149,4625,4626,4629],{},[119,4627,4628],{},"打字\u002F打字机效果","：考虑在副标题上或至少样式为正在输入中（尾随光标）",[168,4631],{},[110,4633,4634],{"id":4634},"效果与动画",[115,4636,4637,4640],{},[119,4638,4639],{},"运动感觉","：锐利、数字化、略带机械感。快速弹跳而非平滑缓动。",[115,4642,4643,1842],{},[119,4644,4645],{},"过渡",[453,4647,4649],{"className":3796,"code":4648,"language":3798,"meta":461,"style":461},"transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n\u002F* 或更数字化的感觉： *\u002F\ntransition: all 100ms steps(4);\n",[291,4650,4651,4677,4682],{"__ignoreMap":461},[2038,4652,4653,4656,4659,4661,4663,4665,4667,4670,4672,4675],{"class":2040,"line":2041},[2038,4654,4655],{"class":2044},"transition: all 150ms cubic-bezier(0",[2038,4657,4658],{"class":2181},".4",[2038,4660,3817],{"class":2048},[2038,4662,4068],{"class":2044},[2038,4664,3817],{"class":2048},[2038,4666,4068],{"class":2044},[2038,4668,4669],{"class":2181},".2",[2038,4671,3817],{"class":2048},[2038,4673,4674],{"class":2044}," 1",[2038,4676,3886],{"class":2048},[2038,4678,4679],{"class":2040,"line":677},[2038,4680,4681],{"class":2288},"\u002F* 或更数字化的感觉： *\u002F\n",[2038,4683,4684,4687],{"class":2040,"line":674},[2038,4685,4686],{"class":2044},"transition: all 100ms steps(4",[2038,4688,3886],{"class":2048},[115,4690,4691,1842],{},[119,4692,4693],{},"关键帧动画",[453,4695,4697],{"className":3796,"code":4696,"language":3798,"meta":461,"style":461},"\u002F* 闪烁光标 *\u002F\n@keyframes blink {\n  50% { opacity: 0; }\n}\n\n\u002F* 故障效果 *\u002F\n@keyframes glitch {\n  0%, 100% { transform: translate(0); }\n  20% { transform: translate(-2px, 2px); }\n  40% { transform: translate(2px, -2px); }\n  60% { transform: translate(-1px, -1px); }\n  80% { transform: translate(1px, 1px); }\n}\n\n\u002F* 扫描线滚动 *\u002F\n@keyframes scanline {\n  0% { transform: translateY(-100%); }\n  100% { transform: translateY(100vh); }\n}\n\n\u002F* RGB 偏移\u002F色差脉冲 *\u002F\n@keyframes rgbShift {\n  0%, 100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00d4ff; }\n  50% { text-shadow: 2px 0 #ff00ff, -2px 0 #00d4ff; }\n}\n",[291,4698,4699,4704,4715,4726,4731,4735,4740,4749,4764,4787,4808,4830,4852,4856,4860,4865,4874,4892,4909,4913,4917,4922,4931,4958,4983],{"__ignoreMap":461},[2038,4700,4701],{"class":2040,"line":2041},[2038,4702,4703],{"class":2288},"\u002F* 闪烁光标 *\u002F\n",[2038,4705,4706,4709,4712],{"class":2040,"line":677},[2038,4707,4708],{"class":2044},"@keyframes",[2038,4710,4711],{"class":2172}," blink",[2038,4713,4714],{"class":2048}," {\n",[2038,4716,4717,4720,4723],{"class":2040,"line":674},[2038,4718,4719],{"class":2048},"  50% { opacity: ",[2038,4721,4722],{"class":2181},"0",[2038,4724,4725],{"class":2048},"; }\n",[2038,4727,4728],{"class":2040,"line":2082},[2038,4729,4730],{"class":2048},"}\n",[2038,4732,4733],{"class":2040,"line":2088},[2038,4734,2109],{"emptyLinePlaceholder":700},[2038,4736,4737],{"class":2040,"line":2094},[2038,4738,4739],{"class":2288},"\u002F* 故障效果 *\u002F\n",[2038,4741,4742,4744,4747],{"class":2040,"line":2100},[2038,4743,4708],{"class":2044},[2038,4745,4746],{"class":2172}," glitch",[2038,4748,4714],{"class":2048},[2038,4750,4751,4754,4757,4759,4761],{"class":2040,"line":2106},[2038,4752,4753],{"class":2048},"  0%, 100% { transform: ",[2038,4755,4756],{"class":2159},"translate",[2038,4758,2218],{"class":2048},[2038,4760,4722],{"class":2181},[2038,4762,4763],{"class":2048},"); }\n",[2038,4765,4766,4769,4771,4773,4776,4778,4780,4783,4785],{"class":2040,"line":2112},[2038,4767,4768],{"class":2048},"  20% { transform: ",[2038,4770,4756],{"class":2159},[2038,4772,2218],{"class":2048},[2038,4774,4775],{"class":2181},"-2",[2038,4777,3837],{"class":3805},[2038,4779,2855],{"class":2048},[2038,4781,4782],{"class":2181},"2",[2038,4784,3837],{"class":3805},[2038,4786,4763],{"class":2048},[2038,4788,4789,4792,4794,4796,4798,4800,4802,4804,4806],{"class":2040,"line":2125},[2038,4790,4791],{"class":2048},"  40% { transform: ",[2038,4793,4756],{"class":2159},[2038,4795,2218],{"class":2048},[2038,4797,4782],{"class":2181},[2038,4799,3837],{"class":3805},[2038,4801,2855],{"class":2048},[2038,4803,4775],{"class":2181},[2038,4805,3837],{"class":3805},[2038,4807,4763],{"class":2048},[2038,4809,4810,4813,4815,4817,4820,4822,4824,4826,4828],{"class":2040,"line":2133},[2038,4811,4812],{"class":2048},"  60% { transform: ",[2038,4814,4756],{"class":2159},[2038,4816,2218],{"class":2048},[2038,4818,4819],{"class":2181},"-1",[2038,4821,3837],{"class":3805},[2038,4823,2855],{"class":2048},[2038,4825,4819],{"class":2181},[2038,4827,3837],{"class":3805},[2038,4829,4763],{"class":2048},[2038,4831,4832,4835,4837,4839,4842,4844,4846,4848,4850],{"class":2040,"line":2138},[2038,4833,4834],{"class":2048},"  80% { transform: ",[2038,4836,4756],{"class":2159},[2038,4838,2218],{"class":2048},[2038,4840,4841],{"class":2181},"1",[2038,4843,3837],{"class":3805},[2038,4845,2855],{"class":2048},[2038,4847,4841],{"class":2181},[2038,4849,3837],{"class":3805},[2038,4851,4763],{"class":2048},[2038,4853,4854],{"class":2040,"line":2148},[2038,4855,4730],{"class":2048},[2038,4857,4858],{"class":2040,"line":2153},[2038,4859,2109],{"emptyLinePlaceholder":700},[2038,4861,4862],{"class":2040,"line":2169},[2038,4863,4864],{"class":2288},"\u002F* 扫描线滚动 *\u002F\n",[2038,4866,4867,4869,4872],{"class":2040,"line":2188},[2038,4868,4708],{"class":2044},[2038,4870,4871],{"class":2172}," scanline",[2038,4873,4714],{"class":2048},[2038,4875,4876,4879,4882,4884,4887,4890],{"class":2040,"line":2204},[2038,4877,4878],{"class":2048},"  0% { transform: ",[2038,4880,4881],{"class":2159},"translateY",[2038,4883,2218],{"class":2048},[2038,4885,4886],{"class":2181},"-100",[2038,4888,4889],{"class":3805},"%",[2038,4891,4763],{"class":2048},[2038,4893,4894,4897,4899,4901,4904,4907],{"class":2040,"line":2227},[2038,4895,4896],{"class":2048},"  100% { transform: ",[2038,4898,4881],{"class":2159},[2038,4900,2218],{"class":2048},[2038,4902,4903],{"class":2181},"100",[2038,4905,4906],{"class":3805},"vh",[2038,4908,4763],{"class":2048},[2038,4910,4911],{"class":2040,"line":2232},[2038,4912,4730],{"class":2048},[2038,4914,4915],{"class":2040,"line":2237},[2038,4916,2109],{"emptyLinePlaceholder":700},[2038,4918,4919],{"class":2040,"line":2250},[2038,4920,4921],{"class":2288},"\u002F* RGB 偏移\u002F色差脉冲 *\u002F\n",[2038,4923,4924,4926,4929],{"class":2040,"line":2263},[2038,4925,4708],{"class":2044},[2038,4927,4928],{"class":2172}," rgbShift",[2038,4930,4714],{"class":2048},[2038,4932,4933,4936,4938,4940,4942,4945,4947,4949,4951,4953,4956],{"class":2040,"line":2280},[2038,4934,4935],{"class":2048},"  0%, 100% { text-shadow: ",[2038,4937,4775],{"class":2181},[2038,4939,3837],{"class":3805},[2038,4941,4068],{"class":2181},[2038,4943,4944],{"class":2181}," #ff00ff",[2038,4946,2855],{"class":2048},[2038,4948,4782],{"class":2181},[2038,4950,3837],{"class":3805},[2038,4952,4068],{"class":2181},[2038,4954,4955],{"class":2181}," #00d4ff",[2038,4957,4725],{"class":2048},[2038,4959,4960,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981],{"class":2040,"line":2285},[2038,4961,4962],{"class":2048},"  50% { text-shadow: ",[2038,4964,4782],{"class":2181},[2038,4966,3837],{"class":3805},[2038,4968,4068],{"class":2181},[2038,4970,4944],{"class":2181},[2038,4972,2855],{"class":2048},[2038,4974,4775],{"class":2181},[2038,4976,3837],{"class":3805},[2038,4978,4068],{"class":2181},[2038,4980,4955],{"class":2181},[2038,4982,4725],{"class":2048},[2038,4984,4985],{"class":2040,"line":2292},[2038,4986,4730],{"class":2048},[168,4988],{},[110,4990,4991],{"id":4991},"图标",[115,4993,4994,1842],{},[119,4995,4996],{},"Lucide 图标配置",[146,4998,4999,5006,5015,5018],{},[149,5000,5001,5002,5005],{},"描边宽度：",[291,5003,5004],{},"1.5px","（细、技术感）",[149,5007,5008,5009,4548,5012],{},"大小：通常 ",[291,5010,5011],{},"h-5 w-5",[291,5013,5014],{},"h-6 w-6",[149,5016,5017],{},"颜色：继承文本（通常是 accent 或 foreground）",[149,5019,5020,5021,5024],{},"样式：悬停时通过 filter: ",[291,5022,5023],{},"drop-shadow(0 0 4px currentColor)"," 添加微妙光晕",[115,5026,5027,5030],{},[119,5028,5029],{},"图标容器","：将图标放置在带光晕效果的边框正方形\u002F六边形内",[168,5032],{},[110,5034,5035],{"id":5035},"响应式策略",[115,5037,5038,5041],{},[119,5039,5040],{},"移动端适配","（移动优先）：",[115,5043,5044,1842],{},[119,5045,5046],{},"排版缩放",[146,5048,5049,5052,5055,5058],{},[149,5050,5051],{},"Hero h1：text-5xl（移动端）→ text-7xl（md）→ text-8xl（lg）",[149,5053,5054],{},"副标题：text-base → text-lg → text-xl",[149,5056,5057],{},"区块标题：text-4xl → text-5xl",[149,5059,5060],{},"所有尺寸保持 uppercase 和 tracking",[115,5062,5063,1842],{},[119,5064,5065],{},"布局变化",[146,5067,5068,5071,5074,5077,5080,5083],{},[149,5069,5070],{},"导航：\u003C lg 隐藏导航链接，\u003C sm 显示缩写 CTA 文本",[149,5072,5073],{},"统计：前 2 项仅顶部边框（移动端）→ 4 列垂直边框（桌面端）",[149,5075,5076],{},"所有特性\u002F博客\u002F推荐网格：单列 → 2 列（md）→ 3 列（lg）",[149,5078,5079],{},"定价：垂直堆叠 → 3 列网格，高亮卡片仅在 md+ 上缩放",[149,5081,5082],{},"Hero HUD：移动端隐藏（lg:block）",[149,5084,5085],{},"页脚：堆叠为单列 → 4 列网格",[115,5087,5088,1842],{},[119,5089,5090],{},"保持元素",[146,5092,5093,5096,5099,5102,5105,5108,5111],{},[149,5094,5095],{},"扫描线覆盖层（整页）",[149,5097,5098],{},"所有卡片的倒角",[149,5100,5101],{},"霓虹光晕效果（移动端可降低强度以提升性能）",[149,5103,5104],{},"网格\u002F电路背景",[149,5106,5107],{},"等宽排版",[149,5109,5110],{},"终端美学（>、$、前缀）",[149,5112,5113],{},"深色配色方案",[115,5115,5116,1842],{},[119,5117,5118],{},"触控目标",[146,5120,5121,5124,5127],{},[149,5122,5123],{},"所有交互元素最小 44px 高度",[149,5125,5126],{},"可点击项之间充足间距",[149,5128,5129],{},"FAQ 手风琴全宽点击区域",[168,5131],{},[110,5133,5134],{"id":5134},"无障碍",[115,5136,5137,5140],{},[119,5138,5139],{},"对比度","：所有文本满足 WCAG AA（暗背景上的 accent 绿 = 7.5:1 比例 - 优秀）",[115,5142,5143,1842],{},[119,5144,5145],{},"聚焦状态",[453,5147,5149],{"className":3796,"code":5148,"language":3798,"meta":461,"style":461},"focus-visible:outline-none\nfocus-visible:ring-2\nfocus-visible:ring-accent\nfocus-visible:ring-offset-2\nfocus-visible:ring-offset-background\n",[291,5150,5151,5162,5171,5180,5189],{"__ignoreMap":461},[2038,5152,5153,5156,5159],{"class":2040,"line":2041},[2038,5154,5155],{"class":3805},"focus-visible",[2038,5157,5158],{"class":2044},":",[2038,5160,5161],{"class":3805},"outline-none\n",[2038,5163,5164,5166,5168],{"class":2040,"line":677},[2038,5165,5155],{"class":3805},[2038,5167,5158],{"class":2044},[2038,5169,5170],{"class":3805},"ring-2\n",[2038,5172,5173,5175,5177],{"class":2040,"line":674},[2038,5174,5155],{"class":3805},[2038,5176,5158],{"class":2044},[2038,5178,5179],{"class":3805},"ring-accent\n",[2038,5181,5182,5184,5186],{"class":2040,"line":2082},[2038,5183,5155],{"class":3805},[2038,5185,5158],{"class":2044},[2038,5187,5188],{"class":3805},"ring-offset-2\n",[2038,5190,5191,5193,5195],{"class":2040,"line":2088},[2038,5192,5155],{"class":3805},[2038,5194,5158],{"class":2044},[2038,5196,5197],{"class":3805},"ring-offset-background\n",[115,5199,5200],{},"外加匹配霓虹美学的光晕效果。",[115,5202,5203,5206,5207,5210],{},[119,5204,5205],{},"减少动画","：尊重 ",[291,5208,5209],{},"prefers-reduced-motion"," - 禁用故障动画，保留静态色差",[168,5212],{},[110,5214,5215],{"id":5215},"实现注意事项",[146,5217,5218,5225,5228,5231,5234,5237],{},[149,5219,5220,5221,5224],{},"大量使用 Tailwind 任意值 ",[291,5222,5223],{},"[...]"," 自定义阴影和 clip-path",[149,5226,5227],{},"颜色使用 CSS 变量便于主题切换",[149,5229,5230],{},"扫描线通过 CSS 实现，非图片",[149,5232,5233],{},"故障动画应微妙且不频繁（不分散注意力）",[149,5235,5236],{},"在不同屏幕上测试光晕效果（在低对比度显示器上可能看起来褪色）",[149,5238,5239,5240],{},"考虑多 box-shadow 的 GPU 性能 - 谨慎使用 ",[291,5241,5242],{},"will-change: transform",[3227,5244,5245],{},"html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}",{"title":461,"searchDepth":674,"depth":674,"links":5247},[5248,5254,5261,5266,5267,5268,5269,5270,5271,5272],{"id":3287,"depth":677,"text":3287,"children":5249},[5250,5251,5252,5253],{"id":3290,"depth":674,"text":3290},{"id":3299,"depth":674,"text":3299},{"id":3310,"depth":674,"text":3310},{"id":3335,"depth":674,"text":3335},{"id":3378,"depth":677,"text":3379,"children":5255},[5256,5257,5258,5259,5260],{"id":3382,"depth":674,"text":3383},{"id":3589,"depth":674,"text":3589},{"id":3768,"depth":674,"text":3768},{"id":3889,"depth":674,"text":3889},{"id":4131,"depth":674,"text":4132},{"id":4342,"depth":677,"text":4342,"children":5262},[5263,5264,5265],{"id":4345,"depth":674,"text":4345},{"id":4424,"depth":674,"text":4425},{"id":4463,"depth":674,"text":4463},{"id":4474,"depth":677,"text":4474},{"id":4560,"depth":677,"text":4561},{"id":4634,"depth":677,"text":4634},{"id":4991,"depth":677,"text":4991},{"id":5035,"depth":677,"text":5035},{"id":5134,"depth":677,"text":5134},{"id":5215,"depth":677,"text":5215},"2026-04-15","高对比度的霓虹灯效果搭配黑色背景，故障动画，终端\u002F等宽字体，以科技为主题的装饰。一种受 80 年代科幻和黑客文化启发的反乌托邦数字美学。",{},"\u002Fblogs\u002Fcyberpunk-design-system",{"title":3279,"description":5274},"blogs\u002Fcyberpunk-design-system",[5280,5281,5282],"UI设计","提示词","赛博朋克","f2ID-BNx7dpjfQwxZBUK1mF9eVKUL3JiZ1v5RfC_Kwg",{"id":5285,"title":5286,"body":5287,"date":5273,"description":8142,"extension":698,"meta":8143,"navigation":700,"path":8144,"seo":8145,"stem":8146,"tags":8147,"__hash__":8149},"blogs\u002Fblogs\u002Fretro-90s-design-system.md","复古\u002F90年代怀旧设计风格",{"type":102,"value":5288,"toc":8095},[5289,5293,5295,5300,5306,5312,5314,5318,5322,5325,5623,5628,5648,5651,5657,5694,5699,5736,5741,5765,5767,5777,5781,5800,5806,5809,5814,5864,5875,5880,5945,5950,5996,6007,6013,6060,6066,6085,6089,6092,6098,6220,6223,6229,6281,6284,6289,6351,6354,6356,6359,6361,6366,6389,6394,6429,6434,6474,6480,6500,6505,6646,6648,6653,6674,6680,6686,6692,6707,6710,6726,6729,6734,6757,6765,6771,6777,6781,6784,6789,6822,6827,6841,6846,6852,6854,6858,6880,6885,6896,6898,6901,6904,6912,6917,6931,6941,6947,6971,6973,6979,6990,6996,7007,7013,7033,7039,7041,7045,7051,7054,7060,7071,7076,7087,7090,7093,7185,7191,7194,7200,7204,7207,7222,7228,7386,7390,7393,7396,7399,7413,7416,7419,7432,7435,7438,7449,7452,7455,7458,7461,7463,7466,7472,7477,7515,7519,7536,7541,7567,7575,7586,7588,7590,7595,7609,7614,7630,7635,7646,7651,7665,7674,7725,7727,7731,7735,7806,7810,7842,7846,7869,7871,7874,7878,7881,7887,7890,7894,7897,7922,7925,7935,7938,7970,7972,7975,7978,8074,8076,8079,8086,8089,8092],[105,5290,5292],{"id":5291},"设计风格复古90年代怀旧-retro-90s-nostalgia","设计风格：复古\u002F90年代怀旧 (Retro \u002F 90s Nostalgia)",[110,5294,3287],{"id":3287},[115,5296,5297,5299],{},[119,5298,3290],{},"：拥抱早期网络的原始、未经过滤的美学。这种设计庆祝1990年代网站的\"丑陋酷\"魅力——斜面按钮、系统字体、花哨的颜色和动画元素。它刻意反现代，拒绝极简主义，追求最大视觉冲击和怀旧真实性。每个像素都应该感觉像是在1997年的Windows 95机器上制作的。",[115,5301,5302,5305],{},[119,5303,5304],{},"氛围","：俏皮、混乱、怀旧、毫无歉意地响亮。想想GeoCities页面、\"正在建设中\"横幅、访问计数器和留言簿。这不是关于看起来过时——而是关于捕捉早期互联网的乐观、实验精神，当时每个人都在摸索。这种美学应该足够真实，让经历过那个时代的人会心一笑。",[115,5307,5308,5311],{},[119,5309,5310],{},"历史背景","：这种风格在1995-1999年间达到顶峰，当时个人电脑使用Windows 95\u002F98，显示器分辨率为800x600，网页浏览器提供的CSS有限。设计师在严重限制下工作，产生了一种我们正在忠实重现的独特视觉语言。",[168,5313],{},[110,5315,5317],{"id":5316},"设计token系统dna","设计Token系统（DNA）",[175,5319,5321],{"id":5320},"颜色仅浅色模式","颜色（仅浅色模式）",[115,5323,5324],{},"这个调色板直接取自Windows 95系统颜色和早期网络十六进制值。",[243,5326,5327,5341],{},[246,5328,5329],{},[249,5330,5331,5333,5336,5338],{},[252,5332,3392],{},[252,5334,5335],{},"值",[252,5337,1759],{},[252,5339,5340],{},"备注",[262,5342,5343,5360,5377,5394,5411,5429,5447,5465,5483,5499,5517,5534,5552,5570,5588,5606],{},[249,5344,5345,5349,5354,5357],{},[267,5346,5347],{},[291,5348,3406],{},[267,5350,5351],{},[291,5352,5353],{},"#C0C0C0",[267,5355,5356],{},"主要页面背景",[267,5358,5359],{},"经典Windows 95按钮面灰色",[249,5361,5362,5366,5371,5374],{},[267,5363,5364],{},[291,5365,3421],{},[267,5367,5368],{},[291,5369,5370],{},"#000000",[267,5372,5373],{},"纯黑文字",[267,5375,5376],{},"最大对比度，正文文字不使用灰色",[249,5378,5379,5383,5388,5391],{},[267,5380,5381],{},[291,5382,3451],{},[267,5384,5385],{},[291,5386,5387],{},"#808080",[267,5389,5390],{},"次要元素、元数据",[267,5392,5393],{},"正好50%灰色（128,128,128）",[249,5395,5396,5400,5405,5408],{},[267,5397,5398],{},[291,5399,3481],{},[267,5401,5402],{},[291,5403,5404],{},"#0000FF",[267,5406,5407],{},"超链接（未访问）",[267,5409,5410],{},"纯蓝色最大饱和度",[249,5412,5413,5418,5423,5426],{},[267,5414,5415],{},[291,5416,5417],{},"secondary",[267,5419,5420],{},[291,5421,5422],{},"#FF0000",[267,5424,5425],{},"热红色强调",[267,5427,5428],{},"纯红色最大饱和度",[249,5430,5431,5436,5441,5444],{},[267,5432,5433],{},[291,5434,5435],{},"tertiary",[267,5437,5438],{},[291,5439,5440],{},"#FFFF00",[267,5442,5443],{},"亮黄色高亮",[267,5445,5446],{},"纯黄色，用于徽章和高亮",[249,5448,5449,5454,5459,5462],{},[267,5450,5451],{},[291,5452,5453],{},"success",[267,5455,5456],{},[291,5457,5458],{},"#00FF00",[267,5460,5461],{},"柠檬绿",[267,5463,5464],{},"纯绿色最大饱和度",[249,5466,5467,5472,5477,5480],{},[267,5468,5469],{},[291,5470,5471],{},"successDark",[267,5473,5474],{},[291,5475,5476],{},"#00AA00",[267,5478,5479],{},"按钮的深绿色",[267,5481,5482],{},"更可读的绿色变体",[249,5484,5485,5489,5493,5496],{},[267,5486,5487],{},[291,5488,3535],{},[267,5490,5491],{},[291,5492,5370],{},[267,5494,5495],{},"纯黑边框",[267,5497,5498],{},"用于外边框",[249,5500,5501,5506,5511,5514],{},[267,5502,5503],{},[291,5504,5505],{},"borderLight",[267,5507,5508],{},[291,5509,5510],{},"#FFFFFF",[267,5512,5513],{},"3D高亮白色",[267,5515,5516],{},"顶部\u002F左侧斜面边缘",[249,5518,5519,5524,5528,5531],{},[267,5520,5521],{},[291,5522,5523],{},"borderDark",[267,5525,5526],{},[291,5527,5387],{},[267,5529,5530],{},"3D阴影灰色",[267,5532,5533],{},"底部\u002F右侧斜面边缘",[249,5535,5536,5541,5546,5549],{},[267,5537,5538],{},[291,5539,5540],{},"titleBar",[267,5542,5543],{},[291,5544,5545],{},"#000080",[267,5547,5548],{},"Windows标题栏海军蓝",[267,5550,5551],{},"纯深蓝色（海军蓝）",[249,5553,5554,5559,5564,5567],{},[267,5555,5556],{},[291,5557,5558],{},"titleBarGradientEnd",[267,5560,5561],{},[291,5562,5563],{},"#1084D0",[267,5565,5566],{},"标题栏渐变",[267,5568,5569],{},"Windows 98活动窗口渐变",[249,5571,5572,5577,5582,5585],{},[267,5573,5574],{},[291,5575,5576],{},"panelYellow",[267,5578,5579],{},[291,5580,5581],{},"#FFFFCC",[267,5583,5584],{},"浅黄色内容面板",[267,5586,5587],{},"真实的Windows记事本\u002F帮助颜色",[249,5589,5590,5595,5600,5603],{},[267,5591,5592],{},[291,5593,5594],{},"visitedLink",[267,5596,5597],{},[291,5598,5599],{},"#800080",[267,5601,5602],{},"已访问超链接",[267,5604,5605],{},"紫色\u002F栗色",[249,5607,5608,5613,5617,5620],{},[267,5609,5610],{},[291,5611,5612],{},"hoverLink",[267,5614,5615],{},[291,5616,5422],{},[267,5618,5619],{},"链接悬停状态",[267,5621,5622],{},"红色",[115,5624,5625,1842],{},[119,5626,5627],{},"颜色关系",[146,5629,5630,5633,5645],{},[149,5631,5632],{},"所有颜色都是最大饱和度（纯RGB值，至少一个通道在0或255）",[149,5634,5635,5636,5638,5639,5638,5641,5638,5643],{},"没有渐变灰色 - 只有 ",[291,5637,5370],{},"、",[291,5640,5387],{},[291,5642,5353],{},[291,5644,5510],{},[149,5646,5647],{},"链接遵循经典顺序：蓝色 → 紫色（已访问） → 红色（悬停）",[175,5649,5650],{"id":5650},"字体排版",[115,5652,5653,5656],{},[119,5654,5655],{},"字体栈","（唤起1995-1999年的系统字体）：",[146,5658,5659,5667,5675,5684],{},[149,5660,5661,1842,5664],{},[119,5662,5663],{},"主要正文",[291,5665,5666],{},"\"MS Sans Serif\", \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif",[149,5668,5669,1842,5671,5674],{},[119,5670,3601],{},[291,5672,5673],{},"\"Arial Black\", Impact, Haettenschweiler, sans-serif","（仅粗重、粗体）",[149,5676,5677,1842,5680,5683],{},[119,5678,5679],{},"等宽",[291,5681,5682],{},"\"Courier New\", Courier, monospace","（用于日期、统计、计数器、类代码元素）",[149,5685,5686,5689,5690,5693],{},[119,5687,5688],{},"俏皮点缀","（极少使用）：",[291,5691,5692],{},"\"Comic Sans MS\", cursive","（仅用于\"有趣\"的装饰元素如果需要）",[115,5695,5696,1842],{},[119,5697,5698],{},"字号",[146,5700,5701,5707,5713,5719,5724,5730],{},[149,5702,5703,5706],{},[119,5704,5705],{},"H1首屏","：48px-96px（3xl到6xl），总是大写或首字母大写，Arial Black\u002FImpact",[149,5708,5709,5712],{},[119,5710,5711],{},"H2章节","：32-48px（2xl到4xl），经常大写，Arial Black",[149,5714,5715,5718],{},[119,5716,5717],{},"H3小节","：20-24px（lg到xl），粗体字重",[149,5720,5721,5723],{},[119,5722,3610],{},"：14-16px，默认字重，可读密度",[149,5725,5726,5729],{},[119,5727,5728],{},"小\u002F元数据","：12px（xs），经常等宽用于日期和元数据",[149,5731,5732,5735],{},[119,5733,5734],{},"标签","：10-12px，大写，有时等宽",[115,5737,5738,1842],{},[119,5739,5740],{},"字体排版模式",[146,5742,5743,5746,5755,5758],{},[149,5744,5745],{},"标题是粗体或黑色字重 - 这个时代不存在细体或轻体",[149,5747,5748,5749,3659,5752,5754],{},"大写标题的字间距：",[291,5750,5751],{},"tracking-tight",[291,5753,3700],{},"（不扩展）",[149,5756,5757],{},"行高：紧凑（标题1.2-1.4，正文1.5-1.6）",[149,5759,5760,5761,5764],{},"3D文字的文字阴影：",[291,5762,5763],{},"text-shadow: 2px 2px 0 #808080","（硬边，无模糊）",[175,5766,3768],{"id":3768},[115,5768,5769,5772,5773,5776],{},[119,5770,5771],{},"圆角","：到处都是 ",[291,5774,5775],{},"0px","。没有例外。90年代没有圆角。",[115,5778,5779,1842],{},[119,5780,3779],{},[146,5782,5783,5788,5794],{},[149,5784,5785,5786],{},"标准：大多数元素 ",[291,5787,3786],{},[149,5789,5790,5791],{},"强调：章节分隔线和高亮元素 ",[291,5792,5793],{},"4px",[149,5795,5796,5797,5799],{},"最小：仅微妙内部细节 ",[291,5798,3782],{},"（罕见）",[115,5801,5802,5805],{},[119,5803,5804],{},"3D斜面效果","（标志性特征）：",[115,5807,5808],{},"这是最关键的视觉效果。Windows 95使用特定的4值边框颜色语法结合box-shadow创造深度。",[115,5810,5811,1842],{},[119,5812,5813],{},"外凸（凸起）- 看起来突出的元素",[453,5815,5817],{"className":3796,"code":5816,"language":3798,"meta":461,"style":461},"border: 2px solid;\nborder-color: #ffffff #808080 #808080 #ffffff; \u002F* 上 右 下 左 *\u002F\nbox-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;\n",[291,5818,5819,5824,5845],{"__ignoreMap":461},[2038,5820,5821],{"class":2040,"line":2041},[2038,5822,5823],{"class":2044},"border: 2px solid;\n",[2038,5825,5826,5829,5832,5834,5837,5839,5842],{"class":2040,"line":677},[2038,5827,5828],{"class":3805},"border-color",[2038,5830,5831],{"class":2044},": ",[2038,5833,1789],{"class":2141},[2038,5835,5836],{"class":3912}," #808080",[2038,5838,5836],{"class":3912},[2038,5840,5841],{"class":3912}," #ffffff;",[2038,5843,5844],{"class":2288}," \u002F* 上 右 下 左 *\u002F\n",[2038,5846,5847,5850,5853,5856,5858,5861],{"class":2040,"line":674},[2038,5848,5849],{"class":3805},"box-shadow",[2038,5851,5852],{"class":2044},": inset -1px -1px 0 ",[2038,5854,5855],{"class":3912},"#404040",[2038,5857,3817],{"class":2048},[2038,5859,5860],{"class":2044}," inset 1px 1px 0 ",[2038,5862,5863],{"class":3912},"#dfdfdf;\n",[146,5865,5866,5869,5872],{},[149,5867,5868],{},"顶部和左侧边缘：白色（#ffffff）",[149,5870,5871],{},"底部和右侧边缘：灰色（#808080）",[149,5873,5874],{},"内部阴影用更深（#404040）和更浅（#dfdfdf）的点缀增加深度",[115,5876,5877,1842],{},[119,5878,5879],{},"外凸增强（更深斜面）",[453,5881,5883],{"className":3796,"code":5882,"language":3798,"meta":461,"style":461},"border: 2px solid;\nborder-color: #ffffff #808080 #808080 #ffffff;\nbox-shadow:\n  inset -2px -2px 0 #808080,\n  inset 2px 2px 0 #fff,\n  inset -4px -4px 0 #404040,\n  inset 4px 4px 0 #dfdfdf;\n",[291,5884,5885,5889,5904,5910,5919,5929,5938],{"__ignoreMap":461},[2038,5886,5887],{"class":2040,"line":2041},[2038,5888,5823],{"class":2044},[2038,5890,5891,5893,5895,5897,5899,5901],{"class":2040,"line":677},[2038,5892,5828],{"class":3805},[2038,5894,5831],{"class":2044},[2038,5896,1789],{"class":2141},[2038,5898,5836],{"class":3912},[2038,5900,5836],{"class":3912},[2038,5902,5903],{"class":3912}," #ffffff;\n",[2038,5905,5906,5908],{"class":2040,"line":674},[2038,5907,5849],{"class":3805},[2038,5909,4250],{"class":2044},[2038,5911,5912,5915,5917],{"class":2040,"line":2082},[2038,5913,5914],{"class":2044},"  inset -2px -2px 0 ",[2038,5916,5387],{"class":3912},[2038,5918,2185],{"class":2048},[2038,5920,5921,5924,5927],{"class":2040,"line":2088},[2038,5922,5923],{"class":2044},"  inset 2px 2px 0 ",[2038,5925,5926],{"class":2141},"#fff",[2038,5928,2185],{"class":2048},[2038,5930,5931,5934,5936],{"class":2040,"line":2094},[2038,5932,5933],{"class":2044},"  inset -4px -4px 0 ",[2038,5935,5855],{"class":3912},[2038,5937,2185],{"class":2048},[2038,5939,5940,5943],{"class":2040,"line":2100},[2038,5941,5942],{"class":2044},"  inset 4px 4px 0 ",[2038,5944,5863],{"class":3912},[115,5946,5947,1842],{},[119,5948,5949],{},"内凹（下沉）- 看起来压入的元素",[453,5951,5953],{"className":3796,"code":5952,"language":3798,"meta":461,"style":461},"border: 2px solid;\nborder-color: #808080 #ffffff #ffffff #808080; \u002F* 与外凸相反 *\u002F\nbox-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;\n",[291,5954,5955,5959,5980],{"__ignoreMap":461},[2038,5956,5957],{"class":2040,"line":2041},[2038,5958,5823],{"class":2044},[2038,5960,5961,5963,5965,5967,5970,5972,5974,5977],{"class":2040,"line":677},[2038,5962,5828],{"class":3805},[2038,5964,5831],{"class":2044},[2038,5966,5387],{"class":3912},[2038,5968,5969],{"class":2141}," #ffffff",[2038,5971,5969],{"class":2141},[2038,5973,5836],{"class":3912},[2038,5975,5976],{"class":2044},";",[2038,5978,5979],{"class":2288}," \u002F* 与外凸相反 *\u002F\n",[2038,5981,5982,5984,5987,5989,5991,5994],{"class":2040,"line":674},[2038,5983,5849],{"class":3805},[2038,5985,5986],{"class":2044},": inset 1px 1px 0 ",[2038,5988,5855],{"class":3912},[2038,5990,3817],{"class":2048},[2038,5992,5993],{"class":2044}," inset -1px -1px 0 ",[2038,5995,5863],{"class":3912},[146,5997,5998,6001,6004],{},[149,5999,6000],{},"顶部和左侧边缘：灰色（#808080）",[149,6002,6003],{},"底部和右侧边缘：白色（#ffffff）",[149,6005,6006],{},"内部阴影创造凹陷外观",[115,6008,6009,6012],{},[119,6010,6011],{},"活跃\u002F按下状态","：\n当外凸元素被点击时，它变成内凹并向下和向右平移1px：",[453,6014,6016],{"className":3796,"code":6015,"language":3798,"meta":461,"style":461},"border-color: #808080 #ffffff #ffffff #808080;\nbox-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;\ntransform: translate(1px, 1px);\n",[291,6017,6018,6034,6048],{"__ignoreMap":461},[2038,6019,6020,6022,6024,6026,6028,6030,6032],{"class":2040,"line":2041},[2038,6021,5828],{"class":3805},[2038,6023,5831],{"class":2044},[2038,6025,5387],{"class":3912},[2038,6027,5969],{"class":2141},[2038,6029,5969],{"class":2141},[2038,6031,5836],{"class":3912},[2038,6033,3923],{"class":2044},[2038,6035,6036,6038,6040,6042,6044,6046],{"class":2040,"line":677},[2038,6037,5849],{"class":3805},[2038,6039,5986],{"class":2044},[2038,6041,5855],{"class":3912},[2038,6043,3817],{"class":2048},[2038,6045,5993],{"class":2044},[2038,6047,5863],{"class":3912},[2038,6049,6050,6053,6055,6058],{"class":2040,"line":674},[2038,6051,6052],{"class":2044},"transform: translate(1px",[2038,6054,3817],{"class":2048},[2038,6056,6057],{"class":2044}," 1px",[2038,6059,3886],{"class":2048},[115,6061,6062,6065],{},[119,6063,6064],{},"Tailwind实现","：\n使用下划线代替空格：",[146,6067,6068,6074,6080],{},[149,6069,6070,6073],{},[291,6071,6072],{},"[border-color:#fff_#808080_#808080_#fff]"," 用于外凸",[149,6075,6076,6079],{},[291,6077,6078],{},"[border-color:#808080_#fff_#fff_#808080]"," 用于内凹",[149,6081,6082],{},[291,6083,6084],{},"[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]",[175,6086,6088],{"id":6087},"纹理与图案强制性","纹理与图案（强制性）",[115,6090,6091],{},"背景绝不能是平的。这对真实性至关重要。",[115,6093,6094,6097],{},[119,6095,6096],{},"90年代平铺图案","（主要技术）：",[453,6099,6101],{"className":3796,"code":6100,"language":3798,"meta":461,"style":461},"background-color: #c0c0c0;\nbackground-image:\n  linear-gradient(45deg, #b8b8b8 25%, transparent 25%),\n  linear-gradient(-45deg, #b8b8b8 25%, transparent 25%),\n  linear-gradient(45deg, transparent 75%, #b8b8b8 75%),\n  linear-gradient(-45deg, transparent 75%, #b8b8b8 75%);\nbackground-size: 4px 4px;\nbackground-position: 0 0, 0 2px, 2px -2px, -2px 0px;\n",[291,6102,6103,6113,6119,6139,6156,6174,6190,6197],{"__ignoreMap":461},[2038,6104,6105,6108,6110],{"class":2040,"line":2041},[2038,6106,6107],{"class":3805},"background-color",[2038,6109,5831],{"class":2044},[2038,6111,6112],{"class":3912},"#c0c0c0;\n",[2038,6114,6115,6117],{"class":2040,"line":677},[2038,6116,4247],{"class":3805},[2038,6118,4250],{"class":2044},[2038,6120,6121,6124,6126,6129,6132,6134,6137],{"class":2040,"line":674},[2038,6122,6123],{"class":2044},"  linear-gradient(45deg",[2038,6125,3817],{"class":2048},[2038,6127,6128],{"class":2141}," #b8b8b8",[2038,6130,6131],{"class":2044}," 25%",[2038,6133,3817],{"class":2048},[2038,6135,6136],{"class":2044}," transparent 25%",[2038,6138,4283],{"class":2048},[2038,6140,6141,6144,6146,6148,6150,6152,6154],{"class":2040,"line":2082},[2038,6142,6143],{"class":2044},"  linear-gradient(-45deg",[2038,6145,3817],{"class":2048},[2038,6147,6128],{"class":2141},[2038,6149,6131],{"class":2044},[2038,6151,3817],{"class":2048},[2038,6153,6136],{"class":2044},[2038,6155,4283],{"class":2048},[2038,6157,6158,6160,6162,6165,6167,6169,6172],{"class":2040,"line":2088},[2038,6159,6123],{"class":2044},[2038,6161,3817],{"class":2048},[2038,6163,6164],{"class":2044}," transparent 75%",[2038,6166,3817],{"class":2048},[2038,6168,6128],{"class":2141},[2038,6170,6171],{"class":2044}," 75%",[2038,6173,4283],{"class":2048},[2038,6175,6176,6178,6180,6182,6184,6186,6188],{"class":2040,"line":2094},[2038,6177,6143],{"class":2044},[2038,6179,3817],{"class":2048},[2038,6181,6164],{"class":2044},[2038,6183,3817],{"class":2048},[2038,6185,6128],{"class":2141},[2038,6187,6171],{"class":2044},[2038,6189,3886],{"class":2048},[2038,6191,6192,6194],{"class":2040,"line":2100},[2038,6193,4322],{"class":3805},[2038,6195,6196],{"class":2044},": 4px 4px;\n",[2038,6198,6199,6202,6205,6207,6210,6212,6215,6217],{"class":2040,"line":2106},[2038,6200,6201],{"class":3805},"background-position",[2038,6203,6204],{"class":2044},": 0 0",[2038,6206,3817],{"class":2048},[2038,6208,6209],{"class":2044}," 0 2px",[2038,6211,3817],{"class":2048},[2038,6213,6214],{"class":2044}," 2px -2px",[2038,6216,3817],{"class":2048},[2038,6218,6219],{"class":2044}," -2px 0px;\n",[115,6221,6222],{},"这创造出微妙的对角交叉线纹理，提供纹理而不会分散注意力。",[115,6224,6225,6228],{},[119,6226,6227],{},"施工警示条纹","（用于强调区域）：",[453,6230,6232],{"className":3796,"code":6231,"language":3798,"meta":461,"style":461},"background: repeating-linear-gradient(\n  45deg,\n  #ffff00,\n  #ffff00 10px,\n  #000000 10px,\n  #000000 20px\n);\n",[291,6233,6234,6238,6245,6252,6261,6270,6277],{"__ignoreMap":461},[2038,6235,6236],{"class":2040,"line":2041},[2038,6237,4148],{"class":2044},[2038,6239,6240,6243],{"class":2040,"line":677},[2038,6241,6242],{"class":2044},"  45deg",[2038,6244,2185],{"class":2048},[2038,6246,6247,6250],{"class":2040,"line":674},[2038,6248,6249],{"class":2141},"  #ffff00",[2038,6251,2185],{"class":2048},[2038,6253,6254,6256,6259],{"class":2040,"line":2082},[2038,6255,6249],{"class":2141},[2038,6257,6258],{"class":2044}," 10px",[2038,6260,2185],{"class":2048},[2038,6262,6263,6266,6268],{"class":2040,"line":2088},[2038,6264,6265],{"class":3912},"  #000000",[2038,6267,6258],{"class":2044},[2038,6269,2185],{"class":2048},[2038,6271,6272,6274],{"class":2040,"line":2094},[2038,6273,6265],{"class":3912},[2038,6275,6276],{"class":2044}," 20px\n",[2038,6278,6279],{"class":2040,"line":2100},[2038,6280,3886],{"class":2048},[115,6282,6283],{},"正好10px黄色，10px黑色条纹，45度角。",[115,6285,6286,1842],{},[119,6287,6288],{},"带凹槽效果的水平线（HR）",[453,6290,6292],{"className":3796,"code":6291,"language":3798,"meta":461,"style":461},"border: none;\nheight: 4px;\nbackground: linear-gradient(\n  to bottom,\n  #808080 0%, #808080 50%,\n  #ffffff 50%, #ffffff 100%\n);\n",[291,6293,6294,6299,6304,6309,6316,6333,6347],{"__ignoreMap":461},[2038,6295,6296],{"class":2040,"line":2041},[2038,6297,6298],{"class":2044},"border: none;\n",[2038,6300,6301],{"class":2040,"line":677},[2038,6302,6303],{"class":2044},"height: 4px;\n",[2038,6305,6306],{"class":2040,"line":674},[2038,6307,6308],{"class":2044},"background: linear-gradient(\n",[2038,6310,6311,6314],{"class":2040,"line":2082},[2038,6312,6313],{"class":2044},"  to bottom",[2038,6315,2185],{"class":2048},[2038,6317,6318,6321,6324,6326,6328,6331],{"class":2040,"line":2088},[2038,6319,6320],{"class":3912},"  #808080",[2038,6322,6323],{"class":2044}," 0%",[2038,6325,3817],{"class":2048},[2038,6327,5836],{"class":3912},[2038,6329,6330],{"class":2044}," 50%",[2038,6332,2185],{"class":2048},[2038,6334,6335,6338,6340,6342,6344],{"class":2040,"line":2094},[2038,6336,6337],{"class":2141},"  #ffffff",[2038,6339,6330],{"class":2044},[2038,6341,3817],{"class":2048},[2038,6343,5969],{"class":2141},[2038,6345,6346],{"class":2044}," 100%\n",[2038,6348,6349],{"class":2040,"line":2100},[2038,6350,3886],{"class":2048},[115,6352,6353],{},"创造出经典的\"蚀刻\"分隔线外观。",[168,6355],{},[110,6357,6358],{"id":6358},"组件样式原则",[175,6360,4345],{"id":4345},[115,6362,6363,1842],{},[119,6364,6365],{},"视觉要求",[146,6367,6368,6371,6374,6380,6383,6386],{},[149,6369,6370],{},"边框：2px，4值外凸颜色模式",[149,6372,6373],{},"背景：取决于变体的微妙渐变或纯色",[149,6375,6376,6377,6379],{},"文字：粗体、大写配合 ",[291,6378,3700],{},"，居中",[149,6381,6382],{},"内边距：垂直8px，水平16px（舒适的点击区域）",[149,6384,6385],{},"无圆角",[149,6387,6388],{},"无柔和投影",[115,6390,6391,1842],{},[119,6392,6393],{},"状态过渡",[146,6395,6396,6402,6408,6414,6420],{},[149,6397,6398,6401],{},[119,6399,6400],{},"默认","：外凸斜面，悬停时背景稍亮",[149,6403,6404,6407],{},[119,6405,6406],{},"悬停","：背景变亮1-2个色阶，保持外凸",[149,6409,6410,6413],{},[119,6411,6412],{},"活跃\u002F按下","：内凸斜面（反转border-color），translate(1px, 1px)",[149,6415,6416,6419],{},[119,6417,6418],{},"焦点","：2px黑色虚线轮廓，2px偏移（Windows 95焦点环）",[149,6421,6422,6424,6425,6428],{},[119,6423,4645],{},"：无或即时（",[291,6426,6427],{},"transition-none"," 或最大50ms）- 无平滑缓动",[115,6430,6431,1842],{},[119,6432,6433],{},"变体",[3169,6435,6436,6444,6452,6460,6468],{},[149,6437,6438,1842,6441,6443],{},[119,6439,6440],{},"默认\u002F幽灵",[291,6442,5353],{}," 背景，黑色文字，外凸斜面",[149,6445,6446,1842,6449,6451],{},[119,6447,6448],{},"点缀\u002F主要",[291,6450,5404],{}," 背景，白色文字，蓝色色调斜面边缘",[149,6453,6454,1842,6457,6459],{},[119,6455,6456],{},"危险",[291,6458,5422],{}," 背景，白色文字，红色色调斜面边缘",[149,6461,6462,1842,6465,6467],{},[119,6463,6464],{},"成功",[291,6466,5476],{},"（可读绿色）背景，白色文字，绿色色调斜面边缘",[149,6469,6470,6473],{},[119,6471,6472],{},"轮廓","：白色背景，黑色文字，外凸斜面",[115,6475,6476,6479],{},[119,6477,6478],{},"斜面颜色着色","：\n对于彩色按钮，将斜面边缘着色以匹配：",[146,6481,6482,6488,6494],{},[149,6483,6484,6485],{},"蓝色按钮：",[291,6486,6487],{},"border-color: #5555ff #000080 #000080 #5555ff",[149,6489,6490,6491],{},"红色按钮：",[291,6492,6493],{},"border-color: #ff5555 #800000 #800000 #ff5555",[149,6495,6496,6497],{},"绿色按钮：",[291,6498,6499],{},"border-color: #00ff00 #006600 #006600 #00ff00",[115,6501,6502,1842],{},[119,6503,6504],{},"示例Tailwind类",[453,6506,6508],{"className":3796,"code":6507,"language":3798,"meta":461,"style":461},"border-2\nbg-[#c0c0c0]\ntext-black\n[border-color:#fff_#808080_#808080_#fff]\n[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]\nhover:bg-[#d0d0d0]\nactive:[border-color:#808080_#fff_#fff_#808080]\nactive:[box-shadow:inset_1px_1px_0_#404040,inset_-1px_-1px_0_#dfdfdf]\nactive:translate-x-[1px]\nactive:translate-y-[1px]\nfocus-visible:outline-dotted\nfocus-visible:outline-2\nfocus-visible:outline-black\nfocus-visible:outline-offset-2\n",[291,6509,6510,6515,6529,6534,6544,6554,6568,6573,6582,6597,6610,6619,6628,6637],{"__ignoreMap":461},[2038,6511,6512],{"class":2040,"line":2041},[2038,6513,6514],{"class":3805},"border-2\n",[2038,6516,6517,6520,6523,6526],{"class":2040,"line":677},[2038,6518,6519],{"class":3805},"bg-",[2038,6521,6522],{"class":2044},"[#",[2038,6524,6525],{"class":2181},"c0c0c0",[2038,6527,6528],{"class":2044},"]\n",[2038,6530,6531],{"class":2040,"line":674},[2038,6532,6533],{"class":3805},"text-black\n",[2038,6535,6536,6539,6542],{"class":2040,"line":2082},[2038,6537,6538],{"class":2044},"[border-color:#fff_#808080_#808080_#",[2038,6540,6541],{"class":2181},"fff",[2038,6543,6528],{"class":2044},[2038,6545,6546,6549,6552],{"class":2040,"line":2088},[2038,6547,6548],{"class":2044},"[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#",[2038,6550,6551],{"class":2181},"dfdfdf",[2038,6553,6528],{"class":2044},[2038,6555,6556,6559,6561,6563,6566],{"class":2040,"line":2094},[2038,6557,6558],{"class":2044},"hover:",[2038,6560,6519],{"class":3805},[2038,6562,6522],{"class":2044},[2038,6564,6565],{"class":2181},"d0d0d0",[2038,6567,6528],{"class":2044},[2038,6569,6570],{"class":2040,"line":2100},[2038,6571,6572],{"class":2044},"active:[border-color:#808080_#fff_#fff_#808080]\n",[2038,6574,6575,6578,6580],{"class":2040,"line":2106},[2038,6576,6577],{"class":2044},"active:[box-shadow:inset_1px_1px_0_#404040,inset_-1px_-1px_0_#",[2038,6579,6551],{"class":2181},[2038,6581,6528],{"class":2044},[2038,6583,6584,6587,6590,6593,6595],{"class":2040,"line":2112},[2038,6585,6586],{"class":2044},"active:",[2038,6588,6589],{"class":3805},"translate-x-",[2038,6591,6592],{"class":2044},"[1",[2038,6594,3837],{"class":2181},[2038,6596,6528],{"class":2044},[2038,6598,6599,6601,6604,6606,6608],{"class":2040,"line":2125},[2038,6600,6586],{"class":2044},[2038,6602,6603],{"class":3805},"translate-y-",[2038,6605,6592],{"class":2044},[2038,6607,3837],{"class":2181},[2038,6609,6528],{"class":2044},[2038,6611,6612,6614,6616],{"class":2040,"line":2133},[2038,6613,5155],{"class":3805},[2038,6615,5158],{"class":2044},[2038,6617,6618],{"class":3805},"outline-dotted\n",[2038,6620,6621,6623,6625],{"class":2040,"line":2138},[2038,6622,5155],{"class":3805},[2038,6624,5158],{"class":2044},[2038,6626,6627],{"class":3805},"outline-2\n",[2038,6629,6630,6632,6634],{"class":2040,"line":2148},[2038,6631,5155],{"class":3805},[2038,6633,5158],{"class":2044},[2038,6635,6636],{"class":3805},"outline-black\n",[2038,6638,6639,6641,6643],{"class":2040,"line":2153},[2038,6640,5155],{"class":3805},[2038,6642,5158],{"class":2044},[2038,6644,6645],{"class":3805},"outline-offset-2\n",[175,6647,4425],{"id":4424},[115,6649,6650,1842],{},[119,6651,6652],{},"面板\u002F卡片结构",[146,6654,6655,6661,6668],{},[149,6656,6657,6658,6660],{},"容器：2px外凸斜面，",[291,6659,5353],{}," 背景",[149,6662,6663,6664,6667],{},"标题栏：渐变 ",[291,6665,6666],{},"linear-gradient(to right, #000080, #1084d0)","，白色文字，粗体，4-8px内边距",[149,6669,6670,6671,6673],{},"内容区域：内凸斜面（下沉），白色或 ",[291,6672,5581],{},"（黄色）背景",[115,6675,6676,6679],{},[119,6677,6678],{},"窗口风格卡片","（最独特）：",[453,6681,6684],{"className":6682,"code":6683,"language":458},[456],"外部容器：外凸斜面，灰色背景\n├── 标题栏：海军蓝渐变（#000080 → #1084d0），白色粗体文字\n└── 内容区域：内凸斜面，白色背景，内边距16px\n",[291,6685,6683],{"__ignoreMap":461},[115,6687,6688,6691],{},[119,6689,6690],{},"交替行背景","：\n对于表格状布局，在以下之间交替：",[146,6693,6694,6700],{},[149,6695,6696,6697,6699],{},"偶数行：",[291,6698,5510],{},"（白色）",[149,6701,6702,6703,6706],{},"奇数行：",[291,6704,6705],{},"#E8E8E8","（浅灰色）",[115,6708,6709],{},"这创造出经典的电子表格\u002F数据库外观。",[115,6711,6712,6715,6716,497,6719,6722,6723,6725],{},[119,6713,6714],{},"单元格之间的边框","：\n使用 ",[291,6717,6718],{},"border-right-2",[291,6720,6721],{},"border-bottom-2"," 配合 ",[291,6724,5387],{}," 创造可见网格线。",[175,6727,6728],{"id":6728},"表单输入框",[115,6730,6731,1842],{},[119,6732,6733],{},"输入字段",[146,6735,6736,6739,6742,6745,6748,6751],{},[149,6737,6738],{},"边框：2px内凹（下沉外观）",[149,6740,6741],{},"背景：白色",[149,6743,6744],{},"文字：黑色，14-16px",[149,6746,6747],{},"内边距：4-8px",[149,6749,6750],{},"焦点：2px黑色虚线轮廓，2px偏移",[149,6752,6753,6754,6756],{},"禁用：",[291,6755,5353],{}," 背景，50%不透明度",[115,6758,6759,1842,6762,6764],{},[119,6760,6761],{},"占位符文字",[291,6763,5387],{},"（灰色）",[115,6766,6767,6770],{},[119,6768,6769],{},"选择下拉框","：与输入框相同的内凹样式",[115,6772,6773,6776],{},[119,6774,6775],{},"复选框\u002F单选","：90年代网页不常见（使用文字指示器或简单方块）",[175,6778,6780],{"id":6779},"链接超链接","链接（超链接）",[115,6782,6783],{},"90年代网络最具标志性的元素。",[115,6785,6786,1842],{},[119,6787,6788],{},"状态",[146,6790,6791,6799,6807,6814],{},[149,6792,6793,1842,6796,6798],{},[119,6794,6795],{},"未访问",[291,6797,5404],{},"（蓝色），总是有下划线",[149,6800,6801,1842,6804,6806],{},[119,6802,6803],{},"已访问",[291,6805,5599],{},"（紫色）",[149,6808,6809,1842,6811,6813],{},[119,6810,6406],{},[291,6812,5422],{},"（红色）",[149,6815,6816,6819,6820,6813],{},[119,6817,6818],{},"活跃","（点击时）：",[291,6821,5422],{},[115,6823,6824,1842],{},[119,6825,6826],{},"规则",[146,6828,6829,6832,6835,6838],{},[149,6830,6831],{},"总是有下划线（绝不移除text-decoration）",[149,6833,6834],{},"颜色变化是即时的（无过渡）",[149,6836,6837],{},"悬停无背景",[149,6839,6840],{},"无额外样式效果",[115,6842,6843,1842],{},[119,6844,6845],{},"示例",[453,6847,6850],{"className":6848,"code":6849,"language":458},[456],"text-[#0000ff]\nunderline\nhover:text-[#ff0000]\nvisited:text-[#800080]\n",[291,6851,6849],{"__ignoreMap":461},[175,6853,4991],{"id":4991},[115,6855,6856,1842],{},[119,6857,3646],{},[146,6859,6860,6868,6871,6874,6877],{},[149,6861,5001,6862,4548,6864,6867],{},[291,6863,3786],{},[291,6865,6866],{},"stroke-[2px]","（粗、粗线条）",[149,6869,6870],{},"颜色：匹配章节的点缀色（蓝色、红色、绿色）",[149,6872,6873],{},"尺寸：24px（h-6 w-6）标准，32px用于功能",[149,6875,6876],{},"无圆角或柔和形状",[149,6878,6879],{},"考虑在图标容器周围添加2px黑色边框",[115,6881,6882,6884],{},[119,6883,5029],{},"：\n如果将图标放在彩色框中：",[146,6886,6887,6890,6893],{},[149,6888,6889],{},"框背景：纯亮色（#000080、#008080、#00AA00）",[149,6891,6892],{},"图标颜色：白色",[149,6894,6895],{},"框样式：外凸或带边框的平面",[168,6897],{},[110,6899,6900],{"id":6900},"布局原则",[175,6902,6903],{"id":6903},"页面结构",[115,6905,6906,1842,6908,6911],{},[119,6907,4479],{},[291,6909,6910],{},"max-w-5xl"," (1024px) - 模仿800x600显示器内容区域带浏览器边框",[115,6913,6914,1842],{},[119,6915,6916],{},"间距系统",[146,6918,6919,6922,6925,6928],{},[149,6920,6921],{},"基础单位：8px",[149,6923,6924],{},"元素内边距：16px（丰厚的内部间距）",[149,6926,6927],{},"元素外边距：8-16px（更紧的外部间距以获得密度）",[149,6929,6930],{},"章节内边距：垂直64px（py-16），水平16px（px-4）",[115,6932,6933,6936,6937,6940],{},[119,6934,6935],{},"章节分隔线","：\n使用粗边框（",[291,6938,6939],{},"border-b-4 border-[#808080]","）或在主要章节之间使用凹槽HR效果。",[115,6942,6943,6946],{},[119,6944,6945],{},"网格布局","：\n即使使用现代CSS Grid\u002FFlexbox，也要让它看起来像表格：",[146,6948,6949,6963,6965,6968],{},[149,6950,6951,6952,4548,6955,6958,6959,6962],{},"用 ",[291,6953,6954],{},"border-2",[291,6956,6957],{},"border-r-2","\u002F",[291,6960,6961],{},"border-b-2"," 可见单元格边框",[149,6964,6690],{},[149,6966,6967],{},"尽可能等列宽",[149,6969,6970],{},"密集、紧凑的间距",[175,6972,5035],{"id":5035},[115,6974,6975,6978],{},[119,6976,6977],{},"桌面端"," (768px+)：",[146,6980,6981,6984,6987],{},[149,6982,6983],{},"完整的类表格布局，并排列",[149,6985,6986],{},"多列网格（2-4列）",[149,6988,6989],{},"可见的复杂边框",[115,6991,6992,6995],{},[119,6993,6994],{},"平板端"," (640-768px)：",[146,6997,6998,7001,7004],{},[149,6999,7000],{},"最多减少到2列",[149,7002,7003],{},"保持所有视觉样式（斜面、边框）",[149,7005,7006],{},"如果需要，堆叠复杂表格",[115,7008,7009,7012],{},[119,7010,7011],{},"移动端"," (\u003C640px)：",[146,7014,7015,7018,7024,7027,7030],{},[149,7016,7017],{},"单列",[149,7019,7020,7023],{},[119,7021,7022],{},"保留斜面效果","（对风格至关重要）",[149,7025,7026],{},"跑马灯继续滚动",[149,7028,7029],{},"稍微缩小字体但保持粗体字重",[149,7031,7032],{},"复杂表格的水平滚动是可接受的（真实！）",[115,7034,7035,7038],{},[119,7036,7037],{},"重要","：美学比完美响应更重要。移动端体验稍微粗糙是可以的——这对那个时代是真实的。",[168,7040],{},[110,7042,7044],{"id":7043},"大胆因素非通用性","\"大胆因素\"（非通用性）",[115,7046,7047,7050],{},[119,7048,7049],{},"强制性元素"," - 这些必须存在，否则风格失败：",[175,7052,7053],{"id":7053},"跑马灯滚动文字",[115,7055,1609,7056,7059],{},[291,7057,7058],{},"react-fast-marquee"," 或纯CSS跑马灯用于：",[146,7061,7062,7065,7068],{},[149,7063,7064],{},"彩色文字的公告栏",[149,7066,7067],{},"推荐语轮播",[149,7069,7070],{},"\"突发新闻\"风格更新",[115,7072,7073,1842],{},[119,7074,7075],{},"设置",[146,7077,7078,7081,7084],{},[149,7079,7080],{},"速度：30-60（中等速度）",[149,7082,7083],{},"无渐变淡出（gradient={false}）",[149,7085,7086],{},"不同颜色的多个span",[175,7088,7089],{"id":7089},"动画彩虹文字",[115,7091,7092],{},"CSS动画循环彩虹色用于首屏标题：",[453,7094,7096],{"className":3796,"code":7095,"language":3798,"meta":461,"style":461},"@keyframes rainbow {\n  0% { color: #ff0000; }\n  17% { color: #ff8000; }\n  33% { color: #ffff00; }\n  50% { color: #00ff00; }\n  67% { color: #0080ff; }\n  83% { color: #8000ff; }\n  100% { color: #ff0000; }\n}\nanimation: rainbow 4s linear infinite;\n",[291,7097,7098,7107,7117,7127,7137,7147,7157,7167,7176,7180],{"__ignoreMap":461},[2038,7099,7100,7102,7105],{"class":2040,"line":2041},[2038,7101,4708],{"class":2044},[2038,7103,7104],{"class":2172}," rainbow",[2038,7106,4714],{"class":2048},[2038,7108,7109,7112,7115],{"class":2040,"line":677},[2038,7110,7111],{"class":2048},"  0% { color: ",[2038,7113,7114],{"class":2181},"#ff0000",[2038,7116,4725],{"class":2048},[2038,7118,7119,7122,7125],{"class":2040,"line":674},[2038,7120,7121],{"class":2048},"  17% { color: ",[2038,7123,7124],{"class":2181},"#ff8000",[2038,7126,4725],{"class":2048},[2038,7128,7129,7132,7135],{"class":2040,"line":2082},[2038,7130,7131],{"class":2048},"  33% { color: ",[2038,7133,7134],{"class":2181},"#ffff00",[2038,7136,4725],{"class":2048},[2038,7138,7139,7142,7145],{"class":2040,"line":2088},[2038,7140,7141],{"class":2048},"  50% { color: ",[2038,7143,7144],{"class":2181},"#00ff00",[2038,7146,4725],{"class":2048},[2038,7148,7149,7152,7155],{"class":2040,"line":2094},[2038,7150,7151],{"class":2048},"  67% { color: ",[2038,7153,7154],{"class":2181},"#0080ff",[2038,7156,4725],{"class":2048},[2038,7158,7159,7162,7165],{"class":2040,"line":2100},[2038,7160,7161],{"class":2048},"  83% { color: ",[2038,7163,7164],{"class":2181},"#8000ff",[2038,7166,4725],{"class":2048},[2038,7168,7169,7172,7174],{"class":2040,"line":2106},[2038,7170,7171],{"class":2048},"  100% { color: ",[2038,7173,7114],{"class":2181},[2038,7175,4725],{"class":2048},[2038,7177,7178],{"class":2040,"line":2112},[2038,7179,4730],{"class":2048},[2038,7181,7182],{"class":2040,"line":2125},[2038,7183,7184],{"class":2044},"animation: rainbow 4s linear infinite;\n",[115,7186,7187,7190],{},[119,7188,7189],{},"时长","：4秒，线性缓动（无平滑）",[175,7192,7193],{"id":7193},"所有元素斜面",[115,7195,7196,7197,126],{},"每个交互元素和大多数容器必须有3D外凸\u002F内凹效果。这是",[119,7198,7199],{},"不可协商的",[175,7201,7203],{"id":7202},"正在建设中能量","\"正在建设中\"能量",[115,7205,7206],{},"添加小动画元素：",[146,7208,7209,7216,7219],{},[149,7210,7211,7212,7215],{},"闪烁的\"NEW!\"徽章（使用 ",[291,7213,7214],{},"animate-pulse"," 或CSS闪烁配合step-end）",[149,7217,7218],{},"脉动的CTA徽章",[149,7220,7221],{},"颜色循环装饰元素",[115,7223,7224,7227],{},[119,7225,7226],{},"脉动光晕动画","（用于徽章）：",[453,7229,7231],{"className":3796,"code":7230,"language":3798,"meta":461,"style":461},"@keyframes pulse-glow {\n  0%, 100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);\n  }\n  50% {\n    transform: scale(1.05);\n    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.5);\n  }\n}\nanimation: pulse-glow 1.5s ease-in-out infinite;\n",[291,7232,7233,7242,7247,7261,7297,7302,7307,7320,7359,7363,7367],{"__ignoreMap":461},[2038,7234,7235,7237,7240],{"class":2040,"line":2041},[2038,7236,4708],{"class":2044},[2038,7238,7239],{"class":2172}," pulse-glow",[2038,7241,4714],{"class":2048},[2038,7243,7244],{"class":2040,"line":677},[2038,7245,7246],{"class":2048},"  0%, 100% {\n",[2038,7248,7249,7252,7255,7257,7259],{"class":2040,"line":674},[2038,7250,7251],{"class":2048},"    transform: ",[2038,7253,7254],{"class":2159},"scale",[2038,7256,2218],{"class":2048},[2038,7258,4841],{"class":2181},[2038,7260,3886],{"class":2048},[2038,7262,7263,7266,7268,7270,7272,7274,7277,7279,7282,7284,7286,7288,7290,7292,7295],{"class":2040,"line":2082},[2038,7264,7265],{"class":2048},"    box-shadow: ",[2038,7267,4722],{"class":2181},[2038,7269,4068],{"class":2181},[2038,7271,4068],{"class":2181},[2038,7273,4068],{"class":2181},[2038,7275,7276],{"class":2159}," rgba",[2038,7278,2218],{"class":2048},[2038,7280,7281],{"class":2181},"255",[2038,7283,2855],{"class":2048},[2038,7285,4722],{"class":2181},[2038,7287,2855],{"class":2048},[2038,7289,4722],{"class":2181},[2038,7291,2855],{"class":2048},[2038,7293,7294],{"class":2181},"0.7",[2038,7296,3886],{"class":2048},[2038,7298,7299],{"class":2040,"line":2088},[2038,7300,7301],{"class":2048},"  }\n",[2038,7303,7304],{"class":2040,"line":2094},[2038,7305,7306],{"class":2048},"  50% {\n",[2038,7308,7309,7311,7313,7315,7318],{"class":2040,"line":2100},[2038,7310,7251],{"class":2048},[2038,7312,7254],{"class":2159},[2038,7314,2218],{"class":2048},[2038,7316,7317],{"class":2181},"1.05",[2038,7319,3886],{"class":2048},[2038,7321,7322,7324,7326,7328,7331,7333,7336,7338,7340,7342,7344,7346,7348,7350,7352,7354,7357],{"class":2040,"line":2106},[2038,7323,7265],{"class":2048},[2038,7325,4722],{"class":2181},[2038,7327,4068],{"class":2181},[2038,7329,7330],{"class":2181}," 10",[2038,7332,3837],{"class":3805},[2038,7334,7335],{"class":2181}," 2",[2038,7337,3837],{"class":3805},[2038,7339,7276],{"class":2159},[2038,7341,2218],{"class":2048},[2038,7343,7281],{"class":2181},[2038,7345,2855],{"class":2048},[2038,7347,4722],{"class":2181},[2038,7349,2855],{"class":2048},[2038,7351,4722],{"class":2181},[2038,7353,2855],{"class":2048},[2038,7355,7356],{"class":2181},"0.5",[2038,7358,3886],{"class":2048},[2038,7360,7361],{"class":2040,"line":2112},[2038,7362,7301],{"class":2048},[2038,7364,7365],{"class":2040,"line":2125},[2038,7366,4730],{"class":2048},[2038,7368,7369,7372,7375,7377,7380,7383],{"class":2040,"line":2133},[2038,7370,7371],{"class":2044},"animation: ",[2038,7373,7374],{"class":3805},"pulse-glow",[2038,7376,4674],{"class":2044},[2038,7378,7379],{"class":2181},".5s",[2038,7381,7382],{"class":3805}," ease-in-out",[2038,7384,7385],{"class":2044}," infinite;\n",[175,7387,7389],{"id":7388},"水平线hr作为分隔线","水平线（HR）作为分隔线",[115,7391,7392],{},"在主要内容章节之间使用3D凹槽效果。这是90年代的标志性图案。",[175,7394,7395],{"id":7395},"访问计数器美学",[115,7397,7398],{},"至少将一个统计部分样式化为经典访问计数器：",[146,7400,7401,7404,7407,7410],{},[149,7402,7403],{},"黑色或海军蓝背景",[149,7405,7406],{},"绿色等宽文字（#00FF00）",[149,7408,7409],{},"斜面内凹框架",[149,7411,7412],{},"文字如 \"Visitors: 0001234 | Since 1995\"",[175,7414,7415],{"id":7415},"类表格视觉布局",[115,7417,7418],{},"即使使用现代CSS，也要创建HTML表格的外观：",[146,7420,7421,7427,7429],{},[149,7422,7423,7424,1064],{},"可见单元格边框（",[291,7425,7426],{},"border-2 border-[#808080]",[149,7428,6690],{},[149,7430,7431],{},"网格状精度",[175,7433,7434],{"id":7434},"标题栏窗口",[115,7436,7437],{},"卡片应该看起来像Windows 95应用程序窗口：",[146,7439,7440,7443,7446],{},[149,7441,7442],{},"海军蓝到蓝色渐变标题栏",[149,7444,7445],{},"标题中白色粗体文字",[149,7447,7448],{},"下方内凹内容区域",[175,7450,7451],{"id":7451},"装饰彩色方块",[115,7453,7454],{},"包含至少一个部分，其中有亮色方块网格（红色、绿色、蓝色、黄色、洋红、青色）带斜面边缘。这是纯粹的装饰性90年代过剩。",[175,7456,7457],{"id":7457},"施工条纹背景",[115,7459,7460],{},"在至少一个强调部分（如最终CTA）使用黄\u002F黑对角条纹图案。",[168,7462],{},[110,7464,7465],{"id":7465},"动画与运动",[115,7467,7468,7471],{},[119,7469,7470],{},"运动哲学","：快速、即时、数字化。没有有机缓动曲线。",[115,7473,7474,1842],{},[119,7475,7476],{},"时间函数",[146,7478,7479,7489,7498,7507],{},[149,7480,7481,1842,7484,4548,7486],{},[119,7482,7483],{},"即时状态变化",[291,7485,6427],{},[291,7487,7488],{},"duration-0",[149,7490,7491,1842,7494,7497],{},[119,7492,7493],{},"颜色循环",[291,7495,7496],{},"linear","（无缓动）",[149,7499,7500,1842,7503,7506],{},[119,7501,7502],{},"徽章\u002F脉动",[291,7504,7505],{},"ease-in-out","（用于注意效果可接受）",[149,7508,7509,1842,7512,7514],{},[119,7510,7511],{},"按钮按下",[291,7513,6427],{}," 或最大50ms",[115,7516,7517,1842],{},[119,7518,7189],{},[146,7520,7521,7524,7527,7530,7533],{},[149,7522,7523],{},"按钮按下：即时或50ms",[149,7525,7526],{},"悬停颜色变化：75ms或即时",[149,7528,7529],{},"彩虹文字循环：3-5秒",[149,7531,7532],{},"脉动光晕：1-2秒",[149,7534,7535],{},"跑马灯速度：中等（40-60px\u002F秒）",[115,7537,7538,1842],{},[119,7539,7540],{},"关键动画",[3169,7542,7543,7549,7555,7561],{},[149,7544,7545,7548],{},[119,7546,7547],{},"彩虹文字","：4s线性无限循环穿过光谱",[149,7550,7551,7554],{},[119,7552,7553],{},"脉动光晕","：1.5s ease-in-out无限循环用于\"NEW!\"徽章",[149,7556,7557,7560],{},[119,7558,7559],{},"闪烁","（极少使用）：1s step-end无限（硬开\u002F关，非淡出）",[149,7562,7563,7566],{},[119,7564,7565],{},"跑马灯","：连续滚动，悬停暂停以获得可用性",[115,7568,7569,7572,7573,1842],{},[119,7570,7571],{},"减少运动","：\n尊重 ",[291,7574,5209],{},[146,7576,7577,7580,7583],{},[149,7578,7579],{},"停止彩虹动画（回退到单一亮色）",[149,7581,7582],{},"停止跑马灯（显示静态或更慢滚动）",[149,7584,7585],{},"停止脉动徽章（静态配合亮色）",[168,7587],{},[110,7589,5134],{"id":5134},[115,7591,7592,1842],{},[119,7593,7594],{},"颜色对比",[146,7596,7597,7600,7603,7606],{},[149,7598,7599],{},"银色（#C0C0C0）上的黑色（#000000）：7.5:1（AAA）",[149,7601,7602],{},"海军蓝（#000080）上的白色：8.6:1（AAA）",[149,7604,7605],{},"蓝色（#0000FF）上的白色：8.6:1（AAA）",[149,7607,7608],{},"调色板自然提供优秀的对比",[115,7610,7611,1842],{},[119,7612,7613],{},"焦点状态",[146,7615,7616,7619,7622,7625],{},[149,7617,7618],{},"2px黑色虚线轮廓（Windows 95真实）",[149,7620,7621],{},"2px距元素偏移",[149,7623,7624],{},"高可见度，匹配美学",[149,7626,7627],{},[119,7628,7629],{},"绝不移除焦点指示器",[115,7631,7632,1842],{},[119,7633,7634],{},"键盘导航",[146,7636,7637,7640,7643],{},[149,7638,7639],{},"所有交互元素必须可键盘访问",[149,7641,7642],{},"Tab顺序应遵循视觉顺序",[149,7644,7645],{},"Enter\u002FSpace上的按钮按下应显示活跃状态",[115,7647,7648,1842],{},[119,7649,7650],{},"屏幕阅读器",[146,7652,7653,7656,7659,7662],{},[149,7654,7655],{},"跑马灯文字必须有静态替代或aria-live=\"polite\"",[149,7657,7658],{},"装饰动画元素应aria-hidden",[149,7660,7661],{},"彩色方块和装饰图案不需要替代文字",[149,7663,7664],{},"即使有表格外观，也要确保语义HTML",[115,7666,7667,7670,7671,7673],{},[119,7668,7669],{},"运动敏感","：\n提供 ",[291,7672,5209],{}," 替代：",[453,7675,7677],{"className":3796,"code":7676,"language":3798,"meta":461,"style":461},"@media (prefers-reduced-motion: reduce) {\n  .text-rainbow { animation: none; color: #ff0000; }\n  .animate-pulse-glow { animation: none; }\n  \u002F* 跑马灯由库或CSS处理 *\u002F\n}\n",[291,7678,7679,7687,7705,7716,7721],{"__ignoreMap":461},[2038,7680,7681,7684],{"class":2040,"line":2041},[2038,7682,7683],{"class":2044},"@media",[2038,7685,7686],{"class":2048}," (prefers-reduced-motion: reduce) {\n",[2038,7688,7689,7692,7695,7698,7701,7703],{"class":2040,"line":677},[2038,7690,7691],{"class":2181},"  .text-rainbow",[2038,7693,7694],{"class":2048}," { animation: ",[2038,7696,7697],{"class":2181},"none",[2038,7699,7700],{"class":2048},"; color: ",[2038,7702,7114],{"class":2181},[2038,7704,4725],{"class":2048},[2038,7706,7707,7710,7712,7714],{"class":2040,"line":674},[2038,7708,7709],{"class":2181},"  .animate-pulse-glow",[2038,7711,7694],{"class":2048},[2038,7713,7697],{"class":2181},[2038,7715,4725],{"class":2048},[2038,7717,7718],{"class":2040,"line":2082},[2038,7719,7720],{"class":2288},"  \u002F* 跑马灯由库或CSS处理 *\u002F\n",[2038,7722,7723],{"class":2040,"line":2088},[2038,7724,4730],{"class":2048},[168,7726],{},[110,7728,7730],{"id":7729},"反模式避免什么","反模式（避免什么）",[175,7732,7734],{"id":7733},"视觉禁忌","视觉禁忌：",[3169,7736,7737,7742,7747,7764,7770,7776,7782,7788,7794,7800],{},[149,7738,7739,7741],{},[119,7740,6385],{}," - 连1px都不行。零。总是。",[149,7743,7744,7746],{},[119,7745,6388],{}," - 仅使用内阴影用于斜面",[149,7748,7749,7752,7753],{},[119,7750,7751],{},"无渐变","，除了：\n",[146,7754,7755,7758,7761],{},[149,7756,7757],{},"标题栏渐变（海军蓝到蓝色）",[149,7759,7760],{},"背景图案（条纹、平铺）",[149,7762,7763],{},"微妙按钮背景",[149,7765,7766,7769],{},[119,7767,7768],{},"无半透明叠加"," - 颜色总是不透明的（深色背景上白色\u002F80用于次要文字除外）",[149,7771,7772,7775],{},[119,7773,7774],{},"无细字体"," - 一切都是粗体或黑色字重",[149,7777,7778,7781],{},[119,7779,7780],{},"无微妙灰色"," - 只有 #000000、#808080、#C0C0C0、#FFFFFF、#E8E8E8",[149,7783,7784,7787],{},[119,7785,7786],{},"无平滑缓动"," - 使用线性或即时过渡",[149,7789,7790,7793],{},[119,7791,7792],{},"绝不移除链接下划线"," - 总是可见",[149,7795,7796,7799],{},[119,7797,7798],{},"无现代极简间距"," - 密集，不通风",[149,7801,7802,7805],{},[119,7803,7804],{},"不要尝试\"现代化\"美学"," - 拥抱俗气",[175,7807,7809],{"id":7808},"交互禁忌","交互禁忌：",[3169,7811,7812,7818,7824,7830,7836],{},[149,7813,7814,7817],{},[119,7815,7816],{},"不要使用缩放元素的悬停状态","（除了脉动徽章的1.05）",[149,7819,7820,7823],{},[119,7821,7822],{},"不要使用淡出过渡"," - 变化应该即时或线性",[149,7825,7826,7829],{},[119,7827,7828],{},"不要把跑马灯文字做成基本内容"," - 保持装饰性\u002F补充性",[149,7831,7832,7835],{},[119,7833,7834],{},"不要覆盖浏览器默认选择颜色"," - 实际上，要：使用 #000080 背景，白色文字",[149,7837,7838,7841],{},[119,7839,7840],{},"不要使用浮动操作按钮"," 或现代UI模式",[175,7843,7845],{"id":7844},"内容禁忌","内容禁忌：",[3169,7847,7848,7854,7860],{},[149,7849,7850,7853],{},[119,7851,7852],{},"不要使用不适合时代的占位文字","（不要有\"lorem ipsum\"）",[149,7855,7856,7859],{},[119,7857,7858],{},"不要在装饰文字中引用现代技术","（保持通用或90年代主题）",[149,7861,7862,7865,7866],{},[119,7863,7864],{},"不要微妙"," - 这种风格是",[119,7867,7868],{},"响亮而自豪的",[168,7870],{},[110,7872,7873],{"id":7873},"实现说明",[175,7875,7877],{"id":7876},"tailwind任意值","Tailwind任意值",[115,7879,7880],{},"你会经常使用这些：",[453,7882,7885],{"className":7883,"code":7884,"language":458},[456],"border-[2px]\n[border-color:#fff_#808080_#808080_#fff]\n[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]\nbg-[#c0c0c0]\ntext-[#0000ff]\n",[291,7886,7884],{"__ignoreMap":461},[115,7888,7889],{},"注意：在任意值中使用下划线代替空格。",[175,7891,7893],{"id":7892},"需要自定义css","需要自定义CSS",[115,7895,7896],{},"有些效果需要CSS文件：",[146,7898,7899,7904,7910,7916],{},[149,7900,7901,7903],{},[291,7902,4708],{}," 用于彩虹、脉动光晕、闪烁",[149,7905,7906,7909],{},[291,7907,7908],{},".hr-groove"," 用于水平线效果",[149,7911,7912,7915],{},[291,7913,7914],{},".bg-90s-tile"," 用于平铺背景图案",[149,7917,7918,7921],{},[291,7919,7920],{},".bg-construction"," 用于警示条纹",[175,7923,7924],{"id":7924},"依赖",[146,7926,7927,7932],{},[149,7928,7929,7931],{},[119,7930,7058],{},"：真实滚动文字必备",[149,7933,7934],{},"考虑为可重用性创建CSS变量用于复杂的box-shadow值",[175,7936,7937],{"id":7937},"颜色分层策略",[3169,7939,7940,7946,7952,7958,7964],{},[149,7941,7942,7945],{},[119,7943,7944],{},"基础","：平铺的 #C0C0C0 背景",[149,7947,7948,7951],{},[119,7949,7950],{},"表面","：白色或灰色（#E8E8E8）面板带斜面",[149,7953,7954,7957],{},[119,7955,7956],{},"点缀表面","：海军蓝标题栏、彩色功能框",[149,7959,7960,7963],{},[119,7961,7962],{},"前景","：黑色文字、彩色图标",[149,7965,7966,7969],{},[119,7967,7968],{},"高亮","：黄色徽章、红色\"NEW!\"标签、彩虹文字",[168,7971],{},[110,7973,7974],{"id":7974},"标志性视觉检查清单",[115,7976,7977],{},"在考虑设计完成之前，验证这些存在：",[146,7979,7982,7990,7996,8002,8008,8014,8020,8026,8032,8038,8044,8050,8056,8062,8068],{"className":7980},[7981],"contains-task-list",[149,7983,7986,7989],{"className":7984},[7985],"task-list-item",[3550,7987],{"disabled":700,"type":7988},"checkbox"," 至少一个跑马灯滚动元素配合彩色文字",[149,7991,7993,7995],{"className":7992},[7985],[3550,7994],{"disabled":700,"type":7988}," 首屏或主要标题上的彩虹动画文字",[149,7997,7999,8001],{"className":7998},[7985],[3550,8000],{"disabled":700,"type":7988}," 所有按钮都有3D外凸斜面配合正确的border-color语法",[149,8003,8005,8007],{"className":8004},[7985],[3550,8006],{"disabled":700,"type":7988}," 至少一个卡片有Windows 95标题栏渐变",[149,8009,8011,8013],{"className":8010},[7985],[3550,8012],{"disabled":700,"type":7988}," 主体上可见的平铺背景图案",[149,8015,8017,8019],{"className":8016},[7985],[3550,8018],{"disabled":700,"type":7988}," 超链接是蓝色\u002F下划线，悬停时变红",[149,8021,8023,8025],{"className":8022},[7985],[3550,8024],{"disabled":700,"type":7988}," 至少一个部分有交替行背景",[149,8027,8029,8031],{"className":8028},[7985],[3550,8030],{"disabled":700,"type":7988}," 主要章节之间的水平凹槽线分隔线",[149,8033,8035,8037],{"className":8034},[7985],[3550,8036],{"disabled":700,"type":7988}," 等宽绿色文字的\"访问计数器\"风格统计显示",[149,8039,8041,8043],{"className":8040},[7985],[3550,8042],{"disabled":700,"type":7988}," 至少一个\"NEW!\"或\"HOT!\"徽章配合脉动动画",[149,8045,8047,8049],{"className":8046},[7985],[3550,8048],{"disabled":700,"type":7988}," 至少一个部分有施工条纹背景",[149,8051,8053,8055],{"className":8052},[7985],[3550,8054],{"disabled":700,"type":7988}," 所有交互元素都有虚线焦点轮廓",[149,8057,8059,8061],{"className":8058},[7985],[3550,8060],{"disabled":700,"type":7988}," 活跃按钮显示按下状态（内凹 + 平移）",[149,8063,8065,8067],{"className":8064},[7985],[3550,8066],{"disabled":700,"type":7988}," 图标有2px描边宽度",[149,8069,8071,8073],{"className":8070},[7985],[3550,8072],{"disabled":700,"type":7988}," 任何地方都没有圆角实例",[168,8075],{},[110,8077,8078],{"id":8078},"秘诀",[115,8080,8081,8082,8085],{},"让这种风格奏效的是",[119,8083,8084],{},"对真实性的承诺胜过现代化","。诱惑将是\"清理它\"或\"让它更专业\"。抵制这个。丑陋就是美。冲突的颜色、密集的布局、激进的动画——这些不是bug，它们是特性。",[115,8087,8088],{},"经历过1997年的人看着这个应该立即感觉被带回去。设计应该如此真实，以至于与现代网站并列时几乎令人吃惊。这种对比就是重点。",[115,8090,8091],{},"拥抱俗气。庆祝混乱。欢迎来到1997年。",[3227,8093,8094],{},"html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}",{"title":461,"searchDepth":674,"depth":674,"links":8096},[8097,8098,8104,8111,8115,8127,8128,8129,8134,8140,8141],{"id":3287,"depth":677,"text":3287},{"id":5316,"depth":677,"text":5317,"children":8099},[8100,8101,8102,8103],{"id":5320,"depth":674,"text":5321},{"id":5650,"depth":674,"text":5650},{"id":3768,"depth":674,"text":3768},{"id":6087,"depth":674,"text":6088},{"id":6358,"depth":677,"text":6358,"children":8105},[8106,8107,8108,8109,8110],{"id":4345,"depth":674,"text":4345},{"id":4424,"depth":674,"text":4425},{"id":6728,"depth":674,"text":6728},{"id":6779,"depth":674,"text":6780},{"id":4991,"depth":674,"text":4991},{"id":6900,"depth":677,"text":6900,"children":8112},[8113,8114],{"id":6903,"depth":674,"text":6903},{"id":5035,"depth":674,"text":5035},{"id":7043,"depth":677,"text":7044,"children":8116},[8117,8118,8119,8120,8121,8122,8123,8124,8125,8126],{"id":7053,"depth":674,"text":7053},{"id":7089,"depth":674,"text":7089},{"id":7193,"depth":674,"text":7193},{"id":7202,"depth":674,"text":7203},{"id":7388,"depth":674,"text":7389},{"id":7395,"depth":674,"text":7395},{"id":7415,"depth":674,"text":7415},{"id":7434,"depth":674,"text":7434},{"id":7451,"depth":674,"text":7451},{"id":7457,"depth":674,"text":7457},{"id":7465,"depth":677,"text":7465},{"id":5134,"depth":677,"text":5134},{"id":7729,"depth":677,"text":7730,"children":8130},[8131,8132,8133],{"id":7733,"depth":674,"text":7734},{"id":7808,"depth":674,"text":7809},{"id":7844,"depth":674,"text":7845},{"id":7873,"depth":677,"text":7873,"children":8135},[8136,8137,8138,8139],{"id":7876,"depth":674,"text":7877},{"id":7892,"depth":674,"text":7893},{"id":7924,"depth":674,"text":7924},{"id":7937,"depth":674,"text":7937},{"id":7974,"depth":677,"text":7974},{"id":8078,"depth":677,"text":8078},"充满怀旧气息的 90 年代美学，搭配 Windows 95 的斜边用户界面、系统字体、鲜艳的主色调、滚动字幕以及极致的视觉混乱感。",{},"\u002Fblogs\u002Fretro-90s-design-system",{"title":5286,"description":8142},"blogs\u002Fretro-90s-design-system",[5280,5281,8148],"复古风格","xAwMbnSXysWee_p789DCB_FVyayscCh5zpN5DtIB0zE",1780651451672]