@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellTabbar3/PisellTabbar.js

@@ -0,0 +1,649 @@
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 React, { useState, useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import SuperTabs from "../PisellSuperTabs";
+import PisellCards from "../PisellCards";
+import Iconfont from "../iconfont";
+import { getText } from "../../locales";
+import mock from "./mock";
+import "./PisellTabbar.less";
+
+// ==================== 常量定义 ====================
+
+/**
+ * 默认层级配置
+ */
+var DEFAULT_LEVEL_CONFIG = {
+  level1: {
+    superTabsBg: '#3b2865',
+    cardWidth: 100,
+    cardHeight: 60,
+    paddingLeft: 0
+  },
+  level2: {
+    superTabsBg: '#7F56DA',
+    cardWidth: 120,
+    cardHeight: 56,
+    paddingLeft: 20
+  },
+  level3: {
+    superTabsBg: '#344054',
+    cardWidth: 120,
+    cardHeight: 56,
+    paddingLeft: 40
+  }
+};
+
+/**
+ * 获取展开配置
+ */
+var getExpandConfig = function getExpandConfig() {
+  return {
+    active: {
+      icon: 'pisell2-minimize-01',
+      text: getText('pisell-tabbar-minimize')
+    },
+    inactive: {
+      icon: 'pisell2-expand-01',
+      text: getText('pisell-tabbar-expand')
+    }
+  };
+};
+
+/**
+ * 默认数据项配置
+ */
+var DEFAULT_ITEMS = {
+  all: {
+    id: 0,
+    shop_id: 9,
+    parent_id: 0,
+    name: '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
+  }
+};
+
+/**
+ * 获取层级对应的添加项配置
+ */
+var LEVEL_ADD_ITEMS = {
+  level1: ['expand'],
+  level2: ['expand', 'all'],
+  level3: ['expand', 'all']
+};
+
+// ==================== 工具函数 ====================
+
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ */
+var addDataSourceItemsByKey = function addDataSourceItemsByKey(dataSource, keys) {
+  return [].concat(_toConsumableArray(keys.map(function (key) {
+    return DEFAULT_ITEMS[key];
+  })), _toConsumableArray(dataSource));
+};
+
+/**
+ * 获取默认激活的 key 数组
+ */
+var getDefaultActiveKey = function getDefaultActiveKey(dataSource, rowKey) {
+  var _activeKey = [];
+  if (dataSource.length) {
+    var _dataSource$0$childre;
+    _activeKey.push(dataSource[0][rowKey]);
+    if ((_dataSource$0$childre = dataSource[0].children) !== null && _dataSource$0$childre !== void 0 && _dataSource$0$childre.length) {
+      _activeKey.push(0);
+    }
+  }
+  return _activeKey;
+};
+
+// ==================== 主组件：PisellTabbar ====================
+
+/**
+ * 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 _useState = useState(value || getDefaultActiveKey(dataSource, 'id')),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    _setActiveKey = _useState2[1];
+
+  // 展开状态（三个层级）
+  var _useState3 = useState({
+      level1: false,
+      level2: false,
+      level3: false
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expand = _useState4[0],
+    setExpand = _useState4[1];
+
+  // ========== 同步外部 value ==========
+
+  useEffect(function () {
+    if (value && JSON.stringify(value) !== JSON.stringify(activeKey)) {
+      _setActiveKey(value);
+    }
+  }, [JSON.stringify(value)]);
+
+  // ========== 配置合并 ==========
+
+  var expandConfig = customExpandConfig || getExpandConfig();
+  var level1Config = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG.level1), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig.level1);
+  var level2Config = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG.level2), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig.level2);
+  var level3Config = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG.level3), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig.level3);
+
+  // ========== 激活状态操作方法 ==========
+
+  /**
+   * 设置指定层级的激活 key
+   */
+  var setActiveKey = useCallback(function (level, key, cKey) {
+    var newActiveKey = _toConsumableArray(activeKey);
+    newActiveKey.splice(level + 1);
+    newActiveKey[level] = String(key);
+    if (cKey !== undefined) {
+      newActiveKey[level + 1] = String(cKey);
+    }
+    _setActiveKey(newActiveKey);
+    onChange === null || onChange === void 0 || onChange(newActiveKey);
+  }, [activeKey, onChange]);
+
+  // ========== 数据源处理 ==========
+
+  var level1DataSource = useMemo(function () {
+    return addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1);
+  }, [dataSource]);
+
+  // ========== Level 1 渲染逻辑 ==========
+
+  /**
+   * 渲染 level1 展开按钮卡片
+   */
+  var renderLevel1ExpandCard = function renderLevel1ExpandCard(cardProps) {
+    var _cardProps$active;
+    var isExpanded = expand.level1;
+    var _text = expandConfig[isExpanded ? 'active' : 'inactive'].text;
+    var _icon = expandConfig[isExpanded ? 'active' : 'inactive'].icon;
+    return /*#__PURE__*/React.createElement(PisellCards.GraphicTextCard, _extends({}, cardProps, {
+      text: _text,
+      icon: _icon,
+      variant: "vertical-image",
+      widthMode: "fixed",
+      width: level1Config.cardWidth,
+      graphicConfig: {
+        width: '100%',
+        height: level1Config.cardHeight,
+        background: '#fff',
+        iconSize: 30
+      },
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#fff',
+        borderRadius: 8,
+        border: "4px solid ".concat(level1Config.superTabsBg)
+      },
+      textConfig: {
+        textAlign: 'center',
+        color: '#fff',
+        fontWeight: 400
+      },
+      active: {
+        value: true,
+        style: _objectSpread(_objectSpread({}, (_cardProps$active = cardProps.active) === null || _cardProps$active === void 0 ? void 0 : _cardProps$active.style), {}, {
+          color: '#5D3F9F'
+        })
+      }
+    }));
+  };
+
+  /**
+   * 渲染 level1 普通卡片
+   */
+  var renderLevel1NormalCard = function renderLevel1NormalCard(cardProps) {
+    var _cardProps$active2;
+    var itemData = cardProps.dataSource;
+    return /*#__PURE__*/React.createElement(PisellCards.GraphicTextCard, _extends({}, cardProps, {
+      text: itemData.name,
+      image: itemData.icon,
+      variant: "card",
+      widthMode: "fixed",
+      width: level1Config.cardWidth,
+      textConfig: {
+        color: '#FFF'
+      },
+      active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+        style: _objectSpread(_objectSpread({}, (_cardProps$active2 = cardProps.active) === null || _cardProps$active2 === void 0 ? void 0 : _cardProps$active2.style), {}, {
+          color: '#000000'
+        })
+      }),
+      style: {
+        backgroundClip: 'padding-box'
+      },
+      graphicConfig: {
+        width: '100%',
+        height: "".concat(level1Config.cardHeight, "px"),
+        dataSource: {
+          alt: itemData.icon ? undefined : itemData.name,
+          text: itemData.name === 'All' ? 'All' : undefined
+        }
+      }
+    }));
+  };
+
+  /**
+   * 渲染 level1 项
+   */
+  var renderLevel1Item = function renderLevel1Item(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 renderLevel1ExpandCard(cardProps);
+        },
+        onClick: function onClick() {
+          setExpand(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              level1: !prev.level1
+            });
+          });
+        }
+      }));
+    }
+
+    // 普通项
+    return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+      card: function card(cardProps) {
+        return renderLevel1NormalCard(cardProps);
+      },
+      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 null;
+        }
+
+        // 渲染 Level 2
+        var level2Data = addDataSourceItemsByKey(panelProps.dataSource.children, LEVEL_ADD_ITEMS.level2);
+        return /*#__PURE__*/React.createElement(SuperTabs, {
+          id: "sku-list-tabbar-".concat(panelProps.dataSource.id),
+          tabItemStyle: {},
+          dataSource: level2Data,
+          value: String(activeKey[1]),
+          onChange: function onChange(key, item) {
+            var _item$children;
+            setActiveKey(1, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? 0 : undefined);
+          },
+          rowKey: "id",
+          style: {
+            flex: 1,
+            background: level2Config.superTabsBg
+          },
+          gridProps: {
+            direction: 'horizontal',
+            gap: 4,
+            wrap: expand.level2 ? '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: !expand.level2 ? 'x' : 'hidden',
+            scrollbarStyle: 'none',
+            scrollActionsConfig: {
+              type: 'lrArrows',
+              show: true
+            }
+          },
+          renderItem: function renderItem(level2ItemProps) {
+            var level2ItemData = level2ItemProps.dataSource;
+
+            // Level 2 展开按钮
+            if (level2ItemData !== null && level2ItemData !== void 0 && level2ItemData.customClick) {
+              var isExpanded = expand.level2;
+              var _text = expandConfig[isExpanded ? 'active' : 'inactive'].text;
+              var _icon = expandConfig[isExpanded ? 'active' : 'inactive'].icon;
+              return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level2ItemProps, {
+                card: function card(cardProps) {
+                  var _cardProps$active3;
+                  return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+                    text: _text,
+                    variant: "outlined",
+                    widthMode: "fixed",
+                    prefixIcon: /*#__PURE__*/React.createElement(Iconfont, {
+                      type: expandConfig[isExpanded ? 'active' : 'inactive'].icon,
+                      style: {
+                        color: '#fff',
+                        fontSize: 20
+                      }
+                    }),
+                    textConfig: {
+                      textAlign: 'center',
+                      color: '#FFF',
+                      flex: 'none'
+                    },
+                    style: {
+                      borderRadius: '8px',
+                      background: 'rgba(0, 0, 0, 0.50)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      height: level2Config.cardHeight
+                    },
+                    width: level2Config.cardWidth,
+                    active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+                      style: _objectSpread(_objectSpread({}, (_cardProps$active3 = cardProps.active) === null || _cardProps$active3 === void 0 ? void 0 : _cardProps$active3.style), {}, {
+                        color: '#000000',
+                        background: '#ffffff'
+                      })
+                    })
+                  }));
+                },
+                onClick: function onClick() {
+                  setExpand(function (prev) {
+                    return _objectSpread(_objectSpread({}, prev), {}, {
+                      level2: !prev.level2
+                    });
+                  });
+                }
+              }));
+            }
+
+            // Level 2 普通项
+            return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level2ItemProps, {
+              card: function card(cardProps) {
+                var _cardProps$active4;
+                return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+                  text: level2ItemData.name,
+                  variant: "outlined",
+                  widthMode: "fixed",
+                  textConfig: {
+                    textAlign: 'center',
+                    color: '#FFF',
+                    maxLines: 2,
+                    ellipsis: true
+                  },
+                  style: {
+                    height: level2Config.cardHeight,
+                    borderRadius: '8px',
+                    background: 'rgba(0, 0, 0, 0.50)'
+                  },
+                  width: level2Config.cardWidth,
+                  active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+                    style: _objectSpread(_objectSpread({}, (_cardProps$active4 = cardProps.active) === null || _cardProps$active4 === void 0 ? void 0 : _cardProps$active4.style), {}, {
+                      color: '#000000',
+                      background: '#ffffff'
+                    })
+                  })
+                }));
+              },
+              panel: function panel(level2PanelProps) {
+                var _level2PanelProps$dat;
+                if (!(level2PanelProps !== null && level2PanelProps !== void 0 && (_level2PanelProps$dat = level2PanelProps.dataSource) !== null && _level2PanelProps$dat !== void 0 && (_level2PanelProps$dat = _level2PanelProps$dat.children) !== null && _level2PanelProps$dat !== void 0 && _level2PanelProps$dat.length) || maxLevel < 3) {
+                  return null;
+                }
+
+                // 渲染 Level 3
+                var level3Data = addDataSourceItemsByKey(level2PanelProps.dataSource.children, LEVEL_ADD_ITEMS.level3);
+                return /*#__PURE__*/React.createElement(SuperTabs, {
+                  id: "sku-list-tabbar-".concat(level2PanelProps.dataSource.id),
+                  tabItemStyle: {},
+                  dataSource: level3Data,
+                  value: String(activeKey[2]),
+                  onChange: function onChange(key) {
+                    setActiveKey(2, key);
+                  },
+                  rowKey: "id",
+                  style: {
+                    flex: 1,
+                    background: level3Config.superTabsBg
+                  },
+                  gridProps: {
+                    direction: 'horizontal',
+                    gap: 4,
+                    wrap: expand.level3 ? '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: !expand.level3 ? 'x' : 'hidden',
+                    scrollbarStyle: 'none',
+                    scrollActionsConfig: {
+                      type: 'lrArrows',
+                      show: true
+                    }
+                  },
+                  renderItem: function renderItem(level3ItemProps) {
+                    var level3ItemData = level3ItemProps.dataSource;
+
+                    // Level 3 展开按钮
+                    if (level3ItemData !== null && level3ItemData !== void 0 && level3ItemData.customClick) {
+                      var _isExpanded = expand.level3;
+                      var _text2 = expandConfig[_isExpanded ? 'active' : 'inactive'].text;
+                      var _icon2 = expandConfig[_isExpanded ? 'active' : 'inactive'].icon;
+                      return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level3ItemProps, {
+                        card: function card(cardProps) {
+                          var _cardProps$active5;
+                          return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+                            text: _text2,
+                            variant: "outlined",
+                            widthMode: "fixed",
+                            prefixIcon: /*#__PURE__*/React.createElement(Iconfont, {
+                              type: expandConfig[_isExpanded ? 'active' : 'inactive'].icon,
+                              style: {
+                                color: '#fff',
+                                fontSize: 20
+                              }
+                            }),
+                            textConfig: {
+                              textAlign: 'center',
+                              color: '#FFF',
+                              flex: 'none'
+                            },
+                            style: {
+                              borderRadius: '8px',
+                              background: 'rgba(0, 0, 0, 0.50)',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              height: level3Config.cardHeight
+                            },
+                            width: level3Config.cardWidth,
+                            active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+                              style: _objectSpread(_objectSpread({}, (_cardProps$active5 = cardProps.active) === null || _cardProps$active5 === void 0 ? void 0 : _cardProps$active5.style), {}, {
+                                color: '#000000',
+                                background: '#ffffff'
+                              })
+                            })
+                          }));
+                        },
+                        onClick: function onClick() {
+                          setExpand(function (prev) {
+                            return _objectSpread(_objectSpread({}, prev), {}, {
+                              level3: !prev.level3
+                            });
+                          });
+                        }
+                      }));
+                    }
+
+                    // Level 3 普通项
+                    return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level3ItemProps, {
+                      card: function card(cardProps) {
+                        var _cardProps$active6;
+                        return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+                          text: level3ItemData.name,
+                          variant: "outlined",
+                          widthMode: "fixed",
+                          textConfig: {
+                            textAlign: 'center',
+                            color: '#FFF',
+                            maxLines: 2,
+                            ellipsis: true
+                          },
+                          style: {
+                            height: level3Config.cardHeight,
+                            borderRadius: '8px',
+                            background: 'rgba(0, 0, 0, 0.50)'
+                          },
+                          width: level3Config.cardWidth,
+                          active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
+                            style: _objectSpread(_objectSpread({}, (_cardProps$active6 = cardProps.active) === null || _cardProps$active6 === void 0 ? void 0 : _cardProps$active6.style), {}, {
+                              color: '#000000',
+                              background: '#ffffff'
+                            })
+                          })
+                        }));
+                      },
+                      panelContainer: function panelContainer() {
+                        return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar-".concat(level2PanelProps.dataSource.id));
+                      }
+                    }));
+                  }
+                });
+              },
+              panelContainer: function panelContainer() {
+                return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar-".concat(panelProps.dataSource.id));
+              }
+            }));
+          }
+        });
+      },
+      panelContainer: function panelContainer() {
+        return document.querySelector('.pisell-super-tabs-slot-bottom-sku-list-tabbar');
+      }
+    }));
+  };
+
+  // ========== 渲染 ==========
+
+  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(activeKey[0]),
+    onChange: function onChange(key, item) {
+      var _item$children2;
+      setActiveKey(0, key, item !== null && item !== void 0 && (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? 0 : undefined);
+    },
+    rowKey: "id",
+    style: {
+      flex: 1,
+      background: level1Config.superTabsBg
+    },
+    gridProps: {
+      direction: 'horizontal',
+      gap: 4,
+      wrap: expand.level1 ? 'wrap' : 'nowrap'
+    },
+    scrollViewProps: {
+      style: {
+        padding: '4px 8px'
+      },
+      overflow: !expand.level1 ? 'x' : 'hidden',
+      scrollbarStyle: 'none',
+      scrollActionsConfig: {
+        type: 'lrArrows',
+        show: true
+      }
+    },
+    renderItem: renderLevel1Item
+  })) : null;
+};
+PisellTabbar.displayName = 'PisellTabbar';
+export default PisellTabbar;

package/es/components/PisellTabbar3/PisellTabbar.less

@@ -0,0 +1,26 @@
+/**
+ * PisellTabbar 组件样式
+ */
+.pisell-tabbar {
+  width: 100%;
+  position: relative;
+
+  /* 层级容器样式 */
+  &-level {
+    &-wrapper {
+      position: relative;
+    }
+  }
+
+  /* 响应式适配 */
+  @media (max-width: 768px) {
+    .pisell-tabbar-level {
+      font-size: 14px;
+    }
+  }
+
+  /* 过渡动画 */
+  .pisell-super-tabs {
+    transition: all 0.3s ease;
+  }
+}

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

@@ -0,0 +1,6 @@
+/**
+ * PisellTabbar 组件导出文件
+ * @module PisellTabbar
+ */
+export { default } from './PisellTabbar';
+export type { PisellTabbarProps, TabbarDataSource, LevelType } from './types';

package/es/components/PisellTabbar3/index.js

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