HTML Book UI 更新记录
更新目标
优化《Claude Code 源码学习》HTML 书籍的 UI 设计，提升视觉质感和阅读体验。
主要改进点
1. 配色方案升级
- 从暖棕色系 → 深色奢华主题：深灰蓝背景 + 暖金色强调色
- 背景层次：
#0f0f13(body) →#16161d(elevated) →#1a1a24(card) - 强调色：
#c9a96e金色，用于链接、代码、交互状态 - 文字层次：
#e8e8f0(主文字) →#a0a0b8(次要) →#6e6e85(辅助)
2. 排版系统优化
- 标题使用衬线体（思源宋体），营造书籍质感
- 正文使用无衬线体（霞鹜文楷 + 系统字体），保证屏幕可读性
- 代码使用等宽字体（JetBrains Mono）
- 行高 1.75，段间距舒适
- 内容区最大宽度 860px，保证最佳阅读行长
3. 卡片式布局
- 主内容区和右侧导航采用圆角卡片设计
- 微妙的边框和阴影营造层次感
- 与深色背景形成清晰的视觉分离
4. 交互反馈增强
- 侧边栏选中状态：金色左边框 + 背景高亮
- 表格行 hover 效果
- 分页按钮 hover 上浮动画
- 链接下划线偏移动画
- 平滑的 focus-visible 轮廓
5. 代码块样式
- 深色背景代码块，与主题协调
- 行内代码使用金色边框和背景
- 等宽字体保证代码对齐
6. 响应式改进
- 1100px 以下：隐藏右侧导航，内容区全宽
- 860px 以下：侧边栏变为顶部导航，卡片圆角缩小
7. 新增功能
- 滚动监听高亮：右侧导航自动高亮当前阅读位置
- 自定义滚动条：细滚动条与深色主题融合
- 打印样式：隐藏导航，纯白背景适配打印
文件变更
| 文件 | 变更 |
|---|---|
assets/style.css | 完全重写，新配色和布局系统 |
assets/book.js | 新增 IntersectionObserver 滚动监听 |
预览
- 首页预览：
preview-v2-index.png - 章节页预览：
preview-v2-ch1.png
技术评价
这是一个从"能用"跃升到"好用且好看"的设计更新，特别适合技术内容的长文阅读场景。金色与深灰的搭配既有品质感又不浮夸，体现了对开发者用户群体的深刻理解。