@pisell/materials 3.3.84 → 3.3.86

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PaginationProps } from 'antd';
+import './index.less';
+declare const Pagination: (props: PaginationProps) => React.JSX.Element | null;
+export declare const paginationConfig: {
+    className: string;
+    defaultCurrent: number;
+    showTotal: (total: number, range: [number, number]) => string;
+    responsive: boolean;
+    size: string;
+};
+export default Pagination;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => React.JSX.Element;

package/es/components/Pagination/index.js

@@ -8,74 +8,89 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
 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); }
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from 'react';
 // import { ArrowLeft, ArrowRight } from "@pisell/icon/es";
-import ArrowRight from "@pisell/icon/es/ArrowRight";
-import ArrowLeft from "@pisell/icon/es/ArrowLeft";
-import { Pagination as OriginPagination } from "antd";
-import classNames from "classnames";
+import ArrowRight from '@pisell/icon/es/ArrowRight';
+import ArrowLeft from '@pisell/icon/es/ArrowLeft';
+import { Pagination as OriginPagination } from 'antd';
+import classNames from 'classnames';
 import "./index.less";
+import { locales as utilsLocales } from '@pisell/utils';
 import { getText } from "../../locales";
 import useIsMobileTable from "../table/hooks/useIsMobileTable";
-
-/**
- * @title: 自定义渲染
- * @description:
- * @return {*}
- * @Author: zhiwei.Wang
- * @Date: 2023-07-20 17:01
- */
-var itemRender = function itemRender(_, type, originalElement) {
-  if (type === "prev") {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames("paginator-page-btn", "left")
-    }, /*#__PURE__*/React.createElement(ArrowLeft, {
-      className: "paginator-page-btn-left-icon"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "paginator-page-btn-text"
-    }, getText("table-pagination-previous")));
-  }
-  if (type === "next") {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames("paginator-page-btn", "right")
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "paginator-page-btn-text"
-    }, getText("table-pagination-next")), /*#__PURE__*/React.createElement(ArrowRight, {
-      className: "paginator-page-btn-right-icon"
-    }));
-  }
-  return originalElement;
-};
-
-// 分页配置
-export var paginationConfig = {
-  className: "materials-grid-paginator",
-  defaultCurrent: 1,
-  showTotal: function showTotal(total, range) {
-    return "Page ".concat(range[0], " of ").concat(range[1]);
-  },
-  itemRender: itemRender,
-  responsive: true,
-  size: "small"
-};
+/** 优先 utils；若 utils 返回 key（未命中）则用 materials RecordBoard 再回退 table-pagination-* */
+function getPaginationText(key) {
+  var _getText;
+  var fullKey = "pisell2.salesManagement.pagination.".concat(key);
+  var fromUtils = utilsLocales.getText(fullKey);
+  if (fromUtils !== fullKey) return fromUtils;
+  return (_getText = getText(fullKey)) !== null && _getText !== void 0 ? _getText : getText("table-pagination-".concat(key));
+}
 var Pagination = function Pagination(props) {
   var show = useMemo(function () {
     return Object.keys(props).length;
   }, [props]);
   var isMiniPagination = useIsMobileTable();
+  var effectiveConfig = useMemo(function () {
+    var prevText = getPaginationText('previous');
+    var nextText = getPaginationText('next');
+    var showTotalFn = getPaginationText('showTotal');
+    var itemRenderFn = function itemRenderFn(_, type, originalElement) {
+      if (type === 'prev') {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classNames('paginator-page-btn', 'left')
+        }, /*#__PURE__*/React.createElement(ArrowLeft, {
+          className: 'paginator-page-btn-left-icon'
+        }), /*#__PURE__*/React.createElement("span", {
+          className: 'paginator-page-btn-text'
+        }, prevText));
+      }
+      if (type === 'next') {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classNames('paginator-page-btn', 'right')
+        }, /*#__PURE__*/React.createElement("span", {
+          className: 'paginator-page-btn-text'
+        }, nextText), /*#__PURE__*/React.createElement(ArrowRight, {
+          className: 'paginator-page-btn-right-icon'
+        }));
+      }
+      return originalElement;
+    };
+    var showTotal = typeof showTotalFn === 'function' ? function (total, range) {
+      return showTotalFn(range[0], range[1]);
+    } : function (total, range) {
+      return "Page ".concat(range[0], " of ").concat(range[1]);
+    };
+    return {
+      className: 'materials-grid-paginator',
+      defaultCurrent: 1,
+      showTotal: showTotal,
+      itemRender: itemRenderFn,
+      responsive: true,
+      size: 'small'
+    };
+  }, []);
   var content = useMemo(function () {
     if (!show) {
       return null;
     }
     var Com = OriginPagination;
-    // 移动端使用简单分页
     if (isMiniPagination) {
       Com = MiniPagination;
     }
-    return /*#__PURE__*/React.createElement(Com, _extends({}, paginationConfig, props));
-  }, [show, paginationConfig, props, isMiniPagination]);
+    return /*#__PURE__*/React.createElement(Com, _extends({}, effectiveConfig, props));
+  }, [show, effectiveConfig, props, isMiniPagination]);
   return content;
 };
