道具系统新核心 UI 视觉规范 v1.0 · 活跃设计

本文档是《道具词条与玩法扩展 v3.1.3》的视觉侧配套。 v3.md 定义"怎么算"（机制/数值/公式），本文档定义"怎么给玩家看"（色板/组件/界面）。

覆盖范围：§11 装备槽位 + §12 攻防系数 + §13 战力系统 文档版本：v1.0（2026-06-29） 配套状态：建议作为 Phase 2 落地前的视觉契约

文档目的与设计哲学
设计令牌
- 1.1 品质 9 档色（核心）
- 1.2 词条 5 档色
- 1.3 攻防三色
- 1.4 战力色阶
- 1.5 状态色
- 1.6 字体
- 1.7 间距 / 圆角 / 阴影
核心组件
- 2.1 装备卡 ItemCard
- 2.2 槽位格 SlotCell
- 2.3 战力大数字 PowerBigNumber
- 2.4 攻防饼图 CoeffPieChart
- 2.5 词条标签 AffixTag
- 2.6 替换对比面板 ComparePanel
- 2.7 战力构成环形图 PowerBreakdownRing
三个核心界面布局
- 3.1 槽位面板 SlotPanel
- 3.2 装备详情 ItemDetail
- 3.3 战力总览 PowerOverview
拟物化方向
视觉降噪 checklist
动效规范
与现有组件的复用
实施切片

0. 文档目的与设计哲学

0.1 为什么单独写这个文档

v3.md 已经有 2334 行，涵盖了 21 个章节。它解决的是机制问题（数值怎么算、词条怎么 roll、攻防怎么加权）。

但机制清晰 ≠ 玩家能看懂。一个新玩家看到一件装备时，他需要在 5 秒内判断：

这件装备强不强？（需要大数字 + 颜色）
这件装备适不适合我的员工？（需要 buildTag 视觉化）
我要不要换下现在的？（需要替换对比 + 战力差）

这三个问题对应 §13 战力系统的三大痛点。本文档就是给这三个痛点画视觉解法的。

0.2 三大设计哲学

| 哲学 | 一句话 | 落地方式 | | :--- | :--- | :--- | | 拟物化 | 让"装备"看起来像"装备"，让"数字"看起来像"江湖评语" | 木质卡片、卷轴边框、印章红、墨色字 | | 视觉降噪 | 玩家一眼能看清重点 | 颜色只用在该用的地方、留白 > 信息密度、字号 > 颜色 > 装饰 | | 江湖色 | 跟"同福客栈"调性匹配，不要赛博朋克 | 主色用宣纸米黄 + 墨黑 + 印章红 + 翠竹绿，不用纯白/纯黑/霓虹色 |

0.3 一图流：玩家视角的"5 秒决策树"

玩家看到装备
    │
    ├─ 1秒：看左上角"战力大数字" + 颜色 ───────→ 知道"强不强"
    │
    ├─ 2秒：看 buildTag 标识（chef/defense 标签） → 知道"适不适合"
    │
    ├─ 3秒：鼠标悬停，看攻防系数变化 ───────────→ 知道"对我的员工有啥用"
    │
    ├─ 4秒：点开装备详情，看战力构成饼图 ────────→ 知道"为什么强"
    │
    └─ 5秒：点"替换"或"⚡ 一键最强"按钮 ────────→ 决策完成

设计铁律：5 秒决策树上的每一步，必须有 ≤ 1 个视觉焦点。多焦点 = 视觉降噪失败。

1. 设计令牌

1.1 品质 9 档色（核心）

这是整套体系的灵魂。6 档颜色严格对应品质（白板→神物），玩家看颜色就知道档次。 1.3 文档约定的"9 档品质"在视觉层压缩为 6 档颜色组（白/绿/蓝/紫/金/红），相邻品质共用色组以避免色彩过载。

| 品质 | 颜色组 | 主色 | 边框色 | 背景色 | 文字色 | 视觉关键词 | | :--- | :--- | :---: | :---: | :---: | :---: | :--- | | 白板 Normal | ⚪ 灰 | #9CA3AF | #D1D5DB | #F3F4F6 | #374151 | 朴素、粗布 | | 带彩 Magic | 🟢 绿 | #10B981 | #34D399 | #D1FAE5 | #065F46 | 翠竹、嫩叶 | | 黄货 Rare | 🔵 蓝 | #3B82F6 | #60A5FA | #DBEAFE | #1E3A8A | 湖蓝、瓷釉 | | 暗金 Unique | 🟣 紫 | #8B5CF6 | #A78BFA | #EDE9FE | #4C1D95 | 紫檀、古玩 | | 套装 Set | 🟡 金 | #F59E0B | #FBBF24 | #FEF3C7 | #78350F | 鎏金、铜器 | | 亲制 Crafted | 🟠 橙 | #EA580C | #FB923C | #FED7AA | #7C2D12 | 朱漆、手作 | | 神物 Mythic | 🔴 红 | #DC2626 | #F87171 | #FEE2E2 | #7F1D1D | 朱砂、印章 |

应用规则：

