cyh-tk-admin/.mimocode/plans/1783060688305-neon-meadow.md

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