@pisell/materials 6.11.239 → 6.11.240

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

@@ -5,6 +5,8 @@ export declare type PisellTabbarTemplate1Direction = 'horizontal' | 'vertical';
 export interface PisellTabbarTemplate1Props extends PisellTabbarProps {
     /** Tab 排列方向；默认保持现有横向布局。 */
     direction?: PisellTabbarTemplate1Direction;
+    /** 是否在每个层级展示自动生成的 All 分类；默认保持展示。 */
+    showAllItem?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<PisellTabbarTemplate1Props & React.RefAttributes<unknown>>;
 export default _default;

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

@@ -16,7 +16,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 import classNames from 'classnames';
-import React, { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PisellCards from "../../../PisellCards";
 import SuperTabs from "../../../PisellSuperTabs";
 import Iconfont from "../../../iconfont";
@@ -26,6 +26,11 @@ import { useActiveKey, useExpand } from "../../hooks";
 import mock from "../../mock";
 import { DEFAULT_LEVEL_CONFIG, LEVEL_ADD_ITEMS, getExpandConfig } from "./constants";
 import { addDataSourceItemsByKey, getDefaultActiveKey } from "./utils";
+var tabbarInstanceSequence = 0;
+function createTabbarInstanceId() {
+  tabbarInstanceSequence += 1;
+  return "sku-list-tabbar-temp1-".concat(tabbarInstanceSequence);
+}
 function renderCategoryIcon(icon, size) {
   if (/^(?:https?:\/\/|data:|blob:|\/)/i.test(icon)) {
     return /*#__PURE__*/React.createElement("img", {
@@ -63,6 +68,7 @@ function renderCategoryIcon(icon, size) {
  * ```
  */
 var PisellTabbar = function PisellTabbar(props, ref) {
+  var _dataSource$0$id, _dataSource$, _dataSource$2;
   var _props$dataSource = props.dataSource,
     dataSource = _props$dataSource === void 0 ? props !== null && props !== void 0 && props.__designMode ? mock : mock : _props$dataSource,
     value = props.value,
@@ -77,10 +83,14 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     searchProps = props.searchProps,
     level1Actions = props.level1Actions,
     _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'horizontal' : _props$direction;
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    _props$showAllItem = props.showAllItem,
+    showAllItem = _props$showAllItem === void 0 ? true : _props$showAllItem;
   var isVertical = direction === 'vertical';
   var containerRef = useRef(null);
   var searchRef = useRef(null);
+  var firstCategoryKey = (_dataSource$0$id = (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.id) !== null && _dataSource$0$id !== void 0 ? _dataSource$0$id : (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2.key;
+  var initialActiveKey = value !== null && value !== void 0 ? value : showAllItem ? getDefaultActiveKey(dataSource, 'id') : firstCategoryKey !== undefined ? [firstCategoryKey] : [];
 
   /**
    * 每个 PisellTabbarTemplate1 实例使用独立的 DOM id（保留历史前缀），
@@ -89,17 +99,18 @@ var PisellTabbar = function PisellTabbar(props, ref) {
    * 命中错误那一个：PisellFind 的搜索弹窗 portal 会挂到隐藏节点 → 看似"无反应"，
    * 二级 panel 的 portalContainer 也会渲染到错误位置。
    *
-   * 使用 `useId()` 保证 SSR 一致并避免 hydration 失配；冒号在 id selector 里
-   * 不合法，统一替换。
+   * Kiosk 低代码渲染只需要客户端实例唯一性；用 ref 保持挂载周期内稳定，
+   * 同时兼容 React 17（没有 `useId`）。
    */
-  var reactId = useId();
-  var tabbarId = useMemo(function () {
-    return "sku-list-tabbar-temp1-".concat(reactId.replace(/:/g, ''));
-  }, [reactId]);
+  var tabbarIdRef = useRef();
+  if (!tabbarIdRef.current) {
+    tabbarIdRef.current = createTabbarInstanceId();
+  }
+  var tabbarId = tabbarIdRef.current;
 
   // 激活的 key 管理
   var _useActiveKey = useActiveKey({
-      initialActiveKey: value || getDefaultActiveKey(dataSource, 'id'),
+      initialActiveKey: initialActiveKey,
       onChange: onChange
     }),
     setActiveKey = _useActiveKey.setActiveKey,
@@ -188,16 +199,16 @@ var PisellTabbar = function PisellTabbar(props, ref) {
    */
   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]);
+    setActiveKey(0, key, showAllItem && item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? 0 : undefined);
+  }, [setActiveKey, activeKey, showAllItem]);
 
   /**
    * 处理二级 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]);
+    setActiveKey(1, key, showAllItem && item !== null && item !== void 0 && (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? 0 : undefined);
+  }, [setActiveKey, activeKey, showAllItem]);
 
   /**
    * 处理三级 Tab 切换
@@ -304,7 +315,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
    * 渲染 level2/level3 普通卡片
    */
   var renderNormalCard = useCallback(function (cardProps, level) {
-    var _levelCfg$textAlign, _levelCfg$iconSize, _levelCfg$borderRadiu, _cardProps$active2;
+    var _levelCfg$textAlign, _levelCfg$iconSize, _levelCfg$borderRadiu, _levelCfg$cardBackgro, _cardProps$active2, _levelCfg$activeBackg;
     var itemData = cardProps.dataSource;
     var levelCfg = getLevelConfig(level);
     var textAlign = isVertical ? (_levelCfg$textAlign = levelCfg.textAlign) !== null && _levelCfg$textAlign !== void 0 ? _levelCfg$textAlign : 'center' : 'center';
@@ -327,7 +338,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
         height: levelCfg.cardHeight
       }), {}, {
         borderRadius: isVertical ? (_levelCfg$borderRadiu = levelCfg.borderRadius) !== null && _levelCfg$borderRadiu !== void 0 ? _levelCfg$borderRadiu : '999px' : '20px',
-        background: '#ffffff',
+        background: (_levelCfg$cardBackgro = levelCfg.cardBackground) !== null && _levelCfg$cardBackgro !== void 0 ? _levelCfg$cardBackgro : '#ffffff',
         minWidth: isVertical ? 0 : 100,
         justifyContent: isVertical && textAlign === 'left' ? 'flex-start' : 'center'
       }),
@@ -335,7 +346,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
       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'
+          background: (_levelCfg$activeBackg = levelCfg.activeBackground) !== null && _levelCfg$activeBackg !== void 0 ? _levelCfg$activeBackg : '#7f56d9'
         })
       })
     }));
@@ -345,7 +356,9 @@ var PisellTabbar = function PisellTabbar(props, ref) {
    * 一级 Tabbar 数据源
    */
   var level1DataSource = useMemo(function () {
-    var categoryItems = dataSource.length ? addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1) : [];
+    var categoryItems = dataSource.length ? addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1.filter(function (itemKey) {
+      return showAllItem || itemKey !== 'all';
+    })) : [];
     var actionItems = (level1Actions || []).map(function (action, index) {
       return {
         id: "__level1-action-".concat(String(action.key), "-").concat(index),
@@ -365,12 +378,13 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     return isVertical ? full.filter(function (item) {
       return (item === null || item === void 0 ? void 0 : item.key) !== 'expand';
     }) : full;
-  }, [dataSource, isSearchOpen, isVertical, level1Actions]);
+  }, [dataSource, isSearchOpen, isVertical, level1Actions, showAllItem]);
 
   /**
    * 渲染一级 Tab Item
    */
   var renderLevel1Item = useCallback(function (itemProps) {
+    var _itemData$children;
     var itemData = itemProps.dataSource;
     var isExpanded = getExpand('level1');
     var action = itemData === null || itemData === void 0 ? void 0 : itemData.__action;
@@ -405,6 +419,9 @@ var PisellTabbar = function PisellTabbar(props, ref) {
 
     // 普通项
     return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+      className: classNames(itemProps.className, {
+        'pisell-tabbar__category-group--level1': isVertical && (itemData === null || itemData === void 0 || (_itemData$children = itemData.children) === null || _itemData$children === void 0 ? void 0 : _itemData$children.length)
+      }),
       card: function card(cardProps) {
         return renderNormalCard(cardProps, 'level1');
       },
@@ -429,7 +446,9 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     if (maxLevel < 2) return null;
     var _dataSource = panelProps.dataSource.children || [];
     if (_dataSource.length) {
-      _dataSource = addDataSourceItemsByKey(_dataSource, LEVEL_ADD_ITEMS.level2);
+      _dataSource = addDataSourceItemsByKey(_dataSource, LEVEL_ADD_ITEMS.level2.filter(function (itemKey) {
+        return showAllItem || itemKey !== 'all';
+      }));
       if (isVertical) {
         _dataSource = _dataSource.filter(function (item) {
           return item.key !== 'expand';
@@ -486,6 +505,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
         }
       },
       renderItem: function renderItem(itemProps) {
+        var _itemData$children2;
         var itemData = itemProps.dataSource;
 
         // 处理展开按钮
@@ -502,6 +522,9 @@ var PisellTabbar = function PisellTabbar(props, ref) {
 
         // 普通项
         return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+          className: classNames(itemProps.className, {
+            'pisell-tabbar__category-group--level2': isVertical && (itemData === null || itemData === void 0 || (_itemData$children2 = itemData.children) === null || _itemData$children2 === void 0 ? void 0 : _itemData$children2.length)
+          }),
           card: function card(cardProps) {
             return renderNormalCard(cardProps, 'level2');
           },
@@ -519,7 +542,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
         }));
       }
     });
-  }, [level2Value, maxLevel, activeKey, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard, direction, isVertical]);
+  }, [level2Value, maxLevel, activeKey, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard, showAllItem, direction, isVertical]);
 
   /**
    * 渲染三级 Tabbar 面板
@@ -528,7 +551,9 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     if (maxLevel < 3) return null;
     var _dataSource2 = panelProps2.dataSource.children || [];
     if (_dataSource2.length) {
-      _dataSource2 = addDataSourceItemsByKey(_dataSource2, LEVEL_ADD_ITEMS.level3);
+      _dataSource2 = addDataSourceItemsByKey(_dataSource2, LEVEL_ADD_ITEMS.level3.filter(function (itemKey) {
+        return showAllItem || itemKey !== 'all';
+      }));
       if (isVertical) {
         _dataSource2 = _dataSource2.filter(function (item) {
           return item.key !== 'expand';
@@ -607,7 +632,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
         }));
       }
     });
-  }, [level3Value, maxLevel, activeKey, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard, direction, isVertical]);
+  }, [level3Value, maxLevel, activeKey, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard, showAllItem, direction, isVertical]);
 
   /**
    * 渲染一级 Tabbar

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

@@ -49,6 +49,10 @@ export interface TabbarLevelConfig {
     cardWidth: number;
     /** 卡片高度 */
     cardHeight: number;
+    /** 卡片背景色；未传时使用模板默认白色 */
+    cardBackground?: string;
+    /** 卡片选中背景色；未传时使用模板默认紫色 */
+    activeBackground?: string;
     /** 左侧缩进 */
     paddingLeft?: number;
     /** 卡片圆角；未传时使用模板默认值 */

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

@@ -5,6 +5,8 @@ export declare type PisellTabbarTemplate1Direction = 'horizontal' | 'vertical';
 export interface PisellTabbarTemplate1Props extends PisellTabbarProps {
     /** Tab 排列方向；默认保持现有横向布局。 */
     direction?: PisellTabbarTemplate1Direction;
+    /** 是否在每个层级展示自动生成的 All 分类；默认保持展示。 */
+    showAllItem?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<PisellTabbarTemplate1Props & React.RefAttributes<unknown>>;
 export default _default;

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

@@ -43,6 +43,11 @@ var import_hooks = require("../../hooks");
 var import_mock = __toESM(require("../../mock"));
 var import_constants = require("./constants");
 var import_utils = require("./utils");
+var tabbarInstanceSequence = 0;
+function createTabbarInstanceId() {
+  tabbarInstanceSequence += 1;
+  return `sku-list-tabbar-temp1-${tabbarInstanceSequence}`;
+}
 function renderCategoryIcon(icon, size) {
   if (/^(?:https?:\/\/|data:|blob:|\/)/i.test(icon)) {
     return /* @__PURE__ */ import_react.default.createElement(
@@ -62,6 +67,7 @@ function renderCategoryIcon(icon, size) {
   return /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: icon, style: { fontSize: size } });
 }
 var PisellTabbar = (props, ref) => {
+  var _a, _b;
   const {
     dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
     value,
@@ -74,16 +80,19 @@ var PisellTabbar = (props, ref) => {
     onSearch,
     searchProps,
     level1Actions,
-    direction = "horizontal"
+    direction = "horizontal",
+    showAllItem = true
   } = props;
   const isVertical = direction === "vertical";
   const containerRef = (0, import_react.useRef)(null);
   const searchRef = (0, import_react.useRef)(null);
-  const reactId = (0, import_react.useId)();
-  const tabbarId = (0, import_react.useMemo)(
-    () => `sku-list-tabbar-temp1-${reactId.replace(/:/g, "")}`,
-    [reactId]
-  );
+  const firstCategoryKey = ((_a = dataSource[0]) == null ? void 0 : _a.id) ?? ((_b = dataSource[0]) == null ? void 0 : _b.key);
+  const initialActiveKey = value ?? (showAllItem ? (0, import_utils.getDefaultActiveKey)(dataSource, "id") : firstCategoryKey !== void 0 ? [firstCategoryKey] : []);
+  const tabbarIdRef = (0, import_react.useRef)();
+  if (!tabbarIdRef.current) {
+    tabbarIdRef.current = createTabbarInstanceId();
+  }
+  const tabbarId = tabbarIdRef.current;
   const {
     setActiveKey,
     getActiveKey,
@@ -92,7 +101,7 @@ var PisellTabbar = (props, ref) => {
     setCacheActiveKey,
     resetActiveKey
   } = (0, import_hooks.useActiveKey)({
-    initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+    initialActiveKey,
     onChange
   });
   const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
@@ -124,8 +133,8 @@ var PisellTabbar = (props, ref) => {
     }
     return {
       closeSearchMode: () => {
-        var _a;
-        return (_a = searchRef.current) == null ? void 0 : _a.close();
+        var _a2;
+        return (_a2 = searchRef.current) == null ? void 0 : _a2.close();
       }
     };
   });
@@ -145,17 +154,25 @@ var PisellTabbar = (props, ref) => {
   );
   const handleLevel1Change = (0, import_react.useCallback)(
     (key, item) => {
-      var _a;
-      setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+      var _a2;
+      setActiveKey(
+        0,
+        key,
+        showAllItem && ((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) ? 0 : void 0
+      );
     },
-    [setActiveKey, activeKey]
+    [setActiveKey, activeKey, showAllItem]
   );
   const handleLevel2Change = (0, import_react.useCallback)(
     (key, item) => {
-      var _a;
-      setActiveKey(1, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+      var _a2;
+      setActiveKey(
+        1,
+        key,
+        showAllItem && ((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) ? 0 : void 0
+      );
     },
-    [setActiveKey, activeKey]
+    [setActiveKey, activeKey, showAllItem]
   );
   const handleLevel3Change = (0, import_react.useCallback)(
     (key) => {
@@ -165,7 +182,7 @@ var PisellTabbar = (props, ref) => {
   );
   const renderExpandCard = (0, import_react.useCallback)(
     (cardProps, level, isExpanded) => {
-      var _a;
+      var _a2;
       const config = expandConfig[isExpanded ? "active" : "inactive"];
       const levelCfg = getLevelConfig(level);
       return /* @__PURE__ */ import_react.default.createElement(
@@ -200,7 +217,7 @@ var PisellTabbar = (props, ref) => {
           active: {
             ...cardProps.active,
             style: {
-              ...(_a = cardProps.active) == null ? void 0 : _a.style,
+              ...(_a2 = cardProps.active) == null ? void 0 : _a2.style,
               color: "#ffffff",
               background: "#7f56d9"
             }
@@ -225,22 +242,22 @@ var PisellTabbar = (props, ref) => {
             onSearch == null ? void 0 : onSearch(e);
           },
           getContainer: () => {
-            var _a;
-            const customContainer = (_a = searchProps == null ? void 0 : searchProps.getContainer) == null ? void 0 : _a.call(searchProps);
+            var _a2;
+            const customContainer = (_a2 = searchProps == null ? void 0 : searchProps.getContainer) == null ? void 0 : _a2.call(searchProps);
             return customContainer || document.querySelector(`#${tabbarId}`) || document.body;
           },
           modalStyle: {
             width: "100%"
           },
           onOpen: () => {
-            var _a;
+            var _a2;
             openSearchMode();
-            (_a = searchProps == null ? void 0 : searchProps.onOpen) == null ? void 0 : _a.call(searchProps);
+            (_a2 = searchProps == null ? void 0 : searchProps.onOpen) == null ? void 0 : _a2.call(searchProps);
           },
           onClose: () => {
-            var _a;
+            var _a2;
             closeSearchMode();
-            (_a = searchProps == null ? void 0 : searchProps.onClose) == null ? void 0 : _a.call(searchProps);
+            (_a2 = searchProps == null ? void 0 : searchProps.onClose) == null ? void 0 : _a2.call(searchProps);
           },
           trigger: /* @__PURE__ */ import_react.default.createElement(
             import_PisellCards.default.MultilevelCard,
@@ -278,7 +295,7 @@ var PisellTabbar = (props, ref) => {
   );
   const renderNormalCard = (0, import_react.useCallback)(
     (cardProps, level) => {
-      var _a;
+      var _a2;
       const { dataSource: itemData } = cardProps;
       const levelCfg = getLevelConfig(level);
       const textAlign = isVertical ? levelCfg.textAlign ?? "center" : "center";
@@ -300,7 +317,7 @@ var PisellTabbar = (props, ref) => {
           style: {
             ...isVertical ? { minHeight: levelCfg.cardHeight } : { height: levelCfg.cardHeight },
             borderRadius: isVertical ? levelCfg.borderRadius ?? "999px" : "20px",
-            background: "#ffffff",
+            background: levelCfg.cardBackground ?? "#ffffff",
             minWidth: isVertical ? 0 : 100,
             justifyContent: isVertical && textAlign === "left" ? "flex-start" : "center"
           },
@@ -308,9 +325,9 @@ var PisellTabbar = (props, ref) => {
           active: {
             ...cardProps.active,
             style: {
-              ...(_a = cardProps.active) == null ? void 0 : _a.style,
+              ...(_a2 = cardProps.active) == null ? void 0 : _a2.style,
               color: "#fff",
-              background: "#7f56d9"
+              background: levelCfg.activeBackground ?? "#7f56d9"
             }
           }
         }
@@ -320,7 +337,12 @@ var PisellTabbar = (props, ref) => {
   );
   const level1DataSource = (0, import_react.useMemo)(
     () => {
-      const categoryItems = dataSource.length ? (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1) : [];
+      const categoryItems = dataSource.length ? (0, import_utils.addDataSourceItemsByKey)(
+        dataSource,
+        import_constants.LEVEL_ADD_ITEMS.level1.filter(
+          (itemKey) => showAllItem || itemKey !== "all"
+        )
+      ) : [];
       const actionItems = (level1Actions || []).map((action, index) => ({
         id: `__level1-action-${String(action.key)}-${index}`,
         key: `__level1-action-${String(action.key)}-${index}`,
@@ -334,10 +356,11 @@ var PisellTabbar = (props, ref) => {
       }
       return isVertical ? full.filter((item) => (item == null ? void 0 : item.key) !== "expand") : full;
     },
-    [dataSource, isSearchOpen, isVertical, level1Actions]
+    [dataSource, isSearchOpen, isVertical, level1Actions, showAllItem]
   );
   const renderLevel1Item = (0, import_react.useCallback)(
     (itemProps) => {
+      var _a2;
       const { dataSource: itemData } = itemProps;
       const isExpanded = getExpand("level1");
       const action = itemData == null ? void 0 : itemData.__action;
@@ -378,10 +401,13 @@ var PisellTabbar = (props, ref) => {
         import_PisellCards.default.MultilevelCard,
         {
           ...itemProps,
+          className: (0, import_classnames.default)(itemProps.className, {
+            "pisell-tabbar__category-group--level1": isVertical && ((_a2 = itemData == null ? void 0 : itemData.children) == null ? void 0 : _a2.length)
+          }),
           card: (cardProps) => renderNormalCard(cardProps, "level1"),
           panel: (panelProps) => {
-            var _a, _b;
-            if (((_b = (_a = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && maxLevel >= 2) {
+            var _a3, _b2;
+            if (((_b2 = (_a3 = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a3.children) == null ? void 0 : _b2.length) && maxLevel >= 2) {
               return renderLevel2Panel(panelProps);
             }
             return null;
@@ -410,7 +436,9 @@ var PisellTabbar = (props, ref) => {
       if (_dataSource.length) {
         _dataSource = (0, import_utils.addDataSourceItemsByKey)(
           _dataSource,
-          import_constants.LEVEL_ADD_ITEMS.level2
+          import_constants.LEVEL_ADD_ITEMS.level2.filter(
+            (itemKey) => showAllItem || itemKey !== "all"
+          )
         );
         if (isVertical) {
           _dataSource = _dataSource.filter((item) => item.key !== "expand");
@@ -463,6 +491,7 @@ var PisellTabbar = (props, ref) => {
             }
           },
           renderItem: (itemProps) => {
+            var _a2;
             const { dataSource: itemData } = itemProps;
             if (itemData == null ? void 0 : itemData.customClick) {
               return /* @__PURE__ */ import_react.default.createElement(
@@ -478,10 +507,13 @@ var PisellTabbar = (props, ref) => {
               import_PisellCards.default.MultilevelCard,
               {
                 ...itemProps,
+                className: (0, import_classnames.default)(itemProps.className, {
+                  "pisell-tabbar__category-group--level2": isVertical && ((_a2 = itemData == null ? void 0 : itemData.children) == null ? void 0 : _a2.length)
+                }),
                 card: (cardProps) => renderNormalCard(cardProps, "level2"),
                 panel: (panelProps2) => {
-                  var _a, _b;
-                  if (((_b = (_a = panelProps2 == null ? void 0 : panelProps2.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && maxLevel >= 3) {
+                  var _a3, _b2;
+                  if (((_b2 = (_a3 = panelProps2 == null ? void 0 : panelProps2.dataSource) == null ? void 0 : _a3.children) == null ? void 0 : _b2.length) && maxLevel >= 3) {
                     return renderLevel3Panel(panelProps2);
                   }
                   return null;
@@ -507,6 +539,7 @@ var PisellTabbar = (props, ref) => {
       getLevelConfig,
       renderExpandCard,
       renderNormalCard,
+      showAllItem,
       direction,
       isVertical
     ]
@@ -518,7 +551,9 @@ var PisellTabbar = (props, ref) => {
       if (_dataSource2.length) {
         _dataSource2 = (0, import_utils.addDataSourceItemsByKey)(
           _dataSource2,
-          import_constants.LEVEL_ADD_ITEMS.level3
+          import_constants.LEVEL_ADD_ITEMS.level3.filter(
+            (itemKey) => showAllItem || itemKey !== "all"
+          )
         );
         if (isVertical) {
           _dataSource2 = _dataSource2.filter((item) => item.key !== "expand");
@@ -604,6 +639,7 @@ var PisellTabbar = (props, ref) => {
       getLevelConfig,
       renderExpandCard,
       renderNormalCard,
+      showAllItem,
       direction,
       isVertical
     ]

package/lib/components/PisellTabbar/types.d.ts

@@ -49,6 +49,10 @@ export interface TabbarLevelConfig {
     cardWidth: number;
     /** 卡片高度 */
     cardHeight: number;
+    /** 卡片背景色；未传时使用模板默认白色 */
+    cardBackground?: string;
+    /** 卡片选中背景色；未传时使用模板默认紫色 */
+    activeBackground?: string;
     /** 左侧缩进 */
     paddingLeft?: number;
     /** 卡片圆角；未传时使用模板默认值 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.11.239",
+  "version": "6.11.240",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",