suoyousheng
/
deotalandAi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
deotalandAi/openspec/changes/create-disassembly-workflow/specs/workflow-navigation/spec.md

2.4 KiB
Raw Permalink Blame History

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组件在不同屏幕尺寸下保持良好的可读性和交互性

技术实现细节

状态管理架构

const workflowState = reactive({
  currentStep: 1,
  contentData: {
    previewImage: null,
    modelUrl: null,
    disassemblyImages: [],
    generatedModel: null,
    shippingInfo: {}
  },
  stepStatus: {
    1: 'current',
    2: 'pending', 
    3: 'pending',
    4: 'pending'
  }
})

Timeline组件配置

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