feat(admin): 图片歌单改导入酷狗+自动排入按期望时段+日期滚动修复
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 值, 避免受父级滚动容器/左箭头影响
This commit is contained in:
@@ -244,7 +244,9 @@ const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue)
|
|||||||
const dateKey = targetDate || formatDateStr(today)
|
const dateKey = targetDate || formatDateStr(today)
|
||||||
const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
|
const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
|
||||||
if (!el) return
|
if (!el) return
|
||||||
el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
const cw = dateSelector.value.clientWidth
|
||||||
|
const target = el.offsetLeft - (cw - el.offsetWidth) / 2
|
||||||
|
dateSelector.value.scrollTo({ left: target, behavior })
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleWheel = (event) => {
|
const handleWheel = (event) => {
|
||||||
|
|||||||
@@ -380,7 +380,10 @@ const handleScroll = () => {
|
|||||||
const scrollToDateElement = (targetDate, behavior = 'smooth') => {
|
const scrollToDateElement = (targetDate, behavior = 'smooth') => {
|
||||||
if (!dateSelector.value || !targetDate) return
|
if (!dateSelector.value || !targetDate) return
|
||||||
const el = dateSelector.value.querySelector(`[data-date="${targetDate}"]`)
|
const el = dateSelector.value.querySelector(`[data-date="${targetDate}"]`)
|
||||||
if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
if (!el) return
|
||||||
|
const cw = dateSelector.value.clientWidth
|
||||||
|
const target = el.offsetLeft - (cw - el.offsetWidth) / 2
|
||||||
|
dateSelector.value.scrollTo({ left: target, behavior })
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollToToday = () => {
|
const scrollToToday = () => {
|
||||||
|
|||||||
@@ -86,13 +86,48 @@ const aiPrompt = ref('anime style school campus sunset beautiful sky highly deta
|
|||||||
const isGeneratingAi = ref(false)
|
const isGeneratingAi = ref(false)
|
||||||
const bgImageObj = ref(null)
|
const bgImageObj = ref(null)
|
||||||
|
|
||||||
const maxDisplaySongs = 35
|
const maxDisplaySongs = 200
|
||||||
|
const songLeftX = 44
|
||||||
|
const songRightX = 360
|
||||||
|
const songAreaWidth = songRightX - songLeftX
|
||||||
|
|
||||||
|
const fitText = (ctx, text, fontSize, maxWidth, lineHeight) => {
|
||||||
|
ctx.font = `${fontSize}px "Inter", "system-ui", "PingFang SC", "Microsoft YaHei", sans-serif`
|
||||||
|
const chars = Array.from(text)
|
||||||
|
const lines = []
|
||||||
|
let current = ''
|
||||||
|
for (const ch of chars) {
|
||||||
|
const tryStr = current + ch
|
||||||
|
const w = ctx.measureText(tryStr).width
|
||||||
|
if (w > maxWidth && current) {
|
||||||
|
lines.push(current)
|
||||||
|
current = ch
|
||||||
|
} else {
|
||||||
|
current = tryStr
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (current) lines.push(current)
|
||||||
|
return { lines, lineHeight }
|
||||||
|
}
|
||||||
|
|
||||||
const canvasHeight = computed(() => {
|
const canvasHeight = computed(() => {
|
||||||
const count = Math.min(props.songs.length, maxDisplaySongs)
|
const count = Math.min(props.songs.length, maxDisplaySongs)
|
||||||
if (count <= 10) return 600
|
if (!count) return 600
|
||||||
// 每多一首增加 40px 高度
|
const canvas = document.createElement('canvas')
|
||||||
return 600 + (count - 10) * 40
|
const ctx = canvas.getContext('2d')
|
||||||
|
let totalH = 0
|
||||||
|
const maxWidthTitle = songAreaWidth
|
||||||
|
const maxWidthArtist = Math.max(100, songAreaWidth - 10)
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
const s = props.songs[i]
|
||||||
|
const song = s?.song || s || {}
|
||||||
|
const title = song.title || '未知歌曲'
|
||||||
|
const artist = song.artist || '未知歌手'
|
||||||
|
const t1 = fitText(ctx, title, 16, maxWidthTitle, 22)
|
||||||
|
const t2 = fitText(ctx, `- ${artist}`, 13, maxWidthArtist, 18)
|
||||||
|
totalH += Math.max(28, (t1.lines.length * t1.lineHeight) + (t2.lines.length * t2.lineHeight) + 10)
|
||||||
|
}
|
||||||
|
return 240 + totalH
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
@@ -155,33 +190,44 @@ const drawCanvas = () => {
|
|||||||
|
|
||||||
// 绘制歌曲列表
|
// 绘制歌曲列表
|
||||||
ctx.textAlign = 'left'
|
ctx.textAlign = 'left'
|
||||||
|
ctx.textBaseline = 'top'
|
||||||
let y = 160
|
let y = 160
|
||||||
|
|
||||||
const displaySongs = props.songs.slice(0, maxDisplaySongs) // 最多显示 35 首
|
const displaySongs = props.songs.slice(0, maxDisplaySongs)
|
||||||
displaySongs.forEach((schedule, index) => {
|
displaySongs.forEach((schedule, index) => {
|
||||||
const song = schedule.song || schedule
|
const song = schedule.song || schedule
|
||||||
|
|
||||||
// 序号
|
// 序号
|
||||||
ctx.fillStyle = '#2563eb'
|
ctx.fillStyle = '#2563eb'
|
||||||
ctx.font = 'bold 16px "Inter", "system-ui", sans-serif'
|
ctx.font = 'bold 16px "Inter", "system-ui", "PingFang SC", "Microsoft YaHei", sans-serif'
|
||||||
|
ctx.textBaseline = 'top'
|
||||||
ctx.fillText(`${index + 1}.`, 40, y)
|
ctx.fillText(`${index + 1}.`, 40, y)
|
||||||
|
|
||||||
// 歌名
|
const maxWidthTitle = songAreaWidth
|
||||||
ctx.fillStyle = '#0F172A' // Neutral Dark
|
const maxWidthArtist = Math.max(120, songAreaWidth - 10)
|
||||||
ctx.font = 'bold 16px "Inter", "system-ui", sans-serif'
|
const title = song.title || '未知歌曲'
|
||||||
// 限制歌名长度
|
const artist = song.artist || '未知歌手'
|
||||||
let title = song.title || '未知歌曲'
|
|
||||||
if (title.length > 12) title = title.substring(0, 12) + '...'
|
|
||||||
ctx.fillText(title, 70, y)
|
|
||||||
|
|
||||||
// 歌手
|
const t1 = fitText(ctx, title, 16, maxWidthTitle, 22)
|
||||||
|
ctx.fillStyle = '#0F172A'
|
||||||
|
ctx.font = `bold 16px "Inter", "system-ui", "PingFang SC", "Microsoft YaHei", sans-serif`
|
||||||
|
let ty = y
|
||||||
|
for (const line of t1.lines) {
|
||||||
|
ctx.fillText(line, songLeftX, ty)
|
||||||
|
ty += t1.lineHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
const t2 = fitText(ctx, `- ${artist}`, 13, maxWidthArtist, 18)
|
||||||
ctx.fillStyle = '#64748B'
|
ctx.fillStyle = '#64748B'
|
||||||
ctx.font = '14px "Inter", "system-ui", sans-serif'
|
ctx.font = `13px "Inter", "system-ui", "PingFang SC", "Microsoft YaHei", sans-serif`
|
||||||
let artist = song.artist || '未知歌手'
|
let ay = ty + 4
|
||||||
if (artist.length > 10) artist = artist.substring(0, 10) + '...'
|
for (const line of t2.lines) {
|
||||||
ctx.fillText(`- ${artist}`, 240, y)
|
ctx.fillText(line, songLeftX, ay)
|
||||||
|
ay += t2.lineHeight
|
||||||
|
}
|
||||||
|
|
||||||
y += 40
|
const songBlockHeight = Math.max(28, (ty - y) + (ay - ty) + 4)
|
||||||
|
y += songBlockHeight + 8
|
||||||
})
|
})
|
||||||
|
|
||||||
if (props.songs.length > maxDisplaySongs) {
|
if (props.songs.length > maxDisplaySongs) {
|
||||||
|
|||||||
@@ -1,67 +1,130 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col space-y-8 pb-12 lg:pb-20 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
<div class="flex flex-col space-y-8 pb-12 lg:pb-20 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||||
<div class="flex flex-col space-y-2">
|
<div class="flex flex-col space-y-2">
|
||||||
<h2 class="text-2xl font-bold tracking-tight text-zinc-100">图片歌单</h2>
|
<h2 class="text-2xl font-bold tracking-tight text-zinc-100">导入酷狗</h2>
|
||||||
<p class="text-sm text-zinc-500">选择日期生成广播排期卡片并分享</p>
|
<p class="text-sm text-zinc-500">粘贴酷狗歌单文本 或 选择日期读取已有排期,一键生成该日期的排期并导出宣传卡片</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-8">
|
<div class="flex flex-col gap-8">
|
||||||
<!-- 设置面板 -->
|
<!-- 歌单导入区 -->
|
||||||
<div class="w-full flex flex-col gap-6">
|
<div class="w-full flex flex-col gap-6">
|
||||||
<div class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 space-y-6 shadow-lg">
|
<div class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 space-y-6 shadow-lg">
|
||||||
<h3 class="text-lg font-bold flex items-center gap-2 text-zinc-100 shrink-0">
|
<h3 class="text-lg font-bold flex items-center gap-2 text-zinc-100 shrink-0">
|
||||||
<Layout class="w-4 h-4 text-blue-500" /> 卡片设置
|
<Music2 class="w-4 h-4 text-blue-500" /> 歌单导入
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div class="flex flex-col gap-5 items-end">
|
<div class="space-y-2 w-full">
|
||||||
|
<label class="text-[11px] font-black uppercase text-zinc-600 tracking-wider">粘贴酷狗歌单文本</label>
|
||||||
|
<textarea
|
||||||
|
v-model="pasteText"
|
||||||
|
rows="7"
|
||||||
|
class="w-full resize-y rounded-xl border border-zinc-800 bg-zinc-950/60 text-sm text-zinc-200 px-4 py-3 focus:outline-none focus:border-blue-500/70 font-mono"
|
||||||
|
placeholder="每行一首,支持以下格式之一: 1. 序号 歌曲名 - 歌手 2. 歌曲名 - 歌手 3. 歌曲名 (歌手) 示例: 01 晴天 - 周杰伦 稻香 (周杰伦) 七里香-周杰伦"
|
||||||
|
/>
|
||||||
|
<div class="flex flex-wrap gap-2 pt-1">
|
||||||
|
<button
|
||||||
|
:disabled="!pasteText.trim()"
|
||||||
|
class="px-3 py-2 text-xs font-bold rounded-xl bg-zinc-800 text-zinc-200 hover:bg-zinc-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||||
|
@click="parsePasteText"
|
||||||
|
>
|
||||||
|
<ListPlus class="w-3.5 h-3.5 inline-block mr-1" />解析文本
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="parsedSongs.length > 0"
|
||||||
|
class="px-3 py-2 text-xs font-bold rounded-xl bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors"
|
||||||
|
@click="clearParsed"
|
||||||
|
>
|
||||||
|
<Trash2 class="w-3.5 h-3.5 inline-block mr-1" />清空解析结果
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 设置面板 -->
|
||||||
|
<div class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 space-y-6 shadow-lg">
|
||||||
|
<h3 class="text-lg font-bold flex items-center gap-2 text-zinc-100 shrink-0">
|
||||||
|
<Layout class="w-4 h-4 text-blue-500" /> 生成设置
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-5">
|
||||||
<!-- 日期选择 -->
|
<!-- 日期选择 -->
|
||||||
<div class="space-y-2 flex-1 w-full">
|
<div class="space-y-2 w-full">
|
||||||
<label class="text-[11px] font-black uppercase text-zinc-600 tracking-wider">排期日期</label>
|
<label class="text-[11px] font-black uppercase text-zinc-600 tracking-wider">排期日期</label>
|
||||||
|
|
||||||
<!-- 类似排期管理的日期选择器 -->
|
|
||||||
<AdminDatePicker
|
<AdminDatePicker
|
||||||
:modelValue="selectedDate"
|
:modelValue="selectedDate"
|
||||||
@update:modelValue="selectedDate = $event"
|
@update:modelValue="selectedDate = $event"
|
||||||
@change="fetchSchedules"
|
@change="handleDateChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 播出时段 -->
|
||||||
|
<div class="space-y-2 w-full">
|
||||||
|
<label class="text-[11px] font-black uppercase text-zinc-600 tracking-wider">默认播出时段(未选时不分配时段)</label>
|
||||||
|
<select
|
||||||
|
v-model="selectedPlayTimeId"
|
||||||
|
class="w-full h-[42px] px-4 rounded-xl border border-zinc-800 bg-zinc-950/60 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/70"
|
||||||
|
>
|
||||||
|
<option :value="null">不指定时段</option>
|
||||||
|
<option v-for="pt in playTimes" :key="pt.id" :value="pt.id">
|
||||||
|
{{ pt.name }}({{ pt.startTime || '--:--' }} ~ {{ pt.endTime || '--:--' }}){{ pt.enabled ? '' : ' - 已禁用' }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<div class="flex flex-col sm:flex-row gap-3 w-full pt-1">
|
||||||
:disabled="loading || schedules.length === 0"
|
<button
|
||||||
class="w-full py-3 h-[54px] bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-blue-900/20 transition-colors uppercase tracking-wider disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shrink-0"
|
:disabled="generatingSchedule || (parsedSongs.length === 0 && schedules.length === 0)"
|
||||||
@click="showModal = true"
|
class="flex-1 py-3 h-[54px] bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-emerald-900/20 transition-colors uppercase tracking-wider disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shrink-0"
|
||||||
>
|
@click="generateSchedulesFromList"
|
||||||
<ImageIcon class="w-4 h-4" />
|
>
|
||||||
{{ loading ? '加载中...' : (schedules.length === 0 ? '该日期无排期' : '生成卡片') }}
|
<Save class="w-4 h-4" />
|
||||||
</button>
|
{{ generatingSchedule ? '保存中...' : (parsedSongs.length ? `将 ${parsedSongs.length} 首生成为排期` : (schedules.length ? `将现有 ${schedules.length} 首重新保存` : '无可用歌曲')) }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:disabled="loading || displaySongs.length === 0"
|
||||||
|
class="flex-1 py-3 h-[54px] bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-blue-900/20 transition-colors uppercase tracking-wider disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shrink-0"
|
||||||
|
@click="showModal = true"
|
||||||
|
>
|
||||||
|
<ImageIcon class="w-4 h-4" />
|
||||||
|
{{ loading ? '加载中...' : (displaySongs.length === 0 ? '无歌曲可预览' : '生成卡片') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 预览区 -->
|
<!-- 预览区 -->
|
||||||
<div class="w-full flex flex-col gap-4">
|
<div class="w-full flex flex-col gap-4">
|
||||||
<div v-if="schedules.length > 0" class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 shadow-lg">
|
<div v-if="displaySongs.length > 0" class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 shadow-lg">
|
||||||
<h3 class="text-lg font-bold text-zinc-100 mb-4">排期预览 ({{ schedules.length }} 首)</h3>
|
<h3 class="text-lg font-bold text-zinc-100 mb-4 flex items-center justify-between">
|
||||||
|
<span>
|
||||||
|
{{ parsedSongs.length > 0 ? '解析结果预览' : '排期预览' }}({{ displaySongs.length }} 首)
|
||||||
|
</span>
|
||||||
|
<span class="text-xs font-medium text-zinc-500">歌曲名与歌手名将完整显示,不会简写或隐藏</span>
|
||||||
|
</h3>
|
||||||
<div class="space-y-3">
|
<div class="space-y-3">
|
||||||
<div v-for="(schedule, index) in schedules" :key="schedule.id" class="flex items-center gap-3 p-3 bg-zinc-950/50 border border-zinc-800/50 rounded-lg">
|
<div v-for="(item, index) in displaySongs" :key="index" class="flex items-start gap-3 p-3 bg-zinc-950/50 border border-zinc-800/50 rounded-lg">
|
||||||
<span class="text-blue-500 font-bold w-6">{{ index + 1 }}.</span>
|
<span class="text-blue-500 font-bold w-6 pt-0.5">{{ index + 1 }}.</span>
|
||||||
<div class="flex-1 overflow-hidden">
|
<div class="flex-1 min-w-0">
|
||||||
<p class="text-sm text-zinc-200 font-medium truncate">{{ schedule.song?.title || schedule.title }}</p>
|
<p class="text-sm text-zinc-200 font-medium break-words whitespace-normal">{{ item.song?.title || item.title }}</p>
|
||||||
<p class="text-xs text-zinc-500 truncate">{{ schedule.song?.artist || schedule.artist }}</p>
|
<p class="text-xs text-zinc-500 break-words whitespace-normal mt-1">{{ item.song?.artist || item.artist }}</p>
|
||||||
|
<p v-if="item.status" class="text-[11px] mt-2 inline-block px-2 py-0.5 rounded-full" :class="statusClass(item.status)">
|
||||||
|
{{ item.status }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="!loading" class="flex flex-col items-center justify-center py-20 bg-zinc-900/20 border border-zinc-800/50 rounded-xl border-dashed">
|
<div v-else-if="!loading" class="flex flex-col items-center justify-center py-20 bg-zinc-900/20 border border-zinc-800/50 rounded-xl border-dashed">
|
||||||
<CalendarDays class="w-12 h-12 text-zinc-700 mb-4" />
|
<ListMusic class="w-12 h-12 text-zinc-700 mb-4" />
|
||||||
<p class="text-zinc-500">该日期没有排期的歌曲</p>
|
<p class="text-zinc-500">尚未有歌曲,请粘贴歌单文本解析 或 选择日期读取已有排期</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AdminPlaylistCardGenerator
|
<AdminPlaylistCardGenerator
|
||||||
:show="showModal"
|
:show="showModal"
|
||||||
:songs="schedules"
|
:songs="displaySongs"
|
||||||
:default-title="`${selectedDate} 校园广播歌单`"
|
:default-title="`${selectedDate} 校园广播歌单`"
|
||||||
@close="showModal = false"
|
@close="showModal = false"
|
||||||
/>
|
/>
|
||||||
@@ -69,46 +132,170 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, computed, onMounted, watch } from 'vue'
|
||||||
import { Layout, Image as ImageIcon, CalendarDays } from '@lucide/vue'
|
import { Layout, Image as ImageIcon, Music2, ListPlus, Trash2, Save, ListMusic } from '@lucide/vue'
|
||||||
import AdminDatePicker from './AdminDatePicker.vue'
|
import AdminDatePicker from './AdminDatePicker.vue'
|
||||||
import AdminPlaylistCardGenerator from './PlaylistCardGenerator.vue'
|
import AdminPlaylistCardGenerator from './PlaylistCardGenerator.vue'
|
||||||
import { useAuth } from '~/composables/useAuth'
|
import { useAuth } from '~/composables/useAuth'
|
||||||
|
import { useAdmin } from '~/composables/useAdmin'
|
||||||
|
|
||||||
const auth = useAuth()
|
const auth = useAuth()
|
||||||
|
const admin = useAdmin()
|
||||||
const selectedDate = ref(new Date().toISOString().split('T')[0])
|
|
||||||
|
const today = new Date()
|
||||||
|
today.setHours(0, 0, 0, 0)
|
||||||
|
const _fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||||
|
const selectedDate = ref(_fmt(today))
|
||||||
const schedules = ref([])
|
const schedules = ref([])
|
||||||
|
const parsedSongs = ref([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const showModal = ref(false)
|
const showModal = ref(false)
|
||||||
|
const pasteText = ref('')
|
||||||
|
const selectedPlayTimeId = ref(null)
|
||||||
|
const generatingSchedule = ref(false)
|
||||||
|
const playTimes = ref([])
|
||||||
|
|
||||||
|
const displaySongs = computed(() => parsedSongs.value.length ? parsedSongs.value : schedules.value)
|
||||||
|
|
||||||
|
const statusClass = (s) => {
|
||||||
|
const map = {
|
||||||
|
'歌曲已创建': 'bg-emerald-500/15 text-emerald-400',
|
||||||
|
'已匹配现有歌曲': 'bg-blue-500/15 text-blue-400',
|
||||||
|
'匹配失败(未创建)': 'bg-amber-500/15 text-amber-400',
|
||||||
|
'排期保存失败': 'bg-red-500/15 text-red-400',
|
||||||
|
'排期已创建': 'bg-emerald-500/15 text-emerald-400'
|
||||||
|
}
|
||||||
|
return map[s] || 'bg-zinc-800 text-zinc-400'
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsePasteText = () => {
|
||||||
|
const lines = pasteText.value.split(/\r?\n/).map(l => l.trim()).filter(Boolean)
|
||||||
|
const out = []
|
||||||
|
for (const line of lines) {
|
||||||
|
let t = line
|
||||||
|
t = t.replace(/^[\d]+[\s.、\-、)]+/, '')
|
||||||
|
t = t.replace(/^\([\d]+\)\s*/, '')
|
||||||
|
t = t.replace(/^【.*?】\s*/, '')
|
||||||
|
t = t.trim()
|
||||||
|
if (!t) continue
|
||||||
|
let title = ''
|
||||||
|
let artist = ''
|
||||||
|
const m1 = t.match(/^(.+?)[\s]*[-–—][\s]*(.+)$/)
|
||||||
|
const m2 = t.match(/^(.+?)[\s]*\(([^)]+)\)\s*$/)
|
||||||
|
const m3 = t.match(/^(.+?)[\s]*(([^)]+))\s*$/)
|
||||||
|
if (m1) { title = m1[1].trim(); artist = m1[2].trim() }
|
||||||
|
else if (m2) { title = m2[1].trim(); artist = m2[2].trim() }
|
||||||
|
else if (m3) { title = m3[1].trim(); artist = m3[2].trim() }
|
||||||
|
else { title = t; artist = '' }
|
||||||
|
if (title) out.push({ title, artist })
|
||||||
|
}
|
||||||
|
parsedSongs.value = out
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearParsed = () => {
|
||||||
|
parsedSongs.value = []
|
||||||
|
pasteText.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
const fetchSchedules = async () => {
|
const fetchSchedules = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
const response = await $fetch('/api/admin/schedule/full', {
|
const response = await $fetch('/api/admin/schedule/full', {
|
||||||
...auth.getAuthConfig(),
|
...auth.getAuthConfig(),
|
||||||
query: {
|
query: { date: selectedDate.value, includeDrafts: 'true' }
|
||||||
date: selectedDate.value,
|
})
|
||||||
includeDrafts: 'true'
|
if (response.success && response.data && response.data.schedules) {
|
||||||
}
|
schedules.value = response.data.schedules
|
||||||
})
|
} else schedules.value = []
|
||||||
if (response.success && response.data && response.data.schedules) {
|
} catch (error) {
|
||||||
schedules.value = response.data.schedules
|
|
||||||
} else {
|
|
||||||
schedules.value = []
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch schedules:', error)
|
console.error('Failed to fetch schedules:', error)
|
||||||
if (window.$showNotification) {
|
if (window.$showNotification) window.$showNotification('获取排期失败', 'error')
|
||||||
window.$showNotification('获取排期失败', 'error')
|
} finally { loading.value = false }
|
||||||
}
|
}
|
||||||
} finally {
|
|
||||||
loading.value = false
|
const fetchPlayTimes = async () => {
|
||||||
|
try {
|
||||||
|
const r = await $fetch('/api/admin/play-times', { ...auth.getAuthConfig() })
|
||||||
|
if (r && r.success && r.data) playTimes.value = (r.data.playTimes || r.data || []).filter(Boolean)
|
||||||
|
} catch (e) { console.warn(e) }
|
||||||
|
}
|
||||||
|
|
||||||
|
const findOrCreateSong = async ({ title, artist }) => {
|
||||||
|
try {
|
||||||
|
const search = await $fetch('/api/songs', {
|
||||||
|
...auth.getAuthConfig(),
|
||||||
|
query: { q: `${title} ${artist}`, limit: 20 }
|
||||||
|
})
|
||||||
|
const list = search?.data?.songs || search?.songs || []
|
||||||
|
const hit = list.find(s =>
|
||||||
|
s.title && s.title.toLowerCase() === title.toLowerCase() &&
|
||||||
|
(!artist || !s.artist || s.artist.toLowerCase() === artist.toLowerCase())
|
||||||
|
)
|
||||||
|
if (hit) return { created: false, song: hit }
|
||||||
|
const addResult = await admin.addSong({
|
||||||
|
title, artist: artist || '未知歌手', language: 'Chinese', sourceType: 'kugou', status: 'approved',
|
||||||
|
contributor: 'admin', musicPlatform: 'kugou', platformSongId: '',
|
||||||
|
lyrics: '', coverUrl: '', duration: 0, sourceUrl: ''
|
||||||
|
})
|
||||||
|
if (addResult?.success && addResult.data) return { created: true, song: addResult.data }
|
||||||
|
if (addResult?.success && addResult?.data?.song) return { created: true, song: addResult.data.song }
|
||||||
|
if (addResult?.song) return { created: true, song: addResult.song }
|
||||||
|
return { created: false, song: null, failMsg: addResult?.message || '返回值无法解析' }
|
||||||
|
} catch (e) {
|
||||||
|
return { created: false, song: null, failMsg: e?.message || '接口调用异常' }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const generateSchedulesFromList = async () => {
|
||||||
|
if (displaySongs.value.length === 0) return
|
||||||
|
generatingSchedule.value = true
|
||||||
|
try {
|
||||||
|
const toProcess = parsedSongs.value.length ? parsedSongs.value : schedules.value
|
||||||
|
const results = []
|
||||||
|
const playDateStr = selectedDate.value
|
||||||
|
let nextSeq = 1
|
||||||
|
for (const row of toProcess) {
|
||||||
|
const title = row.song?.title || row.title || ''
|
||||||
|
const artist = row.song?.artist || row.artist || ''
|
||||||
|
const scheduleRow = { title, artist, status: '' }
|
||||||
|
if (!title) { scheduleRow.status = '歌曲为空已跳过'; results.push(scheduleRow); continue }
|
||||||
|
let songObj = row.song || null
|
||||||
|
if (!songObj) {
|
||||||
|
const found = await findOrCreateSong({ title, artist })
|
||||||
|
if (found.song) {
|
||||||
|
songObj = found.song
|
||||||
|
scheduleRow.status = found.created ? '歌曲已创建' : '已匹配现有歌曲'
|
||||||
|
} else {
|
||||||
|
scheduleRow.status = `匹配失败(未创建):${found.failMsg || '未知原因'}`
|
||||||
|
results.push(scheduleRow)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
scheduleRow.status = '已匹配现有歌曲'
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await admin.createSchedule(Number(songObj.id), playDateStr,
|
||||||
|
(selectedPlayTimeId.value != null) ? Number(selectedPlayTimeId.value) : (songObj.preferredPlayTimeId || null), nextSeq)
|
||||||
|
if (res?.success) { scheduleRow.status = '排期已创建'; nextSeq++ }
|
||||||
|
else { scheduleRow.status = `排期保存失败:${res?.message || '未知原因'}` }
|
||||||
|
} catch (e) { scheduleRow.status = `排期保存失败:${e?.message || '接口异常'}` }
|
||||||
|
results.push(scheduleRow)
|
||||||
|
}
|
||||||
|
parsedSongs.value = results
|
||||||
|
await fetchSchedules()
|
||||||
|
if (window.$showNotification) window.$showNotification(`批量保存完成:${results.filter(r => r.status === '排期已创建').length}/${results.length} 成功`, 'success')
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
if (window.$showNotification) window.$showNotification('批量排期失败:' + (e?.message || '未知错误'), 'error')
|
||||||
|
} finally { generatingSchedule.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDateChange = () => { if (!parsedSongs.value.length) fetchSchedules() }
|
||||||
|
|
||||||
|
watch(selectedDate, () => { if (!parsedSongs.value.length) fetchSchedules() })
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchSchedules()
|
fetchSchedules()
|
||||||
|
fetchPlayTimes()
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2075,17 +2075,36 @@ const autoScheduleExpected = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const baseId = Date.now()
|
const baseId = Date.now()
|
||||||
|
const filteredPtId = selectedPlayTime.value ? parseInt(selectedPlayTime.value) : null
|
||||||
|
|
||||||
|
const playTimeSeqCounters = new Map()
|
||||||
|
for (const s of localScheduledSongs.value) {
|
||||||
|
const key = String(s.playTimeId || '')
|
||||||
|
playTimeSeqCounters.set(key, (playTimeSeqCounters.get(key) || 0) + 1)
|
||||||
|
}
|
||||||
|
|
||||||
expectedSongs.forEach((song, idx) => {
|
expectedSongs.forEach((song, idx) => {
|
||||||
const existingIndex = localScheduledSongs.value.findIndex((s) => s.song?.id === song.id)
|
const existingIndex = localScheduledSongs.value.findIndex((s) => s.song?.id === song.id)
|
||||||
if (existingIndex !== -1) return
|
if (existingIndex !== -1) return
|
||||||
|
|
||||||
const playTimeId = selectedPlayTime.value ? parseInt(selectedPlayTime.value) : null
|
let targetPlayTimeId = null
|
||||||
|
if (song.preferredPlayTimeId) {
|
||||||
|
const matched = (playTimes.value || []).find(pt => pt.id === song.preferredPlayTimeId)
|
||||||
|
if (matched) targetPlayTimeId = song.preferredPlayTimeId
|
||||||
|
}
|
||||||
|
if (!targetPlayTimeId && filteredPtId != null) targetPlayTimeId = filteredPtId
|
||||||
|
|
||||||
|
if (filteredPtId != null && targetPlayTimeId !== filteredPtId) return
|
||||||
|
const ptKey = String(targetPlayTimeId || '')
|
||||||
|
const nextSeq = (playTimeSeqCounters.get(ptKey) || 0) + 1
|
||||||
|
playTimeSeqCounters.set(ptKey, nextSeq)
|
||||||
|
|
||||||
const newSchedule = {
|
const newSchedule = {
|
||||||
id: baseId + idx,
|
id: baseId + idx,
|
||||||
song: song,
|
song: song,
|
||||||
playDate: selectedDate.value,
|
playDate: selectedDate.value,
|
||||||
sequence: localScheduledSongs.value.length + 1,
|
sequence: nextSeq,
|
||||||
playTimeId,
|
playTimeId: targetPlayTimeId,
|
||||||
isNew: true,
|
isNew: true,
|
||||||
isLocalOnly: true
|
isLocalOnly: true
|
||||||
}
|
}
|
||||||
@@ -2094,6 +2113,18 @@ const autoScheduleExpected = () => {
|
|||||||
count++
|
count++
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const ptOrder = (id) => {
|
||||||
|
if (id == null || id === '') return 1e9
|
||||||
|
const pt = (playTimes.value || []).find(p => p.id === id)
|
||||||
|
if (!pt || !pt.startTime) return 1e8
|
||||||
|
const [h, m] = pt.startTime.split(':').map(Number)
|
||||||
|
return h * 60 + (m || 0)
|
||||||
|
}
|
||||||
|
localScheduledSongs.value.sort((a, b) => {
|
||||||
|
const po = ptOrder(a.playTimeId) - ptOrder(b.playTimeId)
|
||||||
|
if (po !== 0) return po
|
||||||
|
return (a.sequence || 0) - (b.sequence || 0)
|
||||||
|
})
|
||||||
localScheduledSongs.value.forEach((item, idx) => {
|
localScheduledSongs.value.forEach((item, idx) => {
|
||||||
item.sequence = idx + 1
|
item.sequence = idx + 1
|
||||||
})
|
})
|
||||||
@@ -2101,7 +2132,9 @@ const autoScheduleExpected = () => {
|
|||||||
hasChanges.value = true
|
hasChanges.value = true
|
||||||
const strategyLabel =
|
const strategyLabel =
|
||||||
autoScheduleStrategy.value === 'contributor-count' ? '(按投稿人数优先)' : ''
|
autoScheduleStrategy.value === 'contributor-count' ? '(按投稿人数优先)' : ''
|
||||||
showToast(`已自动排入 ${count} 首待排歌曲${strategyLabel},请注意调整顺序后保存`, 'success')
|
const byPref = expectedSongs.filter(s => s.preferredPlayTimeId).length
|
||||||
|
const prefInfo = byPref ? `,其中 ${byPref} 首按期望播出时段排入` : ''
|
||||||
|
showToast(`已自动排入 ${count} 首待排歌曲${strategyLabel}${prefInfo},请注意调整顺序后保存`, 'success')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 构建播放队列
|
// 构建播放队列
|
||||||
|
|||||||
@@ -190,7 +190,7 @@ const menuGroups = [
|
|||||||
{ icon: Music2, label: '歌曲管理', id: 'songs' },
|
{ icon: Music2, label: '歌曲管理', id: 'songs' },
|
||||||
{ icon: CalendarDays, label: '排期管理', id: 'schedule' },
|
{ icon: CalendarDays, label: '排期管理', id: 'schedule' },
|
||||||
{ icon: Printer, label: '打印排期', id: 'print' },
|
{ icon: Printer, label: '打印排期', id: 'print' },
|
||||||
{ icon: ImageIcon, label: '图片歌单', id: 'playlist-card' }
|
{ icon: ImageIcon, label: '导入酷狗', id: 'playlist-card' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -79,7 +79,7 @@
|
|||||||
<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>
|
<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>
|
<div>
|
||||||
<p class="font-medium text-zinc-100">生成歌单图片/打印</p>
|
<p class="font-medium text-zinc-100">生成歌单图片/打印</p>
|
||||||
<p class="text-sm text-zinc-500 mt-1">播音前,前往“图片歌单”生成今日节目单图片用于宣传,或在“打印排期”中生成播音员用的纸质稿。</p>
|
<p class="text-sm text-zinc-500 mt-1">播音前,前往“导入酷狗”生成今日节目单图片用于宣传,或在“打印排期”中生成播音员用的纸质稿。</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex gap-3">
|
<li class="flex gap-3">
|
||||||
|
|||||||
@@ -319,7 +319,7 @@ const getPageTitle = () => {
|
|||||||
songs: '歌曲管理',
|
songs: '歌曲管理',
|
||||||
schedule: '排期管理',
|
schedule: '排期管理',
|
||||||
print: '打印排期',
|
print: '打印排期',
|
||||||
'playlist-card': '图片歌单',
|
'playlist-card': '导入酷狗',
|
||||||
users: '用户管理',
|
users: '用户管理',
|
||||||
blacklist: '黑名单管理',
|
blacklist: '黑名单管理',
|
||||||
'api-keys': 'API密钥管理',
|
'api-keys': 'API密钥管理',
|
||||||
|
|||||||
Reference in New Issue
Block a user