@pisell/materials 3.3.82 → 3.3.83

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

@@ -0,0 +1,111 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Tabbar 数据源项类型
+ */
+export interface TabbarDataSource {
+    /** 唯一标识 */
+    id: string | number;
+    /** 店铺ID */
+    shop_id?: number;
+    /** 父级ID */
+    parent_id?: number;
+    /** 显示名称 */
+    name: string;
+    /** URL slug */
+    slug?: string;
+    /** 图标 URL 或图标名称 */
+    icon?: string;
+    /** 子级数据 */
+    children?: TabbarDataSource[];
+    /** 自定义点击事件标识 */
+    customClick?: boolean;
+    /** 唯一 key */
+    key?: string;
+}
+/**
+ * 层级配置
+ */
+export interface TabbarLevelConfig {
+    /** SuperTabs 背景色 */
+    superTabsBg: string;
+    /** 卡片宽度 */
+    cardWidth: number;
+    /** 卡片高度 */
+    cardHeight: number;
+    /** 左侧缩进 */
+    paddingLeft?: number;
+}
+/**
+ * 展开配置
+ */
+export interface ExpandConfig {
+    /** 激活状态配置 */
+    active: {
+        icon: string;
+        text: string;
+    };
+    /** 未激活状态配置 */
+    inactive: {
+        icon: string;
+        text: string;
+    };
+}
+/**
+ * 展开状态
+ */
+export interface ExpandState {
+    level1: boolean;
+    level2: boolean;
+    level3: boolean;
+}
+/**
+ * 层级类型
+ */
+export declare type LevelType = 'level1' | 'level2' | 'level3';
+/**
+ * TabbarLevel 组件属性
+ */
+export interface TabbarLevelProps {
+    /** SKU ID */
+    skuId: string;
+    /** 数据源 */
+    dataSource: TabbarDataSource[];
+    /** 当前激活的面板 key */
+    activePanelKey: string | number;
+    /** 层级 */
+    level: LevelType;
+    /** 设置激活面板 key */
+    setActivePanelKey: (key: string | number, item?: TabbarDataSource) => void;
+    /** 是否展开 */
+    expand: boolean;
+    /** 展开处理函数 */
+    handleExpand: () => void;
+    /** 渲染子级内容 */
+    renderChildren?: (panelProps: any) => ReactNode;
+    /** 层级配置 */
+    levelConfig?: TabbarLevelConfig;
+    /** 展开配置 */
+    expandConfig?: ExpandConfig;
+}
+/**
+ * PisellTabbar 组件属性
+ */
+export interface PisellTabbarProps {
+    /** 数据源 */
+    dataSource?: TabbarDataSource[];
+    /** 当前选中的值（多层级 key 数组） */
+    value?: (string | number)[];
+    /** 值变化回调 */
+    onChange?: (value: (string | number)[]) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 层级配置（可按层级自定义） */
+    levelConfig?: Partial<Record<LevelType, Partial<TabbarLevelConfig>>>;
+    /** 展开配置 */
+    expandConfig?: ExpandConfig;
+    /** 最大层级数 */
+    maxLevel?: 1 | 2 | 3;
+    __designMode?: boolean;
+}

