# CRMEB 风格设计系统实现路线图

## 📋 概述

本文档是实现 CRMEB 风格设计系统的完整路线图，包含详细的步骤、优先级和检查清单。

---

## 📊 项目进度概览

```
完成度: ████████░░ 80%

✅ 已完成 (80%)
  ✓ uni.scss 设计变量系统 (150+ 变量)
  ✓ 样式规范文档 (STYLE_SPECIFICATION.md)
  ✓ 页面结构规范文档 (PAGE_STRUCTURE_SPECIFICATION.md)
  ✓ 组件规范文档 (COMPONENT_SPECIFICATION.md)
  ✓ AdminLayout 多布局支持代码 (待集成)
  ✓ 列表页、表单页、详情页模板代码 (待实现)

🔄 进行中 (0%)
  - 基础组件库开发 (Button, Input, Select, 等)
  - 容器组件开发 (Card, Modal, Drawer, 等)
  - 数据展示组件 (Table, List, 等)

⏳ 待开始 (20%)
  - 表单组件开发
  - 反馈组件开发
  - 导航组件开发
  - 页面模板集成
  - 测试和优化
```

---

## 🎯 实现阶段

### 第 1 阶段: 基础组件库 (1-2 周)

**目标**: 实现所有基础交互组件

#### 1.1 基础输入组件

| 组件       | 状态 | 优先级 | 估时 | 说明                     |
| ---------- | ---- | ------ | ---- | ------------------------ |
| Button     | ❌   | P0     | 2h   | 按钮，支持多种类型和尺寸 |
| Input      | ❌   | P0     | 3h   | 文本输入框，支持验证     |
| Textarea   | ❌   | P1     | 2h   | 多行文本输入             |
| Select     | ❌   | P0     | 4h   | 下拉选择器               |
| Checkbox   | ❌   | P1     | 2h   | 复选框                   |
| Radio      | ❌   | P1     | 2h   | 单选按钮                 |
| Toggle     | ❌   | P1     | 2h   | 开关切换                 |
| DatePicker | ❌   | P2     | 4h   | 日期选择器               |

#### 1.2 检查清单

- [ ] 创建 `components/basic/` 目录
- [ ] 实现 Button 组件
  - [ ] 支持 4 种类型 (primary/default/danger/success)
  - [ ] 支持 3 种尺寸 (sm/md/lg)
  - [ ] 支持禁用和加载状态
  - [ ] 编写单元测试
  - [ ] 编写文档
- [ ] 实现 Input 组件
  - [ ] 支持 4 种类型 (text/password/number/email)
  - [ ] 支持 clearable 清空
  - [ ] 支持错误状态显示
  - [ ] 编写单元测试
- [ ] 实现 Select 组件
  - [ ] 支持单选
  - [ ] 支持搜索
  - [ ] 支持多选（可选）
- [ ] 实现其他基础组件

---

### 第 2 阶段: 容器组件库 (1 周)

**目标**: 实现所有布局和容器组件

#### 2.1 容器组件

| 组件       | 状态 | 优先级 | 估时 | 说明       |
| ---------- | ---- | ------ | ---- | ---------- |
| Card       | ❌   | P0     | 2h   | 卡片容器   |
| Modal      | ❌   | P0     | 3h   | 模态框     |
| Drawer     | ❌   | P1     | 3h   | 抽屉侧边栏 |
| Collapse   | ❌   | P1     | 3h   | 折叠面板   |
| Tabs       | ❌   | P1     | 3h   | 选项卡     |
| Pagination | ❌   | P0     | 2h   | 分页器     |

#### 2.2 检查清单

- [ ] 创建 `components/container/` 目录
- [ ] 实现 Card 组件
  - [ ] 支持 header/body/footer 插槽
  - [ ] 支持 3 种阴影等级
  - [ ] 编写文档
- [ ] 实现 Modal 组件
  - [ ] 支持确认和取消按钮
  - [ ] 支持点击外部关闭
  - [ ] 支持背景点击事件
- [ ] 实现 Pagination 组件
  - [ ] 支持前后翻页
  - [ ] 支持跳页输入
  - [ ] 支持页码显示

---

### 第 3 阶段: 表单组件库 (1 周)

**目标**: 实现完整的表单系统

#### 3.1 表单组件

