# Spec: 拆件流程导航和状态管理

## ADDED Requirements

### 流程导航组件
- **Requirement**: 实现基于Element Plus Timeline的四步骤流程导航组件
- **Scenario**: 用户进入拆件页面后，可以看到清晰的步骤进度指示，当前步骤高亮，已完成步骤显示勾选标记

### 步骤状态管理
- **Requirement**: 建立完整的步骤状态管理系统，支持pending/current/completed三种状态
- **Scenario**: 系统能够准确跟踪用户在四个步骤间的进度，并在页面刷新后恢复状态

### 步骤覆盖逻辑
- **Requirement**: 实现在已有下一步状态时，上一步操作覆盖下游内容的逻辑
- **Scenario**: 用户在第二步点击重新生成时，系统会弹出确认对话框，确认后清空第三步和第四步的所有内容

### 步骤间导航
- **Requirement**: 支持用户点击已完成的步骤进行跳转，验证前置步骤完成情况
- **Scenario**: 用户可以点击Timeline中已完成的步骤快速跳转到该步骤，但无法跳转到未完成的后续步骤

## MODIFIED Requirements

### 页面路由配置
- **Requirement**: 在管理后台路由中添加拆件流程页面的路由规则
- **Scenario**: 通过 `/admin/disassembly/:id` 路由访问拆件流程页面，支持从内容审核页面通过参数跳转

### 组件响应式设计
- **Requirement**: 优化流程导航在平板端和桌面端的显示效果
- **Scenario**: Timeline组件在不同屏幕尺寸下保持良好的可读性和交互性

## 技术实现细节

### 状态管理架构
```javascript
const workflowState = reactive({
  currentStep: 1,
  contentData: {
    previewImage: null,
    modelUrl: null,
    disassemblyImages: [],
    generatedModel: null,
    shippingInfo: {}
  },
  stepStatus: {
    1: 'current',
    2: 'pending', 
    3: 'pending',
    4: 'pending'
  }
})
```

### Timeline组件配置
```javascript
const timelineData = computed(() => [
  {
    title: t('disassembly.steps.preview'),
    status: workflowState.stepStatus[1],
    clickable: true
  },
  {
    title: t('disassembly.steps.disassembly'),
    status: workflowState.stepStatus[2],
    clickable: workflowState.stepStatus[1] === 'completed'
  },
  // ...更多步骤
])
```

## 验证标准
- Timeline组件正确显示四个步骤及其状态
- 步骤状态切换逻辑准确无误
- 步骤覆盖功能在各种场景下正常工作
- 响应式布局在各种设备上表现良好
- 路由传参和状态保持功能完整