Henry_Du
ac4727551c
1. 菜单重命名: 图片歌单 -> 导入酷狗 (Sidebar/Dashboard/教程 + 页面标题) 2. PlaylistCardPage(导入酷狗) 新增: - 粘贴酷狗歌单文本解析(支持序号/横杠/括号格式) - 预览区歌名与歌手名完整显示(去除truncate, 支持换行展示) - 选日期+选播出时段, 一键将解析后的歌曲(没找到则自动创建)生成为该日期的排期 - 批量保存后展示状态徽章(匹配/创建/失败) 3. PlaylistCardGenerator 画布: - 去除 substring(0,12)/substring(0,10) 截断, 改用 fitText 按 canvas 宽度逐字符换行切分 - canvas 高度根据实际行数动态计算, 最多支持 200 首 - 中文字体堆栈加入 PingFang SC/Microsoft YaHei 4. ScheduleManager.autoScheduleExpected: - 优先按歌曲自己的 preferredPlayTimeId(期望播出时段) 分组排入 - 未指定才 fallback 到顶部当前选中时段 - 分时段各自维护 sequence, 最后按时段 startTime 升序+分序 合并重排 - 顶部过滤了单时段时, 只排入匹配该时段的歌曲(含未指定fallback) 5. 日期滚动修复: - AdminDatePicker / AdminMultiDatePicker scrollToDateElement 弃用 scrollIntoView - 改用精确的 offsetLeft - (clientWidth-offsetWidth)/2 计算 scrollTo left 值, 避免受父级滚动容器/左箭头影响
127 lines
6.9 KiB
Vue
127 lines
6.9 KiB
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-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>
|