@yoka-ui/ui 1.0.1

package/dist/es/components/YkDateRangePicker/index.js

@@ -0,0 +1,317 @@
+// src/components/YkDateRangePicker/index.tsx
+import { DatePicker } from "antd";
+import classNames from "classnames";
+import dayjs from "dayjs";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import styles from "./index.module.less";
+var { RangePicker } = DatePicker;
+function pastTime(n, unit) {
+  const fmt = "YYYY-MM-DD HH:mm:00";
+  return [dayjs(dayjs().subtract(n, unit).format(fmt)), dayjs(dayjs().format(fmt))];
+}
+var DISPLAY_FORMAT = "YYYY-MM-DD HH:mm:ss";
+function formatToKey(d) {
+  return dayjs(d).format(DISPLAY_FORMAT);
+}
+function isValueEqual(a, b) {
+  if (a === b)
+    return true;
+  if (!a || !b)
+    return a === b;
+  if (a.length !== b.length)
+    return false;
+  if (a.length < 2 || b.length < 2)
+    return a.length === b.length;
+  return formatToKey(a[0]) === formatToKey(b[0]) && formatToKey(a[1]) === formatToKey(b[1]);
+}
+var RANGE_PRESETS = [
+  {
+    label: "近5分钟",
+    value: () => pastTime(5, "minute")
+  },
+  {
+    label: "近15分钟",
+    value: () => pastTime(15, "minute")
+  },
+  {
+    label: "近30分钟",
+    value: () => pastTime(30, "minute")
+  },
+  {
+    label: "近1小时",
+    value: () => pastTime(1, "hour")
+  },
+  {
+    label: "近2小时",
+    value: () => pastTime(2, "hour")
+  },
+  {
+    label: "近6小时",
+    value: () => pastTime(6, "hour")
+  },
+  {
+    label: "今天",
+    value: () => [
+      dayjs(dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss")),
+      dayjs(dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss"))
+    ],
+    // 紧凑模式只展示日期，如「03-25」
+    format: (v) => v[0].format("MM-DD")
+  },
+  {
+    label: "昨天",
+    value: () => [
+      dayjs(dayjs().subtract(1, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss")),
+      dayjs(dayjs().subtract(1, "day").endOf("day").format("YYYY-MM-DD HH:mm:ss"))
+    ],
+    format: (v) => v[0].format("MM-DD")
+  },
+  {
+    label: "近7天",
+    value: () => [
+      dayjs(dayjs().subtract(6, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss")),
+      dayjs(dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss"))
+    ],
+    // 紧凑模式展示完整日期区间，如「2024-03-19 ~ 2024-03-25」
+    format: (v) => [v[0].format("YYYY-MM-DD"), v[1].format("YYYY-MM-DD")]
+  }
+];
+var YkDateRangePicker = forwardRef(function YkDateRangePicker2({ value, onChange, allowClear = false, placeholder = "请选择时间范围", disabled = false, status = "" }, ref) {
+  const [showFullPicker, setShowFullPicker] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [activePreset, setActivePreset] = useState(void 0);
+  const [presetFormatText, setPresetFormatText] = useState(void 0);
+  const selfChangeRef = useRef(false);
+  const isPresetClickRef = useRef(false);
+  const collapseTimerRef = useRef();
+  const wrapperRef = useRef(null);
+  const pickerRef = useRef(null);
+  const prevValueRef = useRef(value);
+  const scheduleCollapse = useCallback((delay) => {
+    clearTimeout(collapseTimerRef.current);
+    collapseTimerRef.current = setTimeout(() => {
+      setOpen(false);
+      setShowFullPicker(false);
+    }, delay != null ? delay : 0);
+  }, []);
+  useEffect(() => () => clearTimeout(collapseTimerRef.current), []);
+  useEffect(() => {
+    if (value && value.length === 2)
+      return;
+    const first = RANGE_PRESETS[0];
+    const currentValue = first.value();
+    const formatText = currentValue.map((v) => dayjs(v).format("HH:mm:ss")).join(" ~ ");
+    setActivePreset(first);
+    setPresetFormatText(formatText);
+    selfChangeRef.current = true;
+    onChange == null ? void 0 : onChange(currentValue);
+  }, []);
+  useEffect(() => {
+    if (isValueEqual(prevValueRef.current, value))
+      return;
+    prevValueRef.current = value;
+    if (!selfChangeRef.current) {
+      setActivePreset(void 0);
+      setPresetFormatText(void 0);
+    }
+    selfChangeRef.current = false;
+  }, [value]);
+  const showState = useMemo(() => {
+    if (!value || value.length < 2)
+      return [];
+    return [formatToKey(value[0]), formatToKey(value[1])];
+  }, [value]);
+  const activePresetIndex = useMemo(() => {
+    if (!value || value.length < 2)
+      return -1;
+    const [v0, v1] = value;
+    const valKeys = [formatToKey(v0), formatToKey(v1)];
+    return RANGE_PRESETS.findIndex((preset) => {
+      const presetVal = preset.value();
+      const presetKeys = [formatToKey(presetVal[0]), formatToKey(presetVal[1])];
+      return valKeys[0] === presetKeys[0] && valKeys[1] === presetKeys[1];
+    });
+  }, [value, open]);
+  const handlePresetClick = useCallback(
+    (preset) => {
+      isPresetClickRef.current = true;
+      const currentValue = preset.value();
+      let formatText;
+      if (preset.format) {
+        const res = preset.format(currentValue);
+        formatText = Array.isArray(res) ? res.join(" ~ ") : res;
+      } else {
+        formatText = currentValue.map((v) => dayjs(v).format("HH:mm:ss")).join(" ~ ");
+      }
+      setActivePreset(preset);
+      setPresetFormatText(formatText);
+      selfChangeRef.current = true;
+      onChange == null ? void 0 : onChange(currentValue);
+      scheduleCollapse();
+    },
+    [onChange]
+  );
+  const handlePickerChange = useCallback(
+    (dates) => {
+      setActivePreset(void 0);
+      setPresetFormatText(void 0);
+      isPresetClickRef.current = false;
+      selfChangeRef.current = true;
+      if ((dates == null ? void 0 : dates[0]) && (dates == null ? void 0 : dates[1])) {
+        onChange == null ? void 0 : onChange(dates);
+      } else {
+        onChange == null ? void 0 : onChange(null);
+        scheduleCollapse();
+      }
+    },
+    [onChange]
+  );
+  const activateCompactTag = useCallback(() => {
+    setShowFullPicker(true);
+    setTimeout(() => {
+      var _a;
+      const el = (_a = pickerRef.current) == null ? void 0 : _a.nativeElement;
+      if (el) {
+        const input = el.querySelector("input");
+        input == null ? void 0 : input.click();
+        input == null ? void 0 : input.focus();
+      }
+    }, 0);
+  }, []);
+  const handleOpenChange = useCallback(
+    (isOpen) => {
+      setOpen(isOpen);
+      if (!isOpen) {
+        scheduleCollapse(150);
+      }
+    },
+    [scheduleCollapse]
+  );
+  const disabledDate = useCallback((current) => {
+    return current && (current > dayjs().endOf("day") || current < dayjs().subtract(6, "day").startOf("day"));
+  }, []);
+  const getPopupContainer = useCallback(() => {
+    var _a;
+    return (_a = wrapperRef.current) != null ? _a : document.body;
+  }, []);
+  const presetsNode = useMemo(() => {
+    return RANGE_PRESETS.map((preset, index) => {
+      const isActive = activePresetIndex === index;
+      return {
+        label: /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(styles.yokaPresetItem, {
+              [styles.yokaPresetItemActive]: isActive
+            }),
+            role: "option",
+            tabIndex: 0,
+            "aria-selected": isActive,
+            onClick: (e) => {
+              e.stopPropagation();
+              handlePresetClick(preset);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                handlePresetClick(preset);
+              }
+            }
+          },
+          preset.label
+        ),
+        value: preset.value()
+      };
+    });
+  }, [activePresetIndex, handlePresetClick]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      toggleFirstPreset() {
+        handlePresetClick(RANGE_PRESETS[0]);
+      }
+    }),
+    [handlePresetClick]
+  );
+  const pickerVisible = showFullPicker || open;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.YkDateRangePicker, {
+        [styles.yokaDisabled]: disabled
+      }),
+      ref: wrapperRef
+    },
+    !showFullPicker && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: styles.yokaCompactTag,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-disabled": disabled,
+        onClick: disabled ? void 0 : activateCompactTag,
+        onKeyDown: (e) => {
+          if (disabled)
+            return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activateCompactTag();
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement("i", { className: classNames("iconfont icon-riqi1", styles.yokaCompactTagIcon) }),
+      /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagContent }, activePreset ? (
+        // 已选预设：「预设名称 (格式化时间)」
+        /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagPresetLabel }, activePreset.label), /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagPresetFormat }, "(", presetFormatText, ")"))
+      ) : showState.length === 2 ? (
+        // 自定义时间：「起始时间 ~ 结束时间」
+        /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagDatetime }, showState[0]), /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagSeparator }, "~"), /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagDatetime }, showState[1]))
+      ) : (
+        // 无值/清空：placeholder 居中显示
+        /* @__PURE__ */ React.createElement("span", { className: styles.yokaCompactTagPlaceholder }, placeholder)
+      ))
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: styles.yokaPickerWrapper, style: { display: pickerVisible ? "flex" : "none" } }, /* @__PURE__ */ React.createElement("i", { className: classNames("iconfont icon-riqi1", styles.yokaPickerWrapperIcon) }), /* @__PURE__ */ React.createElement(
+      RangePicker,
+      {
+        ref: pickerRef,
+        value: value && value.length === 2 ? value : void 0,
+        onChange: handlePickerChange,
+        open,
+        onOpenChange: handleOpenChange,
+        variant: "borderless",
+        allowClear,
+        disabled,
+        status: status || void 0,
+        suffixIcon: null,
+        showTime: {
+          format: "HH:mm:ss",
+          hideDisabledOptions: true,
+          defaultValue: [dayjs("00:00", "HH:mm"), dayjs("23:59", "HH:mm")]
+        },
+        format: "YYYY-MM-DD HH:mm:ss",
+        disabledDate,
+        presets: presetsNode,
+        getPopupContainer,
+        classNames: { popup: { root: "yoka-daterangepicker-popup" } }
+      }
+    ))
+  );
+});
+YkDateRangePicker.displayName = "YkDateRangePicker";
+var YkDateRangePicker_default = YkDateRangePicker;
+export {
+  YkDateRangePicker_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/es/components/YkDateRangePicker/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/YkDateRangePicker/index.tsx"],
+  "sourcesContent": ["/**\n * YkDateRangePicker\n *\n * 带「紧凑预设 tag」与「完整 RangePicker」双模式切换的日期范围选择器。\n *\n * 功能特性：\n * - 默认紧凑模式：以 tag 形式展示「预设标签 + 格式化时间」或「起止时间」\n * - mount 时若无初始值，自动选中「近5分钟」预设\n * - 点击 tag 后展开内嵌的完整 RangePicker，失焦后自动收起\n * - 8 个内置快捷预设，2 列 Grid 布局渲染，当前激活项高亮\n * - 受控组件：区分「用户操作」与「外部赋值」，仅用户操作触发 onChange\n * - 禁用日期：仅允许过去 7 天（含今天）\n * - allowClear：支持一键清除，清除后重置预设状态\n * - 通过 forwardRef + useImperativeHandle 对外暴露 toggleFirstPreset()\n *\n * @example\n * ```tsx\n * const pickerRef = useRef<YkDateRangePickerRef>(null);\n *\n * <YkDateRangePicker\n *   value={range}\n *   onChange={(val) => setRange(val)}\n *   ref={pickerRef}\n * />\n *\n * // 外部强制切换到「近5分钟」\n * pickerRef.current?.toggleFirstPreset();\n * ```\n */\n\nimport { DatePicker } from 'antd';\nimport classNames from 'classnames';\nimport dayjs, { Dayjs } from 'dayjs';\nimport React, {\n  type ComponentRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styles from './index.module.less';\nconst { RangePicker } = DatePicker;\n\n// ─── 类型 ─────────────────────────────────────────────────────────────────────\n\n/** 时间范围值 */\nexport type DateRangeValue = [Dayjs, Dayjs];\n\n/**\n * 预设项定义\n * - value()  每次调用都返回最新时间，避免闭包缓存旧值\n * - format() 可选，控制紧凑 tag 中的格式化展示文本\n */\ninterface RangePreset {\n  label: string;\n  /** 工厂函数，返回实时时间范围 */\n  value: () => DateRangeValue;\n  /** 自定义紧凑模式格式化：返回单个字符串或 [start, end] 数组 */\n  format?: (value: DateRangeValue) => string | [string, string];\n}\n\nexport interface YkDateRangePickerProps {\n  /** 受控值 */\n  value?: DateRangeValue | [];\n  /** 用户操作改变时触发（外部 setValue 不会触发） */\n  onChange?: (value: DateRangeValue | null) => void;\n  /**\n   * 是否允许清除。\n   * - false（默认）：隐藏清除按钮，与 Vue 原版行为一致\n   * - true：显示清除按钮，清除后重置预设状态并触发 onChange(null)\n   */\n  allowClear?: boolean;\n  /**\n   * 紧凑 tag 无值/清空时的占位文本。\n   * 默认：「请选择时间范围」\n   */\n  placeholder?: string;\n  /** 是否禁用选择器 */\n  disabled?: boolean;\n  /** 校验状态 */\n  status?: '' | 'error' | 'warning';\n}\n\n/** 通过 ref 对父组件暴露的方法 */\nexport interface YkDateRangePickerRef {\n  /** 强制切换到第一个预设（近5分钟）并触发 onChange */\n  toggleFirstPreset: () => void;\n}\n\n// ─── 工具函数 ─────────────────────────────────────────────────────────────────\n\n/** 精确到分钟的过去时间区间 */\nfunction pastTime(n: number, unit: dayjs.ManipulateType): DateRangeValue {\n  const fmt = 'YYYY-MM-DD HH:mm:00';\n  return [dayjs(dayjs().subtract(n, unit).format(fmt)), dayjs(dayjs().format(fmt))];\n}\n\nconst DISPLAY_FORMAT = 'YYYY-MM-DD HH:mm:ss';\n\n/** 格式化 Dayjs 为紧凑模式展示字符串 / 预设匹配字符串 */\nfunction formatToKey(d: Dayjs): string {\n  return dayjs(d).format(DISPLAY_FORMAT);\n}\n\n/** 深度比较两个 value 是否「语义相同」（忽略 Dayjs 引用差异） */\nfunction isValueEqual(a: DateRangeValue | [] | undefined, b: DateRangeValue | [] | undefined): boolean {\n  if (a === b) return true;\n  if (!a || !b) return a === b;\n  if (a.length !== b.length) return false;\n  if (a.length < 2 || b.length < 2) return a.length === b.length;\n  return (\n    formatToKey(a[0] as Dayjs) === formatToKey(b[0] as Dayjs) &&\n    formatToKey(a[1] as Dayjs) === formatToKey(b[1] as Dayjs)\n  );\n}\n\n// ─── 内置预设列表 ─────────────────────────────────────────────────────────────\n\n/**\n * 8 个内置快捷预设。\n * value 始终是工厂函数，保证每次点击都获取最新的当前时间。\n */\nconst RANGE_PRESETS: RangePreset[] = [\n  {\n    label: '近5分钟',\n    value: () => pastTime(5, 'minute'),\n  },\n  {\n    label: '近15分钟',\n    value: () => pastTime(15, 'minute'),\n  },\n  {\n    label: '近30分钟',\n    value: () => pastTime(30, 'minute'),\n  },\n  {\n    label: '近1小时',\n    value: () => pastTime(1, 'hour'),\n  },\n  {\n    label: '近2小时',\n    value: () => pastTime(2, 'hour'),\n  },\n  {\n    label: '近6小时',\n    value: () => pastTime(6, 'hour'),\n  },\n  {\n    label: '今天',\n    value: () =>\n      [\n        dayjs(dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')),\n        dayjs(dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')),\n      ] as DateRangeValue,\n    // 紧凑模式只展示日期，如「03-25」\n    format: (v) => v[0].format('MM-DD'),\n  },\n  {\n    label: '昨天',\n    value: () =>\n      [\n        dayjs(dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')),\n        dayjs(dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')),\n      ] as DateRangeValue,\n    format: (v) => v[0].format('MM-DD'),\n  },\n  {\n    label: '近7天',\n    value: () =>\n      [\n        dayjs(dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')),\n        dayjs(dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')),\n      ] as DateRangeValue,\n    // 紧凑模式展示完整日期区间，如「2024-03-19 ~ 2024-03-25」\n    format: (v) => [v[0].format('YYYY-MM-DD'), v[1].format('YYYY-MM-DD')],\n  },\n];\n\n// ─── 主组件 ───────────────────────────────────────────────────────────────────\n\nconst YkDateRangePicker = forwardRef<YkDateRangePickerRef, YkDateRangePickerProps>(function YkDateRangePicker(\n  { value, onChange, allowClear = false, placeholder = '请选择时间范围', disabled = false, status = '' },\n  ref,\n) {\n  // ── 内部状态 ───────────────────────────────────────────────────────────────\n\n  /** 是否展示完整 RangePicker（false = 紧凑 tag 模式） */\n  const [showFullPicker, setShowFullPicker] = useState(false);\n\n  /** RangePicker 下拉面板是否展开 */\n  const [open, setOpen] = useState(false);\n\n  /**\n   * 当前激活的预设定义引用。\n   * undefined 表示用户手动选了自定义时间范围。\n   */\n  const [activePreset, setActivePreset] = useState<RangePreset | undefined>(undefined);\n\n  /**\n   * 紧凑 tag 中预设的格式化文本。\n   * 例：「12:00:00 ~ 13:00:00」或「03-25」或「2024-03-19 ~ 2024-03-25」\n   */\n  const [presetFormatText, setPresetFormatText] = useState<string | undefined>(undefined);\n\n  // ── Refs ───────────────────────────────────────────────────────────────────\n\n  /**\n   * 标记本次 value 变化是否由用户操作触发（非外部赋值）。\n   * 用 ref 而非 state，避免触发额外的重渲染。\n   * 与 Vue 版 selfChange 逻辑一致。\n   */\n  const selfChangeRef = useRef(false);\n\n  /**\n   * 标记当前 RangePicker.onChange 是否由预设点击触发。\n   * 用于区分「预设点击」vs「手动选择」，避免手动选择时错误保留预设状态。\n   */\n  const isPresetClickRef = useRef(false);\n\n  /** 管理 setTimeout，防止竞态 */\n  const collapseTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n  /** 组件根元素，用作 getPopupContainer */\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  /** RangePicker 实例 ref，用于编程式展开面板 */\n  const pickerRef = useRef<ComponentRef<typeof RangePicker>>(null);\n\n  /** 缓存上一次的 value，用于判断是否是外部变更 */\n  const prevValueRef = useRef(value);\n\n  /** 延迟收起完整 picker，清除旧定时器避免竞态 */\n  const scheduleCollapse = useCallback((delay?: number) => {\n    clearTimeout(collapseTimerRef.current);\n    collapseTimerRef.current = setTimeout(() => {\n      setOpen(false);\n      setShowFullPicker(false);\n    }, delay ?? 0);\n  }, []);\n\n  /** 卸载时清理定时器 */\n  useEffect(() => () => clearTimeout(collapseTimerRef.current), []);\n\n  // ── 默认值：mount 时无初始 value 则自动选中「近5分钟」 ───────────────────\n\n  useEffect(() => {\n    // 仅在外部未传有效初始值时执行一次\n    if (value && (value as DateRangeValue).length === 2) return;\n\n    const first = RANGE_PRESETS[0];\n    const currentValue = first.value();\n    const formatText = currentValue.map((v) => dayjs(v).format('HH:mm:ss')).join(' ~ ');\n\n    setActivePreset(first);\n    setPresetFormatText(formatText);\n\n    // 标记为用户操作，避免被下方的外部 value 监听 effect 清空预设状态\n    selfChangeRef.current = true;\n    onChange?.(currentValue);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // ── 外部 value 变化同步 ────────────────────────────────────────────────────\n\n  useEffect(() => {\n    // 跳过初始 mount（value 未真正变化）\n    if (isValueEqual(prevValueRef.current, value)) return;\n    prevValueRef.current = value;\n\n    if (!selfChangeRef.current) {\n      // 外部 setField 赋值：清空预设状态（无法得知外部值对应哪个预设）\n      setActivePreset(undefined);\n      setPresetFormatText(undefined);\n    }\n    // 消费掉标记，等待下次用户操作重新置位\n    selfChangeRef.current = false;\n  }, [value]);\n\n  // ── 紧凑 tag 展示文本 ──────────────────────────────────────────────────────\n\n  /**\n   * 紧凑模式下起止时间的字符串表示。\n   * 与 Vue showState 计算属性逻辑一致。\n   */\n  const showState = useMemo<[string, string] | []>(() => {\n    if (!value || value.length < 2) return [];\n    return [formatToKey(value[0] as Dayjs), formatToKey(value[1] as Dayjs)];\n  }, [value]);\n\n  // ── 预设激活项检测 ─────────────────────────────────────────────────────────\n\n  /**\n   * 根据当前 value 匹配激活的预设 index（用于高亮渲染）。\n   * 将 value 和预设值都格式化为同一字符串后比对，与 Vue presetsNode computed 一致。\n   * 依赖 open，确保面板打开时（时间流逝后）重新计算。\n   */\n  const activePresetIndex = useMemo<number>(() => {\n    if (!value || value.length < 2) return -1;\n    const [v0, v1] = value as DateRangeValue;\n    const valKeys = [formatToKey(v0), formatToKey(v1)];\n    return RANGE_PRESETS.findIndex((preset) => {\n      const presetVal = preset.value();\n      const presetKeys = [formatToKey(presetVal[0]), formatToKey(presetVal[1])];\n      return valKeys[0] === presetKeys[0] && valKeys[1] === presetKeys[1];\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value, open]);\n\n  // ── 事件处理 ──────────────────────────────────────────────────────────────\n\n  /**\n   * 点击预设项。\n   * 对应 Vue handleTogglePreset。\n   */\n  const handlePresetClick = useCallback(\n    (preset: RangePreset) => {\n      isPresetClickRef.current = true;\n\n      const currentValue = preset.value();\n\n      // 计算紧凑 tag 中的格式化文本\n      let formatText: string;\n      if (preset.format) {\n        const res = preset.format(currentValue);\n        formatText = Array.isArray(res) ? res.join(' ~ ') : res;\n      } else {\n        // 无自定义 format：默认展示时间部分，如「12:00:00 ~ 13:00:00」\n        formatText = currentValue.map((v) => dayjs(v).format('HH:mm:ss')).join(' ~ ');\n      }\n\n      setActivePreset(preset);\n      setPresetFormatText(formatText);\n\n      // 向父组件通知新值\n      selfChangeRef.current = true;\n      onChange?.(currentValue);\n\n      // 选完预设后收起 picker\n      scheduleCollapse();\n    },\n    [onChange],\n  );\n\n  /**\n   * RangePicker onChange（用户手动选择日期或点击清除后触发）。\n   * 对应 Vue handleChange。\n   */\n  const handlePickerChange = useCallback(\n    (dates: [Dayjs | null, Dayjs | null] | null) => {\n      // 无论是否预设点击，只要触发 change 都先清空预设状态\n      setActivePreset(undefined);\n      setPresetFormatText(undefined);\n      isPresetClickRef.current = false;\n\n      selfChangeRef.current = true;\n\n      if (dates?.[0] && dates?.[1]) {\n        // 正常选择\n        onChange?.(dates as DateRangeValue);\n      } else {\n        // 点击清除：value 置为 []（空数组），并退回紧凑 tag 模式显示 placeholder\n        onChange?.(null);\n        scheduleCollapse();\n      }\n    },\n    [onChange],\n  );\n\n  /**\n   * 点击紧凑 tag → 展开完整 RangePicker 并聚焦。\n   * 对应 Vue handleClickPresetPicker。\n   */\n  /** 模拟按钮激活行为，同时支持鼠标点击和键盘回车/空格 */\n  const activateCompactTag = useCallback(() => {\n    setShowFullPicker(true);\n    // 等待 DOM 渲染后再触发 picker 展开\n    setTimeout(() => {\n      const el = pickerRef.current?.nativeElement;\n      if (el) {\n        // 触发第一个 input 的点击，使 antd RangePicker 展开面板\n        const input = el.querySelector<HTMLInputElement>('input');\n        input?.click();\n        input?.focus();\n      }\n    }, 0);\n  }, []);\n\n  /**\n   * RangePicker 面板开关回调。\n   * 面板关闭时延迟退回紧凑模式（避免与选择操作冲突）。\n   */\n  const handleOpenChange = useCallback(\n    (isOpen: boolean) => {\n      setOpen(isOpen);\n      if (!isOpen) {\n        scheduleCollapse(150);\n      }\n    },\n    [scheduleCollapse],\n  );\n\n  /**\n   * 禁用日期规则：只允许过去 7 天（含今天）。\n   * 对应 Vue disabledDate。\n   */\n  const disabledDate = useCallback((current: Dayjs) => {\n    return current && (current > dayjs().endOf('day') || current < dayjs().subtract(6, 'day').startOf('day'));\n  }, []);\n\n  /**\n   * Popup 挂载容器：挂在组件自身 wrapper 内，避免全局定位错乱。\n   * 对应 Vue getPopupContainer。\n   */\n  const getPopupContainer = useCallback((): HTMLElement => {\n    return wrapperRef.current ?? document.body;\n  }, []);\n\n  // ── antd presets 节点 ──────────────────────────────────────────────────────\n\n  /**\n   * 构建传入 RangePicker 的 presets prop。\n   * - label 为自定义 ReactNode，实现点击处理与高亮样式\n   * - value 传实时值供 antd 内部使用（如 disabledDate 校验）\n   * antd 5.x presets 格式：{ label: ReactNode; value: [Dayjs, Dayjs] }[]\n   */\n  const presetsNode = useMemo(() => {\n    return RANGE_PRESETS.map((preset, index) => {\n      const isActive = activePresetIndex === index;\n      return {\n        label: (\n          <div\n            className={classNames(styles.yokaPresetItem, {\n              [styles.yokaPresetItemActive]: isActive,\n            })}\n            role=\"option\"\n            tabIndex={0}\n            aria-selected={isActive}\n            onClick={(e) => {\n              e.stopPropagation();\n              handlePresetClick(preset);\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                e.stopPropagation();\n                handlePresetClick(preset);\n              }\n            }}\n          >\n            {preset.label}\n          </div>\n        ),\n        value: preset.value() as [Dayjs, Dayjs],\n      };\n    });\n  }, [activePresetIndex, handlePresetClick]);\n\n  // ── 对外暴露方法 ───────────────────────────────────────────────────────────\n\n  /**\n   * 通过 ref 暴露 toggleFirstPreset()，供父组件调用。\n   * 对应 Vue defineExpose({ toggleFirstPreset })。\n   */\n  useImperativeHandle(\n    ref,\n    () => ({\n      toggleFirstPreset() {\n        handlePresetClick(RANGE_PRESETS[0]);\n      },\n    }),\n    [handlePresetClick],\n  );\n\n  // ── 渲染 ──────────────────────────────────────────────────────────────────\n\n  // 完整 picker 的可见性：展开状态 或 下拉面板打开时均显示\n  const pickerVisible = showFullPicker || open;\n\n  return (\n    <div\n      className={classNames(styles.YkDateRangePicker, {\n        [styles.yokaDisabled]: disabled,\n      })}\n      ref={wrapperRef}\n    >\n      {/* ── 紧凑 Tag 模式 ── */}\n      {!showFullPicker && (\n        <span\n          className={styles.yokaCompactTag}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-disabled={disabled}\n          onClick={disabled ? undefined : activateCompactTag}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              activateCompactTag();\n            }\n          }}\n        >\n          {/* 图标：绝对定位固定在左侧 */}\n          <i className={classNames('iconfont icon-riqi1', styles.yokaCompactTagIcon)} />\n          {/* 内容区：flex:1 + justify-content:center 实现视觉居中 */}\n          <span className={styles.yokaCompactTagContent}>\n            {activePreset ? (\n              // 已选预设：「预设名称 (格式化时间)」\n              <>\n                <span className={styles.yokaCompactTagPresetLabel}>{activePreset.label}</span>\n                <span className={styles.yokaCompactTagPresetFormat}>({presetFormatText})</span>\n              </>\n            ) : showState.length === 2 ? (\n              // 自定义时间：「起始时间 ~ 结束时间」\n              <>\n                <span className={styles.yokaCompactTagDatetime}>{showState[0]}</span>\n                <span className={styles.yokaCompactTagSeparator}>~</span>\n                <span className={styles.yokaCompactTagDatetime}>{showState[1]}</span>\n              </>\n            ) : (\n              // 无值/清空：placeholder 居中显示\n              <span className={styles.yokaCompactTagPlaceholder}>{placeholder}</span>\n            )}\n          </span>\n        </span>\n      )}\n\n      {/* ── 完整 RangePicker（display 切换以保持 DOM 挂载，避免 focus 闪烁） ── */}\n      <div className={styles.yokaPickerWrapper} style={{ display: pickerVisible ? 'flex' : 'none' }}>\n        <i className={classNames('iconfont icon-riqi1', styles.yokaPickerWrapperIcon)} />\n        <RangePicker\n          ref={pickerRef}\n          // 值与回调\n          value={value && value.length === 2 ? (value as [Dayjs, Dayjs]) : undefined}\n          onChange={handlePickerChange}\n          open={open}\n          onOpenChange={handleOpenChange}\n          // 外观\n          variant=\"borderless\"\n          allowClear={allowClear}\n          disabled={disabled}\n          status={status || undefined}\n          suffixIcon={null}\n          // 时间选择（支持秒）\n          showTime={{\n            format: 'HH:mm:ss',\n            hideDisabledOptions: true,\n            defaultValue: [dayjs('00:00', 'HH:mm'), dayjs('23:59', 'HH:mm')],\n          }}\n          format=\"YYYY-MM-DD HH:mm:ss\"\n          // 禁用日期\n          disabledDate={disabledDate}\n          // 预设（自定义渲染）\n          presets={presetsNode}\n          // Popup 容器\n          getPopupContainer={getPopupContainer}\n          classNames={{ popup: { root: 'yoka-daterangepicker-popup' } }}\n        />\n      </div>\n    </div>\n  );\n});\n\nYkDateRangePicker.displayName = 'YkDateRangePicker';\n\nexport default YkDateRangePicker;\n"],
+  "mappings": "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",
+  "names": ["YkDateRangePicker"]
+}

