@pisell/materials 1.0.998 → 1.0.1000

package/es/components/PisellCards/components/TextCard/components/BadgeWrapper.d.ts

@@ -3,6 +3,7 @@ import { BadgeWrapperProps } from '../types';
 /**
  * BadgeWrapper 角标包装组件
  * 负责角标的渲染和定位，支持红点、数字、文本三种类型
+ * 位置通过 offset 控制，大小通过 size 控制
  *
  * @example
  * ```tsx

package/es/components/PisellCards/components/TextCard/components/BadgeWrapper.js

@@ -1,8 +1,13 @@
+var _excluded = ["type", "content", "offset", "size", "color", "style", "showZero"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { Badge } from 'antd';
 /**
  * BadgeWrapper 角标包装组件
  * 负责角标的渲染和定位，支持红点、数字、文本三种类型
+ * 位置通过 offset 控制，大小通过 size 控制
  *
  * @example
  * ```tsx
@@ -33,11 +38,13 @@ var BadgeWrapper = function BadgeWrapper(props) {
   var _badge$type = badge.type,
     type = _badge$type === void 0 ? 'dot' : _badge$type,
     content = badge.content,
-    _badge$position = badge.position,
-    position = _badge$position === void 0 ? 'top-right' : _badge$position,
     offset = badge.offset,
+    size = badge.size,
     color = badge.color,
-    style = badge.style;
+    style = badge.style,
+    _badge$showZero = badge.showZero,
+    showZero = _badge$showZero === void 0 ? false : _badge$showZero,
+    rest = _objectWithoutProperties(badge, _excluded);
 
   /**
    * 根据角标类型渲染不同的 Badge
@@ -45,23 +52,25 @@ var BadgeWrapper = function BadgeWrapper(props) {
   var renderBadge = function renderBadge() {
     // 红点类型
     if (type === 'dot') {
-      return /*#__PURE__*/React.createElement(Badge, {
+      return /*#__PURE__*/React.createElement(Badge, _extends({
         dot: true,
         color: color,
         offset: offset,
+        size: size,
         style: style
-      }, children);
+      }, rest), children);
     }
 
     // 数字或文本类型
     if (type === 'number' || type === 'text') {
-      return /*#__PURE__*/React.createElement(Badge, {
+      return /*#__PURE__*/React.createElement(Badge, _extends({
         count: content,
         color: color,
         offset: offset,
+        size: size,
         style: style,
-        showZero: type === 'number'
-      }, children);
+        showZero: showZero
+      }, rest), children);
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   };

package/es/components/PisellCards/components/TextCard/components/TextContent.js

@@ -77,7 +77,7 @@ var TextContent = function TextContent(props) {
       style.whiteSpace = 'normal';
     }
     return style;
-  }, [active, fontSize, fontWeight, color, ellipsis, maxLines]);
+  }, [active, fontSize, fontWeight, color, ellipsis, maxLines, textAlign, flex]);
   if (active !== null && active !== void 0 && active.value) {
     console.log('textStyle11', textStyle);
   }

package/es/components/PisellCards/components/TextCard/types.d.ts

@@ -43,9 +43,9 @@ export interface TagConfig {
  */
 export declare type BadgeType = 'dot' | 'number' | 'text';
 /**
- * 角标位置
+ * 角标大小
  */
-export declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export declare type BadgeSize = 'small' | 'default';
 /**
  * 角标配置
  */
@@ -60,11 +60,6 @@ export interface BadgeConfig {
      * 当 type 为 'number' 或 'text' 时有效
      */
     content?: ReactNode;
-    /**
-     * 角标位置
-     * @default 'top-right'
-     */
-    position?: BadgePosition;
     /**
      * 角标偏移量 [x, y]
      * 正数向右/下偏移，负数向左/上偏移
@@ -78,6 +73,18 @@ export interface BadgeConfig {
      * 角标自定义样式
      */
     style?: CSSProperties;
+    /**
+     * 角标大小
+     */
+    size?: BadgeSize;
+    /**
+     * 角标是否显示零值
+     */
+    showZero?: boolean;
+    /**
+     * 角标其他属性
+     */
+    [key: string]: any;
 }
 /**
  * 文本配置

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

@@ -1,9 +1,9 @@
 declare const PisellCards: {
-    TabCard: (props: any) => JSX.Element;
-    TextCard: (props: any) => JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
-    MultilevelCard: (props: any) => JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
+    TabCard: (props: any) => import("react").JSX.Element;
+    TextCard: (props: any) => import("react").JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => import("react").JSX.Element;
+    MultilevelCard: (props: any) => import("react").JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => import("react").JSX.Element;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';

package/es/components/PisellScrollView/components/Actions/index.d.ts

@@ -8,5 +8,5 @@ interface ActionsContainerProps {
     containerRef: React.RefObject<HTMLDivElement>;
     onClick: (direction: 'left' | 'right' | 'top' | 'bottom') => void;
 }
-declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => JSX.Element | null;
+declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => React.JSX.Element | null;
 export default ActionsContainer;

package/es/components/PisellSuperTabs/PisellSuperTabs.js

@@ -4,7 +4,7 @@ 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 组件

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,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;