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

<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 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>
      </button>

      <div
        ref="dateSelector"
        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"
      >
        <button
          v-for="date in availableDates"
          :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 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',
            date.isToday && modelValue !== date.value ? 'ring-1 ring-emerald-500/50' : ''
          ]"
          @click="selectDate(date.value)"
        >
          <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>
        </button>
      </div>

      <button
        :disabled="isLastDateVisible"
        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 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"
          :class="{ 'text-blue-400': showCalendar }"
          title="打开月历"
          @click="toggleCalendar"
        >
          <CalendarIcon class="w-5 h-5" />
        </button>
      </div>
    </div>

    <!-- 快捷选择区 + 月历网格 -->
    <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="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>
    </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 dateSelector = ref(null)
const isFirstDateVisible = ref(false)
const isLastDateVisible = ref(false)
const dateRange = ref({ start: -10, end: 15 })
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 today = new Date(); today.setHours(0, 0, 0, 0)
const calendarYear = ref(today.getFullYear())
const calendarMonth = ref(today.getMonth())

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

const availableDates = computed(() => {
  const dates = []
  for (let i = dateRange.value.start; i <= dateRange.value.end; i++) {
    const date = addDays(today, i)
    dates.push({
      value: formatDateStr(date),
      day: date.getDate().toString().padStart(2, '0'),
      month: (date.getMonth() + 1).toString().padStart(2, '0'),
      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)
}

const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue) => {
  if (!dateSelector.value) return
  const dateKey = targetDate || formatDateStr(today)
  const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
  if (!el) return
  el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
}

const handleWheel = (event) => {
  event.preventDefault()
  if (!dateSelector.value) return
  const scrollAmount = 160
  const currentScroll = dateSelector.value.scrollLeft
  dateSelector.value.scrollTo({
    left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
    behavior: 'smooth'
  })
}

const scrollDates = (direction) => {
  if (!dateSelector.value) return
  const scrollAmount = 160
  const currentScroll = dateSelector.value.scrollLeft
  dateSelector.value.scrollTo({
    left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
    behavior: 'smooth'
  })
}

const handleScroll = () => {
  if (!dateSelector.value) return
  const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
  if (scrollLeft < 100) {
    const oldScrollWidth = scrollWidth
    dateRange.value.start -= 5
    nextTick(() => {
      const newScrollWidth = dateSelector.value.scrollWidth
      dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
    })
  }
  if (scrollWidth - scrollLeft - clientWidth < 100) {
    dateRange.value.end += 5
  }
}

const scrollToToday = () => {
  const todayStr = formatDateStr(today)
  if (props.modelValue !== todayStr) selectDate(todayStr)
  if (dateRange.value.start > 0 || dateRange.value.end < 0) {
    dateRange.value.start = -10
    dateRange.value.end = 15
  }
  nextTick(() => scrollToDateElement('smooth'))
}

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)
  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 - 3
      dateRange.value.end = diffDays + 5
    }
    nextTick(() => scrollToDateElement('smooth'))
  })
}

watch(() => props.modelValue, () => {
  nextTick(() => scrollToDateElement('smooth'))
})

onMounted(() => {
  nextTick(() => scrollToDateElement(props.modelValue ? 'auto' : 'smooth'))
})
</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>