# 前端优化方案与设计规范文档

**基于**: `前端项目分析报告.md`  
**日期**: 2026-05-13  
**原则**: 简洁、高可读性、高可操作性、统一白色体系

---

## 第一部分：色彩规范优化方案（白色体系）

### 1.1 设计理念

采用**白色及白色不同色调作为唯一设计色彩体系**，遵循以下原则：
- 以白色为基础，通过不同的灰度层级区分信息重要程度和视觉层次
- 去除所有彩色渐变背景，回归简洁干净的商业软件风格
- 仅保留少量必要的功能色用于状态标识（成功/警告/错误）
- 确保所有文字与背景对比度满足 WCAG 2.1 AA 级标准（至少 4.5:1）

### 1.2 完整色值定义

#### 基础色板（白 → 黑灰度层级）

```css
:root {
  /* ===== 白色体系 - 背景色 ===== */
  --bg-page:           #FFFFFF;       /* 页面背景 - 纯白 */
  --bg-container:      #F8F9FA;       /* 容器背景 - 极浅灰 */
  --bg-card:           #FFFFFF;       /* 卡片背景 - 纯白 */
  --bg-hover:          #F1F3F5;       /* 悬停背景 - 浅灰 */
  --bg-active:         #E9ECEF;       /* 激活背景 - 中浅灰 */
  --bg-disabled:       #F8F9FA;       /* 禁用背景 */
  --bg-header:         #FFFFFF;       /* 头部背景 - 纯白 */
  --bg-sidebar:        #F8F9FA;       /* 侧边栏背景 */

  /* ===== 白色体系 - 边框色 ===== */
  --border-light:      #E9ECEF;       /* 浅边框 */
  --border-default:    #DEE2E6;       /* 默认边框 */
  --border-medium:     #CED4DA;       /* 中等边框 */
  --border-dark:       #ADB5BD;       /* 深边框 */

  /* ===== 白色体系 - 文字色 ===== */
  --text-primary:      #212529;       /* 主要文字 (AA级: 16.9:1) */
  --text-secondary:    #495057;       /* 次要文字 (AA级: 8.6:1) */
  --text-tertiary:     #6C757D;       /* 辅助文字 (AA级: 5.2:1) */
  --text-disabled:     #ADB5BD;       /* 禁用文字 */
  --text-inverse:      #FFFFFF;       /* 反色文字（深色底上） */

  /* ===== 功能色（仅状态标识）===== */
  --color-success:     #2B8A3E;       /* 成功状态 (AA级: 5.0:1) */
  --color-warning:     #E67700;       /* 警告状态 */
  --color-error:       #C92A2A;       /* 错误状态 (AA级: 6.3:1) */
  --color-info:        #1C7ED6;       /* 信息状态 */

  /* ===== 功能色 - 浅色背景 ===== */
  --bg-success:        #EBFBEE;       /* 成功浅底 */
  --bg-warning:        #FFF9DB;       /* 警告浅底 */
  --bg-error:          #FFF5F5;       /* 错误浅底 */
  --bg-info:           #E7F5FF;       /* 信息浅底 */

  /* ===== 主色调（品牌色 - 克制使用）===== */
  --color-primary:     #212529;       /* 主操作色 - 深灰黑 */
  --color-primary-hover: #495057;     /* 悬停 */
  --color-primary-active: #000000;    /* 按下 */
  --color-link:        #1C7ED6;       /* 链接色 - 仅用于超链接 */

  /* ===== 阴影层级（替代彩色阴影）===== */
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg:         0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl:         0 8px 32px rgba(0, 0, 0, 0.10);
}
```

### 1.3 组件色彩映射表

