145 lines
4.5 KiB
Vue
145 lines
4.5 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="visible"
|
||
class="fixed inset-0 z-[70] bg-black/70 backdrop-blur-sm px-4 py-6 flex items-end sm:items-center justify-center"
|
||
>
|
||
<div
|
||
class="w-full max-w-xl rounded-2xl border border-zinc-800 bg-zinc-950 shadow-2xl overflow-hidden"
|
||
>
|
||
<div class="px-5 py-4 border-b border-zinc-800 flex items-center justify-between gap-3">
|
||
<div>
|
||
<p class="text-[10px] uppercase tracking-[0.2em] text-zinc-500 font-black">后台引导</p>
|
||
<h3 class="text-lg font-black text-zinc-100 mt-1">{{ currentStep.title }}</h3>
|
||
</div>
|
||
<button
|
||
class="h-9 w-9 rounded-lg border border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900 transition-colors"
|
||
@click="handleClose"
|
||
>
|
||
<X :size="16" class="mx-auto" />
|
||
</button>
|
||
</div>
|
||
|
||
<div class="px-5 py-5 space-y-4">
|
||
<p class="text-sm leading-relaxed text-zinc-300">{{ currentStep.description }}</p>
|
||
<div class="rounded-xl border border-blue-500/20 bg-blue-500/5 p-3">
|
||
<p class="text-xs text-zinc-400">
|
||
建议操作：
|
||
<span class="text-zinc-200 font-semibold">{{ currentStep.actionHint }}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="px-5 py-4 border-t border-zinc-800 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
|
||
>
|
||
<p class="text-xs text-zinc-500 font-semibold">{{ stepIndex + 1 }} / {{ steps.length }}</p>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
v-if="stepIndex > 0"
|
||
class="px-3.5 py-2 rounded-lg border border-zinc-700 text-zinc-300 hover:bg-zinc-900 text-sm"
|
||
@click="prevStep"
|
||
>
|
||
上一步
|
||
</button>
|
||
<button
|
||
class="px-3.5 py-2 rounded-lg border border-zinc-700 text-zinc-200 hover:bg-zinc-900 text-sm"
|
||
@click="goCurrentStep"
|
||
>
|
||
前往此功能
|
||
</button>
|
||
<button
|
||
class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold"
|
||
@click="nextStep"
|
||
>
|
||
{{ stepIndex === steps.length - 1 ? '完成引导' : '下一步' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref, watch } from 'vue'
|
||
import { X } from '@lucide/vue'
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['navigate', 'close', 'complete'])
|
||
|
||
const steps = [
|
||
{
|
||
tab: 'overview',
|
||
title: '先看数据概览',
|
||
description: '这里会显示待处理歌曲、播放数据和系统运行状态，建议每次值班先看这一页。',
|
||
actionHint: '进入“数据概览”快速确认今日状态。'
|
||
},
|
||
{
|
||
tab: 'songs',
|
||
title: '处理歌曲审核',
|
||
description: '在歌曲管理中可试听、拒绝或保留歌曲，确保内容合规后再进入排期流程。',
|
||
actionHint: '优先处理新提交和被举报的歌曲。'
|
||
},
|
||
{
|
||
tab: 'schedule',
|
||
title: '安排节目排期',
|
||
description: '将审核通过的歌曲拖拽到目标日期与时段，调整顺序后发布，用户即可看到最新排期。',
|
||
actionHint: '排期完成后记得点击发布，避免用户看到旧数据。'
|
||
},
|
||
{
|
||
tab: 'site-config',
|
||
title: '维护站点配置',
|
||
description: '可统一修改站点标题、版本号和投稿规则，保存后会对前台页面立即生效。',
|
||
actionHint: '发布新版本时，建议同步更新“站点版本号”。'
|
||
},
|
||
{
|
||
tab: 'workflow-tutorial',
|
||
title: '查看完整流程教程',
|
||
description: '如果需要标准值班流程和FAQ，可在“流程与教程”页面查看详细图文说明。',
|
||
actionHint: '把该页面作为新人培训材料。'
|
||
}
|
||
]
|
||
|
||
const stepIndex = ref(0)
|
||
const currentStep = computed(() => steps[stepIndex.value])
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(visible) => {
|
||
if (visible) {
|
||
stepIndex.value = 0
|
||
}
|
||
}
|
||
)
|
||
|
||
const goCurrentStep = () => {
|
||
emit('navigate', currentStep.value.tab)
|
||
}
|
||
|
||
const prevStep = () => {
|
||
if (stepIndex.value > 0) {
|
||
stepIndex.value -= 1
|
||
}
|
||
}
|
||
|
||
const nextStep = () => {
|
||
goCurrentStep()
|
||
if (stepIndex.value < steps.length - 1) {
|
||
stepIndex.value += 1
|
||
return
|
||
}
|
||
emit('complete')
|
||
}
|
||
|
||
const handleClose = () => {
|
||
emit('close')
|
||
}
|
||
</script>
|