feat: 添加 Vlog 模块路由和相关图像路径，更新模块切换器交互

src/components/ProgressBar/README.md

@@ -0,0 +1,95 @@
+# 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