@pisell/materials 6.2.38 → 6.2.39

package/lib/components/dataSourceComponents/dataSourceTable/filter/index.js

@@ -52,7 +52,8 @@ var Filter = (props) => {
     handleValuesChange,
     search,
     filterBy,
-    show
+    show,
+    getInitialValues
   } = props;
   const [form] = import_antd.Form.useForm();
   const { dataSource } = (0, import_useDataSource.default)();
@@ -155,6 +156,9 @@ var Filter = (props) => {
       }
     ) : null;
   }, [search]);
+  const initialValues = (0, import_react.useMemo)(() => {
+    return getInitialValues == null ? void 0 : getInitialValues();
+  }, [search, filterBy]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Form,
     {
@@ -163,7 +167,8 @@ var Filter = (props) => {
       size: "large",
       layout: "inline",
       className: "filter-form-wrapper",
-      onValuesChange
+      onValuesChange,
+      initialValues
     },
     searchDom,
     filterDom,

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts

@@ -1,5 +1,5 @@
 declare const useDataSourceKey: () => {
-    dataSourceKey: string | import("../../provider/dataSource/DataSourceContext").DataSourceType | undefined;
-    dataSourceKeyRef: import("react").MutableRefObject<string | import("../../provider/dataSource/DataSourceContext").DataSourceType | undefined>;
+    dataSourceKey: string | undefined;
+    dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;
 };
 export default useDataSourceKey;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -9,6 +9,7 @@ interface UseTablePropsProps {
     refreshData: () => void;
     handleFilterChange: (changedFields: any, allFields: any) => void;
     tableRef: any;
+    getInitialValues: () => Record<string, any>;
 }
 /**
  * 处理table的props
@@ -17,7 +18,8 @@ interface UseTablePropsProps {
  * @returns
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
-    title: string | number | boolean | JSX.Element | React.ReactFragment | (() => React.ReactNode) | null | undefined;
+    currentComponentId: any;
+    title: number | boolean | React.ReactFragment | JSX.Element | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -26,11 +28,13 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: string | number | boolean | JSX.Element | React.ReactFragment | (() => React.ReactNode) | null | undefined;
+    subTitle: number | boolean | React.ReactFragment | JSX.Element | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
-    filter: JSX.Element | null;
+    filter: any;
     onRow: (record: any) => any;
     actionButtons: any[] | null;
+    __id?: string | undefined;
+    currentSettingKey?: string | undefined;
     titleButtons?: {
         show: boolean;
         maxCount: number;
@@ -42,18 +46,12 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         items: OperationItem[];
     } | undefined;
     operation?: {
-        /**
-         * 处理table的props
-         * 转换title
-         * @param props
-         * @returns
-         */
         show: boolean;
         title: string;
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "link" | "button";
+        type: "button" | "link";
         items: OperationItem[];
     } | undefined;
     operationContent?: {
@@ -71,7 +69,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         useCustomAction: boolean;
         actionType: string;
         openMode: "modal" | "drawer";
-        openContentSize: "small" | "large" | "middle";
+        openContentSize: "small" | "middle" | "large";
         openTitle: string;
         key: string;
     } | undefined;
@@ -94,5 +92,6 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         create?: Record<string, any> | undefined;
         destroy?: Record<string, any> | undefined;
     } | undefined;
