deotalandAi/openspec/changes/create-disassembly-workflow/design.md

# Design: 拆件流程管理页面架构设计

## 架构概述
拆件流程管理页面采用基于状态管理的步骤式设计，使用Element Plus Timeline组件作为核心导航结构，确保用户可以流畅地在四个步骤间切换，同时保持数据的连续性和一致性。

## 技术架构

### 组件结构
```
DisassemblyWorkflow.vue (主组件)
├── StepNavigation (步骤导航)
│   └── ElementPlus Timeline
├── StepContent (步骤内容容器)
│   ├── PreviewStep (第一步)
│   ├── DisassemblyStep (第二步) 
│   ├── ModelStep (第三步)
│   └── ShippingStep (第四步)
└── StepActions (步骤操作按钮)
```

### 状态管理设计
使用Vue 3 Composition API的reactive进行状态管理：

```javascript
const workflowState = reactive({
  currentStep: 1,
  contentData: {
    previewImage: '', // 预览图URL
    modelUrl: '', // 3D模型URL
    disassemblyImages: [], // 拆件后图片列表
    generatedModel: '', // 生成的模型URL
    shippingInfo: {} // 发货信息
  },
  stepStatus: {
    1: 'completed', // preview
    2: 'current',   // disassembly 
    3: 'pending',   // model
    4: 'pending'    // shipping
  }
})
```

## 设计模式

### 1. 步骤覆盖逻辑
为了实现在已有下一步状态时，上一步操作可以覆盖下一步内容，设计了以下逻辑：

```javascript
// 步骤覆盖检查
const checkStepOverride = (targetStep) => {
  const currentMaxStep = Math.max(...Object.keys(workflowState.stepStatus)
    .filter(step => workflowState.stepStatus[step] !== 'pending'))
  
  return targetStep <= currentMaxStep
}

// 覆盖下游步骤
const overrideDownstreamSteps = (fromStep) => {
  Object.keys(workflowState.stepStatus).forEach(step => {
    const stepNum = parseInt(step)
    if (stepNum > fromStep) {
      workflowState.stepStatus[step] = 'pending'
    }
  })
}
```

### 2. 响应式布局适配
采用"桌面优先"设计策略：

```css
/* 桌面端布局 (>=1024px) */
.disassembly-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

/* 平板端布局 (768px-1024px) */
@media (max-width: 1024px) {
  .disassembly-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 移动端布局 (<768px) */
@media (max-width: 768px) {
  .step-content {
    padding: 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }
}
```

### 3. 国际化设计
所有用户可见文本通过Vue I18n管理：

```javascript
// 国际化键值结构
const i18nKeys = {
  disassembly: {
    title: '拆件流程',
    steps: {
      preview: '内容预览',
      disassembly: '拆件结果', 
      model: '模型生成',
      shipping: '物流发货'
    },
    actions: {
      startDisassembly: '开始拆件',
      regenerate: '重新生成',
      generateModel: '生成模型',
      export: '导出',
      ship: '发货',
      submitShipping: '提交发货信息'
    }
  }
}
```

## 关键交互设计

### 1. 步骤导航交互
- Timeline组件显示四个步骤的进度
- 当前步骤高亮显示，已完成步骤显示勾选标记
- 点击已完成的步骤可以跳转到该步骤
- 点击未来步骤需要验证前置步骤是否完成

### 2. 预览交互设计
- **图片预览**：点击缩略图弹出全屏预览对话框
- **3D模型预览**：使用ModelViewer组件，支持旋转、缩放等操作
- **模型放大**：第三步的模型支持点击放大到全屏预览

### 3. 步骤覆盖交互
- 在第二步点击"重新生成"时，如果已有第三步内容，会弹出确认对话框
- 用户确认后会清空第三步和第四步的所有内容
- 状态重新计算，确保步骤间的逻辑一致性

### 4. 表单验证设计
- 第四步的发货表单使用Element Plus Form组件
- 必填字段：收件人姓名、联系电话、收货地址
- 可选字段：备注、特殊要求
- 实时验证和提交前验证相结合

## 性能优化策略

### 1. 组件懒加载
```javascript
// 路由级别的懒加载
const DisassemblyWorkflow = defineAsyncComponent(() => 
  import('@/views/disassembly/DisassemblyWorkflow.vue')
)
```

### 2. 图片懒加载
```javascript
// 使用vue3-lazyload进行图片懒加载
const lazyConfig = {
  loading: '/images/loading.gif',
  error: '/images/error.png'
}
```

### 3. 状态缓存
- 步骤数据在组件销毁前持久化到sessionStorage
- 页面刷新后可以恢复用户的进度状态
- 关键数据：当前步骤、已生成内容、用户输入的表单数据

## 用户体验设计

### 1. 加载状态
- 每个步骤切换时显示加载动画
- 拆件和模型生成过程显示进度条
- 骨架屏占位，提升感知性能

### 2. 错误处理
- 网络错误友好提示
- 文件加载失败的重试机制
- 表单验证错误的即时反馈

### 3. 反馈设计
- 成功操作的Toast提示
- 步骤完成的状态反馈
- 关键操作的确认对话框

## 可访问性考虑

### 1. 键盘导航
- 所有可交互元素支持Tab键导航
- 步骤导航支持左右箭头键切换
- 对话框支持ESC键关闭

### 2. 屏幕阅读器支持
- 为Timeline组件添加适当的ARIA标签
- 步骤状态变化时的ARIA Live通知
- 图片和模型预览的替代文本

## 扩展性设计

### 1. 步骤配置化
```javascript
const stepConfigs = [
  {
    id: 1,
    component: 'PreviewStep',
    title: t('disassembly.steps.preview'),
    required: true
  },
  // ...更多步骤配置
]
```

### 2. 插件化操作
- 导出功能设计为可配置的插件接口
- 支持添加新的导出格式
- 模型预览功能可扩展为支持多种3D格式

这种设计确保了拆件流程页面的可维护性、可扩展性和良好的用户体验，同时遵循了项目的技术规范和设计标准。