# 项目流程步骤条说明

## 📍 功能概述

在文件提交模块顶部添加了项目信息头部和流程步骤条，清晰展示当前项目所处的阶段。

## 🎨 界面布局

### 1. 项目信息头部

```
┌─────────────────────────────────────────────┐
│  某数据中心发电机组采购项目                  │
│  创建时间：2024-11-20 09:30:00  [进行中]    │
└─────────────────────────────────────────────┘
```

**特点**:
- 🎨 渐变紫色背景（#667eea → #764ba2）
- 📝 显示项目名称
- 📅 显示创建时间
- 🏷️ 显示项目状态标签

### 2. 流程步骤条

```
招标信息提取 → 撰写投标文件 → 文件提交 → 开标 → 结果公示
   (完成)        (完成)       (进行中)  (待进行) (待进行)
     ✓            ✓            ⟳         4        5
```

**5个步骤**:
1. **招标信息提取** - 已完成 ✓
2. **撰写投标文件** - 已完成 ✓
3. **文件提交** - 进行中 ⟳ (当前)
4. **开标** - 待进行
5. **结果公示** - 待进行

## 🎯 步骤状态

### 已完成步骤
- **图标**: 绿色对勾 ✓
- **颜色**: #10b981 (绿色)
- **描述**: "已完成"

### 进行中步骤 (当前)
- **图标**: 紫色旋转加载图标 ⟳
- **颜色**: #7c3aed (紫色)
- **描述**: "进行中"
- **动画**: 持续旋转

### 待进行步骤
- **图标**: 数字序号
- **颜色**: 默认灰色
- **描述**: "待进行"

## 💻 代码实现

### 模板结构

```vue
<template>
  <div class="file-submission-panel">
    <!-- 项目信息头部 -->
    <div class="project-header">
      <h2>{{ project.name }}</h2>
      <div class="project-meta">
        <span>创建时间：{{ project.createTime }}</span>
        <el-tag type="warning" size="large">进行中</el-tag>
      </div>
    </div>

    <!-- 项目流程步骤条 -->
    <el-card class="timeline-card">
      <div class="project-timeline-header">
        <h3>项目流程</h3>
      </div>
      <el-steps :active="2" align-center>
        <!-- 步骤1: 招标信息提取 -->
        <el-step title="招标信息提取" description="已完成">
          <template #icon>
            <el-icon color="#10b981"><CircleCheck /></el-icon>
          </template>
        </el-step>
        
        <!-- 步骤2: 撰写投标文件 -->
        <el-step title="撰写投标文件" description="已完成">
          <template #icon>
            <el-icon color="#10b981"><CircleCheck /></el-icon>
          </template>
        </el-step>
        
        <!-- 步骤3: 文件提交 (当前) -->
        <el-step title="文件提交" description="进行中" status="process">
          <template #icon>
            <el-icon color="#7c3aed">
              <Loading class="rotating" />
            </el-icon>
          </template>
        </el-step>
        
        <!-- 步骤4: 开标 -->
        <el-step title="开标" description="待进行">
          <template #icon>
            <span>4</span>
          </template>
        </el-step>
        
        <!-- 步骤5: 结果公示 -->
        <el-step title="结果公示" description="待进行">
          <template #icon>
            <span>5</span>
          </template>
        </el-step>
      </el-steps>
    </el-card>
    
    <!-- 其他内容... -->
  </div>
</template>
```

### 样式实现

