foucui 1.0.1 → 2.0.0

package/components/QiuDate/index.vue

@@ -1,1134 +0,0 @@
-<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>