装备卡背景色用色组的 背景色（淡）
装备卡左边框用色组的 主色（浓，宽 4px，所有色组统一宽度）
品质名字用色组的 主色，字号 12px
战力大数字用色组的 主色，字号根据品质自适应

反例（不要这样做）：

❌ 给每个品质加渐变背景
❌ 给每个品质加阴影/光晕
❌ 给每个品质加专属字体/图标
❌ 把 9 档色都用上（视觉过载）

1.2 词条 5 档色

| 词条等级 | 主色 | 背景 | 文字 | 边框 | 视觉关键词 | | :--- | :---: | :---: | :---: | :---: | :--- | | N 普通 Normal | #6B7280 | #F3F4F6 | #374151 | #D1D5DB | 平实、白话 | | P 百分比 Percent | #0891B2 | #CFFAFE | #164E63 | #67E8F9 | 青瓷、数字感 | | S 特殊 Special | #9333EA | #F3E8FF | #581C87 | #D8B4FE | 紫光、神秘 | | K 极品 Key | #F59E0B | #FEF3C7 | #78350F | #FCD34D | 金印、关键 | | T 触发 Trigger | #DC2626 | #FEE2E2 | #7F1D1D | #FCA5A5 | 朱砂、警告 |

应用规则：

词条前缀图标（小方块/圆点）用主色
词条数值用主色 + 加粗
词条触发效果用 T 色（朱砂红），并加 ⚡ 小图标

1.3 攻防三色

攻防系数体系有 AtkCoeff（攻击）/ DefCoeff（防御）/ EffCoeff（效率）三系。用蓝/绿/紫三色固定区分，不与品质色冲突。

| 系数 | 主色 | 背景 | 含义 | | :--- | :---: | :---: | :--- | | AtkCoeff 攻击 | #DC2626 朱砂红 | #FEE2E2 | 战斗输出、闯关、冒险 | | DefCoeff 防御 | #0891B2 湖青 | #CFFAFE | 风险抵御、保安、夜袭 | | EffCoeff 效率 | #16A34A 翠绿 | #DCFCE7 | 经营、收入、名声 |

应用规则：

攻防饼图三色按权重占比分配
系数数字前缀图标用对应色（🗡️ Atk / 🛡️ Def / ⚙️ Eff）
装备详情页"攻防变化"用 + 绿 / - 红（不是 Atk 红 / Def 青）— 避免混淆

1.4 战力色阶

战力大数字的颜色用色阶，而不是固定色。玩家看色阶就知道"我到了哪个档次"。

| 战力区间 | 颜色 | 文字 | 视觉 | | :--- | :---: | :---: | :--- | | 0 - 999 | #6B7280 灰 | 白 | 路人 | | 1k - 4.9k | #10B981 绿 | 白 | 小有名气 | | 5k - 9.9k | #3B82F6 蓝 | 白 | 江湖新秀 | | 10k - 24.9k | #8B5CF6 紫 | 白 | 一方高手 | | 25k - 49.9k | #F59E0B 金 | 黑 | 武林名宿 | | 50k - 99.9k | #DC2626 红 | 白 | 一代宗师 | | 100k+ | 渐变（金→红）+ 微动画 | 白 | 神物级 |

应用规则：

玩家头像旁显示总战力，用色阶色
装备卡左上角显示单件战力，用色阶色
总战力达到里程碑时，1.5s 微动画（数字滚动 + 边框闪光）

1.5 状态色

| 状态 | 主色 | 背景 | 用途 | | :--- | :---: | :---: | :--- | | 可用 OK | #10B981 绿 | #D1FAE5 | 装备可装备、按钮可点 | | 禁用 Disabled | #9CA3AF 灰 | #F3F4F6 | 等级不够、槽位已满 | | 警告 Warning | #F59E0B 橙 | #FEF3C7 | 替换会降低战力 | | 错误 Error | #DC2626 红 | #FEE2E2 | 替换冲突、不可装备 | | 信息 Info | #3B82F6 蓝 | #DBEAFE | 提示、引导气泡 | | 传说 Legendary | 渐变（金+紫）| — | 暗金/神物特殊标识 |

1.6 字体

同福客栈是 Web + Mobile 双端，字体必须支持中文 + 数字 + 标点。主色用墨色（不是纯黑），更"江湖"。

| 用途 | 字体 | 字号 | 字重 | 颜色 | | :--- | :--- | :---: | :---: | :---: | | 战力大数字 | 系统等宽数字（SF Mono / JetBrains Mono / Roboto Mono） | 24-48px（自适应） | 700 Bold | 随色阶 | | 装备名 | 中文字体（Noto Serif SC / 思源宋体） | 16-18px | 600 Semibold | #1F2937 墨色 | | 词条文本 | 中文（Noto Sans SC / 思源黑体） | 13-14px | 400 Regular | #374151 | | 词条数值 | 等宽数字（同战力大数字） | 13-14px | 700 Bold | 词条主色 | | 品质标签 | 中文 | 11-12px | 500 Medium | 品质主色 | | 次要说明 | 中文 | 11-12px | 400 Regular | #6B7280 灰 |

铁律：

