初次提交
This commit is contained in:
@@ -0,0 +1,126 @@
|
||||
<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-100">工作流与使用教程</h2>
|
||||
<p class="text-zinc-400">了解校园广播站点歌系统的标准操作流程和功能说明，帮助您更高效地管理点歌与排期。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- 歌曲管理流程 -->
|
||||
<div class="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 transition-colors">
|
||||
<div class="flex items-center gap-3 mb-4 text-blue-400">
|
||||
<CheckCircle2 class="w-6 h-6" />
|
||||
<h3 class="text-xl font-semibold">1. 歌曲管理与审核</h3>
|
||||
</div>
|
||||
<ol class="space-y-4 text-zinc-300">
|
||||
<li class="flex gap-3">
|
||||
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center text-sm font-bold">1</span>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-100">查看所有歌曲</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-400 flex items-center justify-center text-sm font-bold">2</span>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-100">试听与检查</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-400 flex items-center justify-center text-sm font-bold">3</span>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-100">拒绝或修改状态</p>
|
||||
<p class="text-sm text-zinc-500 mt-1">如不符合要求，可以在歌曲管理中拒绝该歌曲，并填写退回原因；审核通过的歌曲可直接用于排期。</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- 排期流程 -->
|
||||
<div class="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 transition-colors">
|
||||
<div class="flex items-center gap-3 mb-4 text-emerald-400">
|
||||
<CalendarDays class="w-6 h-6" />
|
||||
<h3 class="text-xl font-semibold">2. 节目排期流程</h3>
|
||||
</div>
|
||||
<ol class="space-y-4 text-zinc-300">
|
||||
<li class="flex gap-3">
|
||||
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-sm font-bold">1</span>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-100">选择日期与时段</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-400 flex items-center justify-center text-sm font-bold">2</span>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-100">拖拽编排</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-400 flex items-center justify-center text-sm font-bold">3</span>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-100">发布排期</p>
|
||||
<p class="text-sm text-zinc-500 mt-1">排期完成后，点击“发布排期”。发布后用户即可在前端页面看到该日期的节目单。</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- 播音流程 -->
|
||||
<div class="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 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-300">
|
||||
<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-100">生成歌单图片/打印</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-100">标记已播</p>
|
||||
<p class="text-sm text-zinc-500 mt-1">播音结束后，系统可自动/手动将排期内的歌曲标记为“已播”，方便统计数据。</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<div class="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 transition-colors">
|
||||
<div class="flex items-center gap-3 mb-4 text-amber-400">
|
||||
<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-200">Q: 为什么找不到某些待排歌曲？</h4>
|
||||
<p class="text-sm text-zinc-500 mt-1">A: 请检查是否在排期页面的左侧选错了标签（如普通投稿/重播申请），或者该歌曲还未通过审核。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-zinc-200">Q: 什么是选曲日期？</h4>
|
||||
<p class="text-sm text-zinc-500 mt-1">A: 选曲日期是用户在点歌时可选择的期望播放日期。请在“选曲日期”设置中提前开放可用的日期。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-zinc-200">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>
|
||||
Reference in New Issue
Block a user