zhxiao1124
edb2db5966
本次调整仅修改了Dashboard组件中MetricCard的标签文字字号，将原本13px的标签文字调整为18px，统一仪表盘区域的文字视觉层级，让页面信息展示更清晰。
149 lines
5.6 KiB
Markdown
149 lines
5.6 KiB
Markdown
# 2K 显示器适配：px → rem 转换计划
|
||
|
||
## 背景
|
||
|
||
当前项目所有尺寸均使用 px 硬编码，在 2K (2560×1440) 显示器上元素偏小。将 px 转为 rem 后，可通过调整根 `font-size` 一键缩放整个 UI。
|
||
|
||
## 转换规则
|
||
|
||
基础：`1rem = 16px`（浏览器默认），`html { font-size: 16px }` 显式声明。
|
||
|
||
### 需要转换的值
|
||
| 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 宽 |
|
||
|
||
### 不转换的值
|
||
- **边框宽度** `1px` — 保持 px，rem 在小数值下渲染不精确
|
||
- **box-shadow 偏移/模糊** `0 2px 6px` — 保持 px，视觉效果不受缩放影响
|
||
- **Tailwind 间距类** `p-5`, `gap-4`, `h-9` 等 — 已经是 rem 单位，无需修改
|
||
|
||
## 涉及文件清单
|
||
|
||
### 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. 浏览器检查：`html` 根字号为 16px，所有尺寸使用 rem
|
||
4. 2K 适配：修改 `html { font-size: 18px }` 后 UI 等比放大
|