数字必须用等宽字体（避免 1k 和 1.5k 跳来跳去）
中文用衬线体（标题）/ 黑体（正文），不要全用一种
永远不用纯黑 #000000，用 #1F2937 墨色

1.7 间距 / 圆角 / 阴影

间距（8px 基准）：
  - 0: 0px
  - 1: 4px     (极小间隔)
  - 2: 8px     (词条间距)
  - 3: 12px    (装备卡内边距)
  - 4: 16px    (组件间距)
  - 6: 24px    (区块间距)
  - 8: 32px    (界面大间距)

圆角：
  - sm: 4px   (小型元素：词条标签、按钮)
  - md: 8px   (中型元素：装备卡、输入框)
  - lg: 12px  (大型元素：弹窗、面板)
  - full: 9999px (圆形头像、徽章)

阴影（拟物化核心）：
  - sm:  0 1px 2px rgba(0,0,0,0.05)             (轻微浮起)
  - md:  0 2px 8px rgba(0,0,0,0.08)             (装备卡常态)
  - lg:  0 4px 16px rgba(0,0,0,0.12)            (悬浮/选中)
  - xl:  0 8px 24px rgba(0,0,0,0.16)            (模态框)
  - inset: inset 0 1px 2px rgba(0,0,0,0.06)    (内嵌，如槽位空格)

拟物化关键：

阴影方向全部来自上方（0 Xpx Ypx）— 模拟光照
阴影不要用纯黑（rgba(0,0,0,X)）— 显得硬
阴影用墨色（rgba(31,41,55,X)）— 跟"墨色字"统一

2. 核心组件

2.1 装备卡 ItemCard

装备卡是最高频组件。所有装备相关界面（背包、槽位、对比、详情）都用这个组件。

结构（按重要性从上到下）：

┌─────────────────────────────────────┐
│  ╔═══╗                              │  ← 品质左边框（4px，主色）
│  ║ 1.2k║  [品质] · 菜刀             │  ← 战力大数字 + 品质标签 + 装备名
│  ╚═══╝                              │
│  ─────────────────────────────      │
│  🗡️ 攻 +15   🛡️ 防 +8              │  ← 攻防系数（一行）
│  ─────────────────────────────      │
│  词条1 ··············  数值          │  ← 词条列表
│  词条2 ··············  数值          │
│  词条3 ··············  数值          │
│  [▶ 展开全部]                        │
└─────────────────────────────────────┘

规格：

尺寸：横版 280px × 160px、竖版 100% × 140px
内边距：12px（左右）/ 8px（上下）
背景：色组 背景色（淡）
左边框：色组 主色，宽 4px
圆角：md（8px）
阴影：md（常态）/ lg（hover）
装备名最多 2 行，超出截断
词条最多显示 3 条，超出显示 [▶ 展开全部]

状态：

默认：阴影 md
hover：阴影 lg + 上移 2px + 左边框亮度 +10%
选中：左边框宽度 → 6px + 内边框 1px 主色
禁用：opacity 0.5 + cursor not-allowed

2.2 槽位格 SlotCell

槽位是 v3 新增的"装备放在哪里"的容器。11 个子槽位（主手/头部/身体/手部/足部/饰品×2/护身符/工具/书籍/家具）每个都是一个槽位格。

结构（3 种状态）：

空槽位：                  装备槽位：              锁定槽位：
┌──────────┐             ┌──────────┐            ┌──────────┐
│          │             │  ╔═══╗  │            │    🔒    │
│   [图]   │             │  ║🗡️║  │            │  Lv.10   │
│  主手    │             │  ╚═══╝  │            │  解锁    │
│          │             │   菜刀  │            │          │
└──────────┘             └──────────┘            └──────────┘
  内嵌阴影                装备缩略图                 灰色滤镜

规格：

尺寸：80px × 80px（横版）/ 60px × 60px（竖版）
空槽位：背景 rgba(0,0,0,0.04) + 内嵌阴影（inset）
装备槽位：背景装备品质背景色 + 左边框（同装备卡）
锁定槽位：背景 #E5E7EB + 🔒 图标 + 解锁等级

交互：

点击空槽位 → 打开"可装备列表"
点击装备槽位 → 装备详情
长按装备槽位 → 快速卸下

2.3 战力大数字 PowerBigNumber

战力是"新手第一接触面"。大数字必须大、清楚、有颜色。

结构：

        ╔══════════════╗
        ║              ║
        ║     1.2k     ║
        ║              ║
        ╚══════════════╝
         战力（1.2k）

规格：

字号：根据容器自适应（clamp(24px, 4vw, 48px)）
字体：等宽数字（SF Mono 等）
字重：700 Bold
颜色：随战力色阶（§1.4）
数字格式：
- < 1k：原样显示（如 842）
- 1k - 999k：X.Xk 格式（如 1.2k、15.7k）
- ≥ 1M：X.XM 格式（如 1.2M）
后缀小标签：12px、战力 灰色 #6B7280

动效：

数字变化时（装备替换后）：滚动 0.5s + 颜色闪烁（绿→原色）
达到里程碑：1.5s 数字滚动 + 边框闪光

2.4 攻防饼图 CoeffPieChart