| 组件/区域 | 旧色值 | 新色值 | 说明 |
|----------|--------|--------|------|
| Header | `linear-gradient(#1890ff, #096dd9)` | `#FFFFFF` + `border-bottom: 1px solid --border-light` | 纯白头部 |
| 主按钮 | `linear-gradient(#1890ff, #096dd9)` | `#212529` (深灰黑) → 悬停 `#000` | 简洁深色按钮 |
| 次按钮 | `transparent` | `#FFFFFF` + 边框 | 白色边框按钮 |
| 菜单选中 | `linear-gradient(#1890ff, #40a9ff)` | `#F1F3F5` 背景 + `#212529` 文字 | 灰底黑字 |
| 卡片 | 渐变彩色背景 | `#FFFFFF` + `shadow-sm` 边框 | 纯白卡片 |
| 统计卡片 | 彩色图标背景 | `#F8F9FA` 图标底 + 深色文字 | 灰底卡片 |
| 标签 | 6色渐变 | 白底 + 深色边框 + 深色文字 | 统一标签样式 |
| 进度条 | 4色渐变 | 灰色系（`#212529 → #495057 → #ADB5BD`） | 灰度进度 |
| 模态弹窗 | 彩色渐变更改 | `#FFFFFF` + `shadow-xl` | 纯白模态 |
| 表格头部 | `linear-gradient(#fafafa, #f5f5f5)` | `#F8F9FA` 纯色 | 统一表头 |

### 1.4 设计前后对比

```
【修改前】                              【修改后】
┌──────────────────────────┐         ┌──────────────────────────┐
│ 🔵 蓝色渐变Header          │         │ ⬜ 纯白Header + 底部灰色边线  │
├──────────────────────────┤         ├──────────────────────────┤
│ 🔵 蓝色菜单               │         │ ⬜ 灰色激活态 + 黑色文字    │
├──────────────────────────┤         ├──────────────────────────┤
│ 🟣 紫色渐变标题            │         │ ⬜ 灰色标题               │
├──────────────────────────┤         ├──────────────────────────┤
│ 🔴🟢🔵🟡 彩色统计卡片       │         │ ⬜ 统一灰色统计卡片        │
├──────────────────────────┤         ├──────────────────────────┤
│ 🔵 蓝色主按钮              │         │ ⬛ 深灰色主按钮            │
├──────────────────────────┤         ├──────────────────────────┤
│ 🟢🔵🟠🔴 彩色标签          │         │ ⬜ 统一白色标签            │
└──────────────────────────┘         └──────────────────────────┘
        碎片化、多彩                           统一、简洁、专业
```

---

## 第二部分：页面大小与信息密度优化

### 2.1 组件尺寸标准

| 尺寸级别 | 值 | 用途 | 示例 |
|:-------:|:--:|------|------|
| **XS** | 4px | 极小间距 | 图标与文字间距 |
| **SM** | 8px | 小间距 | 按钮内边距、标签间距 |
| **MD** | 12px | 中间距 | 卡片内边距、列表项间距 |
| **LG** | 16px | 大间距 | 区块间距 |
| **XL** | 20px | 特大间距 | 页面边距 |
| **2XL** | 24px | 区块分隔 | 主要内容区边距 |

### 2.2 关键组件尺寸优化

| 组件 | 当前尺寸 | 优化后 | 节省空间 |
|------|---------|--------|:------:|
| Header | 64px | **48px** | -25% |
| `main-tabs-bar` 按钮 | padding: 14px 20px | **padding: 8px 16px** | -35% |
| `exam-header` | ~80px | **56px** | -30% |
| `stat-card` | ~100px | **72px** | -28% |
| `exam-card` 内边距 | 24px | **16px** | -33% |
| 表格行高 | ~57px | **44px** | -23% |
| 表单垂直间距 | 24px | **16px** | -33% |
| 文件卡片 `file-card` | ~200×160 | **160×128** | -36% |
| 统计行 `stats-row` 间距 | 16px | **12px** | -25% |

### 2.3 信息密度提升策略

