@pnt-team/pnt-component-frontend 0.0.36 → 0.0.39

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

@@ -0,0 +1,51 @@
+// src/components/PntCopyData/index.tsx
+import React, { useState } from "react";
+import { Popup } from "tdesign-react";
+import "./index.scss";
+var PntCopyData = (props) => {
+  const { data, className, contentFn, placement, tips } = props;
+  const [isCopy, setIsCopy] = useState(false);
+  const [isFail, setIsFail] = useState(false);
+  const copyDataToClipboard = async () => {
+    const text = typeof data === "string" ? data : await data();
+    if (!text) {
+      return setIsFail(true);
+    }
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(text);
+      setIsCopy(true);
+    } else {
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      document.execCommand("copy") && setIsCopy(true);
+      textArea.remove();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Popup,
+    {
+      overlayClassName: `pnt-copy-data-popup${className ? " " + className : ""}`,
+      placement,
+      content: tips(isCopy, isFail),
+      visible: isCopy || isFail
+    },
+    contentFn({
+      onClick: () => {
+        copyDataToClipboard();
+      },
+      onMouseLeave: () => {
+        setTimeout(() => {
+          setIsCopy(false);
+          setIsFail(false);
+        }, 200);
+      }
+    })
+  );
+};
+var PntCopyData_default = PntCopyData;
+export {
+  PntCopyData_default as default
+};

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

@@ -0,0 +1,5 @@
+.pnt-copy-data-popup {
+  .t-popup__content {
+    white-space: pre-wrap;
+  }
+}

package/lib/esm/components/PntImagePreview/index.d.ts

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import './index.scss';
+interface PntImagePreviewProps {
+    /**
+     * 当前图片组件 URL
+     * @description 图片的完整 URL 地址，用于显示已上传的图片
+     */
+    iconUrl: string | undefined;
+    /**
+     * 上传加载状态
+     * @description 当为 true 时显示上传加载状态，阻止其他操作
+     */
+    loading: boolean;
+    /**
+     * 默认图片
+     * @description 支持传入默认封面图片，不传入则使用默认的 uploadImg 作为默认图片
+     */
+    defaultImg?: string;
+    /**
+     * 自定义扩展参数
+     * @description 用于传递额外的配置选项，如样式等
+     */
+    params?: {
+        /** 自定义样式 */
+        style?: React.CSSProperties;
+        /** 其他可扩展配置 */
+        [key: string]: any;
+    };
+    /**
+     * 删除回调函数
+     * @description 当点击删除图标时触发的回调函数
+     * @param e - 事件对象
+     */
+    onRemove?: (e: any) => void;
+}
+/**
+ * 上传图片查看器组件
+ * @description 用于展示上传的图片，支持预览、删除功能和上传状态显示
+ * @param {PntImagePreviewProps} props - 组件属性
+ * @param {string | undefined} props.iconUrl - 当前图片组件 URL
+ * @param {boolean} props.loading - 上传加载状态
+ * @param {string} [props.defaultImg] - 默认图片
+ * @param {object} [props.params] - 自定义扩展参数
+ * @param {function} [props.onRemove] - 删除回调函数
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <UploadImageViewer
+ *   iconUrl={imageUrl}
+ *   loading={uploading}
+ *   onRemove={handleRemove}
+ * />
+ *
+ * // 带默认图片
+ * <UploadImageViewer
+ *   iconUrl={imageUrl}
+ *   loading={false}
+ *   defaultImg="/path/to/default.png"
+ *   onRemove={handleRemove}
+ * />
+ *
+ * // 自定义样式
+ * <UploadImageViewer
+ *   iconUrl={imageUrl}
+ *   loading={uploading}
+ *   params={{ style: { width: '200px', height: '200px' } }}
+ *   onRemove={handleRemove}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 上传图片查看器组件
+ */
+declare const PntImagePreview: FC<PntImagePreviewProps>;
+export default PntImagePreview;

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

