79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
# Proposal: 创建拆件流程管理页面
|
||
|
||
## Change ID
|
||
create-disassembly-workflow
|
||
|
||
## 需求概述
|
||
为管理后台系统开发完整的拆件流程管理页面，实现从内容审核到拆件完成的完整工作流，包含四个步骤的流程导航和交互功能。
|
||
|
||
## 目标
|
||
- 构建基于Timeline时间线设计的四步骤拆件流程页面
|
||
- 实现预览图和3D模型的横排展示与交互功能
|
||
- 开发拆件结果展示、模型生成和物流发货的完整流程
|
||
- 确保响应式设计和国际化支持
|
||
|
||
## 范围
|
||
### 包含
|
||
- 拆件流程页面主结构（基于Element Plus Timeline组件）
|
||
- 第一步：预览图和模型横排展示，点击预览功能，拆件按钮
|
||
- 第二步：已拆件图片展示，重新生成和生成模型功能
|
||
- 第三步：已生成模型展示，放大预览，重新生成、导出、发货功能
|
||
- 第四步：发货物流信息填写表单
|
||
- 步骤间状态管理和数据覆盖逻辑
|
||
- 中英文国际化支持
|
||
|
||
### 不包含
|
||
- 实际的拆件逻辑实现（用户后续自行开发）
|
||
- 真实的3D模型渲染（使用demo文件夹示例）
|
||
- 后端API集成
|
||
- 复杂的业务逻辑处理
|
||
|
||
## 设计要求
|
||
- 遵循项目设计规范：深紫色主题 (#6B46C1)
|
||
- 使用Element Plus Timeline组件作为主流程设计
|
||
- 支持中英文国际化，所有用户可见文本必须支持双语
|
||
- 响应式设计，适配桌面端和平板端
|
||
- 采用8px网格系统和平滑过渡动画 (200ms)
|
||
- 卡片式布局设计，统一的视觉风格
|
||
|
||
## 技术栈
|
||
- Vue 3 (Composition API)
|
||
- Element Plus Timeline、Dialog、Form等组件
|
||
- Vue Router 4 (拆件页面路由)
|
||
- Vue I18n 9.x (国际化)
|
||
- CSS 变量 + Scoped CSS
|
||
- 现有ModelViewer组件复用
|
||
|
||
## 功能设计
|
||
### 步骤流程
|
||
1. **内容预览步骤**：
|
||
- 左侧预览图（可点击放大预览）
|
||
- 右侧3D模型展示（使用demo/model.glb）
|
||
- 底部拆件按钮
|
||
|
||
2. **拆件结果步骤**：
|
||
- 展示拆件后的图片内容
|
||
- 右侧操作区：重新生成、生成模型按钮
|
||
|
||
3. **模型生成步骤**：
|
||
- 展示已生成的模型
|
||
- 点击模型可放大预览（使用ModelViewer组件）
|
||
- 右侧操作区：重新生成、导出、发货按钮
|
||
|
||
4. **物流发货步骤**：
|
||
- 发货信息填写表单
|
||
- 包含收件人、物流公司、运单号等信息
|
||
|
||
### 交互特性
|
||
- 步骤间导航可前进后退
|
||
- 在已有下一步状态时，上一步的相关操作可覆盖下一步内容
|
||
- 支持移动端触摸交互
|
||
- 加载状态和错误处理
|
||
|
||
## 预期交付
|
||
- 完整的拆件流程页面组件 (DisassemblyWorkflow.vue)
|
||
- 四步骤完整的用户界面和交互逻辑
|
||
- 中英文国际化文案配置
|
||
- 路由配置和页面集成
|
||
- 响应式布局适配
|
||
- 项目文档和使用说明 |