```css
/* 全局紧凑模式 */
:root {
  --density-compact: 1;  /* 紧凑系数：0.75 = 紧凑，1 = 标准 */
}

/* 应用示例 */
.ant-table {
  font-size: 13px;           /* 原14px */
}
.ant-table-thead > tr > th {
  padding: 8px 12px;         /* 原16px 16px */
}
.ant-table-tbody > tr > td {
  padding: 8px 12px;         /* 原16px 16px */
}
.ant-card-body {
  padding: 16px;              /* 原24px */
}
.ant-form-item {
  margin-bottom: 16px;        /* 原24px */
}
.ant-tabs-tab {
  padding: 8px 16px;          /* 原14px 20px */
}
```

### 2.4 信息布局优化

#### 优化前（低密度）
```
┌────────────────────────────────────────┐
│  exam-header (~80px 含大量留白)          │
├────────────────────────────────────────┤
│  stats-row (~120px 含彩色图标)           │
├────────────────────────────────────────┤
│  exam-card 标题 (~50px)                  │
│  ┌──────────────────────────────────┐  │
│  │  表单 (24px 间距，大输入框)        │  │
│  │  字段1                           │  │
│  │  ──24px──                        │  │
│  │  字段2                           │  │
│  │  ──24px──                        │  │
│  │  字段3                           │  │
│  └──────────────────────────────────┘  │
│  ──24px──                              │
│  底部操作区                              │
└────────────────────────────────────────┘
总高度: ~450px, 有效信息区域: ~35%
```

#### 优化后（高密度）
```
┌────────────────────────────────────────┐
│  标题 + 操作 (56px，紧凑单行)             │
├────────────────────────────────────────┤
│  stats-row (80px，精简统计卡片)          │
├────────────────────────────────────────┤
│  card: 表单 (12px 间距)                 │
│  字段1  字段2                          │
│  字段3  字段4   (两列布局)              │
│  ──12px──                              │
│  底部操作区                              │
└────────────────────────────────────────┘
总高度: ~260px, 有效信息区域: ~55%
```

---

## 第三部分：页面组件统一性优化

### 3.1 组件体系设计

#### 通用布局组件（消除碎片化）

```
BasePage.vue          ← 统一页面容器（替换各模块重复的 exam-page）
  ├─ PageHeader.vue   ← 统一页面标题栏（替换 exam-header）
  ├─ TabsBar.vue      ← 统一标签栏（替换 main-tabs-bar）
  ├─ StatsRow.vue     ← 统一统计卡片行（替换 stats-row + stat-card）
  ├─ ContentCard.vue  ← 统一内容卡片（替换 exam-card）
  └─ DataTable.vue    ← 统一数据表格（包装 antd Table）
```

### 3.2 组件规范定义

#### 3.2.1 PageHeader 组件规范

```vue
<!-- 统一页面标题栏 -->
<template>
  <div class="page-header">
    <div class="header-left">
      <h1 class="page-title">{{ title }}</h1>
      <p v-if="description" class="page-desc">{{ description }}</p>
    </div>
    <div class="header-right">
      <slot name="actions" />
    </div>
  </div>
</template>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;         /* 原 大padding → 紧凑 */
  background: #FFFFFF;
  border-bottom: 1px solid #E9ECEF;
  min-height: 56px;           /* 原 ~80px → 56px */
}
.page-title {
  font-size: 16px;            /* 原 20px+ → 16px */
  font-weight: 600;
  color: #212529;
  margin: 0;
}
.page-desc {
  font-size: 12px;
  color: #6C757D;
  margin: 4px 0 0 0;
}
</style>
```

#### 3.2.2 TabsBar 组件规范

