refactor(Dashboard): 调整仪表盘标签文字大小为18px

本次调整仅修改了Dashboard组件中MetricCard的标签文字字号，将原本13px的标签文字调整为18px，统一仪表盘区域的文字视觉层级，让页面信息展示更清晰。
2026-07-03 15:36:04 +08:00
parent 8019c52fbc
commit edb2db5966
2 changed files with 135 additions and 112 deletions
--- a/.mimocode/plans/1783060688305-neon-meadow.md
+++ b/.mimocode/plans/1783060688305-neon-meadow.md
@@ -1,125 +1,148 @@
-# 后台样式统一优化计划
+# 2K 显示器适配：px → rem 转换计划

-## 问题总结
+## 背景

-经过全面审查，发现以下风格不一致和突兀的地方：
+当前项目所有尺寸均使用 px 硬编码，在 2K (2560×1440) 显示器上元素偏小。将 px 转为 rem 后，可通过调整根 `font-size` 一键缩放整个 UI。

-| # | 问题 | 严重度 | 涉及文件 |
-|---|------|--------|----------|
-| 1 | CSS 中大量使用硬编码十六进制颜色，未引用 Tailwind 语义 token | 高 | `index.css` |
-| 2 | `stat-card` 悬浮效果（上移+大阴影）与 `section-card`（仅阴影）风格差异大 | 中 | `index.css` |
-| 3 | 主按钮悬浮时 `translateY(-1px)` 在管理后台中显得突兀 | 中 | `index.css` |
-| 4 | `blue-600` 应为 `brand` 的渐变色在布局和头像中混用 | 中 | `layout/index.tsx`, `ProfileSummary.tsx` |
-| 5 | 登录页使用 `#f7f8fa` 而非 `canvas` token | 低 | `Login/index.tsx`, `LoginPanel.tsx` |
-| 6 | Role/Personnel 页面缺少 `page-stack` 包裹 | 中 | `Role/index.tsx`, `Personnel/index.tsx` |
-| 7 | Modal 宽度不一致（640/720/默认520） | 中 | `Channel`, `DramaList`, `DramaDetail`, `Role`, `Personnel` |
-| 8 | 分页配置不一致（部分有 sizeCanChange/showTotal，部分没有） | 中 | 多个页面 |
-| 9 | 状态标签颜色不一致（禁用：红色 vs 灰色） | 低 | `User`, `Personnel` vs `Channel`, `Drama` |
-| 10 | DramaList 的"新增短剧"按钮用绿色，其他页面用蓝色 | 低 | `DramaList.tsx` |
-| 11 | InputNumber 宽度不一致（固定180px vs 100%） | 低 | `Channel` vs `Drama` |
+## 转换规则

-## 实施方案
+基础：`1rem = 16px`（浏览器默认），`html { font-size: 16px }` 显式声明。

-### 步骤 1：统一 CSS 中的颜色引用 (`index.css`)
+### 需要转换的值
+| px | rem | 用途 |
+|----|-----|------|
+| 1px | 1px | 边框宽度（保持 px，不转换） |
+| 2px | 0.125rem | 小间距 |
+| 4px | 0.25rem | 微间距 |
+| 6px | 0.375rem | 小内距 |
+| 8px | 0.5rem | 内距/间距 |
+| 10px | 0.625rem | gap-2.5 等 |
+| 12px | 0.75rem | 小字号/内距 |
+| 13px | 0.8125rem | 辅助文字 |
+| 14px | 0.875rem | 次要文字 |
+| 15px | 0.9375rem | 标题文字 |
+| 16px | 1rem | 正文/内距 |
+| 18px | 1.125rem | 表单帮助 |
+| 20px | 1.25rem | 内距 |
+| 22px | 1.375rem | 登录标题 |
+| 24px | 1.5rem | 大内距 |
+| 30px | 1.875rem | 仪表盘数值 |
+| 32px | 2rem | 头像 |
+| 36px | 2.25rem | 图标容器 |
+| 40px | 2.5rem | 大内距 |
+| 42px | 2.625rem | 登录卡片宽 |
+| 44px | 2.75rem | 按钮高度/头像 |
+| 48px | 3rem | 登录内距 |
+| 52px | 3.25rem | 侧边栏宽 |
+| 56px | 3.5rem | 登录视觉内距 |
+| 60px | 3.75rem | 头部高度 |
+| 64px | 4rem | 大头像/图标容器 |
+| 180px | 11.25rem | InputNumber 宽 |
+| 200px | 12.5rem | InputNumber 宽 |
+| 224px | 14rem | 侧边栏宽 |
+| 360px | 22.5rem | 权限树高 |
+| 420px | 26.25rem | 登录卡片宽 |
+| 520px | 32.5rem | 登录左栏最小宽 |
+| 640px | 40rem | Modal 宽 |
+| 680px | 42.5rem | Modal 宽 |
+| 720px | 45rem | Modal 宽 |