| 组件       | 状态 | 优先级 | 估时 | 说明         |
| ---------- | ---- | ------ | ---- | ------------ |
| Form       | ❌   | P0     | 2h   | 表单容器     |
| FormItem   | ❌   | P0     | 2h   | 表单项       |
| FormGroup  | ❌   | P1     | 2h   | 表单组       |
| Validator  | ❌   | P0     | 4h   | 表单验证器   |
| Upload     | ❌   | P1     | 5h   | 文件上传     |
| RichEditor | ❌   | P2     | 6h   | 富文本编辑器 |

#### 3.2 检查清单

- [ ] 创建 `components/form/` 目录
- [ ] 实现 Form 和 FormItem 组件
  - [ ] 支持表单验证
  - [ ] 支持错误显示
  - [ ] 支持动态字段
- [ ] 实现 Validator 验证器
  - [ ] 支持内置验证规则 (required/email/url/等)
  - [ ] 支持自定义验证
  - [ ] 支持异步验证
- [ ] 实现 Upload 组件
  - [ ] 支持单文件上传
  - [ ] 支持多文件上传
  - [ ] 显示上传进度

---

### 第 4 阶段: 数据展示组件库 (1.5 周)

**目标**: 实现所有数据展示组件

#### 4.1 数据展示组件

| 组件     | 状态 | 优先级 | 估时 | 说明     |
| -------- | ---- | ------ | ---- | -------- |
| Table    | ❌   | P0     | 6h   | 数据表格 |
| List     | ❌   | P0     | 3h   | 列表     |
| Tree     | ❌   | P1     | 5h   | 树形列表 |
| Tag      | ❌   | P1     | 2h   | 标签     |
| Badge    | ❌   | P1     | 1h   | 徽章     |
| Avatar   | ❌   | P2     | 1h   | 头像     |
| Progress | ❌   | P2     | 2h   | 进度条   |

#### 4.2 检查清单

- [ ] 创建 `components/data/` 目录
- [ ] 实现 Table 组件
  - [ ] 支持列配置
  - [ ] 支持排序
  - [ ] 支持筛选
  - [ ] 支持行选择
  - [ ] 支持虚拟滚动（可选）
  - [ ] 支持自定义单元格模板
- [ ] 实现 List 组件
  - [ ] 支持列表项模板
  - [ ] 支持虚拟滚动
  - [ ] 支持无限滚动加载
- [ ] 实现 Tree 组件
  - [ ] 支持树形展开/折叠
  - [ ] 支持节点选择
  - [ ] 支持搜索过滤

---

### 第 5 阶段: 反馈和导航组件 (1 周)

**目标**: 实现反馈和导航相关组件

#### 5.1 反馈组件

| 组件    | 状态 | 优先级 | 估时 | 说明         |
| ------- | ---- | ------ | ---- | ------------ |
| Message | ❌   | P0     | 2h   | 消息提示     |
| Alert   | ❌   | P0     | 2h   | 警告框       |
| Tooltip | ❌   | P1     | 2h   | 提示框       |
| Loading | ❌   | P0     | 2h   | 加载中指示器 |
| Empty   | ❌   | P1     | 1h   | 空状态       |
| Error   | ❌   | P1     | 1h   | 错误状态     |

#### 5.2 导航组件

| 组件       | 状态 | 优先级 | 估时 | 说明   |
| ---------- | ---- | ------ | ---- | ------ |
| Breadcrumb | ❌   | P1     | 2h   | 面包屑 |
| Menu       | ❌   | P1     | 3h   | 菜单   |
| Navbar     | ❌   | P2     | 3h   | 导航栏 |
| Sidebar    | ❌   | P2     | 4h   | 侧边栏 |

#### 5.3 检查清单

- [ ] 创建 `components/feedback/` 目录
- [ ] 创建 `components/navigation/` 目录
- [ ] 实现 Message 组件
  - [ ] 支持 info/success/warning/error 四种类型
  - [ ] 支持自动关闭
  - [ ] 支持手动关闭
  - [ ] 支持队列显示
- [ ] 实现 Loading 组件
  - [ ] 支持全屏加载
  - [ ] 支持局部加载
  - [ ] 支持自定义文案