@@ -0,0 +1,61 @@
+// src/components/PntImagePreview/index.tsx
+import uploadImg from "../../assets/images/uploadImg.png";
+import React from "react";
+import { BrowseIcon, DeleteIcon, LoadingIcon } from "tdesign-icons-react";
+import { Image, ImageViewer } from "tdesign-react";
+import "./index.scss";
+var PntImagePreview = ({
+  iconUrl,
+  loading,
+  defaultImg,
+  params,
+  onRemove
+}) => {
+  const src = (iconUrl == null ? void 0 : iconUrl.length) ? iconUrl : defaultImg || uploadImg;
+  const LoadingContent = (isImageLoading) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: isImageLoading ? "pnt-image-preview-progress" : "pnt-image-preview-upload-progress",
+      style: params == null ? void 0 : params.style
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "pnt-image-preview-loading" }, /* @__PURE__ */ React.createElement(LoadingIcon, { size: "18px", name: "loading" }), /* @__PURE__ */ React.createElement("p", null, "上传中"))
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "pnt-image-preview-wrapper",
+      onClick: (e) => {
+        if ((iconUrl == null ? void 0 : iconUrl.length) || loading) {
+          e.stopPropagation();
+        }
+      }
+    },
+    loading ? LoadingContent(false) : /* @__PURE__ */ React.createElement(
+      ImageViewer,
+      {
+        images: [src],
+        closeOnOverlay: true,
+        trigger: ({ open }) => {
+          const mask = /* @__PURE__ */ React.createElement("div", { className: "pnt-image-preview-mask" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(BrowseIcon, { onClick: open, size: "16px", name: "browse" })), /* @__PURE__ */ React.createElement("span", { className: "pnt-image-preview-divider" }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(DeleteIcon, { onClick: onRemove, size: "16px", name: "delete" })));
+          return /* @__PURE__ */ React.createElement(
+            Image,
+            {
+              alt: "",
+              src,
+              loading: LoadingContent(true),
+              overlayContent: iconUrl ? mask : /* @__PURE__ */ React.createElement(React.Fragment, null),
+              overlayTrigger: "hover",
+              fit: "contain",
+              className: "pnt-image-preview",
+              style: params == null ? void 0 : params.style
+            }
+          );
+        }
+      }
+    )
+  );
+};
+var PntImagePreview_default = PntImagePreview;
+export {
+  PntImagePreview_default as default
+};

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

