首页 3.0 精修方案 v1 · UI 重构

立项时间：2026-06-26 文档状态：精修方案（待评审）前置文档：首页3.0精修代码总结核心约束：只调尺寸 / 间距 / 对齐 / 密度，不动色板 / 字体 / 材质 / 动效 / 数据 / 业务

0. 范围与原则

基线 UI：用户提供的截图（含新版"经营总览台账"模块）

红线（不动）：

所有色值（5 类宣纸 + 6 类朱砂 + 木棕/灯火/竹青/靛蓝等共 20+ 个 hex）
3 套字体（Noto Serif SC / ZCOOL KuaiLe / Playfair Display）
所有图标（lucide-react + 16 个 tongfu 图标 + 横幅/头像/印章）
7 类 tongfu 工具类（parchment / parchment-light / crest / seal / button-wooden / title / bubbles）
7 个 metric tone（amber/ochre/cinnabar/plum/cyan/jade/saffron）
所有交互逻辑 / 动效 / 业务 / 数据流
江湖消息悬浮信笺的"朱砂单字印章 / 红线信笺 / 红木画轴"特色
经营总览台账的"朱砂印章 + 大字 + corner badge"特色

白名单（可动）：

className 上的尺寸 / 间距 / 对齐 / 密度
圆角（统一为 8/10/12 三档）
网格列数（2 列 / 3 列 / 4 列）
padding / margin / gap
max-w 收紧到 1440
min-width / min-height 对齐

目标：

1280 / 1440 / 1680 三档视口都有合理表现
4 状态卡 / 4 核心卡 / 6 侧栏木牌内部对齐统一
字号阶梯收编到 8-9 档
10 Tab 3 列最后一行不孤立
大堂图比例更扁更宽

1. 12 个精修点（按优先级）

优先级 P0（必改 / 改动小 / 收益大）

精修 1：顶部 4 状态卡宽度统一

位置：AppHeaderBar.tsx 第 61-110 行

现状：

4 个状态卡 padding 不一致（px-3 py-2 和 px-2 py-1 混）
min-width 不统一（部分 90px / 部分 110px / 部分 150px）
flex 比例不一致（部分 flex-1 / 部分 flex-1.4 / 部分无）

改为：

