[{"data":1,"prerenderedAt":2189},["ShallowReactive",2],{"article-/topics/design/web-design-layout-visual-hierarchy-practical-guide":3,"related-design":710,"content-query-CI3u4A2yZa":1643},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":17,"imageQuery":18,"pexelsPhotoId":19,"pexelsUrl":20,"featured":6,"readingTime":21,"body":22,"_type":704,"_id":705,"_source":706,"_file":707,"_stem":708,"_extension":709},"/topics/design/web-design-layout-visual-hierarchy-practical-guide","design",false,"","网页设计实战指南：布局、视觉层级、留白和转化路径如何一起工作","网页设计不是把页面做漂亮，而是让用户更快理解信息并完成动作。本文从布局、视觉层级、留白、字体、颜色、CTA 和移动端适配讲清网页设计的实用方法。","2026-05-04","HTMLPAGE 团队",[13,14,15,16],"网页设计","视觉层级","布局设计","用户体验","/images/articles/web-design-layout-visual-hierarchy-practical-guide-featured.jpg","web design layout planning wireframe laptop workspace",246658,"https://www.pexels.com/photo/close-up-of-man-using-mobile-phone-246658/",13,{"type":23,"children":24,"toc":691},"root",[25,33,38,58,88,95,100,241,246,252,257,269,274,297,302,308,313,332,337,343,348,353,376,381,387,392,397,458,463,469,474,502,507,513,518,523,551,556,562,643,648,653,658],{"type":26,"tag":27,"props":28,"children":29},"element","p",{},[30],{"type":31,"value":32},"text","很多人搜索“网页设计”，希望找到配色、排版、模板或案例。但真实项目里，网页设计最核心的问题不是“好不好看”，而是用户能不能快速理解页面，并知道下一步做什么。",{"type":26,"tag":27,"props":34,"children":35},{},[36],{"type":31,"value":37},"一个设计有效的网页，通常同时满足三件事：",{"type":26,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":26,"tag":43,"props":44,"children":45},"li",{},[46],{"type":31,"value":47},"信息层级清楚",{"type":26,"tag":43,"props":49,"children":50},{},[51],{"type":31,"value":52},"阅读节奏顺畅",{"type":26,"tag":43,"props":54,"children":55},{},[56],{"type":31,"value":57},"行动路径明确",{"type":26,"tag":27,"props":59,"children":60},{},[61,63,70,72,78,80,86],{"type":31,"value":62},"如果你刚开始，可以先看 ",{"type":26,"tag":64,"props":65,"children":67},"a",{"href":66},"/topics/design/web-design-10-rules-for-beginners",[68],{"type":31,"value":69},"网页设计 10 条硬规则",{"type":31,"value":71},"、",{"type":26,"tag":64,"props":73,"children":75},{"href":74},"/topics/design/typography-system",[76],{"type":31,"value":77},"排版系统设计指南",{"type":31,"value":79}," 和 ",{"type":26,"tag":64,"props":81,"children":83},{"href":82},"/topics/design/web-design-readability-testing-playbook",[84],{"type":31,"value":85},"网页设计可读性测试",{"type":31,"value":87},"。",{"type":26,"tag":89,"props":90,"children":92},"h2",{"id":91},"先给结论网页设计要服务理解而不是堆视觉效果",[93],{"type":31,"value":94},"先给结论：网页设计要服务理解，而不是堆视觉效果",{"type":26,"tag":27,"props":96,"children":97},{},[98],{"type":31,"value":99},"网页设计中最常见的失败，不是页面太简单，而是重点太多。",{"type":26,"tag":101,"props":102,"children":103},"table",{},[104,128],{"type":26,"tag":105,"props":106,"children":107},"thead",{},[108],{"type":26,"tag":109,"props":110,"children":111},"tr",{},[112,118,123],{"type":26,"tag":113,"props":114,"children":115},"th",{},[116],{"type":31,"value":117},"设计元素",{"type":26,"tag":113,"props":119,"children":120},{},[121],{"type":31,"value":122},"正确作用",{"type":26,"tag":113,"props":124,"children":125},{},[126],{"type":31,"value":127},"常见误区",{"type":26,"tag":129,"props":130,"children":131},"tbody",{},[132,151,169,187,205,223],{"type":26,"tag":109,"props":133,"children":134},{},[135,141,146],{"type":26,"tag":136,"props":137,"children":138},"td",{},[139],{"type":31,"value":140},"布局",{"type":26,"tag":136,"props":142,"children":143},{},[144],{"type":31,"value":145},"建立阅读顺序",{"type":26,"tag":136,"props":147,"children":148},{},[149],{"type":31,"value":150},"模块平均用力",{"type":26,"tag":109,"props":152,"children":153},{},[154,159,164],{"type":26,"tag":136,"props":155,"children":156},{},[157],{"type":31,"value":158},"字体",{"type":26,"tag":136,"props":160,"children":161},{},[162],{"type":31,"value":163},"区分标题、正文、辅助信息",{"type":26,"tag":136,"props":165,"children":166},{},[167],{"type":31,"value":168},"字号过多",{"type":26,"tag":109,"props":170,"children":171},{},[172,177,182],{"type":26,"tag":136,"props":173,"children":174},{},[175],{"type":31,"value":176},"颜色",{"type":26,"tag":136,"props":178,"children":179},{},[180],{"type":31,"value":181},"标记品牌和行动",{"type":26,"tag":136,"props":183,"children":184},{},[185],{"type":31,"value":186},"全页面高饱和",{"type":26,"tag":109,"props":188,"children":189},{},[190,195,200],{"type":26,"tag":136,"props":191,"children":192},{},[193],{"type":31,"value":194},"留白",{"type":26,"tag":136,"props":196,"children":197},{},[198],{"type":31,"value":199},"分组和降噪",{"type":26,"tag":136,"props":201,"children":202},{},[203],{"type":31,"value":204},"误以为空就是浪费",{"type":26,"tag":109,"props":206,"children":207},{},[208,213,218],{"type":26,"tag":136,"props":209,"children":210},{},[211],{"type":31,"value":212},"图片",{"type":26,"tag":136,"props":214,"children":215},{},[216],{"type":31,"value":217},"解释场景或建立信任",{"type":26,"tag":136,"props":219,"children":220},{},[221],{"type":31,"value":222},"只做装饰",{"type":26,"tag":109,"props":224,"children":225},{},[226,231,236],{"type":26,"tag":136,"props":227,"children":228},{},[229],{"type":31,"value":230},"CTA",{"type":26,"tag":136,"props":232,"children":233},{},[234],{"type":31,"value":235},"引导下一步",{"type":26,"tag":136,"props":237,"children":238},{},[239],{"type":31,"value":240},"按钮太多且同权重",{"type":26,"tag":27,"props":242,"children":243},{},[244],{"type":31,"value":245},"设计不是把所有元素变强，而是让该强的东西强。",{"type":26,"tag":89,"props":247,"children":249},{"id":248},"一先确定页面的主路径",[250],{"type":31,"value":251},"一、先确定页面的主路径",{"type":26,"tag":27,"props":253,"children":254},{},[255],{"type":31,"value":256},"设计前先写出用户路径：",{"type":26,"tag":258,"props":259,"children":263},"pre",{"className":260,"code":262,"language":31,"meta":7},[261],"language-text","进入页面 -> 理解你是谁 -> 相信你能解决问题 -> 查看证据 -> 完成行动\n",[264],{"type":26,"tag":265,"props":266,"children":267},"code",{"__ignoreMap":7},[268],{"type":31,"value":262},{"type":26,"tag":27,"props":270,"children":271},{},[272],{"type":31,"value":273},"不同网页路径不同：",{"type":26,"tag":39,"props":275,"children":276},{},[277,282,287,292],{"type":26,"tag":43,"props":278,"children":279},{},[280],{"type":31,"value":281},"企业官网：理解业务、建立信任、联系咨询",{"type":26,"tag":43,"props":283,"children":284},{},[285],{"type":31,"value":286},"产品页：理解价值、比较功能、试用购买",{"type":26,"tag":43,"props":288,"children":289},{},[290],{"type":31,"value":291},"活动页：确认时间权益、消除顾虑、报名",{"type":26,"tag":43,"props":293,"children":294},{},[295],{"type":31,"value":296},"作品集：看能力、看案例、联系合作",{"type":26,"tag":27,"props":298,"children":299},{},[300],{"type":31,"value":301},"路径清楚，布局才有方向。",{"type":26,"tag":89,"props":303,"children":305},{"id":304},"二视觉层级从三档开始就够用",[306],{"type":31,"value":307},"二、视觉层级从三档开始就够用",{"type":26,"tag":27,"props":309,"children":310},{},[311],{"type":31,"value":312},"新手最容易把页面做乱，是因为每个模块都想突出。建议先建立三档层级：",{"type":26,"tag":314,"props":315,"children":316},"ol",{},[317,322,327],{"type":26,"tag":43,"props":318,"children":319},{},[320],{"type":31,"value":321},"一级：页面标题、主 CTA、核心数据",{"type":26,"tag":43,"props":323,"children":324},{},[325],{"type":31,"value":326},"二级：模块标题、关键卖点、案例标题",{"type":26,"tag":43,"props":328,"children":329},{},[330],{"type":31,"value":331},"三级：正文、说明、辅助链接",{"type":26,"tag":27,"props":333,"children":334},{},[335],{"type":31,"value":336},"字号、颜色、粗细、间距都围绕这三档展开。不要每个模块都创建新样式。",{"type":26,"tag":89,"props":338,"children":340},{"id":339},"三留白是分组工具不是空白浪费",[341],{"type":31,"value":342},"三、留白是分组工具，不是空白浪费",{"type":26,"tag":27,"props":344,"children":345},{},[346],{"type":31,"value":347},"留白的作用是告诉用户：哪些内容属于一组，哪些内容需要分开理解。",{"type":26,"tag":27,"props":349,"children":350},{},[351],{"type":31,"value":352},"常见做法：",{"type":26,"tag":39,"props":354,"children":355},{},[356,361,366,371],{"type":26,"tag":43,"props":357,"children":358},{},[359],{"type":31,"value":360},"标题和正文之间留小间距",{"type":26,"tag":43,"props":362,"children":363},{},[364],{"type":31,"value":365},"模块与模块之间留大间距",{"type":26,"tag":43,"props":367,"children":368},{},[369],{"type":31,"value":370},"卡片内部留稳定 padding",{"type":26,"tag":43,"props":372,"children":373},{},[374],{"type":31,"value":375},"按钮周围留足点击和视觉空间",{"type":26,"tag":27,"props":377,"children":378},{},[379],{"type":31,"value":380},"如果内容挤在一起，即使颜色好看，用户也会觉得累。",{"type":26,"tag":89,"props":382,"children":384},{"id":383},"四cta-设计要有主次",[385],{"type":31,"value":386},"四、CTA 设计要有主次",{"type":26,"tag":27,"props":388,"children":389},{},[390],{"type":31,"value":391},"一个页面可以有多个按钮，但不应该有多个同等强度的主按钮。",{"type":26,"tag":27,"props":393,"children":394},{},[395],{"type":31,"value":396},"建议：",{"type":26,"tag":101,"props":398,"children":399},{},[400,416],{"type":26,"tag":105,"props":401,"children":402},{},[403],{"type":26,"tag":109,"props":404,"children":405},{},[406,411],{"type":26,"tag":113,"props":407,"children":408},{},[409],{"type":31,"value":410},"按钮类型",{"type":26,"tag":113,"props":412,"children":413},{},[414],{"type":31,"value":415},"使用场景",{"type":26,"tag":129,"props":417,"children":418},{},[419,432,445],{"type":26,"tag":109,"props":420,"children":421},{},[422,427],{"type":26,"tag":136,"props":423,"children":424},{},[425],{"type":31,"value":426},"主按钮",{"type":26,"tag":136,"props":428,"children":429},{},[430],{"type":31,"value":431},"页面最重要行动",{"type":26,"tag":109,"props":433,"children":434},{},[435,440],{"type":26,"tag":136,"props":436,"children":437},{},[438],{"type":31,"value":439},"次按钮",{"type":26,"tag":136,"props":441,"children":442},{},[443],{"type":31,"value":444},"了解更多、查看案例",{"type":26,"tag":109,"props":446,"children":447},{},[448,453],{"type":26,"tag":136,"props":449,"children":450},{},[451],{"type":31,"value":452},"文本链接",{"type":26,"tag":136,"props":454,"children":455},{},[456],{"type":31,"value":457},"辅助跳转、补充说明",{"type":26,"tag":27,"props":459,"children":460},{},[461],{"type":31,"value":462},"如果“立即购买”“联系我们”“查看案例”“下载资料”全都长得一样，用户反而不知道点哪个。",{"type":26,"tag":89,"props":464,"children":466},{"id":465},"五移动端不是把桌面端缩小",[467],{"type":31,"value":468},"五、移动端不是把桌面端缩小",{"type":26,"tag":27,"props":470,"children":471},{},[472],{"type":31,"value":473},"移动端设计要重新考虑：",{"type":26,"tag":39,"props":475,"children":476},{},[477,482,487,492,497],{"type":26,"tag":43,"props":478,"children":479},{},[480],{"type":31,"value":481},"首屏标题是否过长",{"type":26,"tag":43,"props":483,"children":484},{},[485],{"type":31,"value":486},"两列布局是否改为单列",{"type":26,"tag":43,"props":488,"children":489},{},[490],{"type":31,"value":491},"表格是否需要卡片化",{"type":26,"tag":43,"props":493,"children":494},{},[495],{"type":31,"value":496},"固定按钮是否遮挡内容",{"type":26,"tag":43,"props":498,"children":499},{},[500],{"type":31,"value":501},"图片是否仍然传达信息",{"type":26,"tag":27,"props":503,"children":504},{},[505],{"type":31,"value":506},"移动端的核心不是小，而是阅读顺序更线性。",{"type":26,"tag":89,"props":508,"children":510},{"id":509},"六失败案例页面很好看但没有转化",[511],{"type":31,"value":512},"六、失败案例：页面很好看，但没有转化",{"type":26,"tag":27,"props":514,"children":515},{},[516],{"type":31,"value":517},"一个 SaaS 页面用了大图、渐变、动画和很多卡片，视觉很丰富，但用户看完不知道产品具体解决什么问题。原因是：标题太抽象，卖点没有场景，按钮文案都是“了解更多”。",{"type":26,"tag":27,"props":519,"children":520},{},[521],{"type":31,"value":522},"修复方式：",{"type":26,"tag":314,"props":524,"children":525},{},[526,531,536,541,546],{"type":26,"tag":43,"props":527,"children":528},{},[529],{"type":31,"value":530},"H1 改为具体价值主张",{"type":26,"tag":43,"props":532,"children":533},{},[534],{"type":31,"value":535},"首屏补一句适用人群",{"type":26,"tag":43,"props":537,"children":538},{},[539],{"type":31,"value":540},"三个卖点改成问题-解决方案结构",{"type":26,"tag":43,"props":542,"children":543},{},[544],{"type":31,"value":545},"主按钮改为明确行动",{"type":26,"tag":43,"props":547,"children":548},{},[549],{"type":31,"value":550},"案例模块加入具体结果",{"type":26,"tag":27,"props":552,"children":553},{},[554],{"type":31,"value":555},"设计的目标不是让页面更满，而是让判断更快。",{"type":26,"tag":89,"props":557,"children":559},{"id":558},"七网页设计-checklist",[560],{"type":31,"value":561},"七、网页设计 Checklist",{"type":26,"tag":39,"props":563,"children":566},{"className":564},[565],"contains-task-list",[567,580,589,598,607,616,625,634],{"type":26,"tag":43,"props":568,"children":571},{"className":569},[570],"task-list-item",[572,578],{"type":26,"tag":573,"props":574,"children":577},"input",{"disabled":575,"type":576},true,"checkbox",[],{"type":31,"value":579}," 页面主路径是否清楚",{"type":26,"tag":43,"props":581,"children":583},{"className":582},[570],[584,587],{"type":26,"tag":573,"props":585,"children":586},{"disabled":575,"type":576},[],{"type":31,"value":588}," 首屏是否说明对象、价值和行动",{"type":26,"tag":43,"props":590,"children":592},{"className":591},[570],[593,596],{"type":26,"tag":573,"props":594,"children":595},{"disabled":575,"type":576},[],{"type":31,"value":597}," 标题、正文、辅助信息是否有稳定层级",{"type":26,"tag":43,"props":599,"children":601},{"className":600},[570],[602,605],{"type":26,"tag":573,"props":603,"children":604},{"disabled":575,"type":576},[],{"type":31,"value":606}," 留白是否帮助分组，而不是随机撑开",{"type":26,"tag":43,"props":608,"children":610},{"className":609},[570],[611,614],{"type":26,"tag":573,"props":612,"children":613},{"disabled":575,"type":576},[],{"type":31,"value":615}," CTA 是否有明确主次",{"type":26,"tag":43,"props":617,"children":619},{"className":618},[570],[620,623],{"type":26,"tag":573,"props":621,"children":622},{"disabled":575,"type":576},[],{"type":31,"value":624}," 图片是否服务内容，而不是纯装饰",{"type":26,"tag":43,"props":626,"children":628},{"className":627},[570],[629,632],{"type":26,"tag":573,"props":630,"children":631},{"disabled":575,"type":576},[],{"type":31,"value":633}," 移动端是否重新组织阅读顺序",{"type":26,"tag":43,"props":635,"children":637},{"className":636},[570],[638,641],{"type":26,"tag":573,"props":639,"children":640},{"disabled":575,"type":576},[],{"type":31,"value":642}," 页面是否有信任证据和顾虑回答",{"type":26,"tag":89,"props":644,"children":646},{"id":645},"结语",[647],{"type":31,"value":645},{"type":26,"tag":27,"props":649,"children":650},{},[651],{"type":31,"value":652},"网页设计的本质，是用布局和视觉帮助用户更快做判断。漂亮当然重要，但只有当漂亮服务于信息层级、信任建立和行动路径时，它才真正有商业价值。",{"type":26,"tag":27,"props":654,"children":655},{},[656],{"type":31,"value":657},"延伸阅读：",{"type":26,"tag":39,"props":659,"children":660},{},[661,668,675,682],{"type":26,"tag":43,"props":662,"children":663},{},[664],{"type":26,"tag":64,"props":665,"children":666},{"href":66},[667],{"type":31,"value":69},{"type":26,"tag":43,"props":669,"children":670},{},[671],{"type":26,"tag":64,"props":672,"children":673},{"href":74},[674],{"type":31,"value":77},{"type":26,"tag":43,"props":676,"children":677},{},[678],{"type":26,"tag":64,"props":679,"children":680},{"href":82},[681],{"type":31,"value":85},{"type":26,"tag":43,"props":683,"children":684},{},[685],{"type":26,"tag":64,"props":686,"children":688},{"href":687},"/topics/design/trust-building-design-patterns-for-websites",[689],{"type":31,"value":690},"信任构建设计模式",{"title":7,"searchDepth":692,"depth":692,"links":693},3,[694,696,697,698,699,700,701,702,703],{"id":91,"depth":695,"text":94},2,{"id":248,"depth":695,"text":251},{"id":304,"depth":695,"text":307},{"id":339,"depth":695,"text":342},{"id":383,"depth":695,"text":386},{"id":465,"depth":695,"text":468},{"id":509,"depth":695,"text":512},{"id":558,"depth":695,"text":561},{"id":645,"depth":695,"text":645},"markdown","content:topics:design:web-design-layout-visual-hierarchy-practical-guide.md","content","topics/design/web-design-layout-visual-hierarchy-practical-guide.md","topics/design/web-design-layout-visual-hierarchy-practical-guide","md",[711,1062,1364],{"_path":712,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":713,"description":714,"keywords":715,"image":720,"author":11,"date":721,"readingTime":722,"topic":5,"body":723,"_type":704,"_id":1059,"_source":706,"_file":1060,"_stem":1061,"_extension":709},"/topics/design/button-component-design","按钮组件设计详解","学习按钮样式、交互状态、无障碍性和最佳实践",[716,717,718,719,16],"按钮设计","Button Component","交互状态","UI 组件","/images/topics/button-design.jpg","2025-12-08",18,{"type":23,"children":724,"toc":1041},[725,729,734,738,745,756,762,771,777,786,790,796,807,813,822,828,837,842,851,856,867,872,881,886,899,933,944,987,992],{"type":26,"tag":89,"props":726,"children":727},{"id":713},[728],{"type":31,"value":713},{"type":26,"tag":27,"props":730,"children":731},{},[732],{"type":31,"value":733},"按钮是 UI 中最重要的交互元素。优秀的按钮设计能够指导用户行为。",{"type":26,"tag":89,"props":735,"children":736},{"id":410},[737],{"type":31,"value":410},{"type":26,"tag":739,"props":740,"children":742},"h3",{"id":741},"primary-button主按钮",[743],{"type":31,"value":744},"Primary Button（主按钮）",{"type":26,"tag":258,"props":746,"children":751},{"className":747,"code":749,"language":750,"meta":7},[748],"language-css",".btn-primary {\n  background-color: #0066cc;\n  color: #ffffff;\n  padding: 12px 24px;\n  border: none;\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n  background-color: #0052a3;\n  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);\n}\n\n.btn-primary:active {\n  background-color: #003d7a;\n  transform: scale(0.98);\n}\n\n.btn-primary:disabled {\n  background-color: #cccccc;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","css",[752],{"type":26,"tag":265,"props":753,"children":754},{"__ignoreMap":7},[755],{"type":31,"value":749},{"type":26,"tag":739,"props":757,"children":759},{"id":758},"secondary-button次按钮",[760],{"type":31,"value":761},"Secondary Button（次按钮）",{"type":26,"tag":258,"props":763,"children":766},{"className":764,"code":765,"language":750,"meta":7},[748],".btn-secondary {\n  background-color: transparent;\n  color: #0066cc;\n  border: 2px solid #0066cc;\n  padding: 10px 22px;\n  border-radius: 4px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n  background-color: rgba(0, 102, 204, 0.1);\n}\n\n.btn-secondary:active {\n  background-color: rgba(0, 102, 204, 0.2);\n}\n",[767],{"type":26,"tag":265,"props":768,"children":769},{"__ignoreMap":7},[770],{"type":31,"value":765},{"type":26,"tag":739,"props":772,"children":774},{"id":773},"danger-button危险按钮",[775],{"type":31,"value":776},"Danger Button（危险按钮）",{"type":26,"tag":258,"props":778,"children":781},{"className":779,"code":780,"language":750,"meta":7},[748],".btn-danger {\n  background-color: #cc0000;\n  color: #ffffff;\n  padding: 12px 24px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-weight: 600;\n}\n\n.btn-danger:hover {\n  background-color: #990000;\n  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.2);\n}\n",[782],{"type":26,"tag":265,"props":783,"children":784},{"__ignoreMap":7},[785],{"type":31,"value":780},{"type":26,"tag":89,"props":787,"children":788},{"id":718},[789],{"type":31,"value":718},{"type":26,"tag":739,"props":791,"children":793},{"id":792},"loading-状态",[794],{"type":31,"value":795},"Loading 状态",{"type":26,"tag":258,"props":797,"children":802},{"className":798,"code":800,"language":801,"meta":7},[799],"language-jsx","import { useState } from 'react';\n\nfunction Button({ children, onClick, loading, ...props }) {\n  const [isLoading, setIsLoading] = useState(false);\n  \n  const handleClick = async () => {\n    setIsLoading(true);\n    try {\n      await onClick();\n    } finally {\n      setIsLoading(false);\n    }\n  };\n  \n  return (\n    \u003Cbutton\n      onClick={handleClick}\n      disabled={isLoading || loading}\n      aria-busy={isLoading || loading}\n      {...props}\n    >\n      {isLoading ? (\n        \u003C>\n          \u003Cspan className=\"spinner\" aria-hidden=\"true\">\u003C/span>\n          {children}\n        \u003C/>\n      ) : (\n        children\n      )}\n    \u003C/button>\n  );\n}\n","jsx",[803],{"type":26,"tag":265,"props":804,"children":805},{"__ignoreMap":7},[806],{"type":31,"value":800},{"type":26,"tag":739,"props":808,"children":810},{"id":809},"disabled-状态",[811],{"type":31,"value":812},"Disabled 状态",{"type":26,"tag":258,"props":814,"children":817},{"className":815,"code":816,"language":750,"meta":7},[748],".btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background-color: #cccccc;\n  color: #999999;\n}\n\n/* 禁用状态下隐藏指针光标 */\n.btn:disabled:hover {\n  box-shadow: none;\n  transform: none;\n}\n",[818],{"type":26,"tag":265,"props":819,"children":820},{"__ignoreMap":7},[821],{"type":31,"value":816},{"type":26,"tag":739,"props":823,"children":825},{"id":824},"focus-状态",[826],{"type":31,"value":827},"Focus 状态",{"type":26,"tag":258,"props":829,"children":832},{"className":830,"code":831,"language":750,"meta":7},[748],".btn:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1),\n              0 0 0 5px #0066cc;\n}\n\n/* 键盘导航焦点 */\n.btn:focus-visible {\n  outline: 2px solid #0066cc;\n  outline-offset: 2px;\n}\n",[833],{"type":26,"tag":265,"props":834,"children":835},{"__ignoreMap":7},[836],{"type":31,"value":831},{"type":26,"tag":89,"props":838,"children":840},{"id":839},"按钮大小",[841],{"type":31,"value":839},{"type":26,"tag":258,"props":843,"children":846},{"className":844,"code":845,"language":750,"meta":7},[748],"/* 小按钮 */\n.btn-sm {\n  padding: 6px 12px;\n  font-size: 12px;\n  min-height: 32px;\n  min-width: 32px;\n}\n\n/* 中等按钮（默认） */\n.btn-md {\n  padding: 12px 24px;\n  font-size: 16px;\n  min-height: 44px;\n  min-width: 44px;\n}\n\n/* 大按钮 */\n.btn-lg {\n  padding: 16px 32px;\n  font-size: 18px;\n  min-height: 56px;\n  min-width: 56px;\n}\n\n/* 全宽按钮 */\n.btn-block {\n  width: 100%;\n  display: block;\n}\n",[847],{"type":26,"tag":265,"props":848,"children":849},{"__ignoreMap":7},[850],{"type":31,"value":845},{"type":26,"tag":89,"props":852,"children":854},{"id":853},"无障碍性",[855],{"type":31,"value":853},{"type":26,"tag":258,"props":857,"children":862},{"className":858,"code":860,"language":861,"meta":7},[859],"language-html","\u003C!-- 语义正确 -->\n\u003Cbutton type=\"submit\" aria-label=\"提交表单\">\n  提交\n\u003C/button>\n\n\u003C!-- 加载状态 -->\n\u003Cbutton aria-busy=\"true\" disabled>\n  \u003Cspan aria-hidden=\"true\" class=\"spinner\">\u003C/span>\n  加载中...\n\u003C/button>\n\n\u003C!-- 图标按钮 -->\n\u003Cbutton aria-label=\"关闭\">\n  \u003Csvg aria-hidden=\"true\" width=\"24\" height=\"24\">\n    \u003Cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    \u003Cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  \u003C/svg>\n\u003C/button>\n\n\u003C!-- 切换按钮 -->\n\u003Cbutton aria-pressed=\"false\" aria-label=\"点赞\">\n  ♥\n\u003C/button>\n","html",[863],{"type":26,"tag":265,"props":864,"children":865},{"__ignoreMap":7},[866],{"type":31,"value":860},{"type":26,"tag":89,"props":868,"children":870},{"id":869},"完整组件示例",[871],{"type":31,"value":869},{"type":26,"tag":258,"props":873,"children":876},{"className":874,"code":875,"language":801,"meta":7},[799],"const Button = React.forwardRef((\n  {\n    children,\n    variant = 'primary',\n    size = 'md',\n    loading = false,\n    disabled = false,\n    icon,\n    className,\n    ...props\n  },\n  ref\n) => {\n  return (\n    \u003Cbutton\n      ref={ref}\n      className={`btn btn-${variant} btn-${size} ${className}`}\n      disabled={disabled || loading}\n      aria-busy={loading}\n      {...props}\n    >\n      {icon && \u003Cspan className=\"btn-icon\" aria-hidden=\"true\">{icon}\u003C/span>}\n      {loading ? (\n        \u003C>\n          \u003Cspan className=\"spinner\" aria-hidden=\"true\">\u003C/span>\n          {children}\n        \u003C/>\n      ) : (\n        children\n      )}\n    \u003C/button>\n  );\n});\n\nButton.displayName = 'Button';\n",[877],{"type":26,"tag":265,"props":878,"children":879},{"__ignoreMap":7},[880],{"type":31,"value":875},{"type":26,"tag":89,"props":882,"children":884},{"id":883},"最佳实践",[885],{"type":31,"value":883},{"type":26,"tag":27,"props":887,"children":888},{},[889,891,897],{"type":31,"value":890},"✅ ",{"type":26,"tag":892,"props":893,"children":894},"strong",{},[895],{"type":31,"value":896},"应该做的事",{"type":31,"value":898},":",{"type":26,"tag":39,"props":900,"children":901},{},[902,907,912,923,928],{"type":26,"tag":43,"props":903,"children":904},{},[905],{"type":31,"value":906},"最小触摸目标 44x44px",{"type":26,"tag":43,"props":908,"children":909},{},[910],{"type":31,"value":911},"清晰的视觉反馈",{"type":26,"tag":43,"props":913,"children":914},{},[915,917],{"type":31,"value":916},"使用语义 HTML ",{"type":26,"tag":265,"props":918,"children":920},{"className":919},[],[921],{"type":31,"value":922},"\u003Cbutton>",{"type":26,"tag":43,"props":924,"children":925},{},[926],{"type":31,"value":927},"提供加载状态反馈",{"type":26,"tag":43,"props":929,"children":930},{},[931],{"type":31,"value":932},"支持键盘导航",{"type":26,"tag":27,"props":934,"children":935},{},[936,938,943],{"type":31,"value":937},"❌ ",{"type":26,"tag":892,"props":939,"children":940},{},[941],{"type":31,"value":942},"不应该做的事",{"type":31,"value":898},{"type":26,"tag":39,"props":945,"children":946},{},[947,960,965,970,975],{"type":26,"tag":43,"props":948,"children":949},{},[950,952,958],{"type":31,"value":951},"使用 ",{"type":26,"tag":265,"props":953,"children":955},{"className":954},[],[956],{"type":31,"value":957},"\u003Cdiv>",{"type":31,"value":959}," 模拟按钮",{"type":26,"tag":43,"props":961,"children":962},{},[963],{"type":31,"value":964},"隐藏焦点指示器",{"type":26,"tag":43,"props":966,"children":967},{},[968],{"type":31,"value":969},"过多的按钮样式",{"type":26,"tag":43,"props":971,"children":972},{},[973],{"type":31,"value":974},"忽视禁用状态",{"type":26,"tag":43,"props":976,"children":977},{},[978,979,985],{"type":31,"value":951},{"type":26,"tag":265,"props":980,"children":982},{"className":981},[],[983],{"type":31,"value":984},"\u003Ca>",{"type":31,"value":986}," 代替按钮",{"type":26,"tag":89,"props":988,"children":990},{"id":989},"测试清单",[991],{"type":31,"value":989},{"type":26,"tag":39,"props":993,"children":995},{"className":994},[565],[996,1005,1014,1023,1032],{"type":26,"tag":43,"props":997,"children":999},{"className":998},[570],[1000,1003],{"type":26,"tag":573,"props":1001,"children":1002},{"disabled":575,"type":576},[],{"type":31,"value":1004}," 在各种浏览器中测试",{"type":26,"tag":43,"props":1006,"children":1008},{"className":1007},[570],[1009,1012],{"type":26,"tag":573,"props":1010,"children":1011},{"disabled":575,"type":576},[],{"type":31,"value":1013}," 验证键盘导航",{"type":26,"tag":43,"props":1015,"children":1017},{"className":1016},[570],[1018,1021],{"type":26,"tag":573,"props":1019,"children":1020},{"disabled":575,"type":576},[],{"type":31,"value":1022}," 检查色彩对比度",{"type":26,"tag":43,"props":1024,"children":1026},{"className":1025},[570],[1027,1030],{"type":26,"tag":573,"props":1028,"children":1029},{"disabled":575,"type":576},[],{"type":31,"value":1031}," 测试触摸设备",{"type":26,"tag":43,"props":1033,"children":1035},{"className":1034},[570],[1036,1039],{"type":26,"tag":573,"props":1037,"children":1038},{"disabled":575,"type":576},[],{"type":31,"value":1040}," 屏幕阅读器兼容性",{"title":7,"searchDepth":692,"depth":692,"links":1042},[1043,1044,1049,1054,1055,1056,1057,1058],{"id":713,"depth":695,"text":713},{"id":410,"depth":695,"text":410,"children":1045},[1046,1047,1048],{"id":741,"depth":692,"text":744},{"id":758,"depth":692,"text":761},{"id":773,"depth":692,"text":776},{"id":718,"depth":695,"text":718,"children":1050},[1051,1052,1053],{"id":792,"depth":692,"text":795},{"id":809,"depth":692,"text":812},{"id":824,"depth":692,"text":827},{"id":839,"depth":695,"text":839},{"id":853,"depth":695,"text":853},{"id":869,"depth":695,"text":869},{"id":883,"depth":695,"text":883},{"id":989,"depth":695,"text":989},"content:topics:design:button-component-design.md","topics/design/button-component-design.md","topics/design/button-component-design",{"_path":1063,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1064,"description":1065,"keywords":1066,"image":1071,"author":11,"date":721,"readingTime":1072,"topic":5,"body":1073,"_type":704,"_id":1361,"_source":706,"_file":1362,"_stem":1363,"_extension":709},"/topics/design/dark-mode-design","暗黑模式设计完整方案","学习暗黑模式实现、色彩方案、对比度管理和最佳实践",[1067,1068,1069,1070,16],"暗黑模式","Dark Mode","色彩系统","CSS 变量","/images/topics/dark-mode-design.jpg",20,{"type":23,"children":1074,"toc":1344},[1075,1079,1084,1089,1095,1104,1110,1119,1124,1130,1139,1145,1156,1162,1171,1176,1185,1190,1199,1204,1213,1217,1226,1254,1263,1291,1295],{"type":26,"tag":89,"props":1076,"children":1077},{"id":1064},[1078],{"type":31,"value":1064},{"type":26,"tag":27,"props":1080,"children":1081},{},[1082],{"type":31,"value":1083},"暗黑模式已成为现代应用的标准功能。它能够减少眼睛疲劳、节省电池、改善用户体验。",{"type":26,"tag":89,"props":1085,"children":1087},{"id":1086},"核心色彩系统",[1088],{"type":31,"value":1086},{"type":26,"tag":739,"props":1090,"children":1092},{"id":1091},"light-mode-配色",[1093],{"type":31,"value":1094},"Light Mode 配色",{"type":26,"tag":258,"props":1096,"children":1099},{"className":1097,"code":1098,"language":750,"meta":7},[748],":root {\n  /* Light Mode */\n  --bg-primary: #ffffff;\n  --bg-secondary: #f5f5f5;\n  --bg-tertiary: #efefef;\n  \n  --text-primary: #1a1a1a;\n  --text-secondary: #666666;\n  --text-tertiary: #999999;\n  \n  --border-color: #e0e0e0;\n  --divider-color: #f0f0f0;\n}\n",[1100],{"type":26,"tag":265,"props":1101,"children":1102},{"__ignoreMap":7},[1103],{"type":31,"value":1098},{"type":26,"tag":739,"props":1105,"children":1107},{"id":1106},"dark-mode-配色",[1108],{"type":31,"value":1109},"Dark Mode 配色",{"type":26,"tag":258,"props":1111,"children":1114},{"className":1112,"code":1113,"language":750,"meta":7},[748],"@media (prefers-color-scheme: dark) {\n  :root {\n    /* Dark Mode */\n    --bg-primary: #1a1a1a;\n    --bg-secondary: #2d2d2d;\n    --bg-tertiary: #3a3a3a;\n    \n    --text-primary: #ffffff;\n    --text-secondary: #e0e0e0;\n    --text-tertiary: #a0a0a0;\n    \n    --border-color: #404040;\n    --divider-color: #2a2a2a;\n  }\n}\n",[1115],{"type":26,"tag":265,"props":1116,"children":1117},{"__ignoreMap":7},[1118],{"type":31,"value":1113},{"type":26,"tag":89,"props":1120,"children":1122},{"id":1121},"实现方案",[1123],{"type":31,"value":1121},{"type":26,"tag":739,"props":1125,"children":1127},{"id":1126},"方案-1prefers-color-scheme",[1128],{"type":31,"value":1129},"方案 1：prefers-color-scheme",{"type":26,"tag":258,"props":1131,"children":1134},{"className":1132,"code":1133,"language":750,"meta":7},[748],"/* 自动跟随系统设置 */\n@media (prefers-color-scheme: light) {\n  :root {\n    --bg: #fff;\n    --text: #000;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #1a1a1a;\n    --text: #fff;\n  }\n}\n\nbody {\n  background: var(--bg);\n  color: var(--text);\n}\n",[1135],{"type":26,"tag":265,"props":1136,"children":1137},{"__ignoreMap":7},[1138],{"type":31,"value":1133},{"type":26,"tag":739,"props":1140,"children":1142},{"id":1141},"方案-2javascript-切换",[1143],{"type":31,"value":1144},"方案 2：JavaScript 切换",{"type":26,"tag":258,"props":1146,"children":1151},{"className":1147,"code":1149,"language":1150,"meta":7},[1148],"language-javascript","// 检测和切换暗黑模式\nfunction initDarkMode() {\n  const isDark = localStorage.getItem('darkMode') === 'true' ||\n                 window.matchMedia('(prefers-color-scheme: dark)').matches;\n  \n  if (isDark) {\n    document.documentElement.setAttribute('data-theme', 'dark');\n  }\n}\n\nfunction toggleDarkMode() {\n  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n  const newTheme = isDark ? 'light' : 'dark';\n  \n  document.documentElement.setAttribute('data-theme', newTheme);\n  localStorage.setItem('darkMode', newTheme === 'dark');\n}\n\n// CSS 应用\nhtml[data-theme='light'] {\n  color-scheme: light;\n}\n\nhtml[data-theme='dark'] {\n  color-scheme: dark;\n}\n","javascript",[1152],{"type":26,"tag":265,"props":1153,"children":1154},{"__ignoreMap":7},[1155],{"type":31,"value":1149},{"type":26,"tag":739,"props":1157,"children":1159},{"id":1158},"方案-3css-variables-javascript",[1160],{"type":31,"value":1161},"方案 3：CSS Variables + JavaScript",{"type":26,"tag":258,"props":1163,"children":1166},{"className":1164,"code":1165,"language":1150,"meta":7},[1148],"const themes = {\n  light: {\n    '--bg-primary': '#ffffff',\n    '--text-primary': '#000000',\n    '--accent': '#0066cc',\n    '--border': '#e0e0e0',\n  },\n  dark: {\n    '--bg-primary': '#1a1a1a',\n    '--text-primary': '#ffffff',\n    '--accent': '#4da3ff',\n    '--border': '#404040',\n  },\n};\n\nfunction applyTheme(themeName) {\n  const theme = themes[themeName];\n  Object.entries(theme).forEach(([key, value]) => {\n    document.documentElement.style.setProperty(key, value);\n  });\n  localStorage.setItem('theme', themeName);\n}\n",[1167],{"type":26,"tag":265,"props":1168,"children":1169},{"__ignoreMap":7},[1170],{"type":31,"value":1165},{"type":26,"tag":89,"props":1172,"children":1174},{"id":1173},"对比度管理",[1175],{"type":31,"value":1173},{"type":26,"tag":258,"props":1177,"children":1180},{"className":1178,"code":1179,"language":750,"meta":7},[748],"/* Light Mode 对比度 */\n:root {\n  --contrast-high: #000000;     /* 21:1 */\n  --contrast-medium: #333333;   /* 12.6:1 */\n  --contrast-low: #666666;      /* 5.1:1 */\n}\n\n/* Dark Mode 对比度 */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --contrast-high: #ffffff;    /* 21:1 */\n    --contrast-medium: #e0e0e0;  /* 11.6:1 */\n    --contrast-low: #a0a0a0;     /* 4.5:1 */\n  }\n}\n\n/* 应用对比度 */\n.text-primary { color: var(--contrast-high); }\n.text-secondary { color: var(--contrast-medium); }\n.text-tertiary { color: var(--contrast-low); }\n",[1181],{"type":26,"tag":265,"props":1182,"children":1183},{"__ignoreMap":7},[1184],{"type":31,"value":1179},{"type":26,"tag":89,"props":1186,"children":1188},{"id":1187},"图片和图表处理",[1189],{"type":31,"value":1187},{"type":26,"tag":258,"props":1191,"children":1194},{"className":1192,"code":1193,"language":861,"meta":7},[859],"\u003C!-- 针对不同主题的图片 -->\n\u003Cpicture>\n  \u003Csource \n    media=\"(prefers-color-scheme: dark)\" \n    srcset=\"chart-dark.svg\"\n  />\n  \u003Cimg src=\"chart-light.svg\" alt=\"图表\" />\n\u003C/picture>\n\n\u003C!-- SVG 颜色适配 -->\n\u003Csvg class=\"icon\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"currentColor\" />\n\u003C/svg>\n\n\u003Cstyle>\n  .icon {\n    color: var(--text-primary);\n  }\n\u003C/style>\n",[1195],{"type":26,"tag":265,"props":1196,"children":1197},{"__ignoreMap":7},[1198],{"type":31,"value":1193},{"type":26,"tag":89,"props":1200,"children":1202},{"id":1201},"完整示例",[1203],{"type":31,"value":1201},{"type":26,"tag":258,"props":1205,"children":1208},{"className":1206,"code":1207,"language":801,"meta":7},[799],"import { useState, useEffect } from 'react';\n\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n  const [mounted, setMounted] = useState(false);\n  \n  useEffect(() => {\n    setMounted(true);\n    \n    // 获取保存的主题或系统偏好\n    const savedTheme = localStorage.getItem('theme');\n    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches \n      ? 'dark' \n      : 'light';\n    \n    const initialTheme = savedTheme || systemTheme;\n    setTheme(initialTheme);\n    document.documentElement.setAttribute('data-theme', initialTheme);\n  }, []);\n  \n  const toggleTheme = () => {\n    const newTheme = theme === 'light' ? 'dark' : 'light';\n    setTheme(newTheme);\n    localStorage.setItem('theme', newTheme);\n    document.documentElement.setAttribute('data-theme', newTheme);\n  };\n  \n  // 防止闪烁\n  if (!mounted) {\n    return null;\n  }\n  \n  return (\n    \u003CThemeContext.Provider value={{ theme, toggleTheme }}>\n      {children}\n      \u003CThemeToggle theme={theme} onChange={toggleTheme} />\n    \u003C/ThemeContext.Provider>\n  );\n}\n\nfunction ThemeToggle({ theme, onChange }) {\n  return (\n    \u003Cbutton \n      onClick={onChange}\n      aria-label={`切换到${theme === 'light' ? '暗黑' : '亮色'}模式`}\n    >\n      {theme === 'light' ? '🌙' : '☀️'}\n    \u003C/button>\n  );\n}\n",[1209],{"type":26,"tag":265,"props":1210,"children":1211},{"__ignoreMap":7},[1212],{"type":31,"value":1207},{"type":26,"tag":89,"props":1214,"children":1215},{"id":883},[1216],{"type":31,"value":883},{"type":26,"tag":27,"props":1218,"children":1219},{},[1220,1221,1225],{"type":31,"value":890},{"type":26,"tag":892,"props":1222,"children":1223},{},[1224],{"type":31,"value":896},{"type":31,"value":898},{"type":26,"tag":39,"props":1227,"children":1228},{},[1229,1234,1239,1244,1249],{"type":26,"tag":43,"props":1230,"children":1231},{},[1232],{"type":31,"value":1233},"支持系统偏好",{"type":26,"tag":43,"props":1235,"children":1236},{},[1237],{"type":31,"value":1238},"提供手动切换选项",{"type":26,"tag":43,"props":1240,"children":1241},{},[1242],{"type":31,"value":1243},"确保足够的对比度",{"type":26,"tag":43,"props":1245,"children":1246},{},[1247],{"type":31,"value":1248},"优化图片和图表",{"type":26,"tag":43,"props":1250,"children":1251},{},[1252],{"type":31,"value":1253},"防止加载闪烁",{"type":26,"tag":27,"props":1255,"children":1256},{},[1257,1258,1262],{"type":31,"value":937},{"type":26,"tag":892,"props":1259,"children":1260},{},[1261],{"type":31,"value":942},{"type":31,"value":898},{"type":26,"tag":39,"props":1264,"children":1265},{},[1266,1271,1276,1281,1286],{"type":26,"tag":43,"props":1267,"children":1268},{},[1269],{"type":31,"value":1270},"强制单一模式",{"type":26,"tag":43,"props":1272,"children":1273},{},[1274],{"type":31,"value":1275},"忽视性能影响",{"type":26,"tag":43,"props":1277,"children":1278},{},[1279],{"type":31,"value":1280},"使用相同的颜色",{"type":26,"tag":43,"props":1282,"children":1283},{},[1284],{"type":31,"value":1285},"忘记保存用户偏好",{"type":26,"tag":43,"props":1287,"children":1288},{},[1289],{"type":31,"value":1290},"过度使用深色背景",{"type":26,"tag":89,"props":1292,"children":1293},{"id":989},[1294],{"type":31,"value":989},{"type":26,"tag":39,"props":1296,"children":1298},{"className":1297},[565],[1299,1308,1317,1326,1335],{"type":26,"tag":43,"props":1300,"children":1302},{"className":1301},[570],[1303,1306],{"type":26,"tag":573,"props":1304,"children":1305},{"disabled":575,"type":576},[],{"type":31,"value":1307}," 在浅色和深色模式下测试所有页面",{"type":26,"tag":43,"props":1309,"children":1311},{"className":1310},[570],[1312,1315],{"type":26,"tag":573,"props":1313,"children":1314},{"disabled":575,"type":576},[],{"type":31,"value":1316}," 检查颜色对比度符合 WCAG 标准",{"type":26,"tag":43,"props":1318,"children":1320},{"className":1319},[570],[1321,1324],{"type":26,"tag":573,"props":1322,"children":1323},{"disabled":575,"type":576},[],{"type":31,"value":1325}," 验证图片和图表在两种模式下清晰",{"type":26,"tag":43,"props":1327,"children":1329},{"className":1328},[570],[1330,1333],{"type":26,"tag":573,"props":1331,"children":1332},{"disabled":575,"type":576},[],{"type":31,"value":1334}," 测试主题切换的平滑性",{"type":26,"tag":43,"props":1336,"children":1338},{"className":1337},[570],[1339,1342],{"type":26,"tag":573,"props":1340,"children":1341},{"disabled":575,"type":576},[],{"type":31,"value":1343}," 检查用户偏好是否被保存",{"title":7,"searchDepth":692,"depth":692,"links":1345},[1346,1347,1351,1356,1357,1358,1359,1360],{"id":1064,"depth":695,"text":1064},{"id":1086,"depth":695,"text":1086,"children":1348},[1349,1350],{"id":1091,"depth":692,"text":1094},{"id":1106,"depth":692,"text":1109},{"id":1121,"depth":695,"text":1121,"children":1352},[1353,1354,1355],{"id":1126,"depth":692,"text":1129},{"id":1141,"depth":692,"text":1144},{"id":1158,"depth":692,"text":1161},{"id":1173,"depth":695,"text":1173},{"id":1187,"depth":695,"text":1187},{"id":1201,"depth":695,"text":1201},{"id":883,"depth":695,"text":883},{"id":989,"depth":695,"text":989},"content:topics:design:dark-mode-design.md","topics/design/dark-mode-design.md","topics/design/dark-mode-design",{"_path":1365,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1366,"description":1367,"keywords":1368,"image":1373,"author":1374,"date":721,"readingTime":1072,"topic":5,"body":1375,"_type":704,"_id":1640,"_source":706,"_file":1641,"_stem":1642,"_extension":709},"/topics/design/form-controls-design","表单控件设计规范","学习输入框、选择框、复选框等表单控件的设计和实现",[1369,1370,1371,1372,16],"表单设计","Form Controls","输入框","验证反馈","/images/topics/form-controls-design.jpg","AI Content Team",{"type":23,"children":1376,"toc":1626},[1377,1381,1386,1391,1396,1405,1410,1419,1423,1432,1437,1446,1451,1460,1465,1474,1479,1488,1492,1501,1527,1536,1564,1568],{"type":26,"tag":89,"props":1378,"children":1379},{"id":1366},[1380],{"type":31,"value":1366},{"type":26,"tag":27,"props":1382,"children":1383},{},[1384],{"type":31,"value":1385},"优秀的表单设计能够提高用户完成率和满意度。",{"type":26,"tag":89,"props":1387,"children":1389},{"id":1388},"输入框设计",[1390],{"type":31,"value":1388},{"type":26,"tag":739,"props":1392,"children":1394},{"id":1393},"基础文本输入",[1395],{"type":31,"value":1393},{"type":26,"tag":258,"props":1397,"children":1400},{"className":1398,"code":1399,"language":750,"meta":7},[748],".input {\n  width: 100%;\n  padding: 12px 16px;\n  font-size: 16px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  font-family: inherit;\n  transition: border-color 0.2s;\n}\n\n.input:hover {\n  border-color: #bdbdbd;\n}\n\n.input:focus {\n  outline: none;\n  border-color: #0066cc;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n\n.input:disabled {\n  background-color: #f5f5f5;\n  color: #999999;\n  cursor: not-allowed;\n}\n\n.input.error {\n  border-color: #cc0000;\n}\n\n.input.success {\n  border-color: #00cc00;\n}\n",[1401],{"type":26,"tag":265,"props":1402,"children":1403},{"__ignoreMap":7},[1404],{"type":31,"value":1399},{"type":26,"tag":739,"props":1406,"children":1408},{"id":1407},"标签和提示",[1409],{"type":31,"value":1407},{"type":26,"tag":258,"props":1411,"children":1414},{"className":1412,"code":1413,"language":861,"meta":7},[859],"\u003Cdiv class=\"form-group\">\n  \u003Clabel for=\"email\" class=\"form-label\">\n    邮箱地址 \u003Cspan class=\"required\">*\u003C/span>\n  \u003C/label>\n  \u003Cinput\n    id=\"email\"\n    type=\"email\"\n    placeholder=\"user@example.com\"\n    class=\"input\"\n    aria-describedby=\"email-hint\"\n  />\n  \u003Cp id=\"email-hint\" class=\"form-hint\">\n    我们永远不会分享你的邮箱\n  \u003C/p>\n\u003C/div>\n",[1415],{"type":26,"tag":265,"props":1416,"children":1417},{"__ignoreMap":7},[1418],{"type":31,"value":1413},{"type":26,"tag":89,"props":1420,"children":1421},{"id":1372},[1422],{"type":31,"value":1372},{"type":26,"tag":258,"props":1424,"children":1427},{"className":1425,"code":1426,"language":801,"meta":7},[799],"function FormInput({ label, error, success, helperText, value, onChange, ...props }) {\n  return (\n    \u003Cdiv className=\"form-group\">\n      \u003Clabel className=\"form-label\">{label}\u003C/label>\n      \u003Cinput\n        className={`input ${\n          error ? 'error' : success ? 'success' : ''\n        }`}\n        value={value}\n        onChange={onChange}\n        {...props}\n      />\n      {error && (\n        \u003Cp className=\"form-error\" role=\"alert\">\n          {error}\n        \u003C/p>\n      )}\n      {success && (\n        \u003Cp className=\"form-success\">\n          ✓ {success}\n        \u003C/p>\n      )}\n      {helperText && (\n        \u003Cp className=\"form-hint\">{helperText}\u003C/p>\n      )}\n    \u003C/div>\n  );\n}\n",[1428],{"type":26,"tag":265,"props":1429,"children":1430},{"__ignoreMap":7},[1431],{"type":31,"value":1426},{"type":26,"tag":89,"props":1433,"children":1435},{"id":1434},"选择框设计",[1436],{"type":31,"value":1434},{"type":26,"tag":258,"props":1438,"children":1441},{"className":1439,"code":1440,"language":750,"meta":7},[748],".select {\n  appearance: none;\n  width: 100%;\n  padding: 12px 16px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  background-image: url('data:image/svg+xml;...');\n  background-repeat: no-repeat;\n  background-position: right 12px center;\n  padding-right: 40px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.select:hover {\n  border-color: #bdbdbd;\n}\n\n.select:focus {\n  outline: none;\n  border-color: #0066cc;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n",[1442],{"type":26,"tag":265,"props":1443,"children":1444},{"__ignoreMap":7},[1445],{"type":31,"value":1440},{"type":26,"tag":89,"props":1447,"children":1449},{"id":1448},"复选框和单选按钮",[1450],{"type":31,"value":1448},{"type":26,"tag":258,"props":1452,"children":1455},{"className":1453,"code":1454,"language":750,"meta":7},[748],".checkbox-group {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.checkbox-input {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: #0066cc;\n}\n\n.checkbox-label {\n  cursor: pointer;\n  user-select: none;\n}\n\n/* 自定义复选框 */\n.custom-checkbox {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: white;\n  transition: all 0.2s;\n}\n\n.custom-checkbox:checked {\n  background-color: #0066cc;\n  border-color: #0066cc;\n  background-image: url('data:image/svg+xml;...');\n}\n\n.custom-checkbox:focus {\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n",[1456],{"type":26,"tag":265,"props":1457,"children":1458},{"__ignoreMap":7},[1459],{"type":31,"value":1454},{"type":26,"tag":89,"props":1461,"children":1463},{"id":1462},"文本区域",[1464],{"type":31,"value":1462},{"type":26,"tag":258,"props":1466,"children":1469},{"className":1467,"code":1468,"language":750,"meta":7},[748],".textarea {\n  width: 100%;\n  min-height: 120px;\n  padding: 12px 16px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 16px;\n  resize: vertical;\n  transition: border-color 0.2s;\n}\n\n.textarea:focus {\n  outline: none;\n  border-color: #0066cc;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n",[1470],{"type":26,"tag":265,"props":1471,"children":1472},{"__ignoreMap":7},[1473],{"type":31,"value":1468},{"type":26,"tag":89,"props":1475,"children":1477},{"id":1476},"完整表单示例",[1478],{"type":31,"value":1476},{"type":26,"tag":258,"props":1480,"children":1483},{"className":1481,"code":1482,"language":801,"meta":7},[799],"function SignupForm() {\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    password: '',\n    confirmPassword: '',\n    subscribe: false,\n    terms: false,\n  });\n  \n  const [errors, setErrors] = useState({});\n  const [touched, setTouched] = useState({});\n  const [submitted, setSubmitted] = useState(false);\n  \n  const handleChange = (e) => {\n    const { name, value, type, checked } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: type === 'checkbox' ? checked : value,\n    }));\n    \n    // 实时验证\n    if (touched[name]) {\n      validateField(name, type === 'checkbox' ? checked : value);\n    }\n  };\n  \n  const handleBlur = (e) => {\n    const { name } = e.target;\n    setTouched(prev => ({ ...prev, [name]: true }));\n    validateField(name, formData[name]);\n  };\n  \n  const validateField = (name, value) => {\n    const newErrors = { ...errors };\n    \n    switch (name) {\n      case 'name':\n        if (!value) newErrors.name = '名字不能为空';\n        else delete newErrors.name;\n        break;\n      case 'email':\n        if (!value) newErrors.email = '邮箱不能为空';\n        else if (!/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(value)) {\n          newErrors.email = '请输入有效的邮箱';\n        } else {\n          delete newErrors.email;\n        }\n        break;\n      case 'password':\n        if (!value) newErrors.password = '密码不能为空';\n        else if (value.length \u003C 8) newErrors.password = '密码至少 8 位';\n        else delete newErrors.password;\n        break;\n      case 'confirmPassword':\n        if (value !== formData.password) {\n          newErrors.confirmPassword = '两次密码输入不一致';\n        } else {\n          delete newErrors.confirmPassword;\n        }\n        break;\n      case 'terms':\n        if (!value) newErrors.terms = '必须同意服务条款';\n        else delete newErrors.terms;\n        break;\n      default:\n        break;\n    }\n    \n    setErrors(newErrors);\n  };\n  \n  const validate = () => {\n    const newErrors = {};\n    \n    if (!formData.name) newErrors.name = '名字不能为空';\n    if (!formData.email) newErrors.email = '邮箱不能为空';\n    if (formData.password.length \u003C 8) newErrors.password = '密码至少 8 位';\n    if (formData.password !== formData.confirmPassword) {\n      newErrors.confirmPassword = '两次密码输入不一致';\n    }\n    if (!formData.terms) newErrors.terms = '必须同意服务条款';\n    \n    return newErrors;\n  };\n  \n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    \n    // 标记所有字段已触碰\n    setTouched({\n      name: true,\n      email: true,\n      password: true,\n      confirmPassword: true,\n      terms: true,\n    });\n    \n    const newErrors = validate();\n    \n    if (Object.keys(newErrors).length === 0) {\n      setSubmitted(true);\n      // 提交表单\n      console.log('Form submitted:', formData);\n      // 重置表单\n      setFormData({\n        name: '',\n        email: '',\n        password: '',\n        confirmPassword: '',\n        subscribe: false,\n        terms: false,\n      });\n    } else {\n      setErrors(newErrors);\n    }\n  };\n  \n  return (\n    \u003Cform onSubmit={handleSubmit} noValidate>\n      {submitted && (\n        \u003Cdiv className=\"form-success-message\" role=\"alert\">\n          注册成功！\n        \u003C/div>\n      )}\n      \n      \u003CFormInput\n        label=\"姓名\"\n        name=\"name\"\n        value={formData.name}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.name && errors.name}\n        helperText=\"请输入你的全名\"\n      />\n      \n      \u003CFormInput\n        label=\"邮箱\"\n        name=\"email\"\n        type=\"email\"\n        value={formData.email}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.email && errors.email}\n      />\n      \n      \u003CFormInput\n        label=\"密码\"\n        name=\"password\"\n        type=\"password\"\n        value={formData.password}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.password && errors.password}\n        helperText=\"至少 8 个字符\"\n      />\n      \n      \u003CFormInput\n        label=\"确认密码\"\n        name=\"confirmPassword\"\n        type=\"password\"\n        value={formData.confirmPassword}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.confirmPassword && errors.confirmPassword}\n      />\n      \n      \u003Cdiv className=\"form-group\">\n        \u003Clabel className=\"checkbox-label\">\n          \u003Cinput\n            type=\"checkbox\"\n            name=\"subscribe\"\n            checked={formData.subscribe}\n            onChange={handleChange}\n            className=\"checkbox-input\"\n          />\n          订阅我们的新闻通讯\n        \u003C/label>\n      \u003C/div>\n      \n      \u003Cdiv className=\"form-group\">\n        \u003Clabel className=\"checkbox-label\">\n          \u003Cinput\n            type=\"checkbox\"\n            name=\"terms\"\n            checked={formData.terms}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            className=\"checkbox-input\"\n          />\n          我同意\n          \u003Ca href=\"/terms\" target=\"_blank\" rel=\"noopener noreferrer\">\n            服务条款\n          \u003C/a>\n          和\n          \u003Ca href=\"/privacy\" target=\"_blank\" rel=\"noopener noreferrer\">\n            隐私政策\n          \u003C/a>\n        \u003C/label>\n        {touched.terms && errors.terms && (\n          \u003Cp className=\"form-error\">{errors.terms}\u003C/p>\n        )}\n      \u003C/div>\n      \n      \u003Cbutton type=\"submit\" className=\"btn btn-primary btn-block\">\n        注册\n      \u003C/button>\n    \u003C/form>\n  );\n}\n",[1484],{"type":26,"tag":265,"props":1485,"children":1486},{"__ignoreMap":7},[1487],{"type":31,"value":1482},{"type":26,"tag":89,"props":1489,"children":1490},{"id":883},[1491],{"type":31,"value":883},{"type":26,"tag":27,"props":1493,"children":1494},{},[1495,1496,1500],{"type":31,"value":890},{"type":26,"tag":892,"props":1497,"children":1498},{},[1499],{"type":31,"value":896},{"type":31,"value":898},{"type":26,"tag":39,"props":1502,"children":1503},{},[1504,1509,1514,1519,1523],{"type":26,"tag":43,"props":1505,"children":1506},{},[1507],{"type":31,"value":1508},"使用正确的输入类型",{"type":26,"tag":43,"props":1510,"children":1511},{},[1512],{"type":31,"value":1513},"提供实时验证反馈",{"type":26,"tag":43,"props":1515,"children":1516},{},[1517],{"type":31,"value":1518},"清晰的标签和提示",{"type":26,"tag":43,"props":1520,"children":1521},{},[1522],{"type":31,"value":906},{"type":26,"tag":43,"props":1524,"children":1525},{},[1526],{"type":31,"value":932},{"type":26,"tag":27,"props":1528,"children":1529},{},[1530,1531,1535],{"type":31,"value":937},{"type":26,"tag":892,"props":1532,"children":1533},{},[1534],{"type":31,"value":942},{"type":31,"value":898},{"type":26,"tag":39,"props":1537,"children":1538},{},[1539,1544,1549,1554,1559],{"type":26,"tag":43,"props":1540,"children":1541},{},[1542],{"type":31,"value":1543},"隐藏标签",{"type":26,"tag":43,"props":1545,"children":1546},{},[1547],{"type":31,"value":1548},"过度使用占位符",{"type":26,"tag":43,"props":1550,"children":1551},{},[1552],{"type":31,"value":1553},"验证后立即提交",{"type":26,"tag":43,"props":1555,"children":1556},{},[1557],{"type":31,"value":1558},"忽视无障碍性",{"type":26,"tag":43,"props":1560,"children":1561},{},[1562],{"type":31,"value":1563},"复杂的验证规则",{"type":26,"tag":89,"props":1565,"children":1566},{"id":989},[1567],{"type":31,"value":989},{"type":26,"tag":39,"props":1569,"children":1571},{"className":1570},[565],[1572,1581,1590,1599,1608,1617],{"type":26,"tag":43,"props":1573,"children":1575},{"className":1574},[570],[1576,1579],{"type":26,"tag":573,"props":1577,"children":1578},{"disabled":575,"type":576},[],{"type":31,"value":1580}," 所有控件都可用键盘导航",{"type":26,"tag":43,"props":1582,"children":1584},{"className":1583},[570],[1585,1588],{"type":26,"tag":573,"props":1586,"children":1587},{"disabled":575,"type":576},[],{"type":31,"value":1589}," 标签与输入框关联",{"type":26,"tag":43,"props":1591,"children":1593},{"className":1592},[570],[1594,1597],{"type":26,"tag":573,"props":1595,"children":1596},{"disabled":575,"type":576},[],{"type":31,"value":1598}," 验证消息清晰",{"type":26,"tag":43,"props":1600,"children":1602},{"className":1601},[570],[1603,1606],{"type":26,"tag":573,"props":1604,"children":1605},{"disabled":575,"type":576},[],{"type":31,"value":1607}," 色彩对比度足够",{"type":26,"tag":43,"props":1609,"children":1611},{"className":1610},[570],[1612,1615],{"type":26,"tag":573,"props":1613,"children":1614},{"disabled":575,"type":576},[],{"type":31,"value":1616}," 屏幕阅读器兼容",{"type":26,"tag":43,"props":1618,"children":1620},{"className":1619},[570],[1621,1624],{"type":26,"tag":573,"props":1622,"children":1623},{"disabled":575,"type":576},[],{"type":31,"value":1625}," 移动设备测试",{"title":7,"searchDepth":692,"depth":692,"links":1627},[1628,1629,1633,1634,1635,1636,1637,1638,1639],{"id":1366,"depth":695,"text":1366},{"id":1388,"depth":695,"text":1388,"children":1630},[1631,1632],{"id":1393,"depth":692,"text":1393},{"id":1407,"depth":692,"text":1407},{"id":1372,"depth":695,"text":1372},{"id":1434,"depth":695,"text":1434},{"id":1448,"depth":695,"text":1448},{"id":1462,"depth":695,"text":1462},{"id":1476,"depth":695,"text":1476},{"id":883,"depth":695,"text":883},{"id":989,"depth":695,"text":989},"content:topics:design:form-controls-design.md","topics/design/form-controls-design.md","topics/design/form-controls-design",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":1644,"image":17,"imageQuery":18,"pexelsPhotoId":19,"pexelsUrl":20,"featured":6,"readingTime":21,"body":1645,"_type":704,"_id":705,"_source":706,"_file":707,"_stem":708,"_extension":709},[13,14,15,16],{"type":23,"children":1646,"toc":2178},[1647,1651,1655,1670,1689,1693,1697,1811,1815,1819,1823,1831,1835,1854,1858,1862,1866,1881,1885,1889,1893,1897,1916,1920,1924,1928,1932,1985,1989,1993,1997,2020,2024,2028,2032,2036,2059,2063,2067,2135,2139,2143,2147],{"type":26,"tag":27,"props":1648,"children":1649},{},[1650],{"type":31,"value":32},{"type":26,"tag":27,"props":1652,"children":1653},{},[1654],{"type":31,"value":37},{"type":26,"tag":39,"props":1656,"children":1657},{},[1658,1662,1666],{"type":26,"tag":43,"props":1659,"children":1660},{},[1661],{"type":31,"value":47},{"type":26,"tag":43,"props":1663,"children":1664},{},[1665],{"type":31,"value":52},{"type":26,"tag":43,"props":1667,"children":1668},{},[1669],{"type":31,"value":57},{"type":26,"tag":27,"props":1671,"children":1672},{},[1673,1674,1678,1679,1683,1684,1688],{"type":31,"value":62},{"type":26,"tag":64,"props":1675,"children":1676},{"href":66},[1677],{"type":31,"value":69},{"type":31,"value":71},{"type":26,"tag":64,"props":1680,"children":1681},{"href":74},[1682],{"type":31,"value":77},{"type":31,"value":79},{"type":26,"tag":64,"props":1685,"children":1686},{"href":82},[1687],{"type":31,"value":85},{"type":31,"value":87},{"type":26,"tag":89,"props":1690,"children":1691},{"id":91},[1692],{"type":31,"value":94},{"type":26,"tag":27,"props":1694,"children":1695},{},[1696],{"type":31,"value":99},{"type":26,"tag":101,"props":1698,"children":1699},{},[1700,1718],{"type":26,"tag":105,"props":1701,"children":1702},{},[1703],{"type":26,"tag":109,"props":1704,"children":1705},{},[1706,1710,1714],{"type":26,"tag":113,"props":1707,"children":1708},{},[1709],{"type":31,"value":117},{"type":26,"tag":113,"props":1711,"children":1712},{},[1713],{"type":31,"value":122},{"type":26,"tag":113,"props":1715,"children":1716},{},[1717],{"type":31,"value":127},{"type":26,"tag":129,"props":1719,"children":1720},{},[1721,1736,1751,1766,1781,1796],{"type":26,"tag":109,"props":1722,"children":1723},{},[1724,1728,1732],{"type":26,"tag":136,"props":1725,"children":1726},{},[1727],{"type":31,"value":140},{"type":26,"tag":136,"props":1729,"children":1730},{},[1731],{"type":31,"value":145},{"type":26,"tag":136,"props":1733,"children":1734},{},[1735],{"type":31,"value":150},{"type":26,"tag":109,"props":1737,"children":1738},{},[1739,1743,1747],{"type":26,"tag":136,"props":1740,"children":1741},{},[1742],{"type":31,"value":158},{"type":26,"tag":136,"props":1744,"children":1745},{},[1746],{"type":31,"value":163},{"type":26,"tag":136,"props":1748,"children":1749},{},[1750],{"type":31,"value":168},{"type":26,"tag":109,"props":1752,"children":1753},{},[1754,1758,1762],{"type":26,"tag":136,"props":1755,"children":1756},{},[1757],{"type":31,"value":176},{"type":26,"tag":136,"props":1759,"children":1760},{},[1761],{"type":31,"value":181},{"type":26,"tag":136,"props":1763,"children":1764},{},[1765],{"type":31,"value":186},{"type":26,"tag":109,"props":1767,"children":1768},{},[1769,1773,1777],{"type":26,"tag":136,"props":1770,"children":1771},{},[1772],{"type":31,"value":194},{"type":26,"tag":136,"props":1774,"children":1775},{},[1776],{"type":31,"value":199},{"type":26,"tag":136,"props":1778,"children":1779},{},[1780],{"type":31,"value":204},{"type":26,"tag":109,"props":1782,"children":1783},{},[1784,1788,1792],{"type":26,"tag":136,"props":1785,"children":1786},{},[1787],{"type":31,"value":212},{"type":26,"tag":136,"props":1789,"children":1790},{},[1791],{"type":31,"value":217},{"type":26,"tag":136,"props":1793,"children":1794},{},[1795],{"type":31,"value":222},{"type":26,"tag":109,"props":1797,"children":1798},{},[1799,1803,1807],{"type":26,"tag":136,"props":1800,"children":1801},{},[1802],{"type":31,"value":230},{"type":26,"tag":136,"props":1804,"children":1805},{},[1806],{"type":31,"value":235},{"type":26,"tag":136,"props":1808,"children":1809},{},[1810],{"type":31,"value":240},{"type":26,"tag":27,"props":1812,"children":1813},{},[1814],{"type":31,"value":245},{"type":26,"tag":89,"props":1816,"children":1817},{"id":248},[1818],{"type":31,"value":251},{"type":26,"tag":27,"props":1820,"children":1821},{},[1822],{"type":31,"value":256},{"type":26,"tag":258,"props":1824,"children":1826},{"className":1825,"code":262,"language":31,"meta":7},[261],[1827],{"type":26,"tag":265,"props":1828,"children":1829},{"__ignoreMap":7},[1830],{"type":31,"value":262},{"type":26,"tag":27,"props":1832,"children":1833},{},[1834],{"type":31,"value":273},{"type":26,"tag":39,"props":1836,"children":1837},{},[1838,1842,1846,1850],{"type":26,"tag":43,"props":1839,"children":1840},{},[1841],{"type":31,"value":281},{"type":26,"tag":43,"props":1843,"children":1844},{},[1845],{"type":31,"value":286},{"type":26,"tag":43,"props":1847,"children":1848},{},[1849],{"type":31,"value":291},{"type":26,"tag":43,"props":1851,"children":1852},{},[1853],{"type":31,"value":296},{"type":26,"tag":27,"props":1855,"children":1856},{},[1857],{"type":31,"value":301},{"type":26,"tag":89,"props":1859,"children":1860},{"id":304},[1861],{"type":31,"value":307},{"type":26,"tag":27,"props":1863,"children":1864},{},[1865],{"type":31,"value":312},{"type":26,"tag":314,"props":1867,"children":1868},{},[1869,1873,1877],{"type":26,"tag":43,"props":1870,"children":1871},{},[1872],{"type":31,"value":321},{"type":26,"tag":43,"props":1874,"children":1875},{},[1876],{"type":31,"value":326},{"type":26,"tag":43,"props":1878,"children":1879},{},[1880],{"type":31,"value":331},{"type":26,"tag":27,"props":1882,"children":1883},{},[1884],{"type":31,"value":336},{"type":26,"tag":89,"props":1886,"children":1887},{"id":339},[1888],{"type":31,"value":342},{"type":26,"tag":27,"props":1890,"children":1891},{},[1892],{"type":31,"value":347},{"type":26,"tag":27,"props":1894,"children":1895},{},[1896],{"type":31,"value":352},{"type":26,"tag":39,"props":1898,"children":1899},{},[1900,1904,1908,1912],{"type":26,"tag":43,"props":1901,"children":1902},{},[1903],{"type":31,"value":360},{"type":26,"tag":43,"props":1905,"children":1906},{},[1907],{"type":31,"value":365},{"type":26,"tag":43,"props":1909,"children":1910},{},[1911],{"type":31,"value":370},{"type":26,"tag":43,"props":1913,"children":1914},{},[1915],{"type":31,"value":375},{"type":26,"tag":27,"props":1917,"children":1918},{},[1919],{"type":31,"value":380},{"type":26,"tag":89,"props":1921,"children":1922},{"id":383},[1923],{"type":31,"value":386},{"type":26,"tag":27,"props":1925,"children":1926},{},[1927],{"type":31,"value":391},{"type":26,"tag":27,"props":1929,"children":1930},{},[1931],{"type":31,"value":396},{"type":26,"tag":101,"props":1933,"children":1934},{},[1935,1949],{"type":26,"tag":105,"props":1936,"children":1937},{},[1938],{"type":26,"tag":109,"props":1939,"children":1940},{},[1941,1945],{"type":26,"tag":113,"props":1942,"children":1943},{},[1944],{"type":31,"value":410},{"type":26,"tag":113,"props":1946,"children":1947},{},[1948],{"type":31,"value":415},{"type":26,"tag":129,"props":1950,"children":1951},{},[1952,1963,1974],{"type":26,"tag":109,"props":1953,"children":1954},{},[1955,1959],{"type":26,"tag":136,"props":1956,"children":1957},{},[1958],{"type":31,"value":426},{"type":26,"tag":136,"props":1960,"children":1961},{},[1962],{"type":31,"value":431},{"type":26,"tag":109,"props":1964,"children":1965},{},[1966,1970],{"type":26,"tag":136,"props":1967,"children":1968},{},[1969],{"type":31,"value":439},{"type":26,"tag":136,"props":1971,"children":1972},{},[1973],{"type":31,"value":444},{"type":26,"tag":109,"props":1975,"children":1976},{},[1977,1981],{"type":26,"tag":136,"props":1978,"children":1979},{},[1980],{"type":31,"value":452},{"type":26,"tag":136,"props":1982,"children":1983},{},[1984],{"type":31,"value":457},{"type":26,"tag":27,"props":1986,"children":1987},{},[1988],{"type":31,"value":462},{"type":26,"tag":89,"props":1990,"children":1991},{"id":465},[1992],{"type":31,"value":468},{"type":26,"tag":27,"props":1994,"children":1995},{},[1996],{"type":31,"value":473},{"type":26,"tag":39,"props":1998,"children":1999},{},[2000,2004,2008,2012,2016],{"type":26,"tag":43,"props":2001,"children":2002},{},[2003],{"type":31,"value":481},{"type":26,"tag":43,"props":2005,"children":2006},{},[2007],{"type":31,"value":486},{"type":26,"tag":43,"props":2009,"children":2010},{},[2011],{"type":31,"value":491},{"type":26,"tag":43,"props":2013,"children":2014},{},[2015],{"type":31,"value":496},{"type":26,"tag":43,"props":2017,"children":2018},{},[2019],{"type":31,"value":501},{"type":26,"tag":27,"props":2021,"children":2022},{},[2023],{"type":31,"value":506},{"type":26,"tag":89,"props":2025,"children":2026},{"id":509},[2027],{"type":31,"value":512},{"type":26,"tag":27,"props":2029,"children":2030},{},[2031],{"type":31,"value":517},{"type":26,"tag":27,"props":2033,"children":2034},{},[2035],{"type":31,"value":522},{"type":26,"tag":314,"props":2037,"children":2038},{},[2039,2043,2047,2051,2055],{"type":26,"tag":43,"props":2040,"children":2041},{},[2042],{"type":31,"value":530},{"type":26,"tag":43,"props":2044,"children":2045},{},[2046],{"type":31,"value":535},{"type":26,"tag":43,"props":2048,"children":2049},{},[2050],{"type":31,"value":540},{"type":26,"tag":43,"props":2052,"children":2053},{},[2054],{"type":31,"value":545},{"type":26,"tag":43,"props":2056,"children":2057},{},[2058],{"type":31,"value":550},{"type":26,"tag":27,"props":2060,"children":2061},{},[2062],{"type":31,"value":555},{"type":26,"tag":89,"props":2064,"children":2065},{"id":558},[2066],{"type":31,"value":561},{"type":26,"tag":39,"props":2068,"children":2070},{"className":2069},[565],[2071,2079,2087,2095,2103,2111,2119,2127],{"type":26,"tag":43,"props":2072,"children":2074},{"className":2073},[570],[2075,2078],{"type":26,"tag":573,"props":2076,"children":2077},{"disabled":575,"type":576},[],{"type":31,"value":579},{"type":26,"tag":43,"props":2080,"children":2082},{"className":2081},[570],[2083,2086],{"type":26,"tag":573,"props":2084,"children":2085},{"disabled":575,"type":576},[],{"type":31,"value":588},{"type":26,"tag":43,"props":2088,"children":2090},{"className":2089},[570],[2091,2094],{"type":26,"tag":573,"props":2092,"children":2093},{"disabled":575,"type":576},[],{"type":31,"value":597},{"type":26,"tag":43,"props":2096,"children":2098},{"className":2097},[570],[2099,2102],{"type":26,"tag":573,"props":2100,"children":2101},{"disabled":575,"type":576},[],{"type":31,"value":606},{"type":26,"tag":43,"props":2104,"children":2106},{"className":2105},[570],[2107,2110],{"type":26,"tag":573,"props":2108,"children":2109},{"disabled":575,"type":576},[],{"type":31,"value":615},{"type":26,"tag":43,"props":2112,"children":2114},{"className":2113},[570],[2115,2118],{"type":26,"tag":573,"props":2116,"children":2117},{"disabled":575,"type":576},[],{"type":31,"value":624},{"type":26,"tag":43,"props":2120,"children":2122},{"className":2121},[570],[2123,2126],{"type":26,"tag":573,"props":2124,"children":2125},{"disabled":575,"type":576},[],{"type":31,"value":633},{"type":26,"tag":43,"props":2128,"children":2130},{"className":2129},[570],[2131,2134],{"type":26,"tag":573,"props":2132,"children":2133},{"disabled":575,"type":576},[],{"type":31,"value":642},{"type":26,"tag":89,"props":2136,"children":2137},{"id":645},[2138],{"type":31,"value":645},{"type":26,"tag":27,"props":2140,"children":2141},{},[2142],{"type":31,"value":652},{"type":26,"tag":27,"props":2144,"children":2145},{},[2146],{"type":31,"value":657},{"type":26,"tag":39,"props":2148,"children":2149},{},[2150,2157,2164,2171],{"type":26,"tag":43,"props":2151,"children":2152},{},[2153],{"type":26,"tag":64,"props":2154,"children":2155},{"href":66},[2156],{"type":31,"value":69},{"type":26,"tag":43,"props":2158,"children":2159},{},[2160],{"type":26,"tag":64,"props":2161,"children":2162},{"href":74},[2163],{"type":31,"value":77},{"type":26,"tag":43,"props":2165,"children":2166},{},[2167],{"type":26,"tag":64,"props":2168,"children":2169},{"href":82},[2170],{"type":31,"value":85},{"type":26,"tag":43,"props":2172,"children":2173},{},[2174],{"type":26,"tag":64,"props":2175,"children":2176},{"href":687},[2177],{"type":31,"value":690},{"title":7,"searchDepth":692,"depth":692,"links":2179},[2180,2181,2182,2183,2184,2185,2186,2187,2188],{"id":91,"depth":695,"text":94},{"id":248,"depth":695,"text":251},{"id":304,"depth":695,"text":307},{"id":339,"depth":695,"text":342},{"id":383,"depth":695,"text":386},{"id":465,"depth":695,"text":468},{"id":509,"depth":695,"text":512},{"id":558,"depth":695,"text":561},{"id":645,"depth":695,"text":645},1777903492372]