4.0 KiB
4.0 KiB
Tasks: 创建拆件流程管理页面
阶段 1: 项目基础检查和准备
- 1.1 检查现有项目的国际化配置和路由设置
- 1.2 确认 Element Plus Timeline 组件可用性
- 1.3 验证 demo 文件夹中的模型和图片资源
- 1.4 检查现有 ModelViewer 组件的功能
- 1.5 确认项目的主题色彩和样式变量配置
阶段 2: 拆件流程页面核心组件开发
- 2.1 创建 DisassemblyWorkflow.vue 主组件文件
- 2.2 实现基于 Element Plus Timeline 的四步骤流程结构
- 2.3 添加步骤间的导航逻辑和数据状态管理
- 2.4 实现步骤状态的覆盖逻辑（上游操作影响下游内容）
- 2.5 配置响应式布局的基础结构
阶段 3: 第一步 - 内容预览功能
- 3.1 实现左侧预览图的横排布局
- 3.2 添加预览图点击放大功能（使用现有对话框组件）
- 3.3 实现右侧 3D 模型展示（使用 demo/model.glb）
- 3.4 集成 ModelViewer 组件进行模型预览
- 3.5 添加拆件按钮和点击处理逻辑
阶段 4: 第二步 - 拆件结果展示
- 4.1 创建拆件结果展示区域
- 4.2 实现已拆件图片内容的显示（使用 demo/suoluetu.png）
- 4.3 添加右侧操作区：重新生成和生成模型按钮
- 4.4 实现重新生成按钮功能（模拟重新拆件逻辑）
- 4.5 实现生成模型按钮功能（推进到第三步）
阶段 5: 第三步 - 模型生成和展示
- 5.1 创建已生成模型展示区域
- 5.2 实现模型点击放大预览功能（集成 ModelViewer）
- 5.3 添加右侧操作区：重新生成、导出、发货按钮
- 5.4 实现重新生成按钮功能（更新模型内容）
- 5.5 实现导出功能（提供不同格式选项）
- 5.6 实现发货按钮功能（推进到第四步）
阶段 6: 第四步 - 物流发货信息
- 6.1 创建发货信息填写表单
- 6.2 实现表单验证和字段配置（收件人、物流公司、运单号等）
- 6.3 添加表单提交和确认逻辑
- 6.4 实现发货完成后的状态反馈
- 6.5 添加返回上一步的导航功能
阶段 7: 国际化配置
- 7.1 添加拆件流程相关的中文国际化文案
- 7.2 添加对应的英文国际化文案
- 7.3 配置所有用户可见文本的国际化支持
- 7.4 验证双语切换功能的完整性
- 7.5 检查文案长度适配和布局影响
阶段 8: 样式和主题适配
- 8.1 应用项目的紫色主题色彩系统
- 8.2 实现 8px 网格间距系统
- 8.3 添加平滑过渡动画效果（200ms）
- 8.4 优化卡片、按钮、对话框等组件样式
- 8.5 确保响应式设计在桌面端和平板端的表现
- 8.6 添加步骤间的视觉连接和进度指示
阶段 9: 路由和页面集成
- 9.1 配置拆件流程页面的路由规则
- 9.2 在内容审核页面添加跳转到拆件流程的链接
- 9.3 实现路由传参和状态保持
- 9.4 添加面包屑导航支持
- 9.5 配置页面标题和元信息
阶段 10: 测试和优化
- 10.1 测试四个步骤间的导航和状态切换
- 10.2 验证预览图和模型预览功能
- 10.3 测试步骤覆盖逻辑的正确性
- 10.4 检查响应式布局在不同屏幕尺寸的表现
- 10.5 验证国际化切换功能的完整性
- 10.6 测试表单验证和错误处理
- 10.7 优化加载状态和用户体验
阶段 11: 文档和部署
- 11.1 更新 README.md，添加拆件流程功能说明
- 11.2 创建组件使用文档和 API 说明
- 11.3 添加功能演示截图或说明
- 11.4 验证项目构建和开发服务器启动
- 11.5 最终测试和代码审查
验证标准
- 四步骤流程完整可用，导航流畅
- 预览图和模型展示功能正常
- 步骤覆盖逻辑正确实现
- 响应式设计在桌面端和平板端表现良好
- 国际化功能完全可用
- 所有按钮和交互功能正常工作
- 加载状态和错误处理完善