feat(admin): 优化后台日期选择器和播出时段交互流程

- AdminDatePicker: 新增可展开月历网格 + 6 个快捷日期跳转按钮
- AdminMultiDatePicker: 新增 8 种批量预设 + Shift 范围选择 + 月历网格
- PlayTimeManager: 新增 6 个校园广播快速模板 + 时段复制 + 批量启停
- ScheduleManager: 播出时段从下拉改为标签按钮组 + 增加统计卡片
- RequestTimeManager: datetime-local 拆分为日期+时间双输入 + 6 种快捷预设

app/components/Admin/AdminDatePicker.vue

@@ -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>