@pisell/materials 6.8.2 → 6.8.4

package/es/components/PisellScrollView/hooks/useScrollState.js

@@ -10,76 +10,104 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 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 { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+/**
+ * 防抖函数
+ */
+var debounce = function debounce(fn, delay) {
+  var timeoutId = null;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(function () {
+      fn.apply(void 0, args);
+      timeoutId = null;
+    }, delay);
+  };
+};
+
+/**
+ * 滚动状态管理 Hook
+ * @description 管理滚动容器的状态，包括滚动位置、溢出检测等
+ */
 export var useScrollState = function useScrollState(_ref) {
-  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4, _containerRef$current6, _containerRef$current7, _containerRef$current8, _containerRef$current9;
   var containerRef = _ref.containerRef,
     overflow = _ref.overflow;
-  var _useState = useState({
-      scrollTop: 0,
-      scrollLeft: 0,
-      percentY: 0,
-      percentX: 0,
-      scrollHeight: ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.scrollHeight) || 0,
-      scrollWidth: ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.scrollWidth) || 0,
-      clientHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.clientHeight) || 0,
-      clientWidth: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientWidth) || 0,
-      direction: null,
-      isScrollToTop: overflow === 'y' ? true : false,
-      isScrollToBottom: false,
-      isScrollToLeft: overflow === 'x' ? true : false,
-      isScrollToRight: false,
-      isOverflows: false
+  // 初始化滚动状态
+  var _useState = useState(function () {
+      return {
+        scrollTop: 0,
+        scrollLeft: 0,
+        percentY: 0,
+        percentX: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+        direction: null,
+        isScrollToTop: overflow === 'y' || overflow === 'both',
+        isScrollToBottom: false,
+        isScrollToLeft: overflow === 'x' || overflow === 'both',
+        isScrollToRight: false,
+        isOverflows: false
+      };
     }),
     _useState2 = _slicedToArray(_useState, 2),
     scrollState = _useState2[0],
     setScrollState = _useState2[1];
