@yoka-ui/ui 1.0.1

package/dist/es/components/TreeTransfer/utils/index.js

@@ -0,0 +1,195 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/TreeTransfer/utils/index.ts
+import { DEFAULT_PAGE_SIZE } from "../types";
+function buildTreeData(data, options = {}) {
+  const { keyField = "id", parentField = "parentId", isParent = (item) => !item[parentField] } = options;
+  const map = /* @__PURE__ */ new Map();
+  const roots = [];
+  data.forEach((item) => {
+    const key = item[keyField];
+    map.set(key, { key, data: item, isParent: isParent(item), children: [] });
+  });
+  data.forEach((item) => {
+    const key = item[keyField];
+    const parentId = item[parentField];
+    const node = map.get(key);
+    if (parentId && map.has(parentId)) {
+      map.get(parentId).children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+  return roots;
+}
+function flattenTreeData(treeData) {
+  const result = [];
+  function traverse(nodes) {
+    nodes.forEach((node) => {
+      var _a;
+      result.push(node);
+      if ((_a = node.children) == null ? void 0 : _a.length)
+        traverse(node.children);
+    });
+  }
+  traverse(treeData);
+  return result;
+}
+function sliceDataByPage(data, page, pageSize = DEFAULT_PAGE_SIZE) {
+  const start = (page - 1) * pageSize;
+  return data.slice(start, start + pageSize);
+}
+function filterData(data, searchValue, fields = ["id", "name"]) {
+  if (!searchValue.trim())
+    return data;
+  const lowerSearch = searchValue.toLowerCase();
+  return data.filter((item) => {
+    var _a;
+    const selfMatch = fields.some((field) => {
+      const value = typeof field === "function" ? field(item.data) : item.data[field];
+      return String(value != null ? value : "").toLowerCase().includes(lowerSearch);
+    });
+    if (selfMatch)
+      return true;
+    if ((_a = item.children) == null ? void 0 : _a.length) {
+      return filterData(item.children, searchValue, fields).length > 0;
+    }
+    return false;
+  });
+}
+function getAllDescendantKeys(selectedKeys, dataSource) {
+  const keySet = new Set(selectedKeys.map(String));
+  const allKeys = [];
+  function collectWithDescendants(node) {
+    var _a;
+    allKeys.push(String(node.key));
+    (_a = node.children) == null ? void 0 : _a.forEach(collectWithDescendants);
+  }
+  function traverse(nodes) {
+    nodes.forEach((node) => {
+      var _a;
+      if (keySet.has(String(node.key))) {
+        collectWithDescendants(node);
+      } else {
+        if ((_a = node.children) == null ? void 0 : _a.length)
+          traverse(node.children);
+      }
+    });
+  }
+  traverse(dataSource);
+  return allKeys;
+}
+function countTotalNodes(data) {
+  let count = 0;
+  function traverse(nodes) {
+    nodes.forEach((node) => {
+      var _a;
+      count += 1;
+      if ((_a = node.children) == null ? void 0 : _a.length)
+        traverse(node.children);
+    });
+  }
+  traverse(data);
+  return count;
+}
+function countParentNodes(data) {
+  return data.length;
+}
+function findNodeWithDescendants(key, dataSource) {
+  const result = [];
+  function traverse(nodes) {
+    var _a;
+    for (const node of nodes) {
+      if (node.key === key) {
+        result.push(node);
+        (_a = node.children) == null ? void 0 : _a.forEach((child) => {
+          result.push(child);
+          if (child.children)
+            traverse(child.children);
+        });
+        return true;
+      }
+      if (node.children && traverse(node.children))
+        return true;
+    }
+    return false;
+  }
+  traverse(dataSource);
+  return result;
+}
+function removeNodesFromTree(dataSource, keysToRemove) {
+  var _a;
+  const result = [];
+  for (const node of dataSource) {
+    if (keysToRemove.has(node.key))
+      continue;
+    if ((_a = node.children) == null ? void 0 : _a.length) {
+      result.push(__spreadProps(__spreadValues({}, node), { children: removeNodesFromTree(node.children, keysToRemove) }));
+    } else {
+      result.push(node);
+    }
+  }
+  return result;
+}
+function addNodesToTree(dataSource, parentKey, nodes) {
+  if (parentKey === null) {
+    return [...dataSource, ...nodes];
+  }
+  return dataSource.map((node) => {
+    var _a;
+    if (node.key === parentKey) {
+      return __spreadProps(__spreadValues({}, node), { children: [...(_a = node.children) != null ? _a : [], ...nodes] });
+    }
+    if (node.children) {
+      return __spreadProps(__spreadValues({}, node), { children: addNodesToTree(node.children, parentKey, nodes) });
+    }
+    return node;
+  });
+}
+function extractTopLevelSelectedNodes(selectedKeys, dataSource) {
+  const result = [];
+  function traverse(nodes) {
+    nodes.forEach((node) => {
+      var _a;
+      if (selectedKeys.has(String(node.key))) {
+        result.push(node);
+      } else if ((_a = node.children) == null ? void 0 : _a.length) {
+        traverse(node.children);
+      }
+    });
+  }
+  traverse(dataSource);
+  return result;
+}
+export {
+  addNodesToTree,
+  buildTreeData,
+  countParentNodes,
+  countTotalNodes,
+  extractTopLevelSelectedNodes,
+  filterData,
+  findNodeWithDescendants,
+  flattenTreeData,
+  getAllDescendantKeys,
+  removeNodesFromTree,
+  sliceDataByPage
+};
+//# sourceMappingURL=index.js.map

package/dist/es/components/TreeTransfer/utils/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/TreeTransfer/utils/index.ts"],
+  "sourcesContent": ["/*\n *  Licensed to the Apache Software Foundation (ASF) under one or more\n *  contributor license agreements.  See the NOTICE file distributed with\n *  this work for additional information regarding copyright ownership.\n *  The ASF licenses this file to You under the Apache License, Version 2.0\n *  (the \"License\"); you may not use this file except in compliance with\n *  the License.  You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n *  Unless required by applicable law or agreed to in writing, software\n *  distributed under the License is distributed on an \"AS IS\" BASIS,\n *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *  See the License for the specific language governing permissions and\n *  limitations under the License.\n *\n */\n\nimport { TreeTransferRow, DEFAULT_PAGE_SIZE } from '../types';\n\n/**\n * 从平铺的数据构建树形结构\n *\n * @param data - 平铺的数据数组\n * @param options - 配置选项\n * @returns 树形结构数据\n *\n * @example\n * ```tsx\n * const flatData = [\n *   { id: '1', parentId: null, name: '应用1' },\n *   { id: '1-1', parentId: '1', name: '权限1' },\n * ];\n *\n * const treeData = buildTreeData(flatData, {\n *   keyField: 'id',\n *   parentField: 'parentId',\n * });\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function buildTreeData<T extends Record<string, any>>(\n  data: T[],\n  options: {\n    /** 唯一键字段名，默认 'id' */\n    keyField?: string;\n    /** 父键字段名，默认 'parentId' */\n    parentField?: string;\n    /** 判断是否为父节点的函数，默认：无父键则为父节点 */\n    isParent?: (item: T) => boolean;\n  } = {},\n): TreeTransferRow<T>[] {\n  const { keyField = 'id', parentField = 'parentId', isParent = (item) => !item[parentField] } = options;\n\n  const map = new Map<string | number, TreeTransferRow<T>>();\n  const roots: TreeTransferRow<T>[] = [];\n\n  // 第一次遍历：建立 key → node 映射\n  data.forEach((item) => {\n    const key = item[keyField];\n    map.set(key, { key, data: item, isParent: isParent(item), children: [] });\n  });\n\n  // 第二次遍历：挂载父子关系\n  data.forEach((item) => {\n    const key = item[keyField];\n    const parentId = item[parentField];\n    const node = map.get(key)!;\n\n    if (parentId && map.has(parentId)) {\n      map.get(parentId)!.children!.push(node);\n    } else {\n      roots.push(node);\n    }\n  });\n\n  return roots;\n}\n\n/**\n * 将树形结构平铺为一维数组（深度优先）\n *\n * @example\n * ```tsx\n * const flat = flattenTreeData([{ key: '1', children: [{ key: '1-1' }] }]);\n * // → [{ key: '1' }, { key: '1-1' }]\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function flattenTreeData<T = any>(treeData: TreeTransferRow<T>[]): TreeTransferRow<T>[] {\n  const result: TreeTransferRow<T>[] = [];\n\n  function traverse(nodes: TreeTransferRow<T>[]) {\n    nodes.forEach((node) => {\n      result.push(node);\n      if (node.children?.length) traverse(node.children);\n    });\n  }\n\n  traverse(treeData);\n  return result;\n}\n\n/**\n * 根据页码切片数据（前端分页）\n *\n * @param data - 数据数组\n * @param page - 页码（从 1 开始）\n * @param pageSize - 每页条数\n * @returns 当前页数据\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function sliceDataByPage<T = any>(\n  data: TreeTransferRow<T>[],\n  page: number,\n  pageSize: number = DEFAULT_PAGE_SIZE,\n): TreeTransferRow<T>[] {\n  const start = (page - 1) * pageSize;\n  return data.slice(start, start + pageSize);\n}\n\n/**\n * 过滤数据（支持模糊搜索，递归保留有匹配子节点的父节点）\n *\n * @param data - 数据数组\n * @param searchValue - 搜索关键词（空字符串返回全量数据）\n * @param fields - 搜索字段列表，支持字段名或自定义取值函数，默认 ['id', 'name']\n * @returns 过滤后的数据\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function filterData<T = any>(\n  data: TreeTransferRow<T>[],\n  searchValue: string,\n  fields: (string | ((item: T) => string))[] = ['id', 'name'],\n): TreeTransferRow<T>[] {\n  if (!searchValue.trim()) return data;\n\n  const lowerSearch = searchValue.toLowerCase();\n\n  return data.filter((item) => {\n    // 当前节点任意字段匹配即保留\n    const selfMatch = fields.some((field) => {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const value = typeof field === 'function' ? field(item.data) : (item.data as any)[field];\n      return String(value ?? '')\n        .toLowerCase()\n        .includes(lowerSearch);\n    });\n\n    if (selfMatch) return true;\n\n    // 子节点有匹配项则保留父节点（子节点也递归过滤）\n    if (item.children?.length) {\n      return filterData(item.children, searchValue, fields).length > 0;\n    }\n\n    return false;\n  });\n}\n\n/**\n * 获取选中节点及其所有后代节点的 key 集合（用于批量移除）\n *\n * 修复说明：原实现对 3+ 层树只展开 2 层。现改为对每个选中节点\n * 递归收集完整后代链，支持任意深度的树结构。\n *\n * @param selectedKeys - 选中的 keys\n * @param dataSource - 完整数据源\n * @returns 所有相关 key（字符串形式，含选中节点本身）\n *\n * @example\n * ```tsx\n * // 选中 'app1'（含 2 级子节点）\n * getAllDescendantKeys(['app1'], dataSource);\n * // → ['app1', 'app1-perm1', 'app1-perm1-sub1', 'app1-perm2', ...]\n * ```\n */\nexport function getAllDescendantKeys(selectedKeys: React.Key[], dataSource: TreeTransferRow[]): string[] {\n  const keySet = new Set(selectedKeys.map(String));\n  const allKeys: string[] = [];\n\n  /** 递归收集节点本身及所有后代的 key */\n  function collectWithDescendants(node: TreeTransferRow): void {\n    allKeys.push(String(node.key));\n    node.children?.forEach(collectWithDescendants);\n  }\n\n  function traverse(nodes: TreeTransferRow[]): void {\n    nodes.forEach((node) => {\n      if (keySet.has(String(node.key))) {\n        // 选中节点：收集自身及全部后代\n        collectWithDescendants(node);\n      } else {\n        // 未选中：继续向下搜索\n        if (node.children?.length) traverse(node.children);\n      }\n    });\n  }\n\n  traverse(dataSource);\n  return allKeys;\n}\n\n/**\n * 计算数据总节点数（包含所有后代）\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function countTotalNodes<T = any>(data: TreeTransferRow<T>[]): number {\n  let count = 0;\n  function traverse(nodes: TreeTransferRow<T>[]) {\n    nodes.forEach((node) => {\n      count += 1;\n      if (node.children?.length) traverse(node.children);\n    });\n  }\n  traverse(data);\n  return count;\n}\n\n/**\n * 计算顶层节点数（用于分页总数，不含嵌套子节点）\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function countParentNodes<T = any>(data: TreeTransferRow<T>[]): number {\n  return data.length;\n}\n\n/**\n * 查找节点及其所有后代节点（按 key 定位）\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function findNodeWithDescendants<T = any>(\n  key: string | number,\n  dataSource: TreeTransferRow<T>[],\n): TreeTransferRow<T>[] {\n  const result: TreeTransferRow<T>[] = [];\n\n  function traverse(nodes: TreeTransferRow<T>[]): boolean {\n    for (const node of nodes) {\n      if (node.key === key) {\n        result.push(node);\n        node.children?.forEach((child) => {\n          result.push(child);\n          if (child.children) traverse(child.children);\n        });\n        return true;\n      }\n      if (node.children && traverse(node.children)) return true;\n    }\n    return false;\n  }\n\n  traverse(dataSource);\n  return result;\n}\n\n/**\n * 从树形数据中移除指定 key 的节点（不可变，返回新数组）\n *\n * @param dataSource - 数据源\n * @param keysToRemove - 要移除的节点 key 集合\n * @returns 过滤后的新数据源\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function removeNodesFromTree<T = any>(\n  dataSource: TreeTransferRow<T>[],\n  keysToRemove: Set<string | number>,\n): TreeTransferRow<T>[] {\n  const result: TreeTransferRow<T>[] = [];\n\n  for (const node of dataSource) {\n    if (keysToRemove.has(node.key)) continue;\n\n    if (node.children?.length) {\n      result.push({ ...node, children: removeNodesFromTree(node.children, keysToRemove) });\n    } else {\n      result.push(node);\n    }\n  }\n\n  return result;\n}\n\n/**\n * 向树形数据添加节点\n *\n * @param dataSource - 数据源\n * @param parentKey - 父节点 key；传 null 表示添加到根\n * @param nodes - 要添加的节点列表\n * @returns 新的数据源\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function addNodesToTree<T = any>(\n  dataSource: TreeTransferRow<T>[],\n  parentKey: string | number | null,\n  nodes: TreeTransferRow<T>[],\n): TreeTransferRow<T>[] {\n  if (parentKey === null) {\n    return [...dataSource, ...nodes];\n  }\n\n  return dataSource.map((node) => {\n    if (node.key === parentKey) {\n      return { ...node, children: [...(node.children ?? []), ...nodes] };\n    }\n    if (node.children) {\n      return { ...node, children: addNodesToTree(node.children, parentKey, nodes) };\n    }\n    return node;\n  });\n}\n\n/**\n * 从树形数据中提取\"顶层选中节点\"（用于穿梭框移动操作）\n *\n * 行为：遍历树，遇到选中节点时直接收集（含其 children），不再向下递归。\n * 这样可以避免父节点和其已选中的子节点被分别添加两次。\n *\n * 适用场景：AntD Table 的 checkStrictly:false 级联选择中，\n * 选中父节点会自动勾选子节点。move 时只需携带父节点（含 children）。\n * 若仅选了某个子节点，则该子节点会被作为顶层节点添加到目标列表。\n *\n * @param selectedKeys - 选中的 key 集合（字符串）\n * @param dataSource - 数据源（支持嵌套树）\n * @returns 最小集合的顶层选中节点列表\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function extractTopLevelSelectedNodes<T = any>(\n  selectedKeys: Set<string>,\n  dataSource: TreeTransferRow<T>[],\n): TreeTransferRow<T>[] {\n  const result: TreeTransferRow<T>[] = [];\n\n  function traverse(nodes: TreeTransferRow<T>[]): void {\n    nodes.forEach((node) => {\n      if (selectedKeys.has(String(node.key))) {\n        // 选中节点：整体移动（children 随之迁移）\n        result.push(node);\n      } else if (node.children?.length) {\n        // 父节点未选中：继续向下搜寻子节点选中项\n        traverse(node.children);\n      }\n    });\n  }\n\n  traverse(dataSource);\n  return result;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/es/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/es/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;