@pnt-team/pnt-component-frontend 0.0.41 → 0.0.45

package/lib/cjs/components/PntBusinessSelect/index.d.ts

@@ -0,0 +1,172 @@
+import type { BusinessSelectListBody, BusinessSelectListResponse } from "../../api/types";
+import type { commonEesType } from "../../utils/request";
+import React, { FC } from 'react';
+import type { SelectValue, TdSelectProps } from 'tdesign-react/es/select/type';
+import './index.scss';
+/** 业务列表请求函数：返回 commonEesType 结构，code === 0 视为成功 */
+export type BusinessSelectFetcher = (params: BusinessSelectListBody) => Promise<commonEesType<BusinessSelectListResponse>>;
+/** 下拉场景 */
+type Scene = 'default' | 'sdk' | 'compliance_age' | 'custom_region';
+/** 标签格式 */
+type LabelFormat = 'name' | 'name_en' | 'name_id' | 'name_en_id';
+interface PntBusinessSelectProps {
+    /**
+     * 业务列表请求函数
+     * @description 不传时使用组件库内置的 `businessSelectList` API（对接 `/api/business/select/list`）；
+     * 需要覆盖时传入自定义请求函数（如各项目自己的 http 封装）
+     */
+    fetcher?: BusinessSelectFetcher;
+    /**
+     * 当前选中值
+     * @description 单选为 string，多选为 string[]
+     */
+    value?: SelectValue;
+    /**
+     * 值变化回调
+     */
+    onChange?: TdSelectProps['onChange'];
+    /**
+     * 是否多选
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * 下拉场景
+     * @description 后端按场景返回默认字段集
+     * @default 'default'
+     */
+    scene?: Scene;
+    /**
+     * 业务状态筛选
+     * @description 3-线上运营，4-接入中，5-中途结项，6-已下线
+     */
+    statuses?: number[];
+    /**
+     * 业务类型筛选
+     * @description 1-正式业务，2-测试业务
+     */
+    businessTypes?: number[];
+    /**
+     * 业务接入类型筛选
+     * @description 1-纯SDK，2-LI PASS，3-工作室品牌账号
+     */
+    businessAccessMethod?: number;
+    /**
+     * 标签格式
+     * @description name-中文名，name_en-英文名，name_id-中文名（ID），name_en_id-英文名（ID）
+     * @default 'name'
+     */
+    labelFormat?: LabelFormat;
+    /**
+     * 占位提示文案
+     */
+    placeholder?: string;
+    /**
+     * 是否禁用整个选择器
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否可清除
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * 是否可远程搜索
+     * @default true
+     */
+    filterable?: boolean;
+    /**
+     * 多选时最大可选数量
+     */
+    max?: number;
+    /**
+     * 每页条数
+     * @default 20
+     */
+    pageSize?: number;
+    /**
+     * 搜索防抖延迟（毫秒）
+     * @default 400
+     */
+    searchDebounce?: number;
+    /**
+     * 多选时最少折叠数量
+     * @description 超过此数量的选中项将折叠显示，透传至 TDesign Select
+     */
+    minCollapsedNum?: number;
+    /**
+     * 折叠项自定义渲染
+     * @description 透传至 TDesign Select collapsedItems
+     */
+    collapsedItems?: TdSelectProps['collapsedItems'];
+    /**
+     * 弹层属性透传
+     * @description 会与组件内部 onScrollToBottom 合并；常用 attach（挂载容器）、overlayClassName 等
+     */
+    popupProps?: Partial<TdSelectProps['popupProps']>;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * 业务选择器组件
+ * @description 统一业务下拉选择器，内置对接后端通用接口 `/api/business/select/list`，
+ * 支持远程搜索、滚动分页加载、多选、场景化禁用（合规场景 creatable 字段）。
+ * 默认使用组件库内置 `businessSelectList` API，无需传 fetcher 即可工作；
+ * 各项目如需覆盖请求逻辑，传入自定义 `fetcher` 即可。
+ *
+ * @param {PntBusinessSelectProps} props - 组件属性
+ *
+ * @example
+ * ```tsx
+ * import { PntBusinessSelect } from '@pnt-team/pnt-component-frontend';
+ *
+ * // 最简用法（内置 fetcher，无需传）
+ * <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[])}
+ * />
+ *
+ * // 注入自定义 fetcher（覆盖内置 API）
+ * import http from '@/utils/request';
+ * <PntBusinessSelect
+ *   fetcher={(params) => http.post('/api/business/select/list', params)}
+ *   value={gameId}
+ *   onChange={(v) => setGameId(v as string)}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 业务选择器组件
+ */
+declare const PntBusinessSelect: FC<PntBusinessSelectProps>;
+export default PntBusinessSelect;

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

@@ -0,0 +1,243 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PntBusinessSelect/index.tsx
+var PntBusinessSelect_exports = {};
+__export(PntBusinessSelect_exports, {
+  default: () => PntBusinessSelect_default
+});
+module.exports = __toCommonJS(PntBusinessSelect_exports);
+var import_api = require("../../api");
+var import_react = require("react");
+var import_tdesign_react = require("tdesign-react");
+var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PntBusinessSelect = (props) => {
+  const {
+    fetcher,
+    value,
+    onChange,
+    multiple = false,
+    scene = "default",
+    statuses,
+    businessTypes,
+    businessAccessMethod,
+    labelFormat = "name",
+    placeholder,
+    disabled,
+    clearable = true,
+    filterable = true,
+    max,
+    pageSize = 20,
+    searchDebounce = 400,
+    minCollapsedNum,
+    collapsedItems,
+    popupProps,
+    className,
+    style
+  } = props;
+  const requestFn = (0, import_react.useCallback)(
+    (params) => (fetcher || import_api.businessSelectList)(params),
+    [fetcher]
+  );
+  const [options, setOptions] = (0, import_react.useState)(
+    []
+  );
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [keyword, setKeyword] = (0, import_react.useState)("");
+  const [pageNum, setPageNum] = (0, import_react.useState)(1);
+  const [total, setTotal] = (0, import_react.useState)(0);
+  const debounceRef = (0, import_react.useRef)();
+  const loadingRef = (0, import_react.useRef)(false);
+  const selectedItemsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const buildParams = (0, import_react.useCallback)(
+    (kw, page) => ({
+      keyword: kw || void 0,
+      pageNum: page,
+      pageSize,
+      scene,
+      statuses,
+      business_types: businessTypes,
+      business_access_method: businessAccessMethod
+    }),
+    [scene, statuses, businessTypes, businessAccessMethod, pageSize]
+  );
+  const fetchData = (0, import_react.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);
+      }
+    },
+    [requestFn, buildParams]
+  );
+  const handleSearch = (0, import_react.useCallback)(
+    (val) => {
+      setKeyword(val);
+      if (debounceRef.current)
+        clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        fetchData(val, 1, false);
+      }, searchDebounce);
+    },
+    [fetchData, searchDebounce]
+  );
+  const handleScrollToBottom = (0, import_react.useCallback)(() => {
+    if (!loadingRef.current && options.length < total) {
+      fetchData(keyword, pageNum + 1, true);
+    }
+  }, [options.length, total, keyword, pageNum, fetchData]);
+  const handlePopupVisibleChange = (0, import_react.useCallback)(
+    (visible) => {
+      if (!visible && keyword) {
+        setKeyword("");
+        fetchData("", 1, false);
+      }
+    },
+    [keyword, fetchData]
+  );
+  (0, import_react.useEffect)(() => {
+    fetchData("", 1, false);
+  }, [fetchData]);
+  (0, import_react.useEffect)(() => {
+    const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
+    options.forEach((item) => {
+      if (item.game_id && selectedValues.includes(item.game_id)) {
+        selectedItemsRef.current.set(item.game_id, item);
+      }
+    });
+  }, [options, value]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (debounceRef.current)
+        clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const formatLabel = (0, import_react.useCallback)(
+    (item) => {
+      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]
+  );
+  const isOptionDisabled = (0, import_react.useCallback)(
+    (item) => {
+      if (scene === "compliance_age" || scene === "custom_region") {
+        return !item.creatable;
+      }
+      return false;
+    },
+    [scene]
+  );
+  const selectOptions = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    options.forEach((item) => {
+      if (item.game_id) {
+        map.set(item.game_id, {
+          label: formatLabel(item),
+          value: item.game_id,
+          disabled: isOptionDisabled(item),
+          name: item.name,
+          name_en: item.name_en,
+          game_id: item.game_id
+        });
+      }
+    });
+    const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
+    selectedValues.forEach((id) => {
+      if (!map.has(id)) {
+        const item = selectedItemsRef.current.get(id);
+        if (item) {
+          map.set(id, {
+            label: formatLabel(item),
+            value: id,
+            disabled: isOptionDisabled(item),
+            name: item.name,
+            name_en: item.name_en,
+            game_id: item.game_id
+          });
+        } else {
+          map.set(id, { label: id, value: id, disabled: false });
+        }
+      }
+    });
+    return Array.from(map.values());
+  }, [options, value, formatLabel, isOptionDisabled]);
+  const localFilter = (0, import_react.useCallback)(
+    (filterWord, option) => {
+      if (!filterWord)
+        return true;
+      const kw = filterWord.toLowerCase();
+      const opt = option;
+      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);
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tdesign_react.Select,
+    {
+      value,
+      onChange,
+      options: selectOptions,
+      filterable,
+      filter: filterable ? localFilter : void 0,
+      onSearch: filterable ? handleSearch : void 0,
+      loading: loading && options.length === 0,
+      multiple,
+      max,
+      clearable,
+      disabled,
+      placeholder,
+      minCollapsedNum,
+      collapsedItems,
+      onPopupVisibleChange: handlePopupVisibleChange,
+      panelBottomContent: options.length > 0 && loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tdesign_react.Loading, { loading: true, size: "small" }) : null,
+      popupProps: {
+        ...popupProps,
+        onScrollToBottom: handleScrollToBottom
+      },
+      className: className ? `pnt-business-select ${className}` : "pnt-business-select",
+      style
+    }
+  );
+};
+var PntBusinessSelect_default = PntBusinessSelect;

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

@@ -0,0 +1,3 @@
+.pnt-business-select {
+  width: 100%;
+}

package/lib/cjs/components/PntGeneralLayout/index.d.ts

@@ -48,7 +48,7 @@ interface PntGeneralLayoutProps {
     footer?: ReactNode;
 }
 /**
- * 通用页面布局组件（L4 布局组件）
+ * 通用页面布局组件（L3 布局组件）
  * @description 提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，
  * 基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
  *

package/lib/cjs/components/PntSecureBox/index.d.ts

@@ -41,13 +41,18 @@ interface PntSecureBoxProps {
     pageId?: string;
     /**
      * 高敏数据请求函数
-     * @description 通过外部注入请求函数，避免组件库内部依赖敏感配置
+     * @description 不传时使用组件库内置的 `businessGameInfoHighSecurityDecrypt` API
+     * （对接 `/api/v3/business/game_info/high-security-decrypt`）；
+     * 需要覆盖时传入自定义请求函数（如各项目自己的 http 封装）
      */
-    fetcher: HighSecurityFetcher;
+    fetcher?: HighSecurityFetcher;
 }
 /**
  * 高敏信息展示统一组件
- * @description 用于统一处理和展示高敏信息，支持脱敏显示和按需获取真实数据
+ * @description 用于统一处理和展示高敏信息，支持脱敏显示和按需获取真实数据。
+ * 默认使用组件库内置 `businessGameInfoHighSecurityDecrypt` API，无需传 fetcher 即可工作；
+ * 各项目如需覆盖请求逻辑，传入自定义 `fetcher` 即可。
+ *
  * @param {PntSecureBoxProps} props - 组件属性
  * @param {string} props.dataKey - 高敏信息的唯一标识 key
  * @param {string} props.dataValue - 高敏信息的实际值
@@ -56,22 +61,32 @@ interface PntSecureBoxProps {
  * @param {(content: string) => React.ReactNode} props.renderDom - 自定义渲染函数
  * @param {string} [props.viewText] - 自定义查看按钮文案
  * @param {string} [props.pageId] - 页面 ID
- * @param {HighSecurityFetcher} props.fetcher - 高敏数据请求函数
+ * @param {HighSecurityFetcher} [props.fetcher] - 高敏数据请求函数（可选，不传用内置 API）
  *
  * @example
  * ```tsx
- * import http from '@/utils/request';
  * import { PntSecureBox } from '@pnt-team/pnt-component-frontend';
  *
+ * // 最简用法（内置 API，无需传 fetcher）
  * <PntSecureBox
  *   dataKey="userPhone"
- *   dataValue="138****8888"
- *   env="production"
+ *   dataValue="_high_security_:AAAA...:6542"
+ *   env={2}
  *   gameId={12345}
- *   fetcher={(params) => http.post('/api/v3/business/game_info/high-security-decrypt', params).then(r => r.data)}
  *   renderDom={(content) => <span>{content}</span>}
  *   viewText="查看"
  * />
+ *
+ * // 注入自定义 fetcher（覆盖内置 API）
+ * import http from '@/utils/request';
+ * <PntSecureBox
+ *   dataKey="userPhone"
+ *   dataValue="_high_security_:AAAA...:6542"
+ *   env={2}
+ *   gameId={12345}
+ *   fetcher={(params) => http.post('/api/v3/business/game_info/high-security-decrypt', params)}
+ *   renderDom={(content) => <span>{content}</span>}
+ * />
  * ```
  *
  * @returns {ReactElement} 高敏信息展示组件

package/lib/cjs/components/PntSecureBox/index.js

@@ -22,6 +22,7 @@ __export(PntSecureBox_exports, {
   default: () => PntSecureBox_default
 });
 module.exports = __toCommonJS(PntSecureBox_exports);
+var import_api = require("../../api");
 var import_useHighSecurity = require("../../hooks/useHighSecurity");
 var import_utils = require("../../utils");
 var import_index = require("./index.scss");
@@ -37,7 +38,8 @@ var PntSecureBox = (prop) => {
     pageId,
     fetcher
   } = prop;
-  const { securityData, requestSecurityData } = (0, import_useHighSecurity.useHighSecurity)(fetcher);
+  const requestFn = fetcher || import_api.businessGameInfoHighSecurityDecrypt;
+  const { securityData, requestSecurityData } = (0, import_useHighSecurity.useHighSecurity)(requestFn);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-secure-box", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     renderDom(
       (0, import_utils.isSecurityData)(dataValue) ? securityData[dataKey] || "******" : dataValue

package/lib/cjs/hooks/useHighSecurity.d.ts

@@ -1,4 +1,6 @@
-/** 高敏数据请求参数 */
+import type { BusinessGameInfoHighSecurityDecryptBody, BusinessGameInfoHighSecurityDecryptResponse } from "../api/types";
+import type { commonEesType } from "../utils/request";
+/** 高敏数据请求参数（组件层友好命名） */
 export interface HighSecurityRequestParams {
     /** 游戏 ID */
     gameId: string | number;
@@ -12,14 +14,11 @@ export interface HighSecurityRequestParams {
         value: string;
     }>;
 }
-/** 高敏数据请求函数：返回 { ret, data } 结构且 ret === 0 视为成功 */
-export type HighSecurityFetcher = (params: HighSecurityRequestParams) => Promise<{
-    ret: number;
-    data?: Array<{
-        key: string;
-        value: string;
-    }>;
-}>;
+/**
+ * 高敏数据请求函数：返回 commonEesType 结构，code === 0 视为成功
+ * 不传时使用组件库内置的 `businessGameInfoHighSecurityDecrypt` API
+ */
+export type HighSecurityFetcher = (params: BusinessGameInfoHighSecurityDecryptBody) => Promise<commonEesType<BusinessGameInfoHighSecurityDecryptResponse>>;
 /**
  * 高敏数据解锁 Hook（PntSecureBox 内部依赖）
  * @internal 不对外导出,归 PntSecureBox 组件内部使用

package/lib/cjs/hooks/useHighSecurity.js

@@ -40,14 +40,21 @@ var useHighSecurity = (fetcher) => {
     env,
     pageId
   }) => {
-    const result = await fetcher({
-      gameId,
+    const body = {
+      game_id: Number(gameId),
       env: Number(env),
-      pageId: pageId || location.pathname,
-      param
-    });
-    if (result.ret === 0 && result.data) {
-      result.data.forEach((item) => {
+      page_id: pageId || location.pathname,
+      param: param.map(
+        (i) => ({
+          key: i.key,
+          value: i.value
+        })
+      )
+    };
+    const result = await fetcher(body);
+    if (result.code === 0 && result.data) {
+      const data = result.data;
+      data.forEach((item) => {
         securityCache.set(item.key, item.value);
       });
       setSecurityData(Object.fromEntries(securityCache));

package/lib/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export { default as PntImagePreview } from './components/PntImagePreview';
+export { default as PntBusinessSelect } from './components/PntBusinessSelect';
 export { default as PntSecureBox } from './components/PntSecureBox';
 export { default as PntGeneralLayout } from './components/PntGeneralLayout';

package/lib/cjs/index.js

@@ -29,16 +29,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  PntBusinessSelect: () => import_PntBusinessSelect.default,
   PntGeneralLayout: () => import_PntGeneralLayout.default,
   PntImagePreview: () => import_PntImagePreview.default,
   PntSecureBox: () => import_PntSecureBox.default
 });
 module.exports = __toCommonJS(src_exports);
 var import_PntImagePreview = __toESM(require("./components/PntImagePreview"));
+var import_PntBusinessSelect = __toESM(require("./components/PntBusinessSelect"));
 var import_PntSecureBox = __toESM(require("./components/PntSecureBox"));
 var import_PntGeneralLayout = __toESM(require("./components/PntGeneralLayout"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PntBusinessSelect,
   PntGeneralLayout,
   PntImagePreview,
   PntSecureBox