把 AtkCoeff / DefCoeff / EffCoeff 三系用饼图呈现。鼠标 hover 高亮单个系数。

结构（同福调性，不用赛博朋克风）：

         ╭─────────╮
        ╱   Atk 65 ╲       ← 攻（红）65%
       │  Def 25    │     ← 防（青）25%
       │  Eff 10    │     ← 效（绿）10%
        ╲           ╱
         ╰─────────╯
        总系数 80/200

规格：

尺寸：120px × 120px（横版）/ 80px × 80px（竖版）
三色：攻 #DC2626 / 防 #0891B2 / 效 #16A34A
中心数字：总系数 / 200（白底黑字）
边框：1px #E5E7EB
legend：右侧 3 行（图标 + 名称 + 数值 + 占比）

交互：

hover 单个扇区 → 该扇区突出（外扩 2px）+ 其他扇区半透明
hover 触发 tooltip：完整公式 + 与同档员工对比

2.5 词条标签 AffixTag

词条是装备的"卖点"。5 档颜色 + 数值高亮 + 触发图标。

结构：

  🟢 精准 ······ +12%       ← 普通词条（N）
  🔵 锋利 ······ +25%       ← 百分比词条（P）
  🟣 龙吟 ······ 触发回血    ← 特殊词条（S）
  🟡 屠龙 ······ 3% 几率     ← 极品词条（K）
  🔴 ⚡爆击 ······ 5%       ← 触发词条（T）

规格：

高度：24px
字体：13px（中文）/ 14px（数字）
词条名前缀色点（6px 圆点）：词条主色
数值：等宽数字 + 词条主色 + 700 Bold
触发词条额外加 ⚡ 图标（朱砂红）

变体：

极小（列表内）：无色点，只有文字 + 数值
标准（详情页）：有色点 + 文字 + 数值
突出（对比页）：加背景色 + 左边框

2.6 替换对比面板 ComparePanel

让玩家一眼看到"换 vs 不换"。

结构：

┌──────────────────────────────────────────────┐
│  替换：菜刀·老                              │
│                                              │
│  ┌─────────────┐  ┌─────────────┐           │
│  │ 当前装备    │  │  替换装备   │           │
│  │             │  │             │           │
│  │  ╔═══╗      │  │  ╔═══╗      │           │
│  │  ║800║      │  │  ║1.2k║     │           │
│  │  ╚═══╝      │  │  ╚═══╝      │           │
│  │  [普通菜刀] │  │  [黄金菜刀] │           │
│  │             │  │             │           │
│  │  攻 +10     │  │  攻 +15     │           │
│  │  防 +5      │  │  防 +8      │           │
│  └─────────────┘  └─────────────┘           │
│                                              │
│  ─────────────────────────────────────       │
│  变化：                                      │
│    战力 +400（800 → 1.2k）  ↑50%            │
│    攻系 +5（+12%）          ↑↑              │
│    防系 +3（+15%）          ↑               │
│    流匹配：chef 流 +8%      ↑               │
│                                              │
│  [ 取消 ]                  [ ✓ 替换 ]        │
└──────────────────────────────────────────────┘

规格：

面板宽：480px（横版全屏居中）/ 100%（竖版全屏）
左右两列：各 200px，中间 40px 间隔
中间分隔：1px #E5E7EB
变化区域：3 行（战力/攻/防）+ 1 行（流匹配）
↑ / ↓ 箭头：绿 / 红（不是攻红/防青）
操作按钮：主操作右边框色 + 副操作左边框色

2.7 战力构成环形图 PowerBreakdownRing

玩家悬浮战力大数字时，弹出"4 子项占比"。

结构：

            ╭─────────────╮
           ╱  ┌─────────┐ ╲
          │   │  1.2k   │    │     ← 中心：总战力
          │   │  总战力  │    │
          │   └─────────┘    │
           ╲ 攻60%/防25%/效10%/特5% ╱
            ╰─────────────╯

规格：

尺寸：200px × 200px（展开后）
4 段：攻战 60% / 防战 25% / 效战 10% / 特战 5%
4 色（与攻防三色 + 紫）：
- 攻战：#DC2626 朱砂
- 防战：#0891B2 湖青
- 效战：#16A34A 翠绿
- 特战：#8B5CF6 紫檀
legend：4 行（图标 + 名称 + 数值 + 占比）
触发：hover 战力大数字 0.3s 后展开

3. 三个核心界面布局

3.1 槽位面板 SlotPanel

11 个子槽位 + 6 员工差异化配置，是 §11 槽位系统的"主舞台"。

横版布局（1280px+）：