+    localSettings?: import("../../../table/types").LocalSettingsType | undefined;
 };
 export default useTableProps;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -54,7 +54,8 @@ var useTableProps = (props) => {
     closeDrawer,
     refreshData,
     handleFilterChange,
-    tableRef
+    tableRef,
+    getInitialValues
   } = props;
   const {
     title: propsTitle,
@@ -66,7 +67,9 @@ var useTableProps = (props) => {
     search,
     clickToDetail,
     onRow: propsOnRow,
-    filterBy
+    filterBy,
+    currentSettingKey,
+    __id
   } = originProps;
   const {
     items,
@@ -260,16 +263,19 @@ var useTableProps = (props) => {
     if (!(propsFilter == null ? void 0 : propsFilter.show) && !(search == null ? void 0 : search.show)) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement(
+    const dom = /* @__PURE__ */ import_react.default.createElement(
       import_filter.default,
       {
         ...propsFilter,
         componentId,
         search,
         handleValuesChange: handleFilterChange,
-        filterBy
+        filterBy,
+        getInitialValues
       }
     );
+    dom.__proto__.items = propsFilter == null ? void 0 : propsFilter.items;
+    return dom;
   }, [propsFilter, search]);
   const onRow = (0, import_ahooks.useMemoizedFn)((record) => {
     if (!(clickToDetail == null ? void 0 : clickToDetail.show)) {
@@ -300,6 +306,7 @@ var useTableProps = (props) => {
   });
   return {
     ...originProps,
+    currentComponentId: componentId,
     title,
     pagination,
     columns,

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.d.ts

@@ -11,7 +11,7 @@ declare type Params = {
         sortBy: string;
     };
 };
-declare const useTableQuery: (props: DataSourceTableProps) => {
+declare const useTableQuery: (props: DataSourceTableProps, currentSettingHash: string) => {
     queryPageConfig: {
         page: number;
         pageSize: number;
@@ -28,5 +28,6 @@ declare const useTableQuery: (props: DataSourceTableProps) => {
     refreshData: () => void;
     handleFilterChange: (changedFields: any, allFields: any) => void;
     refreshCurrentPage: () => void;
+    getInitialValues: () => Record<string, any>;
 };
 export default useTableQuery;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.js

@@ -24,25 +24,61 @@ __export(useTableQuery_exports, {
 module.exports = __toCommonJS(useTableQuery_exports);
 var import_react = require("react");
 var import_ahooks = require("ahooks");
-var useTableQuery = (props) => {
+var import_utils = require("../../../table/Table/utils");
+var useTableQuery = (props, currentSettingHash) => {
   var _a, _b, _c, _d;
-  const { filterBy, sortBy, tabs } = props;
+  const { filterBy, sortBy, tabs, localSettings } = props;
+  const tableId = (0, import_react.useMemo)(() => {
+    if (props.__designMode === "design") {
+      return "designMode-mock-table-id";
+    }
+    return (props == null ? void 0 : props.currentComponentId) || props.__id;
+  }, [props.__id, props.__designMode, props == null ? void 0 : props.currentComponentId]);
+  const currentViewMode = (0, import_react.useMemo)(() => (0, import_utils.getCurrentViewModeFromLocalStorage)(tableId) || "grid", [tableId]);
   const [queryPageConfig, setQueryPageConfig] = (0, import_react.useState)({
     page: 1,
     pageSize: 20,
     filter: ((_b = (_a = tabs == null ? void 0 : tabs.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.filterBy) || filterBy || {},
     sort: ((_d = (_c = tabs == null ? void 0 : tabs.items) == null ? void 0 : _c[0]) == null ? void 0 : _d.sortBy) || sortBy
   });
+  const getInitialValues = (0, import_ahooks.useMemoizedFn)(() => {
+    try {
+      if (!tableId) return {};
+      const setting = (0, import_utils.getTableSettingByCurrentViewMode)(tableId, currentViewMode);
+      console.log("setting22", setting);
+      return (setting == null ? void 0 : setting.filters) || {};
+    } catch (e) {
+      return {};
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    if (!tableId) return;
+    const enable = !!((localSettings == null ? void 0 : localSettings.enable) && ((_a2 = localSettings.scope) == null ? void 0 : _a2.includes("filters")));
+    if (!enable) return;
+    const setting = (0, import_utils.getTableSettingByCurrentViewMode)(tableId, currentViewMode);
+    const persisted = (setting == null ? void 0 : setting.filters) || {};
+    if (persisted && Object.keys(persisted).length > 0) {
+      setQueryPageConfig((prev) => ({
+        ...prev,
+        filter: { ...prev.filter, ...persisted }
+      }));
+    }
+  }, [tableId, currentViewMode, JSON.stringify(localSettings)]);
   const handleValuesChange = (0, import_ahooks.useMemoizedFn)(
     (params, allParams) => {
+      var _a2;
       const { page, size } = params.pagination || {};
+      let nextFilterForSave = null;
       setQueryPageConfig((prev) => {
-        var _a2, _b2, _c2;
+        var _a3, _b2, _c2;
         let sort = prev.sort || sortBy;
         let filter = prev.filter;
         if ("tabs" in params) {
-          sort = ((_a2 = params.tabs) == null ? void 0 : _a2.sortBy) || sortBy || "";
-          filter = { ...prev.filter, ...((_b2 = params.tabs) == null ? void 0 : _b2.filterBy) || {} };
+          sort = ((_a3 = params.tabs) == null ? void 0 : _a3.sortBy) || sortBy || "";
+          const tabsFilter = ((_b2 = params.tabs) == null ? void 0 : _b2.filterBy) || {};
+          filter = { ...prev.filter, ...tabsFilter };
+          nextFilterForSave = filter;
         }
         if ("order_by" in params) {
           sort = params.order_by || ((_c2 = allParams.tabs) == null ? void 0 : _c2.sortBy) || sortBy;
@@ -55,15 +91,49 @@ var useTableQuery = (props) => {
           filter
         };
       });
+      const enable = !!((localSettings == null ? void 0 : localSettings.enable) && ((_a2 = localSettings.scope) == null ? void 0 : _a2.includes("filters")));
+      if (enable && tableId && nextFilterForSave) {
+        const excluded = new Set((localSettings == null ? void 0 : localSettings.excludedFilterFields) || []);
+        const filtered = {};
+        Object.keys(nextFilterForSave).forEach((k) => {
+          if (!excluded.has(k)) {
+            filtered[k] = nextFilterForSave[k];
+          }
+        });
+        (0, import_utils.setTableSettingToLocalStorage)({
+          tableId,
+          tableSettingObj: { filters: filtered },
+          currentViewMode,
+          currentSettingHash
+        });
+      }
     }
   );
   const handleFilterChange = (0, import_ahooks.useMemoizedFn)(
     (changedFields, allFields) => {
+      var _a2;
+      const nextFilter = { ...allFields };
       setQueryPageConfig((prev) => ({
         ...prev,
         page: 1,
-        filter: { ...prev.filter, ...allFields, ...filterBy || {} }
+        filter: { ...prev.filter, ...nextFilter, ...filterBy || {} }
       }));
+      const enable = !!((localSettings == null ? void 0 : localSettings.enable) && ((_a2 = localSettings.scope) == null ? void 0 : _a2.includes("filters")));
+      if (enable && tableId) {
+        const excluded = new Set((localSettings == null ? void 0 : localSettings.excludedFilterFields) || []);
+        const filtered = {};
+        Object.keys(nextFilter || {}).forEach((k) => {
+          if (!excluded.has(k)) {
+            filtered[k] = nextFilter[k];
+          }
+        });
+        (0, import_utils.setTableSettingToLocalStorage)({
+          tableId,
+          tableSettingObj: { filters: filtered },
+          currentViewMode,
+          currentSettingHash
+        });
+      }
     }
   );
   const refreshData = (0, import_ahooks.useMemoizedFn)(() => {
@@ -83,7 +153,8 @@ var useTableQuery = (props) => {
     handleValuesChange,
     refreshData,
     handleFilterChange,
-    refreshCurrentPage
+    refreshCurrentPage,
+    getInitialValues
   };
 };
 var useTableQuery_default = useTableQuery;

package/lib/components/dataSourceComponents/dataSourceTable/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ColumnType } from 'antd/es/table';
+import { LocalSettingsType } from '../../table/types';
 import { DataSourceType } from '../provider/dataSource/DataSourceContext';
 export declare type OperationItem = {
     label?: string;
@@ -13,6 +14,9 @@ export declare type OperationItem = {
     afterClose?: () => void;
 };
 export interface DataSourceTableProps {
+    __id?: string;
+    currentComponentId?: string;
+    currentSettingKey?: string;
     title?: string | React.ReactNode | (() => React.ReactNode);
     subTitle?: string | React.ReactNode | (() => React.ReactNode);
     titleButtons?: {
@@ -76,4 +80,5 @@ export interface DataSourceTableProps {
         create?: Record<string, any>;
         destroy?: Record<string, any>;
     };
+    localSettings?: LocalSettingsType;
 }

package/lib/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 declare const Subdomain: React.FC<import("antd").InputProps & {
     onChange: (value: string) => void;
     onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    rootDomain: "custom" | "xzero" | "saas";
+    rootDomain: "custom" | "saas" | "xzero";
     customDomain?: string | undefined;
     value?: string | undefined;
     tenantId: string;

package/lib/components/dataSourceComponents/fields/Upload/utils.d.ts

@@ -15,4 +15,4 @@ export declare const getFileMetadataParams: (file: RcFile & {
     metadata?: MediaMetadata;
 }) => Record<string, any>;
 export declare const isValueEqual: (value: any, fileListValue: any) => boolean;
-export declare const getBaseTime: (size: number) => 1000 | 2000 | 4000 | 8000;
+export declare const getBaseTime: (size: number) => 2000 | 1000 | 4000 | 8000;

package/lib/components/dataSourceComponents/fields/index.d.ts

@@ -19,7 +19,7 @@ declare const formFieldMap: {
         Subdomain: import("react").FC<import("antd").InputProps & {
             onChange: (value: string) => void;
             onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-            rootDomain: "custom" | "xzero" | "saas";
+            rootDomain: "custom" | "saas" | "xzero";
             customDomain?: string | undefined;
             value?: string | undefined;
             tenantId: string;
@@ -59,11 +59,13 @@ declare const formFieldMap: {
     FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 };
-declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<{}> & {
+declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
+}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
+    onChange: (value: string) => void;
+} & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
     JSON: import("react").FC<any>;
     Password: import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     TextArea: import("react").FC<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
@@ -76,14 +78,14 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     Subdomain: import("react").FC<import("antd").InputProps & {
         onChange: (value: string) => void;
         onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-        rootDomain: "custom" | "xzero" | "saas";
+        rootDomain: "custom" | "saas" | "xzero";
         customDomain?: string | undefined;
         value?: string | undefined;
         tenantId: string;
         name?: string | undefined;
         fieldKey?: string | undefined;
     } & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
-}) | (import("react").FC<{}> & {
+}) | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -95,7 +97,5 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     extraParams?: Record<string, any> | undefined;
 } & {
     dataSource?: any;
-}) => JSX.Element) | import("react").FC<any> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
-    onChange: (value: string) => void;
-} & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
+}) => JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 export { getFieldComponent, formFieldMap };

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

@@ -9,6 +9,7 @@ export declare type FilterType = {
     sortButtonShow: boolean;
     /** 筛选列表 */
     list: FilterItemProps[];
+    items?: string[];
     /** 快速筛选最大长度 */
     quickFilterMaxLength: number;
     /** 配置存储模式 */

package/lib/components/pisellCardList/index.js

@@ -62,7 +62,8 @@ var PisellCardList = (props) => {
     showValidDate,
     empty,
     showEmpty,
-    showBalanceSymbol
+    showBalanceSymbol,
+    onChangeDebounce
   } = props;
   return data.length ? /* @__PURE__ */ import_react.default.createElement(
     import_pisellCheckboxGroup.default,
@@ -76,6 +77,7 @@ var PisellCardList = (props) => {
       onChange,
       iconPosition: "hide",
       fullWidth,
+      onChangeDebounce,
       renderOption: (item, active, index) => {
         return /* @__PURE__ */ import_react.default.createElement(
           import_pisellWalletPassCard.default,

package/lib/components/pisellCheckboxGroup/index.d.ts

@@ -23,6 +23,7 @@ export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivEl
     iconPosition?: 'left' | 'right' | 'hide';
     optionClassName?: string;
     optionActiveClassName?: string;
+    onChangeDebounce?: boolean;
 }
 /**
  * @title: PisellCheckboxGroup

package/lib/components/pisellCheckboxGroup/index.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_usePisellConfig = __toESM(require("../pisell-config-provider/hooks/usePisellConfig"));
 var import_classnames = __toESM(require("classnames"));
 var import_antd = require("antd");
+var import_ahooks = require("ahooks");
 var import_utils = require("@pisell/utils");
 var import_utils2 = require("@pisell/utils");
 var import_index = require("./index.less");
@@ -62,6 +63,7 @@ var PisellCheckboxGroup = (props) => {
     iconPosition = "left",
     optionClassName,
     optionActiveClassName,
+    onChangeDebounce,
     ...rest
   } = props;
   const [_value, set_value] = (0, import_react2.useState)([]);
@@ -112,6 +114,16 @@ var PisellCheckboxGroup = (props) => {
   const _onChange = (val, item) => {
     onChange == null ? void 0 : onChange(mode === "single" ? val[0] : val, item);
   };
+  const { run } = (0, import_ahooks.useDebounceFn)(
+    (key, item) => {
+      handleSelectItem(key, item);
+    },
+    {
+      wait: 400,
+      leading: true,
+      trailing: false
+    }
+  );
   const handleSelectItem = (key, item) => {
     let newVal = [key];
     if (mode === "multiple") {
@@ -146,6 +158,10 @@ var PisellCheckboxGroup = (props) => {
           style: rowStyle,
           onClick: (e) => {
             if (option.disabled) return;
+            if (onChangeDebounce) {
+              run(option[rowKey], option);
+              return;
+            }
             handleSelectItem(option[rowKey], option);
           },
           leftContent: iconPosition === "left" && /* @__PURE__ */ import_react.default.createElement(

package/lib/components/productCard/cartSkuCard/components/swipeAction/index.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 import React from 'react';
+import './index.less';
 declare type NativeProps<S extends string = never> = {
     className?: string;
     style?: React.CSSProperties & Partial<Record<S, string>>;
 };
 declare type PropagationEvent = 'click';
-import './index.less';
 declare type SideType = 'left' | 'right';
 export declare type SwipeActionRef = {
     close: () => void;
@@ -17,6 +17,7 @@ export declare type Action = {
     text: ReactNode;
     color?: ActionColor | string;
     onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
 };
 export declare type SwipeActionProps = {
     rightActions?: Action[];

package/lib/components/productCard/cartSkuCard/components/swipeAction/index.js

@@ -110,17 +110,26 @@ var SwipeAction = (0, import_react.forwardRef)(
     const rootRef = (0, import_react.useRef)(null);
     const leftRef = (0, import_react.useRef)(null);
     const rightRef = (0, import_react.useRef)(null);
+    const [containerHeight, setContainerHeight] = (0, import_react.useState)(0);
     function getWidth(ref2) {
       const element = ref2.current;
       if (!element) return 0;
       return element.offsetWidth;
     }
+    function getHeight(ref2) {
+      const element = ref2.current;
+      if (!element) return 0;
+      return element.offsetHeight;
+    }
     function getLeftWidth() {
       return getWidth(leftRef);
     }
     function getRightWidth() {
       return getWidth(rightRef);
     }
+    function getRootHeight() {
+      return getHeight(rootRef);
+    }
     const [{ x }, api] = (0, import_web.useSpring)(
       () => ({
         x: 0,
@@ -213,6 +222,20 @@ var SwipeAction = (0, import_react.forwardRef)(
       },
       close
     }));
+    (0, import_react.useEffect)(() => {
+      const updateHeight = () => {
+        const height = getRootHeight();
+        setContainerHeight(height);
+      };
+      updateHeight();
+      const resizeObserver = new ResizeObserver(updateHeight);
+      if (rootRef.current) {
+        resizeObserver.observe(rootRef.current);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
     (0, import_react.useEffect)(() => {
       if (!props.closeOnTouchOutside) return;
       function handle(e) {
@@ -238,14 +261,32 @@ var SwipeAction = (0, import_react.forwardRef)(
         document.removeEventListener("mousedown", handle);
       };
     }, [props.closeOnTouchOutside, props.escapeDom]);
-    function renderAction(action) {
+    const getRightContainerClass = () => {
+      const baseClass = `${classPrefix}-actions ${classPrefix}-actions-right`;
+      if (containerHeight > 180) {
+        return `${baseClass} ${classPrefix}-height-large`;
+      } else if (containerHeight > 120) {
+        return `${baseClass} ${classPrefix}-height-medium`;
+      }
+      return `${baseClass} ${classPrefix}-height-small`;
+    };
+    const getRightActionButtonClass = () => {
+      if (containerHeight > 180) {
+        return `${classPrefix}-action-height-large`;
+      } else if (containerHeight > 120) {
+        return `${classPrefix}-action-height-medium`;
+      }
+      return `${classPrefix}-action-height-small`;
+    };
+    function renderAction(action, isRightAction = false) {
       const color = action.color ?? "light";
       const _style = action.style || {};
+      const buttonClass = isRightAction ? `${classPrefix}-action-button ${getRightActionButtonClass()}` : `${classPrefix}-action-button`;
       return /* @__PURE__ */ import_react.default.createElement(
         Button,
         {
           key: action.key,
-          className: `${classPrefix}-action-button`,
+          className: buttonClass,
           style: {
             "--background-color": colorRecord[color] ?? color,
             ..._style
@@ -285,7 +326,7 @@ var SwipeAction = (0, import_react.forwardRef)(
               className: `${classPrefix}-actions ${classPrefix}-actions-left`,
               ref: leftRef
             },
-            props.leftActions.map(renderAction)
+            props.leftActions.map((action) => renderAction(action, false))
           )
         ), /* @__PURE__ */ import_react.default.createElement(
           "div",
@@ -312,14 +353,7 @@ var SwipeAction = (0, import_react.forwardRef)(
           )
         ), withStopPropagation(
           props.stopPropagation,
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              className: `${classPrefix}-actions ${classPrefix}-actions-right`,
-              ref: rightRef
-            },
-            props.rightActions.map(renderAction)
-          )
+          /* @__PURE__ */ import_react.default.createElement("div", { className: getRightContainerClass(), ref: rightRef }, props.rightActions.map((action) => renderAction(action, true)))
         ))
       )
     );

package/lib/components/productCard/cartSkuCard/components/swipeAction/index.less

@@ -33,3 +33,42 @@
     padding-right: 4px;
   }
 }
+
+.pisell-custom-swipe-action-action-button {
+  min-width: 80px;
+}
+
+/* 容器样式 */
+.pisell-custom-swipe-action-height-large {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(67, 93, 147, 0.3);
+  justify-content: flex-start;
+
+  .pisell-number-selector-btn {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+.pisell-custom-swipe-action-height-medium {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(67, 93, 147, 0.3);
+
+  .pisell-number-selector-btn {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+
+/* 按钮样式 */
+.pisell-custom-swipe-action-action-height-large {
+  height: 60px;
+  width: 200px;
+}
+
+.pisell-custom-swipe-action-action-height-medium {
+  flex: 1;
+  width: 200px;
+}