@pisell/private-materials 6.5.13 → 6.5.14

package/es/components/list/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './EmptyState.less';
+export interface EmptyStateConfig {
+    /** 是否显示空状态 */
+    show?: boolean;
+    /** 空状态文本 */
+    text?: string;
+    /** 空状态图标 */
+    icon?: React.ReactNode;
+    /** 空状态描述 */
+    description?: string;
+}
+export interface EmptyStateProps {
+    /** 空状态配置 */
+    config: EmptyStateConfig;
+    /** 是否有数据 */
+    hasData: boolean;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/es/components/list/components/EmptyState/EmptyState.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Iconfont } from '@pisell/materials';
+// import { locales } from '@pisell/utils';
+import listLocales from "../../locales";
+import useEngineContext from "../../../../hooks/useEngineContext";
+import "./EmptyState.less";
+var EmptyState = function EmptyState(_ref) {
+  var _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {
+      show: true,
+      text: '',
+      icon: null,
+      description: ''
+    } : _ref$config,
+    _ref$hasData = _ref.hasData,
+    hasData = _ref$hasData === void 0 ? false : _ref$hasData;
+  // 获取应用上下文
+  var context = useEngineContext();
+
+  // 创建统一的语言获取函数
+  var getCurrentLanguage = function getCurrentLanguage() {
+    var _context$appHelper, _context$appHelper$ge, _context$appHelper$ge2, _context$appHelper2;
+    var appLocale = (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper$ge = _context$appHelper.getApp) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge = _context$appHelper$ge.call(_context$appHelper)) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge = _context$appHelper$ge.locales) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge2 = _context$appHelper$ge.getLocale) === null || _context$appHelper$ge2 === void 0 ? void 0 : _context$appHelper$ge2.call(_context$appHelper$ge);
+    var storageLocale = (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.storage) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.get('umi_locale');
+
+    // 尝试多种方式获取语言
+    var finalLang = appLocale || storageLocale;
+
+    // 如果上下文方式都失败，尝试直接从 localStorage 获取
+    if (!finalLang && typeof window !== 'undefined') {
+      finalLang = localStorage.getItem('umi_locale');
+    }
+
+    // 最终回退到默认语言
+    return finalLang || 'en';
+  };
+
+  // 创建本地 getText 函数来处理本地化文案
+  var getLocalText = function getLocalText(key, fallback) {
+    var _listLocales;
+    // 获取当前语言
+    var currentLang = getCurrentLanguage();
+    var localText = (_listLocales = listLocales[currentLang]) === null || _listLocales === void 0 ? void 0 : _listLocales[key];
+
+    // 如果是字符串，返回字符串；否则回退到全局 getText 或 fallback
+    if (typeof localText === 'string') {
+      return localText;
+    }
+    return fallback || '';
+  };
+
+  // 动态获取显示文本
+  var displayText = config.text || getLocalText('pisell-list-empty-text-default', 'No data available');
+  if (!(config !== null && config !== void 0 && config.show) || hasData) return null;
+
+  // 默认图标 - 使用iconfont图标
+  var defaultIcon = /*#__PURE__*/React.createElement("div", {
+    className: "empty-icon-wrapper"
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-inbox-01",
+    className: "empty-default-icon"
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-empty-state"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "empty-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "empty-inner"
+  }, config.icon || defaultIcon, /*#__PURE__*/React.createElement("div", {
+    className: "empty-text"
+  }, displayText), config.description && /*#__PURE__*/React.createElement("div", {
+    className: "empty-description"
+  }, config.description))));
+};
+export default EmptyState;

package/es/components/list/components/EmptyState/EmptyState.less

