From 19ab33b10284cc04606a2490bddb752bbb72e95e Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 13 Sep 2026 02:04:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E4=BC=98=E5=8C=96=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8=E5=92=8C?=
 =?UTF-8?q?=E6=92=AD=E5=87=BA=E6=97=B6=E6=AE=B5=E4=BA=A4=E4=BA=92=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AdminDatePicker: 新增可展开月历网格 + 6 个快捷日期跳转按钮
- AdminMultiDatePicker: 新增 8 种批量预设 + Shift 范围选择 + 月历网格
- PlayTimeManager: 新增 6 个校园广播快速模板 + 时段复制 + 批量启停
- ScheduleManager: 播出时段从下拉改为标签按钮组 + 增加统计卡片
- RequestTimeManager: datetime-local 拆分为日期+时间双输入 + 6 种快捷预设
---
 app/components/Admin/AdminDatePicker.vue      | 251 +++++++++---
 app/components/Admin/AdminMultiDatePicker.vue | 364 ++++++++++++++----
 app/components/Admin/PlayTimeManager.vue      | 106 ++++-
 app/components/Admin/RequestTimeManager.vue   | 160 +++++++-
 app/components/Admin/ScheduleManager.vue      | 134 ++++++-
 5 files changed, 839 insertions(+), 176 deletions(-)

diff --git a/app/components/Admin/AdminDatePicker.vue b/app/components/Admin/AdminDatePicker.vue
index b063b06..9017dc5 100644
--- a/app/components/Admin/AdminDatePicker.vue
+++ b/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>
diff --git a/app/components/Admin/AdminMultiDatePicker.vue b/app/components/Admin/AdminMultiDatePicker.vue
index 1f5ca30..2457eac 100644
--- a/app/components/Admin/AdminMultiDatePicker.vue
+++ b/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>
diff --git a/app/components/Admin/PlayTimeManager.vue b/app/components/Admin/PlayTimeManager.vue
index 7315f1d..114a5d8 100644
--- a/app/components/Admin/PlayTimeManager.vue
+++ b/app/components/Admin/PlayTimeManager.vue
@@ -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
diff --git a/app/components/Admin/RequestTimeManager.vue b/app/components/Admin/RequestTimeManager.vue
index 762281f..2ead769 100644
--- a/app/components/Admin/RequestTimeManager.vue
+++ b/app/components/Admin/RequestTimeManager.vue
@@ -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
diff --git a/app/components/Admin/ScheduleManager.vue b/app/components/Admin/ScheduleManager.vue
index b293fbc..c87344a 100644
--- a/app/components/Admin/ScheduleManager.vue
+++ b/app/components/Admin/ScheduleManager.vue
@@ -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' },