From edb2db59662df24a5ed352ac9c9d69dec51eb419 Mon Sep 17 00:00:00 2001 From: zhxiao1124 Date: Fri, 3 Jul 2026 15:36:04 +0800 Subject: [PATCH] =?UTF-8?q?refactor(Dashboard):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=A0=87=E7=AD=BE=E6=96=87=E5=AD=97?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E4=B8=BA18px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 本次调整仅修改了Dashboard组件中MetricCard的标签文字字号，将原本13px的标签文字调整为18px，统一仪表盘区域的文字视觉层级，让页面信息展示更清晰。 --- .mimocode/plans/1783060688305-neon-meadow.md | 245 ++++++++++--------- src/Dashboard/index.tsx | 2 +- 2 files changed, 135 insertions(+), 112 deletions(-) diff --git a/.mimocode/plans/1783060688305-neon-meadow.md b/.mimocode/plans/1783060688305-neon-meadow.md index 198609a..edeef64 100644 --- 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 ( -
- -``` - -### 步骤 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 等比放大 diff --git a/src/Dashboard/index.tsx b/src/Dashboard/index.tsx index ce5fec8..609db1d 100644 --- a/src/Dashboard/index.tsx +++ b/src/Dashboard/index.tsx @@ -28,7 +28,7 @@ function MetricCard({ label, value, icon }: MetricCardProps & { icon: string })
{METRIC_ICONS[icon]}
- {label} + {label}
{value}