```vue
<template>
  <div class="tabs-bar">
    <button
      v-for="tab in tabs"
      :key="tab.key"
      :class="['tab-btn', { active: modelValue === tab.key }]"
      @click="$emit('update:modelValue', tab.key)"
    >
      <span v-if="tab.icon" class="tab-icon">{{ tab.icon }}</span>
      <span class="tab-text">{{ tab.label }}</span>
    </button>
  </div>
</template>

<style scoped>
.tabs-bar {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E9ECEF;
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;         /* 原 14px 20px → 紧凑 */
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #495057;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-btn:hover {
  background: #F1F3F5;
  color: #212529;
}
.tab-btn.active {
  background: #F1F3F5;
  color: #212529;
  font-weight: 600;
}
</style>
```

#### 3.2.3 ContentCard 组件规范

```vue
<template>
  <div class="content-card" :class="{ 'has-header': $slots.header }">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>
    <div class="card-body" :style="{ padding: padding }">
      <slot />
    </div>
  </div>
</template>

<script setup>
defineProps({
  padding: { type: String, default: '16px' }
})
</script>

<style scoped>
.content-card {
  background: #FFFFFF;
  border: 1px solid #E9ECEF;
  border-radius: 8px;        /* 原 12px → 8px */
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);  /* 原大阴影 → 轻阴影 */
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #E9ECEF;
}
</style>
```

#### 3.2.4 StatsRow 组件规范

```vue
<template>
  <div class="stats-row">
    <div v-for="stat in stats" :key="stat.label" class="stat-card">
      <span class="stat-value">{{ stat.value }}</span>
      <span class="stat-label">{{ stat.label }}</span>
    </div>
  </div>
</template>

<style scoped>
.stats-row {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #E9ECEF;
}
.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: #F8F9FA;
  border-radius: 6px;
  border: 1px solid #E9ECEF;
  min-height: 72px;          /* 原 ~100px → 72px */
}
.stat-value {
  font-size: 22px;           /* 原 28px+ → 22px */
  font-weight: 700;
  color: #212529;
}
.stat-label {
  font-size: 12px;
  color: #6C757D;
  font-weight: 500;
}
</style>
```

#### 3.2.5 DataTable 组件规范

基于 Ant Design Vue Table 的封装，统一表头样式、行高、分页、空状态：

```vue
<!-- 统一表格组件 -->
<template>
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    :loading="loading"
    :pagination="paginationConfig"
    :rowKey="rowKey"
    size="small"                  /* 统一小尺寸 */
    :locale="emptyLocale"
    class="data-table"
    @change="handleTableChange"
  >
    <template v-for="slot in Object.keys($slots)" #[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </a-table>
</template>
```

### 3.3 消除碎片化的实施路径

| 阶段 | 内容 | 涉及文件 |
|:----:|------|---------|
| 1 | 创建通用组件库 `BasePage`, `PageHeader`, `TabsBar`, `ContentCard`, `StatsRow`, `DataTable` | 新建6个组件 |
| 2 | 重构 `ReadModule.vue` 使用通用组件 | 修改1个文件 |
| 3 | 重构 `ManageModule.vue` 使用通用组件 | 修改1个文件 |
| 4 | 重构 `ExamModule.vue` 使用通用组件 | 修改1个文件 |
| 5 | 重构 `QAModule.vue` 使用通用组件 | 修改1个文件 |
| 6 | 重构 `MindModule.vue`, `DashboardModule.vue`, `PermissionModule.vue` | 修改3个文件 |
| 7 | 移除各模块中的重复样式，统一到全局CSS变量 | 全局样式修改 |

---

## 第四部分：功能流程与操作流程优化

### 4.1 导航体验优化

**当前问题**：使用 `<a-select>` 下拉框选择功能模块，不符合主流习惯。

**优化方案**：改为顶部固定标签栏导航

```vue
<!-- 优化前：下拉选择 -->
<a-select v-model:value="currentModule" style="width: 220px;">
  <a-select-option value="read">📄 制度文件查看和学习</a-select-option>
  ...
</a-select>

<!-- 优化后：顶部标签栏 -->
<div class="top-nav">
  <button 
    v-for="mod in visibleModules" 
    :class="['nav-item', { active: currentModule === mod.key }]"
    @click="currentModule = mod.key"
  >
    {{ mod.icon }} {{ mod.label }}
  </button>
</div>
```

