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

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

app/components/Admin/AdminMultiDatePicker.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,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>