5.7 KiB

Raw Blame History

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

架构概述

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

技术架构

组件结构

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

状态管理设计

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

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. 步骤覆盖逻辑

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

// 步骤覆盖检查
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. 响应式布局适配

采用"桌面优先"设计策略：

/* 桌面端布局 (>=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管理：

// 国际化键值结构
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. 组件懒加载

// 路由级别的懒加载
const DisassemblyWorkflow = defineAsyncComponent(() => 
  import('@/views/disassembly/DisassemblyWorkflow.vue')
)

2. 图片懒加载

// 使用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. 步骤配置化

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

2. 插件化操作

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

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

5.7 KiB Raw Blame History Unescape Escape