BYW-VoiceHub/app/components/Admin/AdminDatePicker.vue

<template>
  <div class="relative bg-zinc-50/50 border border-zinc-200 rounded-xl p-1 overflow-hidden">
    <!-- 简化版日期选择显示 -->
    <div class="flex items-center justify-between px-2.5 py-1.5" @click="toggleCalendar" style="cursor: pointer">
      <div class="flex items-center gap-2.5">
        <div class="flex flex-col items-center justify-center w-9 h-9 rounded-md bg-blue-600 text-white shadow shadow-blue-900/20">
          <span class="text-[9px] font-bold uppercase tracking-wider opacity-80 leading-tight">{{ getWeekday(modelValue) }}</span>
          <span class="text-base font-black leading-none my-0">{{ getDay(modelValue) }}</span>
        </div>
        <div class="flex flex-col">
          <span class="text-xs font-bold text-zinc-700">{{ modelValue }}</span>
          <span class="text-[10px] text-zinc-500 font-medium leading-tight">{{ isToday(modelValue) ? '今天' : '' }}</span>
        </div>
      </div>

      <div class="flex items-center border-l border-zinc-200 pl-2">
        <button class="p-1.5 text-zinc-500 hover:text-emerald-700 transition-colors" title="跳转到今天" @click.stop="scrollToToday">
          <CircleDot class="w-4 h-4" />
        </button>
        <button
          class="p-1.5 text-zinc-500 hover:text-blue-700 transition-colors"
          :class="{ 'text-blue-700': showCalendar }"
          title="打开月历"
        >
          <CalendarIcon class="w-4 h-4" />
        </button>
      </div>
    </div>

    <!-- 快捷选择区 + 月历网格 -->
    <Transition name="expand">
      <div v-if="showCalendar" class="border-t border-zinc-200/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-white border-zinc-200 text-zinc-400 hover:text-zinc-700 hover:border-zinc-200'
            ]"
            @click="handleQuickSelect(q.value)"
          >
            {{ q.label }}
          </button>
        </div>

        <!-- 月历网格 -->
        <div class="bg-white/80 border border-zinc-200 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-700 rounded-lg hover:bg-zinc-100 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-700">{{ calendarYear }}年</span>
              <select
                v-model="calendarMonth"
                class="bg-white border border-zinc-200 rounded-lg px-2 py-1 text-sm font-black text-zinc-700 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-700 rounded-lg hover:bg-zinc-100 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-700 rounded-lg hover:bg-zinc-100 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-100 hover:text-zinc-700' : '',
                cell.inMonth && modelValue !== cell.dateStr && cell.isToday
                  ? 'text-emerald-700 ring-1 ring-emerald-500/40 hover:bg-zinc-100' : '',
                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>
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { CircleDot, Calendar as CalendarIcon } from '@lucide/vue'

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const showCalendar = ref(false)

const pad = (n) => n.toString().padStart(2, '0')
const formatDateStr = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
const addDays = (d, n) => { const x = new Date(d); x.setHours(0, 0, 0, 0); x.setDate(x.getDate() + n); return x }
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()

const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']

const getWeekday = (dateStr) => {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return weekdayNames[d.getDay()]
}

const getDay = (dateStr) => {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.getDate().toString().padStart(2, '0')
}

const isToday = (dateStr) => {
  if (!dateStr) return false
  const d = new Date(dateStr)
  return sameDay(d, new Date())
}

const today = new Date(); today.setHours(0, 0, 0, 0)
const calendarYear = ref(today.getFullYear())
const calendarMonth = ref(today.getMonth())

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)
  showCalendar.value = false
}

const scrollToToday = () => {
  const todayStr = formatDateStr(today)
  if (props.modelValue !== todayStr) selectDate(todayStr)
}

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 goToday = () => {
  calendarYear.value = today.getFullYear()
  calendarMonth.value = today.getMonth()
}

const handleQuickSelect = (dateValue) => {
  if (props.modelValue !== dateValue) selectDate(dateValue)
}
</script>

<style scoped>
.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;
}
.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>