[{"data":1,"prerenderedAt":1223},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fbase-styles":199,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fbase-styles-surround":1218},[4,9,41,111,116,132],{"title":5,"path":6,"stem":7,"icon":8},"准备","\u002Fdocs\u002Fpreparation","1.docs\u002F1.preparation","i-lucide-rocket",{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":40},"用户手册","i-lucide-book-open","\u002Fdocs\u002Fgetting-started","1.docs\u002F2.getting-started",[15,20,25,30,35],{"title":16,"path":17,"stem":18,"icon":19},"认识 UDhold","\u002Fdocs\u002Fgetting-started\u002Fwhat-is-udhold","1.docs\u002F2.getting-started\u002F1.what-is-udhold","i-lucide-info",{"title":21,"path":22,"stem":23,"icon":24},"核心概念","\u002Fdocs\u002Fgetting-started\u002Fcore-concepts","1.docs\u002F2.getting-started\u002F2.core-concepts","i-lucide-lightbulb",{"title":26,"path":27,"stem":28,"icon":29},"主面板布局","\u002Fdocs\u002Fgetting-started\u002Fmain-interface","1.docs\u002F2.getting-started\u002F3.main-interface","i-lucide-monitor",{"title":31,"path":32,"stem":33,"icon":34},"快速上手 5 分钟","\u002Fdocs\u002Fgetting-started\u002Fquick-tour","1.docs\u002F2.getting-started\u002F4.quick-tour","i-lucide-zap",{"title":36,"path":37,"stem":38,"icon":39},"常用快捷键","\u002Fdocs\u002Fgetting-started\u002Fshortcut-keys","1.docs\u002F2.getting-started\u002F5.shortcut-keys","i-lucide-keyboard",false,{"title":42,"path":43,"stem":44,"children":45,"icon":110},"核心功能","\u002Fdocs\u002Ffeatures","1.docs\u002F3.features\u002F1.index",[46,49,53,58,63,67,71,76,81,86,91,96,101,106],{"title":47,"path":43,"stem":44,"icon":48},"功能总览","i-lucide-layout-grid",{"title":50,"path":51,"stem":52,"icon":39},"快捷键","\u002Fdocs\u002Ffeatures\u002Fshortcuts","1.docs\u002F3.features\u002F10.shortcuts",{"title":54,"path":55,"stem":56,"icon":57},"AI 模型","\u002Fdocs\u002Ffeatures\u002Fai-models","1.docs\u002F3.features\u002F16.ai-models","i-lucide-bot",{"title":59,"path":60,"stem":61,"icon":62},"AI 助手","\u002Fdocs\u002Ffeatures\u002Fai-helper","1.docs\u002F3.features\u002F17.ai-helper","i-lucide-bot-message-square",{"title":64,"path":65,"stem":66,"icon":19},"关于","\u002Fdocs\u002Ffeatures\u002Fabout","1.docs\u002F3.features\u002F19.about",{"title":68,"path":69,"stem":70,"icon":29},"系统命令","\u002Fdocs\u002Ffeatures\u002Fsystem","1.docs\u002F3.features\u002F2.system",{"title":72,"path":73,"stem":74,"icon":75},"调试日志","\u002Fdocs\u002Ffeatures\u002Fdebug","1.docs\u002F3.features\u002F20.debug","i-lucide-terminal",{"title":77,"path":78,"stem":79,"icon":80},"通用设置","\u002Fdocs\u002Ffeatures\u002Fsettings","1.docs\u002F3.features\u002F21.settings","i-mdi-cog-outline",{"title":82,"path":83,"stem":84,"icon":85},"文件资源管理器","\u002Fdocs\u002Ffeatures\u002Ffiles","1.docs\u002F3.features\u002F3.files","i-lucide-folder-tree",{"title":87,"path":88,"stem":89,"icon":90},"文件树","\u002Fdocs\u002Ffeatures\u002Ffiles-tree","1.docs\u002F3.features\u002F4.files-tree","i-lucide-list-tree",{"title":92,"path":93,"stem":94,"icon":95},"文件预览","\u002Fdocs\u002Ffeatures\u002Fpreview","1.docs\u002F3.features\u002F5.preview","i-lucide-eye",{"title":97,"path":98,"stem":99,"icon":100},"本地启动","\u002Fdocs\u002Ffeatures\u002Flocal-launch","1.docs\u002F3.features\u002F6.local-launch","i-lucide-app-window",{"title":102,"path":103,"stem":104,"icon":105},"插件中心","\u002Fdocs\u002Ffeatures\u002Fplugins","1.docs\u002F3.features\u002F7.plugins","i-lucide-puzzle",{"title":107,"path":108,"stem":109,"icon":8},"快速启动","\u002Fdocs\u002Ffeatures\u002Fquick-start","1.docs\u002F3.features\u002F8.quick-start","i-lucide-star",{"title":112,"path":113,"stem":114,"icon":115},"主题","\u002Fdocs\u002Fthemes","1.docs\u002F4.themes","i-lucide-palette",{"title":117,"icon":118,"path":119,"stem":120,"children":121,"page":40},"相关协议","i-lucide-scroll","\u002Fdocs\u002Flegal","1.docs\u002F5.legal",[122,127],{"title":123,"path":124,"stem":125,"icon":126},"用户须知","\u002Fdocs\u002Flegal\u002Fuser-notice","1.docs\u002F5.legal\u002F1.user-notice","i-lucide-file-text",{"title":128,"path":129,"stem":130,"icon":131},"隐私协议","\u002Fdocs\u002Flegal\u002Fprivacy","1.docs\u002F5.legal\u002F2.privacy","i-lucide-shield-check",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":40},"开发指南","i-lucide-code","\u002Fdocs\u002Fdevelopment","1.docs\u002F6.development",[138,156,190],{"title":139,"icon":8,"path":140,"stem":141,"children":142,"page":40},"快速开始","\u002Fdocs\u002Fdevelopment\u002Fquick-start","1.docs\u002F6.development\u002F1.quick-start",[143,147,151],{"title":144,"path":145,"stem":146,"icon":19},"介绍","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Fintroduction","1.docs\u002F6.development\u002F1.quick-start\u002F1.introduction",{"title":148,"path":149,"stem":150,"icon":34},"快速上手","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Fgetting-started","1.docs\u002F6.development\u002F1.quick-start\u002F2.getting-started",{"title":152,"path":153,"stem":154,"icon":155},"常见问题","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Ffaq","1.docs\u002F6.development\u002F1.quick-start\u002F3.faq","i-lucide-circle-help",{"title":157,"icon":115,"path":158,"stem":159,"children":160,"page":40},"设计系统","\u002Fdocs\u002Fdevelopment\u002Fdesign-system","1.docs\u002F6.development\u002F2.design-system",[161,166,171,176,181,186],{"title":162,"path":163,"stem":164,"icon":165},"设计令牌","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftokens","1.docs\u002F6.development\u002F2.design-system\u002F1.tokens","i-lucide-pipette",{"title":167,"path":168,"stem":169,"icon":170},"主题与明暗模式","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftheming","1.docs\u002F6.development\u002F2.design-system\u002F2.theming","i-lucide-sun-moon",{"title":172,"path":173,"stem":174,"icon":175},"基础样式类","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fbase-styles","1.docs\u002F6.development\u002F2.design-system\u002F3.base-styles","i-lucide-layout-template",{"title":177,"path":178,"stem":179,"icon":180},"图标体系","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ficons","1.docs\u002F6.development\u002F2.design-system\u002F4.icons","i-lucide-shapes",{"title":182,"path":183,"stem":184,"icon":185},"通用组件","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fcomponents","1.docs\u002F6.development\u002F2.design-system\u002F5.components","i-lucide-component",{"title":187,"path":188,"stem":189,"icon":48},"场景组件","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fscene-components","1.docs\u002F6.development\u002F2.design-system\u002F6.scene-components",{"title":191,"icon":57,"path":192,"stem":193,"children":194,"page":40},"AI","\u002Fdocs\u002Fdevelopment\u002Fai","1.docs\u002F6.development\u002F3.ai",[195],{"title":196,"path":197,"stem":198,"icon":126},"LLMs.txt","\u002Fdocs\u002Fdevelopment\u002Fai\u002Fllms-txt","1.docs\u002F6.development\u002F3.ai\u002F1.llms-txt",{"id":200,"title":172,"body":201,"description":1211,"extension":1212,"meta":1213,"navigation":1214,"path":173,"rawbody":1215,"seo":1216,"stem":174,"__hash__":1217},"docs\u002F1.docs\u002F6.development\u002F2.design-system\u002F3.base-styles.md",{"type":202,"value":203,"toc":1204},"minimark",[204,212,216,426,496,499,739,796,799,889,932,935,941,1003,1007,1014,1177,1193,1200],[205,206,207,211],"p",{},[208,209,210],"code",{},"global.css"," 除了设计令牌，还内置了一组高频控件的样式类。轻量插件直接写 class 就有合格的控件外观，不必引组件库、不必手写样式；重度界面则可以与组件库配合使用。",[213,214,215],"h2",{"id":215},"按钮",[217,218,223],"pre",{"className":219,"code":220,"language":221,"meta":222,"style":222},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"btn\">默认按钮\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-solid\">主操作\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-danger\">危险操作\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-sm\">小尺寸\u003C\u002Fbutton>\n\n\u003Cbutton class=\"icon-btn\" title=\"复制\">\n  \u003Cspan class=\"i-z-copy w-4 h-4\" \u002F>\n\u003C\u002Fbutton>\n","html","",[208,224,225,269,298,327,356,363,395,417],{"__ignoreMap":222},[226,227,230,234,238,242,245,248,252,254,257,261,264,266],"span",{"class":228,"line":229},"line",1,[226,231,233],{"class":232},"sMK4o","\u003C",[226,235,237],{"class":236},"swJcz","button",[226,239,241],{"class":240},"spNyl"," class",[226,243,244],{"class":232},"=",[226,246,247],{"class":232},"\"",[226,249,251],{"class":250},"sfazB","btn",[226,253,247],{"class":232},[226,255,256],{"class":232},">",[226,258,260],{"class":259},"sTEyZ","默认按钮",[226,262,263],{"class":232},"\u003C\u002F",[226,265,237],{"class":236},[226,267,268],{"class":232},">\n",[226,270,272,274,276,278,280,282,285,287,289,292,294,296],{"class":228,"line":271},2,[226,273,233],{"class":232},[226,275,237],{"class":236},[226,277,241],{"class":240},[226,279,244],{"class":232},[226,281,247],{"class":232},[226,283,284],{"class":250},"btn btn-solid",[226,286,247],{"class":232},[226,288,256],{"class":232},[226,290,291],{"class":259},"主操作",[226,293,263],{"class":232},[226,295,237],{"class":236},[226,297,268],{"class":232},[226,299,301,303,305,307,309,311,314,316,318,321,323,325],{"class":228,"line":300},3,[226,302,233],{"class":232},[226,304,237],{"class":236},[226,306,241],{"class":240},[226,308,244],{"class":232},[226,310,247],{"class":232},[226,312,313],{"class":250},"btn btn-danger",[226,315,247],{"class":232},[226,317,256],{"class":232},[226,319,320],{"class":259},"危险操作",[226,322,263],{"class":232},[226,324,237],{"class":236},[226,326,268],{"class":232},[226,328,330,332,334,336,338,340,343,345,347,350,352,354],{"class":228,"line":329},4,[226,331,233],{"class":232},[226,333,237],{"class":236},[226,335,241],{"class":240},[226,337,244],{"class":232},[226,339,247],{"class":232},[226,341,342],{"class":250},"btn btn-sm",[226,344,247],{"class":232},[226,346,256],{"class":232},[226,348,349],{"class":259},"小尺寸",[226,351,263],{"class":232},[226,353,237],{"class":236},[226,355,268],{"class":232},[226,357,359],{"class":228,"line":358},5,[226,360,362],{"emptyLinePlaceholder":361},true,"\n",[226,364,366,368,370,372,374,376,379,381,384,386,388,391,393],{"class":228,"line":365},6,[226,367,233],{"class":232},[226,369,237],{"class":236},[226,371,241],{"class":240},[226,373,244],{"class":232},[226,375,247],{"class":232},[226,377,378],{"class":250},"icon-btn",[226,380,247],{"class":232},[226,382,383],{"class":240}," title",[226,385,244],{"class":232},[226,387,247],{"class":232},[226,389,390],{"class":250},"复制",[226,392,247],{"class":232},[226,394,268],{"class":232},[226,396,398,401,403,405,407,409,412,414],{"class":228,"line":397},7,[226,399,400],{"class":232},"  \u003C",[226,402,226],{"class":236},[226,404,241],{"class":240},[226,406,244],{"class":232},[226,408,247],{"class":232},[226,410,411],{"class":250},"i-z-copy w-4 h-4",[226,413,247],{"class":232},[226,415,416],{"class":232}," \u002F>\n",[226,418,420,422,424],{"class":228,"line":419},8,[226,421,263],{"class":232},[226,423,237],{"class":236},[226,425,268],{"class":232},[427,428,429,442],"table",{},[430,431,432],"thead",{},[433,434,435,439],"tr",{},[436,437,438],"th",{},"类",[436,440,441],{},"说明",[443,444,445,456,466,476,486],"tbody",{},[433,446,447,453],{},[448,449,450],"td",{},[208,451,452],{},".btn",[448,454,455],{},"中性按钮：内嵌底色 + 发丝线描边，hover 反馈",[433,457,458,463],{},[448,459,460],{},[208,461,462],{},".btn-solid",[448,464,465],{},"主色实心，一屏最多出现一个（主操作）",[433,467,468,473],{},[448,469,470],{},[208,471,472],{},".btn-danger",[448,474,475],{},"危险色实心，用于删除等不可逆操作",[433,477,478,483],{},[448,479,480],{},[208,481,482],{},".btn-sm",[448,484,485],{},"小尺寸修饰，可与上面任意组合",[433,487,488,493],{},[448,489,490],{},[208,491,492],{},".icon-btn",[448,494,495],{},"28×28 透明图标按钮，配图标类使用",[213,497,498],{"id":498},"表单",[217,500,502],{"className":219,"code":501,"language":221,"meta":222,"style":222},"\u003Cinput class=\"input\" placeholder=\"请输入内容\" \u002F>\n\n\u003Cselect class=\"select\">\n  \u003Coption value=\"a\">选项 A\u003C\u002Foption>\n  \u003Coption value=\"b\">选项 B\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003Clabel class=\"flex items-center gap-2 cursor-pointer\">\n  \u003Cinput type=\"checkbox\" class=\"toggle\" v-model=\"enabled\" \u002F>\n  \u003Cspan class=\"toggle-slider\" \u002F>\n  \u003Cspan>开机自动同步\u003C\u002Fspan>\n\u003C\u002Flabel>\n",[208,503,504,535,539,558,588,616,624,628,648,692,712,730],{"__ignoreMap":222},[226,505,506,508,511,513,515,517,519,521,524,526,528,531,533],{"class":228,"line":229},[226,507,233],{"class":232},[226,509,510],{"class":236},"input",[226,512,241],{"class":240},[226,514,244],{"class":232},[226,516,247],{"class":232},[226,518,510],{"class":250},[226,520,247],{"class":232},[226,522,523],{"class":240}," placeholder",[226,525,244],{"class":232},[226,527,247],{"class":232},[226,529,530],{"class":250},"请输入内容",[226,532,247],{"class":232},[226,534,416],{"class":232},[226,536,537],{"class":228,"line":271},[226,538,362],{"emptyLinePlaceholder":361},[226,540,541,543,546,548,550,552,554,556],{"class":228,"line":300},[226,542,233],{"class":232},[226,544,545],{"class":236},"select",[226,547,241],{"class":240},[226,549,244],{"class":232},[226,551,247],{"class":232},[226,553,545],{"class":250},[226,555,247],{"class":232},[226,557,268],{"class":232},[226,559,560,562,565,568,570,572,575,577,579,582,584,586],{"class":228,"line":329},[226,561,400],{"class":232},[226,563,564],{"class":236},"option",[226,566,567],{"class":240}," value",[226,569,244],{"class":232},[226,571,247],{"class":232},[226,573,574],{"class":250},"a",[226,576,247],{"class":232},[226,578,256],{"class":232},[226,580,581],{"class":259},"选项 A",[226,583,263],{"class":232},[226,585,564],{"class":236},[226,587,268],{"class":232},[226,589,590,592,594,596,598,600,603,605,607,610,612,614],{"class":228,"line":358},[226,591,400],{"class":232},[226,593,564],{"class":236},[226,595,567],{"class":240},[226,597,244],{"class":232},[226,599,247],{"class":232},[226,601,602],{"class":250},"b",[226,604,247],{"class":232},[226,606,256],{"class":232},[226,608,609],{"class":259},"选项 B",[226,611,263],{"class":232},[226,613,564],{"class":236},[226,615,268],{"class":232},[226,617,618,620,622],{"class":228,"line":365},[226,619,263],{"class":232},[226,621,545],{"class":236},[226,623,268],{"class":232},[226,625,626],{"class":228,"line":397},[226,627,362],{"emptyLinePlaceholder":361},[226,629,630,632,635,637,639,641,644,646],{"class":228,"line":419},[226,631,233],{"class":232},[226,633,634],{"class":236},"label",[226,636,241],{"class":240},[226,638,244],{"class":232},[226,640,247],{"class":232},[226,642,643],{"class":250},"flex items-center gap-2 cursor-pointer",[226,645,247],{"class":232},[226,647,268],{"class":232},[226,649,651,653,655,658,660,662,665,667,669,671,673,676,678,681,683,685,688,690],{"class":228,"line":650},9,[226,652,400],{"class":232},[226,654,510],{"class":236},[226,656,657],{"class":240}," type",[226,659,244],{"class":232},[226,661,247],{"class":232},[226,663,664],{"class":250},"checkbox",[226,666,247],{"class":232},[226,668,241],{"class":240},[226,670,244],{"class":232},[226,672,247],{"class":232},[226,674,675],{"class":250},"toggle",[226,677,247],{"class":232},[226,679,680],{"class":240}," v-model",[226,682,244],{"class":232},[226,684,247],{"class":232},[226,686,687],{"class":250},"enabled",[226,689,247],{"class":232},[226,691,416],{"class":232},[226,693,695,697,699,701,703,705,708,710],{"class":228,"line":694},10,[226,696,400],{"class":232},[226,698,226],{"class":236},[226,700,241],{"class":240},[226,702,244],{"class":232},[226,704,247],{"class":232},[226,706,707],{"class":250},"toggle-slider",[226,709,247],{"class":232},[226,711,416],{"class":232},[226,713,715,717,719,721,724,726,728],{"class":228,"line":714},11,[226,716,400],{"class":232},[226,718,226],{"class":236},[226,720,256],{"class":232},[226,722,723],{"class":259},"开机自动同步",[226,725,263],{"class":232},[226,727,226],{"class":236},[226,729,268],{"class":232},[226,731,733,735,737],{"class":228,"line":732},12,[226,734,263],{"class":232},[226,736,634],{"class":236},[226,738,268],{"class":232},[427,740,741,749],{},[430,742,743],{},[433,744,745,747],{},[436,746,438],{},[436,748,441],{},[443,750,751,769,782],{},[433,752,753,758],{},[448,754,755],{},[208,756,757],{},".input",[448,759,760,761,764,765,768],{},"文本输入框：",[208,762,763],{},"--field"," 底色、聚焦时主色光圈（",[208,766,767],{},"--focus-ring","）",[433,770,771,776],{},[448,772,773],{},[208,774,775],{},".select",[448,777,778,779,781],{},"下拉框：与 ",[208,780,757],{}," 同构，原生弹出面板跟随系统明暗",[433,783,784,793],{},[448,785,786,789,790],{},[208,787,788],{},".toggle"," + ",[208,791,792],{},".toggle-slider",[448,794,795],{},"开关：checkbox 驱动，选中态主色。两个元素必须成对出现",[213,797,798],{"id":798},"卡片与浮层",[217,800,802],{"className":219,"code":801,"language":221,"meta":222,"style":222},"\u003Cdiv class=\"card p-4\">\n  \u003Ch3 class=\"text-sm font-medium\">卡片标题\u003C\u002Fh3>\n  \u003Cp class=\"text-xs text-[var(--ink-2)] mt-1\">卡片说明文字\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[208,803,804,824,853,881],{"__ignoreMap":222},[226,805,806,808,811,813,815,817,820,822],{"class":228,"line":229},[226,807,233],{"class":232},[226,809,810],{"class":236},"div",[226,812,241],{"class":240},[226,814,244],{"class":232},[226,816,247],{"class":232},[226,818,819],{"class":250},"card p-4",[226,821,247],{"class":232},[226,823,268],{"class":232},[226,825,826,828,831,833,835,837,840,842,844,847,849,851],{"class":228,"line":271},[226,827,400],{"class":232},[226,829,830],{"class":236},"h3",[226,832,241],{"class":240},[226,834,244],{"class":232},[226,836,247],{"class":232},[226,838,839],{"class":250},"text-sm font-medium",[226,841,247],{"class":232},[226,843,256],{"class":232},[226,845,846],{"class":259},"卡片标题",[226,848,263],{"class":232},[226,850,830],{"class":236},[226,852,268],{"class":232},[226,854,855,857,859,861,863,865,868,870,872,875,877,879],{"class":228,"line":300},[226,856,400],{"class":232},[226,858,205],{"class":236},[226,860,241],{"class":240},[226,862,244],{"class":232},[226,864,247],{"class":232},[226,866,867],{"class":250},"text-xs text-[var(--ink-2)] mt-1",[226,869,247],{"class":232},[226,871,256],{"class":232},[226,873,874],{"class":259},"卡片说明文字",[226,876,263],{"class":232},[226,878,205],{"class":236},[226,880,268],{"class":232},[226,882,883,885,887],{"class":228,"line":329},[226,884,263],{"class":232},[226,886,810],{"class":236},[226,888,268],{"class":232},[427,890,891,899],{},[430,892,893],{},[433,894,895,897],{},[436,896,438],{},[436,898,441],{},[443,900,901,918],{},[433,902,903,908],{},[448,904,905],{},[208,906,907],{},".card",[448,909,910,913,914,917],{},[208,911,912],{},"--surface"," 底色 + ",[208,915,916],{},"--radius-lg"," 圆角，内容区最常用的容器",[433,919,920,929],{},[448,921,922,925,926],{},[208,923,924],{},".floating-shell"," \u002F ",[208,927,928],{},".floating-panel",[448,930,931],{},"无边框浮窗形态：大圆角 + 四周留边投影，做脱离宿主的悬浮小窗时使用",[213,933,934],{"id":934},"全局细节",[205,936,937,938,940],{},"这些是 ",[208,939,210],{}," 顺手处理好的事，知道即可，不用自己做：",[942,943,944,966,982,988,997],"ul",{},[945,946,947,951,952,954,955,954,958,961,962,965],"li",{},[948,949,950],"strong",{},"高度链","：",[208,953,221],{},"、",[208,956,957],{},"body",[208,959,960],{},"#app"," 均为 ",[208,963,964],{},"height: 100%","，插件根布局可以直接用百分比高度撑满。",[945,967,968,951,971,973,974,977,978,981],{},[948,969,970],{},"正文排版",[208,972,957],{}," 上设定 14px \u002F 1.5 倍行距 \u002F ",[208,975,976],{},"--ink"," 文字色 \u002F ",[208,979,980],{},"--bg-color"," 底色。",[945,983,984,987],{},[948,985,986],{},"文本选中","：选中态是主色 22% 透明度，不再是默认的浏览器蓝。",[945,989,990,951,993,996],{},[948,991,992],{},"键盘焦点",[208,994,995],{},":focus-visible"," 显主色焦点环（鼠标点击不显示，键盘导航才显示）。",[945,998,999,1002],{},[948,1000,1001],{},"滚动条","：6px 窄滚动条，圆角 thumb，hover 加深，track 透明——与宿主完全一致。",[213,1004,1006],{"id":1005},"与-unocss-配合","与 UnoCSS 配合",[205,1008,1009,1010,1013],{},"工程里配好 UnoCSS 后（见",[574,1011,177],{"href":1012},".\u002Ficons","的完整配置），原子类与这组样式类可以混用：",[217,1015,1017],{"className":219,"code":1016,"language":221,"meta":222,"style":222},"\u003Cdiv class=\"card p-4 flex items-center justify-between\">\n  \u003Cdiv>\n    \u003Cp class=\"text-sm text-[var(--ink)]\">自动保存\u003C\u002Fp>\n    \u003Cp class=\"text-xs text-[var(--ink-2)] mt-0.5\">每 30 秒同步一次\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cinput type=\"checkbox\" class=\"toggle\" v-model=\"autoSave\" \u002F>\n  \u003Cspan class=\"toggle-slider\" \u002F>\n\u003C\u002Fdiv>\n",[208,1018,1019,1038,1046,1075,1103,1112,1151,1169],{"__ignoreMap":222},[226,1020,1021,1023,1025,1027,1029,1031,1034,1036],{"class":228,"line":229},[226,1022,233],{"class":232},[226,1024,810],{"class":236},[226,1026,241],{"class":240},[226,1028,244],{"class":232},[226,1030,247],{"class":232},[226,1032,1033],{"class":250},"card p-4 flex items-center justify-between",[226,1035,247],{"class":232},[226,1037,268],{"class":232},[226,1039,1040,1042,1044],{"class":228,"line":271},[226,1041,400],{"class":232},[226,1043,810],{"class":236},[226,1045,268],{"class":232},[226,1047,1048,1051,1053,1055,1057,1059,1062,1064,1066,1069,1071,1073],{"class":228,"line":300},[226,1049,1050],{"class":232},"    \u003C",[226,1052,205],{"class":236},[226,1054,241],{"class":240},[226,1056,244],{"class":232},[226,1058,247],{"class":232},[226,1060,1061],{"class":250},"text-sm text-[var(--ink)]",[226,1063,247],{"class":232},[226,1065,256],{"class":232},[226,1067,1068],{"class":259},"自动保存",[226,1070,263],{"class":232},[226,1072,205],{"class":236},[226,1074,268],{"class":232},[226,1076,1077,1079,1081,1083,1085,1087,1090,1092,1094,1097,1099,1101],{"class":228,"line":329},[226,1078,1050],{"class":232},[226,1080,205],{"class":236},[226,1082,241],{"class":240},[226,1084,244],{"class":232},[226,1086,247],{"class":232},[226,1088,1089],{"class":250},"text-xs text-[var(--ink-2)] mt-0.5",[226,1091,247],{"class":232},[226,1093,256],{"class":232},[226,1095,1096],{"class":259},"每 30 秒同步一次",[226,1098,263],{"class":232},[226,1100,205],{"class":236},[226,1102,268],{"class":232},[226,1104,1105,1108,1110],{"class":228,"line":358},[226,1106,1107],{"class":232},"  \u003C\u002F",[226,1109,810],{"class":236},[226,1111,268],{"class":232},[226,1113,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1147,1149],{"class":228,"line":365},[226,1115,400],{"class":232},[226,1117,510],{"class":236},[226,1119,657],{"class":240},[226,1121,244],{"class":232},[226,1123,247],{"class":232},[226,1125,664],{"class":250},[226,1127,247],{"class":232},[226,1129,241],{"class":240},[226,1131,244],{"class":232},[226,1133,247],{"class":232},[226,1135,675],{"class":250},[226,1137,247],{"class":232},[226,1139,680],{"class":240},[226,1141,244],{"class":232},[226,1143,247],{"class":232},[226,1145,1146],{"class":250},"autoSave",[226,1148,247],{"class":232},[226,1150,416],{"class":232},[226,1152,1153,1155,1157,1159,1161,1163,1165,1167],{"class":228,"line":397},[226,1154,400],{"class":232},[226,1156,226],{"class":236},[226,1158,241],{"class":240},[226,1160,244],{"class":232},[226,1162,247],{"class":232},[226,1164,707],{"class":250},[226,1166,247],{"class":232},[226,1168,416],{"class":232},[226,1170,1171,1173,1175],{"class":228,"line":419},[226,1172,263],{"class":232},[226,1174,810],{"class":236},[226,1176,268],{"class":232},[1178,1179,1181],"callout",{"color":1180,"icon":19},"primary",[205,1182,1183,1185,1186,1188,1189,1192],{},[208,1184,788],{}," 与 ",[208,1187,792],{}," 必须相邻（样式选择器是 ",[208,1190,1191],{},"input:checked + .toggle-slider","），中间插别的元素开关就不动了。",[205,1194,1195,1196,1199],{},"控件之外还需要更复杂的组件（消息提示、确认弹窗、快捷键录制……）？看",[574,1197,182],{"href":1198},".\u002Fcomponents","。",[1201,1202,1203],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":222,"searchDepth":271,"depth":271,"links":1205},[1206,1207,1208,1209,1210],{"id":215,"depth":271,"text":215},{"id":498,"depth":271,"text":498},{"id":798,"depth":271,"text":798},{"id":934,"depth":271,"text":934},{"id":1005,"depth":271,"text":1006},"开箱即用的按钮、输入框、开关、卡片样式类，引一个 CSS 文件就有全套控件底子。","md",{},{"icon":175},"---\ntitle: 基础样式类\ndescription: 开箱即用的按钮、输入框、开关、卡片样式类，引一个 CSS 文件就有全套控件底子。\nnavigation:\n  icon: i-lucide-layout-template\n---\n\n`global.css` 除了设计令牌，还内置了一组高频控件的样式类。轻量插件直接写 class 就有合格的控件外观，不必引组件库、不必手写样式；重度界面则可以与组件库配合使用。\n\n## 按钮\n\n```html\n\u003Cbutton class=\"btn\">默认按钮\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-solid\">主操作\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-danger\">危险操作\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-sm\">小尺寸\u003C\u002Fbutton>\n\n\u003Cbutton class=\"icon-btn\" title=\"复制\">\n  \u003Cspan class=\"i-z-copy w-4 h-4\" \u002F>\n\u003C\u002Fbutton>\n```\n\n| 类 | 说明 |\n|----|------|\n| `.btn` | 中性按钮：内嵌底色 + 发丝线描边，hover 反馈 |\n| `.btn-solid` | 主色实心，一屏最多出现一个（主操作） |\n| `.btn-danger` | 危险色实心，用于删除等不可逆操作 |\n| `.btn-sm` | 小尺寸修饰，可与上面任意组合 |\n| `.icon-btn` | 28×28 透明图标按钮，配图标类使用 |\n\n## 表单\n\n```html\n\u003Cinput class=\"input\" placeholder=\"请输入内容\" \u002F>\n\n\u003Cselect class=\"select\">\n  \u003Coption value=\"a\">选项 A\u003C\u002Foption>\n  \u003Coption value=\"b\">选项 B\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003Clabel class=\"flex items-center gap-2 cursor-pointer\">\n  \u003Cinput type=\"checkbox\" class=\"toggle\" v-model=\"enabled\" \u002F>\n  \u003Cspan class=\"toggle-slider\" \u002F>\n  \u003Cspan>开机自动同步\u003C\u002Fspan>\n\u003C\u002Flabel>\n```\n\n| 类 | 说明 |\n|----|------|\n| `.input` | 文本输入框：`--field` 底色、聚焦时主色光圈（`--focus-ring`） |\n| `.select` | 下拉框：与 `.input` 同构，原生弹出面板跟随系统明暗 |\n| `.toggle` + `.toggle-slider` | 开关：checkbox 驱动，选中态主色。两个元素必须成对出现 |\n\n## 卡片与浮层\n\n```html\n\u003Cdiv class=\"card p-4\">\n  \u003Ch3 class=\"text-sm font-medium\">卡片标题\u003C\u002Fh3>\n  \u003Cp class=\"text-xs text-[var(--ink-2)] mt-1\">卡片说明文字\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n| 类 | 说明 |\n|----|------|\n| `.card` | `--surface` 底色 + `--radius-lg` 圆角，内容区最常用的容器 |\n| `.floating-shell` \u002F `.floating-panel` | 无边框浮窗形态：大圆角 + 四周留边投影，做脱离宿主的悬浮小窗时使用 |\n\n## 全局细节\n\n这些是 `global.css` 顺手处理好的事，知道即可，不用自己做：\n\n- **高度链**：`html`、`body`、`#app` 均为 `height: 100%`，插件根布局可以直接用百分比高度撑满。\n- **正文排版**：`body` 上设定 14px \u002F 1.5 倍行距 \u002F `--ink` 文字色 \u002F `--bg-color` 底色。\n- **文本选中**：选中态是主色 22% 透明度，不再是默认的浏览器蓝。\n- **键盘焦点**：`:focus-visible` 显主色焦点环（鼠标点击不显示，键盘导航才显示）。\n- **滚动条**：6px 窄滚动条，圆角 thumb，hover 加深，track 透明——与宿主完全一致。\n\n## 与 UnoCSS 配合\n\n工程里配好 UnoCSS 后（见[图标体系](.\u002Ficons)的完整配置），原子类与这组样式类可以混用：\n\n```html\n\u003Cdiv class=\"card p-4 flex items-center justify-between\">\n  \u003Cdiv>\n    \u003Cp class=\"text-sm text-[var(--ink)]\">自动保存\u003C\u002Fp>\n    \u003Cp class=\"text-xs text-[var(--ink-2)] mt-0.5\">每 30 秒同步一次\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cinput type=\"checkbox\" class=\"toggle\" v-model=\"autoSave\" \u002F>\n  \u003Cspan class=\"toggle-slider\" \u002F>\n\u003C\u002Fdiv>\n```\n\n::callout{icon=\"i-lucide-info\" color=\"primary\"}\n`.toggle` 与 `.toggle-slider` 必须相邻（样式选择器是 `input:checked + .toggle-slider`），中间插别的元素开关就不动了。\n::\n\n控件之外还需要更复杂的组件（消息提示、确认弹窗、快捷键录制……）？看[通用组件](.\u002Fcomponents)。\n",{"title":172,"description":1211},"gDmLEY8t8rzK1mn4kgsxizgMXig9wsVg1E3nq3zeJKc",[1219,1221],{"title":167,"path":168,"stem":169,"description":1220,"icon":170},"插件如何跟随宿主的明暗主题、主题色与窗口透明度，三步接入与底层机制。",{"title":177,"path":178,"stem":179,"description":1222,"icon":180},"本地 SVG 图标集（z 集合）、UnoCSS 图标配置与图标跟随主题的做法。",1793010253449]