形色场 UI Handbook v1.1.0

优化

• 抽取 useCopy 共享 Hook：统一 Showcase 与代码块的复制反馈计时逻辑，删除散落在两处的重复定时器代码
• 章节组件懒加载：App 内 10 个章节改为 React.lazy + Suspense，配合既有的 IntersectionObserver 懒挂载，双层节流减少首屏 JS 解析量
• 语法高亮结果 memoize：每切换预览/代码 Tab、复制状态变化等触发 Showcase 重渲染时，正则分词结果不再重复计算
• 搜索防多余重渲染：用 useMemo 固定章节元素树，侧边栏搜索每敲一个字、滚动高亮变化都不会触发 104 个 demo 组件的重新渲染

构建

产物：dist/index.html（单文件），gzip 后 ~191 KB，可直接部署到任意静态托管

形色场 UI Handbook v1.0.0

形色场 UI Handbook 首个正式版本。

完整的静态单文件版本：下载解压后双击 index.html 即可离线浏览全部内容，无需安装任何环境。

内容

• 9 大章节 · 97 个可交互组件 demo
• 设计基础 / 基础组件与表单 / 导航 / 反馈与覆盖层 / 数据展示 / 指针交互与背景 / 文字滚动与高级模式 / 模式与原则 / 设计规范标准
• 支持深色模式、手机端手势，全部示例代码一键复制
• 语法高亮代码块，示例可直接粘贴到项目中使用

使用

1. 下载 uihandbook-v1.0.0.zip 并解压
2. 双击 index.html，用浏览器打开即可（推荐 Chrome / Edge / Brave）

在线阅读

https://uihandbook.zzhzhou2026.workers.dev