-  useEffect(function () {
-    if (!containerRef.current) {
-      return;
-    }
-    var _containerRef$current5 = containerRef.current,
-      scrollHeight = _containerRef$current5.scrollHeight,
-      clientHeight = _containerRef$current5.clientHeight,
-      scrollWidth = _containerRef$current5.scrollWidth,
-      clientWidth = _containerRef$current5.clientWidth;
-    var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
-    setScrollState(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        isOverflows: isOverflows
-      });
-    });
-  }, [(_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.scrollWidth, (_containerRef$current7 = containerRef.current) === null || _containerRef$current7 === void 0 ? void 0 : _containerRef$current7.scrollHeight, (_containerRef$current8 = containerRef.current) === null || _containerRef$current8 === void 0 ? void 0 : _containerRef$current8.clientHeight, (_containerRef$current9 = containerRef.current) === null || _containerRef$current9 === void 0 ? void 0 : _containerRef$current9.clientWidth]);
-  var updateScrollState = useCallback(function () {
+
+  // 使用 ref 存储是否已挂载，避免在组件卸载后更新状态
+  var isMountedRef = useRef(true);
+  // 存储 ResizeObserver 实例
+  var resizeObserverRef = useRef(null);
+
+  /**
+   * 计算并更新滚动状态
+   */
+  var calculateScrollState = useCallback(function () {
+    var prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var container = containerRef.current;
-    if (!container) return;
-    var scrollTop = container.scrollTop,
-      scrollLeft = container.scrollLeft,
-      scrollHeight = container.scrollHeight,
-      scrollWidth = container.scrollWidth,
-      clientHeight = container.clientHeight,
-      clientWidth = container.clientWidth;
-    var isScrollToTop = scrollTop <= 0;
-    var isScrollToBottom = scrollTop + clientHeight >= scrollHeight;
-    var isScrollToLeft = scrollLeft <= 0;
-    var isScrollToRight = scrollLeft + clientWidth >= scrollWidth;
-    setScrollState(function (prev) {
-      // 计算方向
+    if (!container) return null;
+    try {
+      var scrollTop = container.scrollTop,
+        scrollLeft = container.scrollLeft,
+        scrollHeight = container.scrollHeight,
+        scrollWidth = container.scrollWidth,
+        clientHeight = container.clientHeight,
+        clientWidth = container.clientWidth;
+
+      // 计算是否溢出
+      var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+
+      // 计算边界状态
+      var isScrollToTop = scrollTop <= 0;
+      var isScrollToBottom = scrollTop + clientHeight >= scrollHeight - 1; // -1 处理浮点误差
+      var isScrollToLeft = scrollLeft <= 0;
+      var isScrollToRight = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      // 计算滚动方向
       var direction = null;
-      if (Math.abs(scrollTop - prev.scrollTop) > Math.abs(scrollLeft - prev.scrollLeft)) {
-        direction = scrollTop > prev.scrollTop ? 'down' : 'up';
-      } else if (scrollLeft !== prev.scrollLeft) {
-        direction = scrollLeft > prev.scrollLeft ? 'right' : 'left';
-      } else {
-        direction = prev.direction;
+      if (prevState) {
+        var deltaY = Math.abs(scrollTop - prevState.scrollTop);
+        var deltaX = Math.abs(scrollLeft - prevState.scrollLeft);
+        if (deltaY > deltaX && deltaY > 0) {
+          direction = scrollTop > prevState.scrollTop ? 'down' : 'up';
+        } else if (deltaX > 0) {
+          direction = scrollLeft > prevState.scrollLeft ? 'right' : 'left';
+        } else {
+          direction = prevState.direction;
+        }
       }
 
-      // 计算百分比
-      var maxScrollTop = scrollHeight - clientHeight;
-      var maxScrollLeft = scrollWidth - clientWidth;
+      // 计算滚动百分比
+      var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+      var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
       var percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
       var percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
-      var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
       return {
         scrollTop: scrollTop,
         scrollLeft: scrollLeft,
@@ -96,8 +124,135 @@ export var useScrollState = function useScrollState(_ref) {
         isScrollToRight: isScrollToRight,
         isOverflows: isOverflows
       };
-    });
+    } catch (error) {
+      console.warn('[useScrollState] 计算滚动状态时出错:', error);
+      return null;
+    }
   }, [containerRef]);
+
+  /**
+   * 更新滚动状态（用于滚动事件）
+   */
+  var updateScrollState = useCallback(function () {
+    if (!isMountedRef.current) return;
+    setScrollState(function (prev) {
+      var newState = calculateScrollState(prev);
+      return newState || prev;
+    });
+  }, [calculateScrollState]);
+
+  /**
+   * 更新溢出状态（用于尺寸变化）
+   */
+  var updateOverflowState = useCallback(function () {
+    if (!isMountedRef.current) return;
+    var newState = calculateScrollState(null);
+    if (newState) {
+      setScrollState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          scrollHeight: newState.scrollHeight,
+          scrollWidth: newState.scrollWidth,
+          clientHeight: newState.clientHeight,
+          clientWidth: newState.clientWidth,
+          isOverflows: newState.isOverflows,
+          isScrollToTop: newState.isScrollToTop,
+          isScrollToBottom: newState.isScrollToBottom,
+          isScrollToLeft: newState.isScrollToLeft,
+          isScrollToRight: newState.isScrollToRight
+        });
+      });
+    }
+  }, [calculateScrollState]);
+
+  // 监听容器尺寸变化
+  useEffect(function () {
+    isMountedRef.current = true;
+    var container = containerRef.current;
+    if (!container) return;
+
+    // 防抖处理尺寸变化回调
+    var debouncedUpdateOverflow = debounce(updateOverflowState, 50);
+
+    // 初始化状态
+    updateOverflowState();
+
+    // 检查 ResizeObserver 是否可用
+    if (typeof ResizeObserver === 'undefined') {
+      // 降级方案：使用 window resize 事件
+      var handleResize = function handleResize() {
+        return debouncedUpdateOverflow();
+      };
+      window.addEventListener('resize', handleResize);
+      return function () {
+        isMountedRef.current = false;
+        window.removeEventListener('resize', handleResize);
+      };
+    }
+    try {
+      // 创建 ResizeObserver
+      resizeObserverRef.current = new ResizeObserver(function (entries) {
+        // 确保只在有效的尺寸变化时更新
+        if (entries.length > 0 && isMountedRef.current) {
+          debouncedUpdateOverflow();
+        }
+      });
+
+      // 监听容器本身
+      resizeObserverRef.current.observe(container);
+
+      // 监听直接子元素
+      var children = container.children;
+      for (var i = 0; i < children.length; i++) {
+        resizeObserverRef.current.observe(children[i]);
+      }
+
+      // 使用 MutationObserver 监听子元素变化
+      var mutationObserver = new MutationObserver(function (mutations) {
+        if (!isMountedRef.current || !resizeObserverRef.current) return;
+        mutations.forEach(function (mutation) {
+          // 新增的子元素添加监听
+          mutation.addedNodes.forEach(function (node) {
+            if (node instanceof Element) {
+              var _resizeObserverRef$cu;
+              (_resizeObserverRef$cu = resizeObserverRef.current) === null || _resizeObserverRef$cu === void 0 || _resizeObserverRef$cu.observe(node);
+            }
+          });
+        });
+
+        // 子元素变化后更新溢出状态
+        debouncedUpdateOverflow();
+      });
+      mutationObserver.observe(container, {
+        childList: true,
+        subtree: false
+      });
+
+      // 监听 window resize 作为补充
+      var handleWindowResize = function handleWindowResize() {
+        return debouncedUpdateOverflow();
+      };
+      window.addEventListener('resize', handleWindowResize);
+      return function () {
+        var _resizeObserverRef$cu2;
+        isMountedRef.current = false;
+        (_resizeObserverRef$cu2 = resizeObserverRef.current) === null || _resizeObserverRef$cu2 === void 0 || _resizeObserverRef$cu2.disconnect();
+        resizeObserverRef.current = null;
+        mutationObserver.disconnect();
+        window.removeEventListener('resize', handleWindowResize);
+      };
+    } catch (error) {
+      console.warn('[useScrollState] 初始化 ResizeObserver 失败:', error);
+      // 降级方案
+      var _handleResize = function _handleResize() {
+        return debouncedUpdateOverflow();
+      };
+      window.addEventListener('resize', _handleResize);
+      return function () {
+        isMountedRef.current = false;
+        window.removeEventListener('resize', _handleResize);
+      };
+    }
+  }, [containerRef, updateOverflowState]);
   return {
     scrollState: scrollState,
     updateScrollState: updateScrollState

package/es/components/PisellSteps/PisellSteps.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["type", "current", "defaultCurrent", "direction", "size", "status", "initial", "items", "labelPlacement", "responsive", "onChange", "className", "style", "progressDot", "clickable", "allowClickFinished", "connectorStyle", "gridLayout", "gridColumns", "itemGap", "enableAnchor", "anchorContainer", "mobileMode", "mobileBreakpoint", "__designMode", "__id", "other"];
+var _excluded = ["type", "current", "defaultCurrent", "direction", "size", "status", "initial", "items", "labelPlacement", "responsive", "onChange", "className", "style", "progressDot", "clickable", "allowClickFinished", "gridLayout", "gridColumns", "itemGap", "enableAnchor", "anchorContainer", "mobileMode", "mobileBreakpoint", "enableScrollMode", "scrollActionsConfig", "__designMode", "__id", "other"];
 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; }
