@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/date-picker/index.tsx

@@ -0,0 +1,1492 @@
+/**
+ * 日期选择器 DatePicker
+ *
+ * 通过日历面板选择日期或日期范围，支持时间选择、快捷 preset 和月/年粒度。
+ *
+ * @when
+ * - 需要用户选择单个日期时（表单、筛选器）
+ * - 需要选择日期范围时（报表区间、日志查询）
+ * - 需要同时选择日期 + 时间时（工单创建时间、定时任务）
+ *
+ * @composition
+ * - `DatePicker` 单日期 / 月份 / 年份选择
+ * - `DateRangePicker` 日期范围 + 可选时间
+ * - showTime 模式内嵌 `TimePickerPanel`（来自 time-picker，对齐 antd showTime）
+ */
+
+import * as React from 'react';
+import {
+  endOfMonth,
+  endOfWeek,
+  format as formatDate,
+  isValid as isValidDate,
+  parse as parseDate,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subMonths,
+} from 'date-fns';
+import { zhCN } from 'date-fns/locale';
+import {
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  X,
+} from 'lucide-react';
+import {
+  useDayPicker,
+  type DateRange,
+  type DayPickerProps,
+} from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/button';
+import { Calendar } from '@/components/calendar';
+import { Popover, PopoverAnchor, PopoverContent } from '@/components/popover';
+import { Spinner } from '@/components/spinner';
+import {
+  TimePickerPanel,
+  parseTime,
+  formatTime,
+  triggerVariants,
+  type TimeParts,
+  type TriggerSize,
+} from '@/components/time-picker';
+
+// ─── 内部工具 ────────────────────────────────────────────────────────────────
+
+const tryParseDate = (text: string, fmt: string): Date | undefined => {
+  const t = text.trim();
+  if (!t) return undefined;
+  const d = parseDate(t, fmt, new Date());
+  return isValidDate(d) ? d : undefined;
+};
+
+const datesEqual = (a: Date | undefined, b: Date | undefined) => {
+  if (a == null && b == null) return true;
+  if (a == null || b == null) return false;
+  return a.getTime() === b.getTime();
+};
+
+const dateToParts = (d: Date | undefined): TimeParts =>
+  d
+    ? { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() }
+    : { h: 0, m: 0, s: 0 };
+
+const mergeDateAndTime = (date: Date, parts: TimeParts): Date => {
+  const next = new Date(date);
+  next.setHours(parts.h, parts.m, parts.s, 0);
+  return next;
+};
+
+// ─── showTime / Preset 类型 ──────────────────────────────────────────────────
+
+/** showTime 模式配置（对齐 antd `DatePicker.showTime`） */
+export interface ShowTimeConfig {
+  /** 时间显示格式（date-fns）。 @default "HH:mm:ss" */
+  format?: string;
+  /** 弹层打开且未选日期时的默认时间，格式同 `format` */
+  defaultValue?: string;
+  /** 小时步长。 @default 1 */
+  hourStep?: number;
+  /** 分钟步长。 @default 1 */
+  minuteStep?: number;
+  /** 秒步长。 @default 1 */
+  secondStep?: number;
+  /** 禁用小时列表 */
+  disabledHours?: () => number[];
+  /** 基于当前小时禁用分钟 */
+  disabledMinutes?: (hour: number) => number[];
+  /** 基于当前时分禁用秒 */
+  disabledSeconds?: (hour: number, minute: number) => number[];
+}
+
+const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
+
+/** 单日期 preset 项 */
+export interface DatePickerPreset {
+  /** 显示文案 */
+  label: string;
+  /** preset 值，函数形式会在点击时求值 */
+  value: Date | (() => Date);
+}
+
+/** 日期范围 preset 项 */
+export interface DateRangePreset {
+  /** 显示文案 */
+  label: string;
+  /** preset 范围，函数形式会在点击时求值 */
+  value: DateRange | (() => DateRange);
+}
+
+const DEFAULT_DATE_PRESETS: DatePickerPreset[] = [
+  { label: '今天', value: () => new Date() },
+  { label: '昨天', value: () => subDays(new Date(), 1) },
+];
+
+const DEFAULT_RANGE_PRESETS: DateRangePreset[] = [
+  { label: '今天', value: () => ({ from: new Date(), to: new Date() }) },
+  {
+    label: '昨天',
+    value: () => {
+      const y = subDays(new Date(), 1);
+      return { from: y, to: y };
+    },
+  },
+  {
+    label: '本周',
+    value: () => ({
+      from: startOfWeek(new Date(), { weekStartsOn: 1 }),
+      to: endOfWeek(new Date(), { weekStartsOn: 1 }),
+    }),
+  },
+  {
+    label: '上周',
+    value: () => {
+      const w = subDays(new Date(), 7);
+      return {
+        from: startOfWeek(w, { weekStartsOn: 1 }),
+        to: endOfWeek(w, { weekStartsOn: 1 }),
+      };
+    },
+  },
+  {
+    label: '本月',
+    value: () => ({
+      from: startOfMonth(new Date()),
+      to: endOfMonth(new Date()),
+    }),
+  },
+  {
+    label: '上月',
+    value: () => {
+      const m = subMonths(new Date(), 1);
+      return { from: startOfMonth(m), to: endOfMonth(m) };
+    },
+  },
+];
+
+const resolveDatePresets = (
+  p: boolean | DatePickerPreset[] | undefined,
+): DatePickerPreset[] => (!p ? [] : p === true ? DEFAULT_DATE_PRESETS : p);
+const resolveRangePresets = (
+  p: boolean | DateRangePreset[] | undefined,
+): DateRangePreset[] => (!p ? [] : p === true ? DEFAULT_RANGE_PRESETS : p);
+const resolvePresetValue = <T,>(v: T | (() => T)): T =>
+  typeof v === 'function' ? (v as () => T)() : v;
+const resolveShowTime = (
+  s: boolean | ShowTimeConfig | undefined,
+): ShowTimeConfig | null => {
+  if (!s) return null;
+  if (s === true) return { format: DEFAULT_TIME_FORMAT };
+  return { format: DEFAULT_TIME_FORMAT, ...s };
+};
+
+// ─── 自定义 Nav（年月双向导航） ──────────────────────────────────────────────
+
+const navBtnClass = cn(
+  buttonVariants({ variant: 'ghost', size: 'icon' }),
+  'size-7 bg-transparent opacity-60 hover:opacity-100 disabled:pointer-events-none disabled:opacity-30',
+);
+
+/**
+ * DatePickerNav — DatePicker 内置 Calendar 的自定义导航条。
+ *
+ * 在 react-day-picker 原生上/下月基础上，扩展上一年 / 下一年快进按钮。
+ *
+ * @when
+ * - 通过 `Calendar.components.Nav` 注入；外部消费方一般不直接使用
+ */
+function DatePickerNav({ className }: React.HTMLAttributes<HTMLElement>) {
+  const { goToMonth, nextMonth, previousMonth, months } = useDayPicker();
+  const cur = months[0]?.date;
+  const prevYear = cur
+    ? new Date(cur.getFullYear() - 1, cur.getMonth(), 1)
+    : undefined;
+  const nextYear = cur
+    ? new Date(cur.getFullYear() + 1, cur.getMonth(), 1)
+    : undefined;
+
+  return (
+    <nav data-slot="date-picker-nav" className={className}>
+      <div className="flex items-center gap-0.5">
+        <button
+          type="button"
+          data-slot="date-picker-nav-prev-year"
+          aria-label="上一年"
+          className={navBtnClass}
+          disabled={!prevYear}
+          onClick={() => prevYear && goToMonth(prevYear)}
+        >
+          <ChevronsLeft className="size-4" />
+        </button>
+        <button
+          type="button"
+          data-slot="date-picker-nav-prev-month"
+          aria-label="上个月"
+          className={navBtnClass}
+          disabled={!previousMonth}
+          onClick={() => previousMonth && goToMonth(previousMonth)}
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+      </div>
+      <div className="flex items-center gap-0.5">
+        <button
+          type="button"
+          data-slot="date-picker-nav-next-month"
+          aria-label="下个月"
+          className={navBtnClass}
+          disabled={!nextMonth}
+          onClick={() => nextMonth && goToMonth(nextMonth)}
+        >
+          <ChevronRight className="size-4" />
+        </button>
+        <button
+          type="button"
+          data-slot="date-picker-nav-next-year"
+          aria-label="下一年"
+          className={navBtnClass}
+          disabled={!nextYear}
+          onClick={() => nextYear && goToMonth(nextYear)}
+        >
+          <ChevronsRight className="size-4" />
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+const calendarProps = {
+  locale: zhCN,
+  weekStartsOn: 1,
+  formatters: {
+    formatCaption: (month: Date) =>
+      `${month.getFullYear()}年 ${month.getMonth() + 1}月`,
+  },
+  classNames: { today: 'text-primary font-medium' },
+  components: { Nav: DatePickerNav },
+} satisfies Pick<
+  DayPickerProps,
+  'locale' | 'weekStartsOn' | 'formatters' | 'classNames' | 'components'
+>;
+
+// ─── MonthPanel / YearPanel ──────────────────────────────────────────────────
+
+const MONTH_LABELS = [
+  '1月',
+  '2月',
+  '3月',
+  '4月',
+  '5月',
+  '6月',
+  '7月',
+  '8月',
+  '9月',
+  '10月',
+  '11月',
+  '12月',
+] as const;
+
+/**
+ * MonthPanel — 月份选择面板（`picker="month"`）。
+ *
+ * @when
+ * - 仅 DatePicker `picker="month"` 内部使用，不导出
+ */
+function MonthPanel({
+  value,
+  onSelect,
+  disabledDates,
+}: {
+  value?: Date;
+  onSelect: (d: Date) => void;
+  disabledDates?: (d: Date) => boolean;
+}) {
+  const [year, setYear] = React.useState(
+    () => value?.getFullYear() ?? new Date().getFullYear(),
+  );
+  const selectedMonth =
+    value && value.getFullYear() === year ? value.getMonth() : -1;
+  return (
+    <div
+      data-slot="date-picker-month-panel"
+      className="flex flex-col gap-3 p-3"
+    >
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          data-slot="date-picker-month-panel-prev"
+          aria-label="上一年"
+          className={navBtnClass}
+          onClick={() => setYear(year - 1)}
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <span
+          data-slot="date-picker-month-panel-label"
+          className="text-xs font-medium"
+        >
+          {year}年
+        </span>
+        <button
+          type="button"
+          data-slot="date-picker-month-panel-next"
+          aria-label="下一年"
+          className={navBtnClass}
+          onClick={() => setYear(year + 1)}
+        >
+          <ChevronRight className="size-4" />
+        </button>
+      </div>
+      <div className="grid grid-cols-3 gap-2">
+        {MONTH_LABELS.map((label, i) => {
+          const d = new Date(year, i, 1);
+          const disabled = disabledDates?.(d) ?? false;
+          const selected = selectedMonth === i;
+          return (
+            <button
+              key={i}
+              type="button"
+              data-slot="date-picker-month-option"
+              data-state={selected ? 'checked' : 'unchecked'}
+              disabled={disabled}
+              onClick={() => onSelect(d)}
+              className={cn(
+                'h-8 cursor-pointer rounded-md text-xs transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
+                selected &&
+                  'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
+              )}
+            >
+              {label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * YearPanel — 十年区间年份选择面板（`picker="year"`）。
+ *
+ * @when
+ * - 仅 DatePicker `picker="year"` 内部使用，不导出
+ */
+function YearPanel({
+  value,
+  onSelect,
+  disabledDates,
+}: {
+  value?: Date;
+  onSelect: (d: Date) => void;
+  disabledDates?: (d: Date) => boolean;
+}) {
+  const baseYear = value?.getFullYear() ?? new Date().getFullYear();
+  const [decadeStart, setDecadeStart] = React.useState(
+    () => Math.floor(baseYear / 10) * 10,
+  );
+  const selectedYear = value?.getFullYear() ?? -1;
+  const years = Array.from({ length: 12 }, (_, i) => decadeStart - 1 + i);
+  return (
+    <div data-slot="date-picker-year-panel" className="flex flex-col gap-3 p-3">
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          data-slot="date-picker-year-panel-prev"
+          aria-label="上十年"
+          className={navBtnClass}
+          onClick={() => setDecadeStart(decadeStart - 10)}
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <span
+          data-slot="date-picker-year-panel-label"
+          className="text-xs font-medium"
+        >
+          {decadeStart} – {decadeStart + 9}
+        </span>
+        <button
+          type="button"
+          data-slot="date-picker-year-panel-next"
+          aria-label="下十年"
+          className={navBtnClass}
+          onClick={() => setDecadeStart(decadeStart + 10)}
+        >
+          <ChevronRight className="size-4" />
+        </button>
+      </div>
+      <div className="grid grid-cols-3 gap-2">
+        {years.map((y) => {
+          const d = new Date(y, 0, 1);
+          const disabled = disabledDates?.(d) ?? false;
+          const outside = y < decadeStart || y > decadeStart + 9;
+          const selected = selectedYear === y;
+          return (
+            <button
+              key={y}
+              type="button"
+              data-slot="date-picker-year-option"
+              data-state={selected ? 'checked' : 'unchecked'}
+              data-outside={outside || undefined}
+              disabled={disabled}
+              onClick={() => onSelect(d)}
+              className={cn(
+                'h-8 cursor-pointer rounded-md text-xs transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
+                outside && 'text-muted-foreground/60',
+                selected &&
+                  'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
+              )}
+            >
+              {y}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ─── DatePicker ──────────────────────────────────────────────────────────────
+
+/**
+ * DatePicker — 单日期 / 月份 / 年份选择器（可选 showTime）。
+ *
+ * @when
+ * - 表单或筛选器中选择单个日期
+ * - 通过 `picker` 切换 date/month/year 粒度
+ * - 通过 `showTime` 启用时间选择（date 粒度专属）
+ *
+ * @composition
+ * - 内置 `Popover` + `Calendar`（或 MonthPanel / YearPanel）
+ * - showTime 模式右侧并入 `TimePickerPanel`
+ * - 复用 `triggerVariants`（来自 time-picker）保持 trigger 视觉一致
+ */
+export interface DatePickerProps {
+  /** 选择粒度。 @default "date" */
+  picker?: 'date' | 'month' | 'year';
+  /** 受控值 */
+  value?: Date;
+  /** 非受控初始值 */
+  defaultValue?: Date;
+  /** 值变化回调 */
+  onChange?: (value: Date | undefined) => void;
+  /** 占位符。 @default 按 picker 自动选择 */
+  placeholder?: string;
+  /** date-fns 格式（不传则按 picker / showTime 自动选择） */
+  format?: string;
+  /** trigger 尺寸。 @default "default" */
+  size?: TriggerSize;
+  /** trigger 自定义类名 */
+  className?: string;
+  /** 禁用 */
+  disabled?: boolean;
+  /** 自定义日期禁用规则 */
+  disabledDates?: (date: Date) => boolean;
+  /** 是否启用时间选择（仅 picker="date" 生效） */
+  showTime?: boolean | ShowTimeConfig;
+  /** 快捷选项：`true` 使用内置 today/yesterday */
+  presets?: boolean | DatePickerPreset[];
+  /** 是否显示清除按钮。 @default true */
+  hasClear?: boolean;
+  /**
+   * 加载态：将右侧图标替换为旋转 spinner，并标记 `data-loading="true"`。
+   * 优先级：loading > clear > CalendarIcon，三者互斥占同一位置。
+   * @default false
+   */
+  loading?: boolean;
+  /** 校验状态（驱动 trigger 边框/聚焦环颜色）。 @default "default" */
+  status?: 'default' | 'error';
+  /** 受控弹层显隐 */
+  open?: boolean;
+  /** 弹层显隐变化回调 */
+  onOpenChange?: (open: boolean) => void;
+  /** 弹层底部自定义节点 */
+  footer?: React.ReactNode;
+  /** 输入框只读（仍可打开弹层，禁用键盘录入）。 @default false */
+  inputReadOnly?: boolean;
+  /** 输入框 ref */
+  ref?: React.Ref<HTMLInputElement>;
+}
+
+const inputClass =
+  'min-w-0 grow bg-transparent text-foreground outline-none tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed';
+
+function DatePicker({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  picker = 'date',
+  placeholder: placeholderProp,
+  format: fmt,
+  size = 'default',
+  className,
+  disabled,
+  disabledDates,
+  showTime,
+  presets,
+  hasClear = true,
+  loading = false,
+  status = 'default',
+  open: openProp,
+  onOpenChange,
+  footer,
+  inputReadOnly = false,
+  ref,
+}: DatePickerProps) {
+  const timeCfg = picker === 'date' ? resolveShowTime(showTime) : null;
+  const displayFormat =
+    fmt ??
+    (picker === 'year'
+      ? 'yyyy'
+      : picker === 'month'
+      ? 'yyyy-MM'
+      : timeCfg
+      ? 'yyyy-MM-dd HH:mm:ss'
+      : 'yyyy-MM-dd');
+  const placeholder =
+    placeholderProp ??
+    (picker === 'year'
+      ? '选择年份'
+      : picker === 'month'
+      ? '选择月份'
+      : '选择日期');
+  const presetList = resolveDatePresets(presets);
+
+  // controlled / uncontrolled value
+  const isValueControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
+    defaultValue,
+  );
+  const value = isValueControlled ? valueProp : internalValue;
+
+  // controlled / uncontrolled open
+  const isOpenControlled = openProp !== undefined;
+  const [openInternal, setOpenInternal] = React.useState(false);
+  const open = isOpenControlled ? openProp : openInternal;
+  const setOpen = (next: boolean) => {
+    if (!isOpenControlled) setOpenInternal(next);
+    onOpenChange?.(next);
+  };
+
+  // showTime draft
+  const [draftDate, setDraftDate] = React.useState<Date | undefined>(value);
+  const [draftTime, setDraftTime] = React.useState<TimeParts>(() =>
+    dateToParts(value),
+  );
+
+  // input text
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const anchorRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => inputRef.current!, []);
+  const [inputText, setInputText] = React.useState<string>(() =>
+    value ? formatDate(value, displayFormat) : '',
+  );
+
+  React.useEffect(() => {
+    if (document.activeElement !== inputRef.current) {
+      setInputText(value ? formatDate(value, displayFormat) : '');
+    }
+  }, [value, displayFormat]);
+
+  React.useEffect(() => {
+    if (open) {
+      setDraftDate(value);
+      if (value) setDraftTime(dateToParts(value));
+      else if (timeCfg?.defaultValue) {
+        const p = parseTime(timeCfg.defaultValue);
+        if (p) setDraftTime(p);
+      }
+    }
+  }, [open]);
+
+  const commitValue = (next: Date | undefined) => {
+    setInputText(next ? formatDate(next, displayFormat) : '');
+    if (datesEqual(value, next)) return;
+    if (!isValueControlled) setInternalValue(next);
+    onChange?.(next);
+  };
+
+  const handleInputBlur = () => {
+    const parsed = tryParseDate(inputText, displayFormat);
+    if (parsed) commitValue(parsed);
+    else if (inputText.trim() === '') commitValue(undefined);
+    else {
+      setInputText('');
+      commitValue(undefined);
+    }
+  };
+
+  const handleSelectDate = (d: Date | undefined) => {
+    if (!timeCfg) {
+      commitValue(d);
+      setOpen(false);
+      return;
+    }
+    setDraftDate(d);
+    if (d)
+      setInputText(formatDate(mergeDateAndTime(d, draftTime), displayFormat));
+  };
+
+  const handleSelectTime = (next: TimeParts) => {
+    setDraftTime(next);
+    if (draftDate)
+      setInputText(
+        formatDate(mergeDateAndTime(draftDate, next), displayFormat),
+      );
+  };
+
+  const handleConfirm = () => {
+    if (!draftDate) {
+      setOpen(false);
+      return;
+    }
+    commitValue(mergeDateAndTime(draftDate, draftTime));
+    setOpen(false);
+  };
+
+  const handlePresetClick = (preset: DatePickerPreset) => {
+    const d = resolvePresetValue(preset.value);
+    if (!timeCfg) {
+      commitValue(d);
+      setOpen(false);
+      return;
+    }
+    setDraftDate(d);
+    setDraftTime(dateToParts(d));
+    setInputText(formatDate(d, displayFormat));
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.preventDefault();
+    commitValue(undefined);
+    inputRef.current?.focus();
+  };
+
+  const showClear = !loading && hasClear && value != null && !disabled;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div
+          ref={anchorRef}
+          data-slot="date-picker"
+          data-size={size}
+          data-status={status}
+          data-state={open ? 'open' : 'closed'}
+          data-loading={loading ? 'true' : undefined}
+          aria-invalid={status === 'error' || undefined}
+          // 点击 trigger 内非 input / 非 button 区域（padding 空白 / icon）时，主动 focus input 并打开弹层
+          onMouseDown={(e) => {
+            const t = e.target as HTMLElement;
+            if (t.tagName !== 'INPUT' && t.closest('button') == null) {
+              e.preventDefault();
+              inputRef.current?.focus();
+              setOpen(true);
+            }
+          }}
+          className={cn(
+            triggerVariants({ size }),
+            timeCfg ? 'w-64' : 'w-60',
+            className,
+          )}
+        >
+          <input
+            ref={inputRef}
+            data-slot="date-picker-input"
+            type="text"
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
+            onFocus={() => setOpen(true)}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={inputReadOnly}
+            className={inputClass}
+          />
+          {loading ? (
+            <Spinner data-slot="date-picker-loading" size="md" tone="muted" />
+          ) : showClear ? (
+            <button
+              type="button"
+              data-slot="date-picker-clear"
+              aria-label="清除日期"
+              tabIndex={-1}
+              onMouseDown={handleClear}
+              className="flex shrink-0 cursor-pointer items-center text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <X className="size-4" />
+            </button>
+          ) : (
+            <CalendarIcon
+              data-slot="date-picker-icon"
+              aria-hidden
+              className="size-4 shrink-0 text-muted-foreground"
+            />
+          )}
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        data-slot="date-picker-content"
+        className="w-auto rounded-md p-0"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onInteractOutside={(e) => {
+          const target = e.detail.originalEvent.target as Node | null;
+          if (target && anchorRef.current?.contains(target)) e.preventDefault();
+        }}
+      >
+        {timeCfg ? (
+          <>
+            <div className="flex items-stretch">
+              <Calendar
+                mode="single"
+                selected={draftDate}
+                onSelect={handleSelectDate}
+                disabled={disabledDates}
+                defaultMonth={value}
+                {...calendarProps}
+              />
+              <TimePickerPanel
+                value={draftTime}
+                onChange={handleSelectTime}
+                format={timeCfg.format ?? DEFAULT_TIME_FORMAT}
+                hourStep={timeCfg.hourStep}
+                minuteStep={timeCfg.minuteStep}
+                secondStep={timeCfg.secondStep}
+                disabledHours={timeCfg.disabledHours}
+                disabledMinutes={timeCfg.disabledMinutes}
+                disabledSeconds={timeCfg.disabledSeconds}
+                hasSelection={draftDate != null}
+                padZero={false}
+                className="border-l border-border"
+              />
+            </div>
+            <div
+              data-slot="date-picker-footer"
+              className="flex items-center justify-between border-t border-border px-3 py-2"
+            >
+              <div
+                data-slot="date-picker-presets"
+                className="flex flex-wrap items-center gap-3"
+              >
+                {presetList.map((p) => (
+                  <button
+                    key={p.label}
+                    type="button"
+                    data-slot="date-picker-preset"
+                    onClick={() => handlePresetClick(p)}
+                    className="cursor-pointer text-xs text-primary transition-colors hover:text-primary/80"
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
+              <Button size="sm" onClick={handleConfirm} disabled={!draftDate}>
+                确定
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            {picker === 'month' ? (
+              <MonthPanel
+                value={value}
+                onSelect={handleSelectDate}
+                disabledDates={disabledDates}
+              />
+            ) : picker === 'year' ? (
+              <YearPanel
+                value={value}
+                onSelect={handleSelectDate}
+                disabledDates={disabledDates}
+              />
+            ) : (
+              <Calendar
+                mode="single"
+                selected={value}
+                onSelect={handleSelectDate}
+                disabled={disabledDates}
+                defaultMonth={value}
+                {...calendarProps}
+              />
+            )}
+            {presetList.length > 0 && (
+              <div
+                data-slot="date-picker-presets"
+                className="flex flex-wrap items-center gap-3 border-t border-border px-3 py-2"
+              >
+                {presetList.map((p) => (
+                  <button
+                    key={p.label}
+                    type="button"
+                    data-slot="date-picker-preset"
+                    onClick={() => handlePresetClick(p)}
+                    className="cursor-pointer text-xs text-primary transition-colors hover:text-primary/80"
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+        {footer && (
+          <div
+            data-slot="date-picker-extra-footer"
+            className="border-t border-border p-2 text-xs"
+          >
+            {footer}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── DateRangePicker ─────────────────────────────────────────────────────────
+
+const PREVIEW_RANGE_CLASS =
+  'border-dashed !border-y-foreground/40 first:!border-l-foreground/40 first:rounded-l-md last:!border-r-foreground/40 last:rounded-r-md [&[data-selected]]:!border-transparent';
+const PREVIEW_START_CLASS =
+  'border-dashed !border-l-foreground/40 rounded-l-md';
+const PREVIEW_END_CLASS = 'border-dashed !border-r-foreground/40 rounded-r-md';
+
+// 范围预览占位：给日历内每个 day cell（td）默认补 1px transparent dashed 边框，
+// hover 时 PREVIEW_*_CLASS 仅切换 border-color，不引起布局跳变；border-collapse 使相邻 cell border 自然合并为连续虚线。
+const RANGE_PREVIEW_BASE_CLASS =
+  '[&_td]:border [&_td]:border-transparent [&_td]:border-dashed';
+
+/**
+ * DateRangePicker — 日期范围选择器（可选 showTime）。
+ *
+ * @when
+ * - 选择起止日期（报表区间、日志区间）
+ * - 通过 `showTime` 同时选择起止时间
+ *
+ * @composition
+ * - 双 input + 范围 Calendar（默认 2 月）
+ * - showTime 模式右侧并入 `TimePickerPanel`（按当前激活字段切换 from/to 时间）
+ * - 复用 `triggerVariants` 保持 trigger 视觉一致
+ */
+export interface DateRangePickerProps {
+  /** 受控值 */
+  value?: DateRange;
+  /** 非受控初始值 */
+  defaultValue?: DateRange;
+  /** 值变化回调（弹层关闭或确定时触发） */
+  onChange?: (value: DateRange | undefined) => void;
+  /** date-fns 格式。 @default "yyyy-MM-dd"（showTime 时为 "yyyy-MM-dd HH:mm:ss"） */
+  format?: string;
+  /** trigger 尺寸。 @default "default" */
+  size?: TriggerSize;
+  /** trigger 自定义类名 */
+  className?: string;
+  /** 禁用 */
+  disabled?: boolean;
+  /** 自定义日期禁用规则 */
+  disabledDates?: (date: Date) => boolean;
+  /** 同时显示的月份数（非 showTime 模式下生效）。 @default 2 */
+  numberOfMonths?: number;
+  /** 起止占位符。 @default ["起始日期","结束日期"] */
+  placeholders?: [string, string];
+  /** 是否启用时间选择 */
+  showTime?: boolean | ShowTimeConfig;
+  /** 快捷范围：`true` 使用内置今天/昨天/本周/上周/本月/上月 */
+  presets?: boolean | DateRangePreset[];
+  /** 是否显示清除按钮。 @default true */
+  hasClear?: boolean;
+  /**
+   * 加载态：将右侧图标替换为旋转 spinner，并标记 `data-loading="true"`。
+   * 优先级：loading > clear > CalendarIcon，三者互斥占同一位置。
+   * @default false
+   */
+  loading?: boolean;
+  /** 校验状态（驱动 trigger 边框/聚焦环颜色）。 @default "default" */
+  status?: 'default' | 'error';
+  /** 受控弹层显隐 */
+  open?: boolean;
+  /** 弹层显隐变化回调 */
+  onOpenChange?: (open: boolean) => void;
+  /** 弹层底部自定义节点 */
+  footer?: React.ReactNode;
+  /** 输入框只读。 @default false */
+  inputReadOnly?: boolean;
+  /** 起始输入框 ref */
+  ref?: React.Ref<HTMLInputElement>;
+}
+
+function DateRangePicker({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  format: fmt,
+  size = 'default',
+  className,
+  disabled,
+  disabledDates,
+  numberOfMonths = 2,
+  placeholders = ['起始日期', '结束日期'],
+  showTime,
+  presets,
+  hasClear = true,
+  loading = false,
+  status = 'default',
+  open: openProp,
+  onOpenChange,
+  footer,
+  inputReadOnly = false,
+  ref,
+}: DateRangePickerProps) {
+  const timeCfg = resolveShowTime(showTime);
+  const displayFormat = fmt ?? (timeCfg ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd');
+  const presetList = resolveRangePresets(presets);
+
+  const isValueControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = React.useState<
+    DateRange | undefined
+  >(defaultValue);
+  const value = isValueControlled ? valueProp : internalValue;
+
+  const isOpenControlled = openProp !== undefined;
+  const [openInternal, setOpenInternal] = React.useState(false);
+  const open = isOpenControlled ? openProp : openInternal;
+  const setOpen = (next: boolean) => {
+    if (!isOpenControlled) setOpenInternal(next);
+    onOpenChange?.(next);
+  };
+
+  const [draftRange, setDraftRange] = React.useState<DateRange | undefined>(
+    value,
+  );
+  const [draftStartTime, setDraftStartTime] = React.useState<TimeParts>(() =>
+    dateToParts(value?.from),
+  );
+  const [draftEndTime, setDraftEndTime] = React.useState<TimeParts>(() =>
+    dateToParts(value?.to),
+  );
+  const [startTouched, setStartTouched] = React.useState(value?.from != null);
+  const [endTouched, setEndTouched] = React.useState(value?.to != null);
+  const [hoveredDate, setHoveredDate] = React.useState<Date | undefined>();
+  const [activeField, setActiveField] = React.useState<'from' | 'to'>('from');
+
+  const fromInputRef = React.useRef<HTMLInputElement>(null);
+  const toInputRef = React.useRef<HTMLInputElement>(null);
+  const anchorRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => fromInputRef.current!, []);
+  const confirmedRef = React.useRef(false);
+
+  const [fromText, setFromText] = React.useState<string>(() =>
+    value?.from ? formatDate(value.from, displayFormat) : '',
+  );
+  const [toText, setToText] = React.useState<string>(() =>
+    value?.to ? formatDate(value.to, displayFormat) : '',
+  );
+
+  const finalize = (
+    range: DateRange | undefined,
+    st: TimeParts,
+    et: TimeParts,
+    ft: boolean,
+    tt: boolean,
+  ): DateRange | undefined => {
+    const fromOut =
+      ft && range?.from
+        ? timeCfg
+          ? mergeDateAndTime(range.from, st)
+          : range.from
+        : undefined;
+    const toOut =
+      tt && range?.to
+        ? timeCfg
+          ? mergeDateAndTime(range.to, et)
+          : range.to
+        : undefined;
+    if (!fromOut && !toOut) return undefined;
+    return { from: fromOut, to: toOut };
+  };
+
+  const rangeEqual = (a: DateRange | undefined, b: DateRange | undefined) => {
+    if (!a && !b) return true;
+    if (!a || !b) return false;
+    return datesEqual(a.from, b.from) && datesEqual(a.to, b.to);
+  };
+
+  React.useEffect(() => {
+    const active = document.activeElement;
+    if (active !== fromInputRef.current)
+      setFromText(value?.from ? formatDate(value.from, displayFormat) : '');
+    if (active !== toInputRef.current)
+      setToText(value?.to ? formatDate(value.to, displayFormat) : '');
+  }, [value?.from, value?.to, displayFormat]);
+
+  React.useEffect(() => {
+    if (open) {
+      setDraftRange(value);
+      setDraftStartTime(dateToParts(value?.from));
+      setDraftEndTime(dateToParts(value?.to));
+      setStartTouched(value?.from != null);
+      setEndTouched(value?.to != null);
+      setHoveredDate(undefined);
+      confirmedRef.current = false;
+    } else if (!confirmedRef.current) {
+      const final = finalize(
+        draftRange,
+        draftStartTime,
+        draftEndTime,
+        startTouched,
+        endTouched,
+      );
+      if (!rangeEqual(value, final)) {
+        if (!isValueControlled) setInternalValue(final);
+        onChange?.(final);
+      }
+    }
+  }, [open]);
+
+  const updateFromText = (date: Date | undefined, time: TimeParts) =>
+    setFromText(
+      !date
+        ? ''
+        : formatDate(
+            timeCfg ? mergeDateAndTime(date, time) : date,
+            displayFormat,
+          ),
+    );
+  const updateToText = (date: Date | undefined, time: TimeParts) =>
+    setToText(
+      !date
+        ? ''
+        : formatDate(
+            timeCfg ? mergeDateAndTime(date, time) : date,
+            displayFormat,
+          ),
+    );
+
+  const handleSelect = (
+    _: DateRange | undefined,
+    triggerDate: Date | undefined,
+  ) => {
+    if (!triggerDate) return;
+    const triggerDay = startOfDay(triggerDate).getTime();
+    let nextFrom = draftRange?.from;
+    let nextTo = draftRange?.to;
+    if (activeField === 'from') {
+      nextFrom = triggerDate;
+      if (nextTo && startOfDay(nextTo).getTime() < triggerDay)
+        nextTo = triggerDate;
+      setStartTouched(true);
+      if (nextTo !== draftRange?.to) setEndTouched(true);
+    } else {
+      nextTo = triggerDate;
+      if (nextFrom && startOfDay(nextFrom).getTime() > triggerDay)
+        nextFrom = triggerDate;
+      setEndTouched(true);
+      if (nextFrom !== draftRange?.from) setStartTouched(true);
+    }
+    const next: DateRange = { from: nextFrom, to: nextTo };
+    setDraftRange(next);
+    updateFromText(nextFrom, draftStartTime);
+    updateToText(nextTo, draftEndTime);
+    if (!timeCfg) {
+      if (nextFrom && nextTo) setOpen(false);
+      else if (activeField === 'from' && !nextTo) {
+        setActiveField('to');
+        toInputRef.current?.focus();
+      } else if (activeField === 'to' && !nextFrom) {
+        setActiveField('from');
+        fromInputRef.current?.focus();
+      }
+    }
+  };
+
+  const handleTimeChange = (time: TimeParts) => {
+    if (activeField === 'from') {
+      setDraftStartTime(time);
+      setStartTouched(true);
+      updateFromText(draftRange?.from, time);
+    } else {
+      setDraftEndTime(time);
+      setEndTouched(true);
+      updateToText(draftRange?.to, time);
+    }
+  };
+
+  const handleFromBlur = () => {
+    const t = fromText.trim();
+    if (!t) {
+      // 仅当之前已有起始值时，才视为用户主动清空。
+      // 否则（input 本就空）直接 return，避免与点击日历的 mousedown→blur 竞态把首次点击吞掉。
+      if (startTouched || draftRange?.from) {
+        setDraftRange({ from: undefined, to: draftRange?.to });
+        setStartTouched(false);
+      }
+      return;
+    }
+    const parsed = tryParseDate(t, displayFormat);
+    if (parsed) {
+      const curTo = draftRange?.to;
+      const nextTo =
+        curTo && curTo.getTime() < parsed.getTime() ? parsed : curTo;
+      setDraftRange({ from: parsed, to: nextTo });
+      setStartTouched(true);
+      if (nextTo !== curTo) setEndTouched(true);
+      if (timeCfg) setDraftStartTime(dateToParts(parsed));
+      updateFromText(parsed, timeCfg ? dateToParts(parsed) : draftStartTime);
+      if (nextTo)
+        updateToText(nextTo, timeCfg ? dateToParts(nextTo) : draftEndTime);
+    } else {
+      setFromText('');
+      setDraftRange({ from: undefined, to: draftRange?.to });
+      setStartTouched(false);
+    }
+  };
+
+  const handleToBlur = () => {
+    const t = toText.trim();
+    if (!t) {
+      // 同 handleFromBlur：仅当之前已有结束值时才主动清空，避免吞掉日历首次点击
+      if (endTouched || draftRange?.to) {
+        setDraftRange({ from: draftRange?.from, to: undefined });
+        setEndTouched(false);
+      }
+      return;
+    }
+    const parsed = tryParseDate(t, displayFormat);
+    if (parsed) {
+      const curFrom = draftRange?.from;
+      const nextFrom =
+        curFrom && curFrom.getTime() > parsed.getTime() ? parsed : curFrom;
+      setDraftRange({ from: nextFrom, to: parsed });
+      setEndTouched(true);
+      if (nextFrom !== curFrom) setStartTouched(true);
+      if (timeCfg) setDraftEndTime(dateToParts(parsed));
+      updateToText(parsed, timeCfg ? dateToParts(parsed) : draftEndTime);
+      if (nextFrom)
+        updateFromText(
+          nextFrom,
+          timeCfg ? dateToParts(nextFrom) : draftStartTime,
+        );
+    } else {
+      setToText('');
+      setDraftRange({ from: draftRange?.from, to: undefined });
+      setEndTouched(false);
+    }
+  };
+
+  const handleConfirm = () => {
+    const final = finalize(
+      draftRange,
+      draftStartTime,
+      draftEndTime,
+      startTouched,
+      endTouched,
+    );
+    confirmedRef.current = true;
+    if (!isValueControlled) setInternalValue(final);
+    onChange?.(final);
+    setOpen(false);
+  };
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    const range = resolvePresetValue(preset.value);
+    setDraftRange(range);
+    setDraftStartTime(dateToParts(range.from));
+    setDraftEndTime(dateToParts(range.to));
+    setStartTouched(range.from != null);
+    setEndTouched(range.to != null);
+    updateFromText(range.from, dateToParts(range.from));
+    updateToText(range.to, dateToParts(range.to));
+    if (!timeCfg) {
+      confirmedRef.current = true;
+      if (!isValueControlled) setInternalValue(range);
+      onChange?.(range);
+      setOpen(false);
+    }
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setDraftRange(undefined);
+    setStartTouched(false);
+    setEndTouched(false);
+    setFromText('');
+    setToText('');
+    confirmedRef.current = true;
+    if (!isValueControlled) setInternalValue(undefined);
+    onChange?.(undefined);
+    fromInputRef.current?.focus();
+  };
+
+  // disable out-of-range dates
+  const combinedDisabled = React.useCallback(
+    (date: Date) => {
+      if (disabledDates?.(date)) return true;
+      const day = startOfDay(date).getTime();
+      if (activeField === 'from' && draftRange?.to)
+        return day > startOfDay(draftRange.to).getTime();
+      if (activeField === 'to' && draftRange?.from)
+        return day < startOfDay(draftRange.from).getTime();
+      return false;
+    },
+    [disabledDates, activeField, draftRange?.from, draftRange?.to],
+  );
+
+  // hover preview range
+  const previewRange = React.useMemo<DateRange | undefined>(() => {
+    if (!hoveredDate) return undefined;
+    let pFrom: Date | undefined, pTo: Date | undefined;
+    if (activeField === 'from') {
+      pFrom = hoveredDate;
+      pTo = draftRange?.to;
+      if (pTo && pTo.getTime() < hoveredDate.getTime()) pTo = hoveredDate;
+    } else {
+      pFrom = draftRange?.from;
+      pTo = hoveredDate;
+      if (pFrom && pFrom.getTime() > hoveredDate.getTime()) pFrom = hoveredDate;
+    }
+    if (!pFrom && !pTo) return undefined;
+    return { from: pFrom, to: pTo };
+  }, [activeField, draftRange?.from, draftRange?.to, hoveredDate]);
+
+  const rangeHoverProps = {
+    onDayMouseEnter: (day: Date) => setHoveredDate(day),
+    // 不在 day mouseleave 时清空：Calendar week 是 flex 布局、相邻 td 之间存在 1px gap，
+    // 鼠标穿过 gap 会触发 leave→enter 闪烁。hoveredDate 由下一次 enter 覆盖，
+    // 或在 PopoverContent 的 onPointerLeave / 弹层重新打开 reset effect 中统一清空。
+    modifiers:
+      previewRange?.from && previewRange?.to
+        ? {
+            previewRange,
+            previewStart: previewRange.from,
+            previewEnd: previewRange.to,
+          }
+        : undefined,
+    modifiersClassNames: {
+      previewRange: PREVIEW_RANGE_CLASS,
+      previewStart: PREVIEW_START_CLASS,
+      previewEnd: PREVIEW_END_CLASS,
+    },
+  };
+
+  const hasAny = value?.from != null || value?.to != null;
+  const showClear = !loading && hasClear && hasAny && !disabled;
+  const calendarDefaultMonth =
+    activeField === 'to'
+      ? draftRange?.to ?? draftRange?.from
+      : draftRange?.from ?? draftRange?.to;
+
+  const rangeInputClass =
+    'min-w-0 grow bg-transparent text-center text-foreground outline-none tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed';
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div
+          ref={anchorRef}
+          data-slot="date-range-picker"
+          data-size={size}
+          data-status={status}
+          data-state={open ? 'open' : 'closed'}
+          data-active-field={activeField}
+          data-loading={loading ? 'true' : undefined}
+          aria-invalid={status === 'error' || undefined}
+          // 双 input 边缘 / 分隔符 / 装饰 icon 区域点击时，按左右半区智能转 focus 到对应 input
+          onMouseDown={(e) => {
+            const t = e.target as HTMLElement;
+            if (t.tagName !== 'INPUT' && t.closest('button') == null) {
+              e.preventDefault();
+              const rect = e.currentTarget.getBoundingClientRect();
+              const isLeftHalf = e.clientX - rect.left < rect.width / 2;
+              const nextField: 'from' | 'to' = isLeftHalf ? 'from' : 'to';
+              const nextRef = isLeftHalf ? fromInputRef : toInputRef;
+              setActiveField(nextField);
+              nextRef.current?.focus();
+              setOpen(true);
+            }
+          }}
+          // 双输入 + 双月 + 时间面板需要更宽容器；26rem 对应双月并排，避免 Tailwind 任意值
+          style={timeCfg ? { width: '26rem' } : undefined}
+          className={cn(
+            triggerVariants({ size }),
+            !timeCfg && 'w-72',
+            className,
+          )}
+        >
+          <input
+            ref={fromInputRef}
+            data-slot="date-range-picker-start-input"
+            type="text"
+            value={fromText}
+            onChange={(e) => setFromText(e.target.value)}
+            onFocus={() => {
+              setOpen(true);
+              setActiveField('from');
+            }}
+            onBlur={handleFromBlur}
+            placeholder={placeholders[0]}
+            disabled={disabled}
+            readOnly={inputReadOnly}
+            className={rangeInputClass}
+          />
+          <span
+            data-slot="date-range-picker-separator"
+            aria-hidden
+            className="shrink-0 text-muted-foreground"
+          >
+            -
+          </span>
+          <input
+            ref={toInputRef}
+            data-slot="date-range-picker-end-input"
+            type="text"
+            value={toText}
+            onChange={(e) => setToText(e.target.value)}
+            onFocus={() => {
+              setOpen(true);
+              setActiveField('to');
+            }}
+            onBlur={handleToBlur}
+            placeholder={placeholders[1]}
+            disabled={disabled}
+            readOnly={inputReadOnly}
+            className={rangeInputClass}
+          />
+          {loading ? (
+            <Spinner
+              data-slot="date-range-picker-loading"
+              size="md"
+              tone="muted"
+            />
+          ) : showClear ? (
+            <button
+              type="button"
+              data-slot="date-range-picker-clear"
+              aria-label="清除范围"
+              tabIndex={-1}
+              onMouseDown={handleClear}
+              className="flex shrink-0 cursor-pointer items-center text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <X className="size-4" />
+            </button>
+          ) : (
+            <CalendarIcon
+              data-slot="date-range-picker-icon"
+              aria-hidden
+              className="size-4 shrink-0 text-muted-foreground"
+            />
+          )}
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        data-slot="date-range-picker-content"
+        className={cn('w-auto rounded-md p-0', RANGE_PREVIEW_BASE_CLASS)}
+        onPointerLeave={() => setHoveredDate(undefined)}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onInteractOutside={(e) => {
+          const target = e.detail.originalEvent.target as Node | null;
+          if (target && anchorRef.current?.contains(target)) e.preventDefault();
+        }}
+      >
+        {timeCfg ? (
+          <>
+            <div className="flex items-stretch">
+              <Calendar
+                mode="range"
+                selected={draftRange}
+                onSelect={handleSelect}
+                disabled={combinedDisabled}
+                numberOfMonths={1}
+                defaultMonth={calendarDefaultMonth}
+                {...calendarProps}
+                {...rangeHoverProps}
+              />
+              <TimePickerPanel
+                value={activeField === 'to' ? draftEndTime : draftStartTime}
+                onChange={handleTimeChange}
+                format={timeCfg.format ?? DEFAULT_TIME_FORMAT}
+                hourStep={timeCfg.hourStep}
+                minuteStep={timeCfg.minuteStep}
+                secondStep={timeCfg.secondStep}
+                hasSelection={activeField === 'to' ? endTouched : startTouched}
+                padZero={false}
+                className="border-l border-border"
+              />
+            </div>
+            <div
+              data-slot="date-range-picker-footer"
+              className="flex items-center justify-between gap-3 border-t border-border px-3 py-2"
+            >
+              <div
+                data-slot="date-range-picker-presets"
+                className="flex flex-wrap items-center gap-3"
+              >
+                {presetList.map((p) => (
+                  <button
+                    key={p.label}
+                    type="button"
+                    data-slot="date-range-picker-preset"
+                    onClick={() => handlePresetClick(p)}
+                    className="cursor-pointer text-xs text-primary transition-colors hover:text-primary/80"
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
+              <Button
+                size="sm"
+                onClick={handleConfirm}
+                disabled={!startTouched && !endTouched}
+              >
+                确定
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            <Calendar
+              mode="range"
+              selected={draftRange}
+              onSelect={handleSelect}
+              disabled={combinedDisabled}
+              numberOfMonths={numberOfMonths}
+              defaultMonth={calendarDefaultMonth}
+              {...calendarProps}
+              {...rangeHoverProps}
+            />
+            {presetList.length > 0 && (
+              <div
+                data-slot="date-range-picker-presets"
+                className="flex flex-wrap items-center gap-3 border-t border-border px-3 py-2"
+              >
+                {presetList.map((p) => (
+                  <button
+                    key={p.label}
+                    type="button"
+                    data-slot="date-range-picker-preset"
+                    onClick={() => handlePresetClick(p)}
+                    className="cursor-pointer text-xs text-primary transition-colors hover:text-primary/80"
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+        {footer && (
+          <div
+            data-slot="date-range-picker-extra-footer"
+            className="border-t border-border p-2 text-xs"
+          >
+            {footer}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { DatePicker, DateRangePicker };