@@ -0,0 +1,121 @@
+/* EmptyState 组件样式 */
+.pisell-list-empty-state {
+  background: transparent;
+  align-self: stretch;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  display: flex;
+  min-height: 200px;
+  transition: opacity 0.3s ease-in-out;
+
+  .empty-content {
+    width: 350px;
+    max-width: 100%;
+    padding: 50px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+    display: flex;
+
+    .empty-inner {
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 12px;
+      display: flex;
+
+      .empty-icon-wrapper {
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .empty-default-icon {
+          font-size: 44px;
+          color: #374151;
+        }
+      }
+
+      .empty-text {
+        color: #374151;
+        font-size: 14px;
+        font-family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+        font-weight: 600;
+        line-height: 20px;
+        word-wrap: break-word;
+        text-align: center;
+      }
+
+      .empty-description {
+        color: #6B7280;
+        font-size: 12px;
+        font-family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+        font-weight: 400;
+        line-height: 16px;
+        text-align: center;
+        max-width: 250px;
+      }
+    }
+  }
+
+  /* 响应式调整 */
+  @media (max-width: 768px) {
+    .empty-content {
+      width: 280px;
+      padding: 32px 24px;
+
+      .empty-inner {
+        gap: 8px;
+
+        .empty-icon-wrapper {
+          width: 36px;
+          height: 36px;
+
+          .empty-default-icon {
+            font-size: 36px;
+          }
+        }
+
+        .empty-text {
+          font-size: 13px;
+          line-height: 18px;
+        }
+
+        .empty-description {
+          font-size: 11px;
+          line-height: 14px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .empty-content {
+      width: 240px;
+      padding: 24px 16px;
+
+      .empty-inner {
+        gap: 6px;
+
+        .empty-icon-wrapper {
+          width: 32px;
+          height: 32px;
+
+          .empty-default-icon {
+            font-size: 32px;
+          }
+        }
+
+        .empty-text {
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+}

package/es/components/list/components/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './EmptyState';
+export type { EmptyStateProps, EmptyStateConfig } from './EmptyState';

package/es/components/list/components/EmptyState/index.js

@@ -0,0 +1 @@
+export { default } from "./EmptyState";

package/es/components/list/components/ListItemSkeleton/ListItemSkeleton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './ListItemSkeleton.less';
+interface ListItemSkeletonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    displayStyle?: 'grid' | 'waterfall';
+    showImage?: boolean;
+    imageWidth?: number;
+    imageHeight?: number;
+    rows?: number;
+}
+declare const ListItemSkeleton: React.FC<ListItemSkeletonProps>;
+export default ListItemSkeleton;

package/es/components/list/components/ListItemSkeleton/ListItemSkeleton.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Skeleton } from 'antd';
+import "./ListItemSkeleton.less";
+var ListItemSkeleton = function ListItemSkeleton(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$displayStyle = _ref.displayStyle,
+    displayStyle = _ref$displayStyle === void 0 ? 'grid' : _ref$displayStyle,
+    _ref$showImage = _ref.showImage,
+    showImage = _ref$showImage === void 0 ? true : _ref$showImage,
+    _ref$imageWidth = _ref.imageWidth,
+    imageWidth = _ref$imageWidth === void 0 ? 180 : _ref$imageWidth,
+    _ref$imageHeight = _ref.imageHeight,
+    imageHeight = _ref$imageHeight === void 0 ? 126 : _ref$imageHeight,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 2 : _ref$rows;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-list-item-skeleton', className),
+    style: style
+  }, showImage && /*#__PURE__*/React.createElement(Skeleton.Image, {
+    active: true,
+    style: {
+      width: '100%',
+      height: imageHeight,
+      marginBottom: 8
+    }
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    active: true,
+    title: {
+      width: '80%'
+    },
+    paragraph: {
+      rows: rows,
+      width: ['100%', '60%']
+    }
+  }));
+};
+export default ListItemSkeleton;

package/es/components/list/components/ListItemSkeleton/ListItemSkeleton.less

@@ -0,0 +1,29 @@
+.pisell-list-item-skeleton {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #fff;
+  border-radius: 8px;
+
+  .ant-skeleton-image {
+    width: 100%;
+    border-radius: 8px;
+  }
+
+  .ant-skeleton {
+    .ant-skeleton-content {
+      .ant-skeleton-title {
+        margin-top: 8px;
+      }
+
+      .ant-skeleton-paragraph {
+        margin-top: 12px;
+
+        li {
+          height: 14px;
+        }
+      }
+    }
+  }
+}
+

package/es/components/list/components/ListItemSkeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ListItemSkeleton';
+export { default as ListItemSkeleton } from './ListItemSkeleton';

package/es/components/list/components/ListItemSkeleton/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ListItemSkeleton";
+export { default as ListItemSkeleton } from "./ListItemSkeleton";

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Pagination.less';
+export interface PaginationProps {
+    /** 当前页码 */
+    current: number;
+    /** 每页条数 */
+    pageSize: number;
+    /** 数据总数 */
+    total?: number;
+    /** 总页数 (优先级高于total计算) */
+    totalPages?: number;
+    /** 页码改变的回调 */
+    onChange?: (page: number, pageSize: number) => void;
+    /** 每页条数改变的回调 */
+    onShowSizeChange?: (current: number, size: number) => void;
+    /** 是否显示每页条数选择器 */
+    showSizeChanger?: boolean;
+    /** 每页条数选择器选项 */
+    pageSizeOptions?: string[];
+    /** 是否显示快速跳转 */
+    showQuickJumper?: boolean;
+    /** 是否显示总数 */
+    showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 禁用状态 */
+    disabled?: boolean;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/es/components/list/components/Pagination/Pagination.js

@@ -0,0 +1,240 @@
+import React from 'react';
+import { Select } from 'antd';
+import { Iconfont } from '@pisell/materials';
+// import { locales } from '@pisell/utils';
+import listLocales from "../../locales";
+import useEngineContext from "../../../../hooks/useEngineContext";
+import "./Pagination.less";
+
+// 自定义箭头图标组件 - 使用pisell图标
+var LeftArrowIcon = function LeftArrowIcon(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-arrow-left",
+    style: {
+      fontSize: '20px',
+      color: disabled ? '#98A2B3' : '#344054'
+    }
+  });
+};
+var RightArrowIcon = function RightArrowIcon(_ref2) {
+  var _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  return /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-arrow-right",
+    style: {
+      fontSize: '20px',
+      color: disabled ? '#98A2B3' : '#344054'
+    }
+  });
+};
+var DropdownIcon = function DropdownIcon() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 20,
+      height: 20,
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5 7.5L10 12.5L15 7.5",
+    stroke: "#344054",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+};
+var Pagination = function Pagination(_ref3) {
+  var _ref3$current = _ref3.current,
+    current = _ref3$current === void 0 ? 1 : _ref3$current,
+    _ref3$pageSize = _ref3.pageSize,
+    pageSize = _ref3$pageSize === void 0 ? 10 : _ref3$pageSize,
+    _ref3$total = _ref3.total,
+    total = _ref3$total === void 0 ? 0 : _ref3$total,
+    propTotalPages = _ref3.totalPages,
+    onChange = _ref3.onChange,
+    onShowSizeChange = _ref3.onShowSizeChange,
+    _ref3$showSizeChanger = _ref3.showSizeChanger,
+    showSizeChanger = _ref3$showSizeChanger === void 0 ? true : _ref3$showSizeChanger,
+    _ref3$pageSizeOptions = _ref3.pageSizeOptions,
+    pageSizeOptions = _ref3$pageSizeOptions === void 0 ? ['10', '20', '50', '100'] : _ref3$pageSizeOptions,
+    _ref3$showQuickJumper = _ref3.showQuickJumper,
+    showQuickJumper = _ref3$showQuickJumper === void 0 ? false : _ref3$showQuickJumper,
+    showTotal = _ref3.showTotal,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+  // 获取应用上下文
+  var context = useEngineContext();
+
+  // 创建统一的语言获取函数
+  var getCurrentLanguage = function getCurrentLanguage() {
+    var _context$appHelper, _context$appHelper$ge, _context$appHelper$ge2, _context$appHelper2;
+    var appLocale = (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper$ge = _context$appHelper.getApp) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge = _context$appHelper$ge.call(_context$appHelper)) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge = _context$appHelper$ge.locales) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge2 = _context$appHelper$ge.getLocale) === null || _context$appHelper$ge2 === void 0 ? void 0 : _context$appHelper$ge2.call(_context$appHelper$ge);
+    var storageLocale = (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.storage) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.get('umi_locale');
+
+    // 尝试多种方式获取语言
+    var finalLang = appLocale || storageLocale;
+
+    // 如果上下文方式都失败，尝试直接从 localStorage 获取
+    if (!finalLang && typeof window !== 'undefined') {
+      finalLang = localStorage.getItem('umi_locale');
+    }
+
+    // 最终回退到默认语言
+    return finalLang || 'en';
+  };
+
+  // 创建本地 getText 函数来处理函数类型文案
+  var getLocalText = function getLocalText(key) {
+    var _listLocales;
+    var currentLang = getCurrentLanguage();
+    var localText = (_listLocales = listLocales[currentLang]) === null || _listLocales === void 0 ? void 0 : _listLocales[key];
+
+    // 如果是函数类型，直接返回函数；如果是字符串，返回字符串；否则回退
+    if (typeof localText === 'function' || typeof localText === 'string') {
+      return localText;
+    }
+    return key; // 简单回退，返回 key 本身
+  };
+
+  // 计算总页数：优先使用传入的totalPages，否则根据total计算
+  var totalPages = propTotalPages !== null && propTotalPages !== void 0 ? propTotalPages : Math.ceil((total || 0) / pageSize);
+
+  // 计算当前显示的数据范围
+  var startIndex = (current - 1) * pageSize + 1;
+  var endIndex = propTotalPages ? current * pageSize // 使用totalPages时，无法准确计算，显示理论范围
+  : Math.min(current * pageSize, total || 0); // 使用total时，计算实际范围
+
+  // 处理页码变化
+  var handlePageChange = function handlePageChange(page) {
+    if (page < 1 || page > totalPages || disabled) return;
+    onChange === null || onChange === void 0 || onChange(page, pageSize);
+  };
+
+  // 处理每页条数变化
+  var handleSizeChange = function handleSizeChange(size) {
+    // 当使用totalPages时，简单地重置到第1页，因为无法准确计算页码对应关系
+    var newCurrent = propTotalPages ? 1 : Math.ceil((current - 1) * pageSize / size) + 1;
+    onShowSizeChange === null || onShowSizeChange === void 0 || onShowSizeChange(newCurrent, size);
+    onChange === null || onChange === void 0 || onChange(newCurrent, size);
+  };
+
+  // 生成页码数组
+  var getPageNumbers = function getPageNumbers() {
+    var pages = [];
+    var showPages = 7; // 显示的页码数量
+
+    if (totalPages <= showPages) {
+      // 总页数较少，显示所有页码
+      for (var i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 总页数较多，需要省略显示
+      var half = Math.floor(showPages / 2);
+      var start = Math.max(1, current - half);
+      var end = Math.min(totalPages, current + half);
+
+      // 调整显示范围
+      if (current <= half + 1) {
+        end = showPages - 1;
+      } else if (current >= totalPages - half) {
+        start = totalPages - showPages + 2;
+      }
+
+      // 添加第一页
+      if (start > 1) {
+        pages.push(1);
+        if (start > 2) {
+          pages.push('...');
+        }
+      }
+
+      // 添加中间页码
+      for (var _i = start; _i <= end; _i++) {
+        pages.push(_i);
+      }
+
+      // 添加最后一页
+      if (end < totalPages) {
+        if (end < totalPages - 1) {
+          pages.push('...');
+        }
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+  var pageNumbers = getPageNumbers();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-pagination ".concat(className, " ").concat(disabled ? 'disabled' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pagination-info"
+  }, function () {
+    var pageOfFunc = getLocalText('pisell-list-pagination-page-of');
+    if (typeof pageOfFunc === 'function') {
+      return pageOfFunc(current, totalPages);
+    }
+    return "Page ".concat(current, " of ").concat(totalPages);
+  }()), /*#__PURE__*/React.createElement("div", {
+    className: "pagination-controls"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pagination-group"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "pagination-btn pagination-prev ".concat(current <= 1 ? 'disabled' : ''),
+    onClick: function onClick() {
+      return handlePageChange(current - 1);
+    },
+    disabled: current <= 1 || disabled
+  }, /*#__PURE__*/React.createElement(LeftArrowIcon, {
+    disabled: current <= 1
+  }), /*#__PURE__*/React.createElement("span", null, getLocalText('pisell-list-pagination-previous') || 'Previous')), pageNumbers.map(function (page, index) {
+    if (page === '...') {
+      return /*#__PURE__*/React.createElement("div", {
+        key: "ellipsis-".concat(index),
+        className: "pagination-ellipsis"
+      }, /*#__PURE__*/React.createElement("span", null, "..."));
+    }
+    return /*#__PURE__*/React.createElement("button", {
+      key: page,
+      className: "pagination-page ".concat(current === page ? 'active' : ''),
+      onClick: function onClick() {
+        return handlePageChange(page);
+      },
+      disabled: disabled
+    }, page);
+  }), /*#__PURE__*/React.createElement("button", {
+    className: "pagination-btn pagination-next ".concat(current >= totalPages ? 'disabled' : ''),
+    onClick: function onClick() {
+      return handlePageChange(current + 1);
+    },
+    disabled: current >= totalPages || disabled
+  }, /*#__PURE__*/React.createElement("span", null, getLocalText('pisell-list-pagination-next') || 'Next'), /*#__PURE__*/React.createElement(RightArrowIcon, {
+    disabled: current >= totalPages
+  }))), showSizeChanger && /*#__PURE__*/React.createElement("div", {
+    className: "pagination-size-selector"
+  }, /*#__PURE__*/React.createElement(Select, {
+    value: pageSize,
+    onChange: handleSizeChange,
+    disabled: disabled,
+    style: {
+      width: 88
+    },
+    suffixIcon: /*#__PURE__*/React.createElement(DropdownIcon, null),
+    options: pageSizeOptions.map(function (option) {
+      return {
+        label: option,
+        value: parseInt(option, 10)
+      };
+    })
+  }))));
+};
+export default Pagination;