@@ -19,6 +19,7 @@ import React, { useMemo } from 'react';
 import "./PisellSteps.less";
 import { useStepsState, useStepClick, useAnchor, useResponsive } from "./hooks";
 import { getStepStatus, mergeStepClassName } from "./utils";
+import { PisellScrollView } from "../PisellScrollView";
 
 /**
  * PisellSteps 步骤条组件
@@ -57,7 +58,6 @@ var PisellSteps = function PisellSteps(_ref) {
     clickable = _ref$clickable === void 0 ? false : _ref$clickable,
     _ref$allowClickFinish = _ref.allowClickFinished,
     allowClickFinished = _ref$allowClickFinish === void 0 ? true : _ref$allowClickFinish,
-    connectorStyle = _ref.connectorStyle,
     _ref$gridLayout = _ref.gridLayout,
     gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
     gridColumns = _ref.gridColumns,
@@ -69,6 +69,9 @@ var PisellSteps = function PisellSteps(_ref) {
     mobileMode = _ref$mobileMode === void 0 ? 'full' : _ref$mobileMode,
     _ref$mobileBreakpoint = _ref.mobileBreakpoint,
     mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 744 : _ref$mobileBreakpoint,
+    _ref$enableScrollMode = _ref.enableScrollMode,
+    enableScrollMode = _ref$enableScrollMode === void 0 ? false : _ref$enableScrollMode,
+    scrollActionsConfig = _ref.scrollActionsConfig,
     __designMode = _ref.__designMode,
     __id = _ref.__id,
     other = _ref.other,
@@ -217,6 +220,53 @@ var PisellSteps = function PisellSteps(_ref) {
     }
     return customStyle;
   }, [style, itemGap, gridColumns, gridLayout]);
+
+  // 默认滚动箭头配置
+  var defaultScrollActionsConfig = useMemo(function () {
+    return _objectSpread({
+      show: true,
+      type: 'lrArrows',
+      scrollDistance: 200
+    }, scrollActionsConfig);
+  }, [scrollActionsConfig]);
+
+  // 渲染步骤条内容
+  var renderStepsContent = function renderStepsContent() {
+    var forceHorizontal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return /*#__PURE__*/React.createElement(AntdSteps, _extends({
+      current: Math.max(0, currentStep - initial)
+      // 滚动模式下强制水平方向
+      ,
+      direction: forceHorizontal ? 'horizontal' : direction,
+      size: size === 'large' ? 'default' : size,
+      status: status,
+      items: processedItems,
+      labelPlacement: labelPlacement,
+      type: type,
+      progressDot: progressDot
+      // 滚动模式下禁用 Ant Design 的响应式行为
+      ,
+      responsive: forceHorizontal ? false : responsive
+    }, restProps, other || {}));
+  };
+
+  // 渲染桌面端步骤条（可能带滚动）
+  var renderDesktopSteps = function renderDesktopSteps() {
+    if (enableScrollMode) {
+      return /*#__PURE__*/React.createElement(PisellScrollView, {
+        className: "pisell-steps-scroll-view",
+        overflow: "x",
+        scrollbarStyle: "none",
+        scrollActionsConfig: defaultScrollActionsConfig,
+        snapScroll: {
+          enabled: false
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-steps-scroll-content"
+      }, renderStepsContent(true)));
+    }
+    return renderStepsContent(false);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: showMobileCurrentView ? "pisell-steps pisell-steps-mobile-current ".concat(className || '') : wrapperClassName,
     style: showMobileCurrentView ? style : wrapperStyle,
@@ -228,16 +278,7 @@ var PisellSteps = function PisellSteps(_ref) {
     className: "pisell-steps-mobile-current__number"
   }, currentStepItem.title), (currentStepItem === null || currentStepItem === void 0 ? void 0 : currentStepItem.description) && /*#__PURE__*/React.createElement("span", {
     className: "pisell-steps-mobile-current__title"
-  }, currentStepItem.description)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AntdSteps, _extends({
-    current: Math.max(0, currentStep - initial),
-    direction: direction,
-    size: size === 'large' ? 'default' : size,
-    status: status,
-    items: processedItems,
-    labelPlacement: labelPlacement,
-    type: type,
-    progressDot: progressDot
-  }, restProps, other || {}))));
+  }, currentStepItem.description)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDesktopSteps()));
 };
 
 // 添加 displayName 用于调试

