# 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 等比放大