package/dist/es/components/YkDateRangePicker/index.module.less

@@ -0,0 +1,304 @@
+/**
+ * YkDateRangePicker 样式 (CSS Modules)
+ *
+ * Less 变量映射：
+ *   @primary-color  → #1890ff
+ *   @error-color    → #ff4d4f
+ *
+ * 命名前缀规则：
+ *   .YkDateRangePicker  → 根容器（CSS Modules 驼峰命名）
+ *   .yoka*                → 组件内部元素（yoka 前缀 + 驼峰命名）
+ */
+
+/* ─── 根容器 ──────────────────────────────────────────────────────────────── */
+
+.YkDateRangePicker {
+  display: inline-block;
+  position: relative;
+}
+
+/* ─── 紧凑 Tag 模式（对应 Vue .preset-picker） ────────────────────────────── */
+
+.yokaCompactTag {
+  display: inline-flex;
+  align-items: center;
+  /* 图标绝对定位后，内容区可以真正居中 */
+  position: relative;
+  min-width: 220px;
+  height: 30px;
+  padding: 0 10px 0 32px; /* 左侧为图标留出空间 */
+  border: 1px solid #1890ff;
+  border-radius: 2px;
+  line-height: 28px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  &:hover {
+    border-color: #66a8ff;
+  }
+}
+
+/* 日历图标：绝对定位固定在左侧，不参与内容排布 */
+.yokaCompactTagIcon {
+  position: absolute;
+  left: 10px;
+  color: #0a6bfd;
+  font-size: 14px;
+}
+
+/* 内容区：flex:1 撑满剩余空间，内容水平居中 */
+.yokaCompactTagContent {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 预设模式：标签名，如「近 5 分钟」 */
+.yokaCompactTagPresetLabel {
+  /* 跟随 __content 的 justify-content:center 即可 */
+}
+
+/* 预设模式：格式化时间，如「(12:00:00 ~ 13:00:00)」 */
+.yokaCompactTagPresetFormat {
+  margin-left: 8px;
+  color: #666;
+}
+
+/* 自定义模式：起止时间项 */
+.yokaCompactTagDatetime {
+  display: inline-block;
+  min-width: 110px;
+  text-align: center;
+}
+
+/* 自定义模式：分隔符「~」 */
+.yokaCompactTagSeparator {
+  display: inline-block;
+  margin: 0 2px;
+}
+
+/* 清空/无值时的 placeholder 文本居中 */
+.yokaCompactTagPlaceholder {
+  color: rgba(0, 0, 0, 0.25);
+  text-align: center;
+  width: 100%;
+  display: block;
+}
+
+/* ─── 完整 RangePicker 包装容器（对应 Vue .date-time-range-picker） ──────── */
+
+.yokaPickerWrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 30px;
+  gap: 10px;
+  padding-left: 10px;
+  border: 1px solid #e7e7e7;
+  border-radius: 2px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  box-sizing: border-box;
+  /* 撑满宽度（当 display: flex 时生效） */
+  width: 100%;
+
+  &:hover {
+    border-color: #66a8ff;
+  }
+
+  /* 包含聚焦状态的 picker 时，模拟 antd focus-ring */
+  &:has(:global(.ant-picker-focused)) {
+    border-color: #66a8ff;
+    box-shadow: 0 0 0 2px rgba(5, 138, 255, 0.06);
+  }
+
+  /* 包含错误状态的 picker 时 */
+  &:has(:global(.ant-picker-status-error)) {
+    border-color: #ff4d4f;
+
+    &:hover,
+    &:has(:global(.ant-picker-focused)) {
+      border-color: #ff4d4f;
+    }
+  }
+
+  /* 无边框 RangePicker：撑满宽度，去除左侧 padding 避免双缩进 */
+  :global(.ant-picker) {
+    width: 100%;
+    padding-left: 0;
+  }
+
+  :global(.ant-picker-borderless) {
+    border: none;
+  }
+}
+
+/* 日历图标 */
+.yokaPickerWrapperIcon {
+  color: #0a6bfd;
+  font-size: 14px;
+}
+
+/* ─── 预设下拉面板：2 列 Grid 布局 ────────────────────────────────────────── */
+
+/*
+ * 需要穿透 antd 在 body 下生成的 .ant-picker-dropdown Portal。
+ * 使用 :global 显式声明全局样式作用域，通过 .yoka-daterangepicker-popup 类名
+ * 限定为仅影响本组件实例的下拉面板，避免全局样式污染。
+ */
+
+:global {
+  .yoka-daterangepicker-popup .ant-picker-panel-layout {
+    .ant-picker-presets {
+      ul {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        align-content: start;
+        padding: 15px 10px 10px 10px !important;
+
+        li {
+          position: relative;
+          width: 100%;
+          min-width: 0;
+          height: 30px;
+          margin-top: 0 !important;
+          margin-bottom: 0;
+          line-height: 30px;
+          text-align: center;
+          border: 1px solid #ededed;
+          border-radius: 2px !important;
+          box-sizing: border-box;
+        }
+
+        .ant-picker-presets-li {
+          position: absolute;
+          font-size: 12px;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+
+          &.ant-picker-presets-li-item {
+            color: #fff;
+            background-color: #3b86f9;
+          }
+        }
+      }
+    }
+  }
+  /* antd 5.x: 快捷预设面板的列表容器 */
+  .yoka-daterangepicker-popup .ant-picker-presets {
+    max-height: none !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  .yoka-daterangepicker-popup .ant-picker-presets li {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  .yoka-daterangepicker-popup .ant-picker-presets ul {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    width: auto !important;
+    min-width: 140px !important;
+    max-width: 200px !important;
+    margin: 0 !important;
+    list-style: none !important;
+    overflow: hidden !important;
+    flex-wrap: wrap !important;
+  }
+
+  .yoka-daterangepicker-popup .ant-picker-presets ul li {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  /* 最后一个预设项不加底部 margin（对应 Vue li:last-of-type 规则） */
+  .yoka-daterangepicker-popup .ant-picker-presets li:last-of-type {
+    margin-bottom: 0 !important;
+  }
+
+  /* 快捷选项底部操作栏行高（缩减后与面板整体协调） */
+  .yoka-daterangepicker-popup .ant-picker-ranges {
+    line-height: 36px;
+    overflow: hidden !important;
+  }
+}
+
+/* ─── 预设列表项自定义样式（对应 Vue .ant-picker-presets-li） ──────────── */
+
+.yokaPresetItem {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1;
+  outline: none;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(5, 138, 255, 0.2);
+  }
+}
+
+/* 当前激活（选中）的预设高亮 */
+.yokaPresetItemActive {
+  color: #fff;
+  background-color: #3b86f9;
+
+  &:hover {
+    background-color: #bae7ff;
+  }
+}
+
+/* ─── 禁用状态 ────────────────────────────────────────────────────────── */
+
+.yokaDisabled {
+  pointer-events: none;
+  opacity: 0.5;
+
+  .yokaCompactTag,
+  .yokaPickerWrapper {
+    cursor: not-allowed;
+    border-color: #d9d9d9;
+
+    &:hover {
+      border-color: #d9d9d9;
+    }
+  }
+}