### 4.2 文件选择器流程简化

**当前流程（3步）**：
```
选择知识库 → 搜索/浏览文件 → 选择版本 → 确认
```

**优化流程（2步）**：
```
搜索/浏览文件（自动关联知识库）→ 点击选择（默认最新版本）→ 确认
```

### 4.3 出题流程优化

**当前流程（6步）**：
```
选择知识库 → 选择文件 → 配置题型数量 → 设置难度 → 提交 → 等待轮询 → 查看结果
```

**优化流程（4步）**：
```
选择文件 → 配置题型（带智能推荐）→ 提交 → 实时进度 → 查看结果
```

---

## 第五部分：设计规范文档（开发维护参考）

### 5.1 通用设计原则

1. **白色优先**：所有背景使用白色体系，彩色仅用于状态标识
2. **减法设计**：去除不必要的装饰元素（渐变、阴影、动画）
3. **信息优先**：内容区域最大化，装饰和留白最小化
4. **一致性**：所有页面使用统一的布局组件和间距体系
5. **可访问性**：所有文字对比度 ≥ 4.5:1（WCAG AA级）

### 5.2 CSS变量完整清单

```css
:root {
  /* 间距系统 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* 圆角系统 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* 字体系统 */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 14px;
  --font-xl: 16px;
  --font-2xl: 18px;
  --font-3xl: 22px;

  /* 字体粗细 */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 阴影系统 */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.08);

  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* 层级 */
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-tooltip: 1100;
}
```

### 5.3 按钮规范

| 类型 | 背景 | 边框 | 文字色 | 悬停 | 使用场景 |
|------|------|------|--------|------|---------|
| **主按钮** | `#212529` | 无 | `#FFFFFF` | `#000` | 主要操作（提交、确认） |
| **次按钮** | `#FFFFFF` | `#DEE2E6` | `#212529` | `#F1F3F5` | 次要操作（取消、返回） |
| **文字按钮** | 透明 | 无 | `#495057` | `#F1F3F5` | 低优先级操作 |
| **危险按钮** | `#C92A2A` | 无 | `#FFFFFF` | `#B02525` | 删除、清空 |
| **成功按钮** | `#2B8A3E` | 无 | `#FFFFFF` | `#246E33` | 审核通过 |

```css
.btn {           /* 通用按钮基础 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.5;
}
.btn-primary     { background: #212529; color: #fff; }
.btn-secondary   { background: #fff; color: #212529; border: 1px solid #DEE2E6; }
.btn-text        { background: transparent; color: #495057; }
.btn-danger      { background: #C92A2A; color: #fff; }
.btn-success     { background: #2B8A3E; color: #fff; }
.btn-sm          { padding: 4px 10px; font-size: 12px; }
.btn-lg          { padding: 8px 18px; font-size: 14px; }
```

### 5.4 表单规范

```css
.form-item {
  margin-bottom: 16px;       /* 原24px */
}
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  margin-bottom: 6px;
}
.form-input {
  height: 36px;              /* 原40px */
  padding: 6px 12px;
  border: 1px solid #DEE2E6;
  border-radius: 6px;
  font-size: 13px;
  color: #212529;
  transition: border-color 0.15s ease;
}
.form-input:focus {
  border-color: #212529;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
```

### 5.5 标签规范

```css
/* 统一标签替代6种彩色标签 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.tag-default  { background: #F1F3F5; color: #495057; border: 1px solid #DEE2E6; }
.tag-success  { background: #EBFBEE; color: #2B8A3E; border: 1px solid #B2F2BB; }
.tag-warning  { background: #FFF9DB; color: #E67700; border: 1px solid #FFE066; }
.tag-error    { background: #FFF5F5; color: #C92A2A; border: 1px solid #FFC9C9; }
.tag-info     { background: #E7F5FF; color: #1C7ED6; border: 1px solid #A5D8FF; }
```

