457 lines
14 KiB
Markdown
457 lines
14 KiB
Markdown
# 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 小时
|