[{"data":1,"prerenderedAt":1767},["ShallowReactive",2],{"article-/topics/design/website-design-guidelines-typography-color-components-guide":3,"related-design":477,"content-query-NFZ9sQa7hj":1419},{"_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":471,"_id":472,"_source":473,"_file":474,"_stem":475,"_extension":476},"/topics/design/website-design-guidelines-typography-color-components-guide","design",false,"","网站设计规范怎么定：字体、颜色、按钮和模块别每一页都重新发明","很多网站越做越乱，不是设计师不够认真，而是每一页都在重新决定字体、颜色、按钮和模块样式。本文从多页面站点的真实协作出发，讲清网站设计规范到底该定到什么程度，才既能统一体验，又不会把项目做僵。","2026-05-19","HTMLPAGE 团队",[13,14,15,16],"网站设计","网页设计","页面设计","设计规范","/images/articles/website-design-guidelines-typography-color-components-guide-featured.jpg","website design guidelines typography color components board",8099582,"https://www.pexels.com/photo/scrabble-pieces-on-a-clipboard-8099582/",15,{"type":23,"children":24,"toc":459},"root",[25,33,38,43,80,87,192,197,203,208,213,238,243,249,254,259,282,287,293,298,303,326,331,337,342,347,365,370,376,381,386,391,396,419,424,430,435,454],{"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":27,"props":39,"children":40},{},[41],{"type":31,"value":42},"所以这篇文章不把网站设计规范写成一本厚手册，而是回答一个更现实的问题：对于正在做官网、内容站或多页面项目的团队，到底先定哪些设计规范最值钱，什么情况下该收紧，什么情况下反而不该过度规范。",{"type":26,"tag":27,"props":44,"children":45},{},[46,48,55,57,63,64,70,72,78],{"type":31,"value":47},"如果你想把这条链补完整，可以搭配 ",{"type":26,"tag":49,"props":50,"children":52},"a",{"href":51},"/topics/design/web-design-proposal-goals-structure-visual-direction",[53],{"type":31,"value":54},"网页设计方案怎么写",{"type":31,"value":56},"、",{"type":26,"tag":49,"props":58,"children":60},{"href":59},"/topics/design/corporate-website-homepage-design-structure-guide",[61],{"type":31,"value":62},"企业官网首页设计怎么做",{"type":31,"value":56},{"type":26,"tag":49,"props":65,"children":67},{"href":66},"/topics/design/page-design-requirements-communication-guide",[68],{"type":31,"value":69},"页面设计需求怎么沟通",{"type":31,"value":71}," 和 ",{"type":26,"tag":49,"props":73,"children":75},{"href":74},"/topics/design/color-system-without-aesthetic",[76],{"type":31,"value":77},"网页设计颜色系统怎么搭",{"type":31,"value":79}," 一起看。",{"type":26,"tag":81,"props":82,"children":84},"h2",{"id":83},"先给结论网站设计规范先定四类共享变量不要一上来试图规范一切",[85],{"type":31,"value":86},"先给结论：网站设计规范先定四类共享变量，不要一上来试图规范一切",{"type":26,"tag":88,"props":89,"children":90},"table",{},[91,115],{"type":26,"tag":92,"props":93,"children":94},"thead",{},[95],{"type":26,"tag":96,"props":97,"children":98},"tr",{},[99,105,110],{"type":26,"tag":100,"props":101,"children":102},"th",{},[103],{"type":31,"value":104},"规范层",{"type":26,"tag":100,"props":106,"children":107},{},[108],{"type":31,"value":109},"最该先锁什么",{"type":26,"tag":100,"props":111,"children":112},{},[113],{"type":31,"value":114},"不先锁会怎样",{"type":26,"tag":116,"props":117,"children":118},"tbody",{},[119,138,156,174],{"type":26,"tag":96,"props":120,"children":121},{},[122,128,133],{"type":26,"tag":123,"props":124,"children":125},"td",{},[126],{"type":31,"value":127},"字体层级",{"type":26,"tag":123,"props":129,"children":130},{},[131],{"type":31,"value":132},"标题、正文、辅助信息的字号和字重关系",{"type":26,"tag":123,"props":134,"children":135},{},[136],{"type":31,"value":137},"每一页都在重新调“哪个更像重点”",{"type":26,"tag":96,"props":139,"children":140},{},[141,146,151],{"type":26,"tag":123,"props":142,"children":143},{},[144],{"type":31,"value":145},"颜色系统",{"type":26,"tag":123,"props":147,"children":148},{},[149],{"type":31,"value":150},"主色、辅助色、状态色和背景层级",{"type":26,"tag":123,"props":152,"children":153},{},[154],{"type":31,"value":155},"页面一多就开始像不同品牌拼在一起",{"type":26,"tag":96,"props":157,"children":158},{},[159,164,169],{"type":26,"tag":123,"props":160,"children":161},{},[162],{"type":31,"value":163},"按钮与表单",{"type":26,"tag":123,"props":165,"children":166},{},[167],{"type":31,"value":168},"CTA 主次权重、圆角、边框和状态反馈",{"type":26,"tag":123,"props":170,"children":171},{},[172],{"type":31,"value":173},"用户不知道什么是主动作，什么只是辅助操作",{"type":26,"tag":96,"props":175,"children":176},{},[177,182,187],{"type":26,"tag":123,"props":178,"children":179},{},[180],{"type":31,"value":181},"模块骨架",{"type":26,"tag":123,"props":183,"children":184},{},[185],{"type":31,"value":186},"常用卡片、案例块、FAQ、证据区的基础节奏",{"type":26,"tag":123,"props":188,"children":189},{},[190],{"type":31,"value":191},"后续复用时每页都像重新设计一次",{"type":26,"tag":27,"props":193,"children":194},{},[195],{"type":31,"value":196},"很多团队做规范最容易走两个极端：要么完全不定，结果整站失控；要么试图一次把所有像素和场景全定死，结果没人愿意用。更稳的方式，是先把最容易引发整站漂移的共享变量固定下来。",{"type":26,"tag":81,"props":198,"children":200},{"id":199},"先定字体和层级因为整站混乱很多时候从谁是重点开始",[201],{"type":31,"value":202},"先定字体和层级，因为整站混乱很多时候从“谁是重点”开始",{"type":26,"tag":27,"props":204,"children":205},{},[206],{"type":31,"value":207},"网站设计规范里最该先定的，通常不是颜色，而是文字层级。因为网站的大部分理解成本，最终都落在标题、正文、说明、标签和按钮这些文字结构上。如果标题层级每页都不一样，或者模块标题、正文和辅助说明的关系一直变化，用户会本能地感到页面“不稳”，哪怕他未必说得出来原因。",{"type":26,"tag":27,"props":209,"children":210},{},[211],{"type":31,"value":212},"更实用的做法，不是给十几种字号，而是先把最常用的三到四档层级定住：",{"type":26,"tag":214,"props":215,"children":216},"ul",{},[217,223,228,233],{"type":26,"tag":218,"props":219,"children":220},"li",{},[221],{"type":31,"value":222},"页面级标题",{"type":26,"tag":218,"props":224,"children":225},{},[226],{"type":31,"value":227},"模块级标题",{"type":26,"tag":218,"props":229,"children":230},{},[231],{"type":31,"value":232},"正文说明",{"type":26,"tag":218,"props":234,"children":235},{},[236],{"type":31,"value":237},"辅助信息或标签",{"type":26,"tag":27,"props":239,"children":240},{},[241],{"type":31,"value":242},"只要这层稳定下来，后面颜色和组件再变化，整站也更容易保持同一种阅读逻辑。反过来，如果层级一直漂，视觉再好看也会显得像拼接出来的。",{"type":26,"tag":81,"props":244,"children":246},{"id":245},"颜色规范的目标不是高级感而是避免页面之间互相打架",[247],{"type":31,"value":248},"颜色规范的目标不是“高级感”，而是避免页面之间互相打架",{"type":26,"tag":27,"props":250,"children":251},{},[252],{"type":31,"value":253},"很多网站设计规范一讨论到颜色，就容易滑向“品牌色够不够高级”。这个问题当然重要，但对多页面网站来说，颜色系统更先解决的是秩序问题。主色、辅助色、警示色、浅背景和深背景如果没有边界，后面每个页面都可能在用自己的方式强调重点，结果整个站点的权重关系会开始互相打架。",{"type":26,"tag":27,"props":255,"children":256},{},[257],{"type":31,"value":258},"所以颜色规范更应该先回答：",{"type":26,"tag":214,"props":260,"children":261},{},[262,267,272,277],{"type":26,"tag":218,"props":263,"children":264},{},[265],{"type":31,"value":266},"什么颜色代表主行动",{"type":26,"tag":218,"props":268,"children":269},{},[270],{"type":31,"value":271},"什么颜色只用于辅助说明或状态提示",{"type":26,"tag":218,"props":273,"children":274},{},[275],{"type":31,"value":276},"页面里的大面积背景允许出现几档深浅",{"type":26,"tag":218,"props":278,"children":279},{},[280],{"type":31,"value":281},"哪些颜色绝不能同时争主视觉",{"type":26,"tag":27,"props":283,"children":284},{},[285],{"type":31,"value":286},"只要这些规则先被说清，页面想做得更克制或更活泼，都还有空间。真正危险的不是某一页颜色选得不完美，而是每一页都在重新定义“重点长什么样”。",{"type":26,"tag":81,"props":288,"children":290},{"id":289},"按钮和模块规范决定后续站点还能不能持续扩展",[291],{"type":31,"value":292},"按钮和模块规范，决定后续站点还能不能持续扩展",{"type":26,"tag":27,"props":294,"children":295},{},[296],{"type":31,"value":297},"网站越往后做，越会发现最费时间的并不是新画页面，而是每次遇到相似模块时又要重新判断一次。按钮应该是实心还是描边？案例卡片要不要带标签？FAQ 是展开式还是列表式？联系区放在每页页尾还是只放在关键页？",{"type":26,"tag":27,"props":299,"children":300},{},[301],{"type":31,"value":302},"这些问题如果没有基础规范，站点每多一个页面，就多一轮讨论。更稳的做法，是先给高频组件设最低限度的共同骨架：",{"type":26,"tag":214,"props":304,"children":305},{},[306,311,316,321],{"type":26,"tag":218,"props":307,"children":308},{},[309],{"type":31,"value":310},"主 CTA 和次 CTA 的固定区分",{"type":26,"tag":218,"props":312,"children":313},{},[314],{"type":31,"value":315},"表单字段、提交按钮、错误反馈的统一做法",{"type":26,"tag":218,"props":317,"children":318},{},[319],{"type":31,"value":320},"案例、证据、FAQ、资源卡片的基础布局",{"type":26,"tag":218,"props":322,"children":323},{},[324],{"type":31,"value":325},"页尾联系模块何时出现，何时不需要重复",{"type":26,"tag":27,"props":327,"children":328},{},[329],{"type":31,"value":330},"这不是要消灭变化，而是让真正需要变化的地方，集中在文案、顺序和场景内容，而不是每次从基础组件开始重做。",{"type":26,"tag":81,"props":332,"children":334},{"id":333},"规范不是越厚越好关键是把允许例外的边界一起写出来",[335],{"type":31,"value":336},"规范不是越厚越好，关键是把“允许例外”的边界一起写出来",{"type":26,"tag":27,"props":338,"children":339},{},[340],{"type":31,"value":341},"很多团队为什么明明写了规范，后面还是没人遵守？原因通常不是执行差，而是规范写得像禁止清单。现实项目里，页面本来就会有例外：活动页节奏更强、案例页信息更密、品牌页图片权重更高。如果规范没有说明什么时候允许偏离、偏离要满足什么条件，大家最后就只剩两种选择：要么强行套规范，要么完全不看规范。",{"type":26,"tag":27,"props":343,"children":344},{},[345],{"type":31,"value":346},"更好的写法，是在规范里直接写清例外原则。例如：",{"type":26,"tag":214,"props":348,"children":349},{},[350,355,360],{"type":26,"tag":218,"props":351,"children":352},{},[353],{"type":31,"value":354},"活动页可以提高首屏节奏，但主 CTA 权重不能失真",{"type":26,"tag":218,"props":356,"children":357},{},[358],{"type":31,"value":359},"案例页可以增加信息密度，但标题层级和按钮语义不能重写",{"type":26,"tag":218,"props":361,"children":362},{},[363],{"type":31,"value":364},"品牌页可以弱化表单，但不能把核心路径藏到找不到",{"type":26,"tag":27,"props":366,"children":367},{},[368],{"type":31,"value":369},"规范一旦带上例外边界，它才会更像“判断工具”，而不是“把所有页面压成一样”的模板。",{"type":26,"tag":81,"props":371,"children":373},{"id":372},"失败案例每个页面都做得不差整站却越来越不像一个站",[374],{"type":31,"value":375},"失败案例：每个页面都做得不差，整站却越来越不像一个站",{"type":26,"tag":27,"props":377,"children":378},{},[379],{"type":31,"value":380},"某团队过去半年陆续扩充官网，从首页扩到行业页、案例页和资源页。因为每次都只新增一两个页面，大家都觉得没必要专门整理规范：这次让设计师顺手调一下就行，下次再看。结果半年后，站点出现一堆说不上来的问题：同样的按钮在不同页面有三种样式，案例卡片的标题和标签关系不一致，首页和资源页的字体层级像两套系统，活动页的背景和色彩又完全跳出了原本品牌语气。",{"type":26,"tag":27,"props":382,"children":383},{},[384],{"type":31,"value":385},"单看任何一页，都还能说得过去；放在一起看，整站开始像不同项目拼成的集合。后来他们花了很长时间回头补规范，不是因为前面的设计都错了，而是因为最基础的共享变量一直没有先定。",{"type":26,"tag":81,"props":387,"children":389},{"id":388},"哪些信号说明你的网站已经该补设计规范了",[390],{"type":31,"value":388},{"type":26,"tag":27,"props":392,"children":393},{},[394],{"type":31,"value":395},"如果网站出现下面这些情况，通常说明规范已经不是“可做可不做”的事：",{"type":26,"tag":214,"props":397,"children":398},{},[399,404,409,414],{"type":26,"tag":218,"props":400,"children":401},{},[402],{"type":31,"value":403},"相同功能按钮在不同页面看起来不像同一类动作",{"type":26,"tag":218,"props":405,"children":406},{},[407],{"type":31,"value":408},"团队每新增一页都要重新讨论标题、卡片和 CTA 样式",{"type":26,"tag":218,"props":410,"children":411},{},[412],{"type":31,"value":413},"不同设计师或不同时间产出的页面气质差异明显",{"type":26,"tag":218,"props":415,"children":416},{},[417],{"type":31,"value":418},"页面复用越来越多，但复用成本反而没有下降",{"type":26,"tag":27,"props":420,"children":421},{},[422],{"type":31,"value":423},"这些信号说明站点的主要矛盾已经不再是“怎么出第一版”，而是“怎么让后面的页面不继续漂移”。",{"type":26,"tag":81,"props":425,"children":427},{"id":426},"先做什么先把整站最常重复的四件事定下来",[428],{"type":31,"value":429},"先做什么：先把整站最常重复的四件事定下来",{"type":26,"tag":27,"props":431,"children":432},{},[433],{"type":31,"value":434},"如果你现在要给网站补设计规范，更稳的起手动作通常是这三步：",{"type":26,"tag":436,"props":437,"children":438},"ol",{},[439,444,449],{"type":26,"tag":218,"props":440,"children":441},{},[442],{"type":31,"value":443},"先盘点整站里最常重复出现的字体层级、按钮、卡片和背景层级。",{"type":26,"tag":218,"props":445,"children":446},{},[447],{"type":31,"value":448},"只定最影响整站一致性的共享变量，不要试图一周内把所有场景写满。",{"type":26,"tag":218,"props":450,"children":451},{},[452],{"type":31,"value":453},"给每条规范配一个“什么时候允许例外”的说明，避免它变成死板禁令。",{"type":26,"tag":27,"props":455,"children":456},{},[457],{"type":31,"value":458},"网站设计规范真正的价值，不是让所有页面看起来完全一样，而是让每一页都不用重新发明基本语言。只要字体、颜色、按钮和模块骨架先稳定下来，后续页面才会越做越顺，而不是越做越散。",{"title":7,"searchDepth":460,"depth":460,"links":461},3,[462,464,465,466,467,468,469,470],{"id":83,"depth":463,"text":86},2,{"id":199,"depth":463,"text":202},{"id":245,"depth":463,"text":248},{"id":289,"depth":463,"text":292},{"id":333,"depth":463,"text":336},{"id":372,"depth":463,"text":375},{"id":388,"depth":463,"text":388},{"id":426,"depth":463,"text":429},"markdown","content:topics:design:website-design-guidelines-typography-color-components-guide.md","content","topics/design/website-design-guidelines-typography-color-components-guide.md","topics/design/website-design-guidelines-typography-color-components-guide","md",[478,838,1140],{"_path":479,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":480,"description":481,"keywords":482,"image":488,"author":11,"date":489,"readingTime":490,"topic":5,"body":491,"_type":471,"_id":835,"_source":473,"_file":836,"_stem":837,"_extension":476},"/topics/design/button-component-design","按钮组件设计详解","学习按钮样式、交互状态、无障碍性和最佳实践",[483,484,485,486,487],"按钮设计","Button Component","交互状态","UI 组件","用户体验","/images/topics/button-design.jpg","2025-12-08",18,{"type":23,"children":492,"toc":817},[493,497,502,507,514,527,533,542,548,557,561,567,578,584,593,599,608,613,622,627,638,643,652,657,670,704,715,758,763],{"type":26,"tag":81,"props":494,"children":495},{"id":480},[496],{"type":31,"value":480},{"type":26,"tag":27,"props":498,"children":499},{},[500],{"type":31,"value":501},"按钮是 UI 中最重要的交互元素。优秀的按钮设计能够指导用户行为。",{"type":26,"tag":81,"props":503,"children":505},{"id":504},"按钮类型",[506],{"type":31,"value":504},{"type":26,"tag":508,"props":509,"children":511},"h3",{"id":510},"primary-button主按钮",[512],{"type":31,"value":513},"Primary Button（主按钮）",{"type":26,"tag":515,"props":516,"children":521},"pre",{"className":517,"code":519,"language":520,"meta":7},[518],"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",[522],{"type":26,"tag":523,"props":524,"children":525},"code",{"__ignoreMap":7},[526],{"type":31,"value":519},{"type":26,"tag":508,"props":528,"children":530},{"id":529},"secondary-button次按钮",[531],{"type":31,"value":532},"Secondary Button（次按钮）",{"type":26,"tag":515,"props":534,"children":537},{"className":535,"code":536,"language":520,"meta":7},[518],".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",[538],{"type":26,"tag":523,"props":539,"children":540},{"__ignoreMap":7},[541],{"type":31,"value":536},{"type":26,"tag":508,"props":543,"children":545},{"id":544},"danger-button危险按钮",[546],{"type":31,"value":547},"Danger Button（危险按钮）",{"type":26,"tag":515,"props":549,"children":552},{"className":550,"code":551,"language":520,"meta":7},[518],".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",[553],{"type":26,"tag":523,"props":554,"children":555},{"__ignoreMap":7},[556],{"type":31,"value":551},{"type":26,"tag":81,"props":558,"children":559},{"id":485},[560],{"type":31,"value":485},{"type":26,"tag":508,"props":562,"children":564},{"id":563},"loading-状态",[565],{"type":31,"value":566},"Loading 状态",{"type":26,"tag":515,"props":568,"children":573},{"className":569,"code":571,"language":572,"meta":7},[570],"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",[574],{"type":26,"tag":523,"props":575,"children":576},{"__ignoreMap":7},[577],{"type":31,"value":571},{"type":26,"tag":508,"props":579,"children":581},{"id":580},"disabled-状态",[582],{"type":31,"value":583},"Disabled 状态",{"type":26,"tag":515,"props":585,"children":588},{"className":586,"code":587,"language":520,"meta":7},[518],".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",[589],{"type":26,"tag":523,"props":590,"children":591},{"__ignoreMap":7},[592],{"type":31,"value":587},{"type":26,"tag":508,"props":594,"children":596},{"id":595},"focus-状态",[597],{"type":31,"value":598},"Focus 状态",{"type":26,"tag":515,"props":600,"children":603},{"className":601,"code":602,"language":520,"meta":7},[518],".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",[604],{"type":26,"tag":523,"props":605,"children":606},{"__ignoreMap":7},[607],{"type":31,"value":602},{"type":26,"tag":81,"props":609,"children":611},{"id":610},"按钮大小",[612],{"type":31,"value":610},{"type":26,"tag":515,"props":614,"children":617},{"className":615,"code":616,"language":520,"meta":7},[518],"/* 小按钮 */\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",[618],{"type":26,"tag":523,"props":619,"children":620},{"__ignoreMap":7},[621],{"type":31,"value":616},{"type":26,"tag":81,"props":623,"children":625},{"id":624},"无障碍性",[626],{"type":31,"value":624},{"type":26,"tag":515,"props":628,"children":633},{"className":629,"code":631,"language":632,"meta":7},[630],"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",[634],{"type":26,"tag":523,"props":635,"children":636},{"__ignoreMap":7},[637],{"type":31,"value":631},{"type":26,"tag":81,"props":639,"children":641},{"id":640},"完整组件示例",[642],{"type":31,"value":640},{"type":26,"tag":515,"props":644,"children":647},{"className":645,"code":646,"language":572,"meta":7},[570],"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",[648],{"type":26,"tag":523,"props":649,"children":650},{"__ignoreMap":7},[651],{"type":31,"value":646},{"type":26,"tag":81,"props":653,"children":655},{"id":654},"最佳实践",[656],{"type":31,"value":654},{"type":26,"tag":27,"props":658,"children":659},{},[660,662,668],{"type":31,"value":661},"✅ ",{"type":26,"tag":663,"props":664,"children":665},"strong",{},[666],{"type":31,"value":667},"应该做的事",{"type":31,"value":669},":",{"type":26,"tag":214,"props":671,"children":672},{},[673,678,683,694,699],{"type":26,"tag":218,"props":674,"children":675},{},[676],{"type":31,"value":677},"最小触摸目标 44x44px",{"type":26,"tag":218,"props":679,"children":680},{},[681],{"type":31,"value":682},"清晰的视觉反馈",{"type":26,"tag":218,"props":684,"children":685},{},[686,688],{"type":31,"value":687},"使用语义 HTML ",{"type":26,"tag":523,"props":689,"children":691},{"className":690},[],[692],{"type":31,"value":693},"\u003Cbutton>",{"type":26,"tag":218,"props":695,"children":696},{},[697],{"type":31,"value":698},"提供加载状态反馈",{"type":26,"tag":218,"props":700,"children":701},{},[702],{"type":31,"value":703},"支持键盘导航",{"type":26,"tag":27,"props":705,"children":706},{},[707,709,714],{"type":31,"value":708},"❌ ",{"type":26,"tag":663,"props":710,"children":711},{},[712],{"type":31,"value":713},"不应该做的事",{"type":31,"value":669},{"type":26,"tag":214,"props":716,"children":717},{},[718,731,736,741,746],{"type":26,"tag":218,"props":719,"children":720},{},[721,723,729],{"type":31,"value":722},"使用 ",{"type":26,"tag":523,"props":724,"children":726},{"className":725},[],[727],{"type":31,"value":728},"\u003Cdiv>",{"type":31,"value":730}," 模拟按钮",{"type":26,"tag":218,"props":732,"children":733},{},[734],{"type":31,"value":735},"隐藏焦点指示器",{"type":26,"tag":218,"props":737,"children":738},{},[739],{"type":31,"value":740},"过多的按钮样式",{"type":26,"tag":218,"props":742,"children":743},{},[744],{"type":31,"value":745},"忽视禁用状态",{"type":26,"tag":218,"props":747,"children":748},{},[749,750,756],{"type":31,"value":722},{"type":26,"tag":523,"props":751,"children":753},{"className":752},[],[754],{"type":31,"value":755},"\u003Ca>",{"type":31,"value":757}," 代替按钮",{"type":26,"tag":81,"props":759,"children":761},{"id":760},"测试清单",[762],{"type":31,"value":760},{"type":26,"tag":214,"props":764,"children":767},{"className":765},[766],"contains-task-list",[768,781,790,799,808],{"type":26,"tag":218,"props":769,"children":772},{"className":770},[771],"task-list-item",[773,779],{"type":26,"tag":774,"props":775,"children":778},"input",{"disabled":776,"type":777},true,"checkbox",[],{"type":31,"value":780}," 在各种浏览器中测试",{"type":26,"tag":218,"props":782,"children":784},{"className":783},[771],[785,788],{"type":26,"tag":774,"props":786,"children":787},{"disabled":776,"type":777},[],{"type":31,"value":789}," 验证键盘导航",{"type":26,"tag":218,"props":791,"children":793},{"className":792},[771],[794,797],{"type":26,"tag":774,"props":795,"children":796},{"disabled":776,"type":777},[],{"type":31,"value":798}," 检查色彩对比度",{"type":26,"tag":218,"props":800,"children":802},{"className":801},[771],[803,806],{"type":26,"tag":774,"props":804,"children":805},{"disabled":776,"type":777},[],{"type":31,"value":807}," 测试触摸设备",{"type":26,"tag":218,"props":809,"children":811},{"className":810},[771],[812,815],{"type":26,"tag":774,"props":813,"children":814},{"disabled":776,"type":777},[],{"type":31,"value":816}," 屏幕阅读器兼容性",{"title":7,"searchDepth":460,"depth":460,"links":818},[819,820,825,830,831,832,833,834],{"id":480,"depth":463,"text":480},{"id":504,"depth":463,"text":504,"children":821},[822,823,824],{"id":510,"depth":460,"text":513},{"id":529,"depth":460,"text":532},{"id":544,"depth":460,"text":547},{"id":485,"depth":463,"text":485,"children":826},[827,828,829],{"id":563,"depth":460,"text":566},{"id":580,"depth":460,"text":583},{"id":595,"depth":460,"text":598},{"id":610,"depth":463,"text":610},{"id":624,"depth":463,"text":624},{"id":640,"depth":463,"text":640},{"id":654,"depth":463,"text":654},{"id":760,"depth":463,"text":760},"content:topics:design:button-component-design.md","topics/design/button-component-design.md","topics/design/button-component-design",{"_path":839,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":840,"description":841,"keywords":842,"image":847,"author":11,"date":489,"readingTime":848,"topic":5,"body":849,"_type":471,"_id":1137,"_source":473,"_file":1138,"_stem":1139,"_extension":476},"/topics/design/dark-mode-design","暗黑模式设计完整方案","学习暗黑模式实现、色彩方案、对比度管理和最佳实践",[843,844,845,846,487],"暗黑模式","Dark Mode","色彩系统","CSS 变量","/images/topics/dark-mode-design.jpg",20,{"type":23,"children":850,"toc":1120},[851,855,860,865,871,880,886,895,900,906,915,921,932,938,947,952,961,966,975,980,989,993,1002,1030,1039,1067,1071],{"type":26,"tag":81,"props":852,"children":853},{"id":840},[854],{"type":31,"value":840},{"type":26,"tag":27,"props":856,"children":857},{},[858],{"type":31,"value":859},"暗黑模式已成为现代应用的标准功能。它能够减少眼睛疲劳、节省电池、改善用户体验。",{"type":26,"tag":81,"props":861,"children":863},{"id":862},"核心色彩系统",[864],{"type":31,"value":862},{"type":26,"tag":508,"props":866,"children":868},{"id":867},"light-mode-配色",[869],{"type":31,"value":870},"Light Mode 配色",{"type":26,"tag":515,"props":872,"children":875},{"className":873,"code":874,"language":520,"meta":7},[518],":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",[876],{"type":26,"tag":523,"props":877,"children":878},{"__ignoreMap":7},[879],{"type":31,"value":874},{"type":26,"tag":508,"props":881,"children":883},{"id":882},"dark-mode-配色",[884],{"type":31,"value":885},"Dark Mode 配色",{"type":26,"tag":515,"props":887,"children":890},{"className":888,"code":889,"language":520,"meta":7},[518],"@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",[891],{"type":26,"tag":523,"props":892,"children":893},{"__ignoreMap":7},[894],{"type":31,"value":889},{"type":26,"tag":81,"props":896,"children":898},{"id":897},"实现方案",[899],{"type":31,"value":897},{"type":26,"tag":508,"props":901,"children":903},{"id":902},"方案-1prefers-color-scheme",[904],{"type":31,"value":905},"方案 1：prefers-color-scheme",{"type":26,"tag":515,"props":907,"children":910},{"className":908,"code":909,"language":520,"meta":7},[518],"/* 自动跟随系统设置 */\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",[911],{"type":26,"tag":523,"props":912,"children":913},{"__ignoreMap":7},[914],{"type":31,"value":909},{"type":26,"tag":508,"props":916,"children":918},{"id":917},"方案-2javascript-切换",[919],{"type":31,"value":920},"方案 2：JavaScript 切换",{"type":26,"tag":515,"props":922,"children":927},{"className":923,"code":925,"language":926,"meta":7},[924],"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",[928],{"type":26,"tag":523,"props":929,"children":930},{"__ignoreMap":7},[931],{"type":31,"value":925},{"type":26,"tag":508,"props":933,"children":935},{"id":934},"方案-3css-variables-javascript",[936],{"type":31,"value":937},"方案 3：CSS Variables + JavaScript",{"type":26,"tag":515,"props":939,"children":942},{"className":940,"code":941,"language":926,"meta":7},[924],"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",[943],{"type":26,"tag":523,"props":944,"children":945},{"__ignoreMap":7},[946],{"type":31,"value":941},{"type":26,"tag":81,"props":948,"children":950},{"id":949},"对比度管理",[951],{"type":31,"value":949},{"type":26,"tag":515,"props":953,"children":956},{"className":954,"code":955,"language":520,"meta":7},[518],"/* 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",[957],{"type":26,"tag":523,"props":958,"children":959},{"__ignoreMap":7},[960],{"type":31,"value":955},{"type":26,"tag":81,"props":962,"children":964},{"id":963},"图片和图表处理",[965],{"type":31,"value":963},{"type":26,"tag":515,"props":967,"children":970},{"className":968,"code":969,"language":632,"meta":7},[630],"\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",[971],{"type":26,"tag":523,"props":972,"children":973},{"__ignoreMap":7},[974],{"type":31,"value":969},{"type":26,"tag":81,"props":976,"children":978},{"id":977},"完整示例",[979],{"type":31,"value":977},{"type":26,"tag":515,"props":981,"children":984},{"className":982,"code":983,"language":572,"meta":7},[570],"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",[985],{"type":26,"tag":523,"props":986,"children":987},{"__ignoreMap":7},[988],{"type":31,"value":983},{"type":26,"tag":81,"props":990,"children":991},{"id":654},[992],{"type":31,"value":654},{"type":26,"tag":27,"props":994,"children":995},{},[996,997,1001],{"type":31,"value":661},{"type":26,"tag":663,"props":998,"children":999},{},[1000],{"type":31,"value":667},{"type":31,"value":669},{"type":26,"tag":214,"props":1003,"children":1004},{},[1005,1010,1015,1020,1025],{"type":26,"tag":218,"props":1006,"children":1007},{},[1008],{"type":31,"value":1009},"支持系统偏好",{"type":26,"tag":218,"props":1011,"children":1012},{},[1013],{"type":31,"value":1014},"提供手动切换选项",{"type":26,"tag":218,"props":1016,"children":1017},{},[1018],{"type":31,"value":1019},"确保足够的对比度",{"type":26,"tag":218,"props":1021,"children":1022},{},[1023],{"type":31,"value":1024},"优化图片和图表",{"type":26,"tag":218,"props":1026,"children":1027},{},[1028],{"type":31,"value":1029},"防止加载闪烁",{"type":26,"tag":27,"props":1031,"children":1032},{},[1033,1034,1038],{"type":31,"value":708},{"type":26,"tag":663,"props":1035,"children":1036},{},[1037],{"type":31,"value":713},{"type":31,"value":669},{"type":26,"tag":214,"props":1040,"children":1041},{},[1042,1047,1052,1057,1062],{"type":26,"tag":218,"props":1043,"children":1044},{},[1045],{"type":31,"value":1046},"强制单一模式",{"type":26,"tag":218,"props":1048,"children":1049},{},[1050],{"type":31,"value":1051},"忽视性能影响",{"type":26,"tag":218,"props":1053,"children":1054},{},[1055],{"type":31,"value":1056},"使用相同的颜色",{"type":26,"tag":218,"props":1058,"children":1059},{},[1060],{"type":31,"value":1061},"忘记保存用户偏好",{"type":26,"tag":218,"props":1063,"children":1064},{},[1065],{"type":31,"value":1066},"过度使用深色背景",{"type":26,"tag":81,"props":1068,"children":1069},{"id":760},[1070],{"type":31,"value":760},{"type":26,"tag":214,"props":1072,"children":1074},{"className":1073},[766],[1075,1084,1093,1102,1111],{"type":26,"tag":218,"props":1076,"children":1078},{"className":1077},[771],[1079,1082],{"type":26,"tag":774,"props":1080,"children":1081},{"disabled":776,"type":777},[],{"type":31,"value":1083}," 在浅色和深色模式下测试所有页面",{"type":26,"tag":218,"props":1085,"children":1087},{"className":1086},[771],[1088,1091],{"type":26,"tag":774,"props":1089,"children":1090},{"disabled":776,"type":777},[],{"type":31,"value":1092}," 检查颜色对比度符合 WCAG 标准",{"type":26,"tag":218,"props":1094,"children":1096},{"className":1095},[771],[1097,1100],{"type":26,"tag":774,"props":1098,"children":1099},{"disabled":776,"type":777},[],{"type":31,"value":1101}," 验证图片和图表在两种模式下清晰",{"type":26,"tag":218,"props":1103,"children":1105},{"className":1104},[771],[1106,1109],{"type":26,"tag":774,"props":1107,"children":1108},{"disabled":776,"type":777},[],{"type":31,"value":1110}," 测试主题切换的平滑性",{"type":26,"tag":218,"props":1112,"children":1114},{"className":1113},[771],[1115,1118],{"type":26,"tag":774,"props":1116,"children":1117},{"disabled":776,"type":777},[],{"type":31,"value":1119}," 检查用户偏好是否被保存",{"title":7,"searchDepth":460,"depth":460,"links":1121},[1122,1123,1127,1132,1133,1134,1135,1136],{"id":840,"depth":463,"text":840},{"id":862,"depth":463,"text":862,"children":1124},[1125,1126],{"id":867,"depth":460,"text":870},{"id":882,"depth":460,"text":885},{"id":897,"depth":463,"text":897,"children":1128},[1129,1130,1131],{"id":902,"depth":460,"text":905},{"id":917,"depth":460,"text":920},{"id":934,"depth":460,"text":937},{"id":949,"depth":463,"text":949},{"id":963,"depth":463,"text":963},{"id":977,"depth":463,"text":977},{"id":654,"depth":463,"text":654},{"id":760,"depth":463,"text":760},"content:topics:design:dark-mode-design.md","topics/design/dark-mode-design.md","topics/design/dark-mode-design",{"_path":1141,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1142,"description":1143,"keywords":1144,"image":1149,"author":1150,"date":489,"readingTime":848,"topic":5,"body":1151,"_type":471,"_id":1416,"_source":473,"_file":1417,"_stem":1418,"_extension":476},"/topics/design/form-controls-design","表单控件设计规范","学习输入框、选择框、复选框等表单控件的设计和实现",[1145,1146,1147,1148,487],"表单设计","Form Controls","输入框","验证反馈","/images/topics/form-controls-design.jpg","AI Content Team",{"type":23,"children":1152,"toc":1402},[1153,1157,1162,1167,1172,1181,1186,1195,1199,1208,1213,1222,1227,1236,1241,1250,1255,1264,1268,1277,1303,1312,1340,1344],{"type":26,"tag":81,"props":1154,"children":1155},{"id":1142},[1156],{"type":31,"value":1142},{"type":26,"tag":27,"props":1158,"children":1159},{},[1160],{"type":31,"value":1161},"优秀的表单设计能够提高用户完成率和满意度。",{"type":26,"tag":81,"props":1163,"children":1165},{"id":1164},"输入框设计",[1166],{"type":31,"value":1164},{"type":26,"tag":508,"props":1168,"children":1170},{"id":1169},"基础文本输入",[1171],{"type":31,"value":1169},{"type":26,"tag":515,"props":1173,"children":1176},{"className":1174,"code":1175,"language":520,"meta":7},[518],".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",[1177],{"type":26,"tag":523,"props":1178,"children":1179},{"__ignoreMap":7},[1180],{"type":31,"value":1175},{"type":26,"tag":508,"props":1182,"children":1184},{"id":1183},"标签和提示",[1185],{"type":31,"value":1183},{"type":26,"tag":515,"props":1187,"children":1190},{"className":1188,"code":1189,"language":632,"meta":7},[630],"\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",[1191],{"type":26,"tag":523,"props":1192,"children":1193},{"__ignoreMap":7},[1194],{"type":31,"value":1189},{"type":26,"tag":81,"props":1196,"children":1197},{"id":1148},[1198],{"type":31,"value":1148},{"type":26,"tag":515,"props":1200,"children":1203},{"className":1201,"code":1202,"language":572,"meta":7},[570],"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",[1204],{"type":26,"tag":523,"props":1205,"children":1206},{"__ignoreMap":7},[1207],{"type":31,"value":1202},{"type":26,"tag":81,"props":1209,"children":1211},{"id":1210},"选择框设计",[1212],{"type":31,"value":1210},{"type":26,"tag":515,"props":1214,"children":1217},{"className":1215,"code":1216,"language":520,"meta":7},[518],".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",[1218],{"type":26,"tag":523,"props":1219,"children":1220},{"__ignoreMap":7},[1221],{"type":31,"value":1216},{"type":26,"tag":81,"props":1223,"children":1225},{"id":1224},"复选框和单选按钮",[1226],{"type":31,"value":1224},{"type":26,"tag":515,"props":1228,"children":1231},{"className":1229,"code":1230,"language":520,"meta":7},[518],".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",[1232],{"type":26,"tag":523,"props":1233,"children":1234},{"__ignoreMap":7},[1235],{"type":31,"value":1230},{"type":26,"tag":81,"props":1237,"children":1239},{"id":1238},"文本区域",[1240],{"type":31,"value":1238},{"type":26,"tag":515,"props":1242,"children":1245},{"className":1243,"code":1244,"language":520,"meta":7},[518],".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",[1246],{"type":26,"tag":523,"props":1247,"children":1248},{"__ignoreMap":7},[1249],{"type":31,"value":1244},{"type":26,"tag":81,"props":1251,"children":1253},{"id":1252},"完整表单示例",[1254],{"type":31,"value":1252},{"type":26,"tag":515,"props":1256,"children":1259},{"className":1257,"code":1258,"language":572,"meta":7},[570],"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",[1260],{"type":26,"tag":523,"props":1261,"children":1262},{"__ignoreMap":7},[1263],{"type":31,"value":1258},{"type":26,"tag":81,"props":1265,"children":1266},{"id":654},[1267],{"type":31,"value":654},{"type":26,"tag":27,"props":1269,"children":1270},{},[1271,1272,1276],{"type":31,"value":661},{"type":26,"tag":663,"props":1273,"children":1274},{},[1275],{"type":31,"value":667},{"type":31,"value":669},{"type":26,"tag":214,"props":1278,"children":1279},{},[1280,1285,1290,1295,1299],{"type":26,"tag":218,"props":1281,"children":1282},{},[1283],{"type":31,"value":1284},"使用正确的输入类型",{"type":26,"tag":218,"props":1286,"children":1287},{},[1288],{"type":31,"value":1289},"提供实时验证反馈",{"type":26,"tag":218,"props":1291,"children":1292},{},[1293],{"type":31,"value":1294},"清晰的标签和提示",{"type":26,"tag":218,"props":1296,"children":1297},{},[1298],{"type":31,"value":677},{"type":26,"tag":218,"props":1300,"children":1301},{},[1302],{"type":31,"value":703},{"type":26,"tag":27,"props":1304,"children":1305},{},[1306,1307,1311],{"type":31,"value":708},{"type":26,"tag":663,"props":1308,"children":1309},{},[1310],{"type":31,"value":713},{"type":31,"value":669},{"type":26,"tag":214,"props":1313,"children":1314},{},[1315,1320,1325,1330,1335],{"type":26,"tag":218,"props":1316,"children":1317},{},[1318],{"type":31,"value":1319},"隐藏标签",{"type":26,"tag":218,"props":1321,"children":1322},{},[1323],{"type":31,"value":1324},"过度使用占位符",{"type":26,"tag":218,"props":1326,"children":1327},{},[1328],{"type":31,"value":1329},"验证后立即提交",{"type":26,"tag":218,"props":1331,"children":1332},{},[1333],{"type":31,"value":1334},"忽视无障碍性",{"type":26,"tag":218,"props":1336,"children":1337},{},[1338],{"type":31,"value":1339},"复杂的验证规则",{"type":26,"tag":81,"props":1341,"children":1342},{"id":760},[1343],{"type":31,"value":760},{"type":26,"tag":214,"props":1345,"children":1347},{"className":1346},[766],[1348,1357,1366,1375,1384,1393],{"type":26,"tag":218,"props":1349,"children":1351},{"className":1350},[771],[1352,1355],{"type":26,"tag":774,"props":1353,"children":1354},{"disabled":776,"type":777},[],{"type":31,"value":1356}," 所有控件都可用键盘导航",{"type":26,"tag":218,"props":1358,"children":1360},{"className":1359},[771],[1361,1364],{"type":26,"tag":774,"props":1362,"children":1363},{"disabled":776,"type":777},[],{"type":31,"value":1365}," 标签与输入框关联",{"type":26,"tag":218,"props":1367,"children":1369},{"className":1368},[771],[1370,1373],{"type":26,"tag":774,"props":1371,"children":1372},{"disabled":776,"type":777},[],{"type":31,"value":1374}," 验证消息清晰",{"type":26,"tag":218,"props":1376,"children":1378},{"className":1377},[771],[1379,1382],{"type":26,"tag":774,"props":1380,"children":1381},{"disabled":776,"type":777},[],{"type":31,"value":1383}," 色彩对比度足够",{"type":26,"tag":218,"props":1385,"children":1387},{"className":1386},[771],[1388,1391],{"type":26,"tag":774,"props":1389,"children":1390},{"disabled":776,"type":777},[],{"type":31,"value":1392}," 屏幕阅读器兼容",{"type":26,"tag":218,"props":1394,"children":1396},{"className":1395},[771],[1397,1400],{"type":26,"tag":774,"props":1398,"children":1399},{"disabled":776,"type":777},[],{"type":31,"value":1401}," 移动设备测试",{"title":7,"searchDepth":460,"depth":460,"links":1403},[1404,1405,1409,1410,1411,1412,1413,1414,1415],{"id":1142,"depth":463,"text":1142},{"id":1164,"depth":463,"text":1164,"children":1406},[1407,1408],{"id":1169,"depth":460,"text":1169},{"id":1183,"depth":460,"text":1183},{"id":1148,"depth":463,"text":1148},{"id":1210,"depth":463,"text":1210},{"id":1224,"depth":463,"text":1224},{"id":1238,"depth":463,"text":1238},{"id":1252,"depth":463,"text":1252},{"id":654,"depth":463,"text":654},{"id":760,"depth":463,"text":760},"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":1420,"image":17,"imageQuery":18,"pexelsPhotoId":19,"pexelsUrl":20,"featured":6,"readingTime":21,"body":1421,"_type":471,"_id":472,"_source":473,"_file":474,"_stem":475,"_extension":476},[13,14,15,16],{"type":23,"children":1422,"toc":1757},[1423,1427,1431,1435,1459,1463,1547,1551,1555,1559,1563,1582,1586,1590,1594,1598,1617,1621,1625,1629,1633,1652,1656,1660,1664,1668,1683,1687,1691,1695,1699,1703,1707,1726,1730,1734,1738,1753],{"type":26,"tag":27,"props":1424,"children":1425},{},[1426],{"type":31,"value":32},{"type":26,"tag":27,"props":1428,"children":1429},{},[1430],{"type":31,"value":37},{"type":26,"tag":27,"props":1432,"children":1433},{},[1434],{"type":31,"value":42},{"type":26,"tag":27,"props":1436,"children":1437},{},[1438,1439,1443,1444,1448,1449,1453,1454,1458],{"type":31,"value":47},{"type":26,"tag":49,"props":1440,"children":1441},{"href":51},[1442],{"type":31,"value":54},{"type":31,"value":56},{"type":26,"tag":49,"props":1445,"children":1446},{"href":59},[1447],{"type":31,"value":62},{"type":31,"value":56},{"type":26,"tag":49,"props":1450,"children":1451},{"href":66},[1452],{"type":31,"value":69},{"type":31,"value":71},{"type":26,"tag":49,"props":1455,"children":1456},{"href":74},[1457],{"type":31,"value":77},{"type":31,"value":79},{"type":26,"tag":81,"props":1460,"children":1461},{"id":83},[1462],{"type":31,"value":86},{"type":26,"tag":88,"props":1464,"children":1465},{},[1466,1484],{"type":26,"tag":92,"props":1467,"children":1468},{},[1469],{"type":26,"tag":96,"props":1470,"children":1471},{},[1472,1476,1480],{"type":26,"tag":100,"props":1473,"children":1474},{},[1475],{"type":31,"value":104},{"type":26,"tag":100,"props":1477,"children":1478},{},[1479],{"type":31,"value":109},{"type":26,"tag":100,"props":1481,"children":1482},{},[1483],{"type":31,"value":114},{"type":26,"tag":116,"props":1485,"children":1486},{},[1487,1502,1517,1532],{"type":26,"tag":96,"props":1488,"children":1489},{},[1490,1494,1498],{"type":26,"tag":123,"props":1491,"children":1492},{},[1493],{"type":31,"value":127},{"type":26,"tag":123,"props":1495,"children":1496},{},[1497],{"type":31,"value":132},{"type":26,"tag":123,"props":1499,"children":1500},{},[1501],{"type":31,"value":137},{"type":26,"tag":96,"props":1503,"children":1504},{},[1505,1509,1513],{"type":26,"tag":123,"props":1506,"children":1507},{},[1508],{"type":31,"value":145},{"type":26,"tag":123,"props":1510,"children":1511},{},[1512],{"type":31,"value":150},{"type":26,"tag":123,"props":1514,"children":1515},{},[1516],{"type":31,"value":155},{"type":26,"tag":96,"props":1518,"children":1519},{},[1520,1524,1528],{"type":26,"tag":123,"props":1521,"children":1522},{},[1523],{"type":31,"value":163},{"type":26,"tag":123,"props":1525,"children":1526},{},[1527],{"type":31,"value":168},{"type":26,"tag":123,"props":1529,"children":1530},{},[1531],{"type":31,"value":173},{"type":26,"tag":96,"props":1533,"children":1534},{},[1535,1539,1543],{"type":26,"tag":123,"props":1536,"children":1537},{},[1538],{"type":31,"value":181},{"type":26,"tag":123,"props":1540,"children":1541},{},[1542],{"type":31,"value":186},{"type":26,"tag":123,"props":1544,"children":1545},{},[1546],{"type":31,"value":191},{"type":26,"tag":27,"props":1548,"children":1549},{},[1550],{"type":31,"value":196},{"type":26,"tag":81,"props":1552,"children":1553},{"id":199},[1554],{"type":31,"value":202},{"type":26,"tag":27,"props":1556,"children":1557},{},[1558],{"type":31,"value":207},{"type":26,"tag":27,"props":1560,"children":1561},{},[1562],{"type":31,"value":212},{"type":26,"tag":214,"props":1564,"children":1565},{},[1566,1570,1574,1578],{"type":26,"tag":218,"props":1567,"children":1568},{},[1569],{"type":31,"value":222},{"type":26,"tag":218,"props":1571,"children":1572},{},[1573],{"type":31,"value":227},{"type":26,"tag":218,"props":1575,"children":1576},{},[1577],{"type":31,"value":232},{"type":26,"tag":218,"props":1579,"children":1580},{},[1581],{"type":31,"value":237},{"type":26,"tag":27,"props":1583,"children":1584},{},[1585],{"type":31,"value":242},{"type":26,"tag":81,"props":1587,"children":1588},{"id":245},[1589],{"type":31,"value":248},{"type":26,"tag":27,"props":1591,"children":1592},{},[1593],{"type":31,"value":253},{"type":26,"tag":27,"props":1595,"children":1596},{},[1597],{"type":31,"value":258},{"type":26,"tag":214,"props":1599,"children":1600},{},[1601,1605,1609,1613],{"type":26,"tag":218,"props":1602,"children":1603},{},[1604],{"type":31,"value":266},{"type":26,"tag":218,"props":1606,"children":1607},{},[1608],{"type":31,"value":271},{"type":26,"tag":218,"props":1610,"children":1611},{},[1612],{"type":31,"value":276},{"type":26,"tag":218,"props":1614,"children":1615},{},[1616],{"type":31,"value":281},{"type":26,"tag":27,"props":1618,"children":1619},{},[1620],{"type":31,"value":286},{"type":26,"tag":81,"props":1622,"children":1623},{"id":289},[1624],{"type":31,"value":292},{"type":26,"tag":27,"props":1626,"children":1627},{},[1628],{"type":31,"value":297},{"type":26,"tag":27,"props":1630,"children":1631},{},[1632],{"type":31,"value":302},{"type":26,"tag":214,"props":1634,"children":1635},{},[1636,1640,1644,1648],{"type":26,"tag":218,"props":1637,"children":1638},{},[1639],{"type":31,"value":310},{"type":26,"tag":218,"props":1641,"children":1642},{},[1643],{"type":31,"value":315},{"type":26,"tag":218,"props":1645,"children":1646},{},[1647],{"type":31,"value":320},{"type":26,"tag":218,"props":1649,"children":1650},{},[1651],{"type":31,"value":325},{"type":26,"tag":27,"props":1653,"children":1654},{},[1655],{"type":31,"value":330},{"type":26,"tag":81,"props":1657,"children":1658},{"id":333},[1659],{"type":31,"value":336},{"type":26,"tag":27,"props":1661,"children":1662},{},[1663],{"type":31,"value":341},{"type":26,"tag":27,"props":1665,"children":1666},{},[1667],{"type":31,"value":346},{"type":26,"tag":214,"props":1669,"children":1670},{},[1671,1675,1679],{"type":26,"tag":218,"props":1672,"children":1673},{},[1674],{"type":31,"value":354},{"type":26,"tag":218,"props":1676,"children":1677},{},[1678],{"type":31,"value":359},{"type":26,"tag":218,"props":1680,"children":1681},{},[1682],{"type":31,"value":364},{"type":26,"tag":27,"props":1684,"children":1685},{},[1686],{"type":31,"value":369},{"type":26,"tag":81,"props":1688,"children":1689},{"id":372},[1690],{"type":31,"value":375},{"type":26,"tag":27,"props":1692,"children":1693},{},[1694],{"type":31,"value":380},{"type":26,"tag":27,"props":1696,"children":1697},{},[1698],{"type":31,"value":385},{"type":26,"tag":81,"props":1700,"children":1701},{"id":388},[1702],{"type":31,"value":388},{"type":26,"tag":27,"props":1704,"children":1705},{},[1706],{"type":31,"value":395},{"type":26,"tag":214,"props":1708,"children":1709},{},[1710,1714,1718,1722],{"type":26,"tag":218,"props":1711,"children":1712},{},[1713],{"type":31,"value":403},{"type":26,"tag":218,"props":1715,"children":1716},{},[1717],{"type":31,"value":408},{"type":26,"tag":218,"props":1719,"children":1720},{},[1721],{"type":31,"value":413},{"type":26,"tag":218,"props":1723,"children":1724},{},[1725],{"type":31,"value":418},{"type":26,"tag":27,"props":1727,"children":1728},{},[1729],{"type":31,"value":423},{"type":26,"tag":81,"props":1731,"children":1732},{"id":426},[1733],{"type":31,"value":429},{"type":26,"tag":27,"props":1735,"children":1736},{},[1737],{"type":31,"value":434},{"type":26,"tag":436,"props":1739,"children":1740},{},[1741,1745,1749],{"type":26,"tag":218,"props":1742,"children":1743},{},[1744],{"type":31,"value":443},{"type":26,"tag":218,"props":1746,"children":1747},{},[1748],{"type":31,"value":448},{"type":26,"tag":218,"props":1750,"children":1751},{},[1752],{"type":31,"value":453},{"type":26,"tag":27,"props":1754,"children":1755},{},[1756],{"type":31,"value":458},{"title":7,"searchDepth":460,"depth":460,"links":1758},[1759,1760,1761,1762,1763,1764,1765,1766],{"id":83,"depth":463,"text":86},{"id":199,"depth":463,"text":202},{"id":245,"depth":463,"text":248},{"id":289,"depth":463,"text":292},{"id":333,"depth":463,"text":336},{"id":372,"depth":463,"text":375},{"id":388,"depth":463,"text":388},{"id":426,"depth":463,"text":429},1779260404910]