[{"data":1,"prerenderedAt":2038},["ShallowReactive",2],{"article-/topics/design/microinteraction-design-complete-guide":3,"related-design":632,"content-query-YGrvfhm9IF":1563},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":626,"_id":627,"_source":628,"_file":629,"_stem":630,"_extension":631},"/topics/design/microinteraction-design-complete-guide","design",false,"","微交互设计完整指南：触发、反馈、节奏与实现边界","从按钮反馈、表单状态、加载过渡到列表操作，系统讲清微交互为什么重要、该怎么设计、什么时候该收，避免把页面做成“到处都在动”。","2026-04-06","HTMLPAGE 团队",[13,14,15,16,17],"微交互","交互动效","设计系统","用户体验","前端实现","/images/topics/design/microinteraction-design-complete-guide.jpg","ui animation design prototype laptop",3913016,"https://www.pexels.com/photo/3d-design-on-laptop-screen-3913016/",13,{"type":24,"children":25,"toc":608},"root",[26,34,40,45,65,71,76,181,186,192,197,216,221,239,244,250,255,283,288,294,299,322,327,332,350,356,361,384,389,395,400,413,418,436,442,523,529,536,541,547,552,558,563,568],{"type":27,"tag":28,"props":29,"children":31},"element","h2",{"id":30},"微交互设计完整指南",[32],{"type":33,"value":30},"text",{"type":27,"tag":35,"props":36,"children":37},"p",{},[38],{"type":33,"value":39},"很多页面并不缺功能，缺的是“反馈”。用户点击了、提交了、切换了、等待了，但界面没有在关键时刻给出清楚回应，体验就会显得又慢又生硬。",{"type":27,"tag":35,"props":41,"children":42},{},[43],{"type":33,"value":44},"微交互的价值，不是让界面更花，而是让用户知道：",{"type":27,"tag":46,"props":47,"children":48},"ul",{},[49,55,60],{"type":27,"tag":50,"props":51,"children":52},"li",{},[53],{"type":33,"value":54},"刚才发生了什么。",{"type":27,"tag":50,"props":56,"children":57},{},[58],{"type":33,"value":59},"系统现在处于什么状态。",{"type":27,"tag":50,"props":61,"children":62},{},[63],{"type":33,"value":64},"我下一步该做什么。",{"type":27,"tag":28,"props":66,"children":68},{"id":67},"_1-微交互解决的是状态理解不是装饰需求",[69],{"type":33,"value":70},"1. 微交互解决的是“状态理解”，不是装饰需求",{"type":27,"tag":35,"props":72,"children":73},{},[74],{"type":33,"value":75},"一个有效的微交互，至少应该承担下面一种作用：",{"type":27,"tag":77,"props":78,"children":79},"table",{},[80,104],{"type":27,"tag":81,"props":82,"children":83},"thead",{},[84],{"type":27,"tag":85,"props":86,"children":87},"tr",{},[88,94,99],{"type":27,"tag":89,"props":90,"children":91},"th",{},[92],{"type":33,"value":93},"作用",{"type":27,"tag":89,"props":95,"children":96},{},[97],{"type":33,"value":98},"例子",{"type":27,"tag":89,"props":100,"children":101},{},[102],{"type":33,"value":103},"价值",{"type":27,"tag":105,"props":106,"children":107},"tbody",{},[108,127,145,163],{"type":27,"tag":85,"props":109,"children":110},{},[111,117,122],{"type":27,"tag":112,"props":113,"children":114},"td",{},[115],{"type":33,"value":116},"确认操作",{"type":27,"tag":112,"props":118,"children":119},{},[120],{"type":33,"value":121},"按钮按下反馈",{"type":27,"tag":112,"props":123,"children":124},{},[125],{"type":33,"value":126},"让用户知道点击已生效",{"type":27,"tag":85,"props":128,"children":129},{},[130,135,140],{"type":27,"tag":112,"props":131,"children":132},{},[133],{"type":33,"value":134},"说明状态",{"type":27,"tag":112,"props":136,"children":137},{},[138],{"type":33,"value":139},"加载骨架、处理中动画",{"type":27,"tag":112,"props":141,"children":142},{},[143],{"type":33,"value":144},"缓解等待焦虑",{"type":27,"tag":85,"props":146,"children":147},{},[148,153,158],{"type":27,"tag":112,"props":149,"children":150},{},[151],{"type":33,"value":152},"提示结果",{"type":27,"tag":112,"props":154,"children":155},{},[156],{"type":33,"value":157},"成功 toast、错误提示",{"type":27,"tag":112,"props":159,"children":160},{},[161],{"type":33,"value":162},"缩短判断时间",{"type":27,"tag":85,"props":164,"children":165},{},[166,171,176],{"type":27,"tag":112,"props":167,"children":168},{},[169],{"type":33,"value":170},"引导注意力",{"type":27,"tag":112,"props":172,"children":173},{},[174],{"type":33,"value":175},"展开、聚焦、高亮过渡",{"type":27,"tag":112,"props":177,"children":178},{},[179],{"type":33,"value":180},"帮助理解界面变化",{"type":27,"tag":35,"props":182,"children":183},{},[184],{"type":33,"value":185},"如果一个动效既不帮助理解，也不影响结果，那它大概率只是噪音。",{"type":27,"tag":28,"props":187,"children":189},{"id":188},"_2-好的微交互来自触发-反馈-收束三段式",[190],{"type":33,"value":191},"2. 好的微交互，来自“触发-反馈-收束”三段式",{"type":27,"tag":35,"props":193,"children":194},{},[195],{"type":33,"value":196},"最稳的设计模型不是追求酷炫，而是追求节奏完整：",{"type":27,"tag":198,"props":199,"children":200},"ol",{},[201,206,211],{"type":27,"tag":50,"props":202,"children":203},{},[204],{"type":33,"value":205},"触发：用户做了什么。",{"type":27,"tag":50,"props":207,"children":208},{},[209],{"type":33,"value":210},"反馈：系统如何回应。",{"type":27,"tag":50,"props":212,"children":213},{},[214],{"type":33,"value":215},"收束：状态如何回到稳定界面。",{"type":27,"tag":35,"props":217,"children":218},{},[219],{"type":33,"value":220},"例如提交表单：",{"type":27,"tag":46,"props":222,"children":223},{},[224,229,234],{"type":27,"tag":50,"props":225,"children":226},{},[227],{"type":33,"value":228},"点击按钮后立刻出现 loading。",{"type":27,"tag":50,"props":230,"children":231},{},[232],{"type":33,"value":233},"处理中禁用重复提交。",{"type":27,"tag":50,"props":235,"children":236},{},[237],{"type":33,"value":238},"成功后给明确结果并恢复页面。",{"type":27,"tag":35,"props":240,"children":241},{},[242],{"type":33,"value":243},"这套节奏比“一个漂亮的 easing 曲线”更重要。",{"type":27,"tag":28,"props":245,"children":247},{"id":246},"_3-最值得优先做微交互的区域不是首页大动画而是高频操作",[248],{"type":33,"value":249},"3. 最值得优先做微交互的区域，不是首页大动画，而是高频操作",{"type":27,"tag":35,"props":251,"children":252},{},[253],{"type":33,"value":254},"优先级通常应该是：",{"type":27,"tag":46,"props":256,"children":257},{},[258,263,268,273,278],{"type":27,"tag":50,"props":259,"children":260},{},[261],{"type":33,"value":262},"按钮点击与禁用反馈。",{"type":27,"tag":50,"props":264,"children":265},{},[266],{"type":33,"value":267},"输入框校验与焦点状态。",{"type":27,"tag":50,"props":269,"children":270},{},[271],{"type":33,"value":272},"列表新增、删除、重排。",{"type":27,"tag":50,"props":274,"children":275},{},[276],{"type":33,"value":277},"弹层打开与关闭。",{"type":27,"tag":50,"props":279,"children":280},{},[281],{"type":33,"value":282},"加载和空状态切换。",{"type":27,"tag":35,"props":284,"children":285},{},[286],{"type":33,"value":287},"这些地方用户每天都会碰到，比首屏一次性的展示动画更影响整体体验。",{"type":27,"tag":28,"props":289,"children":291},{"id":290},"_4-一个常见失败案例所有东西都在动结果没有重点",[292],{"type":33,"value":293},"4. 一个常见失败案例：所有东西都在动，结果没有重点",{"type":27,"tag":35,"props":295,"children":296},{},[297],{"type":33,"value":298},"失败页面通常会出现这些现象：",{"type":27,"tag":46,"props":300,"children":301},{},[302,307,312,317],{"type":27,"tag":50,"props":303,"children":304},{},[305],{"type":33,"value":306},"卡片 hover 都有复杂位移。",{"type":27,"tag":50,"props":308,"children":309},{},[310],{"type":33,"value":311},"按钮、图标、背景同时动。",{"type":27,"tag":50,"props":313,"children":314},{},[315],{"type":33,"value":316},"加载、切页、弹窗都用了不同节奏。",{"type":27,"tag":50,"props":318,"children":319},{},[320],{"type":33,"value":321},"动效很多，但用户还是分不清状态。",{"type":27,"tag":35,"props":323,"children":324},{},[325],{"type":33,"value":326},"根因不是“动效太多”本身，而是没有主次。",{"type":27,"tag":35,"props":328,"children":329},{},[330],{"type":33,"value":331},"修复方式通常是：",{"type":27,"tag":198,"props":333,"children":334},{},[335,340,345],{"type":27,"tag":50,"props":336,"children":337},{},[338],{"type":33,"value":339},"先定义哪些动作必须反馈。",{"type":27,"tag":50,"props":341,"children":342},{},[343],{"type":33,"value":344},"再统一时长和节奏曲线。",{"type":27,"tag":50,"props":346,"children":347},{},[348],{"type":33,"value":349},"把展示型动效收缩到极少数关键位置。",{"type":27,"tag":28,"props":351,"children":353},{"id":352},"_5-微交互需要和实现成本一起评估",[354],{"type":33,"value":355},"5. 微交互需要和实现成本一起评估",{"type":27,"tag":35,"props":357,"children":358},{},[359],{"type":33,"value":360},"不是每个交互都值得写成复杂动画。设计决策至少要同时考虑：",{"type":27,"tag":46,"props":362,"children":363},{},[364,369,374,379],{"type":27,"tag":50,"props":365,"children":366},{},[367],{"type":33,"value":368},"用户收益是否明显。",{"type":27,"tag":50,"props":370,"children":371},{},[372],{"type":33,"value":373},"对性能有没有影响。",{"type":27,"tag":50,"props":375,"children":376},{},[377],{"type":33,"value":378},"是否增加状态复杂度。",{"type":27,"tag":50,"props":380,"children":381},{},[382],{"type":33,"value":383},"是否会让无障碍体验变差。",{"type":27,"tag":35,"props":385,"children":386},{},[387],{"type":33,"value":388},"例如列表删除动画，如果会影响键盘焦点和屏幕阅读器顺序，那它就不能只按视觉效果决策。",{"type":27,"tag":28,"props":390,"children":392},{"id":391},"_6-如何把微交互纳入设计系统而不是每页单独发挥",[393],{"type":33,"value":394},"6. 如何把微交互纳入设计系统，而不是每页单独发挥",{"type":27,"tag":35,"props":396,"children":397},{},[398],{"type":33,"value":399},"更成熟的做法，是把微交互当作设计令牌的一部分统一管理：",{"type":27,"tag":401,"props":402,"children":407},"pre",{"className":403,"code":405,"language":406,"meta":7},[404],"language-css",":root {\n  --motion-fast: 120ms;\n  --motion-base: 180ms;\n  --motion-emphasis: 260ms;\n  --easing-standard: cubic-bezier(0.2, 0, 0, 1);\n}\n","css",[408],{"type":27,"tag":409,"props":410,"children":411},"code",{"__ignoreMap":7},[412],{"type":33,"value":405},{"type":27,"tag":35,"props":414,"children":415},{},[416],{"type":33,"value":417},"这样你才能保证：",{"type":27,"tag":46,"props":419,"children":420},{},[421,426,431],{"type":27,"tag":50,"props":422,"children":423},{},[424],{"type":33,"value":425},"不同页面反馈节奏一致。",{"type":27,"tag":50,"props":427,"children":428},{},[429],{"type":33,"value":430},"新组件不会各用各的动画风格。",{"type":27,"tag":50,"props":432,"children":433},{},[434],{"type":33,"value":435},"前端实现和设计规范可对齐。",{"type":27,"tag":28,"props":437,"children":439},{"id":438},"_7-上线前-checklist",[440],{"type":33,"value":441},"7. 上线前 Checklist",{"type":27,"tag":46,"props":443,"children":446},{"className":444},[445],"contains-task-list",[447,460,469,478,487,496,505,514],{"type":27,"tag":50,"props":448,"children":451},{"className":449},[450],"task-list-item",[452,458],{"type":27,"tag":453,"props":454,"children":457},"input",{"disabled":455,"type":456},true,"checkbox",[],{"type":33,"value":459}," 微交互只覆盖高频关键操作，而不是到处加动效。",{"type":27,"tag":50,"props":461,"children":463},{"className":462},[450],[464,467],{"type":27,"tag":453,"props":465,"children":466},{"disabled":455,"type":456},[],{"type":33,"value":468}," 每个交互都能说清触发、反馈、收束。",{"type":27,"tag":50,"props":470,"children":472},{"className":471},[450],[473,476],{"type":27,"tag":453,"props":474,"children":475},{"disabled":455,"type":456},[],{"type":33,"value":477}," 动效时长和 easing 已统一，不是每处随意设置。",{"type":27,"tag":50,"props":479,"children":481},{"className":480},[450],[482,485],{"type":27,"tag":453,"props":483,"children":484},{"disabled":455,"type":456},[],{"type":33,"value":486}," loading、成功、失败三种状态反馈清楚。",{"type":27,"tag":50,"props":488,"children":490},{"className":489},[450],[491,494],{"type":27,"tag":453,"props":492,"children":493},{"disabled":455,"type":456},[],{"type":33,"value":495}," 动效没有影响无障碍、键盘焦点和可读性。",{"type":27,"tag":50,"props":497,"children":499},{"className":498},[450],[500,503],{"type":27,"tag":453,"props":501,"children":502},{"disabled":455,"type":456},[],{"type":33,"value":504}," 中低性能设备上没有明显掉帧。",{"type":27,"tag":50,"props":506,"children":508},{"className":507},[450],[509,512],{"type":27,"tag":453,"props":510,"children":511},{"disabled":455,"type":456},[],{"type":33,"value":513}," 页面主次明确，动效不会盖过内容。",{"type":27,"tag":50,"props":515,"children":517},{"className":516},[450],[518,521],{"type":27,"tag":453,"props":519,"children":520},{"disabled":455,"type":456},[],{"type":33,"value":522}," 已定义“该动”和“不该动”的边界。",{"type":27,"tag":28,"props":524,"children":526},{"id":525},"faq",[527],{"type":33,"value":528},"FAQ",{"type":27,"tag":530,"props":531,"children":533},"h3",{"id":532},"微交互一定要有动画吗",[534],{"type":33,"value":535},"微交互一定要有动画吗？",{"type":27,"tag":35,"props":537,"children":538},{},[539],{"type":33,"value":540},"不一定。颜色、阴影、文案和状态切换本身也可以构成有效反馈。",{"type":27,"tag":530,"props":542,"children":544},{"id":543},"微交互最容易做错的地方是什么",[545],{"type":33,"value":546},"微交互最容易做错的地方是什么？",{"type":27,"tag":35,"props":548,"children":549},{},[550],{"type":33,"value":551},"是为了“显得高级”而过度设计，最后让页面变慢、变乱、变难懂。",{"type":27,"tag":530,"props":553,"children":555},{"id":554},"设计师和前端怎么协作更高效",[556],{"type":33,"value":557},"设计师和前端怎么协作更高效？",{"type":27,"tag":35,"props":559,"children":560},{},[561],{"type":33,"value":562},"不要只给“效果图”，而要一起定义触发条件、持续时间、终止状态和异常分支。",{"type":27,"tag":28,"props":564,"children":566},{"id":565},"延伸阅读",[567],{"type":33,"value":565},{"type":27,"tag":46,"props":569,"children":570},{},[571,581,590,599],{"type":27,"tag":50,"props":572,"children":573},{},[574],{"type":27,"tag":575,"props":576,"children":578},"a",{"href":577},"/topics/frontend/animation-performance-guide",[579],{"type":33,"value":580},"动画性能优化案例：为什么同样会动，有的丝滑有的掉帧",{"type":27,"tag":50,"props":582,"children":583},{},[584],{"type":27,"tag":575,"props":585,"children":587},{"href":586},"/topics/design/design-system-complete-guide",[588],{"type":33,"value":589},"设计系统建立完整指南：从原则到组件落地",{"type":27,"tag":50,"props":591,"children":592},{},[593],{"type":27,"tag":575,"props":594,"children":596},{"href":595},"/topics/design/feedback-component-guide",[597],{"type":33,"value":598},"反馈提示组件设计规范完全指南",{"type":27,"tag":50,"props":600,"children":601},{},[602],{"type":27,"tag":575,"props":603,"children":605},{"href":604},"/topics/design/reduce-cognitive-load-for-conversion",[606],{"type":33,"value":607},"减少认知负担的设计策略：让页面更容易转化",{"title":7,"searchDepth":609,"depth":609,"links":610},3,[611,613,614,615,616,617,618,619,620,625],{"id":30,"depth":612,"text":30},2,{"id":67,"depth":612,"text":70},{"id":188,"depth":612,"text":191},{"id":246,"depth":612,"text":249},{"id":290,"depth":612,"text":293},{"id":352,"depth":612,"text":355},{"id":391,"depth":612,"text":394},{"id":438,"depth":612,"text":441},{"id":525,"depth":612,"text":528,"children":621},[622,623,624],{"id":532,"depth":609,"text":535},{"id":543,"depth":609,"text":546},{"id":554,"depth":609,"text":557},{"id":565,"depth":612,"text":565},"markdown","content:topics:design:microinteraction-design-complete-guide.md","content","topics/design/microinteraction-design-complete-guide.md","topics/design/microinteraction-design-complete-guide","md",[633,982,1284],{"_path":634,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":635,"description":636,"keywords":637,"image":642,"author":11,"date":643,"readingTime":644,"topic":5,"body":645,"_type":626,"_id":979,"_source":628,"_file":980,"_stem":981,"_extension":631},"/topics/design/button-component-design","按钮组件设计详解","学习按钮样式、交互状态、无障碍性和最佳实践",[638,639,640,641,16],"按钮设计","Button Component","交互状态","UI 组件","/images/topics/button-design.jpg","2025-12-08",18,{"type":24,"children":646,"toc":961},[647,651,656,661,667,676,682,691,697,706,710,716,727,733,742,748,757,762,771,776,787,792,801,806,819,853,864,907,912],{"type":27,"tag":28,"props":648,"children":649},{"id":635},[650],{"type":33,"value":635},{"type":27,"tag":35,"props":652,"children":653},{},[654],{"type":33,"value":655},"按钮是 UI 中最重要的交互元素。优秀的按钮设计能够指导用户行为。",{"type":27,"tag":28,"props":657,"children":659},{"id":658},"按钮类型",[660],{"type":33,"value":658},{"type":27,"tag":530,"props":662,"children":664},{"id":663},"primary-button主按钮",[665],{"type":33,"value":666},"Primary Button（主按钮）",{"type":27,"tag":401,"props":668,"children":671},{"className":669,"code":670,"language":406,"meta":7},[404],".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",[672],{"type":27,"tag":409,"props":673,"children":674},{"__ignoreMap":7},[675],{"type":33,"value":670},{"type":27,"tag":530,"props":677,"children":679},{"id":678},"secondary-button次按钮",[680],{"type":33,"value":681},"Secondary Button（次按钮）",{"type":27,"tag":401,"props":683,"children":686},{"className":684,"code":685,"language":406,"meta":7},[404],".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",[687],{"type":27,"tag":409,"props":688,"children":689},{"__ignoreMap":7},[690],{"type":33,"value":685},{"type":27,"tag":530,"props":692,"children":694},{"id":693},"danger-button危险按钮",[695],{"type":33,"value":696},"Danger Button（危险按钮）",{"type":27,"tag":401,"props":698,"children":701},{"className":699,"code":700,"language":406,"meta":7},[404],".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",[702],{"type":27,"tag":409,"props":703,"children":704},{"__ignoreMap":7},[705],{"type":33,"value":700},{"type":27,"tag":28,"props":707,"children":708},{"id":640},[709],{"type":33,"value":640},{"type":27,"tag":530,"props":711,"children":713},{"id":712},"loading-状态",[714],{"type":33,"value":715},"Loading 状态",{"type":27,"tag":401,"props":717,"children":722},{"className":718,"code":720,"language":721,"meta":7},[719],"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",[723],{"type":27,"tag":409,"props":724,"children":725},{"__ignoreMap":7},[726],{"type":33,"value":720},{"type":27,"tag":530,"props":728,"children":730},{"id":729},"disabled-状态",[731],{"type":33,"value":732},"Disabled 状态",{"type":27,"tag":401,"props":734,"children":737},{"className":735,"code":736,"language":406,"meta":7},[404],".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",[738],{"type":27,"tag":409,"props":739,"children":740},{"__ignoreMap":7},[741],{"type":33,"value":736},{"type":27,"tag":530,"props":743,"children":745},{"id":744},"focus-状态",[746],{"type":33,"value":747},"Focus 状态",{"type":27,"tag":401,"props":749,"children":752},{"className":750,"code":751,"language":406,"meta":7},[404],".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",[753],{"type":27,"tag":409,"props":754,"children":755},{"__ignoreMap":7},[756],{"type":33,"value":751},{"type":27,"tag":28,"props":758,"children":760},{"id":759},"按钮大小",[761],{"type":33,"value":759},{"type":27,"tag":401,"props":763,"children":766},{"className":764,"code":765,"language":406,"meta":7},[404],"/* 小按钮 */\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",[767],{"type":27,"tag":409,"props":768,"children":769},{"__ignoreMap":7},[770],{"type":33,"value":765},{"type":27,"tag":28,"props":772,"children":774},{"id":773},"无障碍性",[775],{"type":33,"value":773},{"type":27,"tag":401,"props":777,"children":782},{"className":778,"code":780,"language":781,"meta":7},[779],"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",[783],{"type":27,"tag":409,"props":784,"children":785},{"__ignoreMap":7},[786],{"type":33,"value":780},{"type":27,"tag":28,"props":788,"children":790},{"id":789},"完整组件示例",[791],{"type":33,"value":789},{"type":27,"tag":401,"props":793,"children":796},{"className":794,"code":795,"language":721,"meta":7},[719],"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",[797],{"type":27,"tag":409,"props":798,"children":799},{"__ignoreMap":7},[800],{"type":33,"value":795},{"type":27,"tag":28,"props":802,"children":804},{"id":803},"最佳实践",[805],{"type":33,"value":803},{"type":27,"tag":35,"props":807,"children":808},{},[809,811,817],{"type":33,"value":810},"✅ ",{"type":27,"tag":812,"props":813,"children":814},"strong",{},[815],{"type":33,"value":816},"应该做的事",{"type":33,"value":818},":",{"type":27,"tag":46,"props":820,"children":821},{},[822,827,832,843,848],{"type":27,"tag":50,"props":823,"children":824},{},[825],{"type":33,"value":826},"最小触摸目标 44x44px",{"type":27,"tag":50,"props":828,"children":829},{},[830],{"type":33,"value":831},"清晰的视觉反馈",{"type":27,"tag":50,"props":833,"children":834},{},[835,837],{"type":33,"value":836},"使用语义 HTML ",{"type":27,"tag":409,"props":838,"children":840},{"className":839},[],[841],{"type":33,"value":842},"\u003Cbutton>",{"type":27,"tag":50,"props":844,"children":845},{},[846],{"type":33,"value":847},"提供加载状态反馈",{"type":27,"tag":50,"props":849,"children":850},{},[851],{"type":33,"value":852},"支持键盘导航",{"type":27,"tag":35,"props":854,"children":855},{},[856,858,863],{"type":33,"value":857},"❌ ",{"type":27,"tag":812,"props":859,"children":860},{},[861],{"type":33,"value":862},"不应该做的事",{"type":33,"value":818},{"type":27,"tag":46,"props":865,"children":866},{},[867,880,885,890,895],{"type":27,"tag":50,"props":868,"children":869},{},[870,872,878],{"type":33,"value":871},"使用 ",{"type":27,"tag":409,"props":873,"children":875},{"className":874},[],[876],{"type":33,"value":877},"\u003Cdiv>",{"type":33,"value":879}," 模拟按钮",{"type":27,"tag":50,"props":881,"children":882},{},[883],{"type":33,"value":884},"隐藏焦点指示器",{"type":27,"tag":50,"props":886,"children":887},{},[888],{"type":33,"value":889},"过多的按钮样式",{"type":27,"tag":50,"props":891,"children":892},{},[893],{"type":33,"value":894},"忽视禁用状态",{"type":27,"tag":50,"props":896,"children":897},{},[898,899,905],{"type":33,"value":871},{"type":27,"tag":409,"props":900,"children":902},{"className":901},[],[903],{"type":33,"value":904},"\u003Ca>",{"type":33,"value":906}," 代替按钮",{"type":27,"tag":28,"props":908,"children":910},{"id":909},"测试清单",[911],{"type":33,"value":909},{"type":27,"tag":46,"props":913,"children":915},{"className":914},[445],[916,925,934,943,952],{"type":27,"tag":50,"props":917,"children":919},{"className":918},[450],[920,923],{"type":27,"tag":453,"props":921,"children":922},{"disabled":455,"type":456},[],{"type":33,"value":924}," 在各种浏览器中测试",{"type":27,"tag":50,"props":926,"children":928},{"className":927},[450],[929,932],{"type":27,"tag":453,"props":930,"children":931},{"disabled":455,"type":456},[],{"type":33,"value":933}," 验证键盘导航",{"type":27,"tag":50,"props":935,"children":937},{"className":936},[450],[938,941],{"type":27,"tag":453,"props":939,"children":940},{"disabled":455,"type":456},[],{"type":33,"value":942}," 检查色彩对比度",{"type":27,"tag":50,"props":944,"children":946},{"className":945},[450],[947,950],{"type":27,"tag":453,"props":948,"children":949},{"disabled":455,"type":456},[],{"type":33,"value":951}," 测试触摸设备",{"type":27,"tag":50,"props":953,"children":955},{"className":954},[450],[956,959],{"type":27,"tag":453,"props":957,"children":958},{"disabled":455,"type":456},[],{"type":33,"value":960}," 屏幕阅读器兼容性",{"title":7,"searchDepth":609,"depth":609,"links":962},[963,964,969,974,975,976,977,978],{"id":635,"depth":612,"text":635},{"id":658,"depth":612,"text":658,"children":965},[966,967,968],{"id":663,"depth":609,"text":666},{"id":678,"depth":609,"text":681},{"id":693,"depth":609,"text":696},{"id":640,"depth":612,"text":640,"children":970},[971,972,973],{"id":712,"depth":609,"text":715},{"id":729,"depth":609,"text":732},{"id":744,"depth":609,"text":747},{"id":759,"depth":612,"text":759},{"id":773,"depth":612,"text":773},{"id":789,"depth":612,"text":789},{"id":803,"depth":612,"text":803},{"id":909,"depth":612,"text":909},"content:topics:design:button-component-design.md","topics/design/button-component-design.md","topics/design/button-component-design",{"_path":983,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":984,"description":985,"keywords":986,"image":991,"author":11,"date":643,"readingTime":992,"topic":5,"body":993,"_type":626,"_id":1281,"_source":628,"_file":1282,"_stem":1283,"_extension":631},"/topics/design/dark-mode-design","暗黑模式设计完整方案","学习暗黑模式实现、色彩方案、对比度管理和最佳实践",[987,988,989,990,16],"暗黑模式","Dark Mode","色彩系统","CSS 变量","/images/topics/dark-mode-design.jpg",20,{"type":24,"children":994,"toc":1264},[995,999,1004,1009,1015,1024,1030,1039,1044,1050,1059,1065,1076,1082,1091,1096,1105,1110,1119,1124,1133,1137,1146,1174,1183,1211,1215],{"type":27,"tag":28,"props":996,"children":997},{"id":984},[998],{"type":33,"value":984},{"type":27,"tag":35,"props":1000,"children":1001},{},[1002],{"type":33,"value":1003},"暗黑模式已成为现代应用的标准功能。它能够减少眼睛疲劳、节省电池、改善用户体验。",{"type":27,"tag":28,"props":1005,"children":1007},{"id":1006},"核心色彩系统",[1008],{"type":33,"value":1006},{"type":27,"tag":530,"props":1010,"children":1012},{"id":1011},"light-mode-配色",[1013],{"type":33,"value":1014},"Light Mode 配色",{"type":27,"tag":401,"props":1016,"children":1019},{"className":1017,"code":1018,"language":406,"meta":7},[404],":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",[1020],{"type":27,"tag":409,"props":1021,"children":1022},{"__ignoreMap":7},[1023],{"type":33,"value":1018},{"type":27,"tag":530,"props":1025,"children":1027},{"id":1026},"dark-mode-配色",[1028],{"type":33,"value":1029},"Dark Mode 配色",{"type":27,"tag":401,"props":1031,"children":1034},{"className":1032,"code":1033,"language":406,"meta":7},[404],"@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",[1035],{"type":27,"tag":409,"props":1036,"children":1037},{"__ignoreMap":7},[1038],{"type":33,"value":1033},{"type":27,"tag":28,"props":1040,"children":1042},{"id":1041},"实现方案",[1043],{"type":33,"value":1041},{"type":27,"tag":530,"props":1045,"children":1047},{"id":1046},"方案-1prefers-color-scheme",[1048],{"type":33,"value":1049},"方案 1：prefers-color-scheme",{"type":27,"tag":401,"props":1051,"children":1054},{"className":1052,"code":1053,"language":406,"meta":7},[404],"/* 自动跟随系统设置 */\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",[1055],{"type":27,"tag":409,"props":1056,"children":1057},{"__ignoreMap":7},[1058],{"type":33,"value":1053},{"type":27,"tag":530,"props":1060,"children":1062},{"id":1061},"方案-2javascript-切换",[1063],{"type":33,"value":1064},"方案 2：JavaScript 切换",{"type":27,"tag":401,"props":1066,"children":1071},{"className":1067,"code":1069,"language":1070,"meta":7},[1068],"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",[1072],{"type":27,"tag":409,"props":1073,"children":1074},{"__ignoreMap":7},[1075],{"type":33,"value":1069},{"type":27,"tag":530,"props":1077,"children":1079},{"id":1078},"方案-3css-variables-javascript",[1080],{"type":33,"value":1081},"方案 3：CSS Variables + JavaScript",{"type":27,"tag":401,"props":1083,"children":1086},{"className":1084,"code":1085,"language":1070,"meta":7},[1068],"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",[1087],{"type":27,"tag":409,"props":1088,"children":1089},{"__ignoreMap":7},[1090],{"type":33,"value":1085},{"type":27,"tag":28,"props":1092,"children":1094},{"id":1093},"对比度管理",[1095],{"type":33,"value":1093},{"type":27,"tag":401,"props":1097,"children":1100},{"className":1098,"code":1099,"language":406,"meta":7},[404],"/* 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",[1101],{"type":27,"tag":409,"props":1102,"children":1103},{"__ignoreMap":7},[1104],{"type":33,"value":1099},{"type":27,"tag":28,"props":1106,"children":1108},{"id":1107},"图片和图表处理",[1109],{"type":33,"value":1107},{"type":27,"tag":401,"props":1111,"children":1114},{"className":1112,"code":1113,"language":781,"meta":7},[779],"\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",[1115],{"type":27,"tag":409,"props":1116,"children":1117},{"__ignoreMap":7},[1118],{"type":33,"value":1113},{"type":27,"tag":28,"props":1120,"children":1122},{"id":1121},"完整示例",[1123],{"type":33,"value":1121},{"type":27,"tag":401,"props":1125,"children":1128},{"className":1126,"code":1127,"language":721,"meta":7},[719],"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",[1129],{"type":27,"tag":409,"props":1130,"children":1131},{"__ignoreMap":7},[1132],{"type":33,"value":1127},{"type":27,"tag":28,"props":1134,"children":1135},{"id":803},[1136],{"type":33,"value":803},{"type":27,"tag":35,"props":1138,"children":1139},{},[1140,1141,1145],{"type":33,"value":810},{"type":27,"tag":812,"props":1142,"children":1143},{},[1144],{"type":33,"value":816},{"type":33,"value":818},{"type":27,"tag":46,"props":1147,"children":1148},{},[1149,1154,1159,1164,1169],{"type":27,"tag":50,"props":1150,"children":1151},{},[1152],{"type":33,"value":1153},"支持系统偏好",{"type":27,"tag":50,"props":1155,"children":1156},{},[1157],{"type":33,"value":1158},"提供手动切换选项",{"type":27,"tag":50,"props":1160,"children":1161},{},[1162],{"type":33,"value":1163},"确保足够的对比度",{"type":27,"tag":50,"props":1165,"children":1166},{},[1167],{"type":33,"value":1168},"优化图片和图表",{"type":27,"tag":50,"props":1170,"children":1171},{},[1172],{"type":33,"value":1173},"防止加载闪烁",{"type":27,"tag":35,"props":1175,"children":1176},{},[1177,1178,1182],{"type":33,"value":857},{"type":27,"tag":812,"props":1179,"children":1180},{},[1181],{"type":33,"value":862},{"type":33,"value":818},{"type":27,"tag":46,"props":1184,"children":1185},{},[1186,1191,1196,1201,1206],{"type":27,"tag":50,"props":1187,"children":1188},{},[1189],{"type":33,"value":1190},"强制单一模式",{"type":27,"tag":50,"props":1192,"children":1193},{},[1194],{"type":33,"value":1195},"忽视性能影响",{"type":27,"tag":50,"props":1197,"children":1198},{},[1199],{"type":33,"value":1200},"使用相同的颜色",{"type":27,"tag":50,"props":1202,"children":1203},{},[1204],{"type":33,"value":1205},"忘记保存用户偏好",{"type":27,"tag":50,"props":1207,"children":1208},{},[1209],{"type":33,"value":1210},"过度使用深色背景",{"type":27,"tag":28,"props":1212,"children":1213},{"id":909},[1214],{"type":33,"value":909},{"type":27,"tag":46,"props":1216,"children":1218},{"className":1217},[445],[1219,1228,1237,1246,1255],{"type":27,"tag":50,"props":1220,"children":1222},{"className":1221},[450],[1223,1226],{"type":27,"tag":453,"props":1224,"children":1225},{"disabled":455,"type":456},[],{"type":33,"value":1227}," 在浅色和深色模式下测试所有页面",{"type":27,"tag":50,"props":1229,"children":1231},{"className":1230},[450],[1232,1235],{"type":27,"tag":453,"props":1233,"children":1234},{"disabled":455,"type":456},[],{"type":33,"value":1236}," 检查颜色对比度符合 WCAG 标准",{"type":27,"tag":50,"props":1238,"children":1240},{"className":1239},[450],[1241,1244],{"type":27,"tag":453,"props":1242,"children":1243},{"disabled":455,"type":456},[],{"type":33,"value":1245}," 验证图片和图表在两种模式下清晰",{"type":27,"tag":50,"props":1247,"children":1249},{"className":1248},[450],[1250,1253],{"type":27,"tag":453,"props":1251,"children":1252},{"disabled":455,"type":456},[],{"type":33,"value":1254}," 测试主题切换的平滑性",{"type":27,"tag":50,"props":1256,"children":1258},{"className":1257},[450],[1259,1262],{"type":27,"tag":453,"props":1260,"children":1261},{"disabled":455,"type":456},[],{"type":33,"value":1263}," 检查用户偏好是否被保存",{"title":7,"searchDepth":609,"depth":609,"links":1265},[1266,1267,1271,1276,1277,1278,1279,1280],{"id":984,"depth":612,"text":984},{"id":1006,"depth":612,"text":1006,"children":1268},[1269,1270],{"id":1011,"depth":609,"text":1014},{"id":1026,"depth":609,"text":1029},{"id":1041,"depth":612,"text":1041,"children":1272},[1273,1274,1275],{"id":1046,"depth":609,"text":1049},{"id":1061,"depth":609,"text":1064},{"id":1078,"depth":609,"text":1081},{"id":1093,"depth":612,"text":1093},{"id":1107,"depth":612,"text":1107},{"id":1121,"depth":612,"text":1121},{"id":803,"depth":612,"text":803},{"id":909,"depth":612,"text":909},"content:topics:design:dark-mode-design.md","topics/design/dark-mode-design.md","topics/design/dark-mode-design",{"_path":1285,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1286,"description":1287,"keywords":1288,"image":1293,"author":1294,"date":643,"readingTime":992,"topic":5,"body":1295,"_type":626,"_id":1560,"_source":628,"_file":1561,"_stem":1562,"_extension":631},"/topics/design/form-controls-design","表单控件设计规范","学习输入框、选择框、复选框等表单控件的设计和实现",[1289,1290,1291,1292,16],"表单设计","Form Controls","输入框","验证反馈","/images/topics/form-controls-design.jpg","AI Content Team",{"type":24,"children":1296,"toc":1546},[1297,1301,1306,1311,1316,1325,1330,1339,1343,1352,1357,1366,1371,1380,1385,1394,1399,1408,1412,1421,1447,1456,1484,1488],{"type":27,"tag":28,"props":1298,"children":1299},{"id":1286},[1300],{"type":33,"value":1286},{"type":27,"tag":35,"props":1302,"children":1303},{},[1304],{"type":33,"value":1305},"优秀的表单设计能够提高用户完成率和满意度。",{"type":27,"tag":28,"props":1307,"children":1309},{"id":1308},"输入框设计",[1310],{"type":33,"value":1308},{"type":27,"tag":530,"props":1312,"children":1314},{"id":1313},"基础文本输入",[1315],{"type":33,"value":1313},{"type":27,"tag":401,"props":1317,"children":1320},{"className":1318,"code":1319,"language":406,"meta":7},[404],".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",[1321],{"type":27,"tag":409,"props":1322,"children":1323},{"__ignoreMap":7},[1324],{"type":33,"value":1319},{"type":27,"tag":530,"props":1326,"children":1328},{"id":1327},"标签和提示",[1329],{"type":33,"value":1327},{"type":27,"tag":401,"props":1331,"children":1334},{"className":1332,"code":1333,"language":781,"meta":7},[779],"\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",[1335],{"type":27,"tag":409,"props":1336,"children":1337},{"__ignoreMap":7},[1338],{"type":33,"value":1333},{"type":27,"tag":28,"props":1340,"children":1341},{"id":1292},[1342],{"type":33,"value":1292},{"type":27,"tag":401,"props":1344,"children":1347},{"className":1345,"code":1346,"language":721,"meta":7},[719],"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",[1348],{"type":27,"tag":409,"props":1349,"children":1350},{"__ignoreMap":7},[1351],{"type":33,"value":1346},{"type":27,"tag":28,"props":1353,"children":1355},{"id":1354},"选择框设计",[1356],{"type":33,"value":1354},{"type":27,"tag":401,"props":1358,"children":1361},{"className":1359,"code":1360,"language":406,"meta":7},[404],".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",[1362],{"type":27,"tag":409,"props":1363,"children":1364},{"__ignoreMap":7},[1365],{"type":33,"value":1360},{"type":27,"tag":28,"props":1367,"children":1369},{"id":1368},"复选框和单选按钮",[1370],{"type":33,"value":1368},{"type":27,"tag":401,"props":1372,"children":1375},{"className":1373,"code":1374,"language":406,"meta":7},[404],".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",[1376],{"type":27,"tag":409,"props":1377,"children":1378},{"__ignoreMap":7},[1379],{"type":33,"value":1374},{"type":27,"tag":28,"props":1381,"children":1383},{"id":1382},"文本区域",[1384],{"type":33,"value":1382},{"type":27,"tag":401,"props":1386,"children":1389},{"className":1387,"code":1388,"language":406,"meta":7},[404],".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",[1390],{"type":27,"tag":409,"props":1391,"children":1392},{"__ignoreMap":7},[1393],{"type":33,"value":1388},{"type":27,"tag":28,"props":1395,"children":1397},{"id":1396},"完整表单示例",[1398],{"type":33,"value":1396},{"type":27,"tag":401,"props":1400,"children":1403},{"className":1401,"code":1402,"language":721,"meta":7},[719],"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",[1404],{"type":27,"tag":409,"props":1405,"children":1406},{"__ignoreMap":7},[1407],{"type":33,"value":1402},{"type":27,"tag":28,"props":1409,"children":1410},{"id":803},[1411],{"type":33,"value":803},{"type":27,"tag":35,"props":1413,"children":1414},{},[1415,1416,1420],{"type":33,"value":810},{"type":27,"tag":812,"props":1417,"children":1418},{},[1419],{"type":33,"value":816},{"type":33,"value":818},{"type":27,"tag":46,"props":1422,"children":1423},{},[1424,1429,1434,1439,1443],{"type":27,"tag":50,"props":1425,"children":1426},{},[1427],{"type":33,"value":1428},"使用正确的输入类型",{"type":27,"tag":50,"props":1430,"children":1431},{},[1432],{"type":33,"value":1433},"提供实时验证反馈",{"type":27,"tag":50,"props":1435,"children":1436},{},[1437],{"type":33,"value":1438},"清晰的标签和提示",{"type":27,"tag":50,"props":1440,"children":1441},{},[1442],{"type":33,"value":826},{"type":27,"tag":50,"props":1444,"children":1445},{},[1446],{"type":33,"value":852},{"type":27,"tag":35,"props":1448,"children":1449},{},[1450,1451,1455],{"type":33,"value":857},{"type":27,"tag":812,"props":1452,"children":1453},{},[1454],{"type":33,"value":862},{"type":33,"value":818},{"type":27,"tag":46,"props":1457,"children":1458},{},[1459,1464,1469,1474,1479],{"type":27,"tag":50,"props":1460,"children":1461},{},[1462],{"type":33,"value":1463},"隐藏标签",{"type":27,"tag":50,"props":1465,"children":1466},{},[1467],{"type":33,"value":1468},"过度使用占位符",{"type":27,"tag":50,"props":1470,"children":1471},{},[1472],{"type":33,"value":1473},"验证后立即提交",{"type":27,"tag":50,"props":1475,"children":1476},{},[1477],{"type":33,"value":1478},"忽视无障碍性",{"type":27,"tag":50,"props":1480,"children":1481},{},[1482],{"type":33,"value":1483},"复杂的验证规则",{"type":27,"tag":28,"props":1485,"children":1486},{"id":909},[1487],{"type":33,"value":909},{"type":27,"tag":46,"props":1489,"children":1491},{"className":1490},[445],[1492,1501,1510,1519,1528,1537],{"type":27,"tag":50,"props":1493,"children":1495},{"className":1494},[450],[1496,1499],{"type":27,"tag":453,"props":1497,"children":1498},{"disabled":455,"type":456},[],{"type":33,"value":1500}," 所有控件都可用键盘导航",{"type":27,"tag":50,"props":1502,"children":1504},{"className":1503},[450],[1505,1508],{"type":27,"tag":453,"props":1506,"children":1507},{"disabled":455,"type":456},[],{"type":33,"value":1509}," 标签与输入框关联",{"type":27,"tag":50,"props":1511,"children":1513},{"className":1512},[450],[1514,1517],{"type":27,"tag":453,"props":1515,"children":1516},{"disabled":455,"type":456},[],{"type":33,"value":1518}," 验证消息清晰",{"type":27,"tag":50,"props":1520,"children":1522},{"className":1521},[450],[1523,1526],{"type":27,"tag":453,"props":1524,"children":1525},{"disabled":455,"type":456},[],{"type":33,"value":1527}," 色彩对比度足够",{"type":27,"tag":50,"props":1529,"children":1531},{"className":1530},[450],[1532,1535],{"type":27,"tag":453,"props":1533,"children":1534},{"disabled":455,"type":456},[],{"type":33,"value":1536}," 屏幕阅读器兼容",{"type":27,"tag":50,"props":1538,"children":1540},{"className":1539},[450],[1541,1544],{"type":27,"tag":453,"props":1542,"children":1543},{"disabled":455,"type":456},[],{"type":33,"value":1545}," 移动设备测试",{"title":7,"searchDepth":609,"depth":609,"links":1547},[1548,1549,1553,1554,1555,1556,1557,1558,1559],{"id":1286,"depth":612,"text":1286},{"id":1308,"depth":612,"text":1308,"children":1550},[1551,1552],{"id":1313,"depth":609,"text":1313},{"id":1327,"depth":609,"text":1327},{"id":1292,"depth":612,"text":1292},{"id":1354,"depth":612,"text":1354},{"id":1368,"depth":612,"text":1368},{"id":1382,"depth":612,"text":1382},{"id":1396,"depth":612,"text":1396},{"id":803,"depth":612,"text":803},{"id":909,"depth":612,"text":909},"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":1564,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":1565,"_type":626,"_id":627,"_source":628,"_file":629,"_stem":630,"_extension":631},[13,14,15,16,17],{"type":24,"children":1566,"toc":2022},[1567,1571,1575,1579,1594,1598,1602,1686,1690,1694,1698,1713,1717,1732,1736,1740,1744,1767,1771,1775,1779,1798,1802,1806,1821,1825,1829,1848,1852,1856,1860,1868,1872,1887,1891,1959,1963,1967,1971,1975,1979,1983,1987,1991],{"type":27,"tag":28,"props":1568,"children":1569},{"id":30},[1570],{"type":33,"value":30},{"type":27,"tag":35,"props":1572,"children":1573},{},[1574],{"type":33,"value":39},{"type":27,"tag":35,"props":1576,"children":1577},{},[1578],{"type":33,"value":44},{"type":27,"tag":46,"props":1580,"children":1581},{},[1582,1586,1590],{"type":27,"tag":50,"props":1583,"children":1584},{},[1585],{"type":33,"value":54},{"type":27,"tag":50,"props":1587,"children":1588},{},[1589],{"type":33,"value":59},{"type":27,"tag":50,"props":1591,"children":1592},{},[1593],{"type":33,"value":64},{"type":27,"tag":28,"props":1595,"children":1596},{"id":67},[1597],{"type":33,"value":70},{"type":27,"tag":35,"props":1599,"children":1600},{},[1601],{"type":33,"value":75},{"type":27,"tag":77,"props":1603,"children":1604},{},[1605,1623],{"type":27,"tag":81,"props":1606,"children":1607},{},[1608],{"type":27,"tag":85,"props":1609,"children":1610},{},[1611,1615,1619],{"type":27,"tag":89,"props":1612,"children":1613},{},[1614],{"type":33,"value":93},{"type":27,"tag":89,"props":1616,"children":1617},{},[1618],{"type":33,"value":98},{"type":27,"tag":89,"props":1620,"children":1621},{},[1622],{"type":33,"value":103},{"type":27,"tag":105,"props":1624,"children":1625},{},[1626,1641,1656,1671],{"type":27,"tag":85,"props":1627,"children":1628},{},[1629,1633,1637],{"type":27,"tag":112,"props":1630,"children":1631},{},[1632],{"type":33,"value":116},{"type":27,"tag":112,"props":1634,"children":1635},{},[1636],{"type":33,"value":121},{"type":27,"tag":112,"props":1638,"children":1639},{},[1640],{"type":33,"value":126},{"type":27,"tag":85,"props":1642,"children":1643},{},[1644,1648,1652],{"type":27,"tag":112,"props":1645,"children":1646},{},[1647],{"type":33,"value":134},{"type":27,"tag":112,"props":1649,"children":1650},{},[1651],{"type":33,"value":139},{"type":27,"tag":112,"props":1653,"children":1654},{},[1655],{"type":33,"value":144},{"type":27,"tag":85,"props":1657,"children":1658},{},[1659,1663,1667],{"type":27,"tag":112,"props":1660,"children":1661},{},[1662],{"type":33,"value":152},{"type":27,"tag":112,"props":1664,"children":1665},{},[1666],{"type":33,"value":157},{"type":27,"tag":112,"props":1668,"children":1669},{},[1670],{"type":33,"value":162},{"type":27,"tag":85,"props":1672,"children":1673},{},[1674,1678,1682],{"type":27,"tag":112,"props":1675,"children":1676},{},[1677],{"type":33,"value":170},{"type":27,"tag":112,"props":1679,"children":1680},{},[1681],{"type":33,"value":175},{"type":27,"tag":112,"props":1683,"children":1684},{},[1685],{"type":33,"value":180},{"type":27,"tag":35,"props":1687,"children":1688},{},[1689],{"type":33,"value":185},{"type":27,"tag":28,"props":1691,"children":1692},{"id":188},[1693],{"type":33,"value":191},{"type":27,"tag":35,"props":1695,"children":1696},{},[1697],{"type":33,"value":196},{"type":27,"tag":198,"props":1699,"children":1700},{},[1701,1705,1709],{"type":27,"tag":50,"props":1702,"children":1703},{},[1704],{"type":33,"value":205},{"type":27,"tag":50,"props":1706,"children":1707},{},[1708],{"type":33,"value":210},{"type":27,"tag":50,"props":1710,"children":1711},{},[1712],{"type":33,"value":215},{"type":27,"tag":35,"props":1714,"children":1715},{},[1716],{"type":33,"value":220},{"type":27,"tag":46,"props":1718,"children":1719},{},[1720,1724,1728],{"type":27,"tag":50,"props":1721,"children":1722},{},[1723],{"type":33,"value":228},{"type":27,"tag":50,"props":1725,"children":1726},{},[1727],{"type":33,"value":233},{"type":27,"tag":50,"props":1729,"children":1730},{},[1731],{"type":33,"value":238},{"type":27,"tag":35,"props":1733,"children":1734},{},[1735],{"type":33,"value":243},{"type":27,"tag":28,"props":1737,"children":1738},{"id":246},[1739],{"type":33,"value":249},{"type":27,"tag":35,"props":1741,"children":1742},{},[1743],{"type":33,"value":254},{"type":27,"tag":46,"props":1745,"children":1746},{},[1747,1751,1755,1759,1763],{"type":27,"tag":50,"props":1748,"children":1749},{},[1750],{"type":33,"value":262},{"type":27,"tag":50,"props":1752,"children":1753},{},[1754],{"type":33,"value":267},{"type":27,"tag":50,"props":1756,"children":1757},{},[1758],{"type":33,"value":272},{"type":27,"tag":50,"props":1760,"children":1761},{},[1762],{"type":33,"value":277},{"type":27,"tag":50,"props":1764,"children":1765},{},[1766],{"type":33,"value":282},{"type":27,"tag":35,"props":1768,"children":1769},{},[1770],{"type":33,"value":287},{"type":27,"tag":28,"props":1772,"children":1773},{"id":290},[1774],{"type":33,"value":293},{"type":27,"tag":35,"props":1776,"children":1777},{},[1778],{"type":33,"value":298},{"type":27,"tag":46,"props":1780,"children":1781},{},[1782,1786,1790,1794],{"type":27,"tag":50,"props":1783,"children":1784},{},[1785],{"type":33,"value":306},{"type":27,"tag":50,"props":1787,"children":1788},{},[1789],{"type":33,"value":311},{"type":27,"tag":50,"props":1791,"children":1792},{},[1793],{"type":33,"value":316},{"type":27,"tag":50,"props":1795,"children":1796},{},[1797],{"type":33,"value":321},{"type":27,"tag":35,"props":1799,"children":1800},{},[1801],{"type":33,"value":326},{"type":27,"tag":35,"props":1803,"children":1804},{},[1805],{"type":33,"value":331},{"type":27,"tag":198,"props":1807,"children":1808},{},[1809,1813,1817],{"type":27,"tag":50,"props":1810,"children":1811},{},[1812],{"type":33,"value":339},{"type":27,"tag":50,"props":1814,"children":1815},{},[1816],{"type":33,"value":344},{"type":27,"tag":50,"props":1818,"children":1819},{},[1820],{"type":33,"value":349},{"type":27,"tag":28,"props":1822,"children":1823},{"id":352},[1824],{"type":33,"value":355},{"type":27,"tag":35,"props":1826,"children":1827},{},[1828],{"type":33,"value":360},{"type":27,"tag":46,"props":1830,"children":1831},{},[1832,1836,1840,1844],{"type":27,"tag":50,"props":1833,"children":1834},{},[1835],{"type":33,"value":368},{"type":27,"tag":50,"props":1837,"children":1838},{},[1839],{"type":33,"value":373},{"type":27,"tag":50,"props":1841,"children":1842},{},[1843],{"type":33,"value":378},{"type":27,"tag":50,"props":1845,"children":1846},{},[1847],{"type":33,"value":383},{"type":27,"tag":35,"props":1849,"children":1850},{},[1851],{"type":33,"value":388},{"type":27,"tag":28,"props":1853,"children":1854},{"id":391},[1855],{"type":33,"value":394},{"type":27,"tag":35,"props":1857,"children":1858},{},[1859],{"type":33,"value":399},{"type":27,"tag":401,"props":1861,"children":1863},{"className":1862,"code":405,"language":406,"meta":7},[404],[1864],{"type":27,"tag":409,"props":1865,"children":1866},{"__ignoreMap":7},[1867],{"type":33,"value":405},{"type":27,"tag":35,"props":1869,"children":1870},{},[1871],{"type":33,"value":417},{"type":27,"tag":46,"props":1873,"children":1874},{},[1875,1879,1883],{"type":27,"tag":50,"props":1876,"children":1877},{},[1878],{"type":33,"value":425},{"type":27,"tag":50,"props":1880,"children":1881},{},[1882],{"type":33,"value":430},{"type":27,"tag":50,"props":1884,"children":1885},{},[1886],{"type":33,"value":435},{"type":27,"tag":28,"props":1888,"children":1889},{"id":438},[1890],{"type":33,"value":441},{"type":27,"tag":46,"props":1892,"children":1894},{"className":1893},[445],[1895,1903,1911,1919,1927,1935,1943,1951],{"type":27,"tag":50,"props":1896,"children":1898},{"className":1897},[450],[1899,1902],{"type":27,"tag":453,"props":1900,"children":1901},{"disabled":455,"type":456},[],{"type":33,"value":459},{"type":27,"tag":50,"props":1904,"children":1906},{"className":1905},[450],[1907,1910],{"type":27,"tag":453,"props":1908,"children":1909},{"disabled":455,"type":456},[],{"type":33,"value":468},{"type":27,"tag":50,"props":1912,"children":1914},{"className":1913},[450],[1915,1918],{"type":27,"tag":453,"props":1916,"children":1917},{"disabled":455,"type":456},[],{"type":33,"value":477},{"type":27,"tag":50,"props":1920,"children":1922},{"className":1921},[450],[1923,1926],{"type":27,"tag":453,"props":1924,"children":1925},{"disabled":455,"type":456},[],{"type":33,"value":486},{"type":27,"tag":50,"props":1928,"children":1930},{"className":1929},[450],[1931,1934],{"type":27,"tag":453,"props":1932,"children":1933},{"disabled":455,"type":456},[],{"type":33,"value":495},{"type":27,"tag":50,"props":1936,"children":1938},{"className":1937},[450],[1939,1942],{"type":27,"tag":453,"props":1940,"children":1941},{"disabled":455,"type":456},[],{"type":33,"value":504},{"type":27,"tag":50,"props":1944,"children":1946},{"className":1945},[450],[1947,1950],{"type":27,"tag":453,"props":1948,"children":1949},{"disabled":455,"type":456},[],{"type":33,"value":513},{"type":27,"tag":50,"props":1952,"children":1954},{"className":1953},[450],[1955,1958],{"type":27,"tag":453,"props":1956,"children":1957},{"disabled":455,"type":456},[],{"type":33,"value":522},{"type":27,"tag":28,"props":1960,"children":1961},{"id":525},[1962],{"type":33,"value":528},{"type":27,"tag":530,"props":1964,"children":1965},{"id":532},[1966],{"type":33,"value":535},{"type":27,"tag":35,"props":1968,"children":1969},{},[1970],{"type":33,"value":540},{"type":27,"tag":530,"props":1972,"children":1973},{"id":543},[1974],{"type":33,"value":546},{"type":27,"tag":35,"props":1976,"children":1977},{},[1978],{"type":33,"value":551},{"type":27,"tag":530,"props":1980,"children":1981},{"id":554},[1982],{"type":33,"value":557},{"type":27,"tag":35,"props":1984,"children":1985},{},[1986],{"type":33,"value":562},{"type":27,"tag":28,"props":1988,"children":1989},{"id":565},[1990],{"type":33,"value":565},{"type":27,"tag":46,"props":1992,"children":1993},{},[1994,2001,2008,2015],{"type":27,"tag":50,"props":1995,"children":1996},{},[1997],{"type":27,"tag":575,"props":1998,"children":1999},{"href":577},[2000],{"type":33,"value":580},{"type":27,"tag":50,"props":2002,"children":2003},{},[2004],{"type":27,"tag":575,"props":2005,"children":2006},{"href":586},[2007],{"type":33,"value":589},{"type":27,"tag":50,"props":2009,"children":2010},{},[2011],{"type":27,"tag":575,"props":2012,"children":2013},{"href":595},[2014],{"type":33,"value":598},{"type":27,"tag":50,"props":2016,"children":2017},{},[2018],{"type":27,"tag":575,"props":2019,"children":2020},{"href":604},[2021],{"type":33,"value":607},{"title":7,"searchDepth":609,"depth":609,"links":2023},[2024,2025,2026,2027,2028,2029,2030,2031,2032,2037],{"id":30,"depth":612,"text":30},{"id":67,"depth":612,"text":70},{"id":188,"depth":612,"text":191},{"id":246,"depth":612,"text":249},{"id":290,"depth":612,"text":293},{"id":352,"depth":612,"text":355},{"id":391,"depth":612,"text":394},{"id":438,"depth":612,"text":441},{"id":525,"depth":612,"text":528,"children":2033},[2034,2035,2036],{"id":532,"depth":609,"text":535},{"id":543,"depth":609,"text":546},{"id":554,"depth":609,"text":557},{"id":565,"depth":612,"text":565},1775441237978]