feat(admin): 恢复按日期生成排期图片,重构多项体验问题
- **导入酷狗功能恢复**:废弃纯文本解析,重写为通过多选日期加载对应排期,并支持“根据日期分别生成图片”的场景。 - **浅色打印主题**:在 SchedulePrinter 和 ScheduleItemPrint 中应用 !important 强制白底黑字,消除系统深色模式对预览与打印效果的干扰。 - **日期选择器精简**:彻底删除 AdminDatePicker 和 AdminMultiDatePicker 中的横向日期盘滚动功能,改用直观的选定日期展示,配合月历面板实现更稳定快捷的选择。 - **自动排入逻辑修复**:严格过滤并匹配歌曲的 `expectedPlayDate` 和 `preferredPlayTimeId`,修复无期望播出时间的歌曲被错误填入的问题。
This commit is contained in:
@@ -1,58 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative bg-zinc-900/50 border border-zinc-800/50 rounded-2xl p-1 overflow-hidden">
|
<div class="relative bg-zinc-900/50 border border-zinc-800/50 rounded-2xl p-1 overflow-hidden">
|
||||||
<!-- 横向日期选择条 -->
|
<!-- 简化版日期选择显示 -->
|
||||||
<div class="flex items-center" @touchstart.stop>
|
<div class="flex items-center justify-between px-3 py-2" @click="toggleCalendar" style="cursor: pointer">
|
||||||
<button
|
<div class="flex items-center gap-3">
|
||||||
:disabled="isFirstDateVisible"
|
<div class="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-blue-600 text-white shadow-lg shadow-blue-900/20">
|
||||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors shrink-0"
|
<span class="text-[10px] font-bold uppercase tracking-wider opacity-80">{{ getWeekday(modelValue) }}</span>
|
||||||
@click="scrollDates('left')"
|
<span class="text-lg font-black leading-none my-0.5">{{ getDay(modelValue) }}</span>
|
||||||
>
|
</div>
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15,18 9,12 15,6" /></svg>
|
<div class="flex flex-col">
|
||||||
</button>
|
<span class="text-sm font-bold text-zinc-200">{{ modelValue }}</span>
|
||||||
|
<span class="text-xs text-zinc-500 font-medium">{{ isToday(modelValue) ? '今天' : '' }}</span>
|
||||||
<div
|
</div>
|
||||||
ref="dateSelector"
|
|
||||||
class="flex-1 flex overflow-x-auto scrollbar-hide gap-2 px-2 py-1 scroll-smooth overscroll-x-contain shrink-0"
|
|
||||||
style="overscroll-behavior-x: contain; touch-action: pan-x"
|
|
||||||
@wheel="handleWheel"
|
|
||||||
@scroll="handleScroll"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
v-for="date in availableDates"
|
|
||||||
:key="date.value"
|
|
||||||
:data-date="date.value"
|
|
||||||
:class="[
|
|
||||||
'flex flex-col items-center justify-center min-w-[64px] h-16 rounded-lg transition-all duration-200 border shrink-0',
|
|
||||||
modelValue === date.value
|
|
||||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/20'
|
|
||||||
: 'bg-zinc-900 border-zinc-800 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300 hover:border-zinc-700',
|
|
||||||
date.isToday && modelValue !== date.value ? 'ring-1 ring-emerald-500/50' : ''
|
|
||||||
]"
|
|
||||||
@click="selectDate(date.value)"
|
|
||||||
>
|
|
||||||
<span class="text-[10px] font-bold uppercase tracking-wider opacity-80">{{ date.weekday }}</span>
|
|
||||||
<span class="text-lg font-black leading-none my-0.5">{{ date.day }}</span>
|
|
||||||
<span class="text-[9px] font-bold opacity-60">{{ date.month }}月</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<div class="flex items-center border-l border-zinc-800 pl-3">
|
||||||
:disabled="isLastDateVisible"
|
<button class="p-2 text-zinc-500 hover:text-emerald-400 transition-colors" title="跳转到今天" @click.stop="scrollToToday">
|
||||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors shrink-0"
|
|
||||||
@click="scrollDates('right')"
|
|
||||||
>
|
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9,18 15,12 9,6" /></svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex items-center border-l border-zinc-800 ml-1 pl-1 shrink-0">
|
|
||||||
<button class="p-2 text-zinc-500 hover:text-emerald-400 transition-colors" title="跳转到今天" @click="scrollToToday">
|
|
||||||
<CircleDot class="w-5 h-5" />
|
<CircleDot class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="p-2 text-zinc-500 hover:text-blue-400 transition-colors"
|
class="p-2 text-zinc-500 hover:text-blue-400 transition-colors"
|
||||||
:class="{ 'text-blue-400': showCalendar }"
|
:class="{ 'text-blue-400': showCalendar }"
|
||||||
title="打开月历"
|
title="打开月历"
|
||||||
@click="toggleCalendar"
|
|
||||||
>
|
>
|
||||||
<CalendarIcon class="w-5 h-5" />
|
<CalendarIcon class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
@@ -166,10 +134,6 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'change'])
|
const emit = defineEmits(['update:modelValue', 'change'])
|
||||||
|
|
||||||
const dateSelector = ref(null)
|
|
||||||
const isFirstDateVisible = ref(false)
|
|
||||||
const isLastDateVisible = ref(false)
|
|
||||||
const dateRange = ref({ start: -10, end: 15 })
|
|
||||||
const showCalendar = ref(false)
|
const showCalendar = ref(false)
|
||||||
|
|
||||||
const pad = (n) => n.toString().padStart(2, '0')
|
const pad = (n) => n.toString().padStart(2, '0')
|
||||||
@@ -177,27 +141,30 @@ const formatDateStr = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
|
|||||||
const addDays = (d, n) => { const x = new Date(d); x.setHours(0, 0, 0, 0); x.setDate(x.getDate() + n); return x }
|
const addDays = (d, n) => { const x = new Date(d); x.setHours(0, 0, 0, 0); x.setDate(x.getDate() + n); return x }
|
||||||
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
|
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
|
||||||
|
|
||||||
|
const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
|
||||||
|
|
||||||
|
const getWeekday = (dateStr) => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const d = new Date(dateStr)
|
||||||
|
return weekdayNames[d.getDay()]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDay = (dateStr) => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const d = new Date(dateStr)
|
||||||
|
return d.getDate().toString().padStart(2, '0')
|
||||||
|
}
|
||||||
|
|
||||||
|
const isToday = (dateStr) => {
|
||||||
|
if (!dateStr) return false
|
||||||
|
const d = new Date(dateStr)
|
||||||
|
return sameDay(d, new Date())
|
||||||
|
}
|
||||||
|
|
||||||
const today = new Date(); today.setHours(0, 0, 0, 0)
|
const today = new Date(); today.setHours(0, 0, 0, 0)
|
||||||
const calendarYear = ref(today.getFullYear())
|
const calendarYear = ref(today.getFullYear())
|
||||||
const calendarMonth = ref(today.getMonth())
|
const calendarMonth = ref(today.getMonth())
|
||||||
|
|
||||||
const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
|
|
||||||
|
|
||||||
const availableDates = computed(() => {
|
|
||||||
const dates = []
|
|
||||||
for (let i = dateRange.value.start; i <= dateRange.value.end; i++) {
|
|
||||||
const date = addDays(today, i)
|
|
||||||
dates.push({
|
|
||||||
value: formatDateStr(date),
|
|
||||||
day: date.getDate().toString().padStart(2, '0'),
|
|
||||||
month: (date.getMonth() + 1).toString().padStart(2, '0'),
|
|
||||||
weekday: weekdayNames[date.getDay()],
|
|
||||||
isToday: i === 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return dates
|
|
||||||
})
|
|
||||||
|
|
||||||
const quickDates = computed(() => {
|
const quickDates = computed(() => {
|
||||||
const t = new Date(); t.setHours(0, 0, 0, 0)
|
const t = new Date(); t.setHours(0, 0, 0, 0)
|
||||||
const mk = (label, date) => ({ label, value: formatDateStr(date) })
|
const mk = (label, date) => ({ label, value: formatDateStr(date) })
|
||||||
@@ -237,63 +204,12 @@ const calendarCells = computed(() => {
|
|||||||
const selectDate = (dateValue) => {
|
const selectDate = (dateValue) => {
|
||||||
emit('update:modelValue', dateValue)
|
emit('update:modelValue', dateValue)
|
||||||
emit('change', dateValue)
|
emit('change', dateValue)
|
||||||
}
|
showCalendar.value = false
|
||||||
|
|
||||||
const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue) => {
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const dateKey = targetDate || formatDateStr(today)
|
|
||||||
const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
|
|
||||||
if (!el) return
|
|
||||||
const cw = dateSelector.value.clientWidth
|
|
||||||
const target = el.offsetLeft - (cw - el.offsetWidth) / 2
|
|
||||||
dateSelector.value.scrollTo({ left: target, behavior })
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleWheel = (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const scrollAmount = 160
|
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
|
||||||
dateSelector.value.scrollTo({
|
|
||||||
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollDates = (direction) => {
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const scrollAmount = 160
|
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
|
||||||
dateSelector.value.scrollTo({
|
|
||||||
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleScroll = () => {
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
|
||||||
if (scrollLeft < 100) {
|
|
||||||
const oldScrollWidth = scrollWidth
|
|
||||||
dateRange.value.start -= 5
|
|
||||||
nextTick(() => {
|
|
||||||
const newScrollWidth = dateSelector.value.scrollWidth
|
|
||||||
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (scrollWidth - scrollLeft - clientWidth < 100) {
|
|
||||||
dateRange.value.end += 5
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollToToday = () => {
|
const scrollToToday = () => {
|
||||||
const todayStr = formatDateStr(today)
|
const todayStr = formatDateStr(today)
|
||||||
if (props.modelValue !== todayStr) selectDate(todayStr)
|
if (props.modelValue !== todayStr) selectDate(todayStr)
|
||||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
|
||||||
dateRange.value.start = -10
|
|
||||||
dateRange.value.end = 15
|
|
||||||
}
|
|
||||||
nextTick(() => scrollToDateElement('smooth'))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleCalendar = () => {
|
const toggleCalendar = () => {
|
||||||
@@ -312,24 +228,7 @@ const goToday = () => {
|
|||||||
|
|
||||||
const handleQuickSelect = (dateValue) => {
|
const handleQuickSelect = (dateValue) => {
|
||||||
if (props.modelValue !== dateValue) selectDate(dateValue)
|
if (props.modelValue !== dateValue) selectDate(dateValue)
|
||||||
nextTick(() => {
|
|
||||||
const d = new Date(dateValue)
|
|
||||||
const diffDays = Math.round((d - today) / (1000 * 60 * 60 * 24))
|
|
||||||
if (diffDays < dateRange.value.start || diffDays > dateRange.value.end) {
|
|
||||||
dateRange.value.start = diffDays - 3
|
|
||||||
dateRange.value.end = diffDays + 5
|
|
||||||
}
|
}
|
||||||
nextTick(() => scrollToDateElement('smooth'))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(() => props.modelValue, () => {
|
|
||||||
nextTick(() => scrollToDateElement('smooth'))
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
nextTick(() => scrollToDateElement(props.modelValue ? 'auto' : 'smooth'))
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,64 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative bg-zinc-900/50 border border-zinc-800/50 rounded-2xl p-1 overflow-hidden">
|
<div class="relative bg-zinc-900/50 border border-zinc-800/50 rounded-2xl p-1 overflow-hidden">
|
||||||
<!-- 横向日期选择条 -->
|
<!-- 简化版多选日期显示 -->
|
||||||
<div class="flex items-center" @touchstart.stop>
|
<div class="flex items-center justify-between px-3 py-2" @click="toggleCalendar" style="cursor: pointer">
|
||||||
<button
|
<div class="flex items-center gap-3">
|
||||||
:disabled="isFirstDateVisible"
|
<div class="flex flex-col">
|
||||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors shrink-0"
|
<span class="text-sm font-bold text-zinc-200">
|
||||||
@click="scrollDates('left')"
|
已选择 {{ modelValue.length }} 天
|
||||||
>
|
</span>
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15,18 9,12 15,6" /></svg>
|
<span class="text-xs text-zinc-500 font-medium truncate max-w-[200px]">
|
||||||
</button>
|
{{ modelValue.join(', ') || '未选择日期' }}
|
||||||
|
</span>
|
||||||
<div
|
|
||||||
ref="dateSelector"
|
|
||||||
class="flex-1 flex overflow-x-auto scrollbar-hide gap-2 px-2 py-1 scroll-smooth overscroll-x-contain shrink-0"
|
|
||||||
style="overscroll-behavior-x: contain; touch-action: pan-x"
|
|
||||||
@wheel="handleWheel"
|
|
||||||
@scroll="handleScroll"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
v-for="date in availableDates"
|
|
||||||
:key="date.value"
|
|
||||||
:data-date="date.value"
|
|
||||||
:class="[
|
|
||||||
'flex flex-col items-center justify-center min-w-[64px] h-16 rounded-lg transition-all duration-200 border shrink-0 relative',
|
|
||||||
modelValue.includes(date.value)
|
|
||||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/20'
|
|
||||||
: 'bg-zinc-900 border-zinc-800 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300 hover:border-zinc-700',
|
|
||||||
date.isToday && !modelValue.includes(date.value) ? 'ring-1 ring-emerald-500/50' : ''
|
|
||||||
]"
|
|
||||||
@click="toggleDate(date.value, $event)"
|
|
||||||
>
|
|
||||||
<span class="text-[10px] font-bold uppercase tracking-wider opacity-80">{{ date.weekday }}</span>
|
|
||||||
<span class="text-lg font-black leading-none my-0.5">{{ date.day }}</span>
|
|
||||||
<span class="text-[9px] font-bold opacity-60">{{ date.month }}月</span>
|
|
||||||
<div
|
|
||||||
v-if="modelValue.includes(date.value)"
|
|
||||||
class="absolute top-1 right-1 w-3.5 h-3.5 rounded-full bg-white text-blue-600 flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12" /></svg>
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<div class="flex items-center border-l border-zinc-800 pl-3">
|
||||||
:disabled="isLastDateVisible"
|
<button class="p-2 text-zinc-500 hover:text-emerald-400 transition-colors" title="跳转到今天" @click.stop="scrollToToday">
|
||||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors shrink-0"
|
|
||||||
@click="scrollDates('right')"
|
|
||||||
>
|
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9,18 15,12 9,6" /></svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex items-center border-l border-zinc-800 ml-1 pl-1 shrink-0">
|
|
||||||
<button class="p-2 text-zinc-500 hover:text-emerald-400 transition-colors" title="跳转到今天" @click="scrollToToday">
|
|
||||||
<CircleDot class="w-5 h-5" />
|
<CircleDot class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="p-2 text-zinc-500 hover:text-blue-400 transition-colors"
|
class="p-2 text-zinc-500 hover:text-blue-400 transition-colors"
|
||||||
:class="{ 'text-blue-400': showCalendar }"
|
:class="{ 'text-blue-400': showCalendar }"
|
||||||
title="打开月历及批量选择"
|
title="打开月历"
|
||||||
@click="toggleCalendar"
|
|
||||||
>
|
>
|
||||||
<CalendarIcon class="w-5 h-5" />
|
<CalendarIcon class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
@@ -188,10 +150,6 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'change'])
|
const emit = defineEmits(['update:modelValue', 'change'])
|
||||||
|
|
||||||
const dateSelector = ref(null)
|
|
||||||
const isFirstDateVisible = ref(false)
|
|
||||||
const isLastDateVisible = ref(false)
|
|
||||||
const dateRange = ref({ start: -3, end: 38 })
|
|
||||||
const showCalendar = ref(false)
|
const showCalendar = ref(false)
|
||||||
const lastClickedDate = ref('')
|
const lastClickedDate = ref('')
|
||||||
|
|
||||||
@@ -207,21 +165,6 @@ const calendarMonth = ref(today.getMonth())
|
|||||||
|
|
||||||
const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
|
const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
|
||||||
|
|
||||||
const availableDates = computed(() => {
|
|
||||||
const dates = []
|
|
||||||
for (let i = dateRange.value.start; i <= dateRange.value.end; i++) {
|
|
||||||
const date = addDays(today, i)
|
|
||||||
dates.push({
|
|
||||||
value: formatDateStr(date),
|
|
||||||
day: date.getDate().toString().padStart(2, '0'),
|
|
||||||
month: (date.getMonth() + 1).toString().padStart(2, '0'),
|
|
||||||
weekday: weekdayNames[date.getDay()],
|
|
||||||
isToday: i === 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return dates
|
|
||||||
})
|
|
||||||
|
|
||||||
const batchActions = [
|
const batchActions = [
|
||||||
{ label: '今天', action: 'today' },
|
{ label: '今天', action: 'today' },
|
||||||
{ label: '明天起7天', action: 'next7' },
|
{ label: '明天起7天', action: 'next7' },
|
||||||
@@ -340,99 +283,26 @@ const applyBatchAction = (action) => {
|
|||||||
commitChange(merged)
|
commitChange(merged)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleWheel = (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const scrollAmount = 160
|
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
|
||||||
dateSelector.value.scrollTo({
|
|
||||||
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollDates = (direction) => {
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const scrollAmount = 160
|
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
|
||||||
dateSelector.value.scrollTo({
|
|
||||||
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleScroll = () => {
|
|
||||||
if (!dateSelector.value) return
|
|
||||||
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
|
||||||
if (scrollLeft < 100) {
|
|
||||||
const oldScrollWidth = scrollWidth
|
|
||||||
dateRange.value.start -= 5
|
|
||||||
nextTick(() => {
|
|
||||||
const newScrollWidth = dateSelector.value.scrollWidth
|
|
||||||
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (scrollWidth - scrollLeft - clientWidth < 100) {
|
|
||||||
dateRange.value.end += 5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollToDateElement = (targetDate, behavior = 'smooth') => {
|
|
||||||
if (!dateSelector.value || !targetDate) return
|
|
||||||
const el = dateSelector.value.querySelector(`[data-date="${targetDate}"]`)
|
|
||||||
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 = () => {
|
||||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
const todayStr = formatDateStr(today)
|
||||||
dateRange.value.start = -3
|
if (!props.modelValue.includes(todayStr)) {
|
||||||
dateRange.value.end = 25
|
toggleDate(todayStr, { shiftKey: false })
|
||||||
}
|
}
|
||||||
nextTick(() => scrollToDateElement(formatDateStr(today), 'smooth'))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleCalendar = () => {
|
const toggleCalendar = () => {
|
||||||
showCalendar.value = !showCalendar.value
|
showCalendar.value = !showCalendar.value
|
||||||
|
if (showCalendar.value && props.modelValue.length > 0) {
|
||||||
|
const d = new Date(props.modelValue[props.modelValue.length - 1])
|
||||||
|
calendarYear.value = d.getFullYear()
|
||||||
|
calendarMonth.value = d.getMonth()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const goToday = () => {
|
const goToday = () => {
|
||||||
calendarYear.value = today.getFullYear()
|
calendarYear.value = today.getFullYear()
|
||||||
calendarMonth.value = today.getMonth()
|
calendarMonth.value = today.getMonth()
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(() => props.modelValue, (newVal) => {
|
|
||||||
if (!newVal || !newVal.length) return
|
|
||||||
nextTick(() => {
|
|
||||||
// 跳到第一个 >= 今天的日期,否则跳第一个选中项
|
|
||||||
const todayStr = formatDateStr(today)
|
|
||||||
const target = newVal.find(d => d >= todayStr) || newVal[0]
|
|
||||||
// 如果目标超出当前范围,扩展 range
|
|
||||||
const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000)
|
|
||||||
if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) {
|
|
||||||
dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3)
|
|
||||||
dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5)
|
|
||||||
}
|
|
||||||
nextTick(() => scrollToDateElement(target, 'smooth'))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.modelValue && props.modelValue.length) {
|
|
||||||
const todayStr = formatDateStr(today)
|
|
||||||
const target = props.modelValue.find(d => d >= todayStr) || props.modelValue[0]
|
|
||||||
const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000)
|
|
||||||
if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) {
|
|
||||||
dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3)
|
|
||||||
dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5)
|
|
||||||
}
|
|
||||||
nextTick(() => nextTick(() => scrollToDateElement(target, 'smooth')))
|
|
||||||
} else {
|
|
||||||
nextTick(() => scrollToToday())
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -2,322 +2,161 @@
|
|||||||
<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">
|
||||||
<Music2 class="w-4 h-4 text-blue-500" /> 歌单导入
|
<Layout class="w-4 h-4 text-blue-500" /> 选择日期
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div class="space-y-2 w-full">
|
<div class="flex flex-col gap-5 items-end">
|
||||||
<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 w-full">
|
<div class="space-y-2 flex-1 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
|
<AdminMultiDatePicker
|
||||||
:modelValue="selectedDate"
|
v-model="selectedDates"
|
||||||
@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>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 w-full pt-1">
|
|
||||||
<button
|
<button
|
||||||
:disabled="generatingSchedule || (parsedSongs.length === 0 && schedules.length === 0)"
|
:disabled="loading || selectedDates.length === 0"
|
||||||
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"
|
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"
|
||||||
@click="generateSchedulesFromList"
|
@click="fetchSchedules"
|
||||||
>
|
>
|
||||||
<Save class="w-4 h-4" />
|
<CalendarDays class="w-4 h-4" />
|
||||||
{{ generatingSchedule ? '保存中...' : (parsedSongs.length ? `将 ${parsedSongs.length} 首生成为排期` : (schedules.length ? `将现有 ${schedules.length} 首重新保存` : '无可用歌曲')) }}
|
{{ loading ? '加载排期中...' : '读取所选日期排期' }}
|
||||||
</button>
|
</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="displaySongs.length > 0" class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 shadow-lg">
|
<template v-if="Object.keys(schedulesByDate).length > 0">
|
||||||
<h3 class="text-lg font-bold text-zinc-100 mb-4 flex items-center justify-between">
|
<div v-for="(schedules, date) in schedulesByDate" :key="date" class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 shadow-lg mb-4">
|
||||||
<span>
|
<div class="flex items-center justify-between mb-4">
|
||||||
{{ parsedSongs.length > 0 ? '解析结果预览' : '排期预览' }}({{ displaySongs.length }} 首)
|
<h3 class="text-lg font-bold text-zinc-100">{{ date }} 排期预览 ({{ schedules.length }} 首)</h3>
|
||||||
</span>
|
<button
|
||||||
<span class="text-xs font-medium text-zinc-500">歌曲名与歌手名将完整显示,不会简写或隐藏</span>
|
:disabled="schedules.length === 0"
|
||||||
</h3>
|
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-emerald-900/20 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
<div class="space-y-3">
|
@click="openGenerator(date, schedules)"
|
||||||
<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 pt-0.5">{{ index + 1 }}.</span>
|
<ImageIcon class="w-4 h-4" />
|
||||||
<div class="flex-1 min-w-0">
|
生成该日图片
|
||||||
<p class="text-sm text-zinc-200 font-medium break-words whitespace-normal">{{ item.song?.title || item.title }}</p>
|
</button>
|
||||||
<p class="text-xs text-zinc-500 break-words whitespace-normal mt-1">{{ item.song?.artist || item.artist }}</p>
|
</div>
|
||||||
<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 }}
|
<div v-if="schedules.length > 0" class="space-y-3">
|
||||||
</p>
|
<div v-for="(schedule, index) in schedules" :key="schedule.id || index" class="flex items-center 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>
|
||||||
|
<div class="flex-1 overflow-hidden">
|
||||||
|
<p class="text-sm text-zinc-200 font-medium truncate">{{ schedule.song?.title || schedule.title }}</p>
|
||||||
|
<p class="text-xs text-zinc-500 truncate">{{ schedule.song?.artist || schedule.artist }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="text-center py-8 text-zinc-500">
|
||||||
|
该日期没有排期歌曲
|
||||||
</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>
|
||||||
<ListMusic class="w-12 h-12 text-zinc-700 mb-4" />
|
</template>
|
||||||
<p class="text-zinc-500">尚未有歌曲,请粘贴歌单文本解析 或 选择日期读取已有排期</p>
|
<div v-else-if="!loading && selectedDates.length > 0" 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" />
|
||||||
|
<p class="text-zinc-500">所选日期均没有排期歌曲</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AdminPlaylistCardGenerator
|
<AdminPlaylistCardGenerator
|
||||||
:show="showModal"
|
:show="showModal"
|
||||||
:songs="displaySongs"
|
:songs="currentGeneratorSongs"
|
||||||
:default-title="`${selectedDate} 校园广播歌单`"
|
:default-title="`${currentGeneratorDate} 校园广播歌单`"
|
||||||
@close="showModal = false"
|
@close="showModal = false"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
import { ref, onMounted, watch } from 'vue'
|
||||||
import { Layout, Image as ImageIcon, Music2, ListPlus, Trash2, Save, ListMusic } from '@lucide/vue'
|
import { Layout, Image as ImageIcon, CalendarDays } from '@lucide/vue'
|
||||||
import AdminDatePicker from './AdminDatePicker.vue'
|
import AdminMultiDatePicker from './AdminMultiDatePicker.vue'
|
||||||
import AdminPlaylistCardGenerator from './PlaylistCardGenerator.vue'
|
import AdminPlaylistCardGenerator from './PlaylistCardGenerator.vue'
|
||||||
import { useAuth } from '~/composables/useAuth'
|
import { useAuth } from '~/composables/useAuth'
|
||||||
|
|
||||||
const auth = import.meta.client ? useAuth() : { getAuthConfig: () => ({}) }
|
const auth = useAuth()
|
||||||
let adminInstance = null
|
|
||||||
const getAdmin = async () => {
|
|
||||||
if (!import.meta.client) return null
|
|
||||||
if (adminInstance) return adminInstance
|
|
||||||
// @ts-ignore
|
|
||||||
const mod = await import(/* @vite-ignore */ '~/composables/useAdmin')
|
|
||||||
adminInstance = mod.useAdmin()
|
|
||||||
return adminInstance
|
|
||||||
}
|
|
||||||
const adminShim = {
|
|
||||||
loading: { value: false },
|
|
||||||
error: { value: '' },
|
|
||||||
addSong: async (p) => { const a = await getAdmin(); return a ? a.addSong(p) : { success: false } },
|
|
||||||
createSchedule: async (...args) => { const a = await getAdmin(); return a ? a.createSchedule(...args) : { success: false } }
|
|
||||||
}
|
|
||||||
const admin = import.meta.client ? adminShim : adminShim
|
|
||||||
|
|
||||||
const today = new Date()
|
const todayStr = new Date().toISOString().split('T')[0]
|
||||||
today.setHours(0, 0, 0, 0)
|
const selectedDates = ref([todayStr])
|
||||||
const _fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
const schedulesByDate = ref({})
|
||||||
const selectedDate = ref(_fmt(today))
|
|
||||||
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 currentGeneratorDate = ref('')
|
||||||
const selectedPlayTimeId = ref(null)
|
const currentGeneratorSongs = ref([])
|
||||||
const generatingSchedule = ref(false)
|
|
||||||
const playTimes = ref([])
|
|
||||||
|
|
||||||
const displaySongs = computed(() => parsedSongs.value.length ? parsedSongs.value : schedules.value)
|
const fetchSchedulesForDate = async (date) => {
|
||||||
|
|
||||||
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 = () => {
|
|
||||||
if (!import.meta.client) return
|
|
||||||
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 () => {
|
|
||||||
if (!import.meta.client) return
|
|
||||||
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: { date: selectedDate.value, includeDrafts: 'true' }
|
query: {
|
||||||
|
date: date,
|
||||||
|
includeDrafts: 'true'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
if (response.success && response.data && response.data.schedules) {
|
if (response.success && response.data && response.data.schedules) {
|
||||||
schedules.value = response.data.schedules
|
return response.data.schedules
|
||||||
} else schedules.value = []
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Failed to fetch schedules for ${date}:`, error)
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchSchedules = async () => {
|
||||||
|
if (selectedDates.value.length === 0) {
|
||||||
|
schedulesByDate.value = {}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
const newSchedules = {}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 按日期顺序获取
|
||||||
|
const sortedDates = [...selectedDates.value].sort()
|
||||||
|
for (const date of sortedDates) {
|
||||||
|
const schedules = await fetchSchedulesForDate(date)
|
||||||
|
if (schedules.length > 0) {
|
||||||
|
newSchedules[date] = schedules
|
||||||
|
}
|
||||||
|
}
|
||||||
|
schedulesByDate.value = newSchedules
|
||||||
|
|
||||||
|
if (Object.keys(newSchedules).length === 0 && window.$showNotification) {
|
||||||
|
window.$showNotification('所选日期没有排期歌曲', 'info')
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch schedules:', error)
|
console.error('Failed to fetch schedules:', error)
|
||||||
if (window.$showNotification) window.$showNotification('获取排期失败', 'error')
|
if (window.$showNotification) {
|
||||||
} finally { loading.value = false }
|
window.$showNotification('获取排期失败', 'error')
|
||||||
}
|
}
|
||||||
|
} finally {
|
||||||
const fetchPlayTimes = async () => {
|
loading.value = false
|
||||||
if (!import.meta.client) return
|
|
||||||
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 }) => {
|
|
||||||
if (!import.meta.client) return { created: false, song: null, failMsg: '客户端-only' }
|
|
||||||
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 () => {
|
const openGenerator = (date, songs) => {
|
||||||
if (!import.meta.client || displaySongs.value.length === 0) return
|
currentGeneratorDate.value = date
|
||||||
generatingSchedule.value = true
|
currentGeneratorSongs.value = songs
|
||||||
try {
|
showModal.value = true
|
||||||
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() }
|
|
||||||
|
|
||||||
if (import.meta.client) {
|
|
||||||
watch(selectedDate, () => { if (!parsedSongs.value.length) fetchSchedules() })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (!import.meta.client) return
|
|
||||||
fetchSchedules()
|
fetchSchedules()
|
||||||
fetchPlayTimes()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ const handleImageError = (event) => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--text-quaternary, #333333);
|
color: #333333 !important;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -161,7 +161,7 @@ const handleImageError = (event) => {
|
|||||||
.song-title {
|
.song-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: var(--text-quaternary, #333333);
|
color: #333333 !important;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -176,7 +176,7 @@ const handleImageError = (event) => {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
background: #e3f2fd;
|
background: #e3f2fd;
|
||||||
border: 1px solid var(--border-secondary, #2196f3);
|
border: 1px solid #2196f3;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #1976d2;
|
color: #1976d2;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
@@ -186,7 +186,7 @@ const handleImageError = (event) => {
|
|||||||
|
|
||||||
.song-artist {
|
.song-artist {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--text-quaternary, #666666);
|
color: #666666 !important;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -197,7 +197,7 @@ const handleImageError = (event) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-quaternary, #666666);
|
color: #666666 !important;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -207,14 +207,14 @@ const handleImageError = (event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
color: var(--text-quaternary, #333333);
|
color: #333333 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 */
|
/* 打印样式 */
|
||||||
@media print {
|
@media print {
|
||||||
.schedule-item-print {
|
.schedule-item-print {
|
||||||
color: var(--text-primary, #000) !important;
|
color: #000000 !important;
|
||||||
background: var(--card-bg, #fff) !important;
|
background: #ffffff !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: none !important;
|
max-width: none !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
@@ -230,7 +230,7 @@ const handleImageError = (event) => {
|
|||||||
|
|
||||||
.sequence-number {
|
.sequence-number {
|
||||||
background: #f0f0f0 !important;
|
background: #f0f0f0 !important;
|
||||||
color: var(--text-primary, #000) !important;
|
color: #000000 !important;
|
||||||
width: 30px !important;
|
width: 30px !important;
|
||||||
height: 30px !important;
|
height: 30px !important;
|
||||||
flex-shrink: 0 !important;
|
flex-shrink: 0 !important;
|
||||||
@@ -264,7 +264,7 @@ const handleImageError = (event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.song-title {
|
.song-title {
|
||||||
color: var(--text-primary, #000) !important;
|
color: #000000 !important;
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
white-space: nowrap !important;
|
white-space: nowrap !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
@@ -274,7 +274,7 @@ const handleImageError = (event) => {
|
|||||||
.song-artist,
|
.song-artist,
|
||||||
.label,
|
.label,
|
||||||
.value {
|
.value {
|
||||||
color: var(--text-quaternary, #333333) !important;
|
color: #333333 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-range {
|
.time-range {
|
||||||
|
|||||||
@@ -2055,7 +2055,13 @@ const saveSequence = async () => {
|
|||||||
// 一键自动排入期望播出的歌曲
|
// 一键自动排入期望播出的歌曲
|
||||||
const autoScheduleExpected = () => {
|
const autoScheduleExpected = () => {
|
||||||
let count = 0
|
let count = 0
|
||||||
const expectedSongs = [...filteredUnscheduledSongs.value]
|
const expectedSongs = [...allUnscheduledSongs.value].filter(song => {
|
||||||
|
// 严格按期望播出日期排期:如果歌曲有期望播出日期,必须匹配当前选择的日期
|
||||||
|
if (song.expectedPlayDate && song.expectedPlayDate !== selectedDate.value) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
if (expectedSongs.length === 0) {
|
if (expectedSongs.length === 0) {
|
||||||
showToast('当前没有待排期的歌曲', 'info')
|
showToast('当前没有待排期的歌曲', 'info')
|
||||||
@@ -2088,13 +2094,20 @@ const autoScheduleExpected = () => {
|
|||||||
if (existingIndex !== -1) return
|
if (existingIndex !== -1) return
|
||||||
|
|
||||||
let targetPlayTimeId = null
|
let targetPlayTimeId = null
|
||||||
if (song.preferredPlayTimeId) {
|
if (song.preferredPlayTimeId != null) {
|
||||||
const matched = (playTimes.value || []).find(pt => pt.id === song.preferredPlayTimeId)
|
const matched = (playTimes.value || []).find(pt => String(pt.id) === String(song.preferredPlayTimeId))
|
||||||
if (matched) targetPlayTimeId = song.preferredPlayTimeId
|
if (matched) targetPlayTimeId = matched.id
|
||||||
}
|
}
|
||||||
if (!targetPlayTimeId && filteredPtId != null) targetPlayTimeId = filteredPtId
|
|
||||||
|
|
||||||
if (filteredPtId != null && targetPlayTimeId !== filteredPtId) return
|
// 如果没有明确期望时段,但当前处于特定时段视图下,则排入该时段
|
||||||
|
if (targetPlayTimeId == null && filteredPtId != null) {
|
||||||
|
targetPlayTimeId = filteredPtId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果处于特定时段视图,但该歌曲的期望时段不是当前时段,则跳过不排入
|
||||||
|
if (filteredPtId != null && targetPlayTimeId != null && String(targetPlayTimeId) !== String(filteredPtId)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
const ptKey = String(targetPlayTimeId || '')
|
const ptKey = String(targetPlayTimeId || '')
|
||||||
const nextSeq = (playTimeSeqCounters.get(ptKey) || 0) + 1
|
const nextSeq = (playTimeSeqCounters.get(ptKey) || 0) + 1
|
||||||
playTimeSeqCounters.set(ptKey, nextSeq)
|
playTimeSeqCounters.set(ptKey, nextSeq)
|
||||||
|
|||||||
@@ -1383,15 +1383,15 @@ watch(
|
|||||||
/* 预览区域和打印样式的核心CSS - 保持原生CSS以确保精确控制 */
|
/* 预览区域和打印样式的核心CSS - 保持原生CSS以确保精确控制 */
|
||||||
|
|
||||||
.preview-content {
|
.preview-content {
|
||||||
background: var(--card-bg, #ffffff);
|
background: #ffffff !important;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印页面样式 */
|
/* 打印页面样式 */
|
||||||
.print-page {
|
.print-page {
|
||||||
background: var(--card-bg, #ffffff);
|
background: #ffffff !important;
|
||||||
color: var(--text-primary, #000000);
|
color: #000000 !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
@@ -1445,19 +1445,19 @@ watch(
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin: 0 0 4px 0;
|
margin: 0 0 4px 0;
|
||||||
color: var(--text-primary, #000);
|
color: #000000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-section h2 {
|
.title-section h2 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text-quaternary, #666666);
|
color: #666666 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-info {
|
.date-info {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--text-quaternary, #666666);
|
color: #666666 !important;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|||||||
Reference in New Issue
Block a user