DRAFT

表格与 Mermaid 样式 Demo（仅评审）

说明

• 本页是独立 demo 页面，仅用于评审视觉方案。
• 不修改现有文档内容，不影响线上规范。
• 你确认后再决定是否全量落地。

A. 表格表头层次对比

A1. 当前风格（参考）

层	选型	备注
框架	Vue 3.4+	与 Hero 同一深色体系，层次较弱
路由	vue-router 4	视觉重心偏上，表头不突出
测试	Vitest + Playwright	信息可读，但结构层次一般

A2. 建议风格（浅层次表头）

层	选型	备注
框架	Vue 3.4+	与 Hero 分层，表头更容易被识别
路由	vue-router 4	保持品牌金系，但不过暗
测试	Vitest + Playwright	表头与正文对比更清晰

---

B. Mermaid GraphTB 对比

B1. 非统一写法（示意）

graph TB
  A[Shell 模块]
  B[Link Editor]
  C[Compile]

  A --> B
  B --> C

  classDef bad fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF
  classDef normal fill:#FFF4E6,stroke:#D4A574,color:#1A2332
  class A bad
  class B,C normal

B2. 统一标准写法（推荐）

graph TB
  A[Shell]
  B[Link Editor]
  C[Compile]
  D[XiForge]
  E[XiVST]

    A --> B
    B --> C
    A --> D
    A --> E

    class A,B,C xyL4
    class D,E xyL3

推荐结论（供你拍板）

• 表格：采用 A2 浅层次表头，避免与 Hero 深底撞色。

• Mermaid：采用 B2 统一语义 class（xyL0~xyL5），禁止文档内随意手写 classDef 颜色。