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