package/es/components/PisellTabbar/utils/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * PisellTabbar 工具函数
+ */
+import { TabbarDataSource } from '../types';
+/**
+ * 默认的特殊项配置
+ */
+export declare const defaultItems: {
+    all: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: any;
+        slug: string;
+        icon: string;
+    };
+    search: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        key: string;
+        icon: string;
+        customClick: boolean;
+    };
+    expand: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        key: string;
+        icon: string;
+        name: string;
+        slug: string;
+        customClick: boolean;
+    };
+};
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ *
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ *
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export declare const addDataSourceItemsByKey: (dataSource: TabbarDataSource[], keys: ('all' | 'search' | 'expand')[]) => TabbarDataSource[];
+/**
+ * 获取默认激活的 key 数组
+ *
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ *
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ *
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export declare const getDefaultActiveKey: (dataSource: TabbarDataSource[], rowKey: string) => (string | number)[];

package/es/components/PisellTabbar2/locales.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    en: {
+        expand: string;
+        minimize: string;
+    };
+    "zh-CN": {
+        expand: string;
+        minimize: string;
+    };
+    "zh-HK": {
+        expand: string;
+        minimize: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    en: {
+        expand: string;
+        minimize: string;
+    };
+    "zh-CN": {
+        expand: string;
+        minimize: string;
+    };
+    "zh-HK": {
+        expand: string;
+        minimize: string;
+    };
+};
+export default _default;

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import './index.less';
-interface PisellStatisticProps {
+/**
+ * CardMetricItem 组件 Props
+ */
+export interface PisellStatisticProps {
     title: string;
     number: string | number;
     hint?: React.ReactNode;

package/es/components/cardMetricItem/index.js

@@ -5,6 +5,11 @@ import { formatAmountWithOptions } from '@pisell/utils';
 import { useResponsive } from "../../hooks";
 import usePisellConfig from "./../pisell-config-provider/hooks/usePisellConfig";
 import "./index.less";
+
+/**
+ * CardMetricItem 组件 Props
+ */
+
 var CardMetricItem = function CardMetricItem(props) {
   useEffect(function () {
     document.body.id = 'body';

package/es/components/dataSourceComponents/fields/Translation/BaseTranslation.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TranslationProps } from './type';
+import './index.less';
+declare const Translation: React.FC<TranslationProps>;
+export default Translation;

package/es/components/dataSourceComponents/fields/Translation/type.d.ts

@@ -0,0 +1,17 @@
+import { ModeType } from "../../dataSourceForm/type";
+export interface TranslationValue {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    original: string;
+}
+export interface TranslationProps {
+    renderMode: ModeType;
+    value?: TranslationValue;
+    onChange?: (value: TranslationValue) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    type?: 'text' | 'textarea';
+    maxLength?: number;
+}

package/es/components/page/index.js

@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import ConfigProvider from "../config-provider";
 import { AdapterDayjs } from '@pisell/date-picker/es/AdapterDayjs';
 import VariablesProvider from "../dataSourceComponents/provider/variables/VariablesProvider";
@@ -20,6 +20,7 @@ import zhTW from 'antd/es/locale/zh_TW';
 import zhHK from 'antd/es/locale/zh_HK';
 import PisellConfigProvider from "../pisell-config-provider";
 import useEngineContext from "../../hooks/useEngineContext";
+import { getThemeConfig } from "../../theme/tokens";
 var localMap = {
   'zh-TW': zhTW,
   'zh-CN': zhCN,
@@ -60,133 +61,15 @@ var Page = function Page(props) {
     if (props !== null && props !== void 0 && props.theme) {
       var _props$theme;
       return _objectSpread(_objectSpread({}, props.theme), {}, {
-        // cssVar: { key: 'app' },
         token: _objectSpread(_objectSpread({}, props.theme.token), {}, {
           // 外部透传主题时，如果没有传入colorPrimary 默认使用主项目内主题色
           colorPrimary: (props === null || props === void 0 || (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.token) === null || _props$theme === void 0 ? void 0 : _props$theme.colorPrimary) || themeColor || '#5D3F9F'
         })
       });
     }
-    return {
-      // cssVar: { key: 'app' },
-      components: {
-        Table: {
-          colorFillContent: '#EAECF0',
-          colorFillSecondary: '#F2F4F7',
-          colorBorderSecondary: '#EAECF0',
-          colorFillAlter: '#F9FAFB',
-          controlItemBgHover: '#F9FAFB',
-          colorTextHeading: '#475467',
-          colorTextDescription: '#667085',
-          colorText: '#101828',
-          controlHeight: 32,
-          padding: 24,
-          margin: 16
-        },
-        Message: {
-          contentBg: '#101828'
-        },
-        Button: {
-          borderRadiusSM: 6,
-          borderRadiusLG: 9,
-          borderRadius: 8,
-          controlHeight: 36,
-          colorBgContainerDisabled: '#F2F4F7',
-          colorBgTextHover: '#F9FAFB',
-          colorBorder: '#D0D5DD',
-          colorError: '#D92D20',
-          colorErrorActive: '#D92D20',
-          colorErrorHover: '#B42318',
-          colorErrorBg: '#FEF3F2',
-          colorErrorBorderHover: '#FDA29B',
-          colorErrorOutline: 'rgba(217, 45, 32, 0.06)',
-          colorLink: '#7F56DA',
-          colorLinkActive: '#5F3DA8',
-          colorLinkHover: '#6D48C4',
-          // colorPrimaryActive: '#5D3F9F',
-          // colorPrimaryBorder: '#E9D7FE',
-          colorText: '#344054',
-          colorTextDisabled: '#D0D5DD',
-          colorTextLightSolid: '#fff',
-          colorBgTextActive: '#D0D5DD',
-          controlOutline: 'rgba(127, 86, 217, 0.04)',
-          controlTmpOutline: '#F9FAFB',
-          paddingContentHorizontal: 14,
-          marginXS: 8
-        },
-        Divider: {
-          colorSplit: '#EAECF0'
-        },
-        Breadcrumb: {
-          itemColor: '#475467',
-          colorTextDescription: '#475467',
-          // lastItemColor: '#6941C6',
-          separatorMargin: 12,
-          separatorColor: '#D0D5DD',
-          linkHoverColor: '#1D2939',
-          linkColor: '#475467',
-          colorBgTextHover: '#F9FAFB',
-          paddingXXS: 8
-        },
-        Dropdown: {
-          borderRadiusLG: 8,
-          // "boxShadowPopoverArrow": "2px 2px 5px rgba(0, 0, 0, 0.05)",
-          controlHeight: 42,
-          fontSize: 14
-        },
-        DatePicker: {
-          borderRadius: 8,
-          colorTextPlaceholder: '#667085',
-          colorIcon: '#667085',
-          colorTextQuaternary: '#D0D5DD',
-          colorBgContainerDisabled: '#F9FAFB',
-          colorTextDisabled: '#98A2B3'
-        },
-        Input: {
-          fontSizeIcon: 16,
-          addonBg: '#fff'
-          // "lineHeight": 1
-        },
-        Select: {
-          fontSizeIcon: 16
-          // "lineHeight": 1
-        },
-        Menu: {
-          subMenuItemSelectedColor: "#9976e3"
-        }
-      },
-      token: {
-        colorPrimary: themeColor || '#5D3F9F',
-        colorPrimaryBg: '#eee5ff',
-        colorPrimaryBgHover: '#e4d9fc',
-        colorPrimaryBorder: '#d4c3f7',
-        colorSuccess: '#5f9e3f',
-        colorInfo: '#5d3f9f',
-        colorError: '#f5222d',
-        colorSuccessBg: '#e5fcd9',
-        colorSuccessBgHover: '#d5f7c3',
-        // 链接色
-        colorLink: '#7F56DA',
-        colorLinkActive: '#5F3DA8',
-        colorLinkHover: '#6D48C4',
-        colorText: '#101828',
-        colorTextSecondary: '#475467',
-        colorTextTertiary: '#667085',
-        colorTextQuaternary: '#D0D5DD',
-        colorBorder: '#D0D5DD',
-        colorBorderSecondary: '#EAECF0',
-        colorFill: '#D0D5DD',
-        colorFillSecondary: '#EAECF0',
-        colorFillTertiary: '#F2F4F7',
-        colorFillQuaternary: '#F9FAFB',
-        colorBgLayout: '#F2F4F7',
-        colorBgSpotlight: '#101828',
-        colorBgMask: 'rgba(0, 0, 0, 0.5)',
-        wireframe: false,
-        borderRadius: 8
-      }
-    };
-  }, [platform, themeColor, props === null || props === void 0 ? void 0 : props.theme]);
+    // 使用统一的 token 配置
+    return getThemeConfig(themeColor);
+  }, [themeColor, props === null || props === void 0 ? void 0 : props.theme]);
   var datePickerTheme = useMemo(function () {
     var _theme$token;
     return createTheme({
@@ -197,6 +80,11 @@ var Page = function Page(props) {
       }
     });
   }, [platform, themeColor]);
+  useEffect(function () {
+    // body追加id来处理antd 5 取消:where 时css权重问题
+    // 物料中css使用post-css追加 #body 前缀
+    document.body.id = 'body';
+  }, []);
   return /*#__PURE__*/React.createElement(ConfigProvider, _extends({}, others, {
     locale: localMap[locale],
     prefixCls: props.prefixCls || 'pisell-lowcode',

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

@@ -0,0 +1,6 @@
+/**
+ * PisellBatchActionBar 组件导出
+ * @description 批量操作栏组件，用于承载基于选中对象的批量行为操作
+ */
+export { default } from './PisellBatchActionBar';
+export type { PisellBatchActionBarProps, BatchActionItem, DefaultActionsConfig, BatchActionConfirmConfig, BatchActionBarPosition, } from './types';

package/es/components/pisellCurrency/PisellCurrency.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellCurrencyProps } from './types';
+import './PisellCurrency.less';
+/**
+ * PisellCurrency 货币组件
+ *
+ * 基于 PisellNumber 派生，专门处理货币数据。
+ * 默认启用千分位和2位小数，符合财务规范。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 受控模式
+ * const [price, setPrice] = useState(0);
+ * <PisellCurrency
+ *   value={price}
+ *   onChange={setPrice}
+ *   currencySymbol="¥"
+ * />
+ *
+ * @example
+ * // 非受控模式
+ * <PisellCurrency
+ *   defaultValue={100}
+ *   currencySymbol="$"
+ * />
+ *
+ * @example
+ * // 只读态
+ * <PisellCurrency
+ *   mode="read"
+ *   value={1234.56}
+ *   currencySymbol="¥"
+ * />
+ * // 显示: ¥1,234.56
+ */
+export declare const PisellCurrency: React.FC<PisellCurrencyProps>;
+declare const MemoizedPisellCurrency: React.NamedExoticComponent<PisellCurrencyProps>;
+export default MemoizedPisellCurrency;

package/es/components/pisellCurrency/PisellCurrency.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import "./PisellCurrency.less";
+
+/**
+ * PisellCurrency 货币组件
+ * 
+ * 基于 PisellNumber 派生，专门处理货币数据。
+ * 默认启用千分位和2位小数，符合财务规范。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 受控模式
+ * const [price, setPrice] = useState(0);
+ * <PisellCurrency 
+ *   value={price}
+ *   onChange={setPrice}
+ *   currencySymbol="¥"
+ * />
+ * 
+ * @example
+ * // 非受控模式
+ * <PisellCurrency 
+ *   defaultValue={100}
+ *   currencySymbol="$"
+ * />
+ * 
+ * @example
+ * // 只读态
+ * <PisellCurrency 
+ *   mode="read"
+ *   value={1234.56}
+ *   currencySymbol="¥"
+ * />
+ * // 显示: ¥1,234.56
+ */
+export var PisellCurrency = function PisellCurrency(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化：使用 memo 避免不必要的重渲染
+var MemoizedPisellCurrency = /*#__PURE__*/React.memo(PisellCurrency, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.currencySymbol === nextProps.currencySymbol && prevProps.symbolPosition === nextProps.symbolPosition;
+});
+export default MemoizedPisellCurrency;

package/es/components/pisellCurrency/PisellCurrency.less

@@ -0,0 +1,43 @@
+// PisellCurrency 组件样式
+
+.pisell-currency {
+  // 基础样式
+  display: inline-block;
+
+  // 只读态样式
+  &-read {
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5715;
+    
+    // 货币数值可以加粗显示（可选）
+    font-weight: 500;
+  }
+
+  // 编辑态样式
+  &-edit {
+    position: relative;
+
+    // 错误提示
+    .pisell-currency-error {
+      margin-top: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+  }
+
+  // 禁用态样式
+  &-disabled {
+    // 继承 Ant Design InputNumber 的禁用样式
+  }
+  
+  // 负数显示为红色（可选）
+  &.negative {
+    color: #ff4d4f;
+  }
+  
+  // 正数显示为绿色（可选，用于收益场景）
+  &.positive {
+    color: #52c41a;
+  }
+}

package/es/components/pisellCurrency/PisellCurrency.stories.d.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellCurrency } from './PisellCurrency';
+/**
+ * PisellCurrency 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellCurrency>;
+export default meta;
+declare type Story = StoryObj<typeof PisellCurrency>;
+/**
+ * 基础示例 - 人民币
+ */
+export declare const Basic: Story;
+/**
+ * 不同货币
+ */
+export declare const DifferentCurrencies: Story;
+/**
+ * 只读态展示
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 不显示货币符号
+ */
+export declare const WithoutSymbol: Story;
+/**
+ * 禁止负数（商品价格）
+ */
+export declare const NoNegative: Story;
+/**
+ * 允许负数（退款金额）
+ */
+export declare const AllowNegative: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 表格场景
+ */
+export declare const InTable: Story;
+/**
+ * 不同精度
+ */
+export declare const DifferentPrecision: Story;
+/**
+ * 只读态样式
+ */
+export declare const ReadOnlyStyles: Story;
+/**
+ * 空值处理
+ */
+export declare const EmptyValue: Story;