package/es/components/PisellSteps/PisellSteps.less

@@ -318,3 +318,15 @@
     line-height: 28px;
   }
 }
+
+// ============ 滚动模式样式 ============
+.@{pisell-steps-prefix}-scroll-view {
+  width: 100%;
+  position: relative;
+
+  // 滚动内容容器
+  .@{pisell-steps-prefix}-scroll-content {
+    display: inline-flex;
+    min-width: max-content;
+  }
+}

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

@@ -1,5 +1,6 @@
 import type { StepsProps, StepProps } from 'antd';
 import type { CSSProperties, ReactNode } from 'react';
+import type { ScrollActionsConfig } from '../PisellScrollView/types';
 /**
  * 步骤状态类型
  */
@@ -156,10 +157,6 @@ export interface PisellStepsProps extends Omit<StepsProps, 'items' | 'onChange'
      * @default true
      */
     allowClickFinished?: boolean;
-    /**
-     * 连接器自定义样式
-     */
-    connectorStyle?: CSSProperties;
     /**
      * 是否开启栅格布局
      * @default false
@@ -196,6 +193,17 @@ export interface PisellStepsProps extends Omit<StepsProps, 'items' | 'onChange'
      * @default 744
      */
     mobileBreakpoint?: number;
+    /**
+     * 是否启用横向滚动模式
+     * @description 当步骤条宽度不足时，启用横向滚动并显示左右箭头按钮
+     * @default false
+     */
+    enableScrollMode?: boolean;
+    /**
+     * 滚动箭头配置
+     * @description 配置滚动箭头的显示类型和滚动距离
+     */
+    scrollActionsConfig?: ScrollActionsConfig;
     /**
      * 设计模式标识（低代码引擎使用）
      */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { PisellSuperTabsProps } from './types';
 import './PisellSuperTabs.less';
 /**
@@ -7,7 +7,7 @@ import './PisellSuperTabs.less';
  * @template T - 数据源项的类型
  */
 declare const PisellSuperTabs: {
-    <T>(props: PisellSuperTabsProps<T>): React.JSX.Element;
+    <T>(props: PisellSuperTabsProps<T>): JSX.Element;
     displayName: string;
 };
 export default PisellSuperTabs;

