@pisell/private-materials 3.4.52 → 3.4.53

package/es/components/systemSettings/registry/components/SectionList.js

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Card, Empty, Spin } from 'antd';
+import { ShoppingCartOutlined, CreditCardOutlined, SafetyCertificateOutlined, SettingOutlined } from '@ant-design/icons';
+import { ShoppingCart01 } from '@pisell/icon';
+import { locales } from '@pisell/utils';
+// 获取多语言文本的工具函数
+var getLocalizedText = function getLocalizedText(text) {
+  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'zh-CN';
+  if (typeof text === 'string') {
+    return text;
+  }
+
+  // 优先使用当前语言，然后是原始文本，最后是英文
+  return text[locale] || text.original || text.en || '';
+};
+
+// 区块图标映射
+var sectionIcons = {
+  order: /*#__PURE__*/React.createElement(ShoppingCartOutlined, null),
+  payment: /*#__PURE__*/React.createElement(CreditCardOutlined, null),
+  auth: /*#__PURE__*/React.createElement(SafetyCertificateOutlined, null),
+  default: /*#__PURE__*/React.createElement(SettingOutlined, null)
+};
+
+// 渲染图标的函数
+var renderSectionIcon = function renderSectionIcon(iconName, code) {
+  // 如果有具体的图标名称，处理特定图标
+  if (iconName === 'pisell2-shopping-cart-01') {
+    return /*#__PURE__*/React.createElement(ShoppingCart01, null);
+  }
+
+  // 否则使用代码映射的图标
+  if (code && sectionIcons[code]) {
+    return sectionIcons[code];
+  }
+
+  // 默认图标
+  return sectionIcons.default;
+};
+var SectionList = function SectionList(_ref) {
+  var sections = _ref.sections,
+    selectedSectionId = _ref.selectedSectionId,
+    onSectionSelect = _ref.onSectionSelect,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
+    onLoadMore = _ref.onLoadMore;
+  var scrollContainerRef = useRef(null);
+  var loadingRef = useRef(null);
+
+  // 获取当前语言
+  var currentLocale = localStorage.getItem('umi_locale') || 'zh-CN';
+
+  // 滚动加载更多的处理函数
+  var handleScroll = useCallback(function () {
+    if (!scrollContainerRef.current || !hasMore || loading || !onLoadMore) {
+      return;
+    }
+    var container = scrollContainerRef.current;
+    var scrollTop = container.scrollTop;
+    var scrollHeight = container.scrollHeight;
+    var clientHeight = container.clientHeight;
+
+    // 当滚动到底部附近时触发加载更多
+    if (scrollHeight - scrollTop - clientHeight < 100) {
+      onLoadMore();
+    }
+  }, [hasMore, loading, onLoadMore]);
+
+  // 监听滚动事件
+  useEffect(function () {
+    var container = scrollContainerRef.current;
+    if (!container) return;
+    container.addEventListener('scroll', handleScroll);
+    return function () {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  // 使用 Intersection Observer 监听加载更多元素
+  useEffect(function () {
+    if (!loadingRef.current || !hasMore || !onLoadMore) return;
+    var observer = new IntersectionObserver(function (entries) {
+      var entry = entries[0];
+      if (entry.isIntersecting && !loading) {
+        onLoadMore();
+      }
+    }, {
+      threshold: 0.1
+    });
+    observer.observe(loadingRef.current);
+    return function () {
+      observer.disconnect();
+    };
+  }, [hasMore, loading, onLoadMore]);
+  if (sections.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-sections-empty"
+    }, /*#__PURE__*/React.createElement(Empty, {
+      description: locales.getText('registry.sections.empty'),
+      image: Empty.PRESENTED_IMAGE_SIMPLE
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-settings-registry-sections",
+    ref: scrollContainerRef,
+    style: {
+      height: '100%',
+      overflowY: 'auto',
+      paddingRight: '8px'
+    }
+  }, sections.map(function (section) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: section.id,
+      onClick: function onClick() {
+        return onSectionSelect(section.id);
+      },
+      style: {
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/React.createElement(Card, {
+      className: "pisell-settings-registry-section-card ".concat(selectedSectionId === section.id ? 'active' : ''),
+      hoverable: true,
+      bodyStyle: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-section-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-section-icon"
+    }, renderSectionIcon(section.icon, section.code)), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-section-info"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-section-name"
+    }, getLocalizedText(section.name, currentLocale)), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-section-code"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "section-code-tag",
+      style: {
+        backgroundColor: '#1890ff',
+        color: 'white',
+        padding: '2px 8px',
+        borderRadius: '4px',
+        fontSize: '12px'
+      }
+    }, section.code)), section.description && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-settings-registry-section-description"
+    }, getLocalizedText(section.description, currentLocale))))));
+  }), hasMore && /*#__PURE__*/React.createElement("div", {
+    ref: loadingRef,
+    className: "pisell-settings-registry-sections-loading",
+    style: {
+      textAlign: 'center',
+      padding: '16px',
+      minHeight: '50px'
+    }
+  }, loading ? /*#__PURE__*/React.createElement(Spin, {
+    size: "small"
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: '#999'
+    }
+  }, locales.getText('registry.sections.loadMore'))), !hasMore && sections.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-settings-registry-sections-no-more",
+    style: {
+      textAlign: 'center',
+      padding: '16px',
+      color: '#999',
+      fontSize: '12px'
+    }
+  }, locales.getText('registry.sections.noMore')));
+};
+export default SectionList;

package/es/components/systemSettings/registry/components/SettingsTable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SettingsTableProps } from '../types';
+declare const SettingsTable: React.FC<SettingsTableProps>;
+export default SettingsTable;