Visual QA · Checklist
豪华样式检查清单
对照本清单逐项勾选 · 确认 Demo 站点达到豪华基线
豪华样式检查清单
使用方法
- 在浏览器打开本 Demo 站的首页与三份示例页
- 对照下列清单逐项观察
- 全部勾选 = 方案 A 通过验收；任何一项不达标 = 反馈给构建者修复
1. 全站基线（打开任意页面都应满足）
- 顶部固定 2px 三色极光线（曦紫 → 音金 → 声青）
- Header 背景为深夜蓝渐变（
#0B1C2E → #14283F） - Logo 为官方三色同心圆环 + 中心珠光点（曦紫/玫瑰金/极光青 ·
docs/assets/images/xisound-logo.svg） - 顶部 Tabs 可见且悬停有高亮
- 右上角有主题切换按钮（亮/暗模式）
- 右上角有搜索入口，点击弹出搜索框
- 左侧有层级导航，右侧有 TOC（或合并到左侧）
- 正文字体为 Inter，代码字体为 JetBrains Mono
2. 首页（index.md）· L1A Hero
- Hero 区背景为深紫夜空渐变
- Hero 区有 ~80 颗随机三色星（闪烁动画）
- 标题下方有 3 圈三色涟漪扩散动画（曦紫/音金/声青）
- 顶部小标签 "Documentation Center · V0.1 Demo" 居中显示
- 大标题「以羲之名 · 构文档之律」字号醒目
- 副标题、标语依次排列
- 四格统计数字（6/13/50+/4）左右排开，悬停有微交互
3. L1B 示例（00-spec/example-l1b.md）
- Hero 区为简洁渐变，无星空、无涟漪
- Hero 显示 label + title + sub + meta 四行
- Admonition 八种（note/info/tip/success/warning/danger/example/quote）各自颜色不同
- 可折叠 Admonition（
??? info）点击能展开 - Mermaid 架构图渲染为 SVG，按三字法典配色
- Mermaid 时序图渲染正常
- Tabs（Python/C/YAML）切换顺滑，代码块有复制按钮
- 代码块有行号和高亮行
- 表格样式：表头背景色、单元格边框、奇偶行交替
- 定义列表（
XiStudio : ...）缩进样式正确 - 任务清单复选框样式美观
- 键盘按键
++ctrl+s++渲染为 ⌃S 样式 - 公式 \(SNR_{dB}=...\) 由 KaTeX/MathJax 渲染
4. L1A 示例（00-spec/example-l1a.md）
- 与首页类似的 Hero（星空 + 涟漪 + 统计）
- 四格统计显示 "80/¾/∞"
- 可用作其它大板块首页的模板
5. L2 示例（00-spec/example-l2.md）
- 无 Hero 区，直接进入正文
- H1 标题下方有品牌加粗线（玫瑰金渐变）
- Mermaid 流程图
A → B → C → D → E水平排布 - 代码块、Admonition、表格样式与 L1B 一致
6. 暗色模式
切到暗色模式（点击右上角月亮图标），检查：
- 背景切换为深夜蓝
- 正文字色为珍珠白
- Admonition 卡片在暗底下依然清晰
- 代码块背景加深
- 三字色保持识别度，不刺眼
7. 搜索
- 点击搜索图标弹出搜索框
- 输入「XiStudio」能命中多个文档
- 输入「羲音」也能命中（中英双语分词）
- 搜索结果高亮命中词
8. 响应式
拖小浏览器窗口到 768px 宽度：
- Header 折叠为汉堡菜单
- Hero 区仍完整渲染（星空/涟漪可等比缩小）
- 表格在窄屏下水平滚动而非挤压
9. 失败项反馈
任何一项不达标
- 截图 + 说明反馈给构建者
- 重点关注：Hero 星空/涟漪是否出现、Mermaid 是否渲染、Admonition 颜色是否区分
- 这三项是"豪华程度"的核心证据
全部勾选后
方案 A 正式通过 Demo 验收。下一步即可：
- 把现有
old-arch-doc/与converttool/ref/doc/中的 MD 按规范迁移进来 - 填充空文件《文档体系架构规划 V1.0》
- 接入 Git + CI（自动构建与部署）