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