package/es/components/PisellTabbar2/PisellTabbar.js

@@ -217,7 +217,10 @@ var PisellTabbar = function PisellTabbar(props) {
         gap: 12
       },
       panelStyle: {
-        height: '100%',
+        position: 'absolute',
+        top: 40,
+        right: 0,
+        height: 'calc(100% - 40px)',
         transition: '0.3s ease-in-out'
       },
       startSlot: null,
@@ -241,4 +244,38 @@ var PisellTabbar = function PisellTabbar(props) {
 };
 PisellTabbar.displayName = 'PisellTabbar';
 PisellTabbar.getDefaultActiveKey = getDefaultActiveKey;
+
+// const Demo = () => {
+//   return (
+//     <div style={{ height: '100vh', width: '100%', display: 'flex' }}>
+//       <div className="" style={{ height: '100%', width: 'calc(100% - 100px)' }}>
+//         <div className="tabbar-level-3-wrap" style={{ width: '100%' }}></div>
+//         <div className="" style={{ height: '400px' }}>
+//           content
+//         </div>
+//       </div>
+//       <div
+//         className=""
+//         style={{
+//           height: '100%',
+//           width: '100px',
+//           display: 'flex',
+//           alignItems: 'flex-start',
+//         }}
+//       >
+//         <div
+//           className="tabbar-level-2-wrap"
+//           style={{
+//             height: '100%',
+//             position: 'relative',
+//           }}
+//         ></div>
+//         <div className="" style={{ height: '100%' }}>
+//           <PisellTabbar __designMode />
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
 export default PisellTabbar;

package/es/components/PisellTabbar2/PisellTabbar.less