┌──────────────────────────────────────────────────────────────┐
│  同福客栈 · 装备管理                              [⚡一键最强] │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─ 李大嘴 ─┐  ┌─ 槽位组合 ─┐  ┌─ 已装备（4/6）──┐         │
│  │  头像    │  │ chef 流    │  │ ╔═╗ ╔═╗ ╔═╗ ╔═╗ │         │
│  │  Lv.15  │  │ 攻 65/80   │  │ ║🗡║ ║👒║ ║👕║ ║🧤║ │         │
│  │ 厨神秘传 │  │ 防 25/60   │  │ ╚═╝ ╚═╝ ╚═╝ ╚═╝ │         │
│  │ chef ███ │  │ 效 30/50   │  │ [主] [头] [身] [手]│         │
│  └─────────┘  └────────────┘  └──────────────────┘         │
│                                                              │
│  ── 11 个子槽位 4 列布局 ──                                  │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐                                │
│  │主手│ │头部│ │身体│ │手部│    ← 第 1 行                    │
│  │ 🗡 │ │ 👒 │ │ 👕 │ │ 🧤 │                                  │
│  │菜刀│ │ 帽 │ │ 衣 │ │手套│                                  │
│  └────┘ └────┘ └────┘ └────┘                                │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐                                │
│  │足部│ │饰品│ │饰品│ │护身│    ← 第 2 行                    │
│  │ 👟 │ │ 💍 │ │ 💍 │ │ 📿 │                                  │
│  │ 鞋 │ │戒1 │ │戒2 │ │符 │                                  │
│  └────┘ └────┘ └────┘ └────┘                                │
│  ┌────┐ ┌────┐ ┌────┐                                      │
│  │工具│ │书籍│ │家具│         ← 第 3 行（不常用）            │
│  │ 🔧 │ │ 📖 │ │ 🪑 │                                      │
│  │ 勺 │ │菜谱│ │ 椅 │                                      │
│  └────┘ └────┘ └────┘                                      │
│                                                              │
└──────────────────────────────────────────────────────────────┘

规格：

顶部：员工信息卡（左）+ 槽位协同面板（中）+ 已装备列表（右）
主区：4 列网格 × 3 行（11 槽位 + 1 空格）
槽位格 80px × 80px，间距 12px
空槽位用内嵌阴影，装备槽位用浮起阴影 — 视觉上一眼能区分
锁定槽位（Lv.10 解锁）：灰色 + 🔒

竖版布局（移动端）：

顶部员工信息卡缩为横条
11 槽位改为 3 列网格 × 4 行
已装备列表移到下方 Tab

3.2 装备详情 ItemDetail

玩家点开装备时看到的"完整说明书"。最丰富的界面。

横版布局：

┌──────────────────────────────────────────────────────────────┐
│  ← 返回                                          [⋮ 操作]  │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─ 装备卡（大）─────────────────────┐  ┌─ 战力构成 ──────┐ │
│  │  ╔═══╗                           │  │   ╭─────╮      │ │
│  │  ║1.2k║  [黄金] · 黄金菜刀      │  │  ╱  1.2k  ╲    │ │
│  │  ╚═══╝                           │  │ │ 攻 60%   │   │ │
│  │  装备说明：神匠打造，锋利无比     │  │ │ 防 25%   │   │ │
│  │  ────────────────────────────    │  │  ╲ 效 10% ╱    │ │
│  │  🗡️ 攻 +15  🛡️ 防 +8           │  │   ╰─────╯      │ │
│  │  ────────────────────────────    │  │  攻战 720       │ │
│  │  词条（4）：                      │  │  防战 300       │ │
│  │  🟢 精准 ······ +12%             │  │  效战 120       │ │
│  │  🔵 锋利 ······ +25%             │  │  特战 60        │ │
│  │  🟡 屠龙 ······ 3% 几率          │  └────────────────┘ │
│  │  🔴 ⚡爆击 ·· 5%                │                      │
│  │  ────────────────────────────    │  ┌─ 升级路径 ─────┐ │
│  │  孔：🟦🟦 （2/2 已镶）          │  │ +5 强化 +50 战力│ │
│  │  宝石：完美蓝钻 + 完美红钻      │  │ 花费：1000 铜   │ │
│  │  ────────────────────────────    │  │ [→ 强化]        │ │
│  │  buildTag: chef ████████░░ 80%  │  └────────────────┘ │
│  │  推荐员工：李大嘴、佟湘玉       │  ┌─ 替换预览 ─────┐ │
│  │  ────────────────────────────    │  │ 当前：800 战力  │ │
│  │  来源：任务奖励（关汉卿委托）   │  │ 替换：+400 战力 │ │
│  │  [✓ 装备]  [⇄ 替换]  [✕ 卸下]  │  │ [→ 替换]        │ │
│  └─────────────────────────────────┘  └────────────────┘ │
│                                                              │
└──────────────────────────────────────────────────────────────┘

布局原则：

左 60% / 右 40%：左大卡 + 右 3 个辅助卡
右 3 卡按重要性自上而下：战力构成 > 升级路径 > 替换预览
每张卡都遵循 §0.3 的"5 秒决策树"
buildTag 用进度条 + 百分比呈现，比纯文字更直观

关键组件复用：

装备卡：§2.1
战力构成环形图：§2.7
词条标签：§2.5
替换对比面板（弹窗）：§2.6

3.3 战力总览 PowerOverview

玩家头像旁的常驻显示 + 点击展开的里程碑页。

A. 头像旁（常驻）：

┌──────────────────────┐
│  ┌──┐  佟湘玉  Lv.20 │
│  │👤│  ⚡ 12.5k      │  ← 总战力（紫底 + 数字）
│  └──┘  📖 scholar    │  ← 流派标签
└──────────────────────┘

