@pisell/materials 1.8.11 → 1.8.13

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

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+export interface PisellAppCardProps {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 头像地址 */
+    avatar?: string;
+    /** icon */
+    icon?: string;
+    /** 标签列表 */
+    tags?: Array<{
+        label: string;
+        color?: 'success' | 'warning' | 'error' | 'gray';
+        type: 'pill_color' | 'pill_outline';
+    }>;
+    /** 标题 */
+    title: string;
+    /** 描述 */
+    description?: string;
+    /** 底部按钮列表 */
+    bottomButtons?: Array<{
+        label: string;
+        onClick?: () => void;
+        type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+        hidden: boolean;
+    }>;
+    /** 右侧更多操作列表 */
+    moreActions?: Array<{
+        label: string;
+        onClick?: () => void;
+        icon?: React.ReactNode;
+    }>;
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { AvatarProps } from 'antd';
+import './index.less';
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface PisellAvatarProps extends Omit<AvatarProps, 'size' | 'shape'> {
+    shape?: 'circle' | 'square';
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    useTextAvatar?: boolean;
+    borderRadius?: number;
+    onError?: () => boolean;
+}
+declare const PisellAvatar: React.FC<PisellAvatarProps>;
+export default PisellAvatar;

package/lib/components/pisellBatchActionBar/PisellBatchActionBar.js

@@ -37,8 +37,15 @@ var import_classnames = __toESM(require("classnames"));
 var import_antd = require("antd");
 var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
 var import_GraphicTextCard = __toESM(require("../PisellCards/components/GraphicTextCard"));
+var import_utils = require("@pisell/utils");
 var import_locales = require("../../locales");
 var import_PisellBatchActionBar = require("./PisellBatchActionBar.less");
+function getBatchBarText(key) {
+  const fullKey = `pisell2.salesManagement.batchActionBar.${key}`;
+  const fromUtils = import_utils.locales.getText(fullKey);
+  if (fromUtils !== fullKey) return fromUtils;
+  return (0, import_locales.getText)(fullKey) ?? (0, import_locales.getText)(`batch-action-bar-${key}`);
+}
 var PisellBatchActionBar = (props) => {
   const {
     className,
@@ -57,7 +64,7 @@ var PisellBatchActionBar = (props) => {
     actionOrder,
     enableOverflow = true,
     overflowThreshold = 5,
-    moreText = (0, import_locales.getText)("batch-action-bar-more"),
+    moreText = getBatchBarText("more"),
     onSelectAll,
     onClear,
     onInvert,
@@ -130,7 +137,7 @@ var PisellBatchActionBar = (props) => {
     if (selectedCountText) {
       return selectedCountText.replace("{count}", String(count));
     }
-    const i18nText = (0, import_locales.getText)("batch-action-bar-selected-count");
+    const i18nText = getBatchBarText("selectedCount");
     if (typeof i18nText === "function") {
       return i18nText(count);
     }
@@ -147,7 +154,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "select-all",
-            text: (0, import_locales.getText)("batch-action-bar-select-all"),
+            text: getBatchBarText("selectAll"),
             icon: "pisell2-check-square",
             variant: "horizontal",
             size: "small",
@@ -182,7 +189,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "invert",
-            text: (0, import_locales.getText)("batch-action-bar-invert"),
+            text: getBatchBarText("invert"),
             icon: "pisell2-check-done-01",
             variant: "horizontal",
             size: "small",
@@ -217,7 +224,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "clear",
-            text: (0, import_locales.getText)("batch-action-bar-clear"),
+            text: getBatchBarText("clear"),
             icon: "pisell2-square",
             variant: "horizontal",
             size: "small",
@@ -252,7 +259,7 @@ var PisellBatchActionBar = (props) => {
           import_GraphicTextCard.default,
           {
             key: "delete",
-            text: (0, import_locales.getText)("batch-action-bar-delete"),
+            text: getBatchBarText("delete"),
             icon: "pisell2-delete_wght300_24px",
             variant: "horizontal",
             size: "small",
@@ -279,18 +286,13 @@ var PisellBatchActionBar = (props) => {
                 return;
               }
               isDeleteModalOpenRef.current = true;
-              const deleteContent = (() => {
-                const i18nContent = (0, import_locales.getText)("batch-action-bar-delete-confirm-content");
-                if (typeof i18nContent === "function") {
-                  return i18nContent(selectionState.selectedCount);
-                }
-                return i18nContent || `确定要删除选中的 ${selectionState.selectedCount} 项吗？`;
-              })();
+              const i18nContent = getBatchBarText("deleteConfirmContent");
+              const deleteContent = typeof i18nContent === "function" ? i18nContent(selectionState.selectedCount) : i18nContent || `确定要删除选中的 ${selectionState.selectedCount} 项吗？`;
               import_antd.Modal.confirm({
-                title: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.title) || (0, import_locales.getText)("batch-action-bar-delete-confirm-title"),
-                content: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.description) || deleteContent,
-                okText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.okText) || (0, import_locales.getText)("batch-action-bar-delete-confirm-ok"),
-                cancelText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.cancelText) || (0, import_locales.getText)("batch-action-bar-delete-confirm-cancel"),
+                title: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.title) ?? getBatchBarText("deleteConfirmTitle"),
+                content: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.description) ?? deleteContent,
+                okText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.okText) ?? getBatchBarText("deleteConfirmOk"),
+                cancelText: (deleteConfirmConfig == null ? void 0 : deleteConfirmConfig.cancelText) ?? getBatchBarText("deleteConfirmCancel"),
                 okButtonProps: { danger: true },
                 onOk: () => {
                   onDelete == null ? void 0 : onDelete(selectedKeys, selectedRows);
@@ -380,7 +382,6 @@ var PisellBatchActionBar = (props) => {
             height: "48px",
             ...action.style
           },
-          className: action.className,
           onClick: () => handleActionClick(action)
         }
       );
@@ -390,10 +391,10 @@ var PisellBatchActionBar = (props) => {
           import_antd.Popconfirm,
           {
             key: action.key,
-            title: confirmConfig.title || (0, import_locales.getText)("batch-action-bar-confirm-title"),
+            title: confirmConfig.title || getBatchBarText("confirmTitle"),
             description: confirmConfig.description,
-            okText: confirmConfig.okText || (0, import_locales.getText)("batch-action-bar-delete-confirm-ok"),
-            cancelText: confirmConfig.cancelText || (0, import_locales.getText)("batch-action-bar-delete-confirm-cancel"),
+            okText: confirmConfig.okText || getBatchBarText("deleteConfirmOk"),
+            cancelText: confirmConfig.cancelText || getBatchBarText("deleteConfirmCancel"),
             onConfirm: () => handleActionClick(action)
           },
           card
@@ -430,9 +431,11 @@ var PisellBatchActionBar = (props) => {
     const modifiedOverflowActions = overflowActions.map((action) => {
       var _a;
       if (import_react.default.isValidElement(action)) {
-        return import_react.default.cloneElement(action, {
+        const el = action;
+        const prevStyle = (_a = el.props) == null ? void 0 : _a.style;
+        return import_react.default.cloneElement(el, {
           style: {
-            ...((_a = action.props) == null ? void 0 : _a.style) || {},
+            ...prevStyle || {},
             minWidth: "160px",
             width: "160px"
           }

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

@@ -0,0 +1,237 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 布局模式
+ */
+export declare type BatchActionBarPosition = 'sticky-top' | 'sticky-bottom' | 'float' | 'inline';
+/**
+ * 确认弹窗配置
+ */
+export interface BatchActionConfirmConfig {
+    /**
+     * 弹窗标题
+     */
+    title?: string;
+    /**
+     * 弹窗描述内容
+     */
+    description?: string;
+    /**
+     * 确认按钮文案
+     */
+    okText?: string;
+    /**
+     * 取消按钮文案
+     */
+    cancelText?: string;
+}
+/**
+ * 默认操作按钮配置
+ * @description 固定四个基础操作按钮：全选、反选、取消选择、删除
+ */
+export interface DefaultActionsConfig {
+    /**
+     * 是否显示默认操作按钮（全选、反选、取消选择、删除）
+     * @default true
+     */
+    showDefaultActions?: boolean;
+    /**
+     * 是否显示全选按钮
+     * @default true
+     */
+    showSelectAll?: boolean;
+    /**
+     * 是否显示反选按钮
+     * @default true
+     */
+    showInvert?: boolean;
+    /**
+     * 是否显示取消选择按钮
+     * @default true
+     */
+    showClear?: boolean;
+    /**
+     * 是否显示删除按钮
+     * @default true
+     */
+    showDelete?: boolean;
+}
+/**
+ * 自定义操作按钮配置
+ */
+export interface BatchActionItem {
+    /**
+     * 操作唯一标识
+     */
+    key: string;
+    /**
+     * 按钮文案
+     */
+    label: ReactNode;
+    /**
+     * 按钮图标
+     */
+    icon?: ReactNode;
+    /**
+     * 按钮尺寸
+     * @description 对应 GraphicTextCard 的 size 属性
+     * @default 'small'
+     */
+    size?: 'small' | 'default' | 'large';
+    /**
+     * 是否禁用
+     * @description 支持函数形式，基于 selection 动态判断
+     */
+    disabled?: boolean | ((selectedKeys: React.Key[], selectedRows?: any[]) => boolean);
+    /**
+     * 是否显示
+     * @description 支持函数形式，基于 selection 动态判断
+     * @default true
+     */
+    visible?: boolean | ((selectedKeys: React.Key[], selectedRows?: any[]) => boolean);
+    /**
+     * 是否显示 loading 状态
+     */
+    loading?: boolean;
+    /**
+     * 是否需要确认弹窗
+     * @default false
+     */
+    confirm?: boolean | BatchActionConfirmConfig;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 按钮组标识
+     * @description 相同 group 的按钮会分组展示
+     */
+    group?: string;
+    /**
+     * 按钮点击回调
+     * @description 如果配置了此回调，会优先使用此回调，否则使用组件级别的 onActionClick
+     */
+    onClick?: (selectedKeys: React.Key[], selectedRows?: any[]) => void | Promise<void>;
+}
+/**
+ * PisellBatchActionBar 组件 Props
+ * @description 批量操作栏组件，用于承载基于选中对象的批量行为操作
+ */
+export interface PisellBatchActionBarProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 选中的 key 数组
+     * @description 必填，用于感知选择状态
+     */
+    selectedKeys: React.Key[];
+    /**
+     * 选中的行数据数组
+     * @description 可选，用于传递给操作回调
+     */
+    selectedRows?: any[];
+    /**
+     * 总数据量
+     * @description 用于判断全选状态
+     */
+    total?: number;
+    /**
+     * 当前页数据量
+     * @description 用于判断全选当前页状态
+     */
+    currentPageTotal?: number;
+    /**
+     * 当前页数据 key 数组
+     * @description 用于判断全选当前页状态
+     */
+    currentPageKeys?: React.Key[];
+    /**
+     * 布局模式
+     * @default 'float'
+     */
+    position?: BatchActionBarPosition;
+    /**
+     * 吸顶/吸底时的偏移量
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * 是否显示选中数量提示
+     * @default true
+     */
+    showSelectedCount?: boolean;
+    /**
+     * 选中数量提示文案
+     * @description 支持字符串模板（使用 {count} 占位符）或函数形式，默认使用国际化文本
+     * @default getText('batch-action-bar-selected-count', count)
+     */
+    selectedCountText?: string | ((count: number) => string);
+    /**
+     * 默认操作按钮配置
+     * @description 只包含前三个基础选择操作按钮，其他操作按钮通过 actions 传入
+     */
+    defaultActions?: DefaultActionsConfig;
+    /**
+     * 自定义操作按钮配置
+     */
+    actions?: BatchActionItem[];
+    /**
+     * 操作按钮排序
+     * @description 通过 key 数组控制按钮顺序
+     */
+    actionOrder?: string[];
+    /**
+     * 是否启用溢出折叠
+     * @default true
+     */
+    enableOverflow?: boolean;
+    /**
+     * 溢出折叠阈值（按钮数量）
+     * @default 5
+     */
+    overflowThreshold?: number;
+    /**
+     * "更多"按钮文案
+     * @description 默认使用国际化文本
+     * @default getText('batch-action-bar-more')
+     */
+    moreText?: string;
+    /**
+     * 全选回调
+     */
+    onSelectAll?: () => void;
+    /**
+     * 反选回调
+     * @description 反选操作，将当前选中的变为未选中，未选中的变为选中
+     */
+    onInvert?: () => void;
+    /**
+     * 清空选择回调
+     */
+    onClear?: () => void;
+    /**
+     * 删除回调
+     * @description 删除选中项，点击后会先弹出确认弹窗
+     */
+    onDelete?: (selectedKeys: React.Key[], selectedRows?: any[]) => void;
+    /**
+     * 删除确认弹窗配置
+     * @description 自定义删除确认弹窗的标题和内容
+     */
+    deleteConfirmConfig?: BatchActionConfirmConfig;
+    /**
+     * 自定义操作按钮点击回调
+     * @description 当 actions 中的按钮被点击时触发，通过 action.key 区分不同的操作
+     * @description 如果 action 中配置了 onClick，则优先使用 action.onClick
+     */
+    onActionClick?: (key: string, selectedKeys: React.Key[], selectedRows?: any[]) => void | Promise<void>;
+}

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

@@ -0,0 +1,19 @@
+import { CardProps } from 'antd';
+import './index.less';
+export interface PisellCardProps extends CardProps {
+    bordered?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+    padding?: number;
+    borderRadius?: number;
+    disabled?: boolean;
+    onClick?: () => void;
+    isClickable?: boolean;
+}
+/**
+ * Pisell 卡片容器组件
+ * @param props
+ * @constructor
+ */
+declare const PisellCard: (props: PisellCardProps) => JSX.Element;
+export default PisellCard;

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

@@ -36,5 +36,5 @@ export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivEl
  * @Author: zhiwei.Wang
  * @Date: 2024-08-16 10:34
  */
-declare const PisellCheckboxGroup: (props: PisellCheckboxGroupProps) => React.JSX.Element;
+declare const PisellCheckboxGroup: (props: PisellCheckboxGroupProps) => JSX.Element;
 export default PisellCheckboxGroup;

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

@@ -0,0 +1,4 @@
+export declare const mockList: {
+    label: string;
+    value: string;
+}[];

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

@@ -20,5 +20,5 @@ export declare type PisellCountdownProps = React.HTMLAttributes<HTMLSpanElement>
     /** 格式化倒计时展示 参考 dayjs */
     format?: string;
 };
-declare const PisellCountdown: (props: PisellCountdownProps) => React.JSX.Element;
+declare const PisellCountdown: (props: PisellCountdownProps) => JSX.Element;
 export default PisellCountdown;

package/lib/components/pisellCountdown/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 格式化时间字符串函数
+ * 该函数将给定的持续时间（以秒为单位）格式化为指定格式的时间字符串
+ * @param duration - 持续时间，单位为秒。
+ * @param format - 时间格式字符串，其中包含要显示的时间单位及其格式。例如："[HH] hours, [mm] minutes, [ss] seconds"。
+ */
+export declare function formatTimeStr(duration: number, format: string): string;

package/lib/components/pisellCurrency/PisellCurrency.less

@@ -1,43 +1,181 @@
-// PisellCurrency 组件样式
+/**
+ * PisellCurrency 组件样式
+ * 基于 Figma 设计规范，与 PisellNumber / SingleLineText 设计体系一致，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-currency {
-  // 基础样式
   display: inline-block;
+  width: 100%;
 
-  // 只读态样式
-  &-read {
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 1.5715;
-    
-    // 货币数值可以加粗显示（可选）
-    font-weight: 500;
-  }
-
-  // 编辑态样式
   &-edit {
     position: relative;
+    width: 100%;
+
+    // InputNumber 外层（Figma 设计规范，无边框避免双边框）
+    .pisell-lowcode-input-number {
+      width: 100% !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: none !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      // 内层 input
+      .pisell-lowcode-input-number-input {
+        height: 46px !important; // 48 - 2px border
+        padding: 12px 16px !important;
+        font-size: 16px !important;
+        line-height: 24px !important;
+        color: #101828 !important;
+        background: transparent !important;
+        border: none !important;
+
+        &::placeholder {
+          color: #667085 !important; // Gray/500
+        }
+      }
+
+      // 聚焦态
+      &.pisell-lowcode-input-number-focused,
+      &:focus,
+      &:focus-within {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+        outline: none !important;
+      }
+
+      // Hover 态
+      &:hover:not(.pisell-lowcode-input-number-disabled):not(.pisell-lowcode-input-number-focused) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      // 禁用态
+      &.pisell-lowcode-input-number-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+
+        .pisell-lowcode-input-number-input {
+          color: #98a2b3 !important; // Gray/400
+          cursor: not-allowed !important;
+        }
+      }
+
+      // 货币符号：前缀
+      .pisell-lowcode-input-number-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+
+      // 货币符号：后置（addonAfter）
+      .pisell-lowcode-input-number-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085;
+        font-size: 16px;
+      }
+
+      // addonBefore / addonAfter 包裹（InputNumber 后置符号可能用 addon 渲染）
+      .pisell-lowcode-input-number-group-addon {
+        background-color: #ffffff !important;
+        border: 1px solid #d0d5dd !important;
+        color: #344054; // Gray/700
+        font-size: 16px !important;
+        padding: 12px 16px !important;
+
+        &:first-child {
+          border-right: none !important;
+          border-radius: 8px 0 0 8px !important;
+        }
+
+        &:last-child {
+          border-left: none !important;
+          border-radius: 0 8px 8px 0 !important;
+        }
+      }
+
+      // 步进器按钮（controls）
+      .pisell-lowcode-input-number-handler-wrap {
+        border-left: 1px solid #d0d5dd !important;
+        background: #ffffff !important;
 
-    // 错误提示
-    .pisell-currency-error {
-      margin-top: 4px;
-      color: #ff4d4f;
-      font-size: 14px;
-      line-height: 1.5;
+        .pisell-lowcode-input-number-handler {
+          color: #667085;
+          border-color: #d0d5dd;
+
+          &:hover {
+            color: #344054;
+          }
+
+          &.pisell-lowcode-input-number-handler-up-disabled,
+          &.pisell-lowcode-input-number-handler-down-disabled {
+            color: #98a2b3;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      // 错误状态
+      &.pisell-lowcode-input-number-status-error {
+        border-color: #fda29b !important; // Error/300
+
+        &.pisell-lowcode-input-number-focused,
+        &:focus-within {
+          border-color: #f97066 !important; // Error/400
+          box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+        }
+
+        &:hover:not(:focus-within) {
+          border-color: #f97066 !important;
+        }
+      }
     }
   }
 
-  // 禁用态样式
+  // 错误提示（与设计体系一致）
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-currency-fadeIn 0.3s ease-in-out;
+  }
+
+  // 只读态（Figma: Gray/900, 16px, Medium, line-height 24px）
+  &-read {
+    color: #101828; // Gray/900
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
+
   &-disabled {
-    // 继承 Ant Design InputNumber 的禁用样式
+    opacity: 0.4;
+    cursor: not-allowed;
   }
-  
-  // 负数显示为红色（可选）
+
+  // 负数显示（与设计体系 Error 色一致）
   &.negative {
-    color: #ff4d4f;
+    color: #d92d20; // Error/600
   }
-  
-  // 正数显示为绿色（可选，用于收益场景）
+
+  // 正数高亮（收益等场景）
   &.positive {
     color: #52c41a;
   }
 }
+
+@keyframes pisell-currency-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellCurrency/PisellCurrency.stories.js

@@ -38,7 +38,7 @@ var import_PisellCurrency = require("./PisellCurrency");
 var import_react = require("react");
 var import_antd = require("antd");
 var meta = {
-  title: "Components/PisellCurrency",
+  title: "表单/表单组件/PisellCurrency",
   component: import_PisellCurrency.PisellCurrency,
   tags: ["autodocs"],
   argTypes: {