Add Fable badge to docs navbar

[zzfx1166]

Add a Fable badge to the VitePress navbar title. Introduce a new stylesheet (fable-tag.scss) that defines CSS variables for badge image, size and positioning and appends the badge via a ::after pseudo-element on .VPNavBarTitle .title. Import the new stylesheet from index.scss and add the fable.png asset to docs/public so the badge is served with the docs.

[zzfx1166]

仅供娱乐

[MCJPG-Agent]

🎉 感谢 @zzfx1166 提交 Pull Request!
🎉 Thanks @zzfx1166 for submitting the Pull Request!

我们会尽快审查您的代码。在此期间,请确保:
We will review your code as soon as possible. In the meantime, please ensure:

• ✅ 所有测试通过 / All tests pass
• ✅ 代码符合项目规范 / Code follows project conventions
• ✅ 已添加必要的文档 / Necessary documentation is added

🤖 我们的 MCJPG Agent 将自动对您的代码进行初步审查。
🤖 Our MCJPG Agent will automatically conduct an initial review of your code.

如有代码辅助需求,请在评论区 @claude 进行请求。
If you need code assistance, please @claude in the comments.

[zzfx1166]

仅供娱乐

[MCJPG-Agent]

Claude finished @zzfx1166's task in 1m 18s —— View job

---

PR #146 代码审查结果

• 收集上下文 / Gather context
• 读取变更文件 / Read changed files
• 审查代码质量 / Review code quality
• 提供反馈 / Provide feedback

---

总体评价

此 PR 为导航栏添加了一个 Fable 徽章，思路简单清晰。但存在若干值得关注的问题，建议在合并前修复。

---

问题详情

🔴 严重问题

1. 图片文件体积过大（docs/public/fable.png，327KB）

PNG 图片高达 327KB，对于一个导航栏装饰徽章而言体积过大，会显著影响首屏加载性能。建议：

• 使用工具（如 pngquant、TinyPNG）压缩图片至 50KB 以下
• 或考虑改用 SVG 格式，体积更小且可无损缩放

2. 移动端适配缺失（fable-tag.scss）

徽章宽度固定为 200px，在移动端导航栏空间有限时可能导致布局溢出或错位。建议添加响应式处理：

@media (max-width: 768px) {
  .VPNavBarTitle .title::after {
    display: none; // 或缩小尺寸
  }
}

Fix this →

---

🟡 一般问题

3. CSS 变量命名过于通用（fable-tag.scss 第 2-6 行）

--badge-img、--badge-width 等变量定义在 :root 上，命名过于通用，存在与其他组件冲突的风险。建议加上命名空间前缀：

:root {
  --fable-badge-img: url("/fable.png");
  --fable-badge-width: 200px;
  --fable-badge-height: 90px;
  --fable-badge-gap: 10px;
  --fable-badge-offset-y: 16px;
}

Fix this →

4. top: 16px 定位方式不够稳健（fable-tag.scss 第 22 行）

使用 position: relative; top: var(--badge-offset-y) 来调整垂直位置是一种 hack 式写法，可能在不同浏览器或 VitePress 版本中产生意料之外的偏移。建议改为 margin-top 或通过 flex 对齐方式处理。

5. import 语法不一致（index.scss 第 11 行）

其他样式均使用不带扩展名的引入方式（如 @use './rainbow'），但新增行写作 @use './fable-tag.scss'，风格不一致：

// 建议改为：
@use './fable-tag';

Fix this →

---

🔵 建议改进

6. 无障碍性（Accessibility）

::after 伪元素中 content: "" 是空字符串，纯装饰图片本身没有无障碍问题，但建议在父元素上加 aria-label 说明徽章含义，以便屏幕阅读器用户理解。

7. 深色模式适配

PNG 图片在深色背景下可能与浅色背景下视觉效果差异较大（如白色背景 PNG 在暗色主题中会出现白框）。建议验证在深色模式下的显示效果，必要时使用 prefers-color-scheme 或 VitePress 的 .dark 类切换图片。

8. 组件内部类选择器的脆弱性

.VPNavBarTitle .title 是 VitePress 的内部组件类名，VitePress 升级后可能重命名，导致样式失效。这属于已知风险，可以接受，但建议在注释中注明依赖的 VitePress 版本。

---

总结

类型	数量
🔴 严重	2
🟡 一般	3
🔵 建议	3

建议在合并前至少解决图片压缩和移动端适配两个严重问题。如仅作娱乐用途且不影响正式用户体验，可酌情处理。

[ZhuYuxuan9302]

合并啥