[{"data":1,"prerenderedAt":610},["ShallowReactive",2],{"navigation_docs":3,"-development-component-workflow":56,"-development-component-workflow-surround":607},[4,36,46],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":35},"快速开始","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25,30],{"title":11,"path":12,"stem":13,"icon":14},"简介","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"安装与构建","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"如何使用","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"项目结构","\u002Fgetting-started\u002Fproject-structure","1.getting-started\u002F4.project-structure","i-lucide-folder-tree",{"title":31,"path":32,"stem":33,"icon":34},"里程碑","\u002Fgetting-started\u002Fmilestones","1.getting-started\u002F5.milestones","i-lucide-map",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"设计","i-lucide-drafting-compass","\u002Fdesign","2.design",[42],{"title":43,"path":44,"stem":45,"icon":38},"技术方案","\u002Fdesign\u002Ftechnical-design","2.design\u002F1.technical-design",{"title":47,"icon":48,"path":49,"stem":50,"children":51,"page":35},"开发","i-lucide-puzzle","\u002Fdevelopment","3.development",[52],{"title":53,"path":54,"stem":55,"icon":48},"组件开发流程","\u002Fdevelopment\u002Fcomponent-workflow","3.development\u002F1.component-workflow",{"id":57,"title":53,"body":58,"description":600,"extension":601,"links":602,"meta":603,"navigation":604,"path":54,"seo":605,"stem":55,"__hash__":606},"docs\u002F3.development\u002F1.component-workflow.md",{"type":59,"value":60,"toc":588},"minimark",[61,66,71,86,90,99,104,231,235,238,266,340,347,351,419,423,488,492,517,521,558,561,584],[62,63,65],"h1",{"id":64},"qtshadcn-组件开发流程","QtShadcn 组件开发流程",[67,68,70],"h2",{"id":69},"when-to-use","When to Use",[72,73,74,83],"ul",{},[75,76,77,78,82],"li",{},"开发 qtshadcn 组件库（",[79,80,81],"code",{},"~\u002Fdev\u002Fqt\u002Fqtshadcn","）新组件（对应 GitHub issues，每批一个，实现完关 issue）",[75,84,85],{},"需要实现 shadcn\u002Fui 风格（Design Token 驱动）的 QML 组件",[67,87,89],{"id":88},"铁律先研究再实现","铁律：先研究再实现",[91,92,93,94,98],"p",{},"开发任何组件",[95,96,97],"strong",{},"前","必须研究 shadcn\u002Fui 参考实现，禁止凭印象直接写。\nM2 教训：凭印象写的 Button 尺寸整体小一档、漏 link variant、圆角 8px（应为 6px）等，全靠事后对照返工。",[100,101,103],"h3",{"id":102},"_1-抓官方文档含-variantssizes-列表","1. 抓官方文档（含 variants\u002Fsizes 列表）",[105,106,111],"pre",{"className":107,"code":108,"language":109,"meta":110,"style":110},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# 网速慢用代理 7897或7890\ncurl -sL -x http:\u002F\u002F127.0.0.1:7897 \"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcomponents\u002F\u003Cname>\" -o \u002Ftmp\u002Fshadcn-\u003Cname>.html\npython3 -c \"\nimport re, html\ntext = open('\u002Ftmp\u002Fshadcn-\u003Cname>.html').read()\nm = re.search(r'\u003Cmain[^>]*>(.*?)\u003C\u002Fmain>', text, re.S)\nbody = m.group(1) if m else text\nbody = re.sub(r'\u003Cscript.*?\u003C\u002Fscript>', '', body, flags=re.S)\nbody = re.sub(r'\u003C[^>]+>', ' ', body)\nprint(html.unescape(re.sub(r'\\s+', ' ', body)))\n\"\n","bash","",[79,112,113,122,171,183,189,195,201,207,213,219,225],{"__ignoreMap":110},[114,115,118],"span",{"class":116,"line":117},"line",1,[114,119,121],{"class":120},"sHwdD","# 网速慢用代理 7897或7890\n",[114,123,125,129,133,136,139,143,146,149,152,155,158,161,165,168],{"class":116,"line":124},2,[114,126,128],{"class":127},"sBMFI","curl",[114,130,132],{"class":131},"sfazB"," -sL",[114,134,135],{"class":131}," -x",[114,137,138],{"class":131}," http:\u002F\u002F127.0.0.1:7897",[114,140,142],{"class":141},"sMK4o"," \"",[114,144,145],{"class":131},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcomponents\u002F\u003Cname>",[114,147,148],{"class":141},"\"",[114,150,151],{"class":131}," -o",[114,153,154],{"class":131}," \u002Ftmp\u002Fshadcn-",[114,156,157],{"class":141},"\u003C",[114,159,160],{"class":131},"nam",[114,162,164],{"class":163},"sTEyZ","e",[114,166,167],{"class":141},">",[114,169,170],{"class":131},".html\n",[114,172,174,177,180],{"class":116,"line":173},3,[114,175,176],{"class":127},"python3",[114,178,179],{"class":131}," -c",[114,181,182],{"class":141}," \"\n",[114,184,186],{"class":116,"line":185},4,[114,187,188],{"class":131},"import re, html\n",[114,190,192],{"class":116,"line":191},5,[114,193,194],{"class":131},"text = open('\u002Ftmp\u002Fshadcn-\u003Cname>.html').read()\n",[114,196,198],{"class":116,"line":197},6,[114,199,200],{"class":131},"m = re.search(r'\u003Cmain[^>]*>(.*?)\u003C\u002Fmain>', text, re.S)\n",[114,202,204],{"class":116,"line":203},7,[114,205,206],{"class":131},"body = m.group(1) if m else text\n",[114,208,210],{"class":116,"line":209},8,[114,211,212],{"class":131},"body = re.sub(r'\u003Cscript.*?\u003C\u002Fscript>', '', body, flags=re.S)\n",[114,214,216],{"class":116,"line":215},9,[114,217,218],{"class":131},"body = re.sub(r'\u003C[^>]+>', ' ', body)\n",[114,220,222],{"class":116,"line":221},10,[114,223,224],{"class":131},"print(html.unescape(re.sub(r'\\s+', ' ', body)))\n",[114,226,228],{"class":116,"line":227},11,[114,229,230],{"class":141},"\"\n",[100,232,234],{"id":233},"_2-抓源码gh-api-认证免限流","2. 抓源码（gh api 认证，免限流）",[91,236,237],{},"shadcn-ui\u002Fui 仓库 2026 年已重构：",[72,239,240,249],{},[75,241,242,245,246],{},[95,243,244],{},"v2\u002Fv3 稳定路径","（广为人知的 cva 定义）：",[79,247,248],{},"apps\u002Fwww\u002Fregistry\u002Fdefault\u002Fui\u002F\u003Cname>.tsx",[75,250,251,254,255,258,259,262,263],{},[95,252,253],{},"v4 新路径","：",[79,256,257],{},"apps\u002Fv4\u002Fregistry\u002F__components__\u002Fbase-luma.tsx","（主题变体文件，内部 ",[79,260,261],{},"import(\"@\u002Fstyles\u002Fbase-luma\u002Fui\u002F\u003Cname>\")","），styles 路径 ",[79,264,265],{},"apps\u002Fv4\u002Fstyles\u002Fbase-luma\u002Fui\u002F\u003Cname>.tsx",[105,267,269],{"className":107,"code":268,"language":109,"meta":110,"style":110},"# 先列目录找路径（路径常变）\ngh api \"repos\u002Fshadcn-ui\u002Fui\u002Fcontents\u002Fapps\u002Fv4\u002Fregistry\u002F__components__\" --jq '.[].name'\n# 再拿文件内容\ngh api \"repos\u002Fshadcn-ui\u002Fui\u002Fcontents\u002Fapps\u002Fv4\u002Fregistry\u002F__components__\u002Fbase-luma.tsx\" --jq '.content' | base64 -d\n",[79,270,271,276,303,308],{"__ignoreMap":110},[114,272,273],{"class":116,"line":117},[114,274,275],{"class":120},"# 先列目录找路径（路径常变）\n",[114,277,278,281,284,286,289,291,294,297,300],{"class":116,"line":124},[114,279,280],{"class":127},"gh",[114,282,283],{"class":131}," api",[114,285,142],{"class":141},[114,287,288],{"class":131},"repos\u002Fshadcn-ui\u002Fui\u002Fcontents\u002Fapps\u002Fv4\u002Fregistry\u002F__components__",[114,290,148],{"class":141},[114,292,293],{"class":131}," --jq",[114,295,296],{"class":141}," '",[114,298,299],{"class":131},".[].name",[114,301,302],{"class":141},"'\n",[114,304,305],{"class":116,"line":173},[114,306,307],{"class":120},"# 再拿文件内容\n",[114,309,310,312,314,316,319,321,323,325,328,331,334,337],{"class":116,"line":185},[114,311,280],{"class":127},[114,313,283],{"class":131},[114,315,142],{"class":141},[114,317,318],{"class":131},"repos\u002Fshadcn-ui\u002Fui\u002Fcontents\u002Fapps\u002Fv4\u002Fregistry\u002F__components__\u002Fbase-luma.tsx",[114,320,148],{"class":141},[114,322,293],{"class":131},[114,324,296],{"class":141},[114,326,327],{"class":131},".content",[114,329,330],{"class":141},"'",[114,332,333],{"class":141}," |",[114,335,336],{"class":127}," base64",[114,338,339],{"class":131}," -d\n",[91,341,342,343,346],{},"注意：GitHub Contents API 未认证会限流（尤其走代理 IP）；raw.githubusercontent 路径随重构 404，用 ",[79,344,345],{},"gh api"," 列目录确认。",[100,348,350],{"id":349},"_3-梳理规范清单输出对照表再写码","3. 梳理规范清单（输出对照表再写码）",[352,353,354,367],"table",{},[355,356,357],"thead",{},[358,359,360,364],"tr",{},[361,362,363],"th",{},"维度",[361,365,366],{},"必须确认",[368,369,370,379,387,395,403,411],"tbody",{},[358,371,372,376],{},[373,374,375],"td",{},"variants",[373,377,378],{},"完整列表（Button: default\u002Fsecondary\u002Fdestructive\u002Foutline\u002Fghost\u002Flink）",[358,380,381,384],{},[373,382,383],{},"sizes",[373,385,386],{},"全部尺寸 + 像素值（Button: xs=32 \u002F sm=36 \u002F default=40 \u002F lg=44 \u002F icon=40）",[358,388,389,392],{},[373,390,391],{},"交互状态",[373,393,394],{},"hover \u002F pressed \u002F disabled(opacity-50) \u002F loading \u002F focus(ring)",[358,396,397,400],{},[373,398,399],{},"样式细节",[373,401,402],{},"圆角(rounded-md=6px)、字重(font-medium=500)、padding、hover 语义",[358,404,405,408],{},[373,406,407],{},"API",[373,409,410],{},"属性 \u002F 事件 \u002F 变体枚举命名",[358,412,413,416],{},[373,414,415],{},"无障碍\u002F键盘",[373,417,418],{},"继承 QQC 基类行为（键盘导航\u002FFocus\u002FAccessible 白拿）",[100,420,422],{"id":421},"_4-对照实现qtshadcn-项目规范","4. 对照实现（QtShadcn 项目规范）",[72,424,425,443,450,460,467,477],{},[75,426,427,428,431,432,435,436,439,440],{},"组件命名 ",[79,429,430],{},"Shadcn*"," 前缀，文件 ",[79,433,434],{},"src\u002Fqml\u002FComponents\u002FShadcnXxx.qml","，加进 ",[79,437,438],{},"src\u002FCMakeLists.txt"," 的 ",[79,441,442],{},"QML_FILES",[75,444,445,446,449],{},"基于 QQC 基类（",[79,447,448],{},"import QtQuick.Controls.Basic","，style-specific import 是 token 自绘前提），只替换 background\u002FcontentItem",[75,451,452,455,456,459],{},[95,453,454],{},"variant → token 映射","集中在 ",[79,457,458],{},"src\u002Fqml\u002FTheme\u002FVariantTokens.qml","：新增 variant = 枚举 + 映射表各加一项（顺序对齐）；用 QtObject 属性定义（var 对象字面量在 qmlcache 下不可靠）",[75,461,462,463,466],{},"颜色经 ",[79,464,465],{},"theme.tokens[token名]"," 查询（保持 mode 切换绑定；存颜色值会变静态）",[75,468,469,472,473,476],{},[95,470,471],{},"文字居中","：QQC 会把 contentItem 拉伸到内容区全宽 → Item 包装 + RowLayout ",[79,474,475],{},"anchors.centerIn","（水平垂直都稳）；Row 子项 AlignTop 会偏上",[75,478,479,480,483,484,487],{},"动画用 Shape + Animator（",[95,481,482],{},"禁 Canvas 动画","）；文案 qsTr()；import 无版本号；Layout 子项用 ",[79,485,486],{},"Layout.*"," 不用裸 width",[100,489,491],{"id":490},"_5-showcase-验证","5. showcase 验证",[72,493,494,500,514],{},[75,495,496,499],{},[79,497,498],{},"examples\u002Fshowcase\u002FMain.qml"," 展示全部 variant × size × 状态（含 disabled\u002Floading\u002F拉伸宽度）",[75,501,502,505,506,509,510,513],{},[79,503,504],{},"make build"," 构建；python 后台启动 + poll 存活 + ",[95,507,508],{},"stderr 干净"," + ",[79,511,512],{},"screencapture"," 截图给用户确认",[75,515,516],{},"确认后 commit + 关对应 GitHub issue",[67,518,520],{"id":519},"m2-button-实测偏差教训防再犯","M2 Button 实测偏差教训（防再犯）",[72,522,523,526,529,536,542,548,555],{},[75,524,525],{},"尺寸：Medium=40 \u002F Large=44 \u002F Small=36 \u002F XS=32 \u002F Icon=40（shadcn h-10\u002Fh-11\u002Fh-9\u002Fh-8\u002Fsize-10）",[75,527,528],{},"漏 link variant：text-primary + hover 下划线，无背景无 hover 块",[75,530,531,532,535],{},"圆角：button 用 rounded-md = ",[95,533,534],{},"6px","（theme.radius 8 用于卡片\u002F容器）",[75,537,538,539],{},"字重 font-medium = ",[95,540,541],{},"500",[75,543,544,545],{},"disabled \u002F loading：opacity ",[95,546,547],{},"50%",[75,549,550,551,554],{},"hover 语义：default\u002Fsecondary\u002Fdestructive 变暗（90% 透明度等效黑 8% overlay）；",[95,552,553],{},"outline\u002Fghost 用 accent 背景 + accentForeground 文字","；link 仅下划线",[75,556,557],{},"按钮组：无 border 的 variant（如 Primary）中间需 1px 分隔线（前景色 15% 透明度）；spacing: -1 合并边框；圆角只留两端",[67,559,560],{"id":560},"项目速查",[72,562,563,571,574,581],{},[75,564,565,566,570],{},"技术方案：",[567,568,569],"a",{"href":44},"设计 → 技术方案","（11 节 = 组件开发流程）",[75,572,573],{},"组件计划：GitHub issues #1-10（每批一个，实现完关对应 issue）",[75,575,576,577,580],{},"构建：Qt 6.5+ \u002F CMake 3.24+；token 自绘须 ",[79,578,579],{},"QQuickStyle::setStyle(\"Basic\")","（macOS 默认 native style 拒绝自定义 contentItem）",[75,582,583],{},"规范技能：qt-qml（Qt 官方 agent-skills，QML 最佳实践）",[585,586,587],"style",{},"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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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":110,"searchDepth":124,"depth":124,"links":589},[590,591,598,599],{"id":69,"depth":124,"text":70},{"id":88,"depth":124,"text":89,"children":592},[593,594,595,596,597],{"id":102,"depth":173,"text":103},{"id":233,"depth":173,"text":234},{"id":349,"depth":173,"text":350},{"id":421,"depth":173,"text":422},{"id":490,"depth":173,"text":491},{"id":519,"depth":124,"text":520},{"id":560,"depth":124,"text":560},"开发 QtShadcn 组件的工作流：先研究 shadcn\u002Fui 官方规范再实现（M2 教训）。","md",null,{},{"icon":48},{"title":53,"description":600},"Gy9p1fpGRolSi3BNgQLFAnJfooErg76Lzbdaf0UgAUI",[608,602],{"title":43,"path":44,"stem":45,"description":609,"icon":38,"children":-1},"QtShadcn 技术设计：定位、选型、架构、Token 系统、组件规范、里程碑与风险决策。",1787050744383]