[{"data":1,"prerenderedAt":6198},["ShallowReactive",2],{"blogs":3},[4,1309,3326],{"id":5,"title":6,"body":7,"date":1297,"description":1298,"extension":1299,"meta":1300,"navigation":133,"path":1301,"seo":1302,"stem":1303,"tags":1304,"__hash__":1308},"blogs\u002Fblogs\u002FLlamaIndex.md","LlamaIndex",{"type":8,"value":9,"toc":1261},"minimark",[10,18,23,27,32,35,38,41,44,49,420,425,432,503,551,555,604,629,632,636,639,643,646,650,653,711,715,718,721,734,809,816,895,899,906,910,913,935,948,952,955,959,962,966,970,973,977,984,993,1000,1006,1023,1028,1031,1042,1046,1049,1057,1060,1072,1076,1079,1082,1085,1089,1092,1095,1098,1102,1106,1109,1113,1116,1124,1127,1144,1148,1151,1154,1157,1163,1166,1169,1172,1175,1179,1182,1185,1193,1199,1223,1227,1236,1240,1243,1257],[11,12,13,14],"p",{},"LlamaIndex 是一个专门为 RAG（检索增强生成）应用而生的开发框架。简单来说，它的核心作用是",[15,16,17],"strong",{},"帮你把私有的、不在大模型训练数据里的数据（如 PDF、API、SQL 数据库等）连接给大模型，让模型能基于这些数据回答问题和执行任务",[11,19,20],{},[15,21,22],{},"工作流程图：",[24,25],"mermaid",{"code":26},"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[💡 最终答案]",[28,29,31],"h2",{"id":30},"一使用llamalndex快速实现rag应用","一、使用Llamalndex快速实现RAG应用",[11,33,34],{},"通过Agent智能体构建大模型应用的方式，在很多业务场景中，都是非常有效的。不过，Agent却并不是Llamalndex的重点。",[11,36,37],{},"一方面，现在业界有LangChain框架，更适合构建Agelnt智能体。另一方面，除了Agent，业界还有大语言模型更重要的使用场景RAG。",[11,39,40],{},"RAG全称Retrieval Augmented Generation，检索增强生成。这是一种大模型应用落地最成熟的方式。RAG的核心思想是在询问大语言大语言模型时，给大语言模型提供更多的本地信息作为参考，从而让大语言模型能够更好的理解用户的问题，给出更有针对性的答案。",[11,42,43],{},"回到之前的案例，我们希望大语言模型回答\"怎么还款\"这个问题时，其实最需要的，还不是提供Agent，而是希望给大语言模型提供我们自己业务平台的业务规则，这样大语言模型才能根据业务规则，给出更符合业务场景的答案。",[11,45,46],{},[15,47,48],{},"Llamalndex简单案例：",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"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","",[57,58,59,78,91,104,110,116,122,128,135,148,156,161,171,176,192,211,227,250,255,260,273,286,303,308,315,339,345,362,368,384,390,411],"code",{"__ignoreMap":55},[60,61,64,68,72,75],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"seHd6","from",[60,69,71],{"class":70},"sn6KH"," llama_index.core ",[60,73,74],{"class":66},"import",[60,76,77],{"class":70}," SimpleDirectoryReader, VectorStoreIndex, Settings\n",[60,79,81,83,86,88],{"class":62,"line":80},2,[60,82,67],{"class":66},[60,84,85],{"class":70}," langchain_community.chat_models ",[60,87,74],{"class":66},[60,89,90],{"class":70}," ChatTongyi\n",[60,92,94,96,99,101],{"class":62,"line":93},3,[60,95,67],{"class":66},[60,97,98],{"class":70}," llama_index.embeddings.dashscope ",[60,100,74],{"class":66},[60,102,103],{"class":70}," (\n",[60,105,107],{"class":62,"line":106},4,[60,108,109],{"class":70},"    DashScopeEmbedding,\n",[60,111,113],{"class":62,"line":112},5,[60,114,115],{"class":70},"    DashScopeTextEmbeddingModels,\n",[60,117,119],{"class":62,"line":118},6,[60,120,121],{"class":70},"    DashScopeTextEmbeddingType\n",[60,123,125],{"class":62,"line":124},7,[60,126,127],{"class":70},")\n",[60,129,131],{"class":62,"line":130},8,[60,132,134],{"emptyLinePlaceholder":133},true,"\n",[60,136,138,140,143,145],{"class":62,"line":137},9,[60,139,67],{"class":66},[60,141,142],{"class":70}," dotenv ",[60,144,74],{"class":66},[60,146,147],{"class":70}," load_dotenv\n",[60,149,151,153],{"class":62,"line":150},10,[60,152,74],{"class":66},[60,154,155],{"class":70}," os\n",[60,157,159],{"class":62,"line":158},11,[60,160,134],{"emptyLinePlaceholder":133},[60,162,164,168],{"class":62,"line":163},12,[60,165,167],{"class":166},"sVbv2","load_dotenv",[60,169,170],{"class":70},"()\n",[60,172,174],{"class":62,"line":173},13,[60,175,134],{"emptyLinePlaceholder":133},[60,177,179,182,186,189],{"class":62,"line":178},14,[60,180,181],{"class":70},"Settings.embed_model ",[60,183,185],{"class":184},"sjrmR","=",[60,187,188],{"class":166}," DashScopeEmbedding",[60,190,191],{"class":70},"(\n",[60,193,195,199,201,204,208],{"class":62,"line":194},15,[60,196,198],{"class":197},"s_ZVi","    model_name",[60,200,185],{"class":184},[60,202,203],{"class":70},"DashScopeTextEmbeddingModels.",[60,205,207],{"class":206},"sVC51","TEXT_EMBEDDING_V2",[60,209,210],{"class":70},",\n",[60,212,214,217,219,222,225],{"class":62,"line":213},16,[60,215,216],{"class":197},"    text_type",[60,218,185],{"class":184},[60,220,221],{"class":70},"DashScopeTextEmbeddingType.",[60,223,224],{"class":206},"TEXT_TYPE_DOCUMENT",[60,226,210],{"class":70},[60,228,230,233,235,238,241,244,248],{"class":62,"line":229},17,[60,231,232],{"class":197},"    api_key",[60,234,185],{"class":184},[60,236,237],{"class":70},"os.",[60,239,240],{"class":166},"getenv",[60,242,243],{"class":70},"(",[60,245,247],{"class":246},"subq3","\"BAILIAN_API_KEY\"",[60,249,127],{"class":70},[60,251,253],{"class":62,"line":252},18,[60,254,127],{"class":70},[60,256,258],{"class":62,"line":257},19,[60,259,134],{"emptyLinePlaceholder":133},[60,261,263,266,268,271],{"class":62,"line":262},20,[60,264,265],{"class":70},"Settings.llm ",[60,267,185],{"class":184},[60,269,270],{"class":166}," ChatTongyi",[60,272,191],{"class":70},[60,274,276,279,281,284],{"class":62,"line":275},21,[60,277,278],{"class":197},"    model",[60,280,185],{"class":184},[60,282,283],{"class":246},"\"qwen-plus\"",[60,285,210],{"class":70},[60,287,289,291,293,295,297,299,301],{"class":62,"line":288},22,[60,290,232],{"class":197},[60,292,185],{"class":184},[60,294,237],{"class":70},[60,296,240],{"class":166},[60,298,243],{"class":70},[60,300,247],{"class":246},[60,302,127],{"class":70},[60,304,306],{"class":62,"line":305},23,[60,307,127],{"class":70},[60,309,311],{"class":62,"line":310},24,[60,312,314],{"class":313},"sV9Aq","# 导入文档，只需提供文件夹名称即可，会自动读取该文件夹下的文档\n",[60,316,318,321,323,326,328,331,334,337],{"class":62,"line":317},25,[60,319,320],{"class":70},"documents ",[60,322,185],{"class":184},[60,324,325],{"class":166}," SimpleDirectoryReader",[60,327,243],{"class":70},[60,329,330],{"class":246},"\"data\"",[60,332,333],{"class":70},").",[60,335,336],{"class":166},"load_data",[60,338,170],{"class":70},[60,340,342],{"class":62,"line":341},26,[60,343,344],{"class":313},"# 为文档建立索引\n",[60,346,348,351,353,356,359],{"class":62,"line":347},27,[60,349,350],{"class":70},"index ",[60,352,185],{"class":184},[60,354,355],{"class":70}," VectorStoreIndex.",[60,357,358],{"class":166},"from_documents",[60,360,361],{"class":70},"(documents)\n",[60,363,365],{"class":62,"line":364},28,[60,366,367],{"class":313},"# 创建查询引擎\n",[60,369,371,374,376,379,382],{"class":62,"line":370},29,[60,372,373],{"class":70},"query_engine ",[60,375,185],{"class":184},[60,377,378],{"class":70}," index.",[60,380,381],{"class":166},"as_query_engine",[60,383,170],{"class":70},[60,385,387],{"class":62,"line":386},30,[60,388,389],{"class":313},"# 输入查询问题，打印结果\n",[60,391,393,396,398,401,404,406,409],{"class":62,"line":392},31,[60,394,395],{"class":70},"response ",[60,397,185],{"class":184},[60,399,400],{"class":70}," query_engine.",[60,402,403],{"class":166},"query",[60,405,243],{"class":70},[60,407,408],{"class":246},"\"烟花爆竹零售店外部最小距离有什么要求\"",[60,410,127],{"class":70},[60,412,414,417],{"class":62,"line":413},32,[60,415,416],{"class":184},"print",[60,418,419],{"class":70},"(response)\n",[11,421,422],{},[15,423,424],{},"代码解读：",[426,427,429],"h3",{"id":428},"_1设置向量化embedding模型",[15,430,431],{},"1、设置「向量化（Embedding）模型」",[50,433,435],{"className":52,"code":434,"language":54,"meta":55,"style":55},"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",[57,436,437,447,463,479,499],{"__ignoreMap":55},[60,438,439,441,443,445],{"class":62,"line":63},[60,440,181],{"class":70},[60,442,185],{"class":184},[60,444,188],{"class":166},[60,446,191],{"class":70},[60,448,449,451,453,455,457,460],{"class":62,"line":80},[60,450,198],{"class":197},[60,452,185],{"class":184},[60,454,203],{"class":70},[60,456,207],{"class":206},[60,458,459],{"class":70},",  ",[60,461,462],{"class":313},"# 模型版本\n",[60,464,465,467,469,471,473,476],{"class":62,"line":93},[60,466,216],{"class":197},[60,468,185],{"class":184},[60,470,221],{"class":70},[60,472,224],{"class":206},[60,474,475],{"class":70},",   ",[60,477,478],{"class":313},"# 文档级向量\n",[60,480,481,483,485,487,489,491,493,496],{"class":62,"line":106},[60,482,232],{"class":197},[60,484,185],{"class":184},[60,486,237],{"class":70},[60,488,240],{"class":166},[60,490,243],{"class":70},[60,492,247],{"class":246},[60,494,495],{"class":70},")                       ",[60,497,498],{"class":313},"# 你的 DashScope 密钥\n",[60,500,501],{"class":62,"line":112},[60,502,127],{"class":70},[504,505,506,517,527,541],"ul",{},[507,508,509,512,513,516],"li",{},[15,510,511],{},"作用","：把文本变成 1536 维向量，供后续 ",[57,514,515],{},"VectorStoreIndex"," 做相似度检索。",[507,518,519,522,523,526],{},[15,520,521],{},"模型","：",[57,524,525],{},"text-embedding-v2"," 是 DashScope 免费模型，支持中英、8192 token，效果 ≈ OpenAI ada-002。",[507,528,529,532,533,536,537,540],{},[15,530,531],{},"text_type"," 选 ",[57,534,535],{},"DOCUMENT"," 表示「一整段文本」级别；如果后续要嵌入用户问题，LlamaIndex 会自动切换为 ",[57,538,539],{},"QUERY"," 类型（DashScope 接口区分）。",[507,542,543,546,547,550],{},[15,544,545],{},"DashScope","：DashScope（中文名“模型服务灵积”）是阿里云推出的 **Model-as-a-Service（MaaS）一站式模型服务平台。**它把「通义千问、CLIP、Paraformer、StableDiffusion」等 400+ 大模型\u002F小模型做成 ",[15,548,549],{},"标准化 HTTP API","，开发者无需本地 GPU 即可调用、微调、部署。",[426,552,554],{"id":553},"_2设置大语言模型llm","2、设置「大语言模型（LLM）」",[50,556,558],{"className":52,"code":557,"language":54,"meta":55,"style":55},"Settings.llm = ChatTongyi(\n    model=\"qwen-plus\",              # 通义千问 Plus 版本（对标 GPT-3.5）\n    api_key=os.getenv(\"BAILIAN_API_KEY\")\n)\n",[57,559,560,570,584,600],{"__ignoreMap":55},[60,561,562,564,566,568],{"class":62,"line":63},[60,563,265],{"class":70},[60,565,185],{"class":184},[60,567,270],{"class":166},[60,569,191],{"class":70},[60,571,572,574,576,578,581],{"class":62,"line":80},[60,573,278],{"class":197},[60,575,185],{"class":184},[60,577,283],{"class":246},[60,579,580],{"class":70},",              ",[60,582,583],{"class":313},"# 通义千问 Plus 版本（对标 GPT-3.5）\n",[60,585,586,588,590,592,594,596,598],{"class":62,"line":93},[60,587,232],{"class":197},[60,589,185],{"class":184},[60,591,237],{"class":70},[60,593,240],{"class":166},[60,595,243],{"class":70},[60,597,247],{"class":246},[60,599,127],{"class":70},[60,601,602],{"class":62,"line":106},[60,603,127],{"class":70},[504,605,606,611,623],{},[507,607,608,610],{},[15,609,511],{},"：负责「理解问题 → 生成答案」；RAG 场景里会拿到检索到的上下文再回答。",[507,612,613,522,615,618,619,622],{},[15,614,521],{},[57,616,617],{},"qwen-plus"," 价格比 ",[57,620,621],{},"qwen-turbo"," 贵 2×，但推理能力更强；与 DeepSeek\u002FGPT 一样走 OpenAI-Compatible 格式。",[507,624,625,628],{},[15,626,627],{},"ChatTongyi"," 是 LlamaIndex 官方封装的 Tongyi 驱动，内部帮你把消息格式、温度、top_p 等转成 DashScope 所需字段。",[630,631],"hr",{},[28,633,635],{"id":634},"二llamaindex基础组件","二、LlamaIndex基础组件",[11,637,638],{},"在具体实现时，Lamalndex采用组件化的方式，将大语言模型、向量数据库、索引、数据源等组件进行组合，实现大语言模型与数据源的交互。通过组件化的方式，可以像拼积木一样，将不同的组件进行组合，实现更好的可扩展性。这里就介绍Lamalndex中几个重要的组件。",[426,640,642],{"id":641},"_1prompts-构建提示词","1、Prompts 构建提示词",[11,644,645],{},"在和大语言模型交互的过程中，提示词是最为重要的工具。将对提示词的设计和处理封装成几个重要的参数，这也是构建AI应用最简单\n的一种方式。Llamalndex提供了很方便的组件，可以用来构建提示词。",[426,647,649],{"id":648},"_2models-大语言模型","2、Models 大语言模型",[11,651,652],{},"Llamalndex通过抽象出LLM和Embedding类型，来实现与不同大语言模型以及向量化模型的兼容性。而针对不同大语言模型的具体实现都被封装到单独的依赖库中。具体参见官网: https:\u002Fdocs.lamaindex.ai\u002Fen\u002Fstable\u002Fmodule_guides\u002Fmodels\u002Flms\u002Fmodules\u002F\n这些不同的依赖库用法大都差不多。以阿里云百炼的Dashscop为例。需要引入对应的依赖库",[50,654,656],{"className":52,"code":655,"language":54,"meta":55,"style":55},"#引入dashscope的依赖库\npip install llama-index-llms-dashscope\npip install dashscope\n# 向量化模型库(文本转成向量)\npip install llama-index-embeddings-dashscope\n",[57,657,658,663,684,689,694],{"__ignoreMap":55},[60,659,660],{"class":62,"line":63},[60,661,662],{"class":313},"#引入dashscope的依赖库\n",[60,664,665,668,671,674,676,679,681],{"class":62,"line":80},[60,666,667],{"class":70},"pip install llama",[60,669,670],{"class":184},"-",[60,672,673],{"class":70},"index",[60,675,670],{"class":184},[60,677,678],{"class":70},"llms",[60,680,670],{"class":184},[60,682,683],{"class":70},"dashscope\n",[60,685,686],{"class":62,"line":93},[60,687,688],{"class":70},"pip install dashscope\n",[60,690,691],{"class":62,"line":106},[60,692,693],{"class":313},"# 向量化模型库(文本转成向量)\n",[60,695,696,698,700,702,704,707,709],{"class":62,"line":112},[60,697,667],{"class":70},[60,699,670],{"class":184},[60,701,673],{"class":70},[60,703,670],{"class":184},[60,705,706],{"class":70},"embeddings",[60,708,670],{"class":184},[60,710,683],{"class":70},[426,712,714],{"id":713},"_3loading-文档加载组件","3、Loading 文档加载组件",[11,716,717],{},"Llamalndex处理本地数据最基本的方式就是把本地档加载成Document，再把文档内容拆分成Node。这些Node就是Llamaindex处理本地数据的基本单位。Llamalndex中的Document可以代表一个本地的资源文件。并且不光是文本文件，图片、音频、视频等资源文件都可以作为Document。",[11,719,720],{},"一个Document代表的是一个本地资源文件。在对信息做处理时，则需要把Document拆分成Node，Node就是Llamalndex处理本地数据的基本单位。\n这时候，如何把Document拆分成Node呢?Llamaindex提供了多种NodeParser的具体实现类，用来按照不同的规则拆分Document。",[11,722,723,724,727,730,733],{},"为了简化Document和Node的加载过程，Lamalndex提供了一个非常简单易用的工具类**",[57,725,726],{},"SimpleDirectorvReader",[15,728,729],{},"。用于从本地目录加载文档。",[57,731,732],{},"SimpleDirectoryReader","**能够处理非常多常见的文档，包括csv、docx、md、pdf、png、pptx等多种文档内容。",[50,735,737],{"className":52,"code":736,"language":54,"meta":55,"style":55},"from llama_index.core import SimpleDirectoryReader\n\nreader = SimpleDirectoryReader(input_dir=\".\u002Fresource\" ,required_exts=[\".txt\"])\ndocuments = reader.load data()\ndocuments\n",[57,738,739,750,754,790,804],{"__ignoreMap":55},[60,740,741,743,745,747],{"class":62,"line":63},[60,742,67],{"class":66},[60,744,71],{"class":70},[60,746,74],{"class":66},[60,748,749],{"class":70}," SimpleDirectoryReader\n",[60,751,752],{"class":62,"line":80},[60,753,134],{"emptyLinePlaceholder":133},[60,755,756,759,761,763,765,768,770,773,776,779,781,784,787],{"class":62,"line":93},[60,757,758],{"class":70},"reader ",[60,760,185],{"class":184},[60,762,325],{"class":166},[60,764,243],{"class":70},[60,766,767],{"class":197},"input_dir",[60,769,185],{"class":184},[60,771,772],{"class":246},"\".\u002Fresource\"",[60,774,775],{"class":70}," ,",[60,777,778],{"class":197},"required_exts",[60,780,185],{"class":184},[60,782,783],{"class":70},"[",[60,785,786],{"class":246},"\".txt\"",[60,788,789],{"class":70},"])\n",[60,791,792,794,796,799,802],{"class":62,"line":106},[60,793,320],{"class":70},[60,795,185],{"class":184},[60,797,798],{"class":70}," reader.load ",[60,800,801],{"class":166},"data",[60,803,170],{"class":70},[60,805,806],{"class":62,"line":112},[60,807,808],{"class":70},"documents\n",[11,810,811,812,815],{},"大部分常用的文档，比如txt、pdf、docx等，都可以通过SimpleDirectoryReader加载。SimpleDirectoryReader还提供了很多扩展属性可以加载非常多的文件。但是如果遇到一些特殊的文档，也可以通过Llamalndex的设计扩展出来。例如对于常用的JSON文件，或者JSONL文件，SimpleDirectoryReader只能加载出一个文档。但是使用**",[57,813,814],{},"JSONReader","**可以解析JSON文件，按照指定的格式加载出多个文档。",[50,817,819],{"className":52,"code":818,"language":54,"meta":55,"style":55},"#加载扩展依赖 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",[57,820,821,826,838,842,863],{"__ignoreMap":55},[60,822,823],{"class":62,"line":63},[60,824,825],{"class":313},"#加载扩展依赖 pip install llama-index-readers-json\n",[60,827,828,830,833,835],{"class":62,"line":80},[60,829,67],{"class":66},[60,831,832],{"class":70}," llama_index.readers.json ",[60,834,74],{"class":66},[60,836,837],{"class":70}," JSONReader\n",[60,839,840],{"class":62,"line":93},[60,841,134],{"emptyLinePlaceholder":133},[60,843,844,846,848,851,853,856,858,861],{"class":62,"line":106},[60,845,758],{"class":70},[60,847,185],{"class":184},[60,849,850],{"class":166}," JSONReader",[60,852,243],{"class":70},[60,854,855],{"class":197},"is_jsonl",[60,857,185],{"class":184},[60,859,860],{"class":206},"True",[60,862,127],{"class":70},[60,864,865,867,869,872,874,876,879,881,884,887,890,892],{"class":62,"line":112},[60,866,320],{"class":70},[60,868,185],{"class":184},[60,870,871],{"class":70}," reader.",[60,873,336],{"class":166},[60,875,243],{"class":70},[60,877,878],{"class":197},"input_file",[60,880,185],{"class":184},[60,882,883],{"class":246},"\".\u002Fjsonl\u002Fencyclopedia.jsonl\"",[60,885,886],{"class":70},", ",[60,888,889],{"class":197},"extra_info",[60,891,185],{"class":184},[60,893,894],{"class":70},"{})\n",[426,896,898],{"id":897},"_4indexing-索引组件","4、Indexing 索引组件",[11,900,901,902,905],{},"Indexing是一种数据结构，允许用户从Indexing中快速检索感兴趣的数据。在Llamalndex中，Index通常可以由一系列的Document构建出来，然后再构建出一个Query Engine或者Chat Eingine。用户就可以基于这些Engine快速检索出感兴趣的数据。在Index内部，则会以Node的形式保存数据。Node则是Document拆出来的一个片段。另外，Index也会暴露出一个Retriever接口，进一步支持文件检索。\n通常用得做多的是**",[57,903,904],{},"VectorStorelndex","**，存储自然语言处理后的向量数据。",[426,907,909],{"id":908},"_5storing-数据存储组件","5、Storing 数据存储组件",[11,911,912],{},"把数据检索出来之后，当然就是需要存储了。llamalndex提供了非常多的数据存储组件，允许用户定制外部数据存储。",[504,914,915,918,921,929,932],{},[507,916,917],{},"Document stores:用来存储Document和Node.",[507,919,920],{},"Index stores: 用来存储index相关的元数据。",[507,922,923,928],{},[15,924,925],{},[57,926,927],{},"Vector stores",": 用来存储向量数据。",[507,930,931],{},"Chat stores:用来存储聊天记录。",[507,933,934],{},"Property stores: 用来存储知识图谱相关的数据",[11,936,937,938,940,941,947],{},"其中，用的最多的，通常就是**",[57,939,927],{},"**向量存储了。\n在Llamalndex中，支持多种外部向量数据库来存储向量。具体参见官网",[942,943,944],"a",{"href":944,"rel":945},"https:\u002F\u002Fdocs.llamaindex.ai\u002Fen\u002Fstable\u002Fmodule_guides\u002Fstoring\u002Fvector_stores\u002F",[946],"nofollow","\n这里以常见的Redis为例。需要注意的是，Redis需要stack插件支持，才能作为向量数据库使用。stack在Redis7版本中需要额外安装，在Redis8中则默认集成了stack，Llamalndex中要使用Redis作为向量存储，需要先添加对应的依赖库。",[426,949,951],{"id":950},"_6querying-查询引擎","6、Querying 查询引擎",[11,953,954],{},"查询引擎是Llamalndex中最为核心的组件，因为他是直接暴露给用户的，用户可以基于查询引擎进行查询。 Llamalndex中同样也提供了非常多的Querying组件，用来支持不同的查询场景。\n例如之前使用的Retriever就是一种Querying查询引擎。他的作用主要是检索出和问题最相关的文档。但是Retriever并不直接回答问题。如果需要回答问题，就可以进一步的封装成Query Ergine。",[426,956,958],{"id":957},"_7settings-全局设置","7、Settings 全局设置",[11,960,961],{},"Settings是Llamalndlx中的全局设置管理器。它允许用户设置全局的配置，如LLM、索引、查询引擎、Chat Engine等，有了Settings，用户就不用在每个组价中单独配置这些参数了。\n例如Lamalndex默认都是使用的OpenAI相关的组件，在之前的示例中，我们想要使用阿里云百炼的组件就可以使用Settings进行全局设置。",[28,963,965],{"id":964},"三rag应用的评估","三、RAG应用的评估",[426,967,969],{"id":968},"_1建立自动化评测机制","1、建立自动化评测机制",[11,971,972],{},"如果我们发现了RAG应用某一个具体问题回答效果不佳，那么我们可以逐步去排查RAG应用在哪个环节出现了问题，并逐步去优化。但通常构建RAG应用时，我们要面临的问题是无穷无尽的。我们不可能穷尽所有问题进行分析。在测试价段就无法对RAG应用形成一个比较正确的评估。测试不充分，自然就无法形成比较靠谱的应用。\n因此，对整个RAG应用进行效果评测的第一步，是需要构建一个自动化的评测体系。通过自动化的评通常则体系进行大量样本的综合分析，这样才能对RAG应用的整体效果进行合理的评估。",[426,974,976],{"id":975},"_2使用ragas评估rag应用表现","2、使用Ragas评估RAG应用表现",[11,978,979,980,983],{},"这类测试框架有很多，主流的有",[57,981,982],{},"Ragas","\\DeepEval\\Trulens等。Llamalndex框架自己也提供了检测功能。甚至按照Llamalndex的设计模式，还提供了和其他主流评测框架集成的实现。",[11,985,986,987,989,990,992],{},"这里就以",[57,988,982],{},"为例，来介绍一下如何来评估RAG应用的准确性。",[57,991,982],{},"是这个领域里非常著名的一个框架",[11,994,995,996],{},"官网地址：",[942,997,998],{"href":998,"rel":999},"https:\u002F\u002Fdocs.ragas.io\u002Fen\u002Fstable\u002Fgetstarted\u002F",[946],[11,1001,1002,1003,1005],{},"他的核心思想和我们之前的简单应用差不多，也是让大模型来帮助你评估RAG系统，更重要的是，",[57,1004,982],{},"设计的评估指标非常契合RAG系统的特点。Ragas提供的评测指标有很多，对于RAG应用，主要关注以下几个指标：",[504,1007,1008,1011,1014,1017,1020],{},[507,1009,1010],{},"Answer Correctness, 用于评估 RAG 应用生成答案的准确度。",[507,1012,1013],{},"Context Precision, 用于评估 contexts 中与正确答案相关的条目是否排名靠前、占比高（信噪比）。",[507,1015,1016],{},"Context Recall, 用于评估有多少相关参考资料被检索到。",[507,1018,1019],{},"Answer Relevancy, 用于评估 RAG 应用生成的答案是否与问题相关。",[507,1021,1022],{},"Faithfulness, 用于评估 RAG 应用生成的答案和检索到的参考资料是否一致。",[1024,1025,1027],"h4",{"id":1026},"评估rag应用回答质量","评估RAG应用回答质量：",[11,1029,1030],{},"Ragas提供了Answer Correctness指标，用于评估RAG应用的整体回答质量。使用这个指标时，需要准备以下数据",[504,1032,1033,1036,1039],{},[507,1034,1035],{},"question:输入给RAG应用的样本问题",[507,1037,1038],{},"groud_truth:样本问题的正确答案",[507,1040,1041],{},"answer:RAG应用给出的回答",[1024,1043,1045],{"id":1044},"评估rag应用检索召回的效果","评估RAG应用检索召回的效果：",[11,1047,1048],{},"检索召回阶段，主要使用Context precision和Cantext recall两个指标来评估RAG应用的召回效果。",[504,1050,1051,1054],{},[507,1052,1053],{},"Context precision: precision表示检索出来条目有多少是正确的，或者说相关的。Ragas在评估这个指标时，还会计算与正确答案相关的条目是否靠前、是否占比高。更加则重于相关性。",[507,1055,1056],{},"Context recall:Recall有多少正确的条目被检索出来。主要是评估contexts与groud_truth的一致性，侧重于事实准确度。",[11,1058,1059],{},"计算这些指标时，需要准备以下数据:",[504,1061,1062,1064,1067,1070],{},[507,1063,1035],{},[507,1065,1066],{},"contexts:RAG应用返回的答案片段",[507,1068,1069],{},"ground_truth:问题对应的真实答案",[507,1071,1041],{},[1024,1073,1075],{"id":1074},"ragas核心提示词分析","Ragas核心提示词分析：",[11,1077,1078],{},"Ragas的许多评测指标也是基于大模型实现的。用户可以直接看到Ragas的很多核心提示词，也同样可以替换他的核心提示词。比如把Ragas默认的英文提示词翻译成中文，这样可以让评测结果更符合中文问答场景。",[11,1080,1081],{},"其实，如果你认真分析这些提示词，也大概能够猜想到Ragas一些核心指标的计算过程。 对于answer_crrectness，他的打分过程需要用到LLM大语言模型和Embedding向量化模型。在打分时，会综合计算answer和ground_truth的语义相似度和事实准确度。",[11,1083,1084],{},"语义相似度主要是通过Embedding模型得到answel和ground_truth的文本向量，然后计算两个文本向量的相似度。向量相似度的计算方法有很多种，比如余弦相似度、欧式距离、曼哈顿距离等。Ragas使用的是最常用的余弦相似度。 事实准确度会衡量answer和ground_truth在事实描述上的一些差异。在计算指标时，会把answer和ground_truth拆分成一些相对独立的观点列表，然后综合比较answer和ground_truth的这些观点列表的匹配程度，统计F1指标。\n在计算context_recall和context_precision时，也会采用计算 answe_correctness 相似的方法。拆分成一些观点，再来计算匹配程度。如果你对ragas的具体实现感兴趣，可以尝试去研读Ragas的源码。",[1024,1086,1088],{"id":1087},"总结","总结：",[11,1090,1091],{},"对大模型的能力进行合理的评估，这是深度使用大模型必须要走的一个过程。这一章节介绍了针对RAG应用，构建自动化评测体系的基础思路，也演示了如何通过Ragas构建更专业的评测体系，这些评测的经验都是行业内不可多得的宝贵财富。",[11,1093,1094],{},"对于这些评测框架，我们也只介绍了一些简单的实现。实际上，Ragas除了构建RAG的相关指标外，针对其他大模型的应用场景也构建了非常多的指标。比如针对机器翻译、文本摘要、NI2SQL(自然语言转换成SQL)、Agent等场景，也有非常多的指标。",[11,1096,1097],{},"另外像Llamalndex、Trulens、Deepeval等其他的大模型评测框架也都从同样的角度提供了对大模型进行评则的思路和实现。",[28,1099,1101],{"id":1100},"四优化rag应用提升回答准确度","四、优化RAG应用提升回答准确度",[426,1103,1105],{"id":1104},"_1文档准备阶段","1、文档准备阶段",[11,1107,1108],{},"对RAG应用来说，文档的质量可以说直接决定了整个RAG应用的质量。因此，我们需要针对文档进行持续的优化。比如引入专家验证提升文档质量。跟踪用户反遗，不断调整文档内容。查漏补缺，同时定期剔除无关的或过时的内容，都是必要的措施。",[426,1110,1112],{"id":1111},"_2文档解析与切片阶段","2、文档解析与切片阶段",[11,1114,1115],{},"在使用Llamalndex构建RAG应用时，他是会自动挥析文档内容并进行切片的。这对于大部分的场景是够的。但是，实际工作中，当文档变得更复杂时，对文档进行合理的解析和切片就变得非常重要了。",[11,1117,1118,1119,1123],{},"比如，在Llamalndex中，通常使用SimpleDirectdryReader加载本地文件，实际上，Llamalndex同样提供了一些扩展插件，可以加载Notion、Slack、Discord、Google Docs等外部自文档。具体可以参见:",[942,1120,1121],{"href":1121,"rel":1122},"https:\u002F\u002Fdocs.llamaindex.ai\u002Fen\u002Fstable\u002Fmodule",[946]," guides\u002Floading\u002Fconnector\u002Fmodules\u002F",[11,1125,1126],{},"当文档多了之后，如果文档来源不统一，文档形式又五花八门，这是不利于统一进行解析的。我们上面就演示了把PDF格式的文档转换成为结构规整的Markdown格式，这样是可以提高RAG应用的效率的。对于docx、xlsx等格式的文档，如果结果过于复杂，把他们统一转换成为Markdown格式也是一个不错的选择。在做格式转换时，有些比较麻烦的问题，也可以借助大模型来进行深度调整。比如将转换的Markdown文本用大模型进行润色、修正目录层级、补充缺失信息等。当文档被正确加载成Document后，接下来Llamalndex也会完成对Document的切片工作，将Document切分成为多个相关联的Node。Llamalndex中也提供了非常多的文档切分工具可以作为参考，当然，如果这些工具不够用时，也可以自己实现。",[504,1128,1129,1132,1135,1138,1141],{},[507,1130,1131],{},"TokenTextSpliter:按照Token进行拆分。比较适合对Token数量有严格要求的场景。比如使用上下文长度比较小的模型时,",[507,1133,1134],{},"SentenceSplitter:这是Llamalndexm默认的切片策略，切片时会尽量保持句子的完整性。",[507,1136,1137],{},"SentenceWindowNodeParser:基于句子进行切分。不过在切分时，每个Node会包含周围的句子作为上下文窗口，这样可以更好的保持句子的完整性。",[507,1139,1140],{},"SemanticSplitterNodeParser:根据语义相关新自适应进行切片。",[507,1142,1143],{},"MarkdownNodeParser;基于Markdown格式进行切分。Llamalndex提供的实现会根据Markdown文档的标题层级进行智能切分。",[426,1145,1147],{"id":1146},"_3文本向量化与存储阶段","3、文本向量化与存储阶段",[11,1149,1150],{},"文档切片后，我们就需要对其建立索引，以便后续检查。最常见的方案就是使用EmbeddingModel向量作模型将切片转成向量，然后存储到向量数据库当中。",[11,1152,1153],{},"首先，你要清楚，向量本质上是把不精确的自然语转成计算能够理解的精确的数字化的表达。转换出来的向量，主要包含的是自然语言的语义相似度信息。",[11,1155,1156],{},"这里需要注意的是，向量的本质是自然语言，而自然语言其实是一种非常不精确的表达方式。不同的人对语言的理解是不一样的，同样，不同的Embedding向量化模型对相同的文字计算，得到的向量也可能是完全不同的。例如上面的案例，可以分别使用阿里云提供的text-embedding-v2和test-embedding-v3模型，分别进行计算，得到的结果也是完全不同的。不过，一个通常的经验是，越新的Embedding模型，其表现通常越好。",[1024,1158,1160],{"id":1159},"然后如何选择向量数据库",[15,1161,1162],{},"然后，如何选择向量数据库?",[11,1164,1165],{},"向量数据库，通常要做的事情就两件，一是把向量诸起来，二是根据向量进行相似度检索。而实现这两个功能，其实并不一定需要额存外的数据库产品。Llamalndex内置的向量存储就是使用内存完成。这样的有点是快速上手，适合开发测试。但是缺点也很明显，数据量受限于内存的大小。",[11,1167,1168],{},"当数据量增大时，可以使用开源的向量数据库，如MiIvus、Qdrant等。这些数据库提供了数据持久化和高速检索的能力。很多传统的数据存储产品，也可以作为向量数据库使用。比如Redis、Elasticsearch等。这些本地数据库的优势是功能完整、可控性强。但是缺点是需要自行部署维护。",[11,1170,1171],{},"这时，也可以选择一些云服务提供的向量存储能力。例如阿里云上提供过的各种数据服务。像Redis也提供Redis Cloud云上服务，可以直接使用。",[11,1173,1174],{},"这些不同的向量数据库虽然具体的实现方式是天差地别的，但是他们的核心功能其实是差不多的。选择不同的向量数据库，通常不会对RAG应用的准确性产生太大的影响。",[426,1176,1178],{"id":1177},"_4检索召回阶段","4、检索召回阶段",[11,1180,1181],{},"检索阶段会遇到的主要问题是，很难从众多的文档切片中，找到和用户问题最相关、且包含正确答案信息的片段。所以这个阶段的优化过程，更多需要考虑如何提升检索的性能。",[11,1183,1184],{},"要优化检索召回的效果，通常要分为两个不同的思路:",[504,1186,1187,1190],{},[507,1188,1189],{},"在执行检索前，需要更多关注用户的问题。减少用户问题中描述不完整、甚至有歧义的地方，更好的还原用户的真实意图。",[507,1191,1192],{},"在执行检索后，可能会出现很多和用户问题无关的信息。这时需要想办法减少无关信息，避免干扰下一步生成答案的质量。",[1024,1194,1196],{"id":1195},"常见的策略有以下几种",[15,1197,1198],{},"常见的策略有以下几种:",[1200,1201,1202,1205,1220],"ol",{},[507,1203,1204],{},"用户提问前，对问题进行扩展 例如，将\"找王芳\"主动改写成\"王芳是哪个部门的?他的联系方式、职责范围、工作目标是什么\"，这样能让目标更清晰。例如，在用户询问\"工作注意事项有哪些\"时，主动根据用户的个人信息进行改写，扩展成\"项目经理的工作注意事项有哪些\"。对问题进行适当扩写，可以极大的提升检索的准确度。当然，在具体实现过程中，扩展的规则会有很多，你甚至可以引入大模型，让大模型来帮助进行问题扩写。",[507,1206,1207,1208,1216,1219],{},"将用户的单一查询，改写成多步问题 Llamalndex中就提供了两个强大的工具来实现这个功能:",[504,1209,1210,1213],{},[507,1211,1212],{},"StepDecomposeQueryTransform:这个工具可以帮你把一个复杂问题分解成多个子问题。比如对于\"王芳是哪个部门的”，他就可以分解成”公司里有几个叫王芳的员工?\"和\"这些王芳分别在哪些部门?\"两个问题，这样可以更全面地获取所有王芳的信息。",[507,1214,1215],{},"MultiStepQueryEngine:这个查询引擎会按顺序处理这些子问题。它会先获取公司所有王芳的信息，然后依次查询每个王芳的部门信息，最终答案聚合成一个完整回应。",[1217,1218],"br",{},"把大问题拆解成小问题往往更容易得到准确的答案。不过需要注意的是，Lamalndex的实现过程是通过多次调用大语言模型完成的，所以会消耗更多的Token。另外，也会带来过程的不确定性。",[507,1221,1222],{},"使用假设文档HyDE进行增强 这种方法的基础思路是先让大模型基于问题编写一个\"假象的答案文档”，然后用这个假象的文档来检索真实文档。最后用检索到的真实文档来生成实际答案。",[426,1224,1226],{"id":1225},"_5重排序rank","5、重排序Rank",[11,1228,1229,1230,1235],{},"想象一下，如果是一个人来回答RAG最终的问题，他会希望参考信息怎么组织呢?是不是希望参考信息尽量简单，不要包含多余的信息而且重要参考信息排在最前面。这样才能更方便的找到答案。 这个事情，其实也可以让大语言模型来处理。例如阿里云百炼上提供了文本重排序模型（",[15,1231,1232],{},[57,1233,1234],{},"gte-rerank-v2","），我们可以直接调用这个模型来对检索出的文本做一下处理。",[426,1237,1239],{"id":1238},"_6生成答案阶段","6、生成答案阶段",[11,1241,1242],{},"现在，大模型会根据你的问题和检索召回的内容，生成最终答案。这个过程更多的是由大模型进行处理，考验的是大模型的理解与总结能力。不过，你也可以从以下几个方面着手优化。",[1200,1244,1245,1248,1251,1254],{},[507,1246,1247],{},"选择合适的大模型 通常在这个阶段，大模型只需要做简单的信息总结，所以可以选择一些参数量比较小的模型就可以了。但是，如果你构建的RAG应用面向一些非通用领域，比如法律领域，那还是建议使用面向特定领域训练或者微调的模型。比如阿里云提供的通义法睿。",[507,1249,1250],{},"充分优化提示词模板 最终召回的信息和用户的问题，是需要整理成一个完整的提示词提供给大语言模型的。Llamalndex提供了默认的模板，将这些信息进行整合。但是，如果你希望大语言模型更理解你的要求，也可以自行修改模板。例如将默认的英文模板修改成中文。或者使用Llamalndex的refine模式，让大模型对输出结果再做一次整理。",[507,1252,1253],{},"调整大模型的参数 可以根据具体应用场景，适当调整大语言模型的参数。例如，如果你希望查询实时性的内容，可以适当降低temperature或top-p的值。如果是査询创造性的内容，可以适当增加他们的值。如果希望大模型在回答问题时不要总是用重复的句子，可以适当调presence_penalty值。如果希望限制字数，控制成本或减少响应时间，可以适当降低max tokens的值等。",[507,1255,1256],{},"调优大模型 如果试了很多方法后，仍然不及预期，或者希望更进一步提升效果，这时也可以尝试面向当前的业务场景单独微调一个新的模型。当然，这样难度比较高，成本通常也比较大，可以适当关注。",[1258,1259,1260],"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":55,"searchDepth":93,"depth":93,"links":1262},[1263,1267,1276,1285],{"id":30,"depth":80,"text":31,"children":1264},[1265,1266],{"id":428,"depth":93,"text":431},{"id":553,"depth":93,"text":554},{"id":634,"depth":80,"text":635,"children":1268},[1269,1270,1271,1272,1273,1274,1275],{"id":641,"depth":93,"text":642},{"id":648,"depth":93,"text":649},{"id":713,"depth":93,"text":714},{"id":897,"depth":93,"text":898},{"id":908,"depth":93,"text":909},{"id":950,"depth":93,"text":951},{"id":957,"depth":93,"text":958},{"id":964,"depth":80,"text":965,"children":1277},[1278,1279],{"id":968,"depth":93,"text":969},{"id":975,"depth":93,"text":976,"children":1280},[1281,1282,1283,1284],{"id":1026,"depth":106,"text":1027},{"id":1044,"depth":106,"text":1045},{"id":1074,"depth":106,"text":1075},{"id":1087,"depth":106,"text":1088},{"id":1100,"depth":80,"text":1101,"children":1286},[1287,1288,1289,1292,1295,1296],{"id":1104,"depth":93,"text":1105},{"id":1111,"depth":93,"text":1112},{"id":1146,"depth":93,"text":1147,"children":1290},[1291],{"id":1159,"depth":106,"text":1162},{"id":1177,"depth":93,"text":1178,"children":1293},[1294],{"id":1195,"depth":106,"text":1198},{"id":1225,"depth":93,"text":1226},{"id":1238,"depth":93,"text":1239},"2026-04-17","LlamaIndex 是一个专门为 RAG（检索增强生成）应用而生的开发框架。简单来说，它的核心作用是帮你把私有的、不在大模型训练数据里的数据（如 PDF、API、SQL 数据库等）连接给大模型，让模型能基于这些数","md",{},"\u002Fblogs\u002Fllamaindex",{"title":6,"description":1298},"blogs\u002FLlamaIndex",[1305,1306,1307,6],"RAG","LLM","Python","_cdsYe0SOP-M_Sjp8gCdRyssGJ69LST7kqYMQv0oRqQ",{"id":1310,"title":1311,"body":1312,"date":3315,"description":3316,"extension":1299,"meta":3317,"navigation":133,"path":3318,"seo":3319,"stem":3320,"tags":3321,"__hash__":3325},"blogs\u002Fblogs\u002Fcyberpunk-design-system.md","Cyberpunk \u002F Glitch 赛博朋克故障风设计系统",{"type":8,"value":1313,"toc":3288},[1314,1318,1321,1324,1330,1333,1341,1344,1350,1360,1366,1369,1407,1409,1413,1417,1627,1630,1635,1664,1669,1806,1809,1817,1830,1836,1929,1932,1937,2073,2078,2149,2154,2171,2175,2181,2274,2280,2368,2374,2380,2382,2385,2388,2391,2408,2413,2419,2424,2430,2435,2441,2446,2452,2458,2464,2468,2473,2479,2485,2491,2497,2503,2506,2512,2514,2517,2527,2532,2558,2571,2576,2598,2600,2604,2609,2672,2674,2677,2683,2688,2731,2736,3029,3031,3034,3039,3067,3073,3075,3078,3084,3089,3103,3108,3128,3133,3156,3161,3172,3174,3177,3183,3188,3240,3243,3253,3255,3258,3285],[1315,1316,1311],"h1",{"id":1317},"cyberpunk-glitch-赛博朋克故障风设计系统",[28,1319,1320],{"id":1320},"设计哲学",[426,1322,1323],{"id":1323},"核心原则",[11,1325,1326,1329],{},[15,1327,1328],{},"\"高科技，低生活。\""," 这种美学是数字反乌托邦与高科技黑色现实的碰撞。它捕捉了先进技术与社会衰败之间的张力——一个地下黑客、霓虹浸透的巨型城市和腐败数据流的世界。这不是一个干净、乌托邦式的未来；它是粗糙的、不完美的、明显危险的。每个像素都应该感觉像是在东京雨巷中故障的 CRT 显示器上渲染，或是在地下掩体中的流氓终端上显示。",[426,1331,1332],{"id":1332},"氛围感",[11,1334,1335,1336,1340],{},"危险、带电、叛逆、激进的未来复古主义。它大量借鉴 80 年代科幻视觉语言（《银翼杀手》、《阿基拉》）和黑客文化（《黑客帝国》、《攻壳机动队》）。界面应该感觉",[1337,1338,1339],"em",{},"活着","且不稳定——充满数字能量的嗡嗡声、数据损坏的故障、原始力量的脉动。它不仅仅是一个网站；它是一个被黑掉的信号、一个被禁止的界面、一个通往城市蔓延的窗口。",[426,1342,1343],{"id":1343},"触觉体验",[11,1345,1346,1349],{},[15,1347,1348],{},"不完美的技术","：拥抱模拟到数字转换的产物。扫描线、色差（RGB 分离）和信号噪声不是 bug；它们是特性。UI 应该感觉像是在努力容纳它显示的数据。",[11,1351,1352,1355,1356,1359],{},[15,1353,1354],{},"虚空 vs 光明","：背景不仅仅是黑暗；它是虚空。在这片绝对的黑暗中，霓虹光（青色、洋红、酸绿）不仅仅是给元素着色——它",[1337,1357,1358],{},"照亮","了它们。光源应该感觉有形，投射出定义层次结构的光晕和阴影。",[11,1361,1362,1365],{},[15,1363,1364],{},"工业粗野主义","：形状是硬朗的、有角度的、实用的。倒角（45 度切割）取代了友好的圆角矩形。边框是技术性的、精确的，类似于蓝图或 HUD（抬头显示器）示意图，而非装饰性框架。",[426,1367,1368],{"id":1368},"令人难忘的视觉特征",[504,1370,1371,1377,1383,1389,1395,1401],{},[507,1372,1373,1376],{},[15,1374,1375],{},"色差","：文本和元素上的 RGB 颜色分离（红\u002F青色偏移阴影），模拟镜头畸变或信号干扰",[507,1378,1379,1382],{},[15,1380,1381],{},"扫描线","：微妙的水平线覆盖层，模仿旧 CRT 显示器的刷新率，增加纹理并统一构图",[507,1384,1385,1388],{},[15,1386,1387],{},"故障效果","：通过 clip-path 动画、倾斜变换和闪烁文本实现的故意\"损坏\"，暗示不稳定连接或被黑系统",[507,1390,1391,1394],{},[15,1392,1393],{},"霓虹光晕","：文本和边框的字面发光，使用强烈的多层 box-shadow\u002Ftext-shadow 堆叠，在暗背景上创造\"光剑\"或\"霓虹灯\"效果",[507,1396,1397,1400],{},[15,1398,1399],{},"切角","：卡片和按钮上的倒角\u002F切割角，创造军事化、科技面板美学",[507,1402,1403,1406],{},[15,1404,1405],{},"电路图案","：类似 PCB 走线或数据高速公路的装饰性 SVG 背景，暗示底层硬件",[630,1408],{},[28,1410,1412],{"id":1411},"设计-token-系统dna","设计 Token 系统（DNA）",[426,1414,1416],{"id":1415},"颜色深色模式-强制","颜色（深色模式 - 强制）",[1418,1419,1420,1436],"table",{},[1421,1422,1423],"thead",{},[1424,1425,1426,1430,1433],"tr",{},[1427,1428,1429],"th",{},"Token",[1427,1431,1432],{},"色值",[1427,1434,1435],{},"说明",[1437,1438,1439,1455,1470,1485,1500,1515,1533,1551,1569,1584,1598,1612],"tbody",{},[1424,1440,1441,1447,1452],{},[1442,1443,1444],"td",{},[57,1445,1446],{},"background",[1442,1448,1449],{},[57,1450,1451],{},"#0a0a0f",[1442,1453,1454],{},"深虚空黑，带轻微蓝色底色",[1424,1456,1457,1462,1467],{},[1442,1458,1459],{},[57,1460,1461],{},"foreground",[1442,1463,1464],{},[57,1465,1466],{},"#e0e0e0",[1442,1468,1469],{},"主文本，非纯白（不那么刺眼）",[1424,1471,1472,1477,1482],{},[1442,1473,1474],{},[57,1475,1476],{},"card",[1442,1478,1479],{},[57,1480,1481],{},"#12121a",[1442,1483,1484],{},"卡片背景，深紫黑色",[1424,1486,1487,1492,1497],{},[1442,1488,1489],{},[57,1490,1491],{},"muted",[1442,1493,1494],{},[57,1495,1496],{},"#1c1c2e",[1442,1498,1499],{},"UI 装饰\u002F elevated 背景",[1424,1501,1502,1507,1512],{},[1442,1503,1504],{},[57,1505,1506],{},"mutedForeground",[1442,1508,1509],{},[57,1510,1511],{},"#6b7280",[1442,1513,1514],{},"次要文本，降低对比度",[1424,1516,1517,1522,1527],{},[1442,1518,1519],{},[57,1520,1521],{},"accent",[1442,1523,1524],{},[57,1525,1526],{},"#00ff88",[1442,1528,1529,1532],{},[15,1530,1531],{},"主霓虹色"," - 电光绿（受《黑客帝国》启发）",[1424,1534,1535,1540,1545],{},[1442,1536,1537],{},[57,1538,1539],{},"accentSecondary",[1442,1541,1542],{},[57,1543,1544],{},"#ff00ff",[1442,1546,1547,1550],{},[15,1548,1549],{},"次霓虹色"," - 热洋红\u002F粉色",[1424,1552,1553,1558,1563],{},[1442,1554,1555],{},[57,1556,1557],{},"accentTertiary",[1442,1559,1560],{},[57,1561,1562],{},"#00d4ff",[1442,1564,1565,1568],{},[15,1566,1567],{},"第三霓虹色"," - 青色\u002F电光蓝",[1424,1570,1571,1576,1581],{},[1442,1572,1573],{},[57,1574,1575],{},"border",[1442,1577,1578],{},[57,1579,1580],{},"#2a2a3a",[1442,1582,1583],{},"微妙边框",[1424,1585,1586,1591,1595],{},[1442,1587,1588],{},[57,1589,1590],{},"input",[1442,1592,1593],{},[57,1594,1481],{},[1442,1596,1597],{},"深输入框背景",[1424,1599,1600,1605,1609],{},[1442,1601,1602],{},[57,1603,1604],{},"ring",[1442,1606,1607],{},[57,1608,1526],{},[1442,1610,1611],{},"聚焦环匹配强调色",[1424,1613,1614,1619,1624],{},[1442,1615,1616],{},[57,1617,1618],{},"destructive",[1442,1620,1621],{},[57,1622,1623],{},"#ff3366",[1442,1625,1626],{},"错误\u002F危险红粉色",[426,1628,1629],{"id":1629},"排版",[11,1631,1632],{},[15,1633,1634],{},"字体栈：",[504,1636,1637,1646,1655],{},[507,1638,1639,522,1642,1645],{},[15,1640,1641],{},"标题",[57,1643,1644],{},"\"Orbitron\", \"Share Tech Mono\", monospace"," — 几何、未来感、机械化",[507,1647,1648,522,1651,1654],{},[15,1649,1650],{},"正文",[57,1652,1653],{},"\"JetBrains Mono\", \"Fira Code\", \"Consolas\", monospace"," — 干净的等宽字体，带来终端感觉",[507,1656,1657,522,1660,1663],{},[15,1658,1659],{},"强调\u002F标签",[57,1661,1662],{},"\"Share Tech Mono\", monospace"," — 用于 UI 标签、时间戳、徽章",[11,1665,1666],{},[15,1667,1668],{},"比例与样式：",[1418,1670,1671,1687],{},[1421,1672,1673],{},[1424,1674,1675,1678,1681,1684],{},[1427,1676,1677],{},"元素",[1427,1679,1680],{},"大小",[1427,1682,1683],{},"字重",[1427,1685,1686],{},"样式",[1437,1688,1689,1716,1741,1763,1784],{},[1424,1690,1691,1694,1703,1708],{},[1442,1692,1693],{},"H1",[1442,1695,1696,1699,1700],{},[57,1697,1698],{},"text-6xl"," 到 ",[57,1701,1702],{},"text-8xl",[1442,1704,1705],{},[57,1706,1707],{},"font-black",[1442,1709,1710,886,1713],{},[57,1711,1712],{},"uppercase",[57,1714,1715],{},"tracking-widest",[1424,1717,1718,1721,1729,1734],{},[1442,1719,1720],{},"H2",[1442,1722,1723,1699,1726],{},[57,1724,1725],{},"text-4xl",[57,1727,1728],{},"text-5xl",[1442,1730,1731],{},[57,1732,1733],{},"font-bold",[1442,1735,1736,886,1738],{},[57,1737,1712],{},[57,1739,1740],{},"tracking-wide",[1424,1742,1743,1746,1754,1759],{},[1442,1744,1745],{},"H3",[1442,1747,1748,1699,1751],{},[57,1749,1750],{},"text-xl",[57,1752,1753],{},"text-2xl",[1442,1755,1756],{},[57,1757,1758],{},"font-semibold",[1442,1760,1761],{},[57,1762,1712],{},[1424,1764,1765,1767,1772,1777],{},[1442,1766,1650],{},[1442,1768,1769],{},[57,1770,1771],{},"text-base",[1442,1773,1774],{},[57,1775,1776],{},"font-normal",[1442,1778,1779,886,1781],{},[57,1780,1740],{},[57,1782,1783],{},"leading-relaxed",[1424,1785,1786,1789,1794,1799],{},[1442,1787,1788],{},"代码\u002F标签",[1442,1790,1791],{},[57,1792,1793],{},"text-sm",[1442,1795,1796],{},[57,1797,1798],{},"font-mono",[1442,1800,1801,886,1803],{},[57,1802,1712],{},[57,1804,1805],{},"tracking-[0.2em]",[426,1807,1808],{"id":1808},"圆角与边框",[50,1810,1815],{"className":1811,"code":1813,"language":1814},[1812],"language-text","radius.none:     0px        \u002F\u002F 锐利切割是默认\nradius.sm:       2px        \u002F\u002F 最小柔化\nradius.base:     4px        \u002F\u002F 罕见，仅用于输入框\nradius.chamfer:  使用 clip-path 实现切角而非 border-radius\n","text",[57,1816,1813],{"__ignoreMap":55},[11,1818,1819,522,1822,1825,1826,1829],{},[15,1820,1821],{},"边框宽度",[57,1823,1824],{},"1px"," 默认，",[57,1827,1828],{},"2px"," 强调，边框通常使用渐变或光晕效果",[11,1831,1832,1835],{},[15,1833,1834],{},"倒角图案","（通过 clip-path 应用）：",[50,1837,1841],{"className":1838,"code":1839,"language":1840,"meta":55,"style":55},"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",[57,1842,1843,1852,1869,1886,1905,1924],{"__ignoreMap":55},[60,1844,1845,1849],{"class":62,"line":63},[60,1846,1848],{"class":1847},"sVyAn","clip-path",[60,1850,1851],{"class":66},": polygon(\n",[60,1853,1854,1857,1860,1863,1866],{"class":62,"line":80},[60,1855,1856],{"class":66},"  0 10px",[60,1858,1859],{"class":70},",",[60,1861,1862],{"class":66}," 10px 0",[60,1864,1865],{"class":70},",                           ",[60,1867,1868],{"class":313},"\u002F* 左上切 *\u002F\n",[60,1870,1871,1874,1877,1880,1883],{"class":62,"line":93},[60,1872,1873],{"class":66},"  calc(100% - 10px",[60,1875,1876],{"class":70},") 0, 100% 10",[60,1878,1879],{"class":66},"px",[60,1881,1882],{"class":70},",           ",[60,1884,1885],{"class":313},"\u002F* 右上切 *\u002F\n",[60,1887,1888,1891,1894,1897,1899,1902],{"class":62,"line":106},[60,1889,1890],{"class":70},"  100% ",[60,1892,1893],{"class":66},"calc(100% - 10px",[60,1895,1896],{"class":70},"), ",[60,1898,1893],{"class":66},[60,1900,1901],{"class":70},") 100%,  ",[60,1903,1904],{"class":313},"\u002F* 右下切 *\u002F\n",[60,1906,1907,1910,1913,1915,1918,1921],{"class":62,"line":112},[60,1908,1909],{"class":70},"  10",[60,1911,1912],{"class":66},"px 100%",[60,1914,1859],{"class":70},[60,1916,1917],{"class":66}," 0 calc(100% - 10px",[60,1919,1920],{"class":70},")            ",[60,1922,1923],{"class":313},"\u002F* 左下切 *\u002F\n",[60,1925,1926],{"class":62,"line":118},[60,1927,1928],{"class":70},");\n",[426,1930,1931],{"id":1931},"阴影与效果",[11,1933,1934,522],{},[15,1935,1936],{},"霓虹光晕（CSS 变量 Token）",[50,1938,1940],{"className":1838,"code":1939,"language":1840,"meta":55,"style":55},"\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",[57,1941,1942,1947,1966,1970,1975,1992,1996,2001,2025,2029,2034,2048,2052,2057],{"__ignoreMap":55},[60,1943,1944],{"class":62,"line":63},[60,1945,1946],{"class":313},"\u002F* 主霓虹光晕 - 用于悬停状态、聚焦环、高亮元素 *\u002F\n",[60,1948,1949,1952,1955,1957,1960,1963],{"class":62,"line":80},[60,1950,1951],{"class":66},"--box-shadow-neon: 0 0 5px ",[60,1953,1526],{"class":1954},"sLaUg",[60,1956,1859],{"class":70},[60,1958,1959],{"class":66}," 0 0 10px ",[60,1961,1962],{"class":1954},"#00ff8840",[60,1964,1965],{"class":66},";\n",[60,1967,1968],{"class":62,"line":93},[60,1969,134],{"emptyLinePlaceholder":133},[60,1971,1972],{"class":62,"line":106},[60,1973,1974],{"class":313},"\u002F* 小霓虹光晕 - 微妙强调 *\u002F\n",[60,1976,1977,1980,1982,1984,1987,1990],{"class":62,"line":112},[60,1978,1979],{"class":66},"--box-shadow-neon-sm: 0 0 3px ",[60,1981,1526],{"class":1954},[60,1983,1859],{"class":70},[60,1985,1986],{"class":66}," 0 0 6px ",[60,1988,1989],{"class":1954},"#00ff8830",[60,1991,1965],{"class":66},[60,1993,1994],{"class":62,"line":118},[60,1995,134],{"emptyLinePlaceholder":133},[60,1997,1998],{"class":62,"line":124},[60,1999,2000],{"class":313},"\u002F* 大霓虹光晕 - 强调状态、hero 元素 *\u002F\n",[60,2002,2003,2006,2008,2010,2013,2016,2018,2021,2023],{"class":62,"line":130},[60,2004,2005],{"class":66},"--box-shadow-neon-lg: 0 0 10px ",[60,2007,1526],{"class":1954},[60,2009,1859],{"class":70},[60,2011,2012],{"class":66}," 0 0 20px ",[60,2014,2015],{"class":1954},"#00ff8860",[60,2017,1859],{"class":70},[60,2019,2020],{"class":66}," 0 0 40px ",[60,2022,1989],{"class":1954},[60,2024,1965],{"class":66},[60,2026,2027],{"class":62,"line":137},[60,2028,134],{"emptyLinePlaceholder":133},[60,2030,2031],{"class":62,"line":150},[60,2032,2033],{"class":313},"\u002F* 次霓虹（洋红） *\u002F\n",[60,2035,2036,2039,2041,2043,2045],{"class":62,"line":158},[60,2037,2038],{"class":66},"--box-shadow-neon-secondary: 0 0 5px ",[60,2040,1544],{"class":166},[60,2042,1859],{"class":70},[60,2044,2012],{"class":66},[60,2046,2047],{"class":1954},"#ff00ff60;\n",[60,2049,2050],{"class":62,"line":163},[60,2051,134],{"emptyLinePlaceholder":133},[60,2053,2054],{"class":62,"line":173},[60,2055,2056],{"class":313},"\u002F* 第三霓虹（青色） *\u002F\n",[60,2058,2059,2062,2064,2066,2068,2071],{"class":62,"line":178},[60,2060,2061],{"class":66},"--box-shadow-neon-tertiary: 0 0 5px ",[60,2063,1562],{"class":1954},[60,2065,1859],{"class":70},[60,2067,2012],{"class":66},[60,2069,2070],{"class":1954},"#00d4ff60",[60,2072,1965],{"class":66},[11,2074,2075,522],{},[15,2076,2077],{},"文本阴影深度",[50,2079,2081],{"className":1838,"code":2080,"language":1840,"meta":55,"style":55},"\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",[57,2082,2083,2088,2116,2120,2125],{"__ignoreMap":55},[60,2084,2085],{"class":62,"line":63},[60,2086,2087],{"class":313},"\u002F* 故障效果文本阴影（用于 hero 标题） *\u002F\n",[60,2089,2090,2093,2096,2098,2101,2103,2106,2108,2111,2114],{"class":62,"line":80},[60,2091,2092],{"class":1847},"drop-shadow",[60,2094,2095],{"class":66},": 0 0 10px rgba(0",[60,2097,1859],{"class":70},[60,2099,2100],{"class":66}," 255",[60,2102,1859],{"class":70},[60,2104,2105],{"class":66}," 136",[60,2107,1859],{"class":70},[60,2109,2110],{"class":66}," 0",[60,2112,2113],{"class":206},".5",[60,2115,1928],{"class":70},[60,2117,2118],{"class":62,"line":93},[60,2119,134],{"emptyLinePlaceholder":133},[60,2121,2122],{"class":62,"line":106},[60,2123,2124],{"class":313},"\u002F* 渐变文本光晕 *\u002F\n",[60,2126,2127,2129,2132,2134,2136,2138,2140,2142,2144,2147],{"class":62,"line":112},[60,2128,2092],{"class":1847},[60,2130,2131],{"class":66},": 0 0 20px rgba(0",[60,2133,1859],{"class":70},[60,2135,2100],{"class":66},[60,2137,1859],{"class":70},[60,2139,2105],{"class":66},[60,2141,1859],{"class":70},[60,2143,2110],{"class":66},[60,2145,2146],{"class":206},".3",[60,2148,1928],{"class":70},[11,2150,2151,2153],{},[15,2152,1375],{},"（通过 .cyber-glitch 上的 CSS 动画实现）：\n通过 ::before 和 ::after 伪元素实现：",[504,2155,2156,2162,2168],{},[507,2157,2158,2161],{},[57,2159,2160],{},"text-shadow: -1px 0 #ff00ff","（洋红左）",[507,2163,2164,2167],{},[57,2165,2166],{},"text-shadow: -1px 0 #00d4ff","（青色右）",[507,2169,2170],{},"clip-path 动画实现故障效果",[426,2172,2174],{"id":2173},"纹理与图案深度关键","纹理与图案（深度关键）",[11,2176,2177,2180],{},[15,2178,2179],{},"1. 扫描线覆盖层","（CSS 伪元素）：",[50,2182,2184],{"className":1838,"code":2183,"language":1840,"meta":55,"style":55},"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",[57,2185,2186,2191,2198,2205,2212,2238,2262,2266],{"__ignoreMap":55},[60,2187,2188],{"class":62,"line":63},[60,2189,2190],{"class":66},"background: repeating-linear-gradient(\n",[60,2192,2193,2196],{"class":62,"line":80},[60,2194,2195],{"class":66},"  0deg",[60,2197,210],{"class":70},[60,2199,2200,2203],{"class":62,"line":93},[60,2201,2202],{"class":66},"  transparent",[60,2204,210],{"class":70},[60,2206,2207,2210],{"class":62,"line":106},[60,2208,2209],{"class":66},"  transparent 2px",[60,2211,210],{"class":70},[60,2213,2214,2217,2219,2221,2223,2225,2227,2229,2231,2234,2236],{"class":62,"line":112},[60,2215,2216],{"class":66},"  rgba(0",[60,2218,1859],{"class":70},[60,2220,2110],{"class":66},[60,2222,1859],{"class":70},[60,2224,2110],{"class":66},[60,2226,1859],{"class":70},[60,2228,2110],{"class":66},[60,2230,2146],{"class":206},[60,2232,2233],{"class":70},") 2",[60,2235,1879],{"class":66},[60,2237,210],{"class":70},[60,2239,2240,2242,2244,2246,2248,2250,2252,2254,2256,2259],{"class":62,"line":118},[60,2241,2216],{"class":66},[60,2243,1859],{"class":70},[60,2245,2110],{"class":66},[60,2247,1859],{"class":70},[60,2249,2110],{"class":66},[60,2251,1859],{"class":70},[60,2253,2110],{"class":66},[60,2255,2146],{"class":206},[60,2257,2258],{"class":70},") 4",[60,2260,2261],{"class":66},"px\n",[60,2263,2264],{"class":62,"line":124},[60,2265,1928],{"class":70},[60,2267,2268,2271],{"class":62,"line":130},[60,2269,2270],{"class":1847},"pointer-events",[60,2272,2273],{"class":66},": none;\n",[11,2275,2276,2279],{},[15,2277,2278],{},"2. 网格\u002F电路图案","（微妙背景）：",[50,2281,2283],{"className":1838,"code":2282,"language":1840,"meta":55,"style":55},"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",[57,2284,2285,2293,2326,2360],{"__ignoreMap":55},[60,2286,2287,2290],{"class":62,"line":63},[60,2288,2289],{"class":1847},"background-image",[60,2291,2292],{"class":66},":\n",[60,2294,2295,2298,2300,2302,2304,2306,2308,2310,2313,2316,2318,2320,2323],{"class":62,"line":80},[60,2296,2297],{"class":66},"  linear-gradient(rgba(0",[60,2299,1859],{"class":70},[60,2301,2100],{"class":66},[60,2303,1859],{"class":70},[60,2305,2105],{"class":66},[60,2307,1859],{"class":70},[60,2309,2110],{"class":66},[60,2311,2312],{"class":206},".03",[60,2314,2315],{"class":70},") 1",[60,2317,1879],{"class":66},[60,2319,1859],{"class":70},[60,2321,2322],{"class":66}," transparent 1px",[60,2324,2325],{"class":70},"),\n",[60,2327,2328,2331,2333,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358],{"class":62,"line":93},[60,2329,2330],{"class":66},"  linear-gradient(90deg",[60,2332,1859],{"class":70},[60,2334,2335],{"class":66}," rgba(0",[60,2337,1859],{"class":70},[60,2339,2100],{"class":66},[60,2341,1859],{"class":70},[60,2343,2105],{"class":66},[60,2345,1859],{"class":70},[60,2347,2110],{"class":66},[60,2349,2312],{"class":206},[60,2351,2315],{"class":70},[60,2353,1879],{"class":66},[60,2355,1859],{"class":70},[60,2357,2322],{"class":66},[60,2359,1928],{"class":70},[60,2361,2362,2365],{"class":62,"line":106},[60,2363,2364],{"class":1847},"background-size",[60,2366,2367],{"class":66},": 50px 50px;\n",[11,2369,2370,2373],{},[15,2371,2372],{},"3. 噪点纹理","：应用微妙的 CSS 噪点滤镜或 5-10% 不透明度的 SVG 噪点覆盖层",[11,2375,2376,2379],{},[15,2377,2378],{},"4. 渐变网格","：角落处极低不透明度的强调色径向渐变",[630,2381],{},[28,2383,2384],{"id":2384},"组件样式",[426,2386,2387],{"id":2387},"按钮",[11,2389,2390],{},"所有按钮使用：",[504,2392,2393,2396,2399,2402,2405],{},[507,2394,2395],{},"字体：monospace",[507,2397,2398],{},"文本转换：uppercase",[507,2400,2401],{},"字间距：wider",[507,2403,2404],{},"过渡：all 实现平滑效果",[507,2406,2407],{},"聚焦环：2px 强调色",[11,2409,2410,522],{},[15,2411,2412],{},"默认变体",[50,2414,2417],{"className":2415,"code":2416,"language":1814},[1812],"- 背景：transparent\n- 边框：2px solid accent (#00ff88)\n- 文本：accent 颜色\n- Clip-path: .cyber-chamfer-sm（较小倒角）\n- 悬停：背景填充 accent，文本变为背景色，霓虹光晕阴影\n",[57,2418,2416],{"__ignoreMap":55},[11,2420,2421,522],{},[15,2422,2423],{},"次要变体",[50,2425,2428],{"className":2426,"code":2427,"language":1814},[1812],"- 边框：2px solid accentSecondary (#ff00ff)\n- 文本：accentSecondary\n- 悬停：填充洋红，neon-secondary 光晕\n",[57,2429,2427],{"__ignoreMap":55},[11,2431,2432,522],{},[15,2433,2434],{},"轮廓变体",[50,2436,2439],{"className":2437,"code":2438,"language":1814},[1812],"- 边框：1px solid border (#2a2a3a)\n- 背景：transparent\n- 悬停：边框变为 accent，文本变为 accent，霓虹光晕出现\n",[57,2440,2438],{"__ignoreMap":55},[11,2442,2443,522],{},[15,2444,2445],{},"幽灵变体",[50,2447,2450],{"className":2448,"code":2449,"language":1814},[1812],"- 无边框\n- 悬停：背景 accent\u002F10 不透明度，文本变为 accent\n",[57,2451,2449],{"__ignoreMap":55},[11,2453,2454,2457],{},[15,2455,2456],{},"故障变体","（CTA）：",[50,2459,2462],{"className":2460,"code":2461,"language":1814},[1812],"- 背景：solid accent (#00ff88)\n- 文本：背景色（高对比度）\n- 使用 .cyber-glitch 类实现色差效果\n- 悬停：亮度增加（filter: brightness(1.1)）\n",[57,2463,2461],{"__ignoreMap":55},[426,2465,2467],{"id":2466},"卡片容器","卡片\u002F容器",[11,2469,2470,522],{},[15,2471,2472],{},"默认卡片变体",[50,2474,2477],{"className":2475,"code":2476,"language":1814},[1812],"- 背景：card (#12121a)\n- 边框：1px solid border (#2a2a3a)\n- Clip-path: 通过 .cyber-chamfer 类实现倒角\n- 过渡：all 300ms 实现平滑交互\n- 悬停：translateY(-1px)，边框变为 accent，霓虹光晕出现（如果 hoverEffect 属性）\n",[57,2478,2476],{"__ignoreMap":55},[11,2480,2481,2484],{},[15,2482,2483],{},"终端变体"," (variant=\"terminal\")：",[50,2486,2489],{"className":2487,"code":2488,"language":1814},[1812],"- 背景：background (#0a0a0f) 而非 card\n- 边框：1px solid border\n- 自动装饰标题栏带红绿灯点（红\u002F黄\u002F绿）\n- 内容 padding-top 以容纳标题栏\n- Clip-path: 倒角\n- 用于：博客卡片、FAQ 项、某些定价层级\n",[57,2490,2488],{"__ignoreMap":55},[11,2492,2493,2496],{},[15,2494,2495],{},"全息变体"," (variant=\"holographic\")：",[50,2498,2501],{"className":2499,"code":2500,"language":1814},[1812],"- 背景：muted (#1c1c2e) 30% 不透明度\n- 边框：1px solid accent 30% 不透明度\n- Box-shadow: 霓虹光晕\n- Backdrop-filter: blur 实现玻璃态效果\n- 角落装饰：卡片边缘的 4 个小边框角使用绝对定位\n- 用于：产品详情卡片、hero HUD 面板\n",[57,2502,2500],{"__ignoreMap":55},[426,2504,2505],{"id":2505},"输入框",[50,2507,2510],{"className":2508,"code":2509,"language":1814},[1812],"- 包装器：相对定位用于前缀图标\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",[57,2511,2509],{"__ignoreMap":55},[630,2513],{},[28,2515,2516],{"id":2516},"布局策略",[11,2518,2519,2522,2523,2526],{},[15,2520,2521],{},"最大宽度","：主内容 ",[57,2524,2525],{},"max-w-7xl","，全出血区块内部内容受限",[11,2528,2529,522],{},[15,2530,2531],{},"网格模式",[504,2533,2534,2544,2551],{},[507,2535,2536,2537,2540,2541],{},"特性：",[57,2538,2539],{},"grid-cols-1 md:grid-cols-2 lg:grid-cols-3","，容器带 ",[57,2542,2543],{},"-skew-y-1",[507,2545,2546,2547,2550],{},"定价：",[57,2548,2549],{},"grid-cols-1 md:grid-cols-3","，中间卡片放大",[507,2552,2553,2554,2557],{},"统计：带 ",[57,2555,2556],{},"divide-x divide-border"," 的水平 flex",[11,2559,2560,2563,2564,1699,2567,2570],{},[15,2561,2562],{},"间距","：8px 基础网格。宽裕的内边距（区块 ",[57,2565,2566],{},"py-24",[57,2568,2569],{},"py-32","）。密集的内部组件间距。",[11,2572,2573,522],{},[15,2574,2575],{},"不对称要求",[504,2577,2578,2581,2584,2595],{},[507,2579,2580],{},"Hero：最小 60\u002F40 分割",[507,2582,2583],{},"至少一个区块有重叠元素（负边距）",[507,2585,2586,2587,2590,2591,2594],{},"区块容器使用 ",[57,2588,2589],{},"rotate-1"," 或 ",[57,2592,2593],{},"skew-y-1"," 变换",[507,2596,2597],{},"内容允许时网格中交错卡片高度",[630,2599],{},[28,2601,2603],{"id":2602},"非通用性大胆因素","非通用性（大胆因素）",[11,2605,2606,522],{},[15,2607,2608],{},"强制大胆选择",[1200,2610,2611,2621,2627,2633,2639,2644,2660,2666],{},[507,2612,2613,2616,2617,2620],{},[15,2614,2615],{},"故障标题","：Hero h1 必须有",[15,2618,2619],{},"色差文本阴影","和偶尔\"故障\"的 CSS 动画（随机倾斜\u002F位移闪烁）",[507,2622,2623,2626],{},[15,2624,2625],{},"扫描线覆盖层","：整个页面有微妙的扫描线覆盖层（通过 body 或 main 上的 ::after）",[507,2628,2629,2632],{},[15,2630,2631],{},"终端美学","：至少一个区块必须感觉像终端（等宽、> 前缀、闪烁光标动画）",[507,2634,2635,2638],{},[15,2636,2637],{},"真正发光的霓虹边框","：不仅仅是彩色边框 - 堆叠的 box-shadows 创造真正的光晕效果",[507,2640,2641,2643],{},[15,2642,1399],{},"：卡片使用 clip-path 实现倒角\u002F切割角，而非圆角",[507,2645,2646,522,2649],{},[15,2647,2648],{},"动画元素",[504,2650,2651,2654,2657],{},[507,2652,2653],{},"闪烁光标（animation: blink 1s step-end infinite）",[507,2655,2656],{},"微妙的悬停故障效果",[507,2658,2659],{},"渐变边框动画（色相旋转）",[507,2661,2662,2665],{},[15,2663,2664],{},"电路\u002F网格背景","：至少一个区块背景中可见科技图案",[507,2667,2668,2671],{},[15,2669,2670],{},"打字\u002F打字机效果","：考虑在副标题上或至少样式为正在输入中（尾随光标）",[630,2673],{},[28,2675,2676],{"id":2676},"效果与动画",[11,2678,2679,2682],{},[15,2680,2681],{},"运动感觉","：锐利、数字化、略带机械感。快速弹跳而非平滑缓动。",[11,2684,2685,522],{},[15,2686,2687],{},"过渡",[50,2689,2691],{"className":1838,"code":2690,"language":1840,"meta":55,"style":55},"transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n\u002F* 或更数字化的感觉： *\u002F\ntransition: all 100ms steps(4);\n",[57,2692,2693,2719,2724],{"__ignoreMap":55},[60,2694,2695,2698,2701,2703,2705,2707,2709,2712,2714,2717],{"class":62,"line":63},[60,2696,2697],{"class":66},"transition: all 150ms cubic-bezier(0",[60,2699,2700],{"class":206},".4",[60,2702,1859],{"class":70},[60,2704,2110],{"class":66},[60,2706,1859],{"class":70},[60,2708,2110],{"class":66},[60,2710,2711],{"class":206},".2",[60,2713,1859],{"class":70},[60,2715,2716],{"class":66}," 1",[60,2718,1928],{"class":70},[60,2720,2721],{"class":62,"line":80},[60,2722,2723],{"class":313},"\u002F* 或更数字化的感觉： *\u002F\n",[60,2725,2726,2729],{"class":62,"line":93},[60,2727,2728],{"class":66},"transition: all 100ms steps(4",[60,2730,1928],{"class":70},[11,2732,2733,522],{},[15,2734,2735],{},"关键帧动画",[50,2737,2739],{"className":1838,"code":2738,"language":1840,"meta":55,"style":55},"\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",[57,2740,2741,2746,2757,2768,2773,2777,2782,2791,2806,2829,2850,2872,2894,2898,2902,2907,2916,2934,2951,2955,2959,2964,2973,3000,3025],{"__ignoreMap":55},[60,2742,2743],{"class":62,"line":63},[60,2744,2745],{"class":313},"\u002F* 闪烁光标 *\u002F\n",[60,2747,2748,2751,2754],{"class":62,"line":80},[60,2749,2750],{"class":66},"@keyframes",[60,2752,2753],{"class":197}," blink",[60,2755,2756],{"class":70}," {\n",[60,2758,2759,2762,2765],{"class":62,"line":93},[60,2760,2761],{"class":70},"  50% { opacity: ",[60,2763,2764],{"class":206},"0",[60,2766,2767],{"class":70},"; }\n",[60,2769,2770],{"class":62,"line":106},[60,2771,2772],{"class":70},"}\n",[60,2774,2775],{"class":62,"line":112},[60,2776,134],{"emptyLinePlaceholder":133},[60,2778,2779],{"class":62,"line":118},[60,2780,2781],{"class":313},"\u002F* 故障效果 *\u002F\n",[60,2783,2784,2786,2789],{"class":62,"line":124},[60,2785,2750],{"class":66},[60,2787,2788],{"class":197}," glitch",[60,2790,2756],{"class":70},[60,2792,2793,2796,2799,2801,2803],{"class":62,"line":130},[60,2794,2795],{"class":70},"  0%, 100% { transform: ",[60,2797,2798],{"class":184},"translate",[60,2800,243],{"class":70},[60,2802,2764],{"class":206},[60,2804,2805],{"class":70},"); }\n",[60,2807,2808,2811,2813,2815,2818,2820,2822,2825,2827],{"class":62,"line":137},[60,2809,2810],{"class":70},"  20% { transform: ",[60,2812,2798],{"class":184},[60,2814,243],{"class":70},[60,2816,2817],{"class":206},"-2",[60,2819,1879],{"class":1847},[60,2821,886],{"class":70},[60,2823,2824],{"class":206},"2",[60,2826,1879],{"class":1847},[60,2828,2805],{"class":70},[60,2830,2831,2834,2836,2838,2840,2842,2844,2846,2848],{"class":62,"line":150},[60,2832,2833],{"class":70},"  40% { transform: ",[60,2835,2798],{"class":184},[60,2837,243],{"class":70},[60,2839,2824],{"class":206},[60,2841,1879],{"class":1847},[60,2843,886],{"class":70},[60,2845,2817],{"class":206},[60,2847,1879],{"class":1847},[60,2849,2805],{"class":70},[60,2851,2852,2855,2857,2859,2862,2864,2866,2868,2870],{"class":62,"line":158},[60,2853,2854],{"class":70},"  60% { transform: ",[60,2856,2798],{"class":184},[60,2858,243],{"class":70},[60,2860,2861],{"class":206},"-1",[60,2863,1879],{"class":1847},[60,2865,886],{"class":70},[60,2867,2861],{"class":206},[60,2869,1879],{"class":1847},[60,2871,2805],{"class":70},[60,2873,2874,2877,2879,2881,2884,2886,2888,2890,2892],{"class":62,"line":163},[60,2875,2876],{"class":70},"  80% { transform: ",[60,2878,2798],{"class":184},[60,2880,243],{"class":70},[60,2882,2883],{"class":206},"1",[60,2885,1879],{"class":1847},[60,2887,886],{"class":70},[60,2889,2883],{"class":206},[60,2891,1879],{"class":1847},[60,2893,2805],{"class":70},[60,2895,2896],{"class":62,"line":173},[60,2897,2772],{"class":70},[60,2899,2900],{"class":62,"line":178},[60,2901,134],{"emptyLinePlaceholder":133},[60,2903,2904],{"class":62,"line":194},[60,2905,2906],{"class":313},"\u002F* 扫描线滚动 *\u002F\n",[60,2908,2909,2911,2914],{"class":62,"line":213},[60,2910,2750],{"class":66},[60,2912,2913],{"class":197}," scanline",[60,2915,2756],{"class":70},[60,2917,2918,2921,2924,2926,2929,2932],{"class":62,"line":229},[60,2919,2920],{"class":70},"  0% { transform: ",[60,2922,2923],{"class":184},"translateY",[60,2925,243],{"class":70},[60,2927,2928],{"class":206},"-100",[60,2930,2931],{"class":1847},"%",[60,2933,2805],{"class":70},[60,2935,2936,2939,2941,2943,2946,2949],{"class":62,"line":252},[60,2937,2938],{"class":70},"  100% { transform: ",[60,2940,2923],{"class":184},[60,2942,243],{"class":70},[60,2944,2945],{"class":206},"100",[60,2947,2948],{"class":1847},"vh",[60,2950,2805],{"class":70},[60,2952,2953],{"class":62,"line":257},[60,2954,2772],{"class":70},[60,2956,2957],{"class":62,"line":262},[60,2958,134],{"emptyLinePlaceholder":133},[60,2960,2961],{"class":62,"line":275},[60,2962,2963],{"class":313},"\u002F* RGB 偏移\u002F色差脉冲 *\u002F\n",[60,2965,2966,2968,2971],{"class":62,"line":288},[60,2967,2750],{"class":66},[60,2969,2970],{"class":197}," rgbShift",[60,2972,2756],{"class":70},[60,2974,2975,2978,2980,2982,2984,2987,2989,2991,2993,2995,2998],{"class":62,"line":305},[60,2976,2977],{"class":70},"  0%, 100% { text-shadow: ",[60,2979,2817],{"class":206},[60,2981,1879],{"class":1847},[60,2983,2110],{"class":206},[60,2985,2986],{"class":206}," #ff00ff",[60,2988,886],{"class":70},[60,2990,2824],{"class":206},[60,2992,1879],{"class":1847},[60,2994,2110],{"class":206},[60,2996,2997],{"class":206}," #00d4ff",[60,2999,2767],{"class":70},[60,3001,3002,3005,3007,3009,3011,3013,3015,3017,3019,3021,3023],{"class":62,"line":310},[60,3003,3004],{"class":70},"  50% { text-shadow: ",[60,3006,2824],{"class":206},[60,3008,1879],{"class":1847},[60,3010,2110],{"class":206},[60,3012,2986],{"class":206},[60,3014,886],{"class":70},[60,3016,2817],{"class":206},[60,3018,1879],{"class":1847},[60,3020,2110],{"class":206},[60,3022,2997],{"class":206},[60,3024,2767],{"class":70},[60,3026,3027],{"class":62,"line":317},[60,3028,2772],{"class":70},[630,3030],{},[28,3032,3033],{"id":3033},"图标",[11,3035,3036,522],{},[15,3037,3038],{},"Lucide 图标配置",[504,3040,3041,3048,3057,3060],{},[507,3042,3043,3044,3047],{},"描边宽度：",[57,3045,3046],{},"1.5px","（细、技术感）",[507,3049,3050,3051,2590,3054],{},"大小：通常 ",[57,3052,3053],{},"h-5 w-5",[57,3055,3056],{},"h-6 w-6",[507,3058,3059],{},"颜色：继承文本（通常是 accent 或 foreground）",[507,3061,3062,3063,3066],{},"样式：悬停时通过 filter: ",[57,3064,3065],{},"drop-shadow(0 0 4px currentColor)"," 添加微妙光晕",[11,3068,3069,3072],{},[15,3070,3071],{},"图标容器","：将图标放置在带光晕效果的边框正方形\u002F六边形内",[630,3074],{},[28,3076,3077],{"id":3077},"响应式策略",[11,3079,3080,3083],{},[15,3081,3082],{},"移动端适配","（移动优先）：",[11,3085,3086,522],{},[15,3087,3088],{},"排版缩放",[504,3090,3091,3094,3097,3100],{},[507,3092,3093],{},"Hero h1：text-5xl（移动端）→ text-7xl（md）→ text-8xl（lg）",[507,3095,3096],{},"副标题：text-base → text-lg → text-xl",[507,3098,3099],{},"区块标题：text-4xl → text-5xl",[507,3101,3102],{},"所有尺寸保持 uppercase 和 tracking",[11,3104,3105,522],{},[15,3106,3107],{},"布局变化",[504,3109,3110,3113,3116,3119,3122,3125],{},[507,3111,3112],{},"导航：\u003C lg 隐藏导航链接，\u003C sm 显示缩写 CTA 文本",[507,3114,3115],{},"统计：前 2 项仅顶部边框（移动端）→ 4 列垂直边框（桌面端）",[507,3117,3118],{},"所有特性\u002F博客\u002F推荐网格：单列 → 2 列（md）→ 3 列（lg）",[507,3120,3121],{},"定价：垂直堆叠 → 3 列网格，高亮卡片仅在 md+ 上缩放",[507,3123,3124],{},"Hero HUD：移动端隐藏（lg:block）",[507,3126,3127],{},"页脚：堆叠为单列 → 4 列网格",[11,3129,3130,522],{},[15,3131,3132],{},"保持元素",[504,3134,3135,3138,3141,3144,3147,3150,3153],{},[507,3136,3137],{},"扫描线覆盖层（整页）",[507,3139,3140],{},"所有卡片的倒角",[507,3142,3143],{},"霓虹光晕效果（移动端可降低强度以提升性能）",[507,3145,3146],{},"网格\u002F电路背景",[507,3148,3149],{},"等宽排版",[507,3151,3152],{},"终端美学（>、$、前缀）",[507,3154,3155],{},"深色配色方案",[11,3157,3158,522],{},[15,3159,3160],{},"触控目标",[504,3162,3163,3166,3169],{},[507,3164,3165],{},"所有交互元素最小 44px 高度",[507,3167,3168],{},"可点击项之间充足间距",[507,3170,3171],{},"FAQ 手风琴全宽点击区域",[630,3173],{},[28,3175,3176],{"id":3176},"无障碍",[11,3178,3179,3182],{},[15,3180,3181],{},"对比度","：所有文本满足 WCAG AA（暗背景上的 accent 绿 = 7.5:1 比例 - 优秀）",[11,3184,3185,522],{},[15,3186,3187],{},"聚焦状态",[50,3189,3191],{"className":1838,"code":3190,"language":1840,"meta":55,"style":55},"focus-visible:outline-none\nfocus-visible:ring-2\nfocus-visible:ring-accent\nfocus-visible:ring-offset-2\nfocus-visible:ring-offset-background\n",[57,3192,3193,3204,3213,3222,3231],{"__ignoreMap":55},[60,3194,3195,3198,3201],{"class":62,"line":63},[60,3196,3197],{"class":1847},"focus-visible",[60,3199,3200],{"class":66},":",[60,3202,3203],{"class":1847},"outline-none\n",[60,3205,3206,3208,3210],{"class":62,"line":80},[60,3207,3197],{"class":1847},[60,3209,3200],{"class":66},[60,3211,3212],{"class":1847},"ring-2\n",[60,3214,3215,3217,3219],{"class":62,"line":93},[60,3216,3197],{"class":1847},[60,3218,3200],{"class":66},[60,3220,3221],{"class":1847},"ring-accent\n",[60,3223,3224,3226,3228],{"class":62,"line":106},[60,3225,3197],{"class":1847},[60,3227,3200],{"class":66},[60,3229,3230],{"class":1847},"ring-offset-2\n",[60,3232,3233,3235,3237],{"class":62,"line":112},[60,3234,3197],{"class":1847},[60,3236,3200],{"class":66},[60,3238,3239],{"class":1847},"ring-offset-background\n",[11,3241,3242],{},"外加匹配霓虹美学的光晕效果。",[11,3244,3245,3248,3249,3252],{},[15,3246,3247],{},"减少动画","：尊重 ",[57,3250,3251],{},"prefers-reduced-motion"," - 禁用故障动画，保留静态色差",[630,3254],{},[28,3256,3257],{"id":3257},"实现注意事项",[504,3259,3260,3267,3270,3273,3276,3279],{},[507,3261,3262,3263,3266],{},"大量使用 Tailwind 任意值 ",[57,3264,3265],{},"[...]"," 自定义阴影和 clip-path",[507,3268,3269],{},"颜色使用 CSS 变量便于主题切换",[507,3271,3272],{},"扫描线通过 CSS 实现，非图片",[507,3274,3275],{},"故障动画应微妙且不频繁（不分散注意力）",[507,3277,3278],{},"在不同屏幕上测试光晕效果（在低对比度显示器上可能看起来褪色）",[507,3280,3281,3282],{},"考虑多 box-shadow 的 GPU 性能 - 谨慎使用 ",[57,3283,3284],{},"will-change: transform",[1258,3286,3287],{},"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":55,"searchDepth":93,"depth":93,"links":3289},[3290,3296,3303,3308,3309,3310,3311,3312,3313,3314],{"id":1320,"depth":80,"text":1320,"children":3291},[3292,3293,3294,3295],{"id":1323,"depth":93,"text":1323},{"id":1332,"depth":93,"text":1332},{"id":1343,"depth":93,"text":1343},{"id":1368,"depth":93,"text":1368},{"id":1411,"depth":80,"text":1412,"children":3297},[3298,3299,3300,3301,3302],{"id":1415,"depth":93,"text":1416},{"id":1629,"depth":93,"text":1629},{"id":1808,"depth":93,"text":1808},{"id":1931,"depth":93,"text":1931},{"id":2173,"depth":93,"text":2174},{"id":2384,"depth":80,"text":2384,"children":3304},[3305,3306,3307],{"id":2387,"depth":93,"text":2387},{"id":2466,"depth":93,"text":2467},{"id":2505,"depth":93,"text":2505},{"id":2516,"depth":80,"text":2516},{"id":2602,"depth":80,"text":2603},{"id":2676,"depth":80,"text":2676},{"id":3033,"depth":80,"text":3033},{"id":3077,"depth":80,"text":3077},{"id":3176,"depth":80,"text":3176},{"id":3257,"depth":80,"text":3257},"2026-04-15","高对比度的霓虹灯效果搭配黑色背景，故障动画，终端\u002F等宽字体，以科技为主题的装饰。一种受 80 年代科幻和黑客文化启发的反乌托邦数字美学。",{},"\u002Fblogs\u002Fcyberpunk-design-system",{"title":1311,"description":3316},"blogs\u002Fcyberpunk-design-system",[3322,3323,3324],"UI设计","提示词","赛博朋克","f2ID-BNx7dpjfQwxZBUK1mF9eVKUL3JiZ1v5RfC_Kwg",{"id":3327,"title":3328,"body":3329,"date":3315,"description":6190,"extension":1299,"meta":6191,"navigation":133,"path":6192,"seo":6193,"stem":6194,"tags":6195,"__hash__":6197},"blogs\u002Fblogs\u002Fretro-90s-design-system.md","复古\u002F90年代怀旧设计风格",{"type":8,"value":3330,"toc":6143},[3331,3335,3337,3342,3348,3354,3356,3360,3364,3367,3666,3671,3691,3694,3700,3737,3742,3779,3784,3808,3810,3820,3824,3843,3849,3852,3857,3908,3919,3924,3989,3994,4040,4051,4057,4104,4110,4129,4133,4136,4142,4264,4267,4273,4325,4328,4333,4395,4398,4400,4403,4405,4410,4433,4438,4473,4478,4518,4524,4544,4549,4690,4692,4697,4718,4724,4730,4736,4751,4754,4771,4774,4779,4802,4810,4816,4822,4826,4829,4834,4867,4872,4886,4891,4897,4899,4903,4925,4930,4941,4943,4946,4949,4957,4962,4976,4986,4992,5016,5018,5024,5035,5041,5052,5058,5078,5084,5086,5090,5096,5099,5106,5117,5122,5133,5136,5139,5231,5237,5240,5247,5251,5254,5269,5275,5433,5437,5440,5443,5446,5460,5463,5466,5480,5483,5486,5497,5500,5503,5506,5509,5511,5514,5520,5525,5563,5567,5584,5589,5615,5623,5634,5636,5638,5643,5657,5662,5678,5683,5694,5699,5713,5722,5773,5775,5779,5783,5854,5858,5890,5894,5917,5919,5922,5926,5929,5935,5938,5942,5945,5970,5973,5983,5986,6018,6020,6023,6026,6122,6124,6127,6134,6137,6140],[1315,3332,3334],{"id":3333},"设计风格复古90年代怀旧-retro-90s-nostalgia","设计风格：复古\u002F90年代怀旧 (Retro \u002F 90s Nostalgia)",[28,3336,1320],{"id":1320},[11,3338,3339,3341],{},[15,3340,1323],{},"：拥抱早期网络的原始、未经过滤的美学。这种设计庆祝1990年代网站的\"丑陋酷\"魅力——斜面按钮、系统字体、花哨的颜色和动画元素。它刻意反现代，拒绝极简主义，追求最大视觉冲击和怀旧真实性。每个像素都应该感觉像是在1997年的Windows 95机器上制作的。",[11,3343,3344,3347],{},[15,3345,3346],{},"氛围","：俏皮、混乱、怀旧、毫无歉意地响亮。想想GeoCities页面、\"正在建设中\"横幅、访问计数器和留言簿。这不是关于看起来过时——而是关于捕捉早期互联网的乐观、实验精神，当时每个人都在摸索。这种美学应该足够真实，让经历过那个时代的人会心一笑。",[11,3349,3350,3353],{},[15,3351,3352],{},"历史背景","：这种风格在1995-1999年间达到顶峰，当时个人电脑使用Windows 95\u002F98，显示器分辨率为800x600，网页浏览器提供的CSS有限。设计师在严重限制下工作，产生了一种我们正在忠实重现的独特视觉语言。",[630,3355],{},[28,3357,3359],{"id":3358},"设计token系统dna","设计Token系统（DNA）",[426,3361,3363],{"id":3362},"颜色仅浅色模式","颜色（仅浅色模式）",[11,3365,3366],{},"这个调色板直接取自Windows 95系统颜色和早期网络十六进制值。",[1418,3368,3369,3384],{},[1421,3370,3371],{},[1424,3372,3373,3375,3378,3381],{},[1427,3374,1429],{},[1427,3376,3377],{},"值",[1427,3379,3380],{},"用途",[1427,3382,3383],{},"备注",[1437,3385,3386,3403,3420,3437,3454,3472,3490,3508,3526,3542,3560,3577,3595,3613,3631,3649],{},[1424,3387,3388,3392,3397,3400],{},[1442,3389,3390],{},[57,3391,1446],{},[1442,3393,3394],{},[57,3395,3396],{},"#C0C0C0",[1442,3398,3399],{},"主要页面背景",[1442,3401,3402],{},"经典Windows 95按钮面灰色",[1424,3404,3405,3409,3414,3417],{},[1442,3406,3407],{},[57,3408,1461],{},[1442,3410,3411],{},[57,3412,3413],{},"#000000",[1442,3415,3416],{},"纯黑文字",[1442,3418,3419],{},"最大对比度，正文文字不使用灰色",[1424,3421,3422,3426,3431,3434],{},[1442,3423,3424],{},[57,3425,1491],{},[1442,3427,3428],{},[57,3429,3430],{},"#808080",[1442,3432,3433],{},"次要元素、元数据",[1442,3435,3436],{},"正好50%灰色（128,128,128）",[1424,3438,3439,3443,3448,3451],{},[1442,3440,3441],{},[57,3442,1521],{},[1442,3444,3445],{},[57,3446,3447],{},"#0000FF",[1442,3449,3450],{},"超链接（未访问）",[1442,3452,3453],{},"纯蓝色最大饱和度",[1424,3455,3456,3461,3466,3469],{},[1442,3457,3458],{},[57,3459,3460],{},"secondary",[1442,3462,3463],{},[57,3464,3465],{},"#FF0000",[1442,3467,3468],{},"热红色强调",[1442,3470,3471],{},"纯红色最大饱和度",[1424,3473,3474,3479,3484,3487],{},[1442,3475,3476],{},[57,3477,3478],{},"tertiary",[1442,3480,3481],{},[57,3482,3483],{},"#FFFF00",[1442,3485,3486],{},"亮黄色高亮",[1442,3488,3489],{},"纯黄色，用于徽章和高亮",[1424,3491,3492,3497,3502,3505],{},[1442,3493,3494],{},[57,3495,3496],{},"success",[1442,3498,3499],{},[57,3500,3501],{},"#00FF00",[1442,3503,3504],{},"柠檬绿",[1442,3506,3507],{},"纯绿色最大饱和度",[1424,3509,3510,3515,3520,3523],{},[1442,3511,3512],{},[57,3513,3514],{},"successDark",[1442,3516,3517],{},[57,3518,3519],{},"#00AA00",[1442,3521,3522],{},"按钮的深绿色",[1442,3524,3525],{},"更可读的绿色变体",[1424,3527,3528,3532,3536,3539],{},[1442,3529,3530],{},[57,3531,1575],{},[1442,3533,3534],{},[57,3535,3413],{},[1442,3537,3538],{},"纯黑边框",[1442,3540,3541],{},"用于外边框",[1424,3543,3544,3549,3554,3557],{},[1442,3545,3546],{},[57,3547,3548],{},"borderLight",[1442,3550,3551],{},[57,3552,3553],{},"#FFFFFF",[1442,3555,3556],{},"3D高亮白色",[1442,3558,3559],{},"顶部\u002F左侧斜面边缘",[1424,3561,3562,3567,3571,3574],{},[1442,3563,3564],{},[57,3565,3566],{},"borderDark",[1442,3568,3569],{},[57,3570,3430],{},[1442,3572,3573],{},"3D阴影灰色",[1442,3575,3576],{},"底部\u002F右侧斜面边缘",[1424,3578,3579,3584,3589,3592],{},[1442,3580,3581],{},[57,3582,3583],{},"titleBar",[1442,3585,3586],{},[57,3587,3588],{},"#000080",[1442,3590,3591],{},"Windows标题栏海军蓝",[1442,3593,3594],{},"纯深蓝色（海军蓝）",[1424,3596,3597,3602,3607,3610],{},[1442,3598,3599],{},[57,3600,3601],{},"titleBarGradientEnd",[1442,3603,3604],{},[57,3605,3606],{},"#1084D0",[1442,3608,3609],{},"标题栏渐变",[1442,3611,3612],{},"Windows 98活动窗口渐变",[1424,3614,3615,3620,3625,3628],{},[1442,3616,3617],{},[57,3618,3619],{},"panelYellow",[1442,3621,3622],{},[57,3623,3624],{},"#FFFFCC",[1442,3626,3627],{},"浅黄色内容面板",[1442,3629,3630],{},"真实的Windows记事本\u002F帮助颜色",[1424,3632,3633,3638,3643,3646],{},[1442,3634,3635],{},[57,3636,3637],{},"visitedLink",[1442,3639,3640],{},[57,3641,3642],{},"#800080",[1442,3644,3645],{},"已访问超链接",[1442,3647,3648],{},"紫色\u002F栗色",[1424,3650,3651,3656,3660,3663],{},[1442,3652,3653],{},[57,3654,3655],{},"hoverLink",[1442,3657,3658],{},[57,3659,3465],{},[1442,3661,3662],{},"链接悬停状态",[1442,3664,3665],{},"红色",[11,3667,3668,522],{},[15,3669,3670],{},"颜色关系",[504,3672,3673,3676,3688],{},[507,3674,3675],{},"所有颜色都是最大饱和度（纯RGB值，至少一个通道在0或255）",[507,3677,3678,3679,3681,3682,3681,3684,3681,3686],{},"没有渐变灰色 - 只有 ",[57,3680,3413],{},"、",[57,3683,3430],{},[57,3685,3396],{},[57,3687,3553],{},[507,3689,3690],{},"链接遵循经典顺序：蓝色 → 紫色（已访问） → 红色（悬停）",[426,3692,3693],{"id":3693},"字体排版",[11,3695,3696,3699],{},[15,3697,3698],{},"字体栈","（唤起1995-1999年的系统字体）：",[504,3701,3702,3710,3718,3727],{},[507,3703,3704,522,3707],{},[15,3705,3706],{},"主要正文",[57,3708,3709],{},"\"MS Sans Serif\", \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif",[507,3711,3712,522,3714,3717],{},[15,3713,1641],{},[57,3715,3716],{},"\"Arial Black\", Impact, Haettenschweiler, sans-serif","（仅粗重、粗体）",[507,3719,3720,522,3723,3726],{},[15,3721,3722],{},"等宽",[57,3724,3725],{},"\"Courier New\", Courier, monospace","（用于日期、统计、计数器、类代码元素）",[507,3728,3729,3732,3733,3736],{},[15,3730,3731],{},"俏皮点缀","（极少使用）：",[57,3734,3735],{},"\"Comic Sans MS\", cursive","（仅用于\"有趣\"的装饰元素如果需要）",[11,3738,3739,522],{},[15,3740,3741],{},"字号",[504,3743,3744,3750,3756,3762,3767,3773],{},[507,3745,3746,3749],{},[15,3747,3748],{},"H1首屏","：48px-96px（3xl到6xl），总是大写或首字母大写，Arial Black\u002FImpact",[507,3751,3752,3755],{},[15,3753,3754],{},"H2章节","：32-48px（2xl到4xl），经常大写，Arial Black",[507,3757,3758,3761],{},[15,3759,3760],{},"H3小节","：20-24px（lg到xl），粗体字重",[507,3763,3764,3766],{},[15,3765,1650],{},"：14-16px，默认字重，可读密度",[507,3768,3769,3772],{},[15,3770,3771],{},"小\u002F元数据","：12px（xs），经常等宽用于日期和元数据",[507,3774,3775,3778],{},[15,3776,3777],{},"标签","：10-12px，大写，有时等宽",[11,3780,3781,522],{},[15,3782,3783],{},"字体排版模式",[504,3785,3786,3789,3798,3801],{},[507,3787,3788],{},"标题是粗体或黑色字重 - 这个时代不存在细体或轻体",[507,3790,3791,3792,1699,3795,3797],{},"大写标题的字间距：",[57,3793,3794],{},"tracking-tight",[57,3796,1740],{},"（不扩展）",[507,3799,3800],{},"行高：紧凑（标题1.2-1.4，正文1.5-1.6）",[507,3802,3803,3804,3807],{},"3D文字的文字阴影：",[57,3805,3806],{},"text-shadow: 2px 2px 0 #808080","（硬边，无模糊）",[426,3809,1808],{"id":1808},[11,3811,3812,3815,3816,3819],{},[15,3813,3814],{},"圆角","：到处都是 ",[57,3817,3818],{},"0px","。没有例外。90年代没有圆角。",[11,3821,3822,522],{},[15,3823,1821],{},[504,3825,3826,3831,3837],{},[507,3827,3828,3829],{},"标准：大多数元素 ",[57,3830,1828],{},[507,3832,3833,3834],{},"强调：章节分隔线和高亮元素 ",[57,3835,3836],{},"4px",[507,3838,3839,3840,3842],{},"最小：仅微妙内部细节 ",[57,3841,1824],{},"（罕见）",[11,3844,3845,3848],{},[15,3846,3847],{},"3D斜面效果","（标志性特征）：",[11,3850,3851],{},"这是最关键的视觉效果。Windows 95使用特定的4值边框颜色语法结合box-shadow创造深度。",[11,3853,3854,522],{},[15,3855,3856],{},"外凸（凸起）- 看起来突出的元素",[50,3858,3860],{"className":1838,"code":3859,"language":1840,"meta":55,"style":55},"border: 2px solid;\nborder-color: #ffffff #808080 #808080 #ffffff; \u002F* 上 右 下 左 *\u002F\nbox-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;\n",[57,3861,3862,3867,3889],{"__ignoreMap":55},[60,3863,3864],{"class":62,"line":63},[60,3865,3866],{"class":66},"border: 2px solid;\n",[60,3868,3869,3872,3875,3878,3881,3883,3886],{"class":62,"line":80},[60,3870,3871],{"class":1847},"border-color",[60,3873,3874],{"class":66},": ",[60,3876,3877],{"class":166},"#ffffff",[60,3879,3880],{"class":1954}," #808080",[60,3882,3880],{"class":1954},[60,3884,3885],{"class":1954}," #ffffff;",[60,3887,3888],{"class":313}," \u002F* 上 右 下 左 *\u002F\n",[60,3890,3891,3894,3897,3900,3902,3905],{"class":62,"line":93},[60,3892,3893],{"class":1847},"box-shadow",[60,3895,3896],{"class":66},": inset -1px -1px 0 ",[60,3898,3899],{"class":1954},"#404040",[60,3901,1859],{"class":70},[60,3903,3904],{"class":66}," inset 1px 1px 0 ",[60,3906,3907],{"class":1954},"#dfdfdf;\n",[504,3909,3910,3913,3916],{},[507,3911,3912],{},"顶部和左侧边缘：白色（#ffffff）",[507,3914,3915],{},"底部和右侧边缘：灰色（#808080）",[507,3917,3918],{},"内部阴影用更深（#404040）和更浅（#dfdfdf）的点缀增加深度",[11,3920,3921,522],{},[15,3922,3923],{},"外凸增强（更深斜面）",[50,3925,3927],{"className":1838,"code":3926,"language":1840,"meta":55,"style":55},"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",[57,3928,3929,3933,3948,3954,3963,3973,3982],{"__ignoreMap":55},[60,3930,3931],{"class":62,"line":63},[60,3932,3866],{"class":66},[60,3934,3935,3937,3939,3941,3943,3945],{"class":62,"line":80},[60,3936,3871],{"class":1847},[60,3938,3874],{"class":66},[60,3940,3877],{"class":166},[60,3942,3880],{"class":1954},[60,3944,3880],{"class":1954},[60,3946,3947],{"class":1954}," #ffffff;\n",[60,3949,3950,3952],{"class":62,"line":93},[60,3951,3893],{"class":1847},[60,3953,2292],{"class":66},[60,3955,3956,3959,3961],{"class":62,"line":106},[60,3957,3958],{"class":66},"  inset -2px -2px 0 ",[60,3960,3430],{"class":1954},[60,3962,210],{"class":70},[60,3964,3965,3968,3971],{"class":62,"line":112},[60,3966,3967],{"class":66},"  inset 2px 2px 0 ",[60,3969,3970],{"class":166},"#fff",[60,3972,210],{"class":70},[60,3974,3975,3978,3980],{"class":62,"line":118},[60,3976,3977],{"class":66},"  inset -4px -4px 0 ",[60,3979,3899],{"class":1954},[60,3981,210],{"class":70},[60,3983,3984,3987],{"class":62,"line":124},[60,3985,3986],{"class":66},"  inset 4px 4px 0 ",[60,3988,3907],{"class":1954},[11,3990,3991,522],{},[15,3992,3993],{},"内凹（下沉）- 看起来压入的元素",[50,3995,3997],{"className":1838,"code":3996,"language":1840,"meta":55,"style":55},"border: 2px solid;\nborder-color: #808080 #ffffff #ffffff #808080; \u002F* 与外凸相反 *\u002F\nbox-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;\n",[57,3998,3999,4003,4024],{"__ignoreMap":55},[60,4000,4001],{"class":62,"line":63},[60,4002,3866],{"class":66},[60,4004,4005,4007,4009,4011,4014,4016,4018,4021],{"class":62,"line":80},[60,4006,3871],{"class":1847},[60,4008,3874],{"class":66},[60,4010,3430],{"class":1954},[60,4012,4013],{"class":166}," #ffffff",[60,4015,4013],{"class":166},[60,4017,3880],{"class":1954},[60,4019,4020],{"class":66},";",[60,4022,4023],{"class":313}," \u002F* 与外凸相反 *\u002F\n",[60,4025,4026,4028,4031,4033,4035,4038],{"class":62,"line":93},[60,4027,3893],{"class":1847},[60,4029,4030],{"class":66},": inset 1px 1px 0 ",[60,4032,3899],{"class":1954},[60,4034,1859],{"class":70},[60,4036,4037],{"class":66}," inset -1px -1px 0 ",[60,4039,3907],{"class":1954},[504,4041,4042,4045,4048],{},[507,4043,4044],{},"顶部和左侧边缘：灰色（#808080）",[507,4046,4047],{},"底部和右侧边缘：白色（#ffffff）",[507,4049,4050],{},"内部阴影创造凹陷外观",[11,4052,4053,4056],{},[15,4054,4055],{},"活跃\u002F按下状态","：\n当外凸元素被点击时，它变成内凹并向下和向右平移1px：",[50,4058,4060],{"className":1838,"code":4059,"language":1840,"meta":55,"style":55},"border-color: #808080 #ffffff #ffffff #808080;\nbox-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;\ntransform: translate(1px, 1px);\n",[57,4061,4062,4078,4092],{"__ignoreMap":55},[60,4063,4064,4066,4068,4070,4072,4074,4076],{"class":62,"line":63},[60,4065,3871],{"class":1847},[60,4067,3874],{"class":66},[60,4069,3430],{"class":1954},[60,4071,4013],{"class":166},[60,4073,4013],{"class":166},[60,4075,3880],{"class":1954},[60,4077,1965],{"class":66},[60,4079,4080,4082,4084,4086,4088,4090],{"class":62,"line":80},[60,4081,3893],{"class":1847},[60,4083,4030],{"class":66},[60,4085,3899],{"class":1954},[60,4087,1859],{"class":70},[60,4089,4037],{"class":66},[60,4091,3907],{"class":1954},[60,4093,4094,4097,4099,4102],{"class":62,"line":93},[60,4095,4096],{"class":66},"transform: translate(1px",[60,4098,1859],{"class":70},[60,4100,4101],{"class":66}," 1px",[60,4103,1928],{"class":70},[11,4105,4106,4109],{},[15,4107,4108],{},"Tailwind实现","：\n使用下划线代替空格：",[504,4111,4112,4118,4124],{},[507,4113,4114,4117],{},[57,4115,4116],{},"[border-color:#fff_#808080_#808080_#fff]"," 用于外凸",[507,4119,4120,4123],{},[57,4121,4122],{},"[border-color:#808080_#fff_#fff_#808080]"," 用于内凹",[507,4125,4126],{},[57,4127,4128],{},"[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]",[426,4130,4132],{"id":4131},"纹理与图案强制性","纹理与图案（强制性）",[11,4134,4135],{},"背景绝不能是平的。这对真实性至关重要。",[11,4137,4138,4141],{},[15,4139,4140],{},"90年代平铺图案","（主要技术）：",[50,4143,4145],{"className":1838,"code":4144,"language":1840,"meta":55,"style":55},"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",[57,4146,4147,4157,4163,4183,4200,4218,4234,4241],{"__ignoreMap":55},[60,4148,4149,4152,4154],{"class":62,"line":63},[60,4150,4151],{"class":1847},"background-color",[60,4153,3874],{"class":66},[60,4155,4156],{"class":1954},"#c0c0c0;\n",[60,4158,4159,4161],{"class":62,"line":80},[60,4160,2289],{"class":1847},[60,4162,2292],{"class":66},[60,4164,4165,4168,4170,4173,4176,4178,4181],{"class":62,"line":93},[60,4166,4167],{"class":66},"  linear-gradient(45deg",[60,4169,1859],{"class":70},[60,4171,4172],{"class":166}," #b8b8b8",[60,4174,4175],{"class":66}," 25%",[60,4177,1859],{"class":70},[60,4179,4180],{"class":66}," transparent 25%",[60,4182,2325],{"class":70},[60,4184,4185,4188,4190,4192,4194,4196,4198],{"class":62,"line":106},[60,4186,4187],{"class":66},"  linear-gradient(-45deg",[60,4189,1859],{"class":70},[60,4191,4172],{"class":166},[60,4193,4175],{"class":66},[60,4195,1859],{"class":70},[60,4197,4180],{"class":66},[60,4199,2325],{"class":70},[60,4201,4202,4204,4206,4209,4211,4213,4216],{"class":62,"line":112},[60,4203,4167],{"class":66},[60,4205,1859],{"class":70},[60,4207,4208],{"class":66}," transparent 75%",[60,4210,1859],{"class":70},[60,4212,4172],{"class":166},[60,4214,4215],{"class":66}," 75%",[60,4217,2325],{"class":70},[60,4219,4220,4222,4224,4226,4228,4230,4232],{"class":62,"line":118},[60,4221,4187],{"class":66},[60,4223,1859],{"class":70},[60,4225,4208],{"class":66},[60,4227,1859],{"class":70},[60,4229,4172],{"class":166},[60,4231,4215],{"class":66},[60,4233,1928],{"class":70},[60,4235,4236,4238],{"class":62,"line":124},[60,4237,2364],{"class":1847},[60,4239,4240],{"class":66},": 4px 4px;\n",[60,4242,4243,4246,4249,4251,4254,4256,4259,4261],{"class":62,"line":130},[60,4244,4245],{"class":1847},"background-position",[60,4247,4248],{"class":66},": 0 0",[60,4250,1859],{"class":70},[60,4252,4253],{"class":66}," 0 2px",[60,4255,1859],{"class":70},[60,4257,4258],{"class":66}," 2px -2px",[60,4260,1859],{"class":70},[60,4262,4263],{"class":66}," -2px 0px;\n",[11,4265,4266],{},"这创造出微妙的对角交叉线纹理，提供纹理而不会分散注意力。",[11,4268,4269,4272],{},[15,4270,4271],{},"施工警示条纹","（用于强调区域）：",[50,4274,4276],{"className":1838,"code":4275,"language":1840,"meta":55,"style":55},"background: repeating-linear-gradient(\n  45deg,\n  #ffff00,\n  #ffff00 10px,\n  #000000 10px,\n  #000000 20px\n);\n",[57,4277,4278,4282,4289,4296,4305,4314,4321],{"__ignoreMap":55},[60,4279,4280],{"class":62,"line":63},[60,4281,2190],{"class":66},[60,4283,4284,4287],{"class":62,"line":80},[60,4285,4286],{"class":66},"  45deg",[60,4288,210],{"class":70},[60,4290,4291,4294],{"class":62,"line":93},[60,4292,4293],{"class":166},"  #ffff00",[60,4295,210],{"class":70},[60,4297,4298,4300,4303],{"class":62,"line":106},[60,4299,4293],{"class":166},[60,4301,4302],{"class":66}," 10px",[60,4304,210],{"class":70},[60,4306,4307,4310,4312],{"class":62,"line":112},[60,4308,4309],{"class":1954},"  #000000",[60,4311,4302],{"class":66},[60,4313,210],{"class":70},[60,4315,4316,4318],{"class":62,"line":118},[60,4317,4309],{"class":1954},[60,4319,4320],{"class":66}," 20px\n",[60,4322,4323],{"class":62,"line":124},[60,4324,1928],{"class":70},[11,4326,4327],{},"正好10px黄色，10px黑色条纹，45度角。",[11,4329,4330,522],{},[15,4331,4332],{},"带凹槽效果的水平线（HR）",[50,4334,4336],{"className":1838,"code":4335,"language":1840,"meta":55,"style":55},"border: none;\nheight: 4px;\nbackground: linear-gradient(\n  to bottom,\n  #808080 0%, #808080 50%,\n  #ffffff 50%, #ffffff 100%\n);\n",[57,4337,4338,4343,4348,4353,4360,4377,4391],{"__ignoreMap":55},[60,4339,4340],{"class":62,"line":63},[60,4341,4342],{"class":66},"border: none;\n",[60,4344,4345],{"class":62,"line":80},[60,4346,4347],{"class":66},"height: 4px;\n",[60,4349,4350],{"class":62,"line":93},[60,4351,4352],{"class":66},"background: linear-gradient(\n",[60,4354,4355,4358],{"class":62,"line":106},[60,4356,4357],{"class":66},"  to bottom",[60,4359,210],{"class":70},[60,4361,4362,4365,4368,4370,4372,4375],{"class":62,"line":112},[60,4363,4364],{"class":1954},"  #808080",[60,4366,4367],{"class":66}," 0%",[60,4369,1859],{"class":70},[60,4371,3880],{"class":1954},[60,4373,4374],{"class":66}," 50%",[60,4376,210],{"class":70},[60,4378,4379,4382,4384,4386,4388],{"class":62,"line":118},[60,4380,4381],{"class":166},"  #ffffff",[60,4383,4374],{"class":66},[60,4385,1859],{"class":70},[60,4387,4013],{"class":166},[60,4389,4390],{"class":66}," 100%\n",[60,4392,4393],{"class":62,"line":124},[60,4394,1928],{"class":70},[11,4396,4397],{},"创造出经典的\"蚀刻\"分隔线外观。",[630,4399],{},[28,4401,4402],{"id":4402},"组件样式原则",[426,4404,2387],{"id":2387},[11,4406,4407,522],{},[15,4408,4409],{},"视觉要求",[504,4411,4412,4415,4418,4424,4427,4430],{},[507,4413,4414],{},"边框：2px，4值外凸颜色模式",[507,4416,4417],{},"背景：取决于变体的微妙渐变或纯色",[507,4419,4420,4421,4423],{},"文字：粗体、大写配合 ",[57,4422,1740],{},"，居中",[507,4425,4426],{},"内边距：垂直8px，水平16px（舒适的点击区域）",[507,4428,4429],{},"无圆角",[507,4431,4432],{},"无柔和投影",[11,4434,4435,522],{},[15,4436,4437],{},"状态过渡",[504,4439,4440,4446,4452,4458,4464],{},[507,4441,4442,4445],{},[15,4443,4444],{},"默认","：外凸斜面，悬停时背景稍亮",[507,4447,4448,4451],{},[15,4449,4450],{},"悬停","：背景变亮1-2个色阶，保持外凸",[507,4453,4454,4457],{},[15,4455,4456],{},"活跃\u002F按下","：内凸斜面（反转border-color），translate(1px, 1px)",[507,4459,4460,4463],{},[15,4461,4462],{},"焦点","：2px黑色虚线轮廓，2px偏移（Windows 95焦点环）",[507,4465,4466,4468,4469,4472],{},[15,4467,2687],{},"：无或即时（",[57,4470,4471],{},"transition-none"," 或最大50ms）- 无平滑缓动",[11,4474,4475,522],{},[15,4476,4477],{},"变体",[1200,4479,4480,4488,4496,4504,4512],{},[507,4481,4482,522,4485,4487],{},[15,4483,4484],{},"默认\u002F幽灵",[57,4486,3396],{}," 背景，黑色文字，外凸斜面",[507,4489,4490,522,4493,4495],{},[15,4491,4492],{},"点缀\u002F主要",[57,4494,3447],{}," 背景，白色文字，蓝色色调斜面边缘",[507,4497,4498,522,4501,4503],{},[15,4499,4500],{},"危险",[57,4502,3465],{}," 背景，白色文字，红色色调斜面边缘",[507,4505,4506,522,4509,4511],{},[15,4507,4508],{},"成功",[57,4510,3519],{},"（可读绿色）背景，白色文字，绿色色调斜面边缘",[507,4513,4514,4517],{},[15,4515,4516],{},"轮廓","：白色背景，黑色文字，外凸斜面",[11,4519,4520,4523],{},[15,4521,4522],{},"斜面颜色着色","：\n对于彩色按钮，将斜面边缘着色以匹配：",[504,4525,4526,4532,4538],{},[507,4527,4528,4529],{},"蓝色按钮：",[57,4530,4531],{},"border-color: #5555ff #000080 #000080 #5555ff",[507,4533,4534,4535],{},"红色按钮：",[57,4536,4537],{},"border-color: #ff5555 #800000 #800000 #ff5555",[507,4539,4540,4541],{},"绿色按钮：",[57,4542,4543],{},"border-color: #00ff00 #006600 #006600 #00ff00",[11,4545,4546,522],{},[15,4547,4548],{},"示例Tailwind类",[50,4550,4552],{"className":1838,"code":4551,"language":1840,"meta":55,"style":55},"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",[57,4553,4554,4559,4573,4578,4588,4598,4612,4617,4626,4641,4654,4663,4672,4681],{"__ignoreMap":55},[60,4555,4556],{"class":62,"line":63},[60,4557,4558],{"class":1847},"border-2\n",[60,4560,4561,4564,4567,4570],{"class":62,"line":80},[60,4562,4563],{"class":1847},"bg-",[60,4565,4566],{"class":66},"[#",[60,4568,4569],{"class":206},"c0c0c0",[60,4571,4572],{"class":66},"]\n",[60,4574,4575],{"class":62,"line":93},[60,4576,4577],{"class":1847},"text-black\n",[60,4579,4580,4583,4586],{"class":62,"line":106},[60,4581,4582],{"class":66},"[border-color:#fff_#808080_#808080_#",[60,4584,4585],{"class":206},"fff",[60,4587,4572],{"class":66},[60,4589,4590,4593,4596],{"class":62,"line":112},[60,4591,4592],{"class":66},"[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#",[60,4594,4595],{"class":206},"dfdfdf",[60,4597,4572],{"class":66},[60,4599,4600,4603,4605,4607,4610],{"class":62,"line":118},[60,4601,4602],{"class":66},"hover:",[60,4604,4563],{"class":1847},[60,4606,4566],{"class":66},[60,4608,4609],{"class":206},"d0d0d0",[60,4611,4572],{"class":66},[60,4613,4614],{"class":62,"line":124},[60,4615,4616],{"class":66},"active:[border-color:#808080_#fff_#fff_#808080]\n",[60,4618,4619,4622,4624],{"class":62,"line":130},[60,4620,4621],{"class":66},"active:[box-shadow:inset_1px_1px_0_#404040,inset_-1px_-1px_0_#",[60,4623,4595],{"class":206},[60,4625,4572],{"class":66},[60,4627,4628,4631,4634,4637,4639],{"class":62,"line":137},[60,4629,4630],{"class":66},"active:",[60,4632,4633],{"class":1847},"translate-x-",[60,4635,4636],{"class":66},"[1",[60,4638,1879],{"class":206},[60,4640,4572],{"class":66},[60,4642,4643,4645,4648,4650,4652],{"class":62,"line":150},[60,4644,4630],{"class":66},[60,4646,4647],{"class":1847},"translate-y-",[60,4649,4636],{"class":66},[60,4651,1879],{"class":206},[60,4653,4572],{"class":66},[60,4655,4656,4658,4660],{"class":62,"line":158},[60,4657,3197],{"class":1847},[60,4659,3200],{"class":66},[60,4661,4662],{"class":1847},"outline-dotted\n",[60,4664,4665,4667,4669],{"class":62,"line":163},[60,4666,3197],{"class":1847},[60,4668,3200],{"class":66},[60,4670,4671],{"class":1847},"outline-2\n",[60,4673,4674,4676,4678],{"class":62,"line":173},[60,4675,3197],{"class":1847},[60,4677,3200],{"class":66},[60,4679,4680],{"class":1847},"outline-black\n",[60,4682,4683,4685,4687],{"class":62,"line":178},[60,4684,3197],{"class":1847},[60,4686,3200],{"class":66},[60,4688,4689],{"class":1847},"outline-offset-2\n",[426,4691,2467],{"id":2466},[11,4693,4694,522],{},[15,4695,4696],{},"面板\u002F卡片结构",[504,4698,4699,4705,4712],{},[507,4700,4701,4702,4704],{},"容器：2px外凸斜面，",[57,4703,3396],{}," 背景",[507,4706,4707,4708,4711],{},"标题栏：渐变 ",[57,4709,4710],{},"linear-gradient(to right, #000080, #1084d0)","，白色文字，粗体，4-8px内边距",[507,4713,4714,4715,4717],{},"内容区域：内凸斜面（下沉），白色或 ",[57,4716,3624],{},"（黄色）背景",[11,4719,4720,4723],{},[15,4721,4722],{},"窗口风格卡片","（最独特）：",[50,4725,4728],{"className":4726,"code":4727,"language":1814},[1812],"外部容器：外凸斜面，灰色背景\n├── 标题栏：海军蓝渐变（#000080 → #1084d0），白色粗体文字\n└── 内容区域：内凸斜面，白色背景，内边距16px\n",[57,4729,4727],{"__ignoreMap":55},[11,4731,4732,4735],{},[15,4733,4734],{},"交替行背景","：\n对于表格状布局，在以下之间交替：",[504,4737,4738,4744],{},[507,4739,4740,4741,4743],{},"偶数行：",[57,4742,3553],{},"（白色）",[507,4745,4746,4747,4750],{},"奇数行：",[57,4748,4749],{},"#E8E8E8","（浅灰色）",[11,4752,4753],{},"这创造出经典的电子表格\u002F数据库外观。",[11,4755,4756,4759,4760,4763,4764,4767,4768,4770],{},[15,4757,4758],{},"单元格之间的边框","：\n使用 ",[57,4761,4762],{},"border-right-2"," 和 ",[57,4765,4766],{},"border-bottom-2"," 配合 ",[57,4769,3430],{}," 创造可见网格线。",[426,4772,4773],{"id":4773},"表单输入框",[11,4775,4776,522],{},[15,4777,4778],{},"输入字段",[504,4780,4781,4784,4787,4790,4793,4796],{},[507,4782,4783],{},"边框：2px内凹（下沉外观）",[507,4785,4786],{},"背景：白色",[507,4788,4789],{},"文字：黑色，14-16px",[507,4791,4792],{},"内边距：4-8px",[507,4794,4795],{},"焦点：2px黑色虚线轮廓，2px偏移",[507,4797,4798,4799,4801],{},"禁用：",[57,4800,3396],{}," 背景，50%不透明度",[11,4803,4804,522,4807,4809],{},[15,4805,4806],{},"占位符文字",[57,4808,3430],{},"（灰色）",[11,4811,4812,4815],{},[15,4813,4814],{},"选择下拉框","：与输入框相同的内凹样式",[11,4817,4818,4821],{},[15,4819,4820],{},"复选框\u002F单选","：90年代网页不常见（使用文字指示器或简单方块）",[426,4823,4825],{"id":4824},"链接超链接","链接（超链接）",[11,4827,4828],{},"90年代网络最具标志性的元素。",[11,4830,4831,522],{},[15,4832,4833],{},"状态",[504,4835,4836,4844,4852,4859],{},[507,4837,4838,522,4841,4843],{},[15,4839,4840],{},"未访问",[57,4842,3447],{},"（蓝色），总是有下划线",[507,4845,4846,522,4849,4851],{},[15,4847,4848],{},"已访问",[57,4850,3642],{},"（紫色）",[507,4853,4854,522,4856,4858],{},[15,4855,4450],{},[57,4857,3465],{},"（红色）",[507,4860,4861,4864,4865,4858],{},[15,4862,4863],{},"活跃","（点击时）：",[57,4866,3465],{},[11,4868,4869,522],{},[15,4870,4871],{},"规则",[504,4873,4874,4877,4880,4883],{},[507,4875,4876],{},"总是有下划线（绝不移除text-decoration）",[507,4878,4879],{},"颜色变化是即时的（无过渡）",[507,4881,4882],{},"悬停无背景",[507,4884,4885],{},"无额外样式效果",[11,4887,4888,522],{},[15,4889,4890],{},"示例",[50,4892,4895],{"className":4893,"code":4894,"language":1814},[1812],"text-[#0000ff]\nunderline\nhover:text-[#ff0000]\nvisited:text-[#800080]\n",[57,4896,4894],{"__ignoreMap":55},[426,4898,3033],{"id":3033},[11,4900,4901,522],{},[15,4902,1686],{},[504,4904,4905,4913,4916,4919,4922],{},[507,4906,3043,4907,2590,4909,4912],{},[57,4908,1828],{},[57,4910,4911],{},"stroke-[2px]","（粗、粗线条）",[507,4914,4915],{},"颜色：匹配章节的点缀色（蓝色、红色、绿色）",[507,4917,4918],{},"尺寸：24px（h-6 w-6）标准，32px用于功能",[507,4920,4921],{},"无圆角或柔和形状",[507,4923,4924],{},"考虑在图标容器周围添加2px黑色边框",[11,4926,4927,4929],{},[15,4928,3071],{},"：\n如果将图标放在彩色框中：",[504,4931,4932,4935,4938],{},[507,4933,4934],{},"框背景：纯亮色（#000080、#008080、#00AA00）",[507,4936,4937],{},"图标颜色：白色",[507,4939,4940],{},"框样式：外凸或带边框的平面",[630,4942],{},[28,4944,4945],{"id":4945},"布局原则",[426,4947,4948],{"id":4948},"页面结构",[11,4950,4951,522,4953,4956],{},[15,4952,2521],{},[57,4954,4955],{},"max-w-5xl"," (1024px) - 模仿800x600显示器内容区域带浏览器边框",[11,4958,4959,522],{},[15,4960,4961],{},"间距系统",[504,4963,4964,4967,4970,4973],{},[507,4965,4966],{},"基础单位：8px",[507,4968,4969],{},"元素内边距：16px（丰厚的内部间距）",[507,4971,4972],{},"元素外边距：8-16px（更紧的外部间距以获得密度）",[507,4974,4975],{},"章节内边距：垂直64px（py-16），水平16px（px-4）",[11,4977,4978,4981,4982,4985],{},[15,4979,4980],{},"章节分隔线","：\n使用粗边框（",[57,4983,4984],{},"border-b-4 border-[#808080]","）或在主要章节之间使用凹槽HR效果。",[11,4987,4988,4991],{},[15,4989,4990],{},"网格布局","：\n即使使用现代CSS Grid\u002FFlexbox，也要让它看起来像表格：",[504,4993,4994,5008,5010,5013],{},[507,4995,4996,4997,2590,5000,5003,5004,5007],{},"用 ",[57,4998,4999],{},"border-2",[57,5001,5002],{},"border-r-2","\u002F",[57,5005,5006],{},"border-b-2"," 可见单元格边框",[507,5009,4734],{},[507,5011,5012],{},"尽可能等列宽",[507,5014,5015],{},"密集、紧凑的间距",[426,5017,3077],{"id":3077},[11,5019,5020,5023],{},[15,5021,5022],{},"桌面端"," (768px+)：",[504,5025,5026,5029,5032],{},[507,5027,5028],{},"完整的类表格布局，并排列",[507,5030,5031],{},"多列网格（2-4列）",[507,5033,5034],{},"可见的复杂边框",[11,5036,5037,5040],{},[15,5038,5039],{},"平板端"," (640-768px)：",[504,5042,5043,5046,5049],{},[507,5044,5045],{},"最多减少到2列",[507,5047,5048],{},"保持所有视觉样式（斜面、边框）",[507,5050,5051],{},"如果需要，堆叠复杂表格",[11,5053,5054,5057],{},[15,5055,5056],{},"移动端"," (\u003C640px)：",[504,5059,5060,5063,5069,5072,5075],{},[507,5061,5062],{},"单列",[507,5064,5065,5068],{},[15,5066,5067],{},"保留斜面效果","（对风格至关重要）",[507,5070,5071],{},"跑马灯继续滚动",[507,5073,5074],{},"稍微缩小字体但保持粗体字重",[507,5076,5077],{},"复杂表格的水平滚动是可接受的（真实！）",[11,5079,5080,5083],{},[15,5081,5082],{},"重要","：美学比完美响应更重要。移动端体验稍微粗糙是可以的——这对那个时代是真实的。",[630,5085],{},[28,5087,5089],{"id":5088},"大胆因素非通用性","\"大胆因素\"（非通用性）",[11,5091,5092,5095],{},[15,5093,5094],{},"强制性元素"," - 这些必须存在，否则风格失败：",[426,5097,5098],{"id":5098},"跑马灯滚动文字",[11,5100,5101,5102,5105],{},"使用 ",[57,5103,5104],{},"react-fast-marquee"," 或纯CSS跑马灯用于：",[504,5107,5108,5111,5114],{},[507,5109,5110],{},"彩色文字的公告栏",[507,5112,5113],{},"推荐语轮播",[507,5115,5116],{},"\"突发新闻\"风格更新",[11,5118,5119,522],{},[15,5120,5121],{},"设置",[504,5123,5124,5127,5130],{},[507,5125,5126],{},"速度：30-60（中等速度）",[507,5128,5129],{},"无渐变淡出（gradient={false}）",[507,5131,5132],{},"不同颜色的多个span",[426,5134,5135],{"id":5135},"动画彩虹文字",[11,5137,5138],{},"CSS动画循环彩虹色用于首屏标题：",[50,5140,5142],{"className":1838,"code":5141,"language":1840,"meta":55,"style":55},"@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",[57,5143,5144,5153,5163,5173,5183,5193,5203,5213,5222,5226],{"__ignoreMap":55},[60,5145,5146,5148,5151],{"class":62,"line":63},[60,5147,2750],{"class":66},[60,5149,5150],{"class":197}," rainbow",[60,5152,2756],{"class":70},[60,5154,5155,5158,5161],{"class":62,"line":80},[60,5156,5157],{"class":70},"  0% { color: ",[60,5159,5160],{"class":206},"#ff0000",[60,5162,2767],{"class":70},[60,5164,5165,5168,5171],{"class":62,"line":93},[60,5166,5167],{"class":70},"  17% { color: ",[60,5169,5170],{"class":206},"#ff8000",[60,5172,2767],{"class":70},[60,5174,5175,5178,5181],{"class":62,"line":106},[60,5176,5177],{"class":70},"  33% { color: ",[60,5179,5180],{"class":206},"#ffff00",[60,5182,2767],{"class":70},[60,5184,5185,5188,5191],{"class":62,"line":112},[60,5186,5187],{"class":70},"  50% { color: ",[60,5189,5190],{"class":206},"#00ff00",[60,5192,2767],{"class":70},[60,5194,5195,5198,5201],{"class":62,"line":118},[60,5196,5197],{"class":70},"  67% { color: ",[60,5199,5200],{"class":206},"#0080ff",[60,5202,2767],{"class":70},[60,5204,5205,5208,5211],{"class":62,"line":124},[60,5206,5207],{"class":70},"  83% { color: ",[60,5209,5210],{"class":206},"#8000ff",[60,5212,2767],{"class":70},[60,5214,5215,5218,5220],{"class":62,"line":130},[60,5216,5217],{"class":70},"  100% { color: ",[60,5219,5160],{"class":206},[60,5221,2767],{"class":70},[60,5223,5224],{"class":62,"line":137},[60,5225,2772],{"class":70},[60,5227,5228],{"class":62,"line":150},[60,5229,5230],{"class":66},"animation: rainbow 4s linear infinite;\n",[11,5232,5233,5236],{},[15,5234,5235],{},"时长","：4秒，线性缓动（无平滑）",[426,5238,5239],{"id":5239},"所有元素斜面",[11,5241,5242,5243,5246],{},"每个交互元素和大多数容器必须有3D外凸\u002F内凹效果。这是",[15,5244,5245],{},"不可协商的","。",[426,5248,5250],{"id":5249},"正在建设中能量","\"正在建设中\"能量",[11,5252,5253],{},"添加小动画元素：",[504,5255,5256,5263,5266],{},[507,5257,5258,5259,5262],{},"闪烁的\"NEW!\"徽章（使用 ",[57,5260,5261],{},"animate-pulse"," 或CSS闪烁配合step-end）",[507,5264,5265],{},"脉动的CTA徽章",[507,5267,5268],{},"颜色循环装饰元素",[11,5270,5271,5274],{},[15,5272,5273],{},"脉动光晕动画","（用于徽章）：",[50,5276,5278],{"className":1838,"code":5277,"language":1840,"meta":55,"style":55},"@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",[57,5279,5280,5289,5294,5308,5344,5349,5354,5367,5406,5410,5414],{"__ignoreMap":55},[60,5281,5282,5284,5287],{"class":62,"line":63},[60,5283,2750],{"class":66},[60,5285,5286],{"class":197}," pulse-glow",[60,5288,2756],{"class":70},[60,5290,5291],{"class":62,"line":80},[60,5292,5293],{"class":70},"  0%, 100% {\n",[60,5295,5296,5299,5302,5304,5306],{"class":62,"line":93},[60,5297,5298],{"class":70},"    transform: ",[60,5300,5301],{"class":184},"scale",[60,5303,243],{"class":70},[60,5305,2883],{"class":206},[60,5307,1928],{"class":70},[60,5309,5310,5313,5315,5317,5319,5321,5324,5326,5329,5331,5333,5335,5337,5339,5342],{"class":62,"line":106},[60,5311,5312],{"class":70},"    box-shadow: ",[60,5314,2764],{"class":206},[60,5316,2110],{"class":206},[60,5318,2110],{"class":206},[60,5320,2110],{"class":206},[60,5322,5323],{"class":184}," rgba",[60,5325,243],{"class":70},[60,5327,5328],{"class":206},"255",[60,5330,886],{"class":70},[60,5332,2764],{"class":206},[60,5334,886],{"class":70},[60,5336,2764],{"class":206},[60,5338,886],{"class":70},[60,5340,5341],{"class":206},"0.7",[60,5343,1928],{"class":70},[60,5345,5346],{"class":62,"line":112},[60,5347,5348],{"class":70},"  }\n",[60,5350,5351],{"class":62,"line":118},[60,5352,5353],{"class":70},"  50% {\n",[60,5355,5356,5358,5360,5362,5365],{"class":62,"line":124},[60,5357,5298],{"class":70},[60,5359,5301],{"class":184},[60,5361,243],{"class":70},[60,5363,5364],{"class":206},"1.05",[60,5366,1928],{"class":70},[60,5368,5369,5371,5373,5375,5378,5380,5383,5385,5387,5389,5391,5393,5395,5397,5399,5401,5404],{"class":62,"line":130},[60,5370,5312],{"class":70},[60,5372,2764],{"class":206},[60,5374,2110],{"class":206},[60,5376,5377],{"class":206}," 10",[60,5379,1879],{"class":1847},[60,5381,5382],{"class":206}," 2",[60,5384,1879],{"class":1847},[60,5386,5323],{"class":184},[60,5388,243],{"class":70},[60,5390,5328],{"class":206},[60,5392,886],{"class":70},[60,5394,2764],{"class":206},[60,5396,886],{"class":70},[60,5398,2764],{"class":206},[60,5400,886],{"class":70},[60,5402,5403],{"class":206},"0.5",[60,5405,1928],{"class":70},[60,5407,5408],{"class":62,"line":137},[60,5409,5348],{"class":70},[60,5411,5412],{"class":62,"line":150},[60,5413,2772],{"class":70},[60,5415,5416,5419,5422,5424,5427,5430],{"class":62,"line":158},[60,5417,5418],{"class":66},"animation: ",[60,5420,5421],{"class":1847},"pulse-glow",[60,5423,2716],{"class":66},[60,5425,5426],{"class":206},".5s",[60,5428,5429],{"class":1847}," ease-in-out",[60,5431,5432],{"class":66}," infinite;\n",[426,5434,5436],{"id":5435},"水平线hr作为分隔线","水平线（HR）作为分隔线",[11,5438,5439],{},"在主要内容章节之间使用3D凹槽效果。这是90年代的标志性图案。",[426,5441,5442],{"id":5442},"访问计数器美学",[11,5444,5445],{},"至少将一个统计部分样式化为经典访问计数器：",[504,5447,5448,5451,5454,5457],{},[507,5449,5450],{},"黑色或海军蓝背景",[507,5452,5453],{},"绿色等宽文字（#00FF00）",[507,5455,5456],{},"斜面内凹框架",[507,5458,5459],{},"文字如 \"Visitors: 0001234 | Since 1995\"",[426,5461,5462],{"id":5462},"类表格视觉布局",[11,5464,5465],{},"即使使用现代CSS，也要创建HTML表格的外观：",[504,5467,5468,5475,5477],{},[507,5469,5470,5471,5474],{},"可见单元格边框（",[57,5472,5473],{},"border-2 border-[#808080]","）",[507,5476,4734],{},[507,5478,5479],{},"网格状精度",[426,5481,5482],{"id":5482},"标题栏窗口",[11,5484,5485],{},"卡片应该看起来像Windows 95应用程序窗口：",[504,5487,5488,5491,5494],{},[507,5489,5490],{},"海军蓝到蓝色渐变标题栏",[507,5492,5493],{},"标题中白色粗体文字",[507,5495,5496],{},"下方内凹内容区域",[426,5498,5499],{"id":5499},"装饰彩色方块",[11,5501,5502],{},"包含至少一个部分，其中有亮色方块网格（红色、绿色、蓝色、黄色、洋红、青色）带斜面边缘。这是纯粹的装饰性90年代过剩。",[426,5504,5505],{"id":5505},"施工条纹背景",[11,5507,5508],{},"在至少一个强调部分（如最终CTA）使用黄\u002F黑对角条纹图案。",[630,5510],{},[28,5512,5513],{"id":5513},"动画与运动",[11,5515,5516,5519],{},[15,5517,5518],{},"运动哲学","：快速、即时、数字化。没有有机缓动曲线。",[11,5521,5522,522],{},[15,5523,5524],{},"时间函数",[504,5526,5527,5537,5546,5555],{},[507,5528,5529,522,5532,2590,5534],{},[15,5530,5531],{},"即时状态变化",[57,5533,4471],{},[57,5535,5536],{},"duration-0",[507,5538,5539,522,5542,5545],{},[15,5540,5541],{},"颜色循环",[57,5543,5544],{},"linear","（无缓动）",[507,5547,5548,522,5551,5554],{},[15,5549,5550],{},"徽章\u002F脉动",[57,5552,5553],{},"ease-in-out","（用于注意效果可接受）",[507,5556,5557,522,5560,5562],{},[15,5558,5559],{},"按钮按下",[57,5561,4471],{}," 或最大50ms",[11,5564,5565,522],{},[15,5566,5235],{},[504,5568,5569,5572,5575,5578,5581],{},[507,5570,5571],{},"按钮按下：即时或50ms",[507,5573,5574],{},"悬停颜色变化：75ms或即时",[507,5576,5577],{},"彩虹文字循环：3-5秒",[507,5579,5580],{},"脉动光晕：1-2秒",[507,5582,5583],{},"跑马灯速度：中等（40-60px\u002F秒）",[11,5585,5586,522],{},[15,5587,5588],{},"关键动画",[1200,5590,5591,5597,5603,5609],{},[507,5592,5593,5596],{},[15,5594,5595],{},"彩虹文字","：4s线性无限循环穿过光谱",[507,5598,5599,5602],{},[15,5600,5601],{},"脉动光晕","：1.5s ease-in-out无限循环用于\"NEW!\"徽章",[507,5604,5605,5608],{},[15,5606,5607],{},"闪烁","（极少使用）：1s step-end无限（硬开\u002F关，非淡出）",[507,5610,5611,5614],{},[15,5612,5613],{},"跑马灯","：连续滚动，悬停暂停以获得可用性",[11,5616,5617,5620,5621,522],{},[15,5618,5619],{},"减少运动","：\n尊重 ",[57,5622,3251],{},[504,5624,5625,5628,5631],{},[507,5626,5627],{},"停止彩虹动画（回退到单一亮色）",[507,5629,5630],{},"停止跑马灯（显示静态或更慢滚动）",[507,5632,5633],{},"停止脉动徽章（静态配合亮色）",[630,5635],{},[28,5637,3176],{"id":3176},[11,5639,5640,522],{},[15,5641,5642],{},"颜色对比",[504,5644,5645,5648,5651,5654],{},[507,5646,5647],{},"银色（#C0C0C0）上的黑色（#000000）：7.5:1（AAA）",[507,5649,5650],{},"海军蓝（#000080）上的白色：8.6:1（AAA）",[507,5652,5653],{},"蓝色（#0000FF）上的白色：8.6:1（AAA）",[507,5655,5656],{},"调色板自然提供优秀的对比",[11,5658,5659,522],{},[15,5660,5661],{},"焦点状态",[504,5663,5664,5667,5670,5673],{},[507,5665,5666],{},"2px黑色虚线轮廓（Windows 95真实）",[507,5668,5669],{},"2px距元素偏移",[507,5671,5672],{},"高可见度，匹配美学",[507,5674,5675],{},[15,5676,5677],{},"绝不移除焦点指示器",[11,5679,5680,522],{},[15,5681,5682],{},"键盘导航",[504,5684,5685,5688,5691],{},[507,5686,5687],{},"所有交互元素必须可键盘访问",[507,5689,5690],{},"Tab顺序应遵循视觉顺序",[507,5692,5693],{},"Enter\u002FSpace上的按钮按下应显示活跃状态",[11,5695,5696,522],{},[15,5697,5698],{},"屏幕阅读器",[504,5700,5701,5704,5707,5710],{},[507,5702,5703],{},"跑马灯文字必须有静态替代或aria-live=\"polite\"",[507,5705,5706],{},"装饰动画元素应aria-hidden",[507,5708,5709],{},"彩色方块和装饰图案不需要替代文字",[507,5711,5712],{},"即使有表格外观，也要确保语义HTML",[11,5714,5715,5718,5719,5721],{},[15,5716,5717],{},"运动敏感","：\n提供 ",[57,5720,3251],{}," 替代：",[50,5723,5725],{"className":1838,"code":5724,"language":1840,"meta":55,"style":55},"@media (prefers-reduced-motion: reduce) {\n  .text-rainbow { animation: none; color: #ff0000; }\n  .animate-pulse-glow { animation: none; }\n  \u002F* 跑马灯由库或CSS处理 *\u002F\n}\n",[57,5726,5727,5735,5753,5764,5769],{"__ignoreMap":55},[60,5728,5729,5732],{"class":62,"line":63},[60,5730,5731],{"class":66},"@media",[60,5733,5734],{"class":70}," (prefers-reduced-motion: reduce) {\n",[60,5736,5737,5740,5743,5746,5749,5751],{"class":62,"line":80},[60,5738,5739],{"class":206},"  .text-rainbow",[60,5741,5742],{"class":70}," { animation: ",[60,5744,5745],{"class":206},"none",[60,5747,5748],{"class":70},"; color: ",[60,5750,5160],{"class":206},[60,5752,2767],{"class":70},[60,5754,5755,5758,5760,5762],{"class":62,"line":93},[60,5756,5757],{"class":206},"  .animate-pulse-glow",[60,5759,5742],{"class":70},[60,5761,5745],{"class":206},[60,5763,2767],{"class":70},[60,5765,5766],{"class":62,"line":106},[60,5767,5768],{"class":313},"  \u002F* 跑马灯由库或CSS处理 *\u002F\n",[60,5770,5771],{"class":62,"line":112},[60,5772,2772],{"class":70},[630,5774],{},[28,5776,5778],{"id":5777},"反模式避免什么","反模式（避免什么）",[426,5780,5782],{"id":5781},"视觉禁忌","视觉禁忌：",[1200,5784,5785,5790,5795,5812,5818,5824,5830,5836,5842,5848],{},[507,5786,5787,5789],{},[15,5788,4429],{}," - 连1px都不行。零。总是。",[507,5791,5792,5794],{},[15,5793,4432],{}," - 仅使用内阴影用于斜面",[507,5796,5797,5800,5801],{},[15,5798,5799],{},"无渐变","，除了：\n",[504,5802,5803,5806,5809],{},[507,5804,5805],{},"标题栏渐变（海军蓝到蓝色）",[507,5807,5808],{},"背景图案（条纹、平铺）",[507,5810,5811],{},"微妙按钮背景",[507,5813,5814,5817],{},[15,5815,5816],{},"无半透明叠加"," - 颜色总是不透明的（深色背景上白色\u002F80用于次要文字除外）",[507,5819,5820,5823],{},[15,5821,5822],{},"无细字体"," - 一切都是粗体或黑色字重",[507,5825,5826,5829],{},[15,5827,5828],{},"无微妙灰色"," - 只有 #000000、#808080、#C0C0C0、#FFFFFF、#E8E8E8",[507,5831,5832,5835],{},[15,5833,5834],{},"无平滑缓动"," - 使用线性或即时过渡",[507,5837,5838,5841],{},[15,5839,5840],{},"绝不移除链接下划线"," - 总是可见",[507,5843,5844,5847],{},[15,5845,5846],{},"无现代极简间距"," - 密集，不通风",[507,5849,5850,5853],{},[15,5851,5852],{},"不要尝试\"现代化\"美学"," - 拥抱俗气",[426,5855,5857],{"id":5856},"交互禁忌","交互禁忌：",[1200,5859,5860,5866,5872,5878,5884],{},[507,5861,5862,5865],{},[15,5863,5864],{},"不要使用缩放元素的悬停状态","（除了脉动徽章的1.05）",[507,5867,5868,5871],{},[15,5869,5870],{},"不要使用淡出过渡"," - 变化应该即时或线性",[507,5873,5874,5877],{},[15,5875,5876],{},"不要把跑马灯文字做成基本内容"," - 保持装饰性\u002F补充性",[507,5879,5880,5883],{},[15,5881,5882],{},"不要覆盖浏览器默认选择颜色"," - 实际上，要：使用 #000080 背景，白色文字",[507,5885,5886,5889],{},[15,5887,5888],{},"不要使用浮动操作按钮"," 或现代UI模式",[426,5891,5893],{"id":5892},"内容禁忌","内容禁忌：",[1200,5895,5896,5902,5908],{},[507,5897,5898,5901],{},[15,5899,5900],{},"不要使用不适合时代的占位文字","（不要有\"lorem ipsum\"）",[507,5903,5904,5907],{},[15,5905,5906],{},"不要在装饰文字中引用现代技术","（保持通用或90年代主题）",[507,5909,5910,5913,5914],{},[15,5911,5912],{},"不要微妙"," - 这种风格是",[15,5915,5916],{},"响亮而自豪的",[630,5918],{},[28,5920,5921],{"id":5921},"实现说明",[426,5923,5925],{"id":5924},"tailwind任意值","Tailwind任意值",[11,5927,5928],{},"你会经常使用这些：",[50,5930,5933],{"className":5931,"code":5932,"language":1814},[1812],"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",[57,5934,5932],{"__ignoreMap":55},[11,5936,5937],{},"注意：在任意值中使用下划线代替空格。",[426,5939,5941],{"id":5940},"需要自定义css","需要自定义CSS",[11,5943,5944],{},"有些效果需要CSS文件：",[504,5946,5947,5952,5958,5964],{},[507,5948,5949,5951],{},[57,5950,2750],{}," 用于彩虹、脉动光晕、闪烁",[507,5953,5954,5957],{},[57,5955,5956],{},".hr-groove"," 用于水平线效果",[507,5959,5960,5963],{},[57,5961,5962],{},".bg-90s-tile"," 用于平铺背景图案",[507,5965,5966,5969],{},[57,5967,5968],{},".bg-construction"," 用于警示条纹",[426,5971,5972],{"id":5972},"依赖",[504,5974,5975,5980],{},[507,5976,5977,5979],{},[15,5978,5104],{},"：真实滚动文字必备",[507,5981,5982],{},"考虑为可重用性创建CSS变量用于复杂的box-shadow值",[426,5984,5985],{"id":5985},"颜色分层策略",[1200,5987,5988,5994,6000,6006,6012],{},[507,5989,5990,5993],{},[15,5991,5992],{},"基础","：平铺的 #C0C0C0 背景",[507,5995,5996,5999],{},[15,5997,5998],{},"表面","：白色或灰色（#E8E8E8）面板带斜面",[507,6001,6002,6005],{},[15,6003,6004],{},"点缀表面","：海军蓝标题栏、彩色功能框",[507,6007,6008,6011],{},[15,6009,6010],{},"前景","：黑色文字、彩色图标",[507,6013,6014,6017],{},[15,6015,6016],{},"高亮","：黄色徽章、红色\"NEW!\"标签、彩虹文字",[630,6019],{},[28,6021,6022],{"id":6022},"标志性视觉检查清单",[11,6024,6025],{},"在考虑设计完成之前，验证这些存在：",[504,6027,6030,6038,6044,6050,6056,6062,6068,6074,6080,6086,6092,6098,6104,6110,6116],{"className":6028},[6029],"contains-task-list",[507,6031,6034,6037],{"className":6032},[6033],"task-list-item",[1590,6035],{"disabled":133,"type":6036},"checkbox"," 至少一个跑马灯滚动元素配合彩色文字",[507,6039,6041,6043],{"className":6040},[6033],[1590,6042],{"disabled":133,"type":6036}," 首屏或主要标题上的彩虹动画文字",[507,6045,6047,6049],{"className":6046},[6033],[1590,6048],{"disabled":133,"type":6036}," 所有按钮都有3D外凸斜面配合正确的border-color语法",[507,6051,6053,6055],{"className":6052},[6033],[1590,6054],{"disabled":133,"type":6036}," 至少一个卡片有Windows 95标题栏渐变",[507,6057,6059,6061],{"className":6058},[6033],[1590,6060],{"disabled":133,"type":6036}," 主体上可见的平铺背景图案",[507,6063,6065,6067],{"className":6064},[6033],[1590,6066],{"disabled":133,"type":6036}," 超链接是蓝色\u002F下划线，悬停时变红",[507,6069,6071,6073],{"className":6070},[6033],[1590,6072],{"disabled":133,"type":6036}," 至少一个部分有交替行背景",[507,6075,6077,6079],{"className":6076},[6033],[1590,6078],{"disabled":133,"type":6036}," 主要章节之间的水平凹槽线分隔线",[507,6081,6083,6085],{"className":6082},[6033],[1590,6084],{"disabled":133,"type":6036}," 等宽绿色文字的\"访问计数器\"风格统计显示",[507,6087,6089,6091],{"className":6088},[6033],[1590,6090],{"disabled":133,"type":6036}," 至少一个\"NEW!\"或\"HOT!\"徽章配合脉动动画",[507,6093,6095,6097],{"className":6094},[6033],[1590,6096],{"disabled":133,"type":6036}," 至少一个部分有施工条纹背景",[507,6099,6101,6103],{"className":6100},[6033],[1590,6102],{"disabled":133,"type":6036}," 所有交互元素都有虚线焦点轮廓",[507,6105,6107,6109],{"className":6106},[6033],[1590,6108],{"disabled":133,"type":6036}," 活跃按钮显示按下状态（内凹 + 平移）",[507,6111,6113,6115],{"className":6112},[6033],[1590,6114],{"disabled":133,"type":6036}," 图标有2px描边宽度",[507,6117,6119,6121],{"className":6118},[6033],[1590,6120],{"disabled":133,"type":6036}," 任何地方都没有圆角实例",[630,6123],{},[28,6125,6126],{"id":6126},"秘诀",[11,6128,6129,6130,6133],{},"让这种风格奏效的是",[15,6131,6132],{},"对真实性的承诺胜过现代化","。诱惑将是\"清理它\"或\"让它更专业\"。抵制这个。丑陋就是美。冲突的颜色、密集的布局、激进的动画——这些不是bug，它们是特性。",[11,6135,6136],{},"经历过1997年的人看着这个应该立即感觉被带回去。设计应该如此真实，以至于与现代网站并列时几乎令人吃惊。这种对比就是重点。",[11,6138,6139],{},"拥抱俗气。庆祝混乱。欢迎来到1997年。",[1258,6141,6142],{},"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":55,"searchDepth":93,"depth":93,"links":6144},[6145,6146,6152,6159,6163,6175,6176,6177,6182,6188,6189],{"id":1320,"depth":80,"text":1320},{"id":3358,"depth":80,"text":3359,"children":6147},[6148,6149,6150,6151],{"id":3362,"depth":93,"text":3363},{"id":3693,"depth":93,"text":3693},{"id":1808,"depth":93,"text":1808},{"id":4131,"depth":93,"text":4132},{"id":4402,"depth":80,"text":4402,"children":6153},[6154,6155,6156,6157,6158],{"id":2387,"depth":93,"text":2387},{"id":2466,"depth":93,"text":2467},{"id":4773,"depth":93,"text":4773},{"id":4824,"depth":93,"text":4825},{"id":3033,"depth":93,"text":3033},{"id":4945,"depth":80,"text":4945,"children":6160},[6161,6162],{"id":4948,"depth":93,"text":4948},{"id":3077,"depth":93,"text":3077},{"id":5088,"depth":80,"text":5089,"children":6164},[6165,6166,6167,6168,6169,6170,6171,6172,6173,6174],{"id":5098,"depth":93,"text":5098},{"id":5135,"depth":93,"text":5135},{"id":5239,"depth":93,"text":5239},{"id":5249,"depth":93,"text":5250},{"id":5435,"depth":93,"text":5436},{"id":5442,"depth":93,"text":5442},{"id":5462,"depth":93,"text":5462},{"id":5482,"depth":93,"text":5482},{"id":5499,"depth":93,"text":5499},{"id":5505,"depth":93,"text":5505},{"id":5513,"depth":80,"text":5513},{"id":3176,"depth":80,"text":3176},{"id":5777,"depth":80,"text":5778,"children":6178},[6179,6180,6181],{"id":5781,"depth":93,"text":5782},{"id":5856,"depth":93,"text":5857},{"id":5892,"depth":93,"text":5893},{"id":5921,"depth":80,"text":5921,"children":6183},[6184,6185,6186,6187],{"id":5924,"depth":93,"text":5925},{"id":5940,"depth":93,"text":5941},{"id":5972,"depth":93,"text":5972},{"id":5985,"depth":93,"text":5985},{"id":6022,"depth":80,"text":6022},{"id":6126,"depth":80,"text":6126},"充满怀旧气息的 90 年代美学，搭配 Windows 95 的斜边用户界面、系统字体、鲜艳的主色调、滚动字幕以及极致的视觉混乱感。",{},"\u002Fblogs\u002Fretro-90s-design-system",{"title":3328,"description":6190},"blogs\u002Fretro-90s-design-system",[3322,3323,6196],"复古风格","xAwMbnSXysWee_p789DCB_FVyayscCh5zpN5DtIB0zE",1780651451816]