@yoka-ui/ui 1.0.1

package/dist/lib/components/YkDateRangePicker/YkDateRangePicker.mdx

@@ -0,0 +1,180 @@
+import { Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as YkDateRangePickerStories from './index.stories';
+
+<Meta of={YkDateRangePickerStories} />
+
+# YkDateRangePicker 事件日期范围选择器
+
+事件类日期范围选择器，支持**紧凑预设标签**与**完整 RangePicker** 双模式切换，提供多项快捷预设与受控逻辑。
+
+## ✨ 核心特性
+
+- 🎯 **双模式交互**：紧凑模式（预设标签）↔ 完整模式（RangePicker）无缝切换
+- ⚡ **智能预设**：内置 8 个常用时间快捷选项，2 列网格布局
+- 🎨 **视觉反馈**：当前激活项高亮显示，蓝色背景标识选中状态
+- 🤖 **智能默认**：无初始值时自动选中「近5分钟」预设
+- 🔄 **受控组件**：精准区分「用户操作」与「外部赋值」，仅用户操作触发 `onChange`
+- 🔒 **日期限制**：仅允许选择近 7 天（含今天）的时间范围
+- 🗑️ **清除支持**：`allowClear` 一键清除，清除后自动重置预设状态
+- 🔧 **ref 控制**：通过 `forwardRef` 暴露 `toggleFirstPreset()` 方法，支持外部强制切换预设
+
+## 📦 依赖
+
+```json
+{
+  "react": "^18.3.1",
+  "antd": "^5.29.2",
+  "dayjs": "^1.x",
+  "classnames": "^2.5.1",
+  "@ant-design/icons": "^5.6.1"
+}
+```
+
+## 🚀 快速开始
+
+### 基础使用
+
+```tsx
+import { useState, useRef } from 'react';
+import { YkDateRangePicker, type DateRangeValue, type YkDateRangePickerRef } from '@yoka/ui';
+import dayjs from 'dayjs';
+
+function App() {
+  const [range, setRange] = useState<DateRangeValue | []>([]);
+  const pickerRef = useRef<YkDateRangePickerRef>(null);
+
+  return (
+    <YkDateRangePicker
+      value={range}
+      onChange={(dates) => setRange(dates ?? [])}
+      ref={pickerRef}
+    />
+  );
+}
+```
+
+### 外部控制
+
+```tsx
+// 强制切换到「近5分钟」预设
+pickerRef.current?.toggleFirstPreset();
+
+// 设置外部值
+setRange([dayjs().subtract(1, 'hour'), dayjs()]);
+
+// 清空选择
+setRange([]);
+```
+
+## 📋 API 文档
+
+<ArgTypes of={YkDateRangePickerStories} />
+
+## 💡 使用场景
+
+### 1. 日志查询
+
+适用于需要快速筛选最近时间段日志的场景，预设的「近5分钟」「近1小时」等选项大幅提升操作效率。
+
+### 2. 数据分析
+
+在数据报表页面中，用户可以通过预设快速切换常用分析周期，或通过自定义范围进行精细化查询。
+
+### 3. 监控告警
+
+结合实时监控需求，预设项帮助用户快速定位异常发生的时间段。
+
+## 🎯 最佳实践
+
+### 保持受控模式
+
+始终使用受控模式（controlled mode），通过 `value` 和 `onChange` 管理状态，确保组件行为可预测：
+
+```tsx
+// ✅ 推荐：受控模式
+const [value, setValue] = useState<DateRangeValue | []>([]);
+<YkDateRangePicker value={value} onChange={setValue} />
+
+// ❌ 避免：非受控模式可能导致状态不一致
+<YkDateRangePicker defaultValue={initialValue} />
+```
+
+### 合理使用 ref
+
+ref 方法 `toggleFirstPreset()` 适用于特殊场景（如重置查询条件），日常使用中建议通过受控 props 控制组件：
+
+```tsx
+// 在重置按钮的回调中使用
+const handleReset = () => {
+  setValue([]); // 清空值
+  pickerRef.current?.toggleFirstPreset(); // 重置到默认预设
+};
+```
+
+### 处理空值
+
+组件支持空数组 `[]` 作为值，表示未选择任何时间范围。清除后建议重置为 `[]` 而非 `undefined`：
+
+```tsx
+onChange={(val) => {
+  // ✅ 推荐：始终转换为数组
+  setValue(val || []);
+}}
+```
+
+## ⚠️ 注意事项
+
+1. **样式引入**：业务侧使用 `@yoka/ui` 时，需确保引入 Ant Design 全局样式和组件库样式：
+   ```tsx
+   import 'antd/dist/reset.css';
+   import '@yoka/ui/dist/index.less';
+   ```
+
+2. **版本要求**：需要 React 18+ 和 Ant Design 5+，与库的版本保持一致。
+
+3. **日期限制**：组件默认限制只能选择近 7 天（含今天）的时间范围，如需调整需修改源码中的禁用逻辑。
+
+4. **预设范围**：预设项的时长计算基于当前时间，每次展开时会重新计算。
+
+5. **性能优化**：组件内部使用 `useMemo` 和 `useCallback` 优化预设计算和事件处理，避免不必要的重渲染。
+
+## 🎨 预设项说明
+
+| 预设标签 | 时间范围 | 使用场景 |
+| --------- | --------- | --------- |
+| 近5分钟 | 当前时间 - 5分钟 ~ 现在 | 实时监控、日志追踪 |
+| 近15分钟 | 当前时间 - 15分钟 ~ 现在 | 短期数据分析 |
+| 近30分钟 | 当前时间 - 30分钟 ~ 现在 | 中等时长监控 |
+| 近1小时 | 当前时间 - 1小时 ~ 现在 | 小时级数据分析 |
+| 近6小时 | 当前时间 - 6小时 ~ 现在 | 半日数据查看 |
+| 近12小时 | 当前时间 - 12小时 ~ 现在 | 半日对比分析 |
+| 近24小时 | 当前时间 - 24小时 ~ 现在 | 日级数据查询 |
+| 近7天 | 当前时间 - 7天 ~ 现在 | 周级趋势分析 |
+
+## 🔍 交互行为
+
+### 预设选择流程
+
+1. 用户点击紧凑模式的标签区域
+2. 下拉面板展开，显示 8 个预设选项和完整的 RangePicker
+3. 用户点击任意预设项，组件自动计算对应时间范围
+4. 选择后立即触发 `onChange` 回调，并关闭面板
+5. 紧凑模式标签更新为「预设名称 + 格式化时间」或「起止时间」
+
+### 自定义时间选择
+
+1. 用户在展开的面板中点击 RangePicker
+2. 选择自定义开始和结束时间
+3. 点击确定后触发 `onChange` 回调
+4. 紧凑模式标签显示为「开始时间 ~ 结束时间」格式
+
+### 清除行为
+
+- 当设置 `allowClear=true` 时，标签右侧显示清除图标
+- 点击清除图标后，值重置为 `[]`，预设状态被清除
+- 触发 `onChange` 回调，参数为 `[]`
+
+## 📚 相关组件
+
+- [DatePicker](https://ant.design/components/date-picker) - Ant Design 基础日期选择器
+- [RangePicker](https://ant.design/components/date-picker#rangepicker) - Ant Design 日期范围选择器

package/dist/lib/components/YkDateRangePicker/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * YkDateRangePicker
+ *
+ * 带「紧凑预设 tag」与「完整 RangePicker」双模式切换的日期范围选择器。
+ *
+ * 功能特性：
+ * - 默认紧凑模式：以 tag 形式展示「预设标签 + 格式化时间」或「起止时间」
+ * - mount 时若无初始值，自动选中「近5分钟」预设
+ * - 点击 tag 后展开内嵌的完整 RangePicker，失焦后自动收起
+ * - 8 个内置快捷预设，2 列 Grid 布局渲染，当前激活项高亮
+ * - 受控组件：区分「用户操作」与「外部赋值」，仅用户操作触发 onChange
+ * - 禁用日期：仅允许过去 7 天（含今天）
+ * - allowClear：支持一键清除，清除后重置预设状态
+ * - 通过 forwardRef + useImperativeHandle 对外暴露 toggleFirstPreset()
+ *
+ * @example
+ * ```tsx
+ * const pickerRef = useRef<YkDateRangePickerRef>(null);
+ *
+ * <YkDateRangePicker
+ *   value={range}
+ *   onChange={(val) => setRange(val)}
+ *   ref={pickerRef}
+ * />
+ *
+ * // 外部强制切换到「近5分钟」
+ * pickerRef.current?.toggleFirstPreset();
+ * ```
+ */
+import { Dayjs } from 'dayjs';
+import React from 'react';
+/** 时间范围值 */
+export type DateRangeValue = [Dayjs, Dayjs];
+export interface YkDateRangePickerProps {
+    /** 受控值 */
+    value?: DateRangeValue | [];
+    /** 用户操作改变时触发（外部 setValue 不会触发） */
+    onChange?: (value: DateRangeValue | null) => void;
+    /**
+     * 是否允许清除。
+     * - false（默认）：隐藏清除按钮，与 Vue 原版行为一致
+     * - true：显示清除按钮，清除后重置预设状态并触发 onChange(null)
+     */
+    allowClear?: boolean;
+    /**
+     * 紧凑 tag 无值/清空时的占位文本。
+     * 默认：「请选择时间范围」
+     */
+    placeholder?: string;
+    /** 是否禁用选择器 */
+    disabled?: boolean;
+    /** 校验状态 */
+    status?: '' | 'error' | 'warning';
+}
+/** 通过 ref 对父组件暴露的方法 */
+export interface YkDateRangePickerRef {
+    /** 强制切换到第一个预设（近5分钟）并触发 onChange */
+    toggleFirstPreset: () => void;
+}
+declare const YkDateRangePicker: React.ForwardRefExoticComponent<YkDateRangePickerProps & React.RefAttributes<YkDateRangePickerRef>>;
+export default YkDateRangePicker;

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

@@ -0,0 +1,338 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/YkDateRangePicker/index.tsx
+var YkDateRangePicker_exports = {};
+__export(YkDateRangePicker_exports, {
+  default: () => YkDateRangePicker_default
+});
+module.exports = __toCommonJS(YkDateRangePicker_exports);
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_react = __toESM(require("react"));
+var import_index_module = __toESM(require("./index.module.less"));
+var { RangePicker } = import_antd.DatePicker;
+function pastTime(n, unit) {
+  const fmt = "YYYY-MM-DD HH:mm:00";
+  return [(0, import_dayjs.default)((0, import_dayjs.default)().subtract(n, unit).format(fmt)), (0, import_dayjs.default)((0, import_dayjs.default)().format(fmt))];
+}
+var DISPLAY_FORMAT = "YYYY-MM-DD HH:mm:ss";
+function formatToKey(d) {
+  return (0, import_dayjs.default)(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: () => [
+      (0, import_dayjs.default)((0, import_dayjs.default)().startOf("day").format("YYYY-MM-DD HH:mm:ss")),
+      (0, import_dayjs.default)((0, import_dayjs.default)().endOf("day").format("YYYY-MM-DD HH:mm:ss"))
+    ],
+    // 紧凑模式只展示日期，如「03-25」
+    format: (v) => v[0].format("MM-DD")
+  },
+  {
+    label: "昨天",
+    value: () => [
+      (0, import_dayjs.default)((0, import_dayjs.default)().subtract(1, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss")),
+      (0, import_dayjs.default)((0, import_dayjs.default)().subtract(1, "day").endOf("day").format("YYYY-MM-DD HH:mm:ss"))
+    ],
+    format: (v) => v[0].format("MM-DD")
+  },
+  {
+    label: "近7天",
+    value: () => [
+      (0, import_dayjs.default)((0, import_dayjs.default)().subtract(6, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss")),
+      (0, import_dayjs.default)((0, import_dayjs.default)().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 = (0, import_react.forwardRef)(function YkDateRangePicker2({ value, onChange, allowClear = false, placeholder = "请选择时间范围", disabled = false, status = "" }, ref) {
+  const [showFullPicker, setShowFullPicker] = (0, import_react.useState)(false);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [activePreset, setActivePreset] = (0, import_react.useState)(void 0);
+  const [presetFormatText, setPresetFormatText] = (0, import_react.useState)(void 0);
+  const selfChangeRef = (0, import_react.useRef)(false);
+  const isPresetClickRef = (0, import_react.useRef)(false);
+  const collapseTimerRef = (0, import_react.useRef)();
+  const wrapperRef = (0, import_react.useRef)(null);
+  const pickerRef = (0, import_react.useRef)(null);
+  const prevValueRef = (0, import_react.useRef)(value);
+  const scheduleCollapse = (0, import_react.useCallback)((delay) => {
+    clearTimeout(collapseTimerRef.current);
+    collapseTimerRef.current = setTimeout(() => {
+      setOpen(false);
+      setShowFullPicker(false);
+    }, delay ?? 0);
+  }, []);
+  (0, import_react.useEffect)(() => () => clearTimeout(collapseTimerRef.current), []);
+  (0, import_react.useEffect)(() => {
+    if (value && value.length === 2)
+      return;
+    const first = RANGE_PRESETS[0];
+    const currentValue = first.value();
+    const formatText = currentValue.map((v) => (0, import_dayjs.default)(v).format("HH:mm:ss")).join(" ~ ");
+    setActivePreset(first);
+    setPresetFormatText(formatText);
+    selfChangeRef.current = true;
+    onChange == null ? void 0 : onChange(currentValue);
+  }, []);
+  (0, import_react.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 = (0, import_react.useMemo)(() => {
+    if (!value || value.length < 2)
+      return [];
+    return [formatToKey(value[0]), formatToKey(value[1])];
+  }, [value]);
+  const activePresetIndex = (0, import_react.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 = (0, import_react.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) => (0, import_dayjs.default)(v).format("HH:mm:ss")).join(" ~ ");
+      }
+      setActivePreset(preset);
+      setPresetFormatText(formatText);
+      selfChangeRef.current = true;
+      onChange == null ? void 0 : onChange(currentValue);
+      scheduleCollapse();
+    },
+    [onChange]
+  );
+  const handlePickerChange = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(
+    (isOpen) => {
+      setOpen(isOpen);
+      if (!isOpen) {
+        scheduleCollapse(150);
+      }
+    },
+    [scheduleCollapse]
+  );
+  const disabledDate = (0, import_react.useCallback)((current) => {
+    return current && (current > (0, import_dayjs.default)().endOf("day") || current < (0, import_dayjs.default)().subtract(6, "day").startOf("day"));
+  }, []);
+  const getPopupContainer = (0, import_react.useCallback)(() => {
+    return wrapperRef.current ?? document.body;
+  }, []);
+  const presetsNode = (0, import_react.useMemo)(() => {
+    return RANGE_PRESETS.map((preset, index) => {
+      const isActive = activePresetIndex === index;
+      return {
+        label: /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(import_index_module.default.yokaPresetItem, {
+              [import_index_module.default.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]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      toggleFirstPreset() {
+        handlePresetClick(RANGE_PRESETS[0]);
+      }
+    }),
+    [handlePresetClick]
+  );
+  const pickerVisible = showFullPicker || open;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(import_index_module.default.YkDateRangePicker, {
+        [import_index_module.default.yokaDisabled]: disabled
+      }),
+      ref: wrapperRef
+    },
+    !showFullPicker && /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: import_index_module.default.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__ */ import_react.default.createElement("i", { className: (0, import_classnames.default)("iconfont icon-riqi1", import_index_module.default.yokaCompactTagIcon) }),
+      /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagContent }, activePreset ? (
+        // 已选预设：「预设名称 (格式化时间)」
+        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagPresetLabel }, activePreset.label), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagPresetFormat }, "(", presetFormatText, ")"))
+      ) : showState.length === 2 ? (
+        // 自定义时间：「起始时间 ~ 结束时间」
+        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagDatetime }, showState[0]), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagSeparator }, "~"), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagDatetime }, showState[1]))
+      ) : (
+        // 无值/清空：placeholder 居中显示
+        /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.yokaCompactTagPlaceholder }, placeholder)
+      ))
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.yokaPickerWrapper, style: { display: pickerVisible ? "flex" : "none" } }, /* @__PURE__ */ import_react.default.createElement("i", { className: (0, import_classnames.default)("iconfont icon-riqi1", import_index_module.default.yokaPickerWrapperIcon) }), /* @__PURE__ */ import_react.default.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: [(0, import_dayjs.default)("00:00", "HH:mm"), (0, import_dayjs.default)("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;
+//# sourceMappingURL=index.js.map

package/dist/lib/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": ["dayjs", "YkDateRangePicker", "React", "classNames", "styles"]
+}