---
source_url: https://go.junv.cc/ui/posts/2977/
ingested: 2026-08-03
status: inbox
---

# Links Post 详情页"阅读模式"上线（1.0.410）+ 大哥阅读偏好

大哥需求（原话）：参考**微信读书**那种精良阅读体验优化 Post 详情页——布局优美、字体舒服、提供多种字体与背景色选择、**长时间看眼睛不累**，可加动画。

## 实现（参照微信读书 + Medium + Readwise 最佳实践）
- 右下角/标题栏 **Aa 按钮 → 阅读设置面板**：
  - 🎨 4 种护眼主题：明亮 / 纸感米黄 / 护眼绿 / 夜间（全页面联动换肤，含表格/代码块/引用/目录）
  - 🔤 5 种字体：系统、宋体、黑体、楷体、等宽（代码块恒等宽）
  - 📏 字号 A−/A+（13–24px）+ 三档行距（紧凑/舒适/宽松）
  - 💾 偏好存 localStorage，下次自动恢复
- 排版：正文收窄到 **736px 黄金阅读宽度**（原 80rem 满宽）、行高 1.85、段落间距加大、表格斑马纹+圆角、引用浅底+竖线、标题层级精调
- 动效：顶部阅读进度条（渐变随滚动填充）、主题切换 0.4s 过渡、移动端 Aa 悬浮按钮与目录按钮错开 + 返回顶部
- 验证：Playwright 18 项检查（桌面+390px 移动、四主题、字体/字号/行距/持久化/进度条）+ pytest 138 全绿

## 大哥偏好信号
- 重度长文阅读者，对"排版精良 + 护眼 + 可定制字体/背景"有明确审美要求（微信读书是参照系）
- 接受克制的动效（"按最佳实践添加动画"）
- 后续可能把目录侧栏收进阅读面板、主题偏好同步全站（agent 已提议）
