feat: 添加 Vlog 模块路由和相关图像路径，更新模块切换器交互
This commit is contained in:
zhongyidian committed
1 parent
02ddfd0c07
commit
aeec7fceed
247 files changed
+534
-3
No files matched your search
@@ -0,0 +1,277 @@
|
||||
<!--
|
||||
进度条组件
|
||||
用于显示制作变焦镜的步骤进度
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="progress-bar-container">
|
||||
<!-- 主进度条 -->
|
||||
<div class="progress-bar">
|
||||
<!-- 中间步骤指示器 -->
|
||||
<div class="steps-section" v-if="currentStep > 0">
|
||||
<!-- 标题区域 -->
|
||||
<div class="absolute top-0 left-40">
|
||||
<img
|
||||
:src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
|
||||
alt="制作变焦镜-我的志愿者手记"
|
||||
class="title-image"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(step, index) in steps.slice(0, 3)"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
:class="getStepStatus(index)"
|
||||
>
|
||||
<span class="step-text">{{ step.name }}</span>
|
||||
<div class="step-dots">•••••</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 left-40" v-else>
|
||||
<img
|
||||
:src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.UNLOCKED)"
|
||||
alt="未解锁"
|
||||
class="icon-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧完成按钮 -->
|
||||
<div class="right-section">
|
||||
<button @click="handleComplete" :disabled="!canComplete">
|
||||
<img
|
||||
:src="
|
||||
getStaticImage(
|
||||
canComplete
|
||||
? IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON
|
||||
: IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON_DISABLED
|
||||
)
|
||||
"
|
||||
alt="完成前置-即可开启实战"
|
||||
class="button-image"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
// 定义组件属性
|
||||
interface Props {
|
||||
/** 当前步骤索引 (0-3) */
|
||||
currentStep?: number
|
||||
}
|
||||
|
||||
// 定义事件
|
||||
interface Emits {
|
||||
/** 点击完成按钮时触发 */
|
||||
complete: []
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentStep: 0
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 计算属性：是否可以完成（当前在最后一步）
|
||||
const canComplete = computed(() => props.currentStep === 3)
|
||||
|
||||
// 处理完成按钮点击
|
||||
const handleComplete = () => {
|
||||
if (canComplete.value) {
|
||||
emit('complete')
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤配置
|
||||
const steps = [
|
||||
{ name: '前期准备', icon: '📋' },
|
||||
{ name: '中期拍摄', icon: '📹' },
|
||||
{ name: '后期剪辑', icon: '🎬' },
|
||||
{ name: '即可开启实战', icon: '⚡' }
|
||||
]
|
||||
|
||||
// 获取步骤状态
|
||||
const getStepStatus = (stepIndex: number) => {
|
||||
if (stepIndex < props.currentStep) return 'completed'
|
||||
if (stepIndex === props.currentStep) return 'current'
|
||||
return 'locked'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress-bar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
height: 292px;
|
||||
background-image: url('@/assets/images/components/ProgressBar-bg.png');
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.steps-section {
|
||||
width: 1600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 30px 20px 0;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.step-dots {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 */
|
||||
.step-item.completed .step-text {
|
||||
color: #4ade80;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
|
||||
}
|
||||
|
||||
.step-item.completed .step-dots {
|
||||
color: #4ade80;
|
||||
text-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
|
||||
}
|
||||
|
||||
.step-item.current .step-text {
|
||||
color: #fbbf24;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
|
||||
}
|
||||
|
||||
.step-item.current .step-dots {
|
||||
color: #fbbf24;
|
||||
text-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
|
||||
}
|
||||
|
||||
.step-item.locked .step-text {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.step-item.locked .step-dots {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.right-section {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-image {
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.progress-bar {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
min-width: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.steps-section {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.step-dots {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button-image {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.progress-bar {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-image {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* 进度条组件导出
|
||||
*/
|
||||
|
||||
export { default as ProgressBar } from './ProgressBar.vue'
|
||||
export type * from './types'
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* 进度条组件类型定义
|
||||
*/
|
||||
|
||||
/** 步骤状态 */
|
||||
export type StepStatus = 'locked' | 'current' | 'completed'
|
||||
|
||||
/** 步骤配置 */
|
||||
export interface StepConfig {
|
||||
/** 步骤名称 */
|
||||
name: string
|
||||
/** 步骤图标 */
|
||||
icon?: string
|
||||
/** 步骤状态 */
|
||||
status?: StepStatus
|
||||
/** 是否可点击 */
|
||||
clickable?: boolean
|
||||
}
|
||||
|
||||
/** 进度条组件属性 */
|
||||
export interface ProgressBarProps {
|
||||
/** 当前步骤索引 (0-3) */
|
||||
currentStep?: number
|
||||
/** 自定义步骤配置 */
|
||||
steps?: StepConfig[]
|
||||
/** 是否显示标题 */
|
||||
showTitle?: boolean
|
||||
/** 标题文本 */
|
||||
title?: string
|
||||
}
|
||||
|
||||
/** 进度条组件事件 */
|
||||
export interface ProgressBarEmits {
|
||||
/** 点击完成按钮时触发 */
|
||||
complete: []
|
||||
/** 步骤变化时触发 */
|
||||
stepChange: [step: number]
|
||||
/** 点击步骤时触发 */
|
||||
stepClick: [step: number]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* 组件统一导出
|
||||
*/
|
||||
|
||||
// 按钮组件
|
||||
export * from './Button'
|
||||
|
||||
// 引导组件
|
||||
export * from './Guide'
|
||||
|
||||
// 进度条组件
|
||||
export * from './ProgressBar'
|
||||
Reference in new issue
Block a user