B. 点击展开（里程碑页）：

┌──────────────────────────────────────────────────────────────┐
│  战力总览                                          [← 返回] │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│       ╔═════════════════════╗                                │
│       ║     ⚡ 12.5k       ║    ← 大数字 + 当前称号          │
│       ║   江湖新秀         ║    ← 称号                        │
│       ║   Lv.20 · scholar  ║                                 │
│       ╚═════════════════════╝                                │
│                                                              │
│  ─── 6 档里程碑 ───                                          │
│                                                              │
│   ✓ 1k    小有名气         100 铜 + 学识 +5                   │
│   ✓ 5k    江湖新秀         500 铜 + 传承券 ×1                 │
│   ✓ 10k   一方高手         2000 铜 + 传承券 ×3                 │
│   ▶ 25k   武林名宿         5000 铜 + 传承券 ×5  ← 下一个目标  │
│   🔒 50k  一代宗师         10000 铜 + 神物图纸 ×1               │
│   🔒 100k 神物级           50000 铜 + 限定称号「同福传奇」     │
│                                                              │
│  距离下一个目标：25k 战力（差 12.5k）                        │
│  预计时间：完成 3 个同福委托 + 5 次闯关                       │
│                                                              │
│  ─── 6 员工战力排行 ───                                      │
│  1. 李大嘴 4.2k ⚡ chef                                    │
│  2. 白展堂 3.8k ⚡ defense                                 │
│  3. 佟湘玉 3.5k ⚡ management                              │
│  4. 郭芙蓉 2.8k ⚡ adventure                                │
│  5. 吕秀才 2.3k ⚡ scholar                                  │
│  6. 莫小贝 0.8k ⚡ legendary                                │
│                                                              │
└──────────────────────────────────────────────────────────────┘

规格：

大数字：clamp(48px, 8vw, 96px)，渐变色（金→红）+ 微动画
里程碑进度条：6 格（5k 间隔），已达成 ✓、下一目标 ▶、未达成 🔒
6 员工排行：列表式，名字 + 战力 + 流派标签
"预计时间"：基于玩家历史数据的算法（不空谈，给具体任务）

4. 拟物化方向

同福客栈是中式挂机游戏，拟物化是品牌核心。v3 三大系统的视觉不能"赛博朋克"。

4.1 装备卡：木质 + 印章

┌─ 装备卡 ─────────────────────────┐
│ ╔═════╗  背景：宣纸米黄 #FEF9E7 │  ← 米黄 = 宣纸
│ ║ 菜刀 ║  左边框：朱漆红 #DC2626│  ← 朱漆 = 品质
│ ╚═════╝  阴影：墨色 rgba(31,41, │
│           55, 0.12)            │  ← 墨色 = 立体
│                                   │
│  [木纹底纹 SVG]（淡 5% 透明度） │
│  [印章感红章]（右上角，K+ 词条）│
└──────────────────────────────────┘

关键元素：

宣纸米黄 #FEF9E7 作装备卡背景（不是纯白）
朱漆红 #DC2626 作品质主色（不是赛博红）
墨色 rgba(31,41,55,X) 作阴影（不是纯黑）
木纹 SVG 作底纹（淡 5% 透明度）
印章 SVG 标注极品词条（K 词条右上角，红色 12px 方章）

4.2 槽位格：木质相框

┌─ 槽位格 ──┐
│ ╔═══════╗ │  ← 外框：胡桃木 #8B6F47
│ ║ 菜刀   ║ │  ← 内框：宣纸米黄
│ ║        ║ │  ← 阴影：内嵌（空槽位）
│ ╚═══════╝ │  ← 浮起（装备槽位）
└────────────┘

关键元素：

槽位外框用胡桃木色 #8B6F47（暖色调）
槽位内框用宣纸米黄 #FEF9E7
锁定的槽位用旧木色 #D4B896（褪色感）

4.3 战力大数字：刻章

   ╔════════════╗
   ║            ║
   ║   12.5k    ║   ← 数字：朱砂红 + 宋体
   ║            ║   ← 背景：宣纸米黄
   ║   战力     ║   ← 后缀：墨色小字
   ╚════════════╝
   
   [微动画：数字从左到右"刻"上去]

关键元素：

大数字用朱砂红 #DC2626 + 思源宋体 Bold
数字变化时用刻章动效（不是滚动）：数字从左到右一格一格"刻"出来
总战力达到里程碑时，整块卡闪烁金色

4.4 不要做的拟物化

❌ 不要用玉/翡翠绿当主色（那是给"珠宝"用的）
❌ 不要用青花瓷蓝当主色（那是给"瓷器"用的）
❌ 不要做"3D 立体"装备（跟 2D 平面 UI 风格冲突）
❌ 不要做"金属拉丝"质感（同福是客栈，不是装备锻造铺）
❌ 不要给数字加发光/光晕（刺眼）

4.5 同福色调色板（汇总）

把整套体系的颜色集中在这里，方便全局查。

