Files

zhxiao1124 8019c52fbc style: 完成后台样式统一优化

本次提交完成全后台页面的样式统一整改：
1. 新增Tailwind语义化颜色token，替换所有硬编码颜色值
2. 统一全站悬浮交互效果与阴影样式
3. 修正头像、菜单的品牌渐变配色
4. 统一登录页背景色为语义化token
5. 补全缺失的页面容器包裹
6. 统一弹窗宽度与表格分页配置
7. 标准化状态标签颜色与新增按钮样式
8. 对齐表单控件宽度规范

2026-07-03 15:16:32 +08:00

5.2 KiB

Raw Blame History

后台样式统一优化计划

问题总结

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

#	问题	严重度	涉及文件
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 语义化写法：

/* 之前 */
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() 函数引用：

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 包裹：

return (
    <div className="page-stack">
        <Panel ...>

所有包含表单的 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 保持一致。

涉及文件清单

tailwind.config.js — 新增 secondary/header-bg/row-hover/border-hover token
src/index.css — 统一颜色引用、统一悬浮效果
src/layout/index.tsx — 修复渐变色 blue-600 → brand
src/Profile/components/ProfileSummary.tsx — 修复渐变色
src/Login/index.tsx — 背景色 canvas
src/Login/components/LoginPanel.tsx — 背景色 canvas
src/Role/index.tsx — 添加 page-stack、Modal 宽度、分页配置
src/Personnel/index.tsx — 添加 page-stack、Modal 宽度、分页配置、状态标签颜色
src/User/index.tsx — 分页配置、状态标签颜色
src/Data/index.tsx — 分页配置（3个表格）
src/Drama/components/DramaList.tsx — 按钮颜色

验证方式

pnpm lint — TypeScript 类型检查通过
pnpm build — 构建成功
视觉检查：各页面悬浮效果、颜色、间距保持一致

5.2 KiB Raw Blame History Unescape Escape