@pisell/materials 6.8.9 → 6.8.10

package/es/components/PisellSuperTabs/PisellSuperTabs.d.ts

@@ -1,12 +1,8 @@
+import React from 'react';
 import type { PisellSuperTabsProps } from './types';
 import './PisellSuperTabs.less';
-/**
- * PisellSuperTabs 组件
- * @description 通用导航框架封装的全能型 Tab 组件
- * @template T - 数据源项的类型
- */
-declare const PisellSuperTabs: {
-    <T>(props: PisellSuperTabsProps<T>): JSX.Element;
-    displayName: string;
-};
-export default PisellSuperTabs;
+interface PisellSuperTabsRef {
+    scrollItemByRowKey: (key: string) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<PisellSuperTabsProps<unknown> & React.RefAttributes<PisellSuperTabsRef>>;
+export default _default;

package/es/components/PisellSuperTabs/PisellSuperTabs.js

@@ -1,18 +1,17 @@
 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); }
-import React from 'react';
+import React, { useImperativeHandle, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
 import { useTabsState } from "./hooks";
 import { getRowKey } from "./utils";
 import PisellBasicGrid from "../PisellBasicGrid";
-import { PisellScrollView } from "../PisellScrollView";
+import PisellScrollView from "../PisellScrollView";
 import "./PisellSuperTabs.less";
-
 /**
  * PisellSuperTabs 组件
  * @description 通用导航框架封装的全能型 Tab 组件
  * @template T - 数据源项的类型
  */
-var PisellSuperTabs = function PisellSuperTabs(props) {
+var PisellSuperTabs = function PisellSuperTabs(props, ref) {
   var className = props.className,
     style = props.style,
     _props$dataSource = props.dataSource,
@@ -42,7 +41,9 @@ var PisellSuperTabs = function PisellSuperTabs(props) {
     slotLeftStyle = props.slotLeftStyle,
     slotRightStyle = props.slotRightStyle,
     slotTopStyle = props.slotTopStyle,
-    slotBottomStyle = props.slotBottomStyle;
+    slotBottomStyle = props.slotBottomStyle,
+    __designMode = props.__designMode;
+  var containerRef = useRef(null);
 
   // 状态管理：处理受控/非受控模式
   var _useTabsState = useTabsState({
@@ -52,10 +53,29 @@ var PisellSuperTabs = function PisellSuperTabs(props) {
     }),
     activeKey = _useTabsState.activeKey,
     handleTabChange = _useTabsState.handleTabChange;
+  var scrollItemByRowKey = function scrollItemByRowKey(key) {
+    var item = document.querySelector(".pisell-super-tabs-item-".concat(id, "-").concat(key));
+    console.log(".pisell-super-tabs-item-".concat(id, "-").concat(key));
+    if (item) {
+      item.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  };
+  useImperativeHandle(ref, function () {
+    if (__designMode) {
+      //@ts-ignore
+      return containerRef.current;
+    }
+    return {
+      scrollItemByRowKey: scrollItemByRowKey
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-super-tabs', className),
     style: style,
-    id: id
+    id: id,
+    ref: containerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-super-tabs-slot-top-' + id, slotTopClassName),
     style: slotTopStyle
@@ -107,7 +127,7 @@ var PisellSuperTabs = function PisellSuperTabs(props) {
       // 包裹点击事件处理
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        className: classNames('pisell-super-tabs-item', {
+        className: classNames('pisell-super-tabs-item', "pisell-super-tabs-item-".concat(id, "-").concat(key), {
           'pisell-super-tabs-item--active': active
         }, tabItemClassName),
         style: tabItemStyle
@@ -124,4 +144,4 @@ var PisellSuperTabs = function PisellSuperTabs(props) {
   }, slotBottom));
 };
 PisellSuperTabs.displayName = 'PisellSuperTabs';
-export default PisellSuperTabs;
+export default /*#__PURE__*/forwardRef(PisellSuperTabs);

package/es/components/PisellSuperTabs/types.d.ts

@@ -166,6 +166,7 @@ export interface PisellSuperTabsProps<T = any> {
     slotBottom?: ReactNode;
     slotBottomClassName?: string;
     slotBottomStyle?: CSSProperties;
+    __designMode?: boolean;
 }
 /**
  * 数据项基础类型

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

@@ -1,20 +1,3 @@
-import React from 'react';
-import { PisellTabbarProps } from './types';
+import PisellTabbar4 from './template/Template1';
 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;
+export default PisellTabbar4;

package/es/components/PisellTabbar/PisellTabbar.js

@@ -11,6 +11,7 @@ import { useActiveKey, useExpand } from "./hooks";
 import { addDataSourceItemsByKey, getDefaultActiveKey } from "./utils";
 import { DEFAULT_LEVEL_CONFIG, LEVEL_ADD_ITEMS } from "./constants";
 import mock from "./mock";
+import PisellTabbar4 from "./template/Template1";
 import "./PisellTabbar.less";
 
 /**
@@ -171,4 +172,4 @@ PisellTabbar.displayName = 'PisellTabbar';
 
 // PisellTabbar.Template1 = PisellTabbar2;
 
-export default PisellTabbar;
+export default PisellTabbar4;

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

@@ -12,15 +12,15 @@ export declare const getExpandConfig: () => ExpandConfig;
  */
 export declare const DEFAULT_ITEMS: {
     all: {
-        id: number;
+        id: string;
         shop_id: number;
         parent_id: number;
-        name: string;
+        name: any;
         slug: string;
         icon: string;
     };
     search: {
-        id: number;
+        id: string;
         shop_id: number;
         parent_id: number;
         name: string;
@@ -30,7 +30,7 @@ export declare const DEFAULT_ITEMS: {
         customClick: boolean;
     };
     expand: {
-        id: number;
+        id: string;
         shop_id: number;
         parent_id: number;
         key: string;

package/es/components/PisellTabbar/constants.js

@@ -45,15 +45,15 @@ export var getExpandConfig = function getExpandConfig() {
  */
 export var DEFAULT_ITEMS = {
   all: {
-    id: 0,
+    id: '0',
     shop_id: 9,
     parent_id: 0,
-    name: 'All',
-    slug: 'All',
+    name: getText('pisell-tabbar-all'),
+    slug: 'all',
     icon: ''
   },
   search: {
-    id: -1,
+    id: '-1',
     shop_id: 9,
     parent_id: 0,
     name: 'Search',
@@ -63,7 +63,7 @@ export var DEFAULT_ITEMS = {
     customClick: true
   },
   expand: {
-    id: -2,
+    id: '-2',
     shop_id: 9,
     parent_id: 0,
     key: 'expand',

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

@@ -3,5 +3,7 @@
  * @module PisellTabbar
  */
 import PisellTabbar from './PisellTabbar';
+import PisellTabbarTemplate1 from './template/Template1';
 export type { PisellTabbarProps, TabbarDataSource, LevelType } from './types';
+export { PisellTabbarTemplate1 };
 export default PisellTabbar;

package/es/components/PisellTabbar/index.js

@@ -4,4 +4,6 @@
  */
 
 import PisellTabbar from "./PisellTabbar";
+import PisellTabbarTemplate1 from "./template/Template1";
+export { PisellTabbarTemplate1 };
 export default PisellTabbar;

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,426 @@
+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";
+
+/**
+ * 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-sku-list-tabbar');
+      }
+    }));
+  }, [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: "sku-list-tabbar",
+    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')[]>;