@@ -4,6 +4,7 @@
 .pisell-tabbar2 {
   // height: 100vh;
   width: 96px;
+  height: 100%;
   // position: fixed;
   // top: 0;
   // right: 0;

package/es/components/PisellTabbar2/components/TabbarLevel.js

@@ -256,6 +256,7 @@ var TabbarLevel = /*#__PURE__*/memo(function (props) {
 
     // 普通项
     return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+      panelWidthMode: "auto",
       card: function card(cardProps) {
         if (level === 'level1') {
           return renderLevel1NormalCard(cardProps);

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

@@ -1,5 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import { AppVersionControlProps } from './types';
 import './index.less';
-declare const AppVersionControl: (props: AppVersionControlProps) => React.JSX.Element;
+declare const AppVersionControl: (props: AppVersionControlProps) => JSX.Element;
 export default AppVersionControl;

package/es/components/auto-complete-number/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 import { AutoCompleteProps, InputNumberProps } from "antd";
 interface AutoCompleteNumberProps {
     autoCompleteProps: AutoCompleteProps;
@@ -6,5 +6,5 @@ interface AutoCompleteNumberProps {
     value?: any;
     onChange?: any;
 }
-declare const AutoCompleteNumber: (props: AutoCompleteNumberProps) => React.JSX.Element;
+declare const AutoCompleteNumber: (props: AutoCompleteNumberProps) => JSX.Element;
 export default AutoCompleteNumber;

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { BadgeProps as OriginalBadgeprops } from 'antd';
 import './index.less';
 export interface Badgeprops extends OriginalBadgeprops {
     styleType: 'default' | 'warning';
 }
-declare const Badge: (props: any) => React.JSX.Element;
+declare const Badge: (props: any) => JSX.Element;
 export default Badge;

package/es/components/batch-editor/fields/Image/index.d.ts

@@ -3,5 +3,5 @@ export interface ImageProps extends React.ComponentPropsWithoutRef<"img"> {
     value?: string;
 }
 import "./index.less";
-declare const Image: (props: ImageProps) => React.JSX.Element | null;
+declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/es/components/batch-editor/fields/Text/index.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-declare const Text: (props: TextProps) => React.JSX.Element;
+declare const Text: (props: TextProps) => JSX.Element;
 export default Text;

package/es/components/batch-editor/fields/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     price: import("react").FC<import("./Price").PriceProps>;
-    image: (props: import("./Image").ImageProps) => import("react").JSX.Element | null;
-    text: (props: import("./Text").TextProps) => import("react").JSX.Element;
+    image: (props: import("./Image").ImageProps) => JSX.Element | null;
+    text: (props: import("./Text").TextProps) => JSX.Element;
 };
 export default _default;

package/es/components/batch-editor/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 import "./index.less";
 interface BatchEditorProps {
     columns: any[];
@@ -7,5 +7,5 @@ interface BatchEditorProps {
     rowKey: string;
     otherTableProps: any;
 }
-declare const BatchEditor: (props: BatchEditorProps) => React.JSX.Element;
+declare const BatchEditor: (props: BatchEditorProps) => JSX.Element;
 export default BatchEditor;

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

@@ -17,5 +17,5 @@ interface BrowserSelectProps extends Omit<React.DetailedHTMLProps<React.SelectHT
  * @Author: zhiwei.Wang
  * @Date: 2024-01-30 16:43
  */
-declare const BrowserSelect: (props: BrowserSelectProps) => React.JSX.Element;
+declare const BrowserSelect: (props: BrowserSelectProps) => JSX.Element;
 export default BrowserSelect;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Calendar: (props: any) => import("react").JSX.Element;
+declare const Calendar: (props: any) => JSX.Element;
 export default Calendar;

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

@@ -8,5 +8,5 @@ interface PisellStatisticProps {
     showCurrencySymbol?: boolean;
     style?: any;
 }
-declare const CardMetricItem: (props: PisellStatisticProps) => React.JSX.Element;
+declare const CardMetricItem: (props: PisellStatisticProps) => JSX.Element;
 export default CardMetricItem;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import './index.less';
-declare const _default: (props: any) => React.JSX.Element;
+declare const _default: (props: any) => JSX.Element;
 export default _default;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Checkbox: (props: any) => import("react").JSX.Element;
+declare const Checkbox: (props: any) => JSX.Element;
 export default Checkbox;