@pisell/materials 6.3.22 → 6.3.24

package/es/components/PisellTabbar/template/Template1/PisellTabbar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PisellTabbarProps } from '../../types';
+import '../../PisellTabbar.less';
+/**
+ * PisellTabbar - 多层级 Tabbar 组件
+ *
+ * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PisellTabbar
+ *   dataSource={categoryData}
+ *   value={[1, 10, 100]}
+ *   onChange={(value) => console.log('当前选中:', value)}
+ * />
+ * ```
+ */
+declare const PisellTabbar: React.FC<PisellTabbarProps>;
+export default PisellTabbar;

package/es/components/PisellTabbar/template/Template1/PisellTabbar.js

@@ -0,0 +1,427 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import SuperTabs from "../../../PisellSuperTabs";
+import PisellCards from "../../../PisellCards";
+import Iconfont from "../../../iconfont";
+import { useActiveKey, useExpand } from "../../hooks";
+import { addDataSourceItemsByKey, getDefaultActiveKey } from "./utils";
+import { DEFAULT_LEVEL_CONFIG, LEVEL_ADD_ITEMS, getExpandConfig } from "./constants";
+import mock from "../../mock";
+import "../../PisellTabbar.less";
+var tabbarId = 'sku-list-tabbar-temp1';
+
+/**
+ * PisellTabbar - 多层级 Tabbar 组件
+ *
+ * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PisellTabbar
+ *   dataSource={categoryData}
+ *   value={[1, 10, 100]}
+ *   onChange={(value) => console.log('当前选中:', value)}
+ * />
+ * ```
+ */
+var PisellTabbar = function PisellTabbar(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? props !== null && props !== void 0 && props.__designMode ? mock : mock : _props$dataSource,
+    value = props.value,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    customLevelConfig = props.levelConfig,
+    customExpandConfig = props.expandConfig,
+    _props$maxLevel = props.maxLevel,
+    maxLevel = _props$maxLevel === void 0 ? 3 : _props$maxLevel;
+
+  // 激活的 key 管理
+  var _useActiveKey = useActiveKey({
+      initialActiveKey: value || getDefaultActiveKey(dataSource, 'id'),
+      onChange: onChange
+    }),
+    setActiveKey = _useActiveKey.setActiveKey,
+    getActiveKey = _useActiveKey.getActiveKey,
+    _setActiveKey = _useActiveKey._setActiveKey,
+    activeKey = _useActiveKey.activeKey;
+  console.log('getActiveKey', activeKey);
+
+  // 展开状态管理
+  var _useExpand = useExpand(),
+    expand = _useExpand.expand,
+    toggleExpand = _useExpand.toggleExpand,
+    getExpand = _useExpand.getExpand;
+
+  // 展开配置
+  var expandConfig = customExpandConfig || getExpandConfig();
+
+  /**
+   * 同步外部 value 到内部状态
+   */
+  useEffect(function () {
+    if (value) {
+      _setActiveKey(value);
+    }
+  }, [JSON.stringify(value)]);
+
+  /**
+   * 获取层级配置
+   */
+  var getLevelConfig = useCallback(function (level) {
+    return _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG[level]), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig[level]);
+  }, [customLevelConfig]);
+
+  /**
+   * 处理一级 Tab 切换
+   */
+  var handleLevel1Change = useCallback(function (key, item) {
+    var _item$children;
+    setActiveKey(0, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? 0 : undefined);
+  }, [setActiveKey, activeKey]);
+
+  /**
+   * 处理二级 Tab 切换
+   */
+  var handleLevel2Change = useCallback(function (key, item) {
+    var _item$children2;
+    setActiveKey(1, key, item !== null && item !== void 0 && (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? 0 : undefined);
+  }, [setActiveKey, activeKey]);
+
+  /**
+   * 处理三级 Tab 切换
+   */
+  var handleLevel3Change = useCallback(function (key) {
+    setActiveKey(2, key);
+  }, [setActiveKey, activeKey]);
+
+  /**
+   * 渲染 level2/level3 自定义点击卡片（展开按钮）
+   */
+  var renderExpandCard = useCallback(function (cardProps, level, isExpanded) {
+    var _cardProps$active;
+    var config = expandConfig[isExpanded ? 'active' : 'inactive'];
+    var levelCfg = getLevelConfig(level);
+    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+      text: config.text,
+      variant: "outlined",
+      widthMode: "auto",
+      prefixIcon: /*#__PURE__*/React.createElement(Iconfont, {
+        type: config.icon,
+        style: {
+          color: '#000',
+          fontSize: 20
+        }
+      }),
+      textConfig: {
+        textAlign: 'center',
+        color: '#000000',
+        flex: 'none'
+      },
+      style: {
+        borderRadius: '20px',
+        background: '#ffffff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: levelCfg.cardHeight,
+        minWidth: 100
+      },
+      width: 'auto',
+      active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+        style: _objectSpread(_objectSpread({}, (_cardProps$active = cardProps.active) === null || _cardProps$active === void 0 ? void 0 : _cardProps$active.style), {}, {
+          color: '#ffffff',
+          background: '#7f56d9'
+        })
+      })
+    }));
+  }, [expandConfig, activeKey, getLevelConfig]);
+
+  /**
+   * 渲染 level2/level3 普通卡片
+   */
+  var renderNormalCard = useCallback(function (cardProps, level) {
+    var _cardProps$active2;
+    var itemData = cardProps.dataSource;
+    var levelCfg = getLevelConfig(level);
+    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+      text: itemData.name,
+      variant: "outlined",
+      widthMode: "auto",
+      textConfig: {
+        textAlign: 'center',
+        color: '#000',
+        maxLines: 2,
+        ellipsis: true
+      },
+      style: {
+        height: levelCfg.cardHeight,
+        borderRadius: '20px',
+        background: '#ffffff',
+        minWidth: 100
+      },
+      width: 'auto',
+      active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+        style: _objectSpread(_objectSpread({}, (_cardProps$active2 = cardProps.active) === null || _cardProps$active2 === void 0 ? void 0 : _cardProps$active2.style), {}, {
+          color: '#fff',
+          background: '#7f56d9'
+        })
+      })
+    }));
+  }, [getLevelConfig]);
+
+  /**
+   * 一级 Tabbar 数据源
+   */
+  var level1DataSource = useMemo(function () {
+    return addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1);
+  }, [dataSource]);
+
+  /**
+   * 渲染一级 Tab Item
+   */
+  var renderLevel1Item = useCallback(function (itemProps) {
+    var itemData = itemProps.dataSource;
+    var level1Config = getLevelConfig('level1');
+    var isExpanded = getExpand('level1');
+
+    // 处理展开按钮
+    if (itemData !== null && itemData !== void 0 && itemData.customClick) {
+      return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+        card: function card(cardProps) {
+          return renderExpandCard(cardProps, 'level1', isExpanded);
+        },
+        onClick: function onClick() {
+          return toggleExpand('level1');
+        }
+      }));
+    }
+
+    // 普通项
+    return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+      card: function card(cardProps) {
+        return renderNormalCard(cardProps, 'level1');
+      },
+      panel: function panel(panelProps) {
+        var _panelProps$dataSourc;
+        if (panelProps !== null && panelProps !== void 0 && (_panelProps$dataSourc = panelProps.dataSource) !== null && _panelProps$dataSourc !== void 0 && (_panelProps$dataSourc = _panelProps$dataSourc.children) !== null && _panelProps$dataSourc !== void 0 && _panelProps$dataSourc.length && maxLevel >= 2) {
+          return renderLevel2Panel(panelProps);
+        }
+        return null;
+      },
+      panelContainer: function panelContainer() {
+        return document.querySelector(".pisell-super-tabs-slot-bottom-".concat(tabbarId));
+      }
+    }));
+  }, [getLevelConfig, getExpand, toggleExpand, maxLevel, activeKey]);
+
+  /**
+   * 渲染二级 Tabbar 面板
+   */
+  var renderLevel2Panel = useCallback(function (panelProps) {
+    if (maxLevel < 2) return null;
+    var _dataSource = panelProps.dataSource.children || [];
+    if (_dataSource.length) {
+      _dataSource = addDataSourceItemsByKey(_dataSource, LEVEL_ADD_ITEMS.level2);
+    }
+    var level2Config = getLevelConfig('level2');
+    var isExpanded2 = getExpand('level2');
+    var skuId = "sku-list-tabbar-".concat(panelProps.dataSource.id);
+    return /*#__PURE__*/React.createElement(SuperTabs, {
+      id: skuId,
+      tabItemStyle: {},
+      dataSource: _dataSource,
+      value: String(getActiveKey(1)),
+      onChange: handleLevel2Change,
+      rowKey: "id",
+      style: {
+        flex: 1,
+        background: level2Config.superTabsBg
+      },
+      gridProps: {
+        direction: 'horizontal',
+        gap: 4,
+        wrap: isExpanded2 ? 'wrap' : 'nowrap',
+        startSlot: /*#__PURE__*/React.createElement("div", {
+          style: {
+            paddingLeft: level2Config.paddingLeft
+          }
+        }, /*#__PURE__*/React.createElement(Iconfont, {
+          type: "pisell2-trend-down-01",
+          style: {
+            color: '#fff',
+            fontSize: 24,
+            marginRight: 8
+          }
+        }))
+      },
+      scrollViewProps: {
+        style: {
+          padding: '4px 8px'
+        },
+        overflow: !isExpanded2 ? 'x' : 'hidden',
+        scrollbarStyle: 'none',
+        scrollActionsConfig: {
+          type: 'lrArrows',
+          show: true
+        }
+      },
+      renderItem: function renderItem(itemProps) {
+        var itemData = itemProps.dataSource;
+
+        // 处理展开按钮
+        if (itemData !== null && itemData !== void 0 && itemData.customClick) {
+          return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+            card: function card(cardProps) {
+              return renderExpandCard(cardProps, 'level2', isExpanded2);
+            },
+            onClick: function onClick() {
+              return toggleExpand('level2');
+            }
+          }));
+        }
+
+        // 普通项
+        return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+          card: function card(cardProps) {
+            return renderNormalCard(cardProps, 'level2');
+          },
+          panel: function panel(panelProps2) {
+            var _panelProps2$dataSour;
+            if (panelProps2 !== null && panelProps2 !== void 0 && (_panelProps2$dataSour = panelProps2.dataSource) !== null && _panelProps2$dataSour !== void 0 && (_panelProps2$dataSour = _panelProps2$dataSour.children) !== null && _panelProps2$dataSour !== void 0 && _panelProps2$dataSour.length && maxLevel >= 3) {
+              return renderLevel3Panel(panelProps2);
+            }
+            return null;
+          },
+          panelContainer: function panelContainer() {
+            return document.querySelector(".pisell-super-tabs-slot-bottom-".concat(skuId));
+          }
+        }));
+      }
+    });
+  }, [maxLevel, activeKey, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard]);
+
+  /**
+   * 渲染三级 Tabbar 面板
+   */
+  var renderLevel3Panel = useCallback(function (panelProps2) {
+    if (maxLevel < 3) return null;
+    var _dataSource2 = panelProps2.dataSource.children || [];
+    if (_dataSource2.length) {
+      _dataSource2 = addDataSourceItemsByKey(_dataSource2, LEVEL_ADD_ITEMS.level3);
+    }
+    var level3Config = getLevelConfig('level3');
+    var isExpanded3 = getExpand('level3');
+    var skuId = "sku-list-tabbar-".concat(panelProps2.dataSource.id);
+    return /*#__PURE__*/React.createElement(SuperTabs, {
+      id: skuId,
+      tabItemStyle: {},
+      dataSource: _dataSource2,
+      value: String(getActiveKey(2)),
+      onChange: handleLevel3Change,
+      rowKey: "id",
+      style: {
+        flex: 1,
+        background: level3Config.superTabsBg
+      },
+      gridProps: {
+        direction: 'horizontal',
+        gap: 4,
+        wrap: isExpanded3 ? 'wrap' : 'nowrap',
+        startSlot: /*#__PURE__*/React.createElement("div", {
+          style: {
+            paddingLeft: level3Config.paddingLeft
+          }
+        }, /*#__PURE__*/React.createElement(Iconfont, {
+          type: "pisell2-trend-down-01",
+          style: {
+            color: '#fff',
+            fontSize: 24,
+            marginRight: 8
+          }
+        }))
+      },
+      scrollViewProps: {
+        style: {
+          padding: '4px 8px'
+        },
+        overflow: !isExpanded3 ? 'x' : 'hidden',
+        scrollbarStyle: 'none',
+        scrollActionsConfig: {
+          type: 'lrArrows',
+          show: true
+        }
+      },
+      renderItem: function renderItem(itemProps) {
+        var itemData = itemProps.dataSource;
+
+        // 处理展开按钮
+        if (itemData !== null && itemData !== void 0 && itemData.customClick) {
+          return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+            card: function card(cardProps) {
+              return renderExpandCard(cardProps, 'level3', isExpanded3);
+            },
+            onClick: function onClick() {
+              return toggleExpand('level3');
+            }
+          }));
+        }
+
+        // 普通项
+        return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+          card: function card(cardProps) {
+            return renderNormalCard(cardProps, 'level3');
+          }
+        }));
+      }
+    });
+  }, [maxLevel, activeKey, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard]);
+
+  /**
+   * 渲染一级 Tabbar
+   */
+  var level1Config = getLevelConfig('level1');
+  var isExpanded1 = getExpand('level1');
+  return dataSource.length ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-tabbar', className),
+    style: style
+  }, /*#__PURE__*/React.createElement(SuperTabs, {
+    id: tabbarId,
+    tabItemStyle: {},
+    dataSource: level1DataSource,
+    value: String(getActiveKey(0)),
+    onChange: handleLevel1Change,
+    rowKey: "id",
+    style: {
+      flex: 1,
+      background: level1Config.superTabsBg
+    },
+    gridProps: {
+      direction: 'horizontal',
+      gap: 4,
+      wrap: isExpanded1 ? 'wrap' : 'nowrap'
+    },
+    scrollViewProps: {
+      style: {
+        padding: '4px 8px'
+      },
+      overflow: !isExpanded1 ? 'x' : 'hidden',
+      scrollbarStyle: 'none',
+      scrollActionsConfig: {
+        type: 'lrArrows',
+        show: true
+      }
+    },
+    renderItem: renderLevel1Item
+  })) : null;
+};
+PisellTabbar.displayName = 'PisellTabbar';
+export default PisellTabbar;

