zhxiao1124
8019c52fbc
本次提交完成全后台页面的样式统一整改： 1. 新增Tailwind语义化颜色token，替换所有硬编码颜色值 2. 统一全站悬浮交互效果与阴影样式 3. 修正头像、菜单的品牌渐变配色 4. 统一登录页背景色为语义化token 5. 补全缺失的页面容器包裹 6. 统一弹窗宽度与表格分页配置 7. 标准化状态标签颜色与新增按钮样式 8. 对齐表单控件宽度规范
126 lines
5.2 KiB
Markdown
126 lines
5.2 KiB
Markdown
# 后台样式统一优化计划
|
||
|
||
## 问题总结
|
||
|
||
经过全面审查，发现以下风格不一致和突兀的地方：
|
||
|
||
| # | 问题 | 严重度 | 涉及文件 |
|
||
|---|------|--------|----------|
|
||
| 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` |
|
||
|
||
## 实施方案
|
||
|
||
### 步骤 1：统一 CSS 中的颜色引用 (`index.css`)
|
||
|
||
将所有硬编码颜色替换为 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 保持一致。
|
||
|
||
## 涉及文件清单
|
||
|
||
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. `pnpm lint` — TypeScript 类型检查通过
|
||
2. `pnpm build` — 构建成功
|
||
3. 视觉检查：各页面悬浮效果、颜色、间距保持一致
|