14 KiB
14 KiB
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 | 可以完成，增加高级功能 | 下个月 |
📞 问题跟踪
在实现过程中遇到的问题：
已解决
- 系统信息页面侧边栏不显示 → 修复文件编码和菜单结构
- 设计变量系统缺失 → 创建 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/
📝 文档维护
本文档的维护计划：
- 每周更新进度（周五）
- 每完成一个阶段更新检查清单
- 每发现问题添加到"问题跟踪"
- 每个月审查整体进度和调整计划
🎉 成功标志
当以下条件全部满足时，项目被认为成功：
- ✅ 所有 30+ 个组件已实现并文档完整
- ✅ 所有 admin 页面都使用新设计系统
- ✅ AdminLayout 支持 4 种布局模式
- ✅ 设计系统文档维护在 docs/ 目录
- ✅ 无未解决的关键 Bug
- ✅ 用户反馈满意度 > 90%
文档版本: 1.0
创建日期: 2026-01-31
最后更新: 2026-01-31
维护者: AI Assistant
快速开始
选择一个 P0 优先级的组件（如 Button），按照以下步骤开始实现：
- 在
components/basic/创建Button.uvue - 按照 COMPONENT_SPECIFICATION.md 编写代码
- 编写单元测试
- 编写文档
- 提交审查
预计用时: 2 小时