[{"data":1,"prerenderedAt":1465},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fscene-components":199,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fscene-components-surround":1460},[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":187,"body":201,"description":1453,"extension":1454,"meta":1455,"navigation":1456,"path":188,"rawbody":1457,"seo":1458,"stem":189,"__hash__":1459},"docs\u002F1.docs\u002F6.development\u002F2.design-system\u002F6.scene-components.md",{"type":202,"value":203,"toc":1445},"minimark",[204,208,213,221,373,384,449,463,467,470,744,802,806,809,973,977,980,1376,1389,1392,1403,1427,1430,1433,1441],[205,206,207],"p",{},"场景组件（beautiful 系列）解决特定页面形态的问题：等待、检索、代码展示、多栏导航。它们与宿主的视觉语言同源，用对了插件气质立刻对味。",[209,210,212],"h2",{"id":211},"loadingstate加载态","LoadingState：加载态",[205,214,215,216,220],{},"像素风格的加载动画，三形态可选手式，内置耗时计时与减少动态偏好（",[217,218,219],"code",{},"prefers-reduced-motion","）适配：",[222,223,228],"pre",{"className":224,"code":225,"language":226,"meta":227,"style":227},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { LoadingState } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLoadingState label=\"正在解析文件\" variant=\"Dots\" \u002F>\n  \u003C!-- variant: 'Drive'（波浪）| 'Dots'（圆点）| 'Orbit'（环绕） -->\n\u003C\u002Ftemplate>\n","vue","",[217,229,230,265,294,304,311,321,357,364],{"__ignoreMap":227},[231,232,235,239,243,247,250,253,256,260,262],"span",{"class":233,"line":234},"line",1,[231,236,238],{"class":237},"sMK4o","\u003C",[231,240,242],{"class":241},"swJcz","script",[231,244,246],{"class":245},"spNyl"," setup",[231,248,249],{"class":245}," lang",[231,251,252],{"class":237},"=",[231,254,255],{"class":237},"\"",[231,257,259],{"class":258},"sfazB","ts",[231,261,255],{"class":237},[231,263,264],{"class":237},">\n",[231,266,268,272,275,279,282,285,288,291],{"class":233,"line":267},2,[231,269,271],{"class":270},"s7zQu","import",[231,273,274],{"class":237}," {",[231,276,278],{"class":277},"sTEyZ"," LoadingState",[231,280,281],{"class":237}," }",[231,283,284],{"class":270}," from",[231,286,287],{"class":237}," '",[231,289,290],{"class":258},"@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful",[231,292,293],{"class":237},"'\n",[231,295,297,300,302],{"class":233,"line":296},3,[231,298,299],{"class":237},"\u003C\u002F",[231,301,242],{"class":241},[231,303,264],{"class":237},[231,305,307],{"class":233,"line":306},4,[231,308,310],{"emptyLinePlaceholder":309},true,"\n",[231,312,314,316,319],{"class":233,"line":313},5,[231,315,238],{"class":237},[231,317,318],{"class":241},"template",[231,320,264],{"class":237},[231,322,324,327,330,333,335,337,340,342,345,347,349,352,354],{"class":233,"line":323},6,[231,325,326],{"class":237},"  \u003C",[231,328,329],{"class":241},"LoadingState",[231,331,332],{"class":245}," label",[231,334,252],{"class":237},[231,336,255],{"class":237},[231,338,339],{"class":258},"正在解析文件",[231,341,255],{"class":237},[231,343,344],{"class":245}," variant",[231,346,252],{"class":237},[231,348,255],{"class":237},[231,350,351],{"class":258},"Dots",[231,353,255],{"class":237},[231,355,356],{"class":237}," \u002F>\n",[231,358,360],{"class":233,"line":359},7,[231,361,363],{"class":362},"sHwdD","  \u003C!-- variant: 'Drive'（波浪）| 'Dots'（圆点）| 'Orbit'（环绕） -->\n",[231,365,367,369,371],{"class":233,"line":366},8,[231,368,299],{"class":237},[231,370,318],{"class":241},[231,372,264],{"class":237},[205,374,375,379,380,383],{},[376,377,378],"strong",{},"与 plugin.json 联动","：清单里的 ",[217,381,382],{},"loading"," 字段声明的就是这套视觉——",[222,385,389],{"className":386,"code":387,"language":388,"meta":227,"style":227},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{ \"loading\": { \"variant\": \"Drive\", \"label\": \"加载中\" } }\n","json",[217,390,391],{"__ignoreMap":227},[231,392,393,396,399,401,403,406,408,410,414,416,418,420,423,425,428,430,433,435,437,439,442,444,446],{"class":233,"line":234},[231,394,395],{"class":237},"{",[231,397,398],{"class":237}," \"",[231,400,382],{"class":245},[231,402,255],{"class":237},[231,404,405],{"class":237},":",[231,407,274],{"class":237},[231,409,398],{"class":237},[231,411,413],{"class":412},"sBMFI","variant",[231,415,255],{"class":237},[231,417,405],{"class":237},[231,419,398],{"class":237},[231,421,422],{"class":258},"Drive",[231,424,255],{"class":237},[231,426,427],{"class":237},",",[231,429,398],{"class":237},[231,431,432],{"class":412},"label",[231,434,255],{"class":237},[231,436,405],{"class":237},[231,438,398],{"class":237},[231,440,441],{"class":258},"加载中",[231,443,255],{"class":237},[231,445,281],{"class":237},[231,447,448],{"class":237}," }\n",[205,450,451,452,455,456,458,459,462],{},"它解决的是 webview 创建到插件挂载 ",[217,453,454],{},"#app"," 之间的白屏期：宿主直接注入纯 CSS 版骨架，插件 mount 后自动消失，零接入成本。",[217,457,329],{}," 组件则用于插件",[376,460,461],{},"运行中","的异步等待场景（请求返回前的占位、切换数据源的过渡），两者互补。",[209,464,466],{"id":465},"searchlist搜索列表","SearchList：搜索列表",[205,468,469],{},"带搜索框、空态、清空按钮的列表容器，输入即过滤（包含匹配），选中高亮动画：",[222,471,473],{"className":224,"code":472,"language":226,"meta":227,"style":227},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SearchList } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\nconst items = ['计算器', '颜色工具', 'JSON 工具', '正则编辑器']\nconst picked = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSearchList\n    :items=\"items\"\n    placeholder=\"搜索工具…\"\n    :preview-count=\"5\"\n    empty-title=\"未找到结果\"\n    empty-hint=\"调整关键词重试\"\n    @select=\"picked = $event\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[217,474,475,495,514,533,537,588,609,617,621,630,638,654,669,684,699,714,729,735],{"__ignoreMap":227},[231,476,477,479,481,483,485,487,489,491,493],{"class":233,"line":234},[231,478,238],{"class":237},[231,480,242],{"class":241},[231,482,246],{"class":245},[231,484,249],{"class":245},[231,486,252],{"class":237},[231,488,255],{"class":237},[231,490,259],{"class":258},[231,492,255],{"class":237},[231,494,264],{"class":237},[231,496,497,499,501,504,506,508,510,512],{"class":233,"line":267},[231,498,271],{"class":270},[231,500,274],{"class":237},[231,502,503],{"class":277}," ref",[231,505,281],{"class":237},[231,507,284],{"class":270},[231,509,287],{"class":237},[231,511,226],{"class":258},[231,513,293],{"class":237},[231,515,516,518,520,523,525,527,529,531],{"class":233,"line":296},[231,517,271],{"class":270},[231,519,274],{"class":237},[231,521,522],{"class":277}," SearchList",[231,524,281],{"class":237},[231,526,284],{"class":270},[231,528,287],{"class":237},[231,530,290],{"class":258},[231,532,293],{"class":237},[231,534,535],{"class":233,"line":306},[231,536,310],{"emptyLinePlaceholder":309},[231,538,539,542,545,547,550,553,556,558,560,562,565,567,569,571,574,576,578,580,583,585],{"class":233,"line":313},[231,540,541],{"class":245},"const",[231,543,544],{"class":277}," items ",[231,546,252],{"class":237},[231,548,549],{"class":277}," [",[231,551,552],{"class":237},"'",[231,554,555],{"class":258},"计算器",[231,557,552],{"class":237},[231,559,427],{"class":237},[231,561,287],{"class":237},[231,563,564],{"class":258},"颜色工具",[231,566,552],{"class":237},[231,568,427],{"class":237},[231,570,287],{"class":237},[231,572,573],{"class":258},"JSON 工具",[231,575,552],{"class":237},[231,577,427],{"class":237},[231,579,287],{"class":237},[231,581,582],{"class":258},"正则编辑器",[231,584,552],{"class":237},[231,586,587],{"class":277},"]\n",[231,589,590,592,595,597,600,603,606],{"class":233,"line":323},[231,591,541],{"class":245},[231,593,594],{"class":277}," picked ",[231,596,252],{"class":237},[231,598,503],{"class":599},"s2Zo4",[231,601,602],{"class":277},"(",[231,604,605],{"class":237},"''",[231,607,608],{"class":277},")\n",[231,610,611,613,615],{"class":233,"line":359},[231,612,299],{"class":237},[231,614,242],{"class":241},[231,616,264],{"class":237},[231,618,619],{"class":233,"line":366},[231,620,310],{"emptyLinePlaceholder":309},[231,622,624,626,628],{"class":233,"line":623},9,[231,625,238],{"class":237},[231,627,318],{"class":241},[231,629,264],{"class":237},[231,631,633,635],{"class":233,"line":632},10,[231,634,326],{"class":237},[231,636,637],{"class":241},"SearchList\n",[231,639,641,644,646,648,651],{"class":233,"line":640},11,[231,642,643],{"class":245},"    :items",[231,645,252],{"class":237},[231,647,255],{"class":237},[231,649,650],{"class":258},"items",[231,652,653],{"class":237},"\"\n",[231,655,657,660,662,664,667],{"class":233,"line":656},12,[231,658,659],{"class":245},"    placeholder",[231,661,252],{"class":237},[231,663,255],{"class":237},[231,665,666],{"class":258},"搜索工具…",[231,668,653],{"class":237},[231,670,672,675,677,679,682],{"class":233,"line":671},13,[231,673,674],{"class":245},"    :preview-count",[231,676,252],{"class":237},[231,678,255],{"class":237},[231,680,681],{"class":258},"5",[231,683,653],{"class":237},[231,685,687,690,692,694,697],{"class":233,"line":686},14,[231,688,689],{"class":245},"    empty-title",[231,691,252],{"class":237},[231,693,255],{"class":237},[231,695,696],{"class":258},"未找到结果",[231,698,653],{"class":237},[231,700,702,705,707,709,712],{"class":233,"line":701},15,[231,703,704],{"class":245},"    empty-hint",[231,706,252],{"class":237},[231,708,255],{"class":237},[231,710,711],{"class":258},"调整关键词重试",[231,713,653],{"class":237},[231,715,717,720,722,724,727],{"class":233,"line":716},16,[231,718,719],{"class":245},"    @select",[231,721,252],{"class":237},[231,723,255],{"class":237},[231,725,726],{"class":258},"picked = $event",[231,728,653],{"class":237},[231,730,732],{"class":233,"line":731},17,[231,733,734],{"class":237},"  \u002F>\n",[231,736,738,740,742],{"class":233,"line":737},18,[231,739,299],{"class":237},[231,741,318],{"class":241},[231,743,264],{"class":237},[745,746,747,760],"table",{},[748,749,750],"thead",{},[751,752,753,757],"tr",{},[754,755,756],"th",{},"参数",[754,758,759],{},"说明",[761,762,763,777,787],"tbody",{},[751,764,765,770],{},[766,767,768],"td",{},[217,769,650],{},[766,771,772,773,776],{},"字符串数组（复杂对象先用 ",[217,774,775],{},"weightedSearch"," 过滤出标签再传入）",[751,778,779,784],{},[766,780,781],{},[217,782,783],{},"previewCount",[766,785,786],{},"无输入时默认展示的条数",[751,788,789,792],{},[766,790,791],{},"空态",[766,793,794,795,798,799],{},"自定义 ",[217,796,797],{},"empty-title"," \u002F ",[217,800,801],{},"empty-hint",[209,803,805],{"id":804},"codeblock代码块","CodeBlock：代码块",[205,807,808],{},"行号 + 复制按钮的代码展示，支持流式输出（AI 场景）：",[222,810,812],{"className":224,"code":811,"language":226,"meta":227,"style":227},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { CodeBlock } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\nconst code = ref('const answer = 42')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock :code=\"code\" filename=\"answer.ts\" language=\"ts\" \u002F>\n  \u003C!-- 流式：传 visibleLines 数字，只渲染前 N 行并尾随光标 -->\n\u003C\u002Ftemplate>\n",[217,813,814,834,852,871,875,897,905,909,917,960,965],{"__ignoreMap":227},[231,815,816,818,820,822,824,826,828,830,832],{"class":233,"line":234},[231,817,238],{"class":237},[231,819,242],{"class":241},[231,821,246],{"class":245},[231,823,249],{"class":245},[231,825,252],{"class":237},[231,827,255],{"class":237},[231,829,259],{"class":258},[231,831,255],{"class":237},[231,833,264],{"class":237},[231,835,836,838,840,842,844,846,848,850],{"class":233,"line":267},[231,837,271],{"class":270},[231,839,274],{"class":237},[231,841,503],{"class":277},[231,843,281],{"class":237},[231,845,284],{"class":270},[231,847,287],{"class":237},[231,849,226],{"class":258},[231,851,293],{"class":237},[231,853,854,856,858,861,863,865,867,869],{"class":233,"line":296},[231,855,271],{"class":270},[231,857,274],{"class":237},[231,859,860],{"class":277}," CodeBlock",[231,862,281],{"class":237},[231,864,284],{"class":270},[231,866,287],{"class":237},[231,868,290],{"class":258},[231,870,293],{"class":237},[231,872,873],{"class":233,"line":306},[231,874,310],{"emptyLinePlaceholder":309},[231,876,877,879,882,884,886,888,890,893,895],{"class":233,"line":313},[231,878,541],{"class":245},[231,880,881],{"class":277}," code ",[231,883,252],{"class":237},[231,885,503],{"class":599},[231,887,602],{"class":277},[231,889,552],{"class":237},[231,891,892],{"class":258},"const answer = 42",[231,894,552],{"class":237},[231,896,608],{"class":277},[231,898,899,901,903],{"class":233,"line":323},[231,900,299],{"class":237},[231,902,242],{"class":241},[231,904,264],{"class":237},[231,906,907],{"class":233,"line":359},[231,908,310],{"emptyLinePlaceholder":309},[231,910,911,913,915],{"class":233,"line":366},[231,912,238],{"class":237},[231,914,318],{"class":241},[231,916,264],{"class":237},[231,918,919,921,924,927,929,931,933,935,938,940,942,945,947,950,952,954,956,958],{"class":233,"line":623},[231,920,326],{"class":237},[231,922,923],{"class":241},"CodeBlock",[231,925,926],{"class":245}," :code",[231,928,252],{"class":237},[231,930,255],{"class":237},[231,932,217],{"class":258},[231,934,255],{"class":237},[231,936,937],{"class":245}," filename",[231,939,252],{"class":237},[231,941,255],{"class":237},[231,943,944],{"class":258},"answer.ts",[231,946,255],{"class":237},[231,948,949],{"class":245}," language",[231,951,252],{"class":237},[231,953,255],{"class":237},[231,955,259],{"class":258},[231,957,255],{"class":237},[231,959,356],{"class":237},[231,961,962],{"class":233,"line":632},[231,963,964],{"class":362},"  \u003C!-- 流式：传 visibleLines 数字，只渲染前 N 行并尾随光标 -->\n",[231,966,967,969,971],{"class":233,"line":640},[231,968,299],{"class":237},[231,970,318],{"class":241},[231,972,264],{"class":237},[209,974,976],{"id":975},"sidebarnav分组侧边导航","SidebarNav：分组侧边导航",[205,978,979],{},"分组侧栏（滑动高亮浮层、徽标、可选的工作区行 \u002F 搜索框 \u002F 主操作按钮）：",[222,981,983],{"className":224,"code":982,"language":226,"meta":227,"style":227},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SidebarNav } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\nconst active = ref('general')\nconst items = [\n  { key: 'general', label: '通用' },\n  { key: 'sync', label: '同步', section: '数据' },\n  { key: 'backup', label: '备份', section: '数据', badge: '新' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSidebarNav\n    v-model:active=\"active\"\n    :items=\"items\"\n    workspace-title=\"当前空间\"\n    workspace-subtitle=\"my-workspace\"\n    new-label=\"新建\"\n    search-placeholder=\"过滤设置项…\"\n    embedded\n    @new=\"onCreate\"\n    @search=\"onSearch\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[217,984,985,1005,1023,1042,1046,1068,1079,1111,1155,1211,1215,1223,1227,1235,1242,1256,1268,1282,1296,1311,1326,1332,1347,1362,1367],{"__ignoreMap":227},[231,986,987,989,991,993,995,997,999,1001,1003],{"class":233,"line":234},[231,988,238],{"class":237},[231,990,242],{"class":241},[231,992,246],{"class":245},[231,994,249],{"class":245},[231,996,252],{"class":237},[231,998,255],{"class":237},[231,1000,259],{"class":258},[231,1002,255],{"class":237},[231,1004,264],{"class":237},[231,1006,1007,1009,1011,1013,1015,1017,1019,1021],{"class":233,"line":267},[231,1008,271],{"class":270},[231,1010,274],{"class":237},[231,1012,503],{"class":277},[231,1014,281],{"class":237},[231,1016,284],{"class":270},[231,1018,287],{"class":237},[231,1020,226],{"class":258},[231,1022,293],{"class":237},[231,1024,1025,1027,1029,1032,1034,1036,1038,1040],{"class":233,"line":296},[231,1026,271],{"class":270},[231,1028,274],{"class":237},[231,1030,1031],{"class":277}," SidebarNav",[231,1033,281],{"class":237},[231,1035,284],{"class":270},[231,1037,287],{"class":237},[231,1039,290],{"class":258},[231,1041,293],{"class":237},[231,1043,1044],{"class":233,"line":306},[231,1045,310],{"emptyLinePlaceholder":309},[231,1047,1048,1050,1053,1055,1057,1059,1061,1064,1066],{"class":233,"line":313},[231,1049,541],{"class":245},[231,1051,1052],{"class":277}," active ",[231,1054,252],{"class":237},[231,1056,503],{"class":599},[231,1058,602],{"class":277},[231,1060,552],{"class":237},[231,1062,1063],{"class":258},"general",[231,1065,552],{"class":237},[231,1067,608],{"class":277},[231,1069,1070,1072,1074,1076],{"class":233,"line":323},[231,1071,541],{"class":245},[231,1073,544],{"class":277},[231,1075,252],{"class":237},[231,1077,1078],{"class":277}," [\n",[231,1080,1081,1084,1087,1089,1091,1093,1095,1097,1099,1101,1103,1106,1108],{"class":233,"line":359},[231,1082,1083],{"class":237},"  {",[231,1085,1086],{"class":241}," key",[231,1088,405],{"class":237},[231,1090,287],{"class":237},[231,1092,1063],{"class":258},[231,1094,552],{"class":237},[231,1096,427],{"class":237},[231,1098,332],{"class":241},[231,1100,405],{"class":237},[231,1102,287],{"class":237},[231,1104,1105],{"class":258},"通用",[231,1107,552],{"class":237},[231,1109,1110],{"class":237}," },\n",[231,1112,1113,1115,1117,1119,1121,1124,1126,1128,1130,1132,1134,1137,1139,1141,1144,1146,1148,1151,1153],{"class":233,"line":366},[231,1114,1083],{"class":237},[231,1116,1086],{"class":241},[231,1118,405],{"class":237},[231,1120,287],{"class":237},[231,1122,1123],{"class":258},"sync",[231,1125,552],{"class":237},[231,1127,427],{"class":237},[231,1129,332],{"class":241},[231,1131,405],{"class":237},[231,1133,287],{"class":237},[231,1135,1136],{"class":258},"同步",[231,1138,552],{"class":237},[231,1140,427],{"class":237},[231,1142,1143],{"class":241}," section",[231,1145,405],{"class":237},[231,1147,287],{"class":237},[231,1149,1150],{"class":258},"数据",[231,1152,552],{"class":237},[231,1154,1110],{"class":237},[231,1156,1157,1159,1161,1163,1165,1168,1170,1172,1174,1176,1178,1181,1183,1185,1187,1189,1191,1193,1195,1197,1200,1202,1204,1207,1209],{"class":233,"line":623},[231,1158,1083],{"class":237},[231,1160,1086],{"class":241},[231,1162,405],{"class":237},[231,1164,287],{"class":237},[231,1166,1167],{"class":258},"backup",[231,1169,552],{"class":237},[231,1171,427],{"class":237},[231,1173,332],{"class":241},[231,1175,405],{"class":237},[231,1177,287],{"class":237},[231,1179,1180],{"class":258},"备份",[231,1182,552],{"class":237},[231,1184,427],{"class":237},[231,1186,1143],{"class":241},[231,1188,405],{"class":237},[231,1190,287],{"class":237},[231,1192,1150],{"class":258},[231,1194,552],{"class":237},[231,1196,427],{"class":237},[231,1198,1199],{"class":241}," badge",[231,1201,405],{"class":237},[231,1203,287],{"class":237},[231,1205,1206],{"class":258},"新",[231,1208,552],{"class":237},[231,1210,448],{"class":237},[231,1212,1213],{"class":233,"line":632},[231,1214,587],{"class":277},[231,1216,1217,1219,1221],{"class":233,"line":640},[231,1218,299],{"class":237},[231,1220,242],{"class":241},[231,1222,264],{"class":237},[231,1224,1225],{"class":233,"line":656},[231,1226,310],{"emptyLinePlaceholder":309},[231,1228,1229,1231,1233],{"class":233,"line":671},[231,1230,238],{"class":237},[231,1232,318],{"class":241},[231,1234,264],{"class":237},[231,1236,1237,1239],{"class":233,"line":686},[231,1238,326],{"class":237},[231,1240,1241],{"class":241},"SidebarNav\n",[231,1243,1244,1247,1249,1251,1254],{"class":233,"line":701},[231,1245,1246],{"class":245},"    v-model:active",[231,1248,252],{"class":237},[231,1250,255],{"class":237},[231,1252,1253],{"class":258},"active",[231,1255,653],{"class":237},[231,1257,1258,1260,1262,1264,1266],{"class":233,"line":716},[231,1259,643],{"class":245},[231,1261,252],{"class":237},[231,1263,255],{"class":237},[231,1265,650],{"class":258},[231,1267,653],{"class":237},[231,1269,1270,1273,1275,1277,1280],{"class":233,"line":731},[231,1271,1272],{"class":245},"    workspace-title",[231,1274,252],{"class":237},[231,1276,255],{"class":237},[231,1278,1279],{"class":258},"当前空间",[231,1281,653],{"class":237},[231,1283,1284,1287,1289,1291,1294],{"class":233,"line":737},[231,1285,1286],{"class":245},"    workspace-subtitle",[231,1288,252],{"class":237},[231,1290,255],{"class":237},[231,1292,1293],{"class":258},"my-workspace",[231,1295,653],{"class":237},[231,1297,1299,1302,1304,1306,1309],{"class":233,"line":1298},19,[231,1300,1301],{"class":245},"    new-label",[231,1303,252],{"class":237},[231,1305,255],{"class":237},[231,1307,1308],{"class":258},"新建",[231,1310,653],{"class":237},[231,1312,1314,1317,1319,1321,1324],{"class":233,"line":1313},20,[231,1315,1316],{"class":245},"    search-placeholder",[231,1318,252],{"class":237},[231,1320,255],{"class":237},[231,1322,1323],{"class":258},"过滤设置项…",[231,1325,653],{"class":237},[231,1327,1329],{"class":233,"line":1328},21,[231,1330,1331],{"class":245},"    embedded\n",[231,1333,1335,1338,1340,1342,1345],{"class":233,"line":1334},22,[231,1336,1337],{"class":245},"    @new",[231,1339,252],{"class":237},[231,1341,255],{"class":237},[231,1343,1344],{"class":258},"onCreate",[231,1346,653],{"class":237},[231,1348,1350,1353,1355,1357,1360],{"class":233,"line":1349},23,[231,1351,1352],{"class":245},"    @search",[231,1354,252],{"class":237},[231,1356,255],{"class":237},[231,1358,1359],{"class":258},"onSearch",[231,1361,653],{"class":237},[231,1363,1365],{"class":233,"line":1364},24,[231,1366,734],{"class":237},[231,1368,1370,1372,1374],{"class":233,"line":1369},25,[231,1371,299],{"class":237},[231,1373,318],{"class":241},[231,1375,264],{"class":237},[205,1377,1378,1380,1381,1384,1385,1388],{},[217,1379,650],{}," 不带 ",[217,1382,1383],{},"section"," 的归入默认组「常用」；",[217,1386,1387],{},"embedded"," 属性去掉卡片外壳，让导航融入你自己的容器。",[209,1390,1391],{"id":1391},"取材与扩展",[205,1393,1394,1395,1398,1399,1402],{},"组件库的 ",[217,1396,1397],{},"components\u002Fbeautiful\u002Fraw\u002F"," 目录还保留着约 20 个",[376,1400,1401],{},"原始参考组件","（对话页、思维链状态、任务行、差异对比表、筛选表格等），它们是未受控的源码参考——带演示数据、不能直接 import。想用其中某个：",[1404,1405,1406,1414,1424],"ol",{},[1407,1408,1409,1410,1413],"li",{},"从 ",[217,1411,1412],{},"raw\u002F"," 复制到你的插件工程（或提 PR 受控化进组件库）；",[1407,1415,1416,1417,798,1420,1423],{},"剥离演示数据，改造成 ",[217,1418,1419],{},"props",[217,1421,1422],{},"emits"," 驱动；",[1407,1425,1426],{},"样式里只消费设计令牌（缺失的令牌补到全局体系，不要在组件内写死色值）。",[205,1428,1429],{},"这套「受控化」流程与官方维护组件库的方式一致，改造后的组件在明暗主题下天然可用。",[209,1431,1432],{"id":1432},"设计系统小结",[205,1434,1435,1436,1440],{},"到这里，令牌 → 主题 → 样式类 → 图标 → 组件的完整链路就走完了。回到你的插件：先把",[1437,1438,148],"a",{"href":1439},"..\u002Fquick-start\u002Fgetting-started","的工程骨架搭起来，遇到界面问题再回到对应章节查参考。祝开发顺利！",[1442,1443,1444],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":227,"searchDepth":267,"depth":267,"links":1446},[1447,1448,1449,1450,1451,1452],{"id":211,"depth":267,"text":212},{"id":465,"depth":267,"text":466},{"id":804,"depth":267,"text":805},{"id":975,"depth":267,"text":976},{"id":1391,"depth":267,"text":1391},{"id":1432,"depth":267,"text":1432},"LoadingState、SearchList、CodeBlock、SidebarNav 四个场景化组件，覆盖加载、搜索、代码展示与侧边导航。","md",{},{"icon":48},"---\ntitle: 场景组件\ndescription: LoadingState、SearchList、CodeBlock、SidebarNav 四个场景化组件，覆盖加载、搜索、代码展示与侧边导航。\nnavigation:\n  icon: i-lucide-layout-grid\n---\n\n场景组件（beautiful 系列）解决特定页面形态的问题：等待、检索、代码展示、多栏导航。它们与宿主的视觉语言同源，用对了插件气质立刻对味。\n\n## LoadingState：加载态\n\n像素风格的加载动画，三形态可选手式，内置耗时计时与减少动态偏好（`prefers-reduced-motion`）适配：\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { LoadingState } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLoadingState label=\"正在解析文件\" variant=\"Dots\" \u002F>\n  \u003C!-- variant: 'Drive'（波浪）| 'Dots'（圆点）| 'Orbit'（环绕） -->\n\u003C\u002Ftemplate>\n```\n\n**与 plugin.json 联动**：清单里的 `loading` 字段声明的就是这套视觉——\n\n```json\n{ \"loading\": { \"variant\": \"Drive\", \"label\": \"加载中\" } }\n```\n\n它解决的是 webview 创建到插件挂载 `#app` 之间的白屏期：宿主直接注入纯 CSS 版骨架，插件 mount 后自动消失，零接入成本。`LoadingState` 组件则用于插件**运行中**的异步等待场景（请求返回前的占位、切换数据源的过渡），两者互补。\n\n## SearchList：搜索列表\n\n带搜索框、空态、清空按钮的列表容器，输入即过滤（包含匹配），选中高亮动画：\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SearchList } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\nconst items = ['计算器', '颜色工具', 'JSON 工具', '正则编辑器']\nconst picked = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSearchList\n    :items=\"items\"\n    placeholder=\"搜索工具…\"\n    :preview-count=\"5\"\n    empty-title=\"未找到结果\"\n    empty-hint=\"调整关键词重试\"\n    @select=\"picked = $event\"\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n| 参数 | 说明 |\n|------|------|\n| `items` | 字符串数组（复杂对象先用 `weightedSearch` 过滤出标签再传入） |\n| `previewCount` | 无输入时默认展示的条数 |\n| 空态 | 自定义 `empty-title` \u002F `empty-hint` |\n\n## CodeBlock：代码块\n\n行号 + 复制按钮的代码展示，支持流式输出（AI 场景）：\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { CodeBlock } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\nconst code = ref('const answer = 42')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock :code=\"code\" filename=\"answer.ts\" language=\"ts\" \u002F>\n  \u003C!-- 流式：传 visibleLines 数字，只渲染前 N 行并尾随光标 -->\n\u003C\u002Ftemplate>\n```\n\n## SidebarNav：分组侧边导航\n\n分组侧栏（滑动高亮浮层、徽标、可选的工作区行 \u002F 搜索框 \u002F 主操作按钮）：\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SidebarNav } from '@udhold\u002Fudhold-ui\u002Fcomponents\u002Fbeautiful'\n\nconst active = ref('general')\nconst items = [\n  { key: 'general', label: '通用' },\n  { key: 'sync', label: '同步', section: '数据' },\n  { key: 'backup', label: '备份', section: '数据', badge: '新' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSidebarNav\n    v-model:active=\"active\"\n    :items=\"items\"\n    workspace-title=\"当前空间\"\n    workspace-subtitle=\"my-workspace\"\n    new-label=\"新建\"\n    search-placeholder=\"过滤设置项…\"\n    embedded\n    @new=\"onCreate\"\n    @search=\"onSearch\"\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n`items` 不带 `section` 的归入默认组「常用」；`embedded` 属性去掉卡片外壳，让导航融入你自己的容器。\n\n## 取材与扩展\n\n组件库的 `components\u002Fbeautiful\u002Fraw\u002F` 目录还保留着约 20 个**原始参考组件**（对话页、思维链状态、任务行、差异对比表、筛选表格等），它们是未受控的源码参考——带演示数据、不能直接 import。想用其中某个：\n\n1. 从 `raw\u002F` 复制到你的插件工程（或提 PR 受控化进组件库）；\n2. 剥离演示数据，改造成 `props` \u002F `emits` 驱动；\n3. 样式里只消费设计令牌（缺失的令牌补到全局体系，不要在组件内写死色值）。\n\n这套「受控化」流程与官方维护组件库的方式一致，改造后的组件在明暗主题下天然可用。\n\n## 设计系统小结\n\n到这里，令牌 → 主题 → 样式类 → 图标 → 组件的完整链路就走完了。回到你的插件：先把[快速上手](..\u002Fquick-start\u002Fgetting-started)的工程骨架搭起来，遇到界面问题再回到对应章节查参考。祝开发顺利！\n",{"title":187,"description":1453},"35sn4WGb3Rg4mtBVu4q2VUXSbtYzx2r4SImMemazZ4Y",[1461,1463],{"title":182,"path":183,"stem":184,"description":1462,"icon":185,"children":-1},"@udhold\u002Fudhold-ui 通用组件参考：消息提示、确认弹窗、下拉框、快捷键录制、滑杆、详情面板与自适应图标。",{"title":196,"path":197,"stem":198,"description":1464,"icon":126,"children":-1},"把 UDhold 开发文档接入 Cursor、TRAE、Claude 等 AI 工具，让 AI 帮你写插件。",1793010251394]