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