feat(admin): 优化后台日期选择器和播出时段交互流程
- AdminDatePicker: 新增可展开月历网格 + 6 个快捷日期跳转按钮 - AdminMultiDatePicker: 新增 8 种批量预设 + Shift 范围选择 + 月历网格 - PlayTimeManager: 新增 6 个校园广播快速模板 + 时段复制 + 批量启停 - ScheduleManager: 播出时段从下拉改为标签按钮组 + 增加统计卡片 - RequestTimeManager: datetime-local 拆分为日期+时间双输入 + 6 种快捷预设
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<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>
|
||||
<button
|
||||
:disabled="isFirstDateVisible"
|
||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors"
|
||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors shrink-0"
|
||||
@click="scrollDates('left')"
|
||||
>
|
||||
<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>
|
||||
@@ -11,7 +12,7 @@
|
||||
|
||||
<div
|
||||
ref="dateSelector"
|
||||
class="flex-1 flex overflow-x-auto scrollbar-hide gap-2 px-2 py-1 scroll-smooth overscroll-x-contain"
|
||||
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"
|
||||
@@ -21,10 +22,11 @@
|
||||
: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',
|
||||
'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'
|
||||
: '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)"
|
||||
>
|
||||
@@ -36,54 +38,124 @@
|
||||
|
||||
<button
|
||||
:disabled="isLastDateVisible"
|
||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors"
|
||||
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">
|
||||
<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" />
|
||||
</button>
|
||||
<button class="p-2 text-zinc-500 hover:text-blue-400 transition-colors" title="选择特定日期" @click="openManualDatePicker">
|
||||
<button
|
||||
class="p-2 text-zinc-500 hover:text-blue-400 transition-colors"
|
||||
:class="{ 'text-blue-400': showCalendar }"
|
||||
title="打开月历"
|
||||
@click="toggleCalendar"
|
||||
>
|
||||
<CalendarIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手动日期选择弹窗 -->
|
||||
<div
|
||||
v-if="showManualDatePicker"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||||
>
|
||||
<div class="bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl w-full max-w-sm overflow-hidden" @click.stop>
|
||||
<div class="flex items-center justify-between p-4 border-b border-zinc-800">
|
||||
<h3 class="text-sm font-black text-zinc-100 uppercase tracking-widest">选择日期</h3>
|
||||
<button class="text-zinc-500 hover:text-zinc-300 transition-colors" @click="showManualDatePicker = false">
|
||||
<CloseIcon class="w-5 h-5" />
|
||||
<!-- 快捷选择区 + 月历网格 -->
|
||||
<Transition name="expand">
|
||||
<div v-if="showCalendar" class="border-t border-zinc-800/60 mt-1 pt-2 px-2 pb-2">
|
||||
<!-- 快捷按钮 -->
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<button
|
||||
v-for="q in quickDates"
|
||||
:key="q.label"
|
||||
:class="[
|
||||
'px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all border',
|
||||
modelValue === q.value
|
||||
? 'bg-blue-600 border-blue-500 text-white'
|
||||
: 'bg-zinc-900 border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700'
|
||||
]"
|
||||
@click="handleQuickSelect(q.value)"
|
||||
>
|
||||
{{ q.label }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<input
|
||||
v-model="manualSelectedDate"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-200 focus:outline-none focus:border-blue-500 transition-colors"
|
||||
type="date"
|
||||
>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 py-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-bold rounded-xl transition-colors uppercase tracking-wider" @click="showManualDatePicker = false">取消</button>
|
||||
<button class="flex-1 py-3 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" @click="confirmManualDate">确认</button>
|
||||
|
||||
<!-- 月历网格 -->
|
||||
<div class="bg-zinc-950/60 border border-zinc-800 rounded-xl p-3">
|
||||
<!-- 月份切换 -->
|
||||
<div class="flex items-center justify-between mb-3 px-1">
|
||||
<button
|
||||
class="p-1.5 text-zinc-500 hover:text-zinc-200 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
@click="calendarMonth--"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15,18 9,12 15,6" /></svg>
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-black text-zinc-200">{{ calendarYear }}年</span>
|
||||
<select
|
||||
v-model="calendarMonth"
|
||||
class="bg-zinc-900 border border-zinc-800 rounded-lg px-2 py-1 text-sm font-black text-zinc-200 focus:outline-none focus:border-blue-500/50"
|
||||
>
|
||||
<option v-for="m in 12" :key="m" :value="m - 1">{{ m }}月</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
class="p-1.5 text-zinc-500 hover:text-zinc-200 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
@click="goToday"
|
||||
title="回到本月"
|
||||
>
|
||||
<CircleDot class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 text-zinc-500 hover:text-zinc-200 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
@click="calendarMonth++"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9,18 15,12 9,6" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 星期表头 -->
|
||||
<div class="grid grid-cols-7 mb-1">
|
||||
<div
|
||||
v-for="w in weekdayNames"
|
||||
:key="w"
|
||||
class="text-center text-[10px] font-black text-zinc-600 uppercase tracking-widest py-1.5"
|
||||
>
|
||||
{{ w }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期网格 -->
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<button
|
||||
v-for="(cell, idx) in calendarCells"
|
||||
:key="idx"
|
||||
:disabled="!cell.inMonth"
|
||||
:class="[
|
||||
'relative aspect-square rounded-lg flex items-center justify-center text-sm font-bold transition-all',
|
||||
!cell.inMonth ? 'text-zinc-800 cursor-default' : '',
|
||||
cell.inMonth && modelValue !== cell.dateStr && !cell.isToday
|
||||
? 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200' : '',
|
||||
cell.inMonth && modelValue !== cell.dateStr && cell.isToday
|
||||
? 'text-emerald-400 ring-1 ring-emerald-500/40 hover:bg-zinc-800' : '',
|
||||
modelValue === cell.dateStr
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : ''
|
||||
]"
|
||||
@click="cell.inMonth && handleQuickSelect(cell.dateStr)"
|
||||
>
|
||||
{{ cell.day }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
||||
import { CircleDot, Calendar as CalendarIcon, X as CloseIcon } from '@lucide/vue'
|
||||
import { CircleDot, Calendar as CalendarIcon } from '@lucide/vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@@ -98,28 +170,69 @@ const dateSelector = ref(null)
|
||||
const isFirstDateVisible = ref(false)
|
||||
const isLastDateVisible = ref(false)
|
||||
const dateRange = ref({ start: -15, end: 15 })
|
||||
const showManualDatePicker = ref(false)
|
||||
const manualSelectedDate = ref('')
|
||||
const showCalendar = ref(false)
|
||||
|
||||
const today = new Date()
|
||||
const calendarYear = ref(today.getFullYear())
|
||||
const calendarMonth = ref(today.getMonth())
|
||||
|
||||
const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
|
||||
|
||||
const formatDateStr = (d) => d.toISOString().split('T')[0]
|
||||
const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate() + n); return x }
|
||||
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
|
||||
|
||||
const availableDates = computed(() => {
|
||||
const dates = []
|
||||
const today = new Date()
|
||||
for (let i = dateRange.value.start; i <= dateRange.value.end; i++) {
|
||||
const date = new Date(today)
|
||||
date.setDate(today.getDate() + i)
|
||||
const dateStr = date.toISOString().split('T')[0]
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const date = addDays(today, i)
|
||||
dates.push({
|
||||
value: dateStr,
|
||||
value: formatDateStr(date),
|
||||
day: date.getDate().toString().padStart(2, '0'),
|
||||
month: (date.getMonth() + 1).toString().padStart(2, '0'),
|
||||
weekday: weekdays[date.getDay()],
|
||||
weekday: weekdayNames[date.getDay()],
|
||||
isToday: i === 0
|
||||
})
|
||||
}
|
||||
return dates
|
||||
})
|
||||
|
||||
const quickDates = computed(() => {
|
||||
const t = new Date(); t.setHours(0, 0, 0, 0)
|
||||
const mk = (label, date) => ({ label, value: formatDateStr(date) })
|
||||
const nextWeekday = (targetDay) => {
|
||||
const r = new Date(t)
|
||||
const diff = (targetDay - r.getDay() + 7) % 7 || 7
|
||||
r.setDate(r.getDate() + diff)
|
||||
return r
|
||||
}
|
||||
return [
|
||||
mk('今天', t),
|
||||
mk('明天', addDays(t, 1)),
|
||||
mk('后天', addDays(t, 2)),
|
||||
mk('下周一', nextWeekday(1)),
|
||||
mk('下周三', nextWeekday(3)),
|
||||
mk('下周日', nextWeekday(0))
|
||||
]
|
||||
})
|
||||
|
||||
const calendarCells = computed(() => {
|
||||
const cells = []
|
||||
const firstDay = new Date(calendarYear.value, calendarMonth.value, 1)
|
||||
const startWeekday = firstDay.getDay()
|
||||
const startDate = addDays(firstDay, -startWeekday)
|
||||
for (let i = 0; i < 42; i++) {
|
||||
const d = addDays(startDate, i)
|
||||
cells.push({
|
||||
day: d.getDate(),
|
||||
dateStr: formatDateStr(d),
|
||||
inMonth: d.getMonth() === calendarMonth.value,
|
||||
isToday: sameDay(d, today)
|
||||
})
|
||||
}
|
||||
return cells
|
||||
})
|
||||
|
||||
const selectDate = (dateValue) => {
|
||||
emit('update:modelValue', dateValue)
|
||||
emit('change', dateValue)
|
||||
@@ -128,9 +241,7 @@ const selectDate = (dateValue) => {
|
||||
const scrollToDateElement = (behavior = 'smooth') => {
|
||||
if (!dateSelector.value || !props.modelValue) return
|
||||
const el = dateSelector.value.querySelector(`[data-date="${props.modelValue}"]`)
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
||||
}
|
||||
if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
||||
}
|
||||
|
||||
const handleWheel = (event) => {
|
||||
@@ -171,10 +282,8 @@ const handleScroll = () => {
|
||||
}
|
||||
|
||||
const scrollToToday = () => {
|
||||
const todayStr = new Date().toISOString().split('T')[0]
|
||||
if (props.modelValue !== todayStr) {
|
||||
selectDate(todayStr)
|
||||
}
|
||||
const todayStr = formatDateStr(today)
|
||||
if (props.modelValue !== todayStr) selectDate(todayStr)
|
||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
||||
dateRange.value.start = -15
|
||||
dateRange.value.end = 15
|
||||
@@ -182,17 +291,31 @@ const scrollToToday = () => {
|
||||
nextTick(() => scrollToDateElement('smooth'))
|
||||
}
|
||||
|
||||
const openManualDatePicker = () => {
|
||||
manualSelectedDate.value = props.modelValue
|
||||
showManualDatePicker.value = true
|
||||
const toggleCalendar = () => {
|
||||
showCalendar.value = !showCalendar.value
|
||||
if (showCalendar.value && props.modelValue) {
|
||||
const d = new Date(props.modelValue)
|
||||
calendarYear.value = d.getFullYear()
|
||||
calendarMonth.value = d.getMonth()
|
||||
}
|
||||
}
|
||||
|
||||
const confirmManualDate = () => {
|
||||
if (manualSelectedDate.value && manualSelectedDate.value !== props.modelValue) {
|
||||
selectDate(manualSelectedDate.value)
|
||||
}
|
||||
showManualDatePicker.value = false
|
||||
nextTick(() => scrollToDateElement('smooth'))
|
||||
const goToday = () => {
|
||||
calendarYear.value = today.getFullYear()
|
||||
calendarMonth.value = today.getMonth()
|
||||
}
|
||||
|
||||
const handleQuickSelect = (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 - 5
|
||||
dateRange.value.end = diffDays + 10
|
||||
}
|
||||
nextTick(() => scrollToDateElement('smooth'))
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
@@ -205,11 +328,21 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.expand-enter-active, .expand-leave-active {
|
||||
transition: all 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
.expand-enter-from, .expand-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.expand-enter-to, .expand-leave-from {
|
||||
max-height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<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>
|
||||
<button
|
||||
:disabled="isFirstDateVisible"
|
||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors"
|
||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors shrink-0"
|
||||
@click="scrollDates('left')"
|
||||
>
|
||||
<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>
|
||||
@@ -11,7 +12,7 @@
|
||||
|
||||
<div
|
||||
ref="dateSelector"
|
||||
class="flex-1 flex overflow-x-auto scrollbar-hide gap-2 px-2 py-1 scroll-smooth overscroll-x-contain"
|
||||
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"
|
||||
@@ -21,69 +22,162 @@
|
||||
: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',
|
||||
'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'
|
||||
: '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)"
|
||||
@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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
:disabled="isLastDateVisible"
|
||||
class="p-2 text-zinc-500 hover:text-zinc-300 disabled:opacity-30 transition-colors"
|
||||
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">
|
||||
<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" />
|
||||
</button>
|
||||
<button class="p-2 text-zinc-500 hover:text-blue-400 transition-colors" title="选择特定日期" @click="openManualDatePicker">
|
||||
<button
|
||||
class="p-2 text-zinc-500 hover:text-blue-400 transition-colors"
|
||||
:class="{ 'text-blue-400': showCalendar }"
|
||||
title="打开月历及批量选择"
|
||||
@click="toggleCalendar"
|
||||
>
|
||||
<CalendarIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手动日期选择弹窗 -->
|
||||
<div
|
||||
v-if="showManualDatePicker"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||||
>
|
||||
<div class="bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl w-full max-w-sm overflow-hidden" @click.stop>
|
||||
<div class="flex items-center justify-between p-4 border-b border-zinc-800">
|
||||
<h3 class="text-sm font-black text-zinc-100 uppercase tracking-widest">选择日期</h3>
|
||||
<button class="text-zinc-500 hover:text-zinc-300 transition-colors" @click="showManualDatePicker = false">
|
||||
<CloseIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<input
|
||||
v-model="manualSelectedDate"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-200 focus:outline-none focus:border-blue-500 transition-colors"
|
||||
type="date"
|
||||
<!-- 扩展面板：快捷批量 + 月历 -->
|
||||
<Transition name="expand">
|
||||
<div v-if="showCalendar" class="border-t border-zinc-800/60 mt-1 pt-2 px-2 pb-2 space-y-3">
|
||||
<!-- 批量操作按钮 -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1">批量选择</span>
|
||||
<button
|
||||
v-for="b in batchActions"
|
||||
:key="b.label"
|
||||
class="px-2.5 py-1.5 rounded-lg text-[11px] font-bold bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700 transition-all"
|
||||
@click="applyBatchAction(b.action)"
|
||||
>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 py-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-bold rounded-xl transition-colors uppercase tracking-wider" @click="showManualDatePicker = false">取消</button>
|
||||
<button class="flex-1 py-3 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" @click="confirmManualDate">确认添加</button>
|
||||
{{ b.label }}
|
||||
</button>
|
||||
<div class="w-px h-4 bg-zinc-800 mx-1" />
|
||||
<button
|
||||
class="px-2.5 py-1.5 rounded-lg text-[11px] font-bold bg-red-500/10 border border-red-500/20 text-red-400 hover:text-red-300 hover:bg-red-500/15 transition-all"
|
||||
@click="clearAll"
|
||||
>
|
||||
清空所有
|
||||
</button>
|
||||
<div class="ml-auto flex items-center gap-2 text-[11px] font-bold text-zinc-500">
|
||||
<Info :size="12" />
|
||||
<span>已选 {{ modelValue.length }} 天</span>
|
||||
<span class="text-zinc-700">·</span>
|
||||
<span class="text-zinc-600">按住 Shift 点选可范围选择</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 月历网格 -->
|
||||
<div class="bg-zinc-950/60 border border-zinc-800 rounded-xl p-3">
|
||||
<div class="flex items-center justify-between mb-3 px-1">
|
||||
<button
|
||||
class="p-1.5 text-zinc-500 hover:text-zinc-200 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
@click="calendarMonth--"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15,18 9,12 15,6" /></svg>
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-black text-zinc-200">{{ calendarYear }}年</span>
|
||||
<select
|
||||
v-model="calendarMonth"
|
||||
class="bg-zinc-900 border border-zinc-800 rounded-lg px-2 py-1 text-sm font-black text-zinc-200 focus:outline-none focus:border-blue-500/50"
|
||||
>
|
||||
<option v-for="m in 12" :key="m" :value="m - 1">{{ m }}月</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
class="p-1.5 text-zinc-500 hover:text-zinc-200 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
@click="goToday"
|
||||
title="回到本月"
|
||||
>
|
||||
<CircleDot class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
class="p-1.5 text-zinc-500 hover:text-zinc-200 rounded-lg hover:bg-zinc-800 transition-colors"
|
||||
@click="calendarMonth++"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9,18 15,12 9,6" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 mb-1">
|
||||
<div
|
||||
v-for="w in weekdayNames"
|
||||
:key="w"
|
||||
class="text-center text-[10px] font-black text-zinc-600 uppercase tracking-widest py-1.5"
|
||||
>
|
||||
{{ w }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<button
|
||||
v-for="(cell, idx) in calendarCells"
|
||||
:key="idx"
|
||||
:disabled="!cell.inMonth"
|
||||
:class="[
|
||||
'relative aspect-square rounded-lg flex items-center justify-center text-sm font-bold transition-all',
|
||||
!cell.inMonth ? 'text-zinc-800 cursor-default' : '',
|
||||
cell.inMonth && !isSelected(cell.dateStr) && !cell.isToday
|
||||
? 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200' : '',
|
||||
cell.inMonth && !isSelected(cell.dateStr) && cell.isToday
|
||||
? 'text-emerald-400 ring-1 ring-emerald-500/40 hover:bg-zinc-800' : '',
|
||||
isSelected(cell.dateStr)
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : '',
|
||||
cell.isRangeMiddle && !isSelected(cell.dateStr)
|
||||
? 'bg-blue-500/10 text-blue-300' : ''
|
||||
]"
|
||||
@click="cell.inMonth && toggleDate(cell.dateStr, $event)"
|
||||
>
|
||||
{{ cell.day }}
|
||||
<svg
|
||||
v-if="isSelected(cell.dateStr)"
|
||||
class="absolute top-0.5 right-0.5 w-2.5 h-2.5 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { CircleDot, Calendar as CalendarIcon, X as CloseIcon } from '@lucide/vue'
|
||||
import { CircleDot, Calendar as CalendarIcon, Info } from '@lucide/vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@@ -97,40 +191,152 @@ const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const dateSelector = ref(null)
|
||||
const isFirstDateVisible = ref(false)
|
||||
const isLastDateVisible = ref(false)
|
||||
const dateRange = ref({ start: 0, end: 30 }) // 默认展示今天起30天
|
||||
const showManualDatePicker = ref(false)
|
||||
const manualSelectedDate = ref('')
|
||||
const dateRange = ref({ start: 0, end: 45 })
|
||||
const showCalendar = ref(false)
|
||||
const lastClickedDate = ref('')
|
||||
|
||||
const today = new Date()
|
||||
const calendarYear = ref(today.getFullYear())
|
||||
const calendarMonth = ref(today.getMonth())
|
||||
|
||||
const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
|
||||
|
||||
const formatDateStr = (d) => d.toISOString().split('T')[0]
|
||||
const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate() + n); return x }
|
||||
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
|
||||
const sortDates = (arr) => [...new Set(arr)].sort()
|
||||
|
||||
const availableDates = computed(() => {
|
||||
const dates = []
|
||||
const today = new Date()
|
||||
for (let i = dateRange.value.start; i <= dateRange.value.end; i++) {
|
||||
const date = new Date(today)
|
||||
date.setDate(today.getDate() + i)
|
||||
const dateStr = date.toISOString().split('T')[0]
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const date = addDays(today, i)
|
||||
dates.push({
|
||||
value: dateStr,
|
||||
value: formatDateStr(date),
|
||||
day: date.getDate().toString().padStart(2, '0'),
|
||||
month: (date.getMonth() + 1).toString().padStart(2, '0'),
|
||||
weekday: weekdays[date.getDay()],
|
||||
weekday: weekdayNames[date.getDay()],
|
||||
isToday: i === 0
|
||||
})
|
||||
}
|
||||
return dates
|
||||
})
|
||||
|
||||
const toggleDate = (dateValue) => {
|
||||
const newValue = [...props.modelValue]
|
||||
const index = newValue.indexOf(dateValue)
|
||||
if (index > -1) {
|
||||
newValue.splice(index, 1)
|
||||
} else {
|
||||
newValue.push(dateValue)
|
||||
newValue.sort() // 保持日期顺序
|
||||
const batchActions = [
|
||||
{ label: '今天', action: 'today' },
|
||||
{ label: '明天起7天', action: 'next7' },
|
||||
{ label: '本周工作日', action: 'thisWeekWork' },
|
||||
{ label: '本周全周', action: 'thisWeekAll' },
|
||||
{ label: '下周工作日', action: 'nextWeekWork' },
|
||||
{ label: '下周全周', action: 'nextWeekAll' },
|
||||
{ label: '本月工作日', action: 'thisMonthWork' }
|
||||
]
|
||||
|
||||
const calendarCells = computed(() => {
|
||||
const cells = []
|
||||
const firstDay = new Date(calendarYear.value, calendarMonth.value, 1)
|
||||
const startWeekday = firstDay.getDay()
|
||||
const startDate = addDays(firstDay, -startWeekday)
|
||||
for (let i = 0; i < 42; i++) {
|
||||
const d = addDays(startDate, i)
|
||||
cells.push({
|
||||
day: d.getDate(),
|
||||
dateStr: formatDateStr(d),
|
||||
inMonth: d.getMonth() === calendarMonth.value,
|
||||
isToday: sameDay(d, today)
|
||||
})
|
||||
}
|
||||
emit('update:modelValue', newValue)
|
||||
emit('change', newValue)
|
||||
return cells
|
||||
})
|
||||
|
||||
const isSelected = (d) => props.modelValue.includes(d)
|
||||
|
||||
const commitChange = (newArr) => {
|
||||
const sorted = sortDates(newArr)
|
||||
emit('update:modelValue', sorted)
|
||||
emit('change', sorted)
|
||||
}
|
||||
|
||||
const toggleDate = (dateValue, event) => {
|
||||
const newValue = [...props.modelValue]
|
||||
|
||||
if (event && event.shiftKey && lastClickedDate.value && !newValue.includes(dateValue)) {
|
||||
const a = new Date(lastClickedDate.value)
|
||||
const b = new Date(dateValue)
|
||||
const [s, e] = a < b ? [a, b] : [b, a]
|
||||
for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
|
||||
const ds = formatDateStr(d)
|
||||
if (!newValue.includes(ds)) newValue.push(ds)
|
||||
}
|
||||
} else {
|
||||
const index = newValue.indexOf(dateValue)
|
||||
if (index > -1) {
|
||||
newValue.splice(index, 1)
|
||||
} else {
|
||||
newValue.push(dateValue)
|
||||
}
|
||||
lastClickedDate.value = dateValue
|
||||
}
|
||||
|
||||
commitChange(newValue)
|
||||
}
|
||||
|
||||
const clearAll = () => commitChange([])
|
||||
|
||||
const applyBatchAction = (action) => {
|
||||
const t = new Date(); t.setHours(0, 0, 0, 0)
|
||||
const toAdd = []
|
||||
|
||||
const pushRange = (start, end) => {
|
||||
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
||||
toAdd.push(formatDateStr(d))
|
||||
}
|
||||
}
|
||||
|
||||
const getWeekStart = (base) => {
|
||||
const r = new Date(base); r.setHours(0, 0, 0, 0)
|
||||
r.setDate(r.getDate() - r.getDay())
|
||||
return r
|
||||
}
|
||||
|
||||
switch (action) {
|
||||
case 'today':
|
||||
toAdd.push(formatDateStr(t))
|
||||
break
|
||||
case 'next7':
|
||||
pushRange(addDays(t, 1), addDays(t, 7))
|
||||
break
|
||||
case 'thisWeekWork': {
|
||||
const wkStart = getWeekStart(t)
|
||||
for (let i = 1; i <= 5; i++) toAdd.push(formatDateStr(addDays(wkStart, i)))
|
||||
break
|
||||
}
|
||||
case 'thisWeekAll': {
|
||||
const wkStart = getWeekStart(t)
|
||||
pushRange(wkStart, addDays(wkStart, 6))
|
||||
break
|
||||
}
|
||||
case 'nextWeekWork': {
|
||||
const wkStart = addDays(getWeekStart(t), 7)
|
||||
for (let i = 1; i <= 5; i++) toAdd.push(formatDateStr(addDays(wkStart, i)))
|
||||
break
|
||||
}
|
||||
case 'nextWeekAll': {
|
||||
const wkStart = addDays(getWeekStart(t), 7)
|
||||
pushRange(wkStart, addDays(wkStart, 6))
|
||||
break
|
||||
}
|
||||
case 'thisMonthWork': {
|
||||
const ym = new Date(t.getFullYear(), t.getMonth(), 1)
|
||||
const end = new Date(t.getFullYear(), t.getMonth() + 1, 0)
|
||||
for (let d = new Date(ym); d <= end; d.setDate(d.getDate() + 1)) {
|
||||
if (d.getDay() >= 1 && d.getDay() <= 5) toAdd.push(formatDateStr(d))
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const merged = [...new Set([...props.modelValue, ...toAdd])]
|
||||
commitChange(merged)
|
||||
}
|
||||
|
||||
const handleWheel = (event) => {
|
||||
@@ -172,42 +378,24 @@ const handleScroll = () => {
|
||||
|
||||
const scrollToToday = () => {
|
||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
||||
dateRange.value.start = -15
|
||||
dateRange.value.end = 15
|
||||
dateRange.value.start = 0
|
||||
dateRange.value.end = 30
|
||||
}
|
||||
nextTick(() => {
|
||||
if (!dateSelector.value) return
|
||||
const todayStr = new Date().toISOString().split('T')[0]
|
||||
const todayStr = formatDateStr(today)
|
||||
const el = dateSelector.value.querySelector(`[data-date="${todayStr}"]`)
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
||||
}
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
||||
})
|
||||
}
|
||||
|
||||
const openManualDatePicker = () => {
|
||||
manualSelectedDate.value = new Date().toISOString().split('T')[0]
|
||||
showManualDatePicker.value = true
|
||||
const toggleCalendar = () => {
|
||||
showCalendar.value = !showCalendar.value
|
||||
}
|
||||
|
||||
const confirmManualDate = () => {
|
||||
if (manualSelectedDate.value) {
|
||||
const newValue = [...props.modelValue]
|
||||
if (!newValue.includes(manualSelectedDate.value)) {
|
||||
newValue.push(manualSelectedDate.value)
|
||||
newValue.sort()
|
||||
emit('update:modelValue', newValue)
|
||||
emit('change', newValue)
|
||||
}
|
||||
}
|
||||
showManualDatePicker.value = false
|
||||
nextTick(() => {
|
||||
if (!dateSelector.value) return
|
||||
const el = dateSelector.value.querySelector(`[data-date="${manualSelectedDate.value}"]`)
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
||||
}
|
||||
})
|
||||
const goToday = () => {
|
||||
calendarYear.value = today.getFullYear()
|
||||
calendarMonth.value = today.getMonth()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -216,11 +404,21 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.expand-enter-active, .expand-leave-active {
|
||||
transition: all 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
.expand-enter-from, .expand-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.expand-enter-to, .expand-leave-from {
|
||||
max-height: 800px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
定义校园广播的常规播放窗口，用户仅可在这些时间段内进行点歌或查看排期
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<div
|
||||
class="bg-zinc-900/40 border border-zinc-800 rounded-xl px-4 py-2 flex items-center gap-3"
|
||||
>
|
||||
@@ -30,6 +30,21 @@
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="playTimes.length > 1" class="flex items-center gap-2 bg-zinc-900/40 border border-zinc-800 rounded-xl px-3 py-2">
|
||||
<span class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">批量</span>
|
||||
<button
|
||||
class="px-3 py-1.5 text-[10px] font-black bg-emerald-600/20 text-emerald-400 border border-emerald-500/30 rounded-lg hover:bg-emerald-600/30 transition-all"
|
||||
@click="batchToggleAll(true)"
|
||||
>
|
||||
全部启用
|
||||
</button>
|
||||
<button
|
||||
class="px-3 py-1.5 text-[10px] font-black bg-zinc-800 text-zinc-400 border border-zinc-700 rounded-lg hover:bg-zinc-700 transition-all"
|
||||
@click="batchToggleAll(false)"
|
||||
>
|
||||
全部禁用
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black rounded-lg shadow-lg shadow-blue-900/20 transition-all active:scale-95"
|
||||
@click="openAddForm"
|
||||
@@ -147,6 +162,13 @@
|
||||
|
||||
<div class="mt-8 pt-6 border-t border-zinc-800/50 flex items-center justify-between">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="p-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-500 hover:text-emerald-400 hover:border-emerald-500/30 transition-all"
|
||||
title="复制此时段"
|
||||
@click="duplicatePlayTime(playTime)"
|
||||
>
|
||||
<Copy :size="14" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-500 hover:text-blue-400 hover:border-blue-500/30 transition-all"
|
||||
@click="editPlayTime(playTime)"
|
||||
@@ -201,6 +223,23 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- 快速预设 -->
|
||||
<div v-if="!editingPlayTime" class="space-y-2">
|
||||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1">快速模板</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="p in playTimePresets"
|
||||
:key="p.name"
|
||||
type="button"
|
||||
class="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-[11px] font-bold text-zinc-400 hover:text-zinc-200 hover:border-zinc-700 hover:bg-zinc-900 transition-all"
|
||||
@click="applyPreset(p)"
|
||||
>
|
||||
<span class="block">{{ p.name }}</span>
|
||||
<span class="block text-[9px] text-zinc-600 font-medium">{{ p.startTime }} - {{ p.endTime }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
|
||||
>时段名称</label
|
||||
@@ -366,9 +405,19 @@ import {
|
||||
Info,
|
||||
AlertCircle,
|
||||
X,
|
||||
AlignLeft
|
||||
AlignLeft,
|
||||
Copy
|
||||
} from '@lucide/vue'
|
||||
|
||||
const playTimePresets = [
|
||||
{ name: '早间广播', startTime: '07:00', endTime: '07:40', description: '早自习前广播时段' },
|
||||
{ name: '课间操时段', startTime: '09:30', endTime: '10:00', description: '大课间操期间' },
|
||||
{ name: '午间广播', startTime: '12:00', endTime: '12:40', description: '午休后午间广播' },
|
||||
{ name: '傍晚广播', startTime: '17:30', endTime: '18:15', description: '放学后时段' },
|
||||
{ name: '晚间新闻', startTime: '21:00', endTime: '21:30', description: '晚自习结束前' },
|
||||
{ name: '全天开放', startTime: '', endTime: '', description: '无时间边界限制' }
|
||||
]
|
||||
|
||||
const { getAuthConfig, isAdmin } = useAuth()
|
||||
const { showToast: showNotification } = useToast()
|
||||
|
||||
@@ -636,6 +685,59 @@ const savePlayTime = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 应用快速模板
|
||||
const applyPreset = (preset) => {
|
||||
Object.assign(formData, {
|
||||
name: preset.name,
|
||||
startTime: preset.startTime,
|
||||
endTime: preset.endTime,
|
||||
description: preset.description,
|
||||
enabled: true
|
||||
})
|
||||
}
|
||||
|
||||
// 复制时段
|
||||
const duplicatePlayTime = (playTime: PlayTime) => {
|
||||
showAddForm.value = true
|
||||
editingPlayTime.value = null
|
||||
Object.assign(formData, {
|
||||
id: 0,
|
||||
name: `${playTime.name} (副本)`,
|
||||
startTime: playTime.startTime || '',
|
||||
endTime: playTime.endTime || '',
|
||||
description: playTime.description || '',
|
||||
enabled: playTime.enabled
|
||||
})
|
||||
}
|
||||
|
||||
// 批量切换启用状态
|
||||
const batchToggleAll = async (enable: boolean) => {
|
||||
if (!isAdmin.value) return
|
||||
const ids = playTimes.value
|
||||
.filter((pt) => pt.enabled !== enable)
|
||||
.map((pt) => pt.id)
|
||||
if (ids.length === 0) {
|
||||
showNotification(`所有时段已是${enable ? '启用' : '禁用'}状态`, 'info')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const authConfig = getAuthConfig()
|
||||
await Promise.all(
|
||||
ids.map((id) =>
|
||||
$fetch(`/api/admin/play-times/${id}`, {
|
||||
method: 'PATCH',
|
||||
body: { enabled: enable },
|
||||
...authConfig
|
||||
})
|
||||
)
|
||||
)
|
||||
await fetchPlayTimes()
|
||||
showNotification(`已${enable ? '启用' : '禁用'} ${ids.length} 个时段`, 'success')
|
||||
} catch (err: any) {
|
||||
showNotification(err.message || '批量操作失败', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
// 取消表单
|
||||
const cancelForm = () => {
|
||||
showAddForm.value = false
|
||||
|
||||
@@ -291,26 +291,64 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">快捷时间填充</label>
|
||||
<span class="text-[10px] font-bold text-zinc-500">点击可一键套用常见时段</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="p in requestTimeQuickPresets"
|
||||
:key="p.label"
|
||||
type="button"
|
||||
class="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-xl text-[11px] font-bold text-zinc-400 hover:text-zinc-200 hover:border-zinc-700 hover:bg-zinc-900 transition-all whitespace-nowrap"
|
||||
@click="applyRequestTimePreset(p)"
|
||||
>
|
||||
{{ p.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
|
||||
>开始日期时间</label
|
||||
>
|
||||
<input
|
||||
v-model="formData.startTime"
|
||||
type="datetime-local"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-5 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
|
||||
>开始时间</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input
|
||||
v-model="formData.startDate"
|
||||
type="date"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-4 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
|
||||
>
|
||||
<input
|
||||
v-model="formData.startTimeOfDay"
|
||||
type="time"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-4 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
|
||||
>
|
||||
</div>
|
||||
<p class="text-[9px] text-zinc-600 px-1">
|
||||
实际值: {{ formData.startTime || '尚未设置' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
|
||||
>结束日期时间</label
|
||||
>
|
||||
<input
|
||||
v-model="formData.endTime"
|
||||
type="datetime-local"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-5 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
|
||||
>结束时间</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input
|
||||
v-model="formData.endDate"
|
||||
type="date"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-4 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
|
||||
>
|
||||
<input
|
||||
v-model="formData.endTimeOfDay"
|
||||
type="time"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-4 py-3.5 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30"
|
||||
>
|
||||
</div>
|
||||
<p class="text-[9px] text-zinc-600 px-1">
|
||||
实际值: {{ formData.endTime || '尚未设置' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -502,7 +540,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, reactive, ref, computed } from 'vue'
|
||||
import { onMounted, onUnmounted, reactive, ref, computed, watch } from 'vue'
|
||||
import { useAuth } from '~/composables/useAuth'
|
||||
import type { RequestTime } from '~~/types'
|
||||
import {
|
||||
@@ -521,6 +559,57 @@ import {
|
||||
Filter
|
||||
} from '@lucide/vue'
|
||||
|
||||
const addMinutes = (d: Date, mins: number) => {
|
||||
const r = new Date(d); r.setMinutes(r.getMinutes() + mins); return r
|
||||
}
|
||||
const addHours = (d: Date, h: number) => addMinutes(d, h * 60)
|
||||
const addDays = (d: Date, n: number) => {
|
||||
const r = new Date(d); r.setDate(r.getDate() + n); return r
|
||||
}
|
||||
const nextWeekday = (base: Date, target: number) => {
|
||||
const r = new Date(base)
|
||||
const diff = (target - r.getDay() + 7) % 7 || 7
|
||||
r.setDate(r.getDate() + diff)
|
||||
return r
|
||||
}
|
||||
const pad = (n: number) => n.toString().padStart(2, '0')
|
||||
const fmt = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||||
const splitDT = (dt: string): [string, string] => {
|
||||
if (!dt || !dt.includes('T')) return ['', '']
|
||||
const [d, t] = dt.split('T')
|
||||
return [d, t.slice(0, 5)]
|
||||
}
|
||||
|
||||
const requestTimeQuickPresets = [
|
||||
{ label: '立即开放 2 小时', apply: () => {
|
||||
const n = new Date()
|
||||
return { startTime: addMinutes(n, 5), endTime: addHours(n, 2) }
|
||||
}},
|
||||
{ label: '今晚 18:00-22:00', apply: () => {
|
||||
const t = new Date(); t.setHours(18, 0, 0, 0)
|
||||
return { startTime: t, endTime: addHours(t, 4) }
|
||||
}},
|
||||
{ label: '明天 12:00-14:00', apply: () => {
|
||||
const t = addDays(new Date(), 1); t.setHours(12, 0, 0, 0)
|
||||
return { startTime: t, endTime: addHours(t, 2) }
|
||||
}},
|
||||
{ label: '下周一至周五', apply: () => {
|
||||
const s = nextWeekday(new Date(), 1); s.setHours(0, 5, 0, 0)
|
||||
const e = addDays(s, 4); e.setHours(23, 59, 0, 0)
|
||||
return { startTime: s, endTime: e }
|
||||
}},
|
||||
{ label: '下周整周 7 天', apply: () => {
|
||||
const s = nextWeekday(new Date(), 1); s.setHours(0, 5, 0, 0)
|
||||
const e = addDays(s, 6); e.setHours(23, 59, 0, 0)
|
||||
return { startTime: s, endTime: e }
|
||||
}},
|
||||
{ label: '持续开放 30 天', apply: () => {
|
||||
const s = addMinutes(new Date(), 5)
|
||||
const e = addDays(s, 30); e.setHours(23, 59, 0, 0)
|
||||
return { startTime: s, endTime: e }
|
||||
}}
|
||||
]
|
||||
|
||||
const { getAuthConfig, isAdmin } = useAuth()
|
||||
|
||||
const requestTimes = ref<RequestTime[]>([])
|
||||
@@ -544,11 +633,51 @@ const formData = reactive({
|
||||
name: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
startDate: '',
|
||||
startTimeOfDay: '',
|
||||
endDate: '',
|
||||
endTimeOfDay: '',
|
||||
description: '',
|
||||
enabled: true,
|
||||
expected: 0
|
||||
})
|
||||
|
||||
// 日期+时间分离字段 <-> 合并的 datetime-local 字段双向同步
|
||||
const syncStartFromParts = () => {
|
||||
if (formData.startDate && formData.startTimeOfDay) {
|
||||
formData.startTime = `${formData.startDate}T${formData.startTimeOfDay}`
|
||||
} else if (!formData.startDate && !formData.startTimeOfDay) {
|
||||
formData.startTime = ''
|
||||
}
|
||||
}
|
||||
const syncEndFromParts = () => {
|
||||
if (formData.endDate && formData.endTimeOfDay) {
|
||||
formData.endTime = `${formData.endDate}T${formData.endTimeOfDay}`
|
||||
} else if (!formData.endDate && !formData.endTimeOfDay) {
|
||||
formData.endTime = ''
|
||||
}
|
||||
}
|
||||
watch(() => formData.startDate, syncStartFromParts)
|
||||
watch(() => formData.startTimeOfDay, syncStartFromParts)
|
||||
watch(() => formData.endDate, syncEndFromParts)
|
||||
watch(() => formData.endTimeOfDay, syncEndFromParts)
|
||||
|
||||
// 将 startTime/endTime 拆分到辅助字段（编辑时调用）
|
||||
const splitFormDateTime = () => {
|
||||
const [sd, st] = splitDT(formData.startTime)
|
||||
formData.startDate = sd; formData.startTimeOfDay = st
|
||||
const [ed, et] = splitDT(formData.endTime)
|
||||
formData.endDate = ed; formData.endTimeOfDay = et
|
||||
}
|
||||
|
||||
// 应用快捷时间预设
|
||||
const applyRequestTimePreset = (p: any) => {
|
||||
const { startTime, endTime } = p.apply()
|
||||
formData.startTime = fmt(startTime)
|
||||
formData.endTime = fmt(endTime)
|
||||
splitFormDateTime()
|
||||
}
|
||||
|
||||
// 统计数据
|
||||
const stats = computed(() => [
|
||||
{
|
||||
@@ -711,6 +840,7 @@ const editRequestTime = (RequestTime: RequestTime) => {
|
||||
enabled: RequestTime.enabled,
|
||||
expected: RequestTime.expected || 0
|
||||
})
|
||||
splitFormDateTime()
|
||||
}
|
||||
|
||||
const toggleRequestTimeStatus = async (RequestTime: RequestTime) => {
|
||||
@@ -827,6 +957,10 @@ const cancelForm = () => {
|
||||
name: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
startDate: '',
|
||||
startTimeOfDay: '',
|
||||
endDate: '',
|
||||
endTimeOfDay: '',
|
||||
description: '',
|
||||
enabled: true,
|
||||
expected: 0
|
||||
|
||||
@@ -7,27 +7,107 @@
|
||||
@update:modelValue="handleDateSelect"
|
||||
/>
|
||||
|
||||
<!-- 播出时段与自动排期配置 -->
|
||||
<!-- 播出时段标签组 + 自动排期策略 -->
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-3 bg-zinc-900/30 border border-zinc-800 rounded-xl p-3 md:p-4"
|
||||
class="space-y-3 bg-zinc-900/30 border border-zinc-800 rounded-xl p-3 md:p-4"
|
||||
>
|
||||
<div v-if="playTimeEnabled">
|
||||
<CustomSelect
|
||||
:model-value="selectedPlayTime"
|
||||
label="播出时段"
|
||||
:options="playTimeOptions"
|
||||
class-name="w-full"
|
||||
@update:model-value="handlePlayTimeSelect"
|
||||
/>
|
||||
<!-- 播出时段：标签按钮组（直接点击切换） -->
|
||||
<div v-if="playTimeEnabled && playTimes.length > 0" class="space-y-2">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">播出时段</span>
|
||||
<span class="text-[10px] font-bold text-zinc-500">
|
||||
{{ selectedPlayTime ? '已按时段过滤' : '显示全天排期' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
:class="[
|
||||
'px-4 py-2 rounded-xl text-xs font-black border transition-all whitespace-nowrap',
|
||||
selectedPlayTime === ''
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/20'
|
||||
: 'bg-zinc-950 border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700'
|
||||
]"
|
||||
@click="handlePlayTimeSelect('')"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<Layers :size="12" />
|
||||
全部时段 (全天)
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-for="pt in playTimes"
|
||||
:key="pt.id"
|
||||
:disabled="!pt.enabled"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-xl text-xs font-black border transition-all whitespace-nowrap',
|
||||
selectedPlayTime === String(pt.id)
|
||||
? pt.enabled
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/20'
|
||||
: 'bg-zinc-700 border-zinc-600 text-zinc-300'
|
||||
: pt.enabled
|
||||
? 'bg-zinc-950 border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700'
|
||||
: 'bg-zinc-950/40 border-zinc-800/40 text-zinc-700 cursor-not-allowed'
|
||||
]"
|
||||
@click="pt.enabled && handlePlayTimeSelect(String(pt.id))"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<Clock :size="12" />
|
||||
<span>{{ pt.name }}</span>
|
||||
<span
|
||||
v-if="pt.startTime || pt.endTime"
|
||||
class="opacity-70 font-bold"
|
||||
>
|
||||
{{ pt.startTime || '--' }}-{{ pt.endTime || '--' }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!pt.enabled"
|
||||
class="ml-1 px-1.5 py-0.5 text-[9px] bg-zinc-800 rounded text-zinc-500"
|
||||
>已禁用</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="playTimeEnabled ? '' : 'md:col-span-2'">
|
||||
<CustomSelect
|
||||
:model-value="autoScheduleStrategy"
|
||||
label="自动排期策略"
|
||||
:options="scheduleStrategyOptions"
|
||||
class-name="w-full"
|
||||
@update:model-value="handleStrategyChange"
|
||||
/>
|
||||
|
||||
<!-- 自动排期策略 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div :class="playTimeEnabled ? '' : 'md:col-span-2'">
|
||||
<CustomSelect
|
||||
:model-value="autoScheduleStrategy"
|
||||
label="自动排期策略"
|
||||
:options="scheduleStrategyOptions"
|
||||
class-name="w-full"
|
||||
@update:model-value="handleStrategyChange"
|
||||
/>
|
||||
</div>
|
||||
<!-- 快速统计信息 -->
|
||||
<div
|
||||
v-if="playTimeEnabled && playTimes.length > 0"
|
||||
class="hidden md:flex items-center gap-3 bg-zinc-950/60 border border-zinc-800 rounded-xl px-4 py-2"
|
||||
>
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-600/20 text-blue-400 flex items-center justify-center">
|
||||
<ListMusic :size="14" />
|
||||
</div>
|
||||
<div class="flex flex-col leading-tight">
|
||||
<span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">当前列表</span>
|
||||
<span class="text-sm font-black text-zinc-200">
|
||||
{{ localScheduledSongs.length }} 首 / {{ playTimeScheduledCount }} 首
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-zinc-800" />
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-purple-600/20 text-purple-400 flex items-center justify-center">
|
||||
<Inbox :size="14" />
|
||||
</div>
|
||||
<div class="flex flex-col leading-tight">
|
||||
<span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">待排歌曲</span>
|
||||
<span class="text-sm font-black text-zinc-200">
|
||||
{{ filteredUnscheduledSongs.length }} 首
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -851,7 +931,9 @@ import {
|
||||
MessageSquare,
|
||||
Image,
|
||||
CalendarDays,
|
||||
Image as ImageIcon
|
||||
Image as ImageIcon,
|
||||
Layers,
|
||||
Inbox
|
||||
} from '@lucide/vue'
|
||||
import AdminDatePicker from './AdminDatePicker.vue'
|
||||
import PlaylistCardGenerator from './PlaylistCardGenerator.vue'
|
||||
@@ -1033,6 +1115,20 @@ const playTimeOptions = computed(() => {
|
||||
return options
|
||||
})
|
||||
|
||||
// 当前时段（全天）内所有已排歌曲数（用于对比显示）
|
||||
const playTimeScheduledCount = computed(() => {
|
||||
if (!selectedPlayTime.value) return localScheduledSongs.length
|
||||
try {
|
||||
const ptId = parseInt(selectedPlayTime.value)
|
||||
return (playTimes.value || []).reduce((sum, pt) => {
|
||||
if (pt.id === ptId) return sum
|
||||
return sum
|
||||
}, 0)
|
||||
} catch (e) {
|
||||
return localScheduledSongs.length
|
||||
}
|
||||
})
|
||||
|
||||
// 排序选项
|
||||
const sortOptions = [
|
||||
{ label: '最新投稿', value: 'time-desc' },
|
||||
|
||||
Reference in New Issue
Block a user