feat: add code sidebar preview

[RHZHZ]

Closes #2941

已知问题

1. 长代码块在正文中阅读体验较差

   • 展开后会显著拉长文章页面
   • 阅读解释文字和查看代码时需要频繁上下滚动
   • 窄内容区下长代码块更容易打断阅读节奏

2. 代码块样式在强刷后存在加载时序问题

   • Notion 正文代码块可能晚于 PrismMac 初始化出现
   • Prism 主题 CSS 异步加载时可能覆盖 Mac 代码块样式

解决方案

1. 为长代码块增加桌面端侧栏预览

   • 复用现有 CODE_COLLAPSE 折叠逻辑
   • 超过 CODE_COLLAPSE_MIN_LINES 的代码块显示“在侧栏查看”
   • 桌面端右侧打开代码预览侧栏，支持复制、关闭、Esc 和点击遮罩关闭
   • 移动端保持原有折叠/展开行为，不增加侧栏入口

2. 稳定 PrismMac 初始化与样式加载顺序

   • 使用 MutationObserver 等待正文代码块 DOM 出现后再初始化
   • Prism 主题加载完成后重新将 /css/prism-mac-style.css 移到最后
   • 避免强刷后代码块样式被异步主题 CSS 覆盖

改动收益

1. 改善长代码阅读体验

   • 用户可以在不展开正文长代码块的情况下查看完整代码
   • 降低长代码对文章阅读流的干扰
   • 桌面端更适合代码与正文并行阅读

2. 提升代码块样式稳定性

   • 减少强刷或异步加载导致的样式回退
   • 保持 Claude、heo 等主题下折叠代码块表现一致
   • 保留现有配置和默认行为，降低回归风险

具体改动

1. components/PrismMac.js

   • 增加代码侧栏打开、关闭和桌面端判断逻辑
   • 在长代码块折叠头部增加“在侧栏查看”按钮
   • 组件卸载或路由切换时清理侧栏和键盘监听
   • 增加 MutationObserver，等待代码块 DOM 出现后初始化
   • 调整 Prism 主题与 Mac 样式的加载顺序

2. public/css/prism-mac-style.css

   • 增加折叠头部操作区和侧栏预览样式
   • 收敛折叠块内部 .code-toolbar 的边框、圆角、阴影和间距
   • 补充桌面端侧栏、遮罩、复制按钮、关闭按钮和移动端适配

3. themes/claude/style.js

   • 调整 Claude 主题下折叠代码块的外框和代码 shell 样式
   • 避免折叠容器与内部代码块出现重复边框或样式丢失

4. __tests__/components/PrismMac.test.js

   • 增加侧栏桌面/移动端分流测试
   • 覆盖侧栏打开、替换、关闭、Esc 和遮罩关闭行为
   • 覆盖长代码块侧栏按钮注入行为

5. docs/user-guide/ / docs/developer/rfc/

   • 补充代码折叠与桌面侧栏预览说明
   • 补充 【代码块可读性】建议增加类似 Claude 的点击代码显示在侧边栏的效果 #2941 设计文档和 UI 收敛文档

测试确认

• 本地开发环境测试通过
• 生产环境构建测试通过
• yarn lint 通过
• git diff --cached --check 通过
• Claude / heo 主题本地刷新与强刷验证通过
• 桌面端长代码块侧栏预览验证通过
• 移动端不显示侧栏入口，保留折叠行为

补充说明：本地尝试运行 yarn test "__tests__/components/PrismMac.test.js" --runInBand 时，Jest 在当前 Windows .zcf 路径下报 No tests found，不是测试断言失败。

用户文档（docs/user-guide/ / docs/developer/）

• 不适用（无文档改动）
• 已按 维护工作流 自检
• 路径符合 docs/user-guide/ 目录约定
• 已更新 user-guide/README.md（新增/移动文章时）
• 已更新 ARTICLE_INDEX.md（新 slug 或路径变更时）
• 环境变量名与 conf/*.config.js 一致（若文档涉及配置）
• 示例中无真实 Token、.env、私有 ID
• 保留或更新了「原文链接」（若源自 docs.tangly1024.com）

[vercel]

@RHZHZ is attempting to deploy a commit to the tangly1024's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for notionnext-netlify ready!

Name	Link
🔨 Latest commit	6cbd34d
🔍 Latest deploy log	https://app.netlify.com/projects/notionnext-netlify/deploys/6a6d74c926d26a000801408c
😎 Deploy Preview	https://deploy-preview-4350--notionnext-netlify.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
notion-next-preview	Ready	Preview	Aug 6, 2026 3:42am

[tangly1024]

Reviewed the code sidebar preview implementation. Verified the focused PrismMac suite locally: yarn test tests/components/PrismMac.test.js --runInBand. Main CI, Docker, Netlify and Vercel are green; the label workflow failure is not code-related.