- [ ] 实现 Breadcrumb 组件
  - [ ] 支持链接导航
  - [ ] 支持当前页高亮

---

### 第 6 阶段: 页面模板和集成 (1.5 周)

**目标**: 将组件集成到页面模板中

#### 6.1 页面模板

| 页面类型      | 状态 | 优先级 | 任务               |
| ------------- | ---- | ------ | ------------------ |
| ListPage      | ❌   | P0     | 创建列表页面模板   |
| FormPage      | ❌   | P0     | 创建表单页面模板   |
| DetailPage    | ❌   | P0     | 创建详情页面模板   |
| DashboardPage | ❌   | P1     | 创建仪表板页面模板 |

#### 6.2 检查清单

- [ ] 创建 `pages/templates/` 目录
- [ ] 实现 ListPage 模板
  - [ ] 集成搜索表单
  - [ ] 集成数据表格
  - [ ] 集成分页器
  - [ ] 集成批量操作
- [ ] 实现 FormPage 模板
  - [ ] 集成表单验证
  - [ ] 集成动态字段
  - [ ] 集成文件上传
  - [ ] 实现新增/编辑模式切换
- [ ] 实现 DetailPage 模板
  - [ ] 显示详情卡片
  - [ ] 显示操作日志
  - [ ] 实现编辑/删除按钮
- [ ] 迁移现有页面到新模板
  - [ ] system-info.uvue
  - [ ] 其他管理页面

---

### 第 7 阶段: AdminLayout 多布局支持 (1 周)

**目标**: 增强 AdminLayout 支持 CRMEB 的 4 种布局模式

#### 7.1 任务列表

| 任务                 | 状态 | 优先级 | 说明             |
| -------------------- | ---- | ------ | ---------------- |
| 增强 AdminLayout     | ❌   | P0     | 添加布局模式支持 |
| 创建 LayoutProvider  | ❌   | P0     | 布局状态管理     |
| 创建 LayoutSwitcher  | ❌   | P1     | 布局切换组件     |
| 创建 Defaults 布局   | ❌   | P0     | 默认布局实现     |
| 创建 Classic 布局    | ❌   | P1     | 经典布局实现     |
| 创建 Transverse 布局 | ❌   | P1     | 横向布局实现     |
| 创建 Columns 布局    | ❌   | P1     | 多栏布局实现     |

#### 7.2 检查清单

- [ ] 分析 CRMEB 的 4 种布局模式
- [ ] 设计 LayoutProvider 状态结构
- [ ] 增强 AdminLayout.uvue
  - [ ] 添加 layoutMode prop
  - [ ] 实现条件渲染 (v-if)
  - [ ] 实现样式切换
- [ ] 实现 4 种布局模式
  - [ ] Defaults: 经典导航栏 + 左侧菜单
  - [ ] Classic: 混合导航栏 + 顶部菜单
  - [ ] Transverse: 顶部菜单 + 无侧边栏
  - [ ] Columns: 三栏布局
- [ ] 创建布局切换界面
- [ ] 测试所有布局模式

---

### 第 8 阶段: 样式规范化 (2 周)

**目标**: 规范化现有页面的样式

#### 8.1 任务列表

| 任务             | 状态 | 优先级 | 说明                         |
| ---------------- | ---- | ------ | ---------------------------- |
| 审查现有页面     | ❌   | P0     | 列举所有管理页面             |
| 迁移到新设计系统 | ❌   | P0     | 替换硬编码样式为变量         |
| 迁移到新组件     | ❌   | P0     | 替换原生 input 为 Input 组件 |
| 规范化布局       | ❌   | P0     | 统一页面结构                 |
| 优化响应式       | ❌   | P1     | 改进移动端体验               |

#### 8.2 检查清单

- [ ] 列举所有 admin 页面
- [ ] 为每个页面制定迁移计划
- [ ] 逐页迁移
  - [ ] 替换颜色为 $color-\* 变量
  - [ ] 替换间距为 $space-\* 变量
  - [ ] 替换原生组件为自定义组件
  - [ ] 添加响应式样式
  - [ ] 测试功能完整性
- [ ] 定期审查和优化

---

## 📈 时间表

### 周次规划