-将所有硬编码颜色替换为 Tailwind 语义化写法：
-
-```css
-/* 之前 */
-background-color: #f2f3f5 !important;  /* canvas */
-color: #165dff !important;             /* brand */
-background-color: #e8f3ff !important;  /* brand-light */
-color: #4e5969 !important;             /* 无对应token，新增 secondary */
-background-color: #fafbfc !important;  /* 无对应token，新增 header-bg */
-color: #1d2129 !important;             /* ink */
-color: #86909c !important;             /* muted */
-border-color: #c9cdd4 !important;      /* 无对应token，新增 border-hover */
-background-color: #f7f8fa !important;  /* 无对应token，新增 row-hover */
-color: #fff !important;                /* white */
-```
-
-新增 tailwind.config.js token：
- `secondary: '#4e5969'` — 表头、表单标签等次级文字
- `header-bg: '#fafbfc'` — 表头、描述标签背景
- `row-hover: '#f7f8fa'` — 表格行悬浮背景
- `border-hover: '#c9cdd4'` — 输入框悬浮边框
-
-CSS 改用 `theme()` 函数引用：
-```css
-background-color: theme('colors.canvas') !important;
-color: theme('colors.brand') !important;
-```
-
-### 步骤 2：统一悬浮效果 (`index.css`)
-
- 移除 `stat-card` 的 `hover:-translate-y-0.5`，改为与 `section-card` 一致的仅阴影变化
- 移除 `.arco-btn-primary:hover` 的 `transform: translateY(-1px)`
- 统一所有悬浮阴影为同一级别
-
-### 步骤 3：修复渐变色 (`layout/index.tsx`, `ProfileSummary.tsx`)
-
-将 `to-blue-600` 改为 `to-brand`：
- `layout/index.tsx` 行 61：Logo 渐变
- `layout/index.tsx` 行 103：Avatar 渐变
- `ProfileSummary.tsx` 行 7：Avatar 渐变
-
-### 步骤 4：修复登录页背景色 (`Login/index.tsx`, `LoginPanel.tsx`)
-
-将 `bg-[#f7f8fa]` 改为 `bg-canvas`
-
-### 步骤 5：统一页面结构 (`Role/index.tsx`, `Personnel/index.tsx`)
-
-为 Role 和 Personnel 页面添加 `page-stack` 包裹：
-```tsx
-return (
-    <div className="page-stack">
-        <Panel ...>
-```
-
-### 步骤 6：统一 Modal 宽度
-
-所有包含表单的 Modal 统一使用 `style={{ width: 640 }}`：
- `Role/index.tsx`：新增角色 Modal 添加宽度
- `Personnel/index.tsx`：新增人员 Modal、分配角色 Modal 添加宽度
-
-### 步骤 7：统一分页配置
-
-所有 Table 的 pagination 统一添加 `sizeCanChange: true` 和 `showTotal: true`：
- `User/index.tsx`
- `Role/index.tsx`
- `Personnel/index.tsx`
- `Data/index.tsx`（3个表格）
-
-### 步骤 8：统一状态标签颜色
-
-禁用/停用状态统一使用 `gray` 而非 `red`：
- `User/index.tsx`：将 `'red'` 改为 `'gray'`
- `Personnel/index.tsx`：将 `'red'` 改为 `'gray'`
-
-### 步骤 9：统一"新增"按钮颜色
-
-`DramaList.tsx` 的"新增短剧"按钮移除 `status="success"`，使用默认蓝色主按钮。
-
-### 步骤 10：统一 InputNumber 宽度
-
-`Channel/index.tsx` 的 InputNumber 从 `style={{ width: 180 }}` 改为 `style={{ width: 200 }}`，与 Select 保持一致。
+### 不转换的值
+- **边框宽度** `1px` — 保持 px，rem 在小数值下渲染不精确
+- **box-shadow 偏移/模糊** `0 2px 6px` — 保持 px，视觉效果不受缩放影响
+- **Tailwind 间距类** `p-5`, `gap-4`, `h-9` 等 — 已经是 rem 单位，无需修改

 ## 涉及文件清单

