@pnt-team/pnt-component-frontend 0.0.73 → 0.0.75

package/lib/esm/components/PntBusinessSelect/index.js

@@ -1,26 +1,71 @@
-// src/components/PntBusinessSelect/index.tsx
 import { businessSelectList } from "../../api";
 import { usePntConfig } from "../../config";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { Loading, Select, Tooltip } from "tdesign-react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Loading, Select, Tooltip } from 'tdesign-react';
 import "./index.scss";
-import { jsx } from "react/jsx-runtime";
-var PntBusinessSelect = (props) => {
+
+// ==========================================
+// 类型定义
+// ==========================================
+
+/** 下拉场景 */
+
+/** 标签格式 */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 业务选择器组件
+ * @description 统一业务下拉选择器，内置对接后端通用接口 `/api/business/select/list`，
+ * 支持远程搜索、滚动分页加载、多选、场景化禁用（合规场景 creatable 字段）。
+ *
+ * @param {PntBusinessSelectProps} props - 组件属性
+ *
+ * @example
+ * ```tsx
+ * import { PntBusinessSelect } from '@pnt-team/pnt-component-frontend';
+ *
+ * // 最简用法
+ * <PntBusinessSelect
+ *   value={gameId}
+ *   onChange={(v) => setGameId(v as string)}
+ * />
+ *
+ * // SDK 定制场景 + 名称带 ID
+ * <PntBusinessSelect
+ *   scene="sdk"
+ *   labelFormat="name_id"
+ *   value={gameId}
+ *   onChange={(v) => setGameId(v as string)}
+ * />
+ *
+ * // 合规年龄场景（自动禁用 creatable=false 的业务）
+ * <PntBusinessSelect
+ *   scene="compliance_age"
+ *   value={gameId}
+ *   onChange={(v) => setGameId(v as string)}
+ * />
+ *
+ * // 多选 + 状态过滤
+ * <PntBusinessSelect
+ *   multiple
+ *   statuses={[3, 4]}
+ *   labelFormat="name_id"
+ *   value={gameIds}
+ *   onChange={(v) => setGameIds(v as string[])}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 业务选择器组件
+ */
+const PntBusinessSelect = props => {
   const {
     value,
     onChange,
     multiple = false,
-    scene = "default",
+    scene = 'default',
     statuses,
     businessTypes,
     businessAccessMethod,
-    labelFormat = "name",
+    labelFormat = 'name',
     labelField,
     optionLabel,
     pagination = true,
@@ -37,152 +82,149 @@ var PntBusinessSelect = (props) => {
     fields,
     optionDisabled,
     optionTooltip,
-    tooltipPlacement = "top",
+    tooltipPlacement = 'top',
     className,
     style
   } = props;
-  const { http } = usePntConfig();
-  const requestFn = useCallback(
-    (params) => businessSelectList(http, params),
-    [http]
-  );
-  const [options, setOptions] = useState(
-    []
-  );
+
+  // ---- 内置请求函数（通过 PntProvider 注入的 http 实例） ----
+  const {
+    http
+  } = usePntConfig();
+  const requestFn = useCallback(params => businessSelectList(http, params), [http]);
+
+  // ---- 状态 ----
+  const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [keyword, setKeyword] = useState("");
+  const [keyword, setKeyword] = useState('');
   const [pageNum, setPageNum] = useState(1);
   const [total, setTotal] = useState(0);
+
+  // ---- Refs ----
   const debounceRef = useRef();
   const loadingRef = useRef(false);
-  const selectedItemsRef = useRef(/* @__PURE__ */ new Map());
-  const buildParams = useCallback(
-    (kw, page) => ({
-      keyword: kw || void 0,
-      pageNum: pagination ? page : 1,
-      pageSize: pagination ? pageSize : 0,
-      scene,
-      statuses,
-      business_types: businessTypes,
-      business_access_method: businessAccessMethod,
-      fields
-    }),
-    [
-      scene,
-      statuses,
-      businessTypes,
-      businessAccessMethod,
-      pageSize,
-      fields,
-      pagination
-    ]
-  );
-  const fetchData = useCallback(
-    async (kw, page, append) => {
-      var _a;
-      if (loadingRef.current)
-        return;
-      loadingRef.current = true;
-      setLoading(true);
-      try {
-        const res = await requestFn(buildParams(kw, page));
-        if (res.code === 0 && res.data) {
-          const newList = res.data.list || [];
-          setOptions((prev) => append ? [...prev, ...newList] : newList);
-          setTotal(((_a = res.data.pagination) == null ? void 0 : _a.total) || 0);
-          setPageNum(page);
-        }
-      } finally {
-        loadingRef.current = false;
-        setLoading(false);
+  /** 已选中项的完整数据缓存，确保搜索后选项仍能展示 label */
+  const selectedItemsRef = useRef(new Map());
+
+  // ---- 构建请求参数 ----
+  const buildParams = useCallback((kw, page) => ({
+    keyword: kw || undefined,
+    pageNum: pagination ? page : 1,
+    pageSize: pagination ? pageSize : 0,
+    scene,
+    statuses,
+    business_types: businessTypes,
+    business_access_method: businessAccessMethod,
+    fields
+  }), [scene, statuses, businessTypes, businessAccessMethod, pageSize, fields, pagination]);
+
+  // ---- 获取数据 ----
+  const fetchData = useCallback(async (kw, page, append) => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
+    setLoading(true);
+    try {
+      const res = await requestFn(buildParams(kw, page));
+      // 适配 commonEesType：code === 0 视为成功
+      if (res.code === 0 && res.data) {
+        const newList = res.data.list || [];
+        setOptions(prev => append ? [...prev, ...newList] : newList);
+        setTotal(res.data.pagination?.total || 0);
+        setPageNum(page);
       }
-    },
-    [requestFn, buildParams]
-  );
-  const handleSearch = useCallback(
-    (val) => {
-      setKeyword(val);
-      if (debounceRef.current)
-        clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        fetchData(val, 1, false);
-      }, searchDebounce);
-    },
-    [fetchData, searchDebounce]
-  );
+    } finally {
+      loadingRef.current = false;
+      setLoading(false);
+    }
+  }, [requestFn, buildParams]);
+
+  // ---- 远程搜索（防抖） ----
+  const handleSearch = useCallback(val => {
+    setKeyword(val);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      fetchData(val, 1, false);
+    }, searchDebounce);
+  }, [fetchData, searchDebounce]);
+
+  // ---- 滚动触底加载下一页 ----
   const handleScrollToBottom = useCallback(() => {
     if (!loadingRef.current && options.length < total) {
       fetchData(keyword, pageNum + 1, true);
     }
   }, [options.length, total, keyword, pageNum, fetchData]);
-  const handlePopupVisibleChange = useCallback(
-    (visible) => {
-      if (!visible && keyword) {
-        setKeyword("");
-        fetchData("", 1, false);
-      }
-    },
-    [keyword, fetchData]
-  );
+
+  // ---- 弹窗关闭时重置搜索 ----
+  const handlePopupVisibleChange = useCallback(visible => {
+    if (!visible && keyword) {
+      setKeyword('');
+      fetchData('', 1, false);
+    }
+  }, [keyword, fetchData]);
+
+  // ---- 初始加载 + 筛选条件变化时重新加载 ----
   useEffect(() => {
-    fetchData("", 1, false);
+    fetchData('', 1, false);
   }, [fetchData]);
+
+  // ---- 缓存已选中项（确保搜索后仍能展示 label） ----
   useEffect(() => {
     const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
-    options.forEach((item) => {
+    options.forEach(item => {
       if (item.game_id && selectedValues.includes(item.game_id)) {
         selectedItemsRef.current.set(item.game_id, item);
       }
     });
   }, [options, value]);
+
+  // ---- 组件卸载时清理防抖 ----
   useEffect(() => {
     return () => {
-      if (debounceRef.current)
-        clearTimeout(debounceRef.current);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, []);
-  const formatLabel = useCallback(
-    (item) => {
-      if (optionLabel)
-        return optionLabel(item);
-      if (labelField) {
-        return item[labelField] || item.name || "";
-      }
-      const name = item.name || "";
-      const nameEn = item.name_en || "";
-      const gameId = item.game_id || "";
-      switch (labelFormat) {
-        case "name_en":
-          return nameEn || name;
-        case "name_id":
-          return `${name}（${gameId}）`;
-        case "name_en_id":
-          return `${nameEn}（${gameId}）`;
-        default:
-          return name;
-      }
-    },
-    [labelFormat, labelField, optionLabel]
-  );
-  const isOptionDisabled = useCallback(
-    (item) => {
-      if (scene === "compliance_age" || scene === "custom_region") {
-        if (item.creatable === false)
-          return true;
-      }
-      return optionDisabled ? optionDisabled(item) : false;
-    },
-    [scene, optionDisabled]
-  );
-  const getOptionTooltip = useCallback(
-    (item) => {
-      return optionTooltip ? optionTooltip(item) : "";
-    },
-    [optionTooltip]
-  );
+
+  // ---- 格式化标签 ----
+  const formatLabel = useCallback(item => {
+    // 优先级：optionLabel > labelField > labelFormat
+    if (optionLabel) return optionLabel(item);
+    if (labelField) {
+      return item[labelField] || item.name || '';
+    }
+    const name = item.name || '';
+    const nameEn = item.name_en || '';
+    const gameId = item.game_id || '';
+    switch (labelFormat) {
+      case 'name_en':
+        return nameEn || name;
+      case 'name_id':
+        return `${name}（${gameId}）`;
+      case 'name_en_id':
+        return `${nameEn}（${gameId}）`;
+      default:
+        return name;
+    }
+  }, [labelFormat, labelField, optionLabel]);
+
+  // ---- 判断选项是否禁用（合规场景 creatable + 自定义 optionDisabled 叠加） ----
+  const isOptionDisabled = useCallback(item => {
+    if (scene === 'compliance_age' || scene === 'custom_region') {
+      if (item.creatable === false) return true;
+    }
+    return optionDisabled ? optionDisabled(item) : false;
+  }, [scene, optionDisabled]);
+
+  // ---- 计算选项 tooltip 内容 ----
+  const getOptionTooltip = useCallback(item => {
+    return optionTooltip ? optionTooltip(item) : '';
+  }, [optionTooltip]);
+
+  // ---- 构建最终选项（当前页 + 已选中项补充） ----
   const selectOptions = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    options.forEach((item) => {
+    const map = new Map();
+
+    // 当前页选项
+    options.forEach(item => {
       if (item.game_id) {
         map.set(item.game_id, {
           label: formatLabel(item),
@@ -195,8 +237,10 @@ var PntBusinessSelect = (props) => {
         });
       }
     });
+
+    // 已选中项（搜索结果不含时补充，确保 label 始终可展示）
     const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
-    selectedValues.forEach((id) => {
+    selectedValues.forEach(id => {
       if (!map.has(id)) {
         const item = selectedItemsRef.current.get(id);
         if (item) {
@@ -210,75 +254,88 @@ var PntBusinessSelect = (props) => {
             rawItem: item
           });
         } else {
-          map.set(id, { label: id, value: id, disabled: false });
+          // 降级：无完整数据时显示原始 ID
+          map.set(id, {
+            label: id,
+            value: id,
+            disabled: false
+          });
         }
       }
     });
     return Array.from(map.values());
   }, [options, value, formatLabel, isOptionDisabled]);
-  const localFilter = useCallback(
-    (filterWord, option) => {
-      if (!filterWord)
-        return true;
-      const kw = filterWord.toLowerCase();
-      const opt = option;
-      const item = opt == null ? void 0 : opt.rawItem;
-      if (item) {
-        return Object.values(item).some(
-          (v) => typeof v === "string" && v.toLowerCase().includes(kw)
-        );
-      }
-      return ((opt == null ? void 0 : opt.name) || "").toLowerCase().includes(kw) || ((opt == null ? void 0 : opt.name_en) || "").toLowerCase().includes(kw) || ((opt == null ? void 0 : opt.game_id) || "").includes(kw);
-    },
-    []
-  );
-  const { Option } = Select;
+
+  // ---- 本地过滤（与后端 keyword 逻辑一致：name / name_en / game_id） ----
+  const localFilter = useCallback((filterWord, option) => {
+    if (!filterWord) return true;
+    const kw = filterWord.toLowerCase();
+    const opt = option;
+    // 优先按 rawItem 的所有字符串字段匹配（含 labelField 指定字段）
+    const item = opt?.rawItem;
+    if (item) {
+      return Object.values(item).some(v => typeof v === 'string' && v.toLowerCase().includes(kw));
+    }
+    return (opt?.name || '').toLowerCase().includes(kw) || (opt?.name_en || '').toLowerCase().includes(kw) || (opt?.game_id || '').includes(kw);
+  }, []);
+  const {
+    Option
+  } = Select;
+
+  // 是否启用 tooltip（仅当 optionTooltip 传入时生效）
   const hasTooltip = !!optionTooltip;
+
+  // 一次性加载模式：仅本地过滤，不触发远程搜索；不分页时禁用滚动触底
   const enableRemoteSearch = filterable && pagination;
   const enableScrollBottom = pagination;
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      value,
-      onChange,
-      filterable,
-      filter: filterable ? localFilter : void 0,
-      onSearch: enableRemoteSearch ? handleSearch : void 0,
-      loading: loading && options.length === 0,
-      multiple,
-      max,
-      clearable,
-      disabled,
-      placeholder,
-      minCollapsedNum,
-      collapsedItems,
-      onPopupVisibleChange: handlePopupVisibleChange,
-      panelBottomContent: options.length > 0 && loading ? /* @__PURE__ */ jsx(Loading, { loading: true, size: "small" }) : null,
-      popupProps: {
-        ...popupProps,
-        onScrollToBottom: enableScrollBottom ? handleScrollToBottom : void 0
-      },
-      className: className ? `pnt-business-select ${className}` : "pnt-business-select",
-      style,
-      children: selectOptions.map((opt) => {
-        const item = opt.rawItem;
-        const tip = hasTooltip && item ? getOptionTooltip(item) : "";
-        const labelText = typeof opt.label === "string" ? opt.label : String(opt.label ?? "");
-        return /* @__PURE__ */ jsx(
-          Option,
-          {
-            value: opt.value,
-            label: labelText,
-            disabled: opt.disabled,
-            children: tip ? /* @__PURE__ */ jsx(Tooltip, { content: tip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx("span", { className: "pnt-business-select-option-label", children: opt.label }) }) : opt.label
-          },
-          opt.value
-        );
-      })
-    }
-  );
-};
-var PntBusinessSelect_default = PntBusinessSelect;
-export {
-  PntBusinessSelect_default as default
+  return /*#__PURE__*/_jsx(Select, {
+    value: value,
+    onChange: onChange,
+    filterable: filterable,
+    filter: filterable ? localFilter : undefined,
+    onSearch: enableRemoteSearch ? handleSearch : undefined,
+    loading: loading && options.length === 0,
+    multiple: multiple,
+    max: max,
+    clearable: clearable,
+    disabled: disabled,
+    placeholder: placeholder,
+    minCollapsedNum: minCollapsedNum,
+    collapsedItems: collapsedItems,
+    onPopupVisibleChange: handlePopupVisibleChange,
+    panelBottomContent: options.length > 0 && loading ? /*#__PURE__*/_jsx(Loading, {
+      loading: true,
+      size: "small"
+    }) : null,
+    popupProps: {
+      ...popupProps,
+      // 自动注入弹层样式类，消费方无需重复定义 overlayClassName
+      overlayClassName: ['pnt-business-select-popup', popupProps?.overlayClassName].filter(Boolean).join(' '),
+      onScrollToBottom: enableScrollBottom ? handleScrollToBottom : undefined
+    },
+    className: className ? `pnt-business-select ${className}` : 'pnt-business-select',
+    style: style,
+    children: selectOptions.map(opt => {
+      const item = opt.rawItem;
+      const tip = hasTooltip && item ? getOptionTooltip(item) : '';
+      // label 仅用纯文本字符串（用于 tag 显示与过滤匹配），复杂渲染走 children
+      const labelText = typeof opt.label === 'string' ? opt.label : String(opt.label ?? '');
+      // Tooltip 必须放在 Option 内部：Select 通过直接子节点识别 Option，
+      // 外层包裹会破坏选项注册；且禁用项的 hover 事件由内部元素接收才稳定
+      return /*#__PURE__*/_jsx(Option, {
+        value: opt.value,
+        label: labelText,
+        disabled: opt.disabled,
+        children: tip ? /*#__PURE__*/_jsx(Tooltip, {
+          content: tip,
+          placement: tooltipPlacement,
+          children: /*#__PURE__*/_jsx("span", {
+            className: "pnt-business-select-option-label",
+            children: opt.label
+          })
+        }) : opt.label
+      }, opt.value);
+    })
+  });
 };
+export default PntBusinessSelect;

package/lib/esm/components/PntBusinessSelect/index.scss

@@ -6,3 +6,22 @@
   display: block;
   width: 100%;
 }
+
+/* 弹层内容样式：loading / total-wrapper 统一高度与排版 */
+.pnt-business-select-popup {
+  .t-popup__content {
+    .total-wrapper,
+    .t-loading {
+      height: 36px;
+      font-weight: 400;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      padding: 0 14px;
+    }
+    .total-wrapper {
+      color: #808191;
+      font-size: 14px;
+    }
+  }
+}

package/lib/esm/components/PntGeneralLayout/index.js

@@ -1,9 +1,41 @@
-// src/components/PntGeneralLayout/index.tsx
-import { ArrowLeftIcon } from "tdesign-icons-react";
-import { Layout } from "tdesign-react";
+import React from 'react';
+import { ArrowLeftIcon } from 'tdesign-icons-react';
+import { Layout } from 'tdesign-react';
 import "./index.scss";
-import { jsx, jsxs } from "react/jsx-runtime";
-var PntGeneralLayout = (prop) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 通用页面布局组件（L3 布局组件）
+ * @description 提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，
+ * 基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法：仅内容区
+ * <PntGeneralLayout>
+ *   <div>页面内容</div>
+ * </PntGeneralLayout>
+ *
+ * // 带标题和操作按钮
+ * <PntGeneralLayout
+ *   headerTitle="页面标题"
+ *   operation={<><Button>保存</Button><Button>取消</Button></>}
+ * >
+ *   <Form />
+ * </PntGeneralLayout>
+ *
+ * // 带返回按钮和底部
+ * <PntGeneralLayout
+ *   headerTitle="详情页"
+ *   showBackButton
+ *   onBackButtonClick={() => history.back()}
+ *   footer={<><Button>提交</Button><Button>重置</Button></>}
+ * >
+ *   <Detail />
+ * </PntGeneralLayout>
+ * ```
+ */
+const PntGeneralLayout = prop => {
   const {
     className,
     headerTitle,
@@ -16,39 +48,41 @@ var PntGeneralLayout = (prop) => {
     bodyStyle,
     footer
   } = prop;
-  const { Header, Footer } = Layout;
-  return /* @__PURE__ */ jsxs(Layout, { className: `pnt-general-layout${className ? " " + className : ""}`, children: [
-    headerTitle && /* @__PURE__ */ jsxs(Header, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "header-title", children: [
-        showBackButton && /* @__PURE__ */ jsx(
-          ArrowLeftIcon,
-          {
-            className: "goback-icon",
-            size: "24px",
-            onClick: onBackButtonClick
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "title", children: headerTitle })
-      ] }),
-      operation && /* @__PURE__ */ jsx("span", { className: "header-operation", children: operation })
-    ] }),
-    subHeaderContent && /* @__PURE__ */ jsx("div", { className: "general-layout-sub-header", children: subHeaderContent }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "general-layout-body",
-        ref: bodyRef,
-        style: {
-          height: `calc(100%${headerTitle && " - 72px"}${footer && " - 72px"})`,
-          ...bodyStyle
-        },
-        children
-      }
-    ),
-    footer && /* @__PURE__ */ jsx(Footer, { children: footer })
-  ] });
-};
-var PntGeneralLayout_default = PntGeneralLayout;
-export {
-  PntGeneralLayout_default as default
+  const {
+    Header,
+    Footer
+  } = Layout;
+  return /*#__PURE__*/_jsxs(Layout, {
+    className: `pnt-general-layout${className ? ' ' + className : ''}`,
+    children: [headerTitle && /*#__PURE__*/_jsxs(Header, {
+      children: [/*#__PURE__*/_jsxs("span", {
+        className: "header-title",
+        children: [showBackButton && /*#__PURE__*/_jsx(ArrowLeftIcon, {
+          className: "goback-icon",
+          size: "24px",
+          onClick: onBackButtonClick
+        }), /*#__PURE__*/_jsx("span", {
+          className: "title",
+          children: headerTitle
+        })]
+      }), operation && /*#__PURE__*/_jsx("span", {
+        className: "header-operation",
+        children: operation
+      })]
+    }), subHeaderContent && /*#__PURE__*/_jsx("div", {
+      className: "general-layout-sub-header",
+      children: subHeaderContent
+    }), /*#__PURE__*/_jsx("div", {
+      className: "general-layout-body",
+      ref: bodyRef,
+      style: {
+        height: `calc(100%${headerTitle && ' - 72px'}${footer && ' - 72px'})`,
+        ...bodyStyle
+      },
+      children: children
+    }), footer && /*#__PURE__*/_jsx(Footer, {
+      children: footer
+    })]
+  });
 };
+export default PntGeneralLayout;