### 5.6 表格规范

| 属性 | 当前 | 优化后 | 说明 |
|------|------|--------|------|
| 表头背景 | `linear-gradient(#fafafa, #f5f5f5)` | `#F8F9FA` | 纯色统一 |
| 表头字体 | 14px / 600 | 13px / 600 | - |
| 表头内边距 | 16px 16px | 8px 12px | 紧凑 |
| 行高 | ~57px | 44px | -22% |
| 单元格内边距 | 16px 16px | 8px 12px | 紧凑 |
| 悬停背景 | `#f0f7ff` (蓝色) | `#F1F3F5` (灰色) | 统一灰色系 |
| 圆角 | 12px | 6px | 弱化圆角 |
| 阴影 | `0 2px 8px rgba(...)` | `0 1px 2px rgba(0,0,0,0.04)` | 轻阴影 |

---

## 第六部分：实施建议

### 6.1 优先级排序

| 优先级 | 优化项 | 预计工时 | 影响范围 |
|:------:|--------|:------:|:------:|
| P0 | CSS变量体系建立 + 全局样式替换 | 2天 | 全局 |
| P0 | 色彩体系迁移到白色方案 | 3天 | 全局 |
| P1 | 通用组件库创建 (`BasePage`, `PageHeader`, `TabsBar`, `ContentCard`) | 2天 | 新建 |
| P1 | 组件尺寸和信息密度调整 | 2天 | 全局 |
| P2 | 各模块使用通用组件重构 | 5天 | 8个组件 |
| P2 | 导航优化（下拉→标签栏） | 1天 | Home.vue |
| P3 | 文件选择器流程简化 | 2天 | FileSelector.vue |
| P3 | 出题流程优化 | 1天 | ExamModule.vue |

### 6.2 回滚策略

1. 所有样式修改通过CSS变量进行，方便快速回滚
2. 通用组件与原有组件并行开发，逐模块切换
3. 每个模块切换后进行功能回归测试
4. 保留原有组件的备份分支

### 6.3 验收标准

- [ ] 全站使用统一的白色色板，无彩色渐变背景
- [ ] 所有文字对比度 ≥ 4.5:1
- [ ] 组件尺寸减少 ≥ 20%
- [ ] 同等屏幕尺寸下信息展示量提升 ≥ 30%
- [ ] 所有模块使用统一的通用布局组件
- [ ] 用户操作步骤减少（导航1步，文件选择减少1步）
- [ ] 1920×1080 和 1366×768 分辨率下均无横向滚动条

---

## 附录

### A. 需要删除的CSS类清单

以下全局CSS类将在白色体系下移除或重写：

| 文件 | 类名 | 操作 |
|------|------|------|
| `style.css` | `.btn-gradient-primary` ~ `.btn-gradient-purple` | 删除（6个渐变按钮类） |
| `style.css` | `.card-gradient-blue` ~ `.card-gradient-purple` | 删除（6个渐变卡片类） |
| `style.css` | `.tag-blue` ~ `.tag-cyan` | 删除（6个彩色标签类） |
| `style.css` | `.progress-blue` ~ `.progress-cyan` | 删除（6个彩色进度条类） |
| `style.css` | `.animate-float`, `.animate-pulse-glow`, `.animate-shimmer` | 删除或简化 |
| `index.css` | `.header` 蓝色背景 | 改为白色 |
| 各组件 | 内联 `style="background: linear-gradient(...)"` | 替换为CSS变量 |

### B. 参考标准

- WCAG 2.1 AA 对比度标准: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
- Ant Design 5.0 设计语言: https://ant.design/
- Tailwind CSS 间距/色彩系统: https://tailwindcss.com/