-1. `tailwind.config.js` — 新增 secondary/header-bg/row-hover/border-hover token
-2. `src/index.css` — 统一颜色引用、统一悬浮效果
-3. `src/layout/index.tsx` — 修复渐变色 blue-600 → brand
-4. `src/Profile/components/ProfileSummary.tsx` — 修复渐变色
-5. `src/Login/index.tsx` — 背景色 canvas
-6. `src/Login/components/LoginPanel.tsx` — 背景色 canvas
-7. `src/Role/index.tsx` — 添加 page-stack、Modal 宽度、分页配置
-8. `src/Personnel/index.tsx` — 添加 page-stack、Modal 宽度、分页配置、状态标签颜色
-9. `src/User/index.tsx` — 分页配置、状态标签颜色
-10. `src/Data/index.tsx` — 分页配置（3个表格）
-11. `src/Drama/components/DramaList.tsx` — 按钮颜色
+### 1. `src/index.css` — CSS 中的 px 值
+- 字号：`15px` → `0.9375rem`，`13px` → `0.8125rem`，`16px` → `1rem`
+- 内距：`2px 8px` → `0.125rem 0.5rem`，`14px 20px` → `0.875rem 1.25rem` 等
+- 外距：`mb-[18px]` → `mb-[1.125rem]`，`margin-top: 16px` → `margin-top: 1rem`
+- 圆角：`0.5rem`（已是 rem，保持）
+
+### 2. `src/layout/index.tsx` — 布局
+- `h-[60px]` → `h-[3.75rem]`
+- `width={224}` → `width={"14rem"}`
+- `text-[15px]` → `text-[0.9375rem]`
+- `text-[13px]` → `text-[0.8125rem]`
+- `size={32}` → `size={32}`（Arco Avatar 的 size 是数字像素，保持不变）
+
+### 3. `src/components/Panel/index.tsx`
+- `text-[15px]` → `text-[0.9375rem]`
+
+### 4. `src/components/NoAccessPage/index.tsx`
+- `text-[14px]` → `text-[0.875rem]`
+
+### 5. `src/Dashboard/index.tsx`
+- `text-[13px]` → `text-[0.8125rem]`
+- `text-[30px]` → `text-[1.875rem]`
+
+### 6. `src/Login/index.tsx`
+- `minmax(520px,0.95fr)` → `minmax(32.5rem,0.95fr)`
+- `minmax(420px,1fr)` → `minmax(26.25rem,1fr)`
+
+### 7. `src/Login/components/LoginPanel.tsx`
+- `max-w-[420px]` → `max-w-[26.25rem]`
+- `text-[22px]` → `text-[1.375rem]`
+- `text-[13px]` → `text-[0.8125rem]`
+- `text-[15px]` → `text-[0.9375rem]`
+
+### 8. `src/Login/components/LoginVisual.tsx`
+- `text-[15px]` → `text-[0.9375rem]`
+- `text-[13px]` → `text-[0.8125rem]`
+- `text-[44px]` → `text-[2.75rem]`
+- `max-w-[640px]` → `max-w-[40rem]`
+- `max-w-[560px]` → `max-w-[35rem]`
+
+### 9. `src/Profile/components/ProfileSummary.tsx`
+- `text-[13px]` → `text-[0.8125rem]`
+
+### 10. `src/Profile/components/ProfileInfoList.tsx`
+- `text-[12px]` → `text-[0.75rem]`
+- `text-[15px]` → `text-[0.9375rem]`
+
+### 11. `src/Role/components/PermissionTreePicker.tsx`
+- `mb-[15px]` → `mb-[0.9375rem]`
+- `h-[360px]` → `h-[22.5rem]`
+
+### 12. Modal 宽度（inline style）
+- `Channel/index.tsx`：`style={{ width: 640 }}` → `style={{ width: "40rem" }}`
+- `Drama/components/DramaList.tsx`：同上
+- `Drama/components/DramaDetail.tsx`：`style={{ width: 720 }}` → `style={{ width: "45rem" }}`
+- `Drama/components/EpisodeTable.tsx`：`style={{ width: 680 }}` → `style={{ width: "42.5rem" }}`
+- `Role/index.tsx`：`style={{ width: 640 }}` → `style={{ width: "40rem" }}`
+- `Personnel/index.tsx`：`style={{ width: 640 }}` → `style={{ width: "40rem" }}`
+
+### 13. `Channel/index.tsx` InputNumber/Select 宽度
+- `style={{ width: 200 }}` → `style={{ width: "12.5rem" }}`
+
+## 不修改的内容
+
+- Tailwind 间距类（`p-5`, `gap-4`, `h-9` 等）— 已是 rem
+- `border-line/60` 等边框 — 保持 1px
+- `shadow-*` 类 — shadow 值保持 px
+- Arco 组件的 `size` prop（如 Avatar `size={32}`）— Arco 内部用 px，保持数字
+- `rounded-xl`, `rounded-2xl` 等 — 已在 config 中定义为 rem
+
+## 实施顺序
+
+1. `src/index.css` — CSS 中的 px 值
+2. `src/layout/index.tsx` — 布局尺寸
+3. `src/components/Panel/index.tsx` — 面板标题字号
+4. `src/components/NoAccessPage/index.tsx` — 文字字号
+5. `src/Dashboard/index.tsx` — 仪表盘字号
+6. `src/Login/index.tsx` — 登录页布局
+7. `src/Login/components/LoginPanel.tsx` — 登录面板
+8. `src/Login/components/LoginVisual.tsx` — 登录视觉
+9. `src/Profile/components/ProfileSummary.tsx` — 个人信息
+10. `src/Profile/components/ProfileInfoList.tsx` — 信息列表
+11. `src/Role/components/PermissionTreePicker.tsx` — 权限树
+12. 所有 Modal 宽度（Channel, DramaList, DramaDetail, EpisodeTable, Role, Personnel）
+13. Channel InputNumber/Select 宽度

 ## 验证方式

 1. `pnpm lint` — TypeScript 类型检查通过
 2. `pnpm build` — 构建成功
-3. 视觉检查：各页面悬浮效果、颜色、间距保持一致
+3. 浏览器检查：`html` 根字号为 16px，所有尺寸使用 rem
+4. 2K 适配：修改 `html { font-size: 18px }` 后 UI 等比放大