```scss
// 项目信息头部
.project-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px 32px;
  border-radius: 12px;
  margin-bottom: 24px;
  color: white;

  h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
  }

  .project-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    opacity: 0.95;
  }
}

// 流程步骤卡片
.timeline-card {
  margin-bottom: 24px;
  
  .project-timeline-header {
    margin-bottom: 20px;
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
      margin: 0;
    }
  }

  :deep(.el-steps) {
    .el-step__title {
      font-size: 14px;
      font-weight: 500;
    }

    .el-step__description {
      font-size: 12px;
    }

    .el-step.is-process {
      .el-step__title {
        color: #7c3aed;
        font-weight: 600;
      }
    }

    .rotating {
      animation: rotate 2s linear infinite;
    }
  }
}

// 旋转动画
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

## 🎨 视觉效果

### 项目头部
- **背景**: 渐变紫色（从 #667eea 到 #764ba2）
- **文字**: 白色
- **圆角**: 12px
- **内边距**: 24px 32px

### 步骤条
- **对齐**: 居中对齐
- **当前步骤**: 紫色高亮
- **完成步骤**: 绿色对勾
- **待进行**: 灰色数字

### 动画效果
- **旋转图标**: 2秒一圈，无限循环
- **平滑过渡**: 所有状态变化都有过渡效果

## 📊 步骤索引说明

```javascript
:active="2"  // 当前激活的步骤索引（从0开始）
```

**索引对应**:
- 0 = 招标信息提取
- 1 = 撰写投标文件
- 2 = 文件提交 ← 当前
- 3 = 开标
- 4 = 结果公示

## 🔄 其他模块适配

### BiddingInfo.vue (开标信息)
```vue
<el-steps :active="3" align-center>
  <!-- 前3步已完成 -->
  <el-step title="开标" description="进行中" status="process">
    <!-- 当前步骤 -->
  </el-step>
</el-steps>
```

### ResultAnnouncement.vue (结果公示)
```vue
<el-steps :active="4" align-center>
  <!-- 前4步已完成 -->
  <el-step title="结果公示" description="进行中" status="process">
    <!-- 当前步骤 -->
  </el-step>
</el-steps>
```

## 💡 使用建议

### 1. 动态步骤索引
根据项目实际进度动态设置 `active` 值：

```javascript
const currentStepIndex = computed(() => {
  const stepMap = {
    '招标信息提取': 0,
    '撰写投标文件': 1,
    '文件提交': 2,
    '开标': 3,
    '结果公示': 4
  }
  return stepMap[project.value.progress] || 0
})
```

### 2. 步骤点击跳转
可以为步骤添加点击事件，实现快速跳转：

```vue
<el-step 
  @click="jumpToStep(0)"
  title="招标信息提取"
>
</el-step>
```

### 3. 响应式设计
在移动端可以使用垂直步骤条：

```vue
<el-steps 
  :active="2" 
  :direction="isMobile ? 'vertical' : 'horizontal'"
>
</el-steps>
```

## 🎯 优化建议

### 1. 步骤时间显示
在描述中显示完成时间：

```vue
<el-step 
  title="招标信息提取" 
  description="已完成 (2024-11-20)"
>
</el-step>
```

### 2. 进度百分比
在头部显示整体进度：

```vue
<div class="project-meta">
  <span>创建时间：{{ project.createTime }}</span>
  <span>整体进度：60%</span>
  <el-progress :percentage="60" style="width: 100px;" />
</div>
```

### 3. 步骤详情提示
鼠标悬停显示步骤详情：

```vue
<el-tooltip content="已于2024-11-20完成">
  <el-step title="招标信息提取" />
</el-tooltip>
```

## 📸 效果预览

### 完整界面
```
┌─────────────────────────────────────────────────┐
│ 某数据中心发电机组采购项目                       │
│ 创建时间：2024-11-20 09:30:00  [进行中]         │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ 项目流程                                         │
│                                                  │
│  ✓          ✓          ⟳         4         5    │
│ 招标信息  撰写投标   文件提交   开标   结果公示  │
│  提取      文件                                  │
│ 已完成    已完成     进行中    待进行  待进行    │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ 已生成标书文件                                   │
│ ...                                              │
└─────────────────────────────────────────────────┘
```

---

**版本**: v1.3.0  
**更新时间**: 2024-12-08  
**功能状态**: ✅ 已实现  
**适用模块**: FileSubmission.vue
