Agent 知识库

Appearance

电子书 UI 改造记录 ​

改造日期 ​

2026-07-20

改造内容 ​

1. 主题升级：深灰蓝 + 暖金奢华主题 ​

  • 深色背景：#0f0f13（主背景）→ #1a1a24（卡片）
  • 暖金强调色：#c9a96e（用于链接、边框、激活状态）
  • 文字层次：#e8e8f0（主文字）→ #a0a0b8（次要）→ #6e6e85（辅助）
  • 边框：#2a2a35（细微分隔）
  • 阴影：柔和多层阴影，提升层次感

2. 左侧导航栏重构 ​

  • Logo 图标：书本 SVG 图标替代"目录"文字，点击返回首页
  • 主题切换：右上角太阳/月亮图标，支持深色/浅色模式切换（localStorage 持久化）
  • 首页链接：侧边栏顶部添加"首页"导航项
  • 可折叠章节：12个部分分组，当前章节所在部分自动展开，其他部分可折叠
  • 激活状态：当前章节高亮显示（金色背景 + 左侧金色竖线）

3. 布局比例优化 ​

  • 三栏比例式布局：左侧边栏(18vw) : 主内容(自适应) : 右侧目录(16vw)
  • 内容区 padding 使用 vw 单位，随屏幕自适应
  • 宽屏下充分利用空间，小屏自动堆叠

4. 流程图缩放功能 ​

  • 点击 Mermaid 流程图进入全屏缩放模式
  • 遮罩层 + 居中放大显示
  • ESC 键或点击遮罩关闭
  • 缩放状态有 cursor 指示（zoom-in/zoom-out）

5. 右侧目录高亮 ​

  • 滚动时自动高亮当前可见章节
  • IntersectionObserver 实现，性能友好
  • 高亮样式：金色文字 + 左侧金色竖线

6. 其他细节 ​

  • 自定义滚动条（细线风格）
  • 文字选中效果（金色半透明）
  • 平滑过渡动画（cubic-bezier 缓动）
  • 打印样式优化（隐藏导航）
  • 响应式断点：1200px / 1000px / 768px

修改文件 ​

文件说明
assets/style.css完全重写，新主题 + 新布局 + 新交互
assets/book.js新增：主题切换、章节折叠、目录高亮、流程图缩放
ch01.html ~ ch45.html侧边栏结构更新（Logo + 主题切换 + 可折叠分组）
index.html侧边栏结构更新

技术实现 ​

批量更新脚本 ​

使用 Python 脚本自动更新 46 个 HTML 文件的侧边栏结构：

  • 提取旧侧边栏（正则匹配 <nav class="sidebar">...</nav>）
  • 根据当前文件名生成新的侧边栏 HTML
  • 自动判断当前章节所属部分，设置展开/折叠状态

CSS 架构 ​

  • CSS 变量系统：40+ 个变量，支持深色/浅色主题切换
  • 比例布局：vw 单位 + minmax() 实现自适应
  • 组件化：.sidebar / .content / .article / .page-toc 独立样式

JS 功能 ​

  • 主题切换：localStorage 持久化
  • 章节折叠：classList.toggle + CSS transition
  • 目录高亮：IntersectionObserver 监听标题可见性
  • 流程图缩放：fixed 定位 + 遮罩层 + ESC 关闭

浏览器支持 ​

  • Chrome / Edge / Safari / Firefox 现代版本
  • 响应式：桌面端三栏 → 平板端两栏 → 移动端单栏

后续可优化 ​

  • [ ] 搜索功能（侧边栏顶部搜索框）
  • [ ] 字体预加载优化（LXGW WenKai、Source Han Serif）
  • [ ] 离线缓存（Service Worker）
  • [ ] 键盘快捷键（j/k 导航章节，/ 搜索）