| 周     | 阶段        | 主要任务                       | 交付物             |
| ------ | ----------- | ------------------------------ | ------------------ |
| W1     | 基础组件    | Button, Input, Select          | 3 个组件 + 文档    |
| W2     | 基础组件    | Checkbox, Radio, Toggle        | 3 个组件           |
| W3     | 容器组件    | Card, Modal, Pagination        | 3 个组件           |
| W4     | 表单组件    | Form, FormItem, Validator      | 表单系统           |
| W5     | 数据展示    | Table, List, Tree              | 3 个组件           |
| W6     | 反馈导航    | Message, Alert, Breadcrumb     | 反馈系统           |
| W7     | 页面模板    | ListPage, FormPage, DetailPage | 3 个页面模板       |
| W8     | AdminLayout | 多布局支持                     | 增强的 AdminLayout |
| W9-W10 | 样式规范化  | 迁移现有页面                   | 规范化的所有页面   |

---

## ✅ 验收标准

### 组件验收

每个组件必须满足以下条件：

- [ ] 功能完整（所有 Props 和 Events 工作正常）
- [ ] 样式正确（使用 uni.scss 变量，响应式设计）
- [ ] 文档完整（API 文档，使用示例，截图）
- [ ] 单元测试通过（测试所有状态和边界情况）
- [ ] 代码审查通过（代码质量检查）
- [ ] 无浏览器兼容性问题
- [ ] 无控制台错误和警告

### 页面验收

每个页面必须满足以下条件：

- [ ] 使用新设计系统（uni.scss 变量）
- [ ] 使用新组件（不含原生 HTML 元素）
- [ ] 样式一致（遵循设计规范）
- [ ] 响应式设计（移动/平板/桌面适配）
- [ ] 功能完整（原有功能保留）
- [ ] 无样式回退（不使用硬编码值）
- [ ] 文档更新（页面结构说明）

### 项目验收

整个项目必须满足以下条件：

- [ ] 所有 30+ 个组件已实现并通过验收
- [ ] 所有 admin 页面已迁移到新设计系统
- [ ] 设计系统文档完整
- [ ] AdminLayout 支持 4 种布局模式
- [ ] 无未解决的 Bug
- [ ] 性能指标符合要求（首屏加载 < 3s）

---

## 🚦 优先级说明

| 级别 | 说明                   | 完成期限 |
| ---- | ---------------------- | -------- |
| P0   | 必须完成，影响核心功能 | 本周     |
| P1   | 应该完成，提升用户体验 | 本月     |
| P2   | 可以完成，增加高级功能 | 下个月   |

---

## 📞 问题跟踪

在实现过程中遇到的问题：

### 已解决

- [x] 系统信息页面侧边栏不显示 → 修复文件编码和菜单结构
- [x] 设计变量系统缺失 → 创建 uni.scss 包含 150+ 变量

### 未解决

- [ ] 虚拟滚动性能优化（Table/List 大数据）
- [ ] 富文本编辑器集成方案
- [ ] PDF 导出功能

---

## 📚 参考资源

- CRMEB 官方文档: https://crmeb.net/
- Uni-App-X 文档: https://uniapp.dcloud.net.cn/
- Element UI 组件库: https://element.eleme.cn/
- Ant Design: https://ant.design/

---

## 📝 文档维护

本文档的维护计划：

- 每周更新进度（周五）
- 每完成一个阶段更新检查清单
- 每发现问题添加到"问题跟踪"
- 每个月审查整体进度和调整计划

---

## 🎉 成功标志

当以下条件全部满足时，项目被认为成功：

1. ✅ 所有 30+ 个组件已实现并文档完整
2. ✅ 所有 admin 页面都使用新设计系统
3. ✅ AdminLayout 支持 4 种布局模式
4. ✅ 设计系统文档维护在 docs/ 目录
5. ✅ 无未解决的关键 Bug
6. ✅ 用户反馈满意度 > 90%

---

**文档版本**: 1.0  
**创建日期**: 2026-01-31  
**最后更新**: 2026-01-31  
**维护者**: AI Assistant

---

## 快速开始

选择一个 P0 优先级的组件（如 Button），按照以下步骤开始实现：

1. 在 `components/basic/` 创建 `Button.uvue`
2. 按照 COMPONENT_SPECIFICATION.md 编写代码
3. 编写单元测试
4. 编写文档
5. 提交审查

预计用时: 2 小时