+export var paginationConfig = {
+  className: 'materials-grid-paginator',
+  defaultCurrent: 1,
+  showTotal: function showTotal(total, range) {
+    return "Page ".concat(range[0], " of ").concat(range[1]);
+  },
+  responsive: true,
+  size: 'small'
+};
 export default Pagination;
 var MiniPagination = function MiniPagination(props) {
   var _props$current = props.current,
@@ -105,44 +120,47 @@ var MiniPagination = function MiniPagination(props) {
    */
   var onChange = function onChange(type) {
     var currentPage = current;
-    if (type === "prev") {
+    if (type === 'prev') {
       currentPage = current - 1;
     }
-    if (type === "next") {
+    if (type === 'next') {
       currentPage = current + 1;
     }
     props.onChange && props.onChange(currentPage, pageSize || 10);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "materials-grid-paginator materials-grid-paginator-mini"
+    className: "materials-grid-paginator"
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-lowcode-pagination-prev",
     onClick: function onClick() {
       if (current <= MIN) {
         return;
       }
-      onChange("prev");
+      onChange('prev');
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("paginator-page-btn", "left")
+    className: classNames('paginator-page-btn', 'left')
   }, /*#__PURE__*/React.createElement(ArrowLeft, {
-    className: "paginator-page-btn-left-icon"
+    className: 'paginator-page-btn-left-icon'
   }))), /*#__PURE__*/React.createElement("div", {
     className: "materials-grid-paginator-center"
   }, /*#__PURE__*/React.createElement("span", {
     className: "materials-grid-paginator-center-text"
-  }, getText("table-pagination-total")(current, MAX))), /*#__PURE__*/React.createElement("div", {
+  }, function () {
+    var totalFn = getPaginationText('total');
+    return typeof totalFn === 'function' ? totalFn(current, MAX) : "".concat(current, " / ").concat(MAX);
+  }())), /*#__PURE__*/React.createElement("div", {
     className: "pisell-lowcode-pagination-next",
     onClick: function onClick() {
       if (current >= MAX) {
         return;
       }
-      onChange("next");
+      onChange('next');
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("paginator-page-btn", "right")
+    className: classNames('paginator-page-btn', 'right')
   }, /*#__PURE__*/React.createElement(ArrowRight, {
-    className: "paginator-page-btn-right-icon"
+    className: 'paginator-page-btn-right-icon'
   }))));
 };
 export var FormPagination = function FormPagination(_ref) {

package/es/components/Pagination/index.less

@@ -24,7 +24,6 @@
 
   .pisell-lowcode-pagination-item {
     position: relative;
-    border: none;
     margin: 0;
     border-radius: 0;
     border: 1px solid #D0D5DD;
@@ -36,6 +35,7 @@
     margin: 0;
     border-radius: 0;
     border-right: none;
+    height: 100%;
   }
 
   .pisell-lowcode-pagination-jump-next {
@@ -45,22 +45,28 @@
     border-right: none;
   }
 
-  .pisell-lowcode-pagination-item-link:hover {
-    font-weight: 450 !important;
-    color: rgba(0, 0, 0, 0.88) !important;
+  .pisell-lowcode-pagination-item-link {
+    width: 100%;
 
-    .pisell-lowcode-pagination-item-link-icon {
+    &:hover {
       font-weight: 450 !important;
       color: rgba(0, 0, 0, 0.88) !important;
+
+      .pisell-lowcode-pagination-item-link-icon {
+        font-weight: 450 !important;
+        color: rgba(0, 0, 0, 0.88) !important;
+      }
     }
   }
 
+
   .pisell-lowcode-pagination-disabled {
     cursor: not-allowed;
-    color: rgba(0,0,0,.25);
+    color: rgba(0, 0, 0, .25);
+
     .paginator-page-btn {
       cursor: not-allowed;
-      color: rgba(0,0,0,.25);
+      color: rgba(0, 0, 0, .25);
     }
   }
 

package/es/components/PisellCards/components/GraphicTextCard/GraphicTextCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { GraphicTextCardProps } from './types';
+import './GraphicTextCard.less';
+/**
+ * Provider 包装器
+ * 兼容 PisellCards 系统的 props 传递方式
+ */
+declare const Provider: (props: GraphicTextCardProps) => React.JSX.Element;
+export default Provider;

package/es/components/PisellCards/components/GraphicTextCard/components/BadgeWrapper.d.ts

@@ -0,0 +1,5 @@
+/**
+ * BadgeWrapper 角标包装组件
+ * 复用 TextCard 的 BadgeWrapper 实现
+ */
+export { default } from '../../TextCard/components/BadgeWrapper';

package/es/components/PisellCards/components/GraphicTextCard/components/TextContent.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextContentProps } from '../types';
+/**
+ * TextContent 文本内容组件
+ * 负责渲染主文本内容，支持省略和多行显示
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 单行文本
+ * <TextContent text="Tab title" />
+ *
+ * // 自定义样式
+ * <TextContent
+ *   text="Tab title"
+ *   textConfig={{
+ *     fontSize: 16,
+ *     fontWeight: 600,
+ *     color: '#101828',
+ *     maxLines: 2,
+ *     textAlign: 'center'
+ *   }}
+ * />
+ * ```
+ */
+declare const TextContent: React.FC<TextContentProps>;
+export default TextContent;

package/es/components/PisellCards/components/GraphicTextCard/components/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 子组件统一导出
+ */
+export { default as GraphicArea } from './GraphicArea';
+export { default as TextContent } from './TextContent';
+export { default as BadgeWrapper } from './BadgeWrapper';

package/es/components/PisellCards/components/GraphicTextCard/hooks/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hooks 统一导出
+ */
+export { useGraphicTextCardStyle } from './useGraphicTextCardStyle';
+export { useGraphicTextCardClick } from './useGraphicTextCardClick';

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardClick.d.ts

@@ -0,0 +1,15 @@
+import { GraphicTextCardProps } from '../types';
+/**
+ * useGraphicTextCardClick Hook
+ * 处理组件点击事件的逻辑
+ *
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 点击事件处理函数
+ *
+ * @example
+ * ```tsx
+ * const handleClick = useGraphicTextCardClick(props);
+ * <div onClick={handleClick}>...</div>
+ * ```
+ */
+export declare const useGraphicTextCardClick: (props: GraphicTextCardProps) => (event: React.MouseEvent<HTMLDivElement>) => void;

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardStyle.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { GraphicTextCardProps } from '../types';
+/**
+ * useGraphicTextCardStyle Hook
+ * 处理组件样式和类名的合并逻辑
+ *
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 合并后的样式和类名
+ *
+ * @example
+ * ```tsx
+ * const { mergedStyle, mergedClassName } = useGraphicTextCardStyle(props);
+ * ```
+ */
+export declare const useGraphicTextCardStyle: (props: GraphicTextCardProps) => {
+    mergedStyle: CSSProperties;
+    mergedClassName: string;
+};

package/es/components/PisellCards/components/GraphicTextCard/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * GraphicTextCard 组件入口文件
+ */
+export { default } from './GraphicTextCard';
+export type { GraphicTextCardProps, GraphicTextCardVariant, GraphicTextCardSize, GraphicTextCardWidthMode, GraphicConfig, BadgeConfig, TextConfig, } from './types';

package/es/components/PisellCards/components/GraphicTextCard/types.d.ts

@@ -0,0 +1,290 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PisellBasicCardProps } from '../../types';
+import { PisellImageCardProps } from '../PisellImageCard/types';
+/**
+ * 样式变体类型
+ */
+export declare type GraphicTextCardVariant = 'vertical-image' | 'vertical-icon' | 'horizontal' | 'card';
+/**
+ * 尺寸类型
+ */
+export declare type GraphicTextCardSize = 'small' | 'default' | 'large';
+/**
+ * 宽度模式
+ */
+export declare type GraphicTextCardWidthMode = 'auto' | 'fixed' | 'full';
+/**
+ * 图形区域配置
+ */
+export interface GraphicConfig extends PisellImageCardProps {
+    hidden?: boolean;
+    /**
+     * 图形区域宽度（单位：px）
+     * 如不设置，将根据 variant 和 size 自动计算
+     */
+    width?: number;
+    /**
+     * 图形区域高度（单位：px）
+     * 如不设置，将根据 variant 和 size 自动计算
+     */
+    height?: number;
+    /**
+     * 图形区域圆角
+     */
+    borderRadius?: number | string;
+    /**
+     * 图形区域背景色
+     */
+    background?: string;
+    /**
+     * 图形区域边框
+     */
+    border?: string;
+    /**
+     * 图形区域阴影
+     */
+    boxShadow?: string;
+    /**
+     * 图形区域内边距
+     */
+    padding?: number | string;
+    /**
+     * 图标大小（当使用 icon 时有效，单位：px）
+     */
+    iconSize?: number;
+    /**
+     * 图标颜色（当使用 icon 时有效）
+     */
+    iconColor?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+}
+/**
+ * 角标类型
+ */
+export declare type BadgeType = 'dot' | 'number' | 'text';
+/**
+ * 角标位置
+ */
+export declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * 角标配置
+ */
+export interface BadgeConfig {
+    /**
+     * 角标类型
+     * @default 'dot'
+     */
+    type?: BadgeType;
+    /**
+     * 角标内容（数字或文本）
+     * 当 type 为 'number' 或 'text' 时有效
+     */
+    content?: ReactNode;
+    /**
+     * 角标位置
+     * @default 'top-right'
+     */
+    position?: BadgePosition;
+    /**
+     * 角标偏移量 [x, y]
+     * 正数向右/下偏移，负数向左/上偏移
+     */
+    offset?: [number, number];
+    /**
+     * 角标颜色
+     */
+    color?: string;
+    /**
+     * 角标自定义样式
+     */
+    style?: CSSProperties;
+}
+/**
+ * 文本配置
+ */
+export interface TextConfig {
+    /**
+     * 字体大小（单位：px）
+     */
+    fontSize?: number;
+    /**
+     * 字体粗细
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     */
+    color?: string;
+    /**
+     * 最大显示行数
+     * @default 1
+     */
+    maxLines?: number;
+    /**
+     * 是否显示省略号
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+}
+/**
+ * GraphicTextCard 组件 Props
+ * 基于 PisellBasicCardProps 扩展
+ * 注意：重写 onClick 为可选属性
+ */
+export interface GraphicTextCardProps extends Omit<PisellBasicCardProps, 'onClick'> {
+    /**
+     * 卡片显示的文本内容（必填）
+     */
+    text: ReactNode;
+    /**
+     * 卡片样式变体
+     * @default 'vertical-image'
+     */
+    variant?: GraphicTextCardVariant;
+    /**
+     * 卡片尺寸
+     * @default 'default'
+     */
+    size?: GraphicTextCardSize;
+    /**
+     * 是否可点击
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 图片地址
+     * 与 icon 二选一，优先使用 image
+     */
+    image?: string;
+    /**
+     * 图标
+     * 支持 ReactNode（如 antd Icon、svg 等）或图标 URL
+     * 与 image 二选一
+     */
+    icon?: ReactNode;
+    /**
+     * 图形区域配置
+     * 用于自定义图形区域的样式和尺寸
+     */
+    graphicConfig?: GraphicConfig;
+    /**
+     * 图形区域插槽
+     * 用于完全自定义图形区域，优先级高于 image 和 icon
+     */
+    graphicSlot?: ReactNode;
+    /**
+     * 角标配置
+     * 用于显示红点、数字或文本提示
+     */
+    badge?: BadgeConfig;
+    /**
+     * 前置插槽
+     * 用于在图形区域前添加自定义内容
+     */
+    prefixSlot?: ReactNode;
+    /**
+     * 后置插槽
+     * 用于在文本内容后添加自定义内容
+     */
+    suffixSlot?: ReactNode;
+    /**
+     * 文本配置
+     * 用于自定义文本样式和显示行为
+     */
+    textConfig?: TextConfig;
+    /**
+     * 宽度模式
+     * - auto: 内容撑满，最大宽度 maxWidth
+     * - fixed: 固定宽度 width
+     * - full: 撑满父容器
+     * @default 'auto'
+     */
+    widthMode?: GraphicTextCardWidthMode;
+    /**
+     * 固定宽度值
+     * 当 widthMode='fixed' 时有效
+     */
+    width?: number | string;
+    /**
+     * 最大宽度
+     * 当 widthMode='auto' 时有效
+     * @default 400
+     */
+    maxWidth?: number | string;
+    /**
+     * 点击事件
+     * 当 clickable=true 且不在 disabled/loading 状态时触发
+     * 注意：PisellBasicCardProps 中的 onClick 是必填的，这里重新定义为可选
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * 自定义渲染函数
+     * 完全自定义组件的渲染内容
+     * 当提供此函数时，组件内置的渲染逻辑将被忽略
+     */
+    render?: (props: GraphicTextCardProps) => ReactNode;
+}
+/**
+ * GraphicArea 组件 Props
+ * 图形区域子组件
+ */
+export interface GraphicAreaProps {
+    /**
+     * 图片地址
+     */
+    image?: string;
+    /**
+     * 图标内容
+     */
+    icon?: ReactNode;
+    /**
+     * 图形配置
+     */
+    config?: GraphicConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    aliWidth?: number;
+}
+/**
+ * TextContent 组件 Props
+ * 文本内容子组件
+ */
+export interface TextContentProps {
+    /**
+     * 文本内容
+     */
+    text: ReactNode;
+    /**
+     * 文本配置
+     */
+    textConfig?: TextConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    active: PisellBasicCardProps['active'];
+}
+/**
+ * BadgeWrapper 组件 Props
+ * 角标包装子组件
+ */
+export interface BadgeWrapperProps {
+    /**
+     * 角标配置
+     */
+    badge?: BadgeConfig;
+    /**
+     * 子元素
+     */
+    children: ReactNode;
+}

package/es/components/PisellCards/components/GraphicTextCard/utils/index.d.ts

@@ -0,0 +1,19 @@
+import { GraphicTextCardVariant, GraphicTextCardSize } from '../types';
+/**
+ * 获取图形区域的默认尺寸
+ * 根据样式变体和尺寸返回对应的默认宽高
+ *
+ * @param variant - 样式变体
+ * @param size - 尺寸
+ * @returns 默认的宽度和高度
+ *
+ * @example
+ * ```ts
+ * const size = getDefaultGraphicSize('vertical-image', 'default');
+ * // 返回 { width: 36, height: 36 }
+ * ```
+ */
+export declare const getDefaultGraphicSize: (variant: GraphicTextCardVariant, size: GraphicTextCardSize) => {
+    width: number | string;
+    height: number | string;
+};

package/es/components/PisellCards/components/MultilevelCard/components/PanelWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PanelWrapperProps } from '../types';
+/**
+ * PanelWrapper 组件
+ * 次级面板包装器，负责展开/收起动画和样式处理
+ */
+export declare const PanelWrapper: React.FC<PanelWrapperProps>;