4 卡统一 min-width: 140px（最小宽度）
4 卡统一 flex: 1（等弹性，scale 比例）
4 卡统一 padding 12px 14px
4 卡内部"标题"行用 text-[10px] tracking-[0.05em]
4 卡"数字"行用 text-[22px] font-serif font-black（与截图一致）
4 卡"副"行用 text-[10px] text-[#8d6e63]

预期效果：4 个状态卡作为一组，宽度一致 + 内部对齐一致 → 一眼能扫读。

涉及文件：AppHeaderBar.tsx

精修 2：顶部 5 按钮 stretch 对齐

位置：AppHeaderBar.tsx 第 112-161 行

现状：

5 按钮 padding 不一致（前 4 个 p-2，第 5 个 px-3 py-2）
高度不一致（32-36px）
没有 stretch 对齐

改为：

前 4 个图标按钮：固定 36×36，align-self: center
"天降财神"主按钮：固定高度 36px，padding 0 14px，align-self: center
整个按钮组用 flex items-center gap-1.5（紧凑）
按钮组外层加 self-stretch 让它和左边状态卡等高

预期效果：让右侧按钮组形成一条整齐的"按钮带"。

涉及文件：AppHeaderBar.tsx

精修 3：SystemStatusPanel 4 子卡 padding 加大

位置：SystemStatusPanel.tsx 第 176-242 行

现状：

子卡 rounded-[12px] border px-2 py-1.5 text-[9px]
标题 9px、正文 11px、副 8px
padding 极小（px-2 py-1.5 = 8/6），内容挤

改为：

子卡 rounded-[10px] border px-3 py-2 text-[10px]
标题从 text-[9px] → text-[10px]
数值从 text-[11px] → text-[12px]
副从 text-[8px] → text-[9px]
子卡之间 gap 从 gap-1.5 → gap-2

预期效果：4 子卡可读性提升，账号/周目/Buff/客栈 4 个状态一目了然。

涉及文件：SystemStatusPanel.tsx

优先级 P1（建议改 / 改动中等 / 收益明显）

精修 4：左侧 6 木牌尺寸 + 字号统一

位置：DesktopSidebar.tsx

现状：

6 按钮 h-14 w-14（56×56）
字号 text-[10px]
gap-4（16px）偏大
中间分隔 my-1 w-8 border-b-2 border-dashed 突兀

改为：

6 按钮 h-16 w-16（64×64，比 56 大 8px）
字号 text-[11px]
gap 从 gap-4 → gap-3（16→12，更紧凑）
中间分隔改为"金线 + 圆点"小木塞（用 <div> 替代 border-b-2 border-dashed）

预期效果：6 个木牌形成整齐的"挂墙木牌"序列，视觉上更紧凑。

涉及文件：DesktopSidebar.tsx

精修 5：大堂图比例 16:9 → 21:9

位置：MainHallPanel.tsx 第 99 行

现状：

h-32 sm:h-40 lg:h-44（128-176px）
比例 16:9（偏方）
圆角 16px

改为：

统一 h-48（192px）
比例约 21:9（更扁更宽）
圆角从 16px → 12px（与其他系统卡一致）

预期效果：大堂图更接近"古代挂轴"比例，视觉舒展。

涉及文件：MainHallPanel.tsx

精修 6：控制台 10 Tab 2 列布局

位置：ConsoleTabsBar.tsx 第 42 行

现状：

grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3
10 Tab 形成 3-3-3-1 布局，最后一行 1 个孤立
min-h-[46px] 偏矮

改为：

改为 grid grid-cols-2 sm:grid-cols-3（lg 也用 3 列）
或保留 3 列但 min-h 加大到 52px，最后一行 Tab 用 col-span-3 占满整行
推荐：2 列布局（grid-cols-2 sm:grid-cols-3 lg:grid-cols-2），10 Tab 形成 2-2-2-2-2 平衡布局

预期效果：10 Tab 5 行 2 列，每行整齐，最后一行不孤立。

涉及文件：ConsoleTabsBar.tsx

精修 7：经营总览台账 4 核心卡 padding/圆角统一

位置：MetricGrid.tsx 第 51-82 行（Card 组件）

现状：

4 核心卡 rounded-xl border p-3（12px padding）
4 卡 grid grid-cols-2 md:grid-cols-4 gap-3（4 列等宽）
标题 text-[11px] font-black
数据 text-[13px] sm:text-[14px] font-black

改为：

4 核心卡 rounded-[10px] border p-4（16px padding，更舒展）
4 卡 grid grid-cols-2 md:grid-cols-4 gap-4（gap 加大到 16px）
标题 text-[11px] font-black（保持）
数据 text-[15px] sm:text-[16px] font-black（加大 2px，与截图一致）
corner badge 位置固定在右上角（已是 absolute right-0 top-0）

预期效果：4 核心卡更精致、更舒展，与经营总览台账的"高端感"匹配。

涉及文件：MetricGrid.tsx

精修 8：max-w 1680 → 1440

位置：DesktopWorkspacePanel.tsx 第 126、130、186 行（3 处）；AppHeaderBar.tsx 第 49 行（1 处）

现状：

max-w-[1680px] 在 4 处使用
1680 太宽，1280-1440 视口下挤压

改为：

4 处全部改为 max-w-[1440px]

预期效果：1280-1440 视口下单行布局更舒展。

涉及文件：DesktopWorkspacePanel.tsx、AppHeaderBar.tsx

优先级 P2（可选 / 改动大 / 收益小）

精修 9：剧情追踪条 padding + 进度条宽

位置：StoryTrackingCard.tsx

现状：

px-3 py-2（12/8）
进度条 sm:w-[180px] 偏窄

改为：

px-4 py-3（16/12）
进度条 sm:w-[240px]

预期效果：剧情追踪条与顶部状态栏视觉权重平衡。

涉及文件：StoryTrackingCard.tsx

精修 10：字号阶梯清理（如做）

现状：9/10/11/12/13/14/15/16/18/22/24/26 多档并存

改为（如做）：

9px 全部合并到 10px
13/14 合并到 14px
15/16 合并到 16px
18/20 合并到 18px
22/24 合并到 22px
最终阶梯：10 / 11 / 12 / 14 / 16 / 18 / 22 / 26

预期效果：字号统一，可读性提升。

影响范围：所有首页组件，改动大。本次建议不动。

精修 11：圆角阶梯收编

现状：rounded-lg / rounded-xl / rounded-2xl / rounded-3xl / rounded-[10px] / rounded-[11px] / rounded-[12px] 并存

改为（如做）：

统一为 8 / 10 / 12 / 16 四档
8 = 卡片 / 10 = 系统卡 / 12 = 主卡 / 16 = 模态

预期效果：圆角统一，视觉一致性提升。

影响范围：所有首页组件，改动大。本次建议不动。

精修 12：色值 token 集中（如做）

现状：宣纸 5+ 种 hex、朱砂 5+ 种 hex 散落

改为（如做）：

集中到 index.css 的 :root token
组件 className 改用 var(--paper-1) 风格

预期效果：可维护性提升。

影响范围：所有首页组件，改动极大。本次不动。

2. 落地实施步骤

步骤 1：精修 P0（1-2 小时）

涉及 3 处改动：顶部状态卡宽度、按钮对齐、SystemStatusPanel 4 子卡 padding。

不破坏现有功能，纯 className 调整。

预计改动量：

AppHeaderBar.tsx：~40 行 className 调整
SystemStatusPanel.tsx：~30 行 className 调整

步骤 2：精修 P1（2-3 小时）

涉及 5 处改动：左侧 6 木牌、大堂图比例、控制台 10 Tab、经营总览 4 核心卡、max-w 1440。

预计改动量：

DesktopSidebar.tsx：~15 行
MainHallPanel.tsx：~5 行
ConsoleTabsBar.tsx：~10 行
MetricGrid.tsx：~20 行
DesktopWorkspacePanel.tsx + AppHeaderBar.tsx：~6 行

步骤 3：精修 P2（如需要，半天）

涉及 3 处改动：剧情追踪条 padding、字号清理、圆角收编。

建议本次不动，仅做记录。

3. 验收清单

[ ] 顶部 4 个状态卡宽度一致、内部对齐
[ ] 顶部 5 个按钮高度一致
[ ] SystemStatusPanel 4 子卡 padding/字号加大
[ ] 左侧 6 木牌尺寸 + 字号统一
[ ] 大堂图比例 21:9
[ ] 控制台 10 Tab 2 列布局（最后一行不孤立）
[ ] 经营总览台账 4 核心卡 padding 加大到 16px
[ ] max-w 1680 → 1440
[ ] 没有任何"新色板 / 新字体 / 新材质"被引入
[ ] 7 类 tongfu 工具类继续生效
[ ] 7 个 metric tone 继续生效
[ ] 16 个 tongfu 图标继续可用
[ ] 江湖消息悬浮信笺特色保留
[ ] 经营总览台账特色保留
[ ] 剧情追踪条特色保留
[ ] 现有所有交互 / 动效 / 数据完全不变

4. 风险与回退

| 风险 | 影响 | 回退 | | --- | --- | --- | | max-w 1440 在 1680 屏留白多 | 低 | 提供 1680 媒体查询，重新放开 | | 控制台 2 列让 Tab 显得"大" | 中 | 改回 3 列但 min-h 加大到 52px | | 4 核心卡 padding 16px 让数据换行 | 中 | 减小 padding 到 14px | | 字号 +2px 让 4 核心卡溢出 | 低 | 减小回 15px | | 5 按钮 stretch 让"天降财神"变形 | 低 | 让主按钮脱离 stretch 单独占位 |

5. 不做的事

不动 App.tsx（4402 行的状态管理 + 业务逻辑）
不动 InnCourt.tsx（809 行大堂场景，技术债）
不动 JianghuBriefboard.tsx（417 行悬浮信笺，技术债）
不拆分任何组件
不改任何业务 props 接口
不引入任何新文件 / 新依赖
不引入任何新色值 / 新字体 / 新图标

预计代码改动量：

7 个文件 / 120-160 行 className 调整
0 行逻辑变更
0 行数据变更
0 行新增文件