foucui 1.0.1

package/components/QiuDate/index.vue

@@ -0,0 +1,1134 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-date"
+    :class="[
+      `qiu-date--${type}`,
+      { 'is-disabled': disabled, 'is-focused': panelVisible },
+    ]"
+  >
+    <div class="qiu-date__editor" @click="togglePanel">
+      <template v-if="isRange">
+        <input
+          class="qiu-date__input"
+          :value="displayStartText"
+          :placeholder="startPlaceholder || startPlaceholderFallback"
+          readonly
+          :disabled="disabled"
+        />
+        <span class="qiu-date__separator">{{ rangeSeparator }}</span>
+        <input
+          class="qiu-date__input"
+          :value="displayEndText"
+          :placeholder="endPlaceholder || endPlaceholderFallback"
+          readonly
+          :disabled="disabled"
+        />
+      </template>
+      <input
+        v-else
+        class="qiu-date__input qiu-date__input--single"
+        :value="singleText"
+        :placeholder="placeholder || singlePlaceholderFallback"
+        readonly
+        :disabled="disabled"
+      />
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="qiu-date__clear"
+        @click.stop="clearValue"
+      >
+        ×
+      </button>
+      <qiu-icon icon="calendar-line" class="qiu-date__icon" />
+    </div>
+
+    <Teleport to="body">
+      <Transition name="qiu-date-fade">
+        <div
+          v-if="panelVisible"
+          ref="panelRef"
+          class="qiu-date-panel"
+          :class="[
+            popperClass,
+            {
+              'qiu-date-panel--lunar': showLunar && panelUnit === 'date',
+              'qiu-date-panel--range': isRange,
+              [`qiu-date-panel--${panelUnit}`]: true,
+            },
+          ]"
+          :style="panelStyle"
+          @mousedown.prevent
+        >
+          <div class="qiu-date-panel__body" :class="{ 'is-range': isRange }">
+            <!-- 左面板 / 单面板 -->
+            <div class="qiu-date-panel__side">
+              <div class="qiu-date-panel__header">
+                <button type="button" class="qiu-date-panel__nav" @click="navLeft(-1)">‹</button>
+                <span class="qiu-date-panel__title">{{ leftTitle }}</span>
+                <button type="button" class="qiu-date-panel__nav" @click="navLeft(1)">›</button>
+              </div>
+
+              <template v-if="panelUnit === 'date'">
+                <div class="qiu-date-panel__weeks">
+                  <span v-for="w in weekLabels" :key="w" class="qiu-date-panel__week">{{ w }}</span>
+                </div>
+                <div class="qiu-date-panel__grid qiu-date-panel__grid--day">
+                  <button
+                    v-for="cell in leftDayCells"
+                    :key="`l-${cell.key}`"
+                    type="button"
+                    class="qiu-date-panel__cell"
+                    :class="cellClass(cell)"
+                    :disabled="cell.disabled"
+                    @click="pickOnSide('start', cell)"
+                  >
+                    <div
+                      class="qiu-date__cell"
+                      :class="{ 'is-selected': cell.selected, 'is-today': cell.isToday }"
+                    >
+                      <span class="qiu-date__solar">{{ cell.day }}</span>
+                      <span
+                        v-if="showLunar"
+                        class="qiu-date__lunar"
+                        :class="{ 'is-festival': cell.lunar.festival }"
+                      >
+                        {{ cell.lunar.label }}
+                      </span>
+                    </div>
+                  </button>
+                </div>
+              </template>
+
+              <div v-else-if="panelUnit === 'month'" class="qiu-date-panel__grid qiu-date-panel__grid--month">
+                <button
+                  v-for="cell in leftMonthCells"
+                  :key="`lm-${cell.key}`"
+                  type="button"
+                  class="qiu-date-panel__cell qiu-date-panel__cell--month"
+                  :class="cellClass(cell)"
+                  :disabled="cell.disabled"
+                  @click="pickOnSide('start', cell)"
+                >
+                  <div class="qiu-date__cell" :class="{ 'is-selected': cell.selected }">
+                    <span class="qiu-date__solar">{{ cell.label }}</span>
+                  </div>
+                </button>
+              </div>
+
+              <div v-else class="qiu-date-panel__grid qiu-date-panel__grid--year">
+                <button
+                  v-for="cell in leftYearCells"
+                  :key="`ly-${cell.key}`"
+                  type="button"
+                  class="qiu-date-panel__cell qiu-date-panel__cell--year"
+                  :class="cellClass(cell)"
+                  :disabled="cell.disabled"
+                  @click="pickOnSide('start', cell)"
+                >
+                  <div class="qiu-date__cell" :class="{ 'is-selected': cell.selected }">
+                    <span class="qiu-date__solar">{{ cell.label }}</span>
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <!-- 右面板（区间） -->
+            <div v-if="isRange" class="qiu-date-panel__side">
+              <div class="qiu-date-panel__header">
+                <button type="button" class="qiu-date-panel__nav" @click="navRight(-1)">‹</button>
+                <span class="qiu-date-panel__title">{{ rightTitle }}</span>
+                <button type="button" class="qiu-date-panel__nav" @click="navRight(1)">›</button>
+              </div>
+
+              <template v-if="panelUnit === 'date'">
+                <div class="qiu-date-panel__weeks">
+                  <span v-for="w in weekLabels" :key="`r-${w}`" class="qiu-date-panel__week">{{ w }}</span>
+                </div>
+                <div class="qiu-date-panel__grid qiu-date-panel__grid--day">
+                  <button
+                    v-for="cell in rightDayCells"
+                    :key="`r-${cell.key}`"
+                    type="button"
+                    class="qiu-date-panel__cell"
+                    :class="cellClass(cell)"
+                    :disabled="cell.disabled"
+                    @click="pickOnSide('end', cell)"
+                  >
+                    <div
+                      class="qiu-date__cell"
+                      :class="{ 'is-selected': cell.selected, 'is-today': cell.isToday }"
+                    >
+                      <span class="qiu-date__solar">{{ cell.day }}</span>
+                      <span
+                        v-if="showLunar"
+                        class="qiu-date__lunar"
+                        :class="{ 'is-festival': cell.lunar.festival }"
+                      >
+                        {{ cell.lunar.label }}
+                      </span>
+                    </div>
+                  </button>
+                </div>
+              </template>
+
+              <div v-else-if="panelUnit === 'month'" class="qiu-date-panel__grid qiu-date-panel__grid--month">
+                <button
+                  v-for="cell in rightMonthCells"
+                  :key="`rm-${cell.key}`"
+                  type="button"
+                  class="qiu-date-panel__cell qiu-date-panel__cell--month"
+                  :class="cellClass(cell)"
+                  :disabled="cell.disabled"
+                  @click="pickOnSide('end', cell)"
+                >
+                  <div class="qiu-date__cell" :class="{ 'is-selected': cell.selected }">
+                    <span class="qiu-date__solar">{{ cell.label }}</span>
+                  </div>
+                </button>
+              </div>
+
+              <div v-else class="qiu-date-panel__grid qiu-date-panel__grid--year">
+                <button
+                  v-for="cell in rightYearCells"
+                  :key="`ry-${cell.key}`"
+                  type="button"
+                  class="qiu-date-panel__cell qiu-date-panel__cell--year"
+                  :class="cellClass(cell)"
+                  :disabled="cell.disabled"
+                  @click="pickOnSide('end', cell)"
+                >
+                  <div class="qiu-date__cell" :class="{ 'is-selected': cell.selected }">
+                    <span class="qiu-date__solar">{{ cell.label }}</span>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="isRange" class="qiu-date-panel__footer">
+            <button type="button" class="qiu-date-panel__btn qiu-date-panel__btn--text" @click="onCancel">
+              取消
+            </button>
+            <button
+              type="button"
+              class="qiu-date-panel__btn qiu-date-panel__btn--primary"
+              :disabled="!canConfirm"
+              @click="onConfirm"
+            >
+              确定
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuDate — 纯自研日历面板 + 中国农历
+ * 区间模式：左右双面板 + 联动纠偏 + 确定/取消（参考 el-date-picker）
+ */
+import { Solar } from 'lunar-javascript'
+
+defineOptions({ name: 'QiuDate' })
+
+type PanelUnit = 'date' | 'month' | 'year'
+type Side = 'start' | 'end'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    showLunar?: boolean
+    type?: string
+    placeholder?: string
+    startPlaceholder?: string
+    endPlaceholder?: string
+    format?: string
+    valueFormat?: string
+    disabled?: boolean
+    clearable?: boolean
+    size?: 'large' | 'default' | 'small'
+    editable?: boolean
+    readonly?: boolean
+    rangeSeparator?: string
+    disabledDate?: (date: Date) => boolean
+    shortcuts?: any[]
+    teleported?: boolean
+    popperClass?: string
+  }>(),
+  {
+    showLunar: true,
+    type: 'date',
+    clearable: true,
+    editable: true,
+    rangeSeparator: '至',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [any]
+  change: [any]
+  'calendar-change': [any]
+  'visible-change': [boolean]
+  'panel-change': [any]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const panelVisible = ref(false)
+const panelStyle = ref<Record<string, string>>({})
+
+const leftYear = ref(new Date().getFullYear())
+const leftMonth = ref(new Date().getMonth())
+const rightYear = ref(new Date().getFullYear())
+const rightMonth = ref(new Date().getMonth())
+/** 年份面板十年起点 */
+const leftDecade = ref(Math.floor(new Date().getFullYear() / 10) * 10)
+const rightDecade = ref(Math.floor(new Date().getFullYear() / 10) * 10 + 10)
+
+const draftStart = ref<Date | null>(null)
+const draftEnd = ref<Date | null>(null)
+
+const weekLabels = ['日', '一', '二', '三', '四', '五', '六']
+const monthLabels = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+
+const panelUnit = computed<PanelUnit>(() => {
+  const t = props.type || 'date'
+  if (t === 'year' || t === 'yearrange') return 'year'
+  if (t === 'month' || t === 'monthrange') return 'month'
+  return 'date'
+})
+
+const isRange = computed(() =>
+  ['daterange', 'datetimerange', 'monthrange', 'yearrange'].includes(props.type || '')
+)
+
+const resolveDateFormats = (type: string) => {
+  switch (type) {
+    case 'datetime':
+    case 'datetimerange':
+      return { format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    case 'month':
+    case 'monthrange':
+      return { format: 'YYYY-MM', valueFormat: 'YYYY-MM' }
+    case 'year':
+    case 'yearrange':
+      return { format: 'YYYY', valueFormat: 'YYYY' }
+    default:
+      return { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' }
+  }
+}
+
+const valueFormat = computed(
+  () => props.valueFormat || resolveDateFormats(props.type || 'date').valueFormat
+)
+const displayFormat = computed(
+  () => props.format || resolveDateFormats(props.type || 'date').format
+)
+
+const startPlaceholderFallback = computed(() => {
+  if (panelUnit.value === 'year') return '开始年份'
+  if (panelUnit.value === 'month') return '开始月份'
+  return '开始日期'
+})
+const endPlaceholderFallback = computed(() => {
+  if (panelUnit.value === 'year') return '结束年份'
+  if (panelUnit.value === 'month') return '结束月份'
+  return '结束日期'
+})
+const singlePlaceholderFallback = computed(() => {
+  if (panelUnit.value === 'year') return '选择年份'
+  if (panelUnit.value === 'month') return '选择月份'
+  return '选择日期'
+})
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+const formatDate = (d: Date | null, fmt: string) => {
+  if (!d) return ''
+  return fmt
+    .replace('YYYY', String(d.getFullYear()))
+    .replace('MM', pad(d.getMonth() + 1))
+    .replace('DD', pad(d.getDate()))
+}
+
+const parseValue = (v: any): Date | null => {
+  if (!v && v !== 0) return null
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : v
+  const s = String(v).trim()
+  if (!s) return null
+  let m = s.match(/^(\d{4})-(\d{2})-(\d{2})/)
+  if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+  m = s.match(/^(\d{4})-(\d{2})$/)
+  if (m) return new Date(Number(m[1]), Number(m[2]) - 1, 1)
+  m = s.match(/^(\d{4})$/)
+  if (m) return new Date(Number(m[1]), 0, 1)
+  return null
+}
+
+const parseRange = (v: any): [Date | null, Date | null] => {
+  if (!Array.isArray(v)) return [null, null]
+  return [parseValue(v[0]), parseValue(v[1])]
+}
+
+const toOutput = (d: Date) => formatDate(d, valueFormat.value)
+
+const dayStart = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate())
+const monthStart = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1)
+const yearStart = (d: Date) => new Date(d.getFullYear(), 0, 1)
+
+const normalizeUnit = (d: Date) => {
+  if (panelUnit.value === 'year') return yearStart(d)
+  if (panelUnit.value === 'month') return monthStart(d)
+  return dayStart(d)
+}
+
+const unitTime = (d: Date) => normalizeUnit(d).getTime()
+
+const sameUnit = (a: Date | null, b: Date | null) => !!a && !!b && unitTime(a) === unitTime(b)
+
+const addMonths = (d: Date, n: number) => {
+  const next = new Date(d.getFullYear(), d.getMonth() + n, 1)
+  if (panelUnit.value === 'date') {
+    const day = d.getDate()
+    const max = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate()
+    next.setDate(Math.min(day, max))
+  }
+  return normalizeUnit(next)
+}
+
+const addYears = (d: Date, n: number) => {
+  const next = new Date(d)
+  next.setFullYear(d.getFullYear() + n)
+  return normalizeUnit(next)
+}
+
+const shiftEndForward = (start: Date) =>
+  panelUnit.value === 'year' ? addYears(start, 1) : addMonths(start, 1)
+
+const shiftStartBackward = (end: Date) =>
+  panelUnit.value === 'year' ? addYears(end, -1) : addMonths(end, -1)
+
+const singleDate = computed(() => (isRange.value ? null : parseValue(props.modelValue)))
+const rangeDates = computed((): [Date | null, Date | null] =>
+  isRange.value ? parseRange(props.modelValue) : [null, null]
+)
+
+const activeStart = computed(() => (panelVisible.value && isRange.value ? draftStart.value : rangeDates.value[0]))
+const activeEnd = computed(() => (panelVisible.value && isRange.value ? draftEnd.value : rangeDates.value[1]))
+
+const singleText = computed(() => formatDate(singleDate.value, displayFormat.value))
+const displayStartText = computed(() =>
+  formatDate(panelVisible.value ? draftStart.value : rangeDates.value[0], displayFormat.value)
+)
+const displayEndText = computed(() =>
+  formatDate(panelVisible.value ? draftEnd.value : rangeDates.value[1], displayFormat.value)
+)
+
+const hasValue = computed(() => {
+  if (isRange.value) return !!(rangeDates.value[0] || rangeDates.value[1])
+  return !!singleDate.value
+})
+
+const canConfirm = computed(() => !!(draftStart.value && draftEnd.value))
+
+const leftTitle = computed(() => {
+  if (panelUnit.value === 'year') return `${leftDecade.value}年 - ${leftDecade.value + 9}年`
+  if (panelUnit.value === 'month') return `${leftYear.value}年`
+  return `${leftYear.value}年 ${leftMonth.value + 1}月`
+})
+
+const rightTitle = computed(() => {
+  if (panelUnit.value === 'year') return `${rightDecade.value}年 - ${rightDecade.value + 9}年`
+  if (panelUnit.value === 'month') return `${rightYear.value}年`
+  return `${rightYear.value}年 ${rightMonth.value + 1}月`
+})
+
+const lunarCache = new Map<string, { label: string; festival?: string }>()
+
+const lunarOfDate = (d: Date) => {
+  try {
+    const key = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
+    if (lunarCache.has(key)) return lunarCache.get(key)!
+    const solar = Solar.fromYmd(d.getFullYear(), d.getMonth() + 1, d.getDate())
+    const lunar = solar.getLunar()
+    const festivals = [...lunar.getFestivals(), ...solar.getFestivals()]
+    const jieQi = lunar.getJieQi()
+    let label = lunar.getDayInChinese()
+    let festival = ''
+    if (festivals.length) {
+      festival = festivals[0]
+      label = festival
+    } else if (jieQi) {
+      festival = jieQi
+      label = jieQi
+    } else if (lunar.getDay() === 1) {
+      label = lunar.getMonthInChinese() + '月'
+    }
+    const info = { label, festival: festival || undefined }
+    lunarCache.set(key, info)
+    return info
+  } catch {
+    return { label: '' }
+  }
+}
+
+const isToday = (d: Date) => {
+  const n = new Date()
+  return d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate()
+}
+
+const inRangeUnit = (d: Date, start: Date | null, end: Date | null) => {
+  if (!start || !end) return false
+  const t = unitTime(d)
+  const a = unitTime(start)
+  const b = unitTime(end)
+  const lo = Math.min(a, b)
+  const hi = Math.max(a, b)
+  return t >= lo && t <= hi
+}
+
+const rangeStateOf = (date: Date) => {
+  const s = isRange.value ? activeStart.value : null
+  const e = isRange.value ? activeEnd.value : null
+  if (isRange.value) {
+    if (sameUnit(date, s) && sameUnit(date, e)) return 'start-date end-date'
+    if (sameUnit(date, s)) return 'start-date'
+    if (sameUnit(date, e)) return 'end-date'
+    if (inRangeUnit(date, s, e)) return 'in-range'
+    return ''
+  }
+  return ''
+}
+
+const buildDayCells = (y: number, m: number) => {
+  const first = new Date(y, m, 1)
+  const startOffset = first.getDay()
+  const daysInMonth = new Date(y, m + 1, 0).getDate()
+  const cells: any[] = []
+
+  const push = (date: Date, inMonth: boolean) => {
+    const disabled = props.disabledDate?.(date) ?? false
+    const selected = isRange.value
+      ? sameUnit(date, activeStart.value) || sameUnit(date, activeEnd.value)
+      : sameUnit(date, singleDate.value)
+    cells.push({
+      key: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
+      date: normalizeUnit(date),
+      day: date.getDate(),
+      label: String(date.getDate()),
+      inMonth,
+      disabled,
+      selected,
+      rangeState: rangeStateOf(date),
+      isToday: isToday(date),
+      lunar: lunarOfDate(date),
+    })
+  }
+
+  for (let i = 0; i < startOffset; i++) {
+    push(new Date(y, m, -startOffset + i + 1), false)
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    push(new Date(y, m, day), true)
+  }
+  while (cells.length % 7 !== 0) {
+    const last = cells[cells.length - 1].date as Date
+    push(new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1), false)
+  }
+  return cells
+}
+
+const buildMonthCells = (y: number) =>
+  monthLabels.map((label, i) => {
+    const date = new Date(y, i, 1)
+    const disabled = props.disabledDate?.(date) ?? false
+    const selected = isRange.value
+      ? sameUnit(date, activeStart.value) || sameUnit(date, activeEnd.value)
+      : sameUnit(date, singleDate.value)
+    return {
+      key: `${y}-${i}`,
+      date: normalizeUnit(date),
+      label,
+      day: i + 1,
+      inMonth: true,
+      disabled,
+      selected,
+      rangeState: rangeStateOf(date),
+      isToday: false,
+      lunar: { label: '' },
+    }
+  })
+
+const buildYearCells = (decade: number) =>
+  Array.from({ length: 10 }, (_, i) => {
+    const y = decade + i
+    const date = new Date(y, 0, 1)
+    const disabled = props.disabledDate?.(date) ?? false
+    const selected = isRange.value
+      ? sameUnit(date, activeStart.value) || sameUnit(date, activeEnd.value)
+      : sameUnit(date, singleDate.value)
+    return {
+      key: `y-${y}`,
+      date: normalizeUnit(date),
+      label: String(y),
+      day: y,
+      inMonth: true,
+      disabled,
+      selected,
+      rangeState: rangeStateOf(date),
+      isToday: false,
+      lunar: { label: '' },
+    }
+  })
+
+const leftDayCells = computed(() => buildDayCells(leftYear.value, leftMonth.value))
+const rightDayCells = computed(() => buildDayCells(rightYear.value, rightMonth.value))
+const leftMonthCells = computed(() => buildMonthCells(leftYear.value))
+const rightMonthCells = computed(() => buildMonthCells(rightYear.value))
+const leftYearCells = computed(() => buildYearCells(leftDecade.value))
+const rightYearCells = computed(() => buildYearCells(rightDecade.value))
+
+const cellClass = (cell: any) => {
+  const rs = String(cell.rangeState || '')
+  return {
+    'is-other-month': !cell.inMonth,
+    'is-disabled': cell.disabled,
+    'is-selected': cell.selected,
+    'is-today': cell.isToday,
+    'in-range': rs.includes('in-range'),
+    'start-date': rs.includes('start-date'),
+    'end-date': rs.includes('end-date'),
+  }
+}
+
+const syncRightViewAfterLeft = () => {
+  if (panelUnit.value === 'date') {
+    let y = leftYear.value
+    let m = leftMonth.value + 1
+    if (m > 11) {
+      m = 0
+      y += 1
+    }
+    rightYear.value = y
+    rightMonth.value = m
+  } else if (panelUnit.value === 'month') {
+    rightYear.value = leftYear.value + 1
+  } else {
+    rightDecade.value = leftDecade.value + 10
+  }
+}
+
+const syncLeftViewFromStart = (d: Date) => {
+  leftYear.value = d.getFullYear()
+  leftMonth.value = d.getMonth()
+  leftDecade.value = Math.floor(d.getFullYear() / 10) * 10
+}
+
+const syncRightViewFromEnd = (d: Date) => {
+  rightYear.value = d.getFullYear()
+  rightMonth.value = d.getMonth()
+  rightDecade.value = Math.floor(d.getFullYear() / 10) * 10
+}
+
+const updatePanelPosition = () => {
+  const root = rootRef.value
+  const panel = panelRef.value
+  if (!root) return
+  const rect = root.getBoundingClientRect()
+  const panelW = panel?.offsetWidth || (isRange.value ? 640 : 322)
+  const panelH = panel?.offsetHeight || 360
+  let top = rect.bottom + 4
+  let left = rect.left
+  if (left + panelW > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - panelW - 8)
+  }
+  if (top + panelH > window.innerHeight - 8) {
+    top = Math.max(8, rect.top - panelH - 4)
+  }
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${Math.max(8, top)}px`,
+    left: `${Math.max(8, left)}px`,
+    zIndex: '4000',
+  }
+}
+
+const openPanel = async () => {
+  if (props.disabled) return
+
+  // 先按触发器定位，避免面板以空 style 落在页面左上角
+  updatePanelPosition()
+  panelVisible.value = true
+  emit('visible-change', true)
+
+  if (isRange.value) {
+    const [s, e] = rangeDates.value
+    draftStart.value = s ? normalizeUnit(s) : null
+    draftEnd.value = e ? normalizeUnit(e) : null
+    const anchorStart = draftStart.value || new Date()
+    const anchorEnd = draftEnd.value || shiftEndForward(normalizeUnit(anchorStart))
+    syncLeftViewFromStart(anchorStart)
+    syncRightViewFromEnd(anchorEnd)
+    // 保证右面板不早于左面板视图
+    if (panelUnit.value === 'date') {
+      const leftKey = leftYear.value * 12 + leftMonth.value
+      const rightKey = rightYear.value * 12 + rightMonth.value
+      if (rightKey <= leftKey) syncRightViewAfterLeft()
+    } else if (panelUnit.value === 'month') {
+      if (rightYear.value <= leftYear.value) rightYear.value = leftYear.value + 1
+    } else if (rightDecade.value <= leftDecade.value) {
+      rightDecade.value = leftDecade.value + 10
+    }
+  } else {
+    const anchor = singleDate.value || new Date()
+    syncLeftViewFromStart(anchor)
+  }
+
+  await nextTick()
+  requestAnimationFrame(() => {
+    updatePanelPosition()
+    requestAnimationFrame(() => updatePanelPosition())
+  })
+  emit('panel-change', [leftYear.value, leftMonth.value])
+}
+
+const closePanel = () => {
+  if (!panelVisible.value) return
+  panelVisible.value = false
+  draftStart.value = null
+  draftEnd.value = null
+  emit('visible-change', false)
+}
+
+const togglePanel = () => {
+  if (panelVisible.value) closePanel()
+  else openPanel()
+}
+
+const navLeft = (dir: number) => {
+  if (panelUnit.value === 'date') {
+    let m = leftMonth.value + dir
+    let y = leftYear.value
+    if (m < 0) {
+      m = 11
+      y -= 1
+    } else if (m > 11) {
+      m = 0
+      y += 1
+    }
+    leftYear.value = y
+    leftMonth.value = m
+  } else if (panelUnit.value === 'month') {
+    leftYear.value += dir
+  } else {
+    leftDecade.value += dir * 10
+  }
+  emit('panel-change', [leftYear.value, leftMonth.value])
+}
+
+const navRight = (dir: number) => {
+  if (panelUnit.value === 'date') {
+    let m = rightMonth.value + dir
+    let y = rightYear.value
+    if (m < 0) {
+      m = 11
+      y -= 1
+    } else if (m > 11) {
+      m = 0
+      y += 1
+    }
+    rightYear.value = y
+    rightMonth.value = m
+  } else if (panelUnit.value === 'month') {
+    rightYear.value += dir
+  } else {
+    rightDecade.value += dir * 10
+  }
+  emit('panel-change', [rightYear.value, rightMonth.value])
+}
+
+const emitChange = (val: any) => {
+  emit('update:modelValue', val)
+  emit('change', val)
+  emit('calendar-change', val)
+}
+
+const pickOnSide = (side: Side, cell: any) => {
+  if (cell.disabled) return
+  const d = normalizeUnit(cell.date as Date)
+
+  if (!isRange.value) {
+    emitChange(toOutput(d))
+    closePanel()
+    return
+  }
+
+  if (side === 'start') {
+    draftStart.value = d
+    if (draftEnd.value && unitTime(d) > unitTime(draftEnd.value)) {
+      draftEnd.value = shiftEndForward(d)
+      syncRightViewFromEnd(draftEnd.value)
+    }
+  } else {
+    draftEnd.value = d
+    if (draftStart.value && unitTime(d) < unitTime(draftStart.value)) {
+      draftStart.value = shiftStartBackward(d)
+      syncLeftViewFromStart(draftStart.value)
+    }
+  }
+}
+
+const onConfirm = () => {
+  if (!draftStart.value || !draftEnd.value) return
+  let s = draftStart.value
+  let e = draftEnd.value
+  if (unitTime(s) > unitTime(e)) {
+    e = shiftEndForward(s)
+  }
+  emitChange([toOutput(s), toOutput(e)])
+  closePanel()
+}
+
+/** 取消 = 空选并关闭（参考 el-date-picker 清空语义） */
+const onCancel = () => {
+  draftStart.value = null
+  draftEnd.value = null
+  emitChange([])
+  closePanel()
+}
+
+const clearValue = () => {
+  emitChange(isRange.value ? [] : '')
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (!panelVisible.value) return
+  const t = e.target as Node
+  if (rootRef.value?.contains(t) || panelRef.value?.contains(t)) return
+  // 点外部：丢弃未确认草稿，保留原值
+  closePanel()
+}
+
+watch(panelVisible, (v) => {
+  if (v) {
+    document.addEventListener('click', onDocClick, true)
+    window.addEventListener('scroll', updatePanelPosition, true)
+    window.addEventListener('resize', updatePanelPosition)
+  } else {
+    document.removeEventListener('click', onDocClick, true)
+    window.removeEventListener('scroll', updatePanelPosition, true)
+    window.removeEventListener('resize', updatePanelPosition)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocClick, true)
+  window.removeEventListener('scroll', updatePanelPosition, true)
+  window.removeEventListener('resize', updatePanelPosition)
+})
+</script>
+
+<style lang="scss">
+.qiu-date {
+  display: inline-flex;
+  min-width: 220px;
+
+  &--daterange,
+  &--datetimerange,
+  &--monthrange,
+  &--yearrange {
+    min-width: 280px;
+  }
+
+  &__editor {
+    display: flex;
+    flex: 1;
+    gap: 4px;
+    align-items: center;
+    min-height: 32px;
+    padding: 0 8px;
+    cursor: pointer;
+    background: var(--qiu-bg-color, #fff);
+    border: 1px solid var(--qiu-border-color, #dcdfe6);
+    border-radius: var(--qiu-border-radius-base, 4px);
+    transition: border-color 0.2s ease;
+
+    &:hover,
+    .is-focused & {
+      border-color: var(--qiu-color-primary, #409eff);
+    }
+  }
+
+  &__input {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    font-size: 14px;
+    color: var(--qiu-text-color-primary, #303133);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    outline: none;
+
+    &--single {
+      width: 100%;
+    }
+  }
+
+  &__separator {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--qiu-text-color-secondary, #909399);
+  }
+
+  &__clear {
+    flex-shrink: 0;
+    padding: 0 4px;
+    font-size: 16px;
+    line-height: 1;
+    color: var(--qiu-text-color-secondary, #909399);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    font-size: 16px;
+    color: var(--qiu-text-color-secondary, #909399);
+  }
+}
+
+.qiu-date-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 322px;
+  padding: 12px;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: 8px;
+  box-shadow: var(--qiu-box-shadow-light, 0 2px 12px rgb(0 0 0 / 10%));
+  z-index: 4000;
+
+  &--range {
+    width: auto;
+    max-width: calc(100vw - 16px);
+  }
+
+  &__body {
+    display: flex;
+    gap: 0;
+
+    &.is-range .qiu-date-panel__side + .qiu-date-panel__side {
+      margin-left: 12px;
+      padding-left: 12px;
+      border-left: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+    }
+  }
+
+  &__side {
+    width: 298px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--qiu-text-color-primary, #303133);
+  }
+
+  &__nav {
+    width: 28px;
+    height: 28px;
+    font-size: 18px;
+    line-height: 1;
+    color: var(--qiu-text-color-regular, #606266);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+
+    &:hover {
+      color: var(--qiu-color-primary, #409eff);
+      background: var(--qiu-fill-color-light, #f5f7fa);
+    }
+  }
+
+  &__weeks {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 4px;
+  }
+
+  &__week {
+    font-size: 12px;
+    line-height: 28px;
+    color: var(--qiu-text-color-secondary, #909399);
+    text-align: center;
+  }
+
+  &__grid {
+    display: grid;
+    gap: 2px 0;
+
+    &--day {
+      grid-template-columns: repeat(7, 1fr);
+    }
+
+    &--month,
+    &--year {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+      padding: 8px 0 4px;
+    }
+  }
+
+  &__cell {
+    height: auto;
+    padding: 3px 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+
+    &.is-disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &.is-other-month .qiu-date__solar {
+      color: var(--qiu-text-color-placeholder, #c0c4cc);
+    }
+
+    &--month .qiu-date__cell,
+    &--year .qiu-date__cell {
+      min-height: 40px;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding-top: 10px;
+    margin-top: 8px;
+    border-top: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+  }
+
+  &__btn {
+    min-width: 60px;
+    height: 28px;
+    padding: 0 12px;
+    font-size: 13px;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 1px solid var(--qiu-border-color, #dcdfe6);
+    background: var(--qiu-bg-color, #fff);
+    color: var(--qiu-text-color-regular, #606266);
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &--text {
+      border-color: transparent;
+      background: transparent;
+    }
+
+    &--primary {
+      color: #fff;
+      background: var(--qiu-color-primary, #409eff);
+      border-color: var(--qiu-color-primary, #409eff);
+    }
+  }
+
+  .qiu-date__cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 32px;
+    line-height: 1.15;
+    border-radius: 4px;
+  }
+
+  .qiu-date__solar {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--qiu-text-color-primary, #303133);
+  }
+
+  .qiu-date__lunar {
+    margin-top: 2px;
+    font-size: 10px;
+    color: var(--qiu-text-color-secondary, #909399);
+    transform: scale(0.92);
+
+    &.is-festival {
+      color: var(--qiu-color-danger, #f56c6c);
+    }
+  }
+
+  &--lunar .qiu-date__cell {
+    min-height: 48px;
+  }
+
+  .qiu-date-panel__cell.in-range:not(.start-date):not(.end-date) .qiu-date__cell {
+    color: var(--qiu-color-primary, #409eff);
+    background-color: var(--qiu-color-primary-light-8, #ecf5ff) !important;
+    border-radius: 6px;
+    box-shadow: inset 0 0 0 1px var(--qiu-color-primary-light-5, #b3d8ff);
+  }
+
+  .qiu-date-panel__cell.start-date .qiu-date__cell,
+  .qiu-date-panel__cell.end-date .qiu-date__cell,
+  .qiu-date-panel__cell.is-selected .qiu-date__cell {
+    color: #fff;
+    background-color: var(--qiu-color-primary, #409eff) !important;
+    border-radius: 6px;
+  }
+
+  .qiu-date-panel__cell.start-date .qiu-date__solar,
+  .qiu-date-panel__cell.start-date .qiu-date__lunar,
+  .qiu-date-panel__cell.end-date .qiu-date__solar,
+  .qiu-date-panel__cell.end-date .qiu-date__lunar,
+  .qiu-date-panel__cell.is-selected .qiu-date__solar,
+  .qiu-date-panel__cell.is-selected .qiu-date__lunar {
+    color: #fff !important;
+  }
+
+  .qiu-date-panel__cell.is-today:not(.start-date):not(.end-date):not(.is-selected):not(.in-range)
+    .qiu-date__solar {
+    font-weight: 700;
+    color: var(--qiu-color-primary, #409eff);
+  }
+
+  .qiu-date-panel__cell:not(.is-disabled):hover:not(.start-date):not(.end-date):not(.is-selected)
+    .qiu-date__cell {
+    background: var(--qiu-fill-color-light, #f5f7fa);
+  }
+}
+
+.qiu-date-fade-enter-active,
+.qiu-date-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.qiu-date-fade-enter-from,
+.qiu-date-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>