宣纸米黄  #FEF9E7  背景主色
墨色      #1F2937  文字主色
朱砂红    #DC2626  强调色 / 神物 / 印章
翠竹绿    #10B981  经营 / 绿装
湖青      #0891B2  防御 / 蓝装
紫檀      #8B5CF6  传说 / 紫装
鎏金      #F59E0B  极品 / 金装
胡桃木    #8B6F47  槽位外框
旧木      #D4B896  锁定 / 禁用
青灰      #6B7280  文字次要
宣纸边    #D1D5DB  边框 / 分割线

5. 视觉降噪 checklist

这份 checklist 是每次新增 UI 时的必查项。每多一个颜色、每多一个动效、每多一个图标都要过这一关。

5.1 颜色降噪

[ ] 同一屏内主色不超过 3 种（不包含状态色）
[ ] 品质色只用在品质相关元素（不要拿去标"成功/失败"）
[ ] 词条色只用在词条相关元素（不要拿去标"提示/警告"）
[ ] 战力色阶只用于"战力"这一个概念
[ ] 背景色统一为宣纸米黄 #FEF9E7，不用纯白 #FFFFFF
[ ] 文字色统一为墨色 #1F2937，不用纯黑 #000000

5.2 信息降噪

[ ] 每屏只有 1 个视觉焦点（最大/最亮/最粗的那个）
[ ] 装备卡最多显示 3 个词条（超出折叠）
[ ] 详情页右栏最多 3 个辅助卡（不堆叠）
[ ] 工具提示（tooltip）最多 2 行（多则用弹窗）
[ ] 数字格式统一：X.Xk / X.XM（不用 1,200、1200+、1.2 千）

5.3 装饰降噪

[ ] 不要给图标加背景（除非是"按钮"）
[ ] 不要给文字加描边/阴影（除非是大标题）
[ ] 不要在边框上加渐变（纯色 + 阴影足够）
[ ] 不要给卡片加圆角 + 阴影 + 渐变 + 边框 4 件套（最多 2 件）
[ ] 不要给"成功"加 ✓ 图标 + 绿底 + 绿字 + 绿框（任选 1 个即可）

5.4 动效降噪

[ ] 同一元素最多 1 个动效（数字滚动 + 颜色变化 = 1 个）
[ ] 不要给静态元素加 hover 动效（除非真的可点）
[ ] 动效时长不超过 0.5s（除非是里程碑庆祝）
[ ] 尊重 prefers-reduced-motion（无障碍要求）

5.5 排版降噪

[ ] 同一屏内字号不超过 5 种（24/18/14/12/11 是上限）
[ ] 数字用等宽字体（避免跳动）
[ ] 标题用衬线体，正文用黑体（不要全用一种）
[ ] 行高 1.5x（中文需要宽松）
[ ] 段间距 12px（比行间距大一倍，区分"段"和"行"）

6. 动效规范

6.1 动效分级

| 级别 | 用途 | 时长 | 缓动 | | :---: | :--- | :---: | :--- | | L1 反馈 | 按钮点击、开关切换 | 100-150ms | ease-out | | L2 过渡 | 装备卡 hover、tab 切换 | 200-300ms | ease-out | | L3 状态 | 装备替换、槽位变化 | 300-500ms | ease-in-out | | L4 庆祝 | 战力里程碑、品质升级 | 1000-1500ms | ease-out + bounce |

6.2 三大核心动效

A. 战力数字滚动（L3）

触发：装备替换后，战力从 800 → 1200
动效：数字从 800 滚到 1200，0.5s，时长 ease-out
      滚动结束后：颜色闪烁（绿→原色），0.2s

B. 槽位装备入场（L2）

触发：玩家装备一件装备到空槽位
动效：装备卡从槽位下方滑入（translateY: 20px → 0），0.3s
      入场后：左边框闪光 1 次（主色 → 白 → 主色），0.2s

C. 战力里程碑达成（L4）

触发：总战力达到 1k / 5k / 10k / 25k / 50k / 100k
动效：1. 整页背景渐变（金色 radial-gradient），0.5s
      2. 战力大数字 0→目标值滚动，1s
      3. 弹窗"称号获得！"，从下方滑入，0.3s
      4. 弹窗停留 3s 后自动关闭

6.3 性能与无障碍

只用 transform 和 opacity（不触发重排）
GPU 加速：transform: translateZ(0) 给动效元素
避免同时动效 > 10 个元素
prefers-reduced-motion 适配：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

7. 与现有组件的复用

v3 的三大系统不是空中楼阁，要复用现有组件，避免重复造轮子。

7.1 可复用组件清单

7.2 不可复用 / 需要新建

攻防饼图（全新）
战力构成环形图（全新）
替换对比面板（全新，弹窗型）
里程碑进度条（全新，6 格可视化）

7.3 迁移成本评估

| 操作 | 改动量 | 风险 | | :--- | :---: | :--- | | 装备卡从 BaggageGrid 抽离 | 中 | 低（逻辑可复用） | | 战力大数字组件 | 小 | 低（独立组件） | | 攻防饼图组件 | 中 | 中（需测试响应式） | | 替换对比弹窗 | 中 | 中（交互多） | | 战力总览 Tab | 小 | 低（可放成就 Tab 旁） |

