BYW-VoiceHub/app/components/Admin/WorkflowTutorial.vue

<template>
  <div class="space-y-6 max-w-5xl mx-auto pb-24 md:pb-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
    <div class="flex flex-col gap-2">
      <h2 class="text-2xl md:text-3xl font-bold tracking-tight text-zinc-900">工作流与使用教程</h2>
      <p class="text-zinc-400">了解宝一外校园点歌系统的标准操作流程和功能说明，帮助您更高效地管理点歌与排期。</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 歌曲管理流程 -->
      <div class="bg-zinc-50/50 border border-zinc-200 rounded-xl p-6 hover:border-zinc-200 transition-colors">
        <div class="flex items-center gap-3 mb-4 text-blue-700">
          <CheckCircle2 class="w-6 h-6" />
          <h3 class="text-xl font-semibold">1. 歌曲管理与审核</h3>
        </div>
        <ol class="space-y-4 text-zinc-600">
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500/20 text-blue-700 flex items-center justify-center text-sm font-bold">1</span>
            <div>
              <p class="font-medium text-zinc-900">查看所有歌曲</p>
              <p class="text-sm text-zinc-500 mt-1">进入“歌曲管理”页面，系统会列出所有用户提交的歌曲。</p>
            </div>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500/20 text-blue-700 flex items-center justify-center text-sm font-bold">2</span>
            <div>
              <p class="font-medium text-zinc-900">试听与检查</p>
              <p class="text-sm text-zinc-500 mt-1">点击播放按钮试听歌曲质量，检查留言内容是否合规，确保没有不当言论。</p>
            </div>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500/20 text-blue-700 flex items-center justify-center text-sm font-bold">3</span>
            <div>
              <p class="font-medium text-zinc-900">拒绝或修改状态</p>
              <p class="text-sm text-zinc-500 mt-1">如不符合要求，可以在歌曲管理中拒绝该歌曲，并填写退回原因；审核通过的歌曲可直接用于排期。</p>
            </div>
          </li>
        </ol>
      </div>

      <!-- 排期流程 -->
      <div class="bg-zinc-50/50 border border-zinc-200 rounded-xl p-6 hover:border-zinc-200 transition-colors">
        <div class="flex items-center gap-3 mb-4 text-emerald-700">
          <CalendarDays class="w-6 h-6" />
          <h3 class="text-xl font-semibold">2. 节目排期流程</h3>
        </div>
        <ol class="space-y-4 text-zinc-600">
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-700 flex items-center justify-center text-sm font-bold">1</span>
            <div>
              <p class="font-medium text-zinc-900">选择日期与时段</p>
              <p class="text-sm text-zinc-500 mt-1">在“排期管理”中，选择目标播放日期和播出时段。</p>
            </div>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-700 flex items-center justify-center text-sm font-bold">2</span>
            <div>
              <p class="font-medium text-zinc-900">拖拽编排</p>
              <p class="text-sm text-zinc-500 mt-1">将左侧“待排歌曲”拖拽至右侧的“播放列表”中，可上下拖拽调整播放顺序。</p>
            </div>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-700 flex items-center justify-center text-sm font-bold">3</span>
            <div>
              <p class="font-medium text-zinc-900">发布排期</p>
              <p class="text-sm text-zinc-500 mt-1">排期完成后，点击“发布排期”。发布后用户即可在前端页面看到该日期的节目单。</p>
            </div>
          </li>
        </ol>
      </div>

      <!-- 播音流程 -->
      <div class="bg-zinc-50/50 border border-zinc-200 rounded-xl p-6 hover:border-zinc-200 transition-colors">
        <div class="flex items-center gap-3 mb-4 text-purple-400">
          <Mic2 class="w-6 h-6" />
          <h3 class="text-xl font-semibold">3. 播音与打印</h3>
        </div>
        <ol class="space-y-4 text-zinc-600">
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center text-sm font-bold">1</span>
            <div>
              <p class="font-medium text-zinc-900">生成歌单图片/打印</p>
              <p class="text-sm text-zinc-500 mt-1">播音前，前往“导入酷狗”生成今日节目单图片用于宣传，或在“打印排期”中生成播音员用的纸质稿。</p>
            </div>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center text-sm font-bold">2</span>
            <div>
              <p class="font-medium text-zinc-900">标记已播</p>
              <p class="text-sm text-zinc-500 mt-1">播音结束后，系统可自动/手动将排期内的歌曲标记为“已播”，方便统计数据。</p>
            </div>
          </li>
        </ol>
      </div>

      <!-- 常见问题 -->
      <div class="bg-zinc-50/50 border border-zinc-200 rounded-xl p-6 hover:border-zinc-200 transition-colors">
        <div class="flex items-center gap-3 mb-4 text-amber-700">
          <HelpCircle class="w-6 h-6" />
          <h3 class="text-xl font-semibold">常见问题 (FAQ)</h3>
        </div>
        <div class="space-y-4">
          <div>
            <h4 class="text-sm font-medium text-zinc-700">Q: 为什么找不到某些待排歌曲？</h4>
            <p class="text-sm text-zinc-500 mt-1">A: 请检查是否在排期页面的左侧选错了标签（如普通投稿/重播申请），或者该歌曲还未通过审核。</p>
          </div>
          <div>
            <h4 class="text-sm font-medium text-zinc-700">Q: 什么是选曲日期？</h4>
            <p class="text-sm text-zinc-500 mt-1">A: 选曲日期是用户在点歌时可选择的期望播放日期。请在“选曲日期”设置中提前开放可用的日期。</p>
          </div>
          <div>
            <h4 class="text-sm font-medium text-zinc-700">Q: 权限不足怎么办？</h4>
            <p class="text-sm text-zinc-500 mt-1">A: 不同的功能需要不同的管理员角色（如歌曲管理员、超级管理员），请联系超级管理员调整您的角色权限。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CheckCircle2, CalendarDays, Mic2, HelpCircle } from '@lucide/vue'
</script>

<style scoped>
/* 可以在此添加特定样式 */
</style>