# Navbar 主题样式优化计划

## 目标
将 Navbar 组件中的硬编码颜色统一替换为 CSS 变量，确保主题切换时样式完全一致且易于维护。

## 当前问题
1. 亮色模式使用硬编码颜色（如 `white`、`#555`、`#667eea`）
2. 暗色模式有大量硬编码覆盖（如 `#1e293b`、`rgb(139, 92, 246)`）
3. 颜色值分散在多处，修改困难

## 修改方案

### 1. 亮色模式 → CSS 变量映射

| 硬编码值 | CSS 变量 | 用途 |
|---------|----------|------|
| `white` | `var(--card-background)` | 容器背景 |
| `#555` | `var(--text-secondary)` | 菜单项文字 |
| `#667eea` | `var(--primary-color)` | 主色调 |
| `rgb(139, 92, 246)` | `var(--primary-color)` | 主色调（统一） |
| `#333` | `var(--text-primary)` | 用户名文字 |
| `#1a1a1a` | `var(--text-primary)` | 标题文字 |
| `#8c8c8c` | `var(--text-muted)` | 次要文字 |
| `#666` | `var(--text-secondary)` | 副标题文字 |
| `#4a4a4a` | `var(--text-primary)` | 功能特性文字 |
| `#eee` | `var(--border-color)` | 分隔线 |
| `#e8e8e8` | `var(--border-color)` | 分隔线 |
| `#e5e7eb` | `var(--border-color)` | 进度条背景 |
| `#999` | `var(--text-muted)` | 搜索框前缀 |
| `#ccc` | `var(--text-muted)` | 浅灰色文字 |
| `#374151` | `var(--text-primary)` | 等级标题 |
| `#9ca3af` | `var(--text-muted)` | 等级经验值 |

### 2. 暗色模式简化

由于 CSS 变量已在 `[data-theme="dark"]` 中定义，以下规则可以**完全移除**：

- `.navbar-container` 背景 → 由 `var(--card-background)` 处理
- `.ant-menu-item` 颜色 → 由 `var(--primary-color)` 处理
- `.username-text` 颜色 → 由 `var(--primary-color)` 处理
- 所有 `rgb(139, 92, 246)` → 替换为 `var(--primary-color)`
- 所有 `#1e293b` → 替换为 `var(--card-background)`
- 所有 `#334155` → 替换为 `var(--border-color)`

### 3. 需要保留的暗色模式规则

仅保留 CSS 变量无法处理的特殊情况：
- 渐变背景（需要调整暗色下的渐变）
- `rgba` 透明效果
- Ant Design 组件覆盖（需要 `!important`）

## 影响文件
- `chunyu_project_react/src/components/Navbar/Navbar.css`

## 验证步骤
1. 切换日间/夜间模式，确认导航栏颜色正确变化
2. 检查所有菜单项、下拉框、按钮样式一致
3. 确认暗色模式下文字可读性良好