# 闲鱼自动回复管理系统 - 前端改造方案

## 改造目标

将前端 UI 重构为 **Vben Admin** 风格的现代化后台管理系统：

- **蓝白色系**：主色调为蓝色（Blue-500），配合白色/深色背景
- **暗黑模式**：完整支持亮色/暗色主题切换
- **多标签导航**：支持多标签页切换
- **顶部导航栏**：用户信息、主题切换、退出登录
- **响应式设计**：适配桌面端和移动端

---

## 技术栈

| 技术 | 用途 |
|------|------|
| React 18 + TypeScript | 前端框架 |
| Vite 5 | 构建工具 |
| TailwindCSS | 原子化 CSS |
| Zustand | 状态管理 |
| React Router 6 | 路由管理 |
| Lucide React | 图标库 |
| Framer Motion | 动画效果 |

---

## 改造进度

### ✅ 已完成

- [x] 项目基础架构搭建
- [x] TailwindCSS 配置与主题变量
- [x] 暗黑模式支持（CSS 变量 + dark: 前缀）
- [x] 登录页面（简洁设计 + 主题切换）
- [x] 注册页面
- [x] 主布局（侧边栏 + 顶部导航栏 + 多标签栏）
- [x] 侧边栏组件（深色背景 + 隐藏滚动条）
- [x] 顶部导航栏（用户信息 + 主题切换 + 退出登录）
- [x] 多标签导航组件
- [x] 仪表盘页面
- [x] 账号管理页面
- [x] 商品管理页面
- [x] 关键词管理页面
- [x] 卡券管理页面
- [x] 系统设置页面
- [x] 系统日志页面
- [x] .gitignore 文件（忽略 node_modules 和 dist）

### 🔄 进行中

- [ ] 下拉框组件美化（替换原生 select）
- [ ] 其他管理员页面适配暗黑模式
- [ ] 关于页面样式优化

### 📋 待完成

- [ ] 订单管理页面优化
- [ ] 自动发货页面优化
- [ ] 通知渠道页面优化
- [ ] 消息通知页面优化
- [ ] 商品搜索页面优化
- [ ] 指定商品回复页面优化
- [ ] 用户管理页面优化
- [ ] 风控日志页面优化
- [ ] 数据管理页面优化
- [ ] 自定义 Select 组件
- [ ] 表单验证优化
- [ ] 响应式适配完善

---

## 设计规范

### 色彩体系

```
主色调：Blue-500 (#3b82f6)
背景色：
  - 亮色：slate-50 (#f8fafc)
  - 暗色：slate-900 (#0f172a)
侧边栏：#001529（深蓝色，固定不变）
```

### 组件样式类

| 类名 | 用途 |
|------|------|
| `.vben-card` | 卡片容器 |
| `.vben-card-header` | 卡片头部 |
| `.vben-card-title` | 卡片标题 |
| `.vben-card-body` | 卡片内容 |
| `.page-title` | 页面标题 |
| `.page-description` | 页面描述 |
| `.btn-ios-primary` | 主要按钮 |
| `.btn-ios-secondary` | 次要按钮 |
| `.btn-ios-danger` | 危险按钮 |
| `.input-ios` | 输入框 |
| `.input-label` | 输入框标签 |
| `.table-ios` | 表格 |
| `.badge-*` | 徽章 |
| `.top-navbar` | 顶部导航栏 |
| `.tabs-bar` | 多标签栏 |

---

## 开发命令

```bash
# 安装依赖
cd frontend && npm install

# 开发模式
npm run dev

# 生产构建
npm run build
```

---