# 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)
- 四步骤完整的用户界面和交互逻辑
- 中英文国际化文案配置
- 路由配置和页面集成
- 响应式布局适配
- 项目文档和使用说明