2.7 KiB

Raw Blame History

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组件复用

功能设计

步骤流程

内容预览步骤：
- 左侧预览图（可点击放大预览）
- 右侧3D模型展示（使用demo/model.glb）
- 底部拆件按钮
拆件结果步骤：
- 展示拆件后的图片内容
- 右侧操作区：重新生成、生成模型按钮
模型生成步骤：
- 展示已生成的模型
- 点击模型可放大预览（使用ModelViewer组件）
- 右侧操作区：重新生成、导出、发货按钮
物流发货步骤：
- 发货信息填写表单
- 包含收件人、物流公司、运单号等信息

交互特性

步骤间导航可前进后退
在已有下一步状态时，上一步的相关操作可覆盖下一步内容
支持移动端触摸交互
加载状态和错误处理

预期交付

完整的拆件流程页面组件 (DisassemblyWorkflow.vue)
四步骤完整的用户界面和交互逻辑
中英文国际化文案配置
路由配置和页面集成
响应式布局适配
项目文档和使用说明