@@ -0,0 +1,54 @@
+.pnt-image-preview-wrapper {
+  position: relative;
+
+  .pnt-image-preview-progress,
+  .pnt-image-preview-upload-progress {
+    width: 136px;
+    height: 136px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .pnt-image-preview-loading {
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      border-radius: 4px;
+      background-color: #f7f8fa;
+
+      svg {
+        color: var(--td-brand-color);
+        font-size: 24px;
+      }
+
+      p {
+        margin-top: 4px;
+        color: #808191;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .pnt-image-preview {
+    width: 136px;
+    height: 136px;
+
+    .pnt-image-preview-mask {
+      background: rgba(0, 0, 0, 60%);
+      color: #fff;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .pnt-image-preview-divider {
+        margin: 0 var(--td-comp-margin-l);
+        border-left: 1px var(--td-text-color-anti) solid;
+        height: var(--td-comp-size-xxxs);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+import { type HighSecurityFetcher } from "../../hooks/useHighSecurity";
+import React, { FC } from 'react';
+import './index.scss';
+interface PntSecureBoxProps {
+    /**
+     * 高敏信息的唯一标识 key
+     * @description 用于标识和存储特定的高敏数据项
+     */
+    dataKey: string;
+    /**
+     * 高敏信息的实际值
+     * @description 初始显示的值，通常为脱敏后的数据
+     */
+    dataValue: string;
+    /**
+     * 环境标识
+     * @description 用于区分不同环境（如：dev, test, production）
+     */
+    env: string | number;
+    /**
+     * 游戏 ID
+     * @description 标识具体的游戏项目
+     */
+    gameId: string | number;
+    /**
+     * 自定义渲染函数
+     * @description 接收处理后的数据作为参数，返回需要渲染的 React 元素
+     * @param content - 处理后的数据内容（真实数据或脱敏数据）
+     * @returns React 元素
+     */
+    renderDom: (content: string) => React.ReactNode;
+    /**
+     * 自定义查看按钮文案
+     * @description 用于适配多语言场景，默认为 'View'
+     */
+    viewText?: string;
+    /**
+     * 页面 ID
+     * @description 用于记录操作日志和权限验证
+     */
+    pageId?: string;
+    /**
+     * 高敏数据请求函数
+     * @description 通过外部注入请求函数，避免组件库内部依赖敏感配置
+     */
+    fetcher: HighSecurityFetcher;
+}
+/**
+ * 高敏信息展示统一组件
+ * @description 用于统一处理和展示高敏信息，支持脱敏显示和按需获取真实数据
+ * @param {PntSecureBoxProps} props - 组件属性
+ * @param {string} props.dataKey - 高敏信息的唯一标识 key
+ * @param {string} props.dataValue - 高敏信息的实际值
+ * @param {string | number} props.env - 环境标识
+ * @param {string | number} props.gameId - 游戏 ID
+ * @param {(content: string) => React.ReactNode} props.renderDom - 自定义渲染函数
+ * @param {string} [props.viewText] - 自定义查看按钮文案
+ * @param {string} [props.pageId] - 页面 ID
+ * @param {HighSecurityFetcher} props.fetcher - 高敏数据请求函数
+ *
+ * @example
+ * ```tsx
+ * import http from '@/utils/request';
+ * import { PntSecureBox } from '@pnt-team/pnt-component-frontend';
+ *
+ * <PntSecureBox
+ *   dataKey="userPhone"
+ *   dataValue="138****8888"
+ *   env="production"
+ *   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="查看"
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 高敏信息展示组件
+ */
+declare const PntSecureBox: FC<PntSecureBoxProps>;
+export default PntSecureBox;

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

@@ -0,0 +1,46 @@
+// src/components/PntSecureBox/index.tsx
+import {
+  useHighSecurity
+} from "../../hooks/useHighSecurity";
+import { isSecurityData } from "../../utils";
+import React from "react";
+import "./index.scss";
+var PntSecureBox = (prop) => {
+  const {
+    dataKey,
+    dataValue,
+    env,
+    gameId,
+    renderDom,
+    viewText,
+    pageId,
+    fetcher
+  } = prop;
+  const { securityData, requestSecurityData } = useHighSecurity(fetcher);
+  return /* @__PURE__ */ React.createElement("div", { className: "pnt-secure-box" }, /* @__PURE__ */ React.createElement(React.Fragment, null, renderDom(
+    isSecurityData(dataValue) ? securityData[dataKey] || "******" : dataValue
+  ), isSecurityData(dataValue) && !securityData.hasOwnProperty(dataKey) && /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "view-icon",
+      onClick: () => {
+        requestSecurityData({
+          env,
+          gameId,
+          pageId,
+          param: [
+            {
+              key: dataKey,
+              value: dataValue
+            }
+          ]
+        });
+      }
+    },
+    viewText || "View"
+  )));
+};
+var PntSecureBox_default = PntSecureBox;
+export {
+  PntSecureBox_default as default
+};

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

@@ -0,0 +1,19 @@
+.pnt-secure-box {
+  position: relative;
+  color: #333;
+  max-width: fit-content;
+
+  .view-icon {
+    position: absolute;
+    top: 1px;
+    right: -30px;
+    color: #3f8cff !important;
+    cursor: pointer;
+    font-size: small;
+  }
+
+  .security-value {
+    position: relative;
+    top: 3px;
+  }
+}

package/lib/esm/global.d.ts

@@ -0,0 +1,30 @@
+// src/global.d.ts
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+// 字体文件
+declare module '*.woff' {
+  const src: string;
+  export default src;
+}
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.json' {
+  const value: any;
+  export default value;
+}

package/lib/esm/hooks/useBtnPermission.d.ts

@@ -0,0 +1,67 @@
+/** 按钮权限值：1 有权限，-1 隐藏，-2 禁用 */
+export type BtnPermissionValue = number;
+/** 按钮权限映射：外层 key 为业务类型（全局为 'global' / 演示游戏为 '0' / 业务为具体 gameId / 兜底为 'no_permission_manner'），内层 key 为按钮标识符 */
+export type BtnPermissionMap = Record<string, Record<string, BtnPermissionValue>>;
+/** 演示游戏信息（来自用户信息，用于演示游戏判定） */
+export interface DemoGameInfo {
+    id: number | string;
+    name: string;
+}
+/** 当前服务信息（与 demoGame 比对判断是否演示游戏） */
+export interface ServiceInfo {
+    serviceType?: number | string;
+    serviceName?: string;
+}
+export interface UseBtnPermissionOptions {
+    /**
+     * 按钮权限映射（原从全局 store 注入，现改为入参注入）。
+     * 未传或取不到值时按有权限（1）处理。
+     */
+    permissions?: BtnPermissionMap;
+    /** 演示游戏信息；与 serviceInfo 同时传入才启用演示游戏判定 */
+    demoGame?: DemoGameInfo;
+    /** 当前服务信息 */
+    serviceInfo?: ServiceInfo;
+}
+/** 演示游戏在权限映射中的业务类型 key */
+export declare const DEMO_GAME_TYPE_KEY = "0";
+/** 无权限兜底配置的业务类型 key */
+export declare const NO_PERMISSION_MANNER_KEY = "no_permission_manner";
+/**
+ * 按钮权限 Hook（L3 业务 Hook）
+ *
+ * 融合 account-business-frontend 与 pnt-internal-tools-frontend 两版实现：
+ * - getBtnPermission(type, key)：获取按钮处理方式，1 有权限 / -1 隐藏 / -2 禁用，
+ *   取不到值时依次回退到 no_permission_manner 兜底配置、defaultValue（默认 1）；
+ * - 演示游戏（当前服务命中 demoGame）时固定使用 key '0' 的权限配置（account 版行为）；
+ * - 零业务侵入：权限列表与演示游戏信息均通过入参注入，不再依赖 redux / umi / dva。
+ *
+ * @param options.permissions 按钮权限映射
+ * @param options.demoGame 演示游戏信息
+ * @param options.serviceInfo 当前服务信息
+ * @returns btnPermission 权限映射原文；isDemoGame 是否为演示游戏；getBtnPermission 获取按钮权限
+ *
+ * @example
+ * ```tsx
+ * import { useBtnPermission } from '@pnt/business-components';
+ *
+ * const Demo = ({ btnPermission, userInfo }) => {
+ *   const { isDemoGame, getBtnPermission } = useBtnPermission({
+ *     permissions: btnPermission, // 例如 { global: { create: 1 }, no_permission_manner: { create: -2 } }
+ *     demoGame: userInfo?.demoGame, // 例如 { id: 11, name: 'DemoGame' }
+ *     serviceInfo: { serviceType: userInfo?.serviceType, serviceName: userInfo?.serviceName },
+ *   });
+ *
+ *   const createPerm = getBtnPermission('global', 'create'); // 1 | -1 | -2
+ *
+ *   if (createPerm === -1) return null; // 隐藏
+ *   return <Button disabled={createPerm === -2}>新建{isDemoGame ? '（演示）' : ''}</Button>;
+ * };
+ * ```
+ */
+export declare const useBtnPermission: (options?: UseBtnPermissionOptions) => {
+    btnPermission: BtnPermissionMap | undefined;
+    isDemoGame: boolean;
+    getBtnPermission: (type: string, key: string, defaultValue?: BtnPermissionValue) => BtnPermissionValue;
+};
+export default useBtnPermission;

package/lib/esm/hooks/useBtnPermission.js

@@ -0,0 +1,31 @@
+// src/hooks/useBtnPermission.ts
+import { useCallback, useMemo } from "react";
+var DEMO_GAME_TYPE_KEY = "0";
+var NO_PERMISSION_MANNER_KEY = "no_permission_manner";
+var useBtnPermission = (options = {}) => {
+  const { permissions, demoGame, serviceInfo } = options;
+  const isDemoGame = useMemo(() => {
+    if (!demoGame || !serviceInfo)
+      return false;
+    return serviceInfo.serviceType === demoGame.id && serviceInfo.serviceName === demoGame.name;
+  }, [demoGame, serviceInfo]);
+  const getBtnPermission = useCallback(
+    (type, key, defaultValue = 1) => {
+      var _a, _b;
+      return ((_a = permissions == null ? void 0 : permissions[isDemoGame ? DEMO_GAME_TYPE_KEY : type]) == null ? void 0 : _a[key]) ?? ((_b = permissions == null ? void 0 : permissions[NO_PERMISSION_MANNER_KEY]) == null ? void 0 : _b[key]) ?? defaultValue ?? 1;
+    },
+    [permissions, isDemoGame]
+  );
+  return {
+    btnPermission: permissions,
+    isDemoGame,
+    getBtnPermission
+  };
+};
+var useBtnPermission_default = useBtnPermission;
+export {
+  DEMO_GAME_TYPE_KEY,
+  NO_PERMISSION_MANNER_KEY,
+  useBtnPermission_default as default,
+  useBtnPermission
+};

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

@@ -0,0 +1,48 @@
+/** 高敏数据请求参数 */
+export interface HighSecurityRequestParams {
+    /** 游戏 ID */
+    gameId: string | number;
+    /** 环境标识 */
+    env: string | number;
+    /** 页面 ID（不传则默认取 location.pathname） */
+    pageId?: string;
+    /** 需要解锁的参数列表 */
+    param: Array<{
+        key: string;
+        value: string;
+    }>;
+}
+/** 高敏数据请求函数：返回 { ret, data } 结构且 ret === 0 视为成功 */
+export type HighSecurityFetcher = (params: HighSecurityRequestParams) => Promise<{
+    ret: number;
+    data?: Array<{
+        key: string;
+        value: string;
+    }>;
+}>;
+/**
+ * 高敏数据解锁 Hook（L3 业务 Hook）
+ *
+ * 管理高敏数据的解锁状态。零业务侵入：请求函数通过 fetcher 注入，
+ * 不再依赖内部 api/configs，避免将敏感配置打包进发布产物。
+ *
+ * @param fetcher 自定义高敏数据请求函数，需返回 { ret, data } 结构且 ret === 0 视为成功
+ * @returns securityData 已解锁的高敏数据映射；requestSecurityData 请求解锁指定数据
+ *
+ * @example
+ * ```tsx
+ * import http from '@/utils/request';
+ * import { useHighSecurity } from '@pnt-team/pnt-component-frontend';
+ *
+ * const Demo = () => {
+ *   const { securityData, requestSecurityData } = useHighSecurity((params) =>
+ *     http.post('/api/v3/business/game_info/high-security-decrypt', params).then(r => r.data)
+ *   );
+ *   // ...
+ * };
+ * ```
+ */
+export declare const useHighSecurity: (fetcher: HighSecurityFetcher) => {
+    securityData: Record<string, string>;
+    requestSecurityData: ({ gameId, param, env, pageId, }: HighSecurityRequestParams) => Promise<void>;
+};

package/lib/esm/hooks/useHighSecurity.js

@@ -0,0 +1,40 @@
+// src/hooks/useHighSecurity.ts
+import { useState } from "react";
+var securityCache = /* @__PURE__ */ new Map();
+var useHighSecurity = (fetcher) => {
+  const [securityData, setSecurityData] = useState(
+    () => {
+      const cached = {};
+      securityCache.forEach((value, key) => {
+        cached[key] = value;
+      });
+      return cached;
+    }
+  );
+  const requestSecurityData = async ({
+    gameId,
+    param,
+    env,
+    pageId
+  }) => {
+    const result = await fetcher({
+      gameId,
+      env: Number(env),
+      pageId: pageId || location.pathname,
+      param
+    });
+    if (result.ret === 0 && result.data) {
+      result.data.forEach((item) => {
+        securityCache.set(item.key, item.value);
+      });
+      setSecurityData(Object.fromEntries(securityCache));
+    }
+  };
+  return {
+    securityData,
+    requestSecurityData
+  };
+};
+export {
+  useHighSecurity
+};

package/lib/esm/hooks/useOsPlatformList.d.ts

@@ -0,0 +1,66 @@
+/** OS 平台数据类型定义 */
+export interface OsItem {
+    id: number;
+    os_name: string;
+    sdk_name: string;
+    status: number;
+    platform_id: number;
+}
+export interface PlatformItem {
+    id: number;
+    platform_name_zh: string;
+    platform_name_en: string;
+    status: number;
+}
+export interface OsPlatformData {
+    os_list: OsItem[];
+    platform_list: PlatformItem[];
+}
+/** OS/平台列表请求函数：返回 { code, msg, data } 结构且 code === 0 视为成功 */
+export type OsPlatformFetcher = () => Promise<{
+    code: number;
+    msg: string;
+    data: OsPlatformData;
+}>;
+/**
+ * 清除缓存（用于极少数需要强制刷新的场景，如后台更新了平台列表后）。
+ * @param fetcher 指定要清除的 fetcher；不传则清除全部缓存
+ */
+export declare const clearOsPlatformListCache: (fetcher?: OsPlatformFetcher) => void;
+/**
+ * OS/平台列表 Hook（L3 业务 Hook）
+ *
+ * 拉取 OS 与平台枚举数据并做模块级缓存，整个会话只请求一次；
+ * 并发调用共享同一个进行中的请求。
+ *
+ * 零业务侵入：数据接口通过 fetcher 注入，不再依赖内部 request/configs，
+ * 避免将敏感配置打包进发布产物。
+ *
+ * @param fetcher 自定义请求函数，需返回 { code, msg, data } 结构且 code === 0 视为成功
+ * @returns osPlatformList OS/平台数据，请求完成或命中缓存前为 undefined
+ *
+ * @example
+ * ```tsx
+ * import http from '@/utils/request';
+ * import { useOsPlatformList } from '@pnt-team/pnt-component-frontend';
+ *
+ * const Demo = () => {
+ *   const { osPlatformList } = useOsPlatformList(() =>
+ *     http.get('/api/internal/business/manage/osPlatformList').then(r => r.data)
+ *   );
+ *
+ *   return (
+ *     <Select
+ *       options={osPlatformList?.platform_list.map((p) => ({
+ *         label: p.platform_name_zh,
+ *         value: p.id,
+ *       }))}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export declare const useOsPlatformList: (fetcher: OsPlatformFetcher) => {
+    osPlatformList: OsPlatformData | undefined;
+};
+export default useOsPlatformList;