8. 实施切片

8.1 Phase 1（1 个版本）— 视觉规范 + 设计令牌

[ ] 本文档定稿（v1.0）
[ ] 设计令牌 落到 src/styles/tokens.ts（或 tailwind.config.js）
[ ] 宣纸米黄 + 墨色 + 朱砂红 三色应用到全局
[ ] 6 档品质色 落到 tailwind.config.js 的 theme.extend.colors
[ ] 5 档词条色 落到 theme.extend.colors
[ ] 战力色阶 落到 theme.extend.colors

8.2 Phase 2（1-2 个版本）— 核心组件

[ ] PowerBigNumber 组件（独立可用）
[ ] ItemCard 组件（替换现有 BaggageGrid 卡片）
[ ] SlotCell 组件
[ ] AffixTag 组件
[ ] CoeffPieChart 组件

8.3 Phase 3（1 个版本）— 三个核心界面

[ ] SlotPanel 完整实现
[ ] ItemDetail 完整实现
[ ] PowerOverview Tab 完整实现
[ ] ComparePanel 弹窗完整实现

8.4 Phase 4（1 个版本）— 动效 + 优化

[ ] 三大核心动效（数字滚动 / 槽位入场 / 里程碑庆祝）
[ ] 视觉降噪 checklist 全量自检
[ ] 性能优化（GPU 加速 / 懒加载）
[ ] 无障碍适配（prefers-reduced-motion / 对比度 / 字号）

8.5 验收清单

[ ] 新玩家 5 秒内能从战力数字 + 颜色判断装备好坏
[ ] 装备替换后战力变化一目了然（不需要算公式）
[ ] 槽位面板 11 个子槽位4 列布局清晰可辨
[ ] buildTag 进度条比纯文字更直观
[ ] 鼠标悬停战力大数字能展开 4 子项占比
[ ] 6 档里程碑进度条一眼能看出当前进度
[ ] 整套界面只用宣纸/墨色/朱砂三主色，视觉降噪到位
[ ] 移动端竖版布局不丢失功能（11 槽位 3 列）

附录 A：与 v3 文档的对照表

附录 B：与同福现有 UI 的关系

本文档不替代docs/uirefactor/ 下现有的 UI 优化稿。本文档是为 v3 新三系统专门定制的视觉规范。

不冲突的部分：

颜色体系：与现有 tongfu-art-style-guide-v1.md 互补
拟物化方向：与现有"宣纸 + 墨色"主调一致
字体：与现有"思源宋体（标题）+ 思源黑体（正文）"一致

新增的部分：

品质 6 档色组（现有 UI 没有）
词条 5 档色（现有 UI 没有）
攻防三色（现有 UI 没有）
战力色阶（现有 UI 没有）
环形图组件（现有 UI 没用过）
替换对比面板（现有 UI 没有）

本文档结束。配套 v3 机制文档使用，落地前作为视觉契约。

设计铁律（再次强调）：

5 秒决策 — 每屏只解决 1 个决策

1 个焦点 — 同屏只 1 个视觉焦点

3 主色 — 宣纸 + 墨色 + 朱砂（最多 +1 品质色）

降噪 > 美观 — 玩家一眼看清 > 视觉酷炫

目录

0. 文档目的与设计哲学

0.1 为什么单独写这个文档

0.2 三大设计哲学

0.3 一图流：玩家视角的"5 秒决策树"

1. 设计令牌

1.1 品质 9 档色（核心）

1.2 词条 5 档色

1.3 攻防三色

1.4 战力色阶

1.5 状态色

1.6 字体

1.7 间距 / 圆角 / 阴影

2. 核心组件

2.1 装备卡 ItemCard

2.2 槽位格 SlotCell

2.3 战力大数字 PowerBigNumber

2.4 攻防饼图 CoeffPieChart

2.5 词条标签 AffixTag

2.6 替换对比面板 ComparePanel

2.7 战力构成环形图 PowerBreakdownRing

3. 三个核心界面布局

3.1 槽位面板 SlotPanel

3.2 装备详情 ItemDetail

3.3 战力总览 PowerOverview

4. 拟物化方向

4.1 装备卡：木质 + 印章

4.2 槽位格：木质相框

4.3 战力大数字：刻章

4.4 不要做的拟物化

4.5 同福色调色板（汇总）

5. 视觉降噪 checklist

5.1 颜色降噪

5.2 信息降噪

5.3 装饰降噪

5.4 动效降噪

5.5 排版降噪

6. 动效规范

6.1 动效分级

6.2 三大核心动效

6.3 性能与无障碍

7. 与现有组件的复用

7.1 可复用组件清单

7.2 不可复用 / 需要新建

7.3 迁移成本评估

8. 实施切片

8.1 Phase 1（1 个版本）— 视觉规范 + 设计令牌

8.2 Phase 2（1-2 个版本）— 核心组件

8.3 Phase 3（1 个版本）— 三个核心界面

8.4 Phase 4（1 个版本）— 动效 + 优化

8.5 验收清单

附录 A：与 v3 文档的对照表

附录 B：与同福现有 UI 的关系