# 后台样式统一优化计划

## 问题总结

经过全面审查，发现以下风格不一致和突兀的地方：

| # | 问题 | 严重度 | 涉及文件 |
|---|------|--------|----------|
| 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. 视觉检查：各页面悬浮效果、颜色、间距保持一致