package/es/components/PisellTabbar/template/Template1/constants.d.ts

@@ -0,0 +1,10 @@
+import { TabbarLevelConfig, LevelType } from '../../types';
+export { getExpandConfig, DEFAULT_ITEMS } from '../../constants';
+/**
+ * 默认层级配置
+ */
+export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
+/**
+ * 获取层级对应的添加项配置
+ */
+export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;

package/es/components/PisellTabbar/template/Template1/constants.js

@@ -0,0 +1,33 @@
+export { getExpandConfig, DEFAULT_ITEMS } from "../../constants";
+/**
+ * 默认层级配置
+ */
+export var DEFAULT_LEVEL_CONFIG = {
+  level1: {
+    superTabsBg: '#ffffff00',
+    cardWidth: 100,
+    cardHeight: 40,
+    paddingLeft: 0
+  },
+  level2: {
+    superTabsBg: '#ffffff00',
+    cardWidth: 120,
+    cardHeight: 40,
+    paddingLeft: 20
+  },
+  level3: {
+    superTabsBg: '#ffffff00',
+    cardWidth: 120,
+    cardHeight: 40,
+    paddingLeft: 40
+  }
+};
+
+/**
+ * 获取层级对应的添加项配置
+ */
+export var LEVEL_ADD_ITEMS = {
+  level1: ['all'],
+  level2: ['expand', 'all'],
+  level3: ['expand', 'all']
+};

package/es/components/PisellTabbar/template/Template1/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellTabbar 组件导出文件
+ * @module PisellTabbar
+ */
+import PisellTabbar from './PisellTabbar';
+export default PisellTabbar;

package/es/components/PisellTabbar/template/Template1/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellTabbar 组件导出文件
+ * @module PisellTabbar
+ */
+
+import PisellTabbar from "./PisellTabbar";
+export default PisellTabbar;

package/es/components/PisellTabbar/template/Template1/utils/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * PisellTabbar 工具函数
+ */
+import { TabbarDataSource } from '../../../types';
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ *
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ *
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export declare const addDataSourceItemsByKey: (dataSource: TabbarDataSource[], keys: ('all' | 'search' | 'expand')[]) => TabbarDataSource[];
+/**
+ * 获取默认激活的 key 数组
+ *
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ *
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ *
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export declare const getDefaultActiveKey: (dataSource: TabbarDataSource[], rowKey: string) => (string | number)[];

package/es/components/PisellTabbar/template/Template1/utils/index.js

@@ -0,0 +1,96 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { getText } from "../../../../../locales";
+
+/**
+ * PisellTabbar 工具函数
+ */
+
+/**
+ * 默认的特殊项配置
+ */
+var defaultItems = {
+  all: {
+    id: '0',
+    shop_id: 9,
+    parent_id: 0,
+    name: getText('pisell-tabbar-all'),
+    slug: 'all',
+    icon: ''
+  },
+  search: {
+    id: -1,
+    shop_id: 9,
+    parent_id: 0,
+    name: 'Search',
+    slug: 'Search',
+    key: 'search',
+    icon: '',
+    customClick: true
+  },
+  expand: {
+    id: -2,
+    shop_id: 9,
+    parent_id: 0,
+    key: 'expand',
+    icon: 'pisell2-expand-01',
+    name: 'Expand',
+    slug: 'expand',
+    customClick: true
+  }
+};
+
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ * 
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ * 
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export var addDataSourceItemsByKey = function addDataSourceItemsByKey(dataSource, keys) {
+  return [].concat(_toConsumableArray(keys.map(function (key) {
+    return defaultItems[key];
+  })), _toConsumableArray(dataSource));
+};
+
+/**
+ * 获取默认激活的 key 数组
+ * 
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ * 
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ * 
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export var getDefaultActiveKey = function getDefaultActiveKey(dataSource, rowKey) {
+  var _activeKey = ['0'];
+
+  // if (dataSource.length) {
+  //   // 添加第一层级的第一项
+  //   _activeKey.push(dataSource[0][rowKey as keyof TabbarDataSource] as string | number);
+
+  //   // 如果第一项有子级，添加第二层级的第一项
+  //   if (dataSource[0].children?.length) {
+  //     _activeKey.push(0);
+  //   }
+  // }
+
+  return _activeKey;
+};