# ProgressBar 进度条组件

用于显示制作变焦镜的步骤进度，包含标题、步骤指示器和完成按钮。

## 功能特性

- 🎯 显示制作变焦镜的四个步骤：前期准备、中期拍摄、后期剪辑、即可开启实战
- 🎨 蓝色渐变背景，符合设计规范
- 📱 响应式设计，支持移动端
- ⚡ 支持步骤状态管理和事件回调
- 🖼️ 使用项目统一的图片资源管理

## 使用方法

```vue
<template>
  <ProgressBar
    :current-step="currentStep"
    @complete="handleComplete"
    @step-change="handleStepChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ProgressBar } from '@/components'

const currentStep = ref(0)

const handleComplete = () => {
  console.log('完成前置条件，开启实战！')
  // 处理完成逻辑
}

const handleStepChange = step => {
  console.log('步骤变化:', step)
  // 处理步骤变化逻辑
}
</script>
```

## Props

| 属性        | 类型   | 默认值 | 说明               |
| ----------- | ------ | ------ | ------------------ |
| currentStep | number | 0      | 当前步骤索引 (0-3) |

## Events

| 事件名     | 参数         | 说明               |
| ---------- | ------------ | ------------------ |
| complete   | -            | 点击完成按钮时触发 |
| stepChange | step: number | 步骤变化时触发     |

## 样式定制

组件使用 scoped 样式，可以通过以下 CSS 变量进行定制：

```css
.progress-bar {
  --primary-color: #4a90e2;
  --secondary-color: #7bb3f0;
  --accent-color: #00ffff;
  --text-color: white;
}
```

## 使用示例

### 不同状态展示

```vue
<template>
  <!-- 初始状态：未开始 -->
  <ProgressBar :current-step="0" />

  <!-- 进行中：当前在第3步 -->
  <ProgressBar :current-step="2" />

  <!-- 即将完成：当前在第4步，可以点击完成按钮 -->
  <ProgressBar :current-step="3" />
</template>
```

### 状态说明

- **未解锁**：`currentStep < 3`，显示"未解锁"状态
- **已解锁**：`currentStep >= 3`，显示"已解锁"状态
- **可完成**：`currentStep === 3`，完成按钮可点击

## 响应式断点

- 桌面端：> 768px
- 平板端：≤ 768px
- 移动端：≤ 480px