@pnt-team/pnt-component-frontend 0.0.91 → 0.0.95

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

@@ -0,0 +1,276 @@
+import usePntCosUploader from "../PntCosUploader";
+import PntImage from "../PntImage";
+import React, { useMemo, useState } from 'react';
+import { DeleteIcon, FileIcon, UploadIcon } from 'tdesign-icons-react';
+import { Progress, Upload } from 'tdesign-react';
+import "./index.scss";
+
+// ==========================================
+// 类型定义
+// ==========================================
+
+/**
+ * PntUpload 文案集合
+ * @description 所有内部展示文案均可通过 texts prop 自定义，用于多语言场景
+ */
+
+/**
+ * 校验/上传失败阶段
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ==========================================
+// 常量与工具
+// ==========================================
+
+const DEFAULT_TEXTS = {
+  uploading: '上传中',
+  uploadFailed: '上传失败，请重试',
+  sizeInvalid: '文件大小超出限制',
+  typeInvalid: '文件类型不支持',
+  selectFile: '选择文件',
+  reselect: '重新选择'
+};
+
+/**
+ * 将 accept 归一化为小写 token 列表
+ */
+const toAcceptList = accept => {
+  const raw = Array.isArray(accept) ? accept : accept ? accept.split(',') : [];
+  return raw.map(item => item.trim().toLowerCase()).filter(Boolean);
+};
+
+/**
+ * 校验文件类型是否匹配 accept
+ */
+const matchAccept = (file, acceptList) => {
+  if (!acceptList.length) {
+    return true;
+  }
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return acceptList.some(token => {
+    if (token.startsWith('.')) {
+      return name.endsWith(token);
+    }
+    if (token.endsWith('/*')) {
+      return !!type && type.startsWith(token.slice(0, -1));
+    }
+    return type === token;
+  });
+};
+
+/** 从 URL 中提取文件名（用于编辑态回显） */
+const getFileNameFromUrl = url => {
+  if (!url) {
+    return '';
+  }
+  const lastSeg = url.split('?')[0].split('/').pop() || '';
+  try {
+    return decodeURIComponent(lastSeg);
+  } catch {
+    return lastSeg;
+  }
+};
+
+// ==========================================
+// PntUpload 组件
+// ==========================================
+
+/**
+ * PntUpload 业务上传组件
+ * @description 基于 TDesign Upload + PntImage + usePntCosUploader，
+ * 内置 COS 凭证获取、直传、进度、校验、错误处理；支持图片预览 / 文件两种模式
+ *
+ * @example
+ * ```tsx
+ * <PntUpload
+ *   scene="default"
+ *   pathKey="marketing_icon"
+ *   context={{ gameId }}
+ *   accept="image/png"
+ *   sizeLimit={500 * 1024}
+ *   imagePreview
+ *   value={iconUrl}
+ *   onChange={(url) => setIconUrl(url)}
+ *   onRemove={() => setIconUrl('')}
+ * />
+ * ```
+ */
+const PntUpload = ({
+  value,
+  onChange,
+  onRemove,
+  onError,
+  scene,
+  pathKey,
+  context,
+  audience,
+  accept,
+  sizeLimit,
+  imagePreview = true,
+  previewStyle,
+  defaultImg,
+  fileNameStrategy,
+  useCdn,
+  getCredential,
+  normalizeCredential,
+  texts,
+  disabled = false,
+  style,
+  className
+}) => {
+  const [uploading, setUploading] = useState(false);
+  const [percent, setPercent] = useState(0);
+  const [errorText, setErrorText] = useState('');
+  const [lastFile, setLastFile] = useState(null);
+  const finalTexts = useMemo(() => ({
+    ...DEFAULT_TEXTS,
+    ...texts
+  }), [texts]);
+  const acceptList = useMemo(() => toAcceptList(accept), [accept]);
+  const acceptString = useMemo(() => acceptList.join(', '), [acceptList]);
+  const uploader = usePntCosUploader({
+    scene,
+    pathKey,
+    context,
+    audience,
+    fileNameStrategy,
+    useCdn,
+    getCredential,
+    normalizeCredential
+  });
+  const reportError = (message, phase, file) => {
+    setErrorText(message);
+    onError?.(new Error(message), phase, file);
+  };
+
+  /**
+   * 自定义上传：TDesign 选好文件后回调，内部完成校验 + COS 直传
+   */
+  const requestMethod = async files => {
+    const tdFile = Array.isArray(files) ? files[0] : files;
+    const file = tdFile?.raw;
+    if (!file) {
+      return {
+        status: 'fail',
+        error: 'no file',
+        response: {}
+      };
+    }
+
+    // 1. 本地校验：类型 / 大小
+    if (!matchAccept(file, acceptList)) {
+      reportError(finalTexts.typeInvalid, 'validate', file);
+      return {
+        status: 'fail',
+        error: finalTexts.typeInvalid,
+        response: {}
+      };
+    }
+    if (typeof sizeLimit === 'number' && file.size > sizeLimit) {
+      reportError(finalTexts.sizeInvalid, 'validate', file);
+      return {
+        status: 'fail',
+        error: finalTexts.sizeInvalid,
+        response: {}
+      };
+    }
+
+    // 2. COS 直传
+    setUploading(true);
+    setPercent(0);
+    setErrorText('');
+    try {
+      const result = await uploader.upload(file, setPercent);
+      setLastFile(file);
+      onChange?.(result.fileUrl, result.cosKey, file);
+      return {
+        status: 'success',
+        response: {
+          url: result.fileUrl
+        }
+      };
+    } catch (e) {
+      const err = e instanceof Error ? e : new Error(String(e));
+      setErrorText(finalTexts.uploadFailed);
+      onError?.(err, 'upload', file);
+      return {
+        status: 'fail',
+        error: err.message,
+        response: {}
+      };
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleRemove = e => {
+    // 阻止冒泡到 Upload 触发文件选择（DeleteIcon 与 PntImage 移除按钮均为 SVG 点击事件）
+    e.stopPropagation();
+    if (disabled || uploading) {
+      return;
+    }
+    setLastFile(null);
+    setErrorText('');
+    onRemove?.();
+  };
+  const wrapperClassName = ['pnt-upload', imagePreview ? 'pnt-upload--image' : 'pnt-upload--file', disabled ? 'pnt-upload--disabled' : '', className || ''].filter(Boolean).join(' ');
+  const displayName = lastFile?.name || getFileNameFromUrl(value);
+  return /*#__PURE__*/_jsxs("div", {
+    className: wrapperClassName,
+    style: style,
+    children: [/*#__PURE__*/_jsx(Upload, {
+      theme: "custom",
+      requestMethod: requestMethod,
+      accept: acceptString || undefined,
+      allowUploadDuplicateFile: true,
+      disabled: disabled || uploading,
+      className: "pnt-upload__trigger",
+      children: imagePreview ? /*#__PURE__*/_jsx(PntImage, {
+        src: value,
+        loading: uploading,
+        defaultImg: defaultImg,
+        style: previewStyle,
+        texts: {
+          uploading: finalTexts.uploading
+        },
+        onRemove: disabled ? undefined : handleRemove
+      }) : /*#__PURE__*/_jsx("div", {
+        className: "pnt-upload-file",
+        children: value && !uploading ? /*#__PURE__*/_jsxs("div", {
+          className: "pnt-upload-file__row",
+          children: [/*#__PURE__*/_jsx(FileIcon, {
+            className: "pnt-upload-file__icon"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "pnt-upload-file__name",
+            title: displayName,
+            children: displayName
+          }), !disabled && /*#__PURE__*/_jsx(DeleteIcon, {
+            className: "pnt-upload-file__delete",
+            onClick: handleRemove
+          })]
+        }) : uploading ? /*#__PURE__*/_jsxs("div", {
+          className: "pnt-upload-file__row pnt-upload-file__row--progress",
+          children: [/*#__PURE__*/_jsx(Progress, {
+            percentage: percent,
+            className: "pnt-upload-file__progress"
+          }), /*#__PURE__*/_jsxs("span", {
+            className: "pnt-upload-file__percent",
+            children: [finalTexts.uploading, " ", percent, "%"]
+          })]
+        }) : /*#__PURE__*/_jsxs("div", {
+          className: "pnt-upload-file__row pnt-upload-file__row--empty",
+          children: [/*#__PURE__*/_jsx(UploadIcon, {
+            className: "pnt-upload-file__icon"
+          }), /*#__PURE__*/_jsx("span", {
+            children: value ? finalTexts.reselect : finalTexts.selectFile
+          })]
+        })
+      })
+    }), errorText && /*#__PURE__*/_jsx("p", {
+      className: "pnt-upload__error",
+      children: errorText
+    })]
+  });
+};
+export default PntUpload;

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

@@ -0,0 +1,101 @@
+.pnt-upload {
+  display: inline-block;
+
+  // TDesign Upload custom 触发器外层
+  .pnt-upload__trigger {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  // 错误文案（图片 / 文件模式共用）
+  .pnt-upload__error {
+    margin: 4px 0 0;
+    color: var(--td-error-color, #d54941);
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  &--disabled {
+    .pnt-upload__trigger {
+      cursor: not-allowed;
+    }
+  }
+
+  // ========== 文件模式 ==========
+  .pnt-upload-file {
+    box-sizing: border-box;
+    min-width: 320px;
+    padding: 12px 16px;
+    border: 1px dashed var(--td-component-border, #dcdcdc);
+    border-radius: var(--td-radius-default, 6px);
+    background-color: var(--td-bg-color-container, #fff);
+    transition: border-color 0.2s;
+
+    &:hover {
+      border-color: var(--td-brand-color, #165dff);
+    }
+
+    &__row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--td-text-color-primary, #1f2329);
+      font-size: 14px;
+      line-height: 22px;
+
+      &--empty {
+        justify-content: flex-start;
+        color: var(--td-text-color-secondary, #6b7280);
+      }
+
+      &--progress {
+        align-items: center;
+      }
+    }
+
+    &__icon {
+      flex: none;
+      font-size: 20px;
+      color: var(--td-text-color-secondary, #6b7280);
+    }
+
+    &__name {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &__delete {
+      flex: none;
+      font-size: 18px;
+      color: var(--td-text-color-secondary, #6b7280);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--td-error-color, #d54941);
+      }
+    }
+
+    &__progress {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__percent {
+      flex: none;
+      color: var(--td-text-color-secondary, #6b7280);
+      font-size: 12px;
+    }
+  }
+
+  &--disabled {
+    .pnt-upload-file {
+      background-color: var(--td-bg-color-component-disabled, #f3f3f3);
+
+      &:hover {
+        border-color: var(--td-component-border, #dcdcdc);
+      }
+    }
+  }
+}

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

@@ -1,22 +1,62 @@
-/** 高敏数据请求参数（组件层友好命名） */
+/** 单个解锁项 */
+export interface HighSecurityParamItem {
+    /** 字段标识（与后端约定） */
+    key: string;
+    /** 参数密文（_high_security_: 前缀） */
+    value: string;
+}
+/** 高敏数据解锁请求参数（组件层友好命名，库内部转换为后端 snake_case） */
 export interface HighSecurityRequestParams {
-    /** 游戏 ID */
+    /** 业务 ID */
     gameId: string | number;
-    /** 环境标识 */
+    /** 环境标识（1=dev 2=test 3=prod，以各业务现有约定为准） */
     env: string | number;
-    /** 页面 ID（不传则默认取 location.pathname） */
+    /** 页面 ID（不传则默认取 location.pathname），用于操作日志和权限校验 */
     pageId?: string;
-    /** 需要解锁的参数列表 */
-    param: Array<{
-        key: string;
-        value: string;
-    }>;
+    /** 需要解锁的参数列表，支持批量 */
+    param: HighSecurityParamItem[];
+}
+/** hook 初始化 scope：传入后 securityData/isUnlocked 自动按该业务+环境过滤 */
+export interface UseHighSecurityOptions {
+    /** 当前业务 ID */
+    gameId?: string | number;
+    /** 当前环境 */
+    env?: string | number;
+}
+/** 清缓存过滤条件 */
+export interface ClearSecurityDataFilter {
+    gameId?: string | number;
+    env?: string | number;
+}
+export interface UseHighSecurityResult {
+    /** 当前 scope 下已解锁的明文（key 为纯字段名）；未传 scope 时为空对象 */
+    securityData: Record<string, string>;
+    /**
+     * 发起解锁
+     * @description
+     * - 已缓存的 key 直接返回缓存值，不再请求
+     * - 同一参数的在途请求自动去重
+     * - 成功：写入模块缓存并返回当次解密数组（含已缓存项）
+     * - 失败/部分失败：仅返回拿到的项（可能为空数组），不抛错
+     */
+    requestSecurityData: (params: HighSecurityRequestParams) => Promise<HighSecurityParamItem[]>;
+    /**
+     * 清缓存：不传参清空全部；传 gameId 清空该业务所有环境；
+     * 同时传 gameId+env 只清空该业务指定环境；仅传 env 清空所有业务该环境
+     */
+    clearSecurityData: (filter?: ClearSecurityDataFilter) => void;
+    /** 当前 scope 下某字段是否已解锁（两步式"查看 → 复制"UI 用） */
+    isUnlocked: (key: string) => boolean;
 }
 /**
- * 高敏数据解锁 Hook（PntSecureBox 内部依赖）
- * @internal 不对外导出,归 PntSecureBox 组件内部使用
+ * 高敏数据解锁 Hook（PntSecureBox 内部依赖，同时对外导出供"复制"等非展示场景使用）
+ *
+ * @example
+ * ```tsx
+ * // 展示场景请直接用 PntSecureBox；两步式"查看 → 复制"：
+ * const { isUnlocked, requestSecurityData, securityData } = useHighSecurity({ gameId, env });
+ * const res = await requestSecurityData({ gameId, env, param: [{ key: 'SDK_KEY', value }] });
+ * if (res.length) copy(securityData.SDK_KEY);
+ * ```
  */
-export declare const useHighSecurity: () => {
-    securityData: Record<string, string>;
-    requestSecurityData: ({ gameId, param, env, pageId, }: HighSecurityRequestParams) => Promise<void>;
-};
+export declare const useHighSecurity: (options?: UseHighSecurityOptions) => UseHighSecurityResult;

package/lib/esm/hooks/useHighSecurity.js

@@ -1,54 +1,196 @@
 import { businessGameInfoHighSecurityDecrypt } from "../api";
 import { usePntConfig } from "../config";
-import { useState } from 'react';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
 
-/** 高敏数据请求参数（组件层友好命名） */
+/** 单个解锁项 */
 
-const securityCache = new Map();
+/** 高敏数据解锁请求参数（组件层友好命名，库内部转换为后端 snake_case） */
+
+/** hook 初始化 scope：传入后 securityData/isUnlocked 自动按该业务+环境过滤 */
+
+/** 清缓存过滤条件 */
+
+// ==========================================
+// 模块级缓存（复合键隔离：gameId + env + key）
+// ==========================================
+
+const buildCacheKey = (gameId, env, key) => `${gameId}:${env}:${key}`;
+let securityCache = new Map();
+/** 在途请求去重：key 为 gameId+env+param 指纹 */
+const inflightRequests = new Map();
+const listeners = new Set();
+const emitChange = () => {
+  listeners.forEach(listener => listener());
+};
+const subscribe = listener => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const getSnapshot = () => securityCache;
+
+/** 写入解密结果并通知所有订阅实例 */
+const setEntries = (gameId, env, items) => {
+  if (!items.length) return;
+  const next = new Map(securityCache);
+  items.forEach(item => {
+    next.set(buildCacheKey(gameId, env, item.key), item.value);
+  });
+  securityCache = next;
+  emitChange();
+};
+
+/** 判断缓存复合键是否命中过滤条件 */
+const matchFilter = (cacheKey, filter) => {
+  if (!filter || filter.gameId === undefined && filter.env === undefined) {
+    return true;
+  }
+  const parts = cacheKey.split(':');
+  const [cachedGameId, cachedEnv] = parts;
+  if (filter.gameId !== undefined && cachedGameId !== String(filter.gameId)) {
+    return false;
+  }
+  if (filter.env !== undefined && cachedEnv !== String(filter.env)) {
+    return false;
+  }
+  return true;
+};
+const clearEntries = filter => {
+  const next = new Map();
+  securityCache.forEach((value, key) => {
+    if (!matchFilter(key, filter)) {
+      next.set(key, value);
+    }
+  });
+  if (next.size !== securityCache.size) {
+    securityCache = next;
+    emitChange();
+  }
+};
+const getDefaultPageId = () => typeof window !== 'undefined' && window.location ? window.location.pathname : '';
 
 /**
- * 高敏数据解锁 Hook（PntSecureBox 内部依赖）
- * @internal 不对外导出,归 PntSecureBox 组件内部使用
+ * 高敏数据解锁 Hook（PntSecureBox 内部依赖，同时对外导出供"复制"等非展示场景使用）
+ *
+ * @example
+ * ```tsx
+ * // 展示场景请直接用 PntSecureBox；两步式"查看 → 复制"：
+ * const { isUnlocked, requestSecurityData, securityData } = useHighSecurity({ gameId, env });
+ * const res = await requestSecurityData({ gameId, env, param: [{ key: 'SDK_KEY', value }] });
+ * if (res.length) copy(securityData.SDK_KEY);
+ * ```
  */
-export const useHighSecurity = () => {
+export const useHighSecurity = options => {
   const {
     http
   } = usePntConfig();
-  const [securityData, setSecurityData] = useState(() => {
-    const cached = {};
-    securityCache.forEach((value, key) => {
-      cached[key] = value;
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const scopeGameId = options?.gameId === undefined ? undefined : String(options.gameId);
+  const scopeEnv = options?.env === undefined ? undefined : String(options.env);
+  const hasScope = scopeGameId !== undefined && scopeEnv !== undefined;
+  const securityData = useMemo(() => {
+    if (!hasScope) return {};
+    const prefix = `${scopeGameId}:${scopeEnv}:`;
+    const result = {};
+    snapshot.forEach((value, cacheKey) => {
+      if (cacheKey.startsWith(prefix)) {
+        // 复合键第三段起即原始 dataKey（dataKey 自身可能含冒号）
+        result[cacheKey.slice(prefix.length)] = value;
+      }
     });
-    return cached;
-  });
-  const requestSecurityData = async ({
+    return result;
+  }, [snapshot, hasScope, scopeGameId, scopeEnv]);
+  const isUnlocked = useCallback(key => {
+    if (!hasScope) return false;
+    return snapshot.has(buildCacheKey(scopeGameId, scopeEnv, key));
+  }, [snapshot, hasScope, scopeGameId, scopeEnv]);
+  const requestSecurityData = useCallback(async ({
     gameId,
-    param,
     env,
-    pageId
+    pageId,
+    param
   }) => {
-    // 适配后端 BusinessGameInfoHighSecurityDecryptBody 结构
+    const gid = String(gameId);
+    const eid = String(env);
+    const result = new Array(param.length);
+    const missing = [];
+    const missingIndexes = [];
+
+    // 已缓存的 key 不再请求
+    param.forEach((item, index) => {
+      const cached = snapshot.get(buildCacheKey(gid, eid, item.key));
+      if (cached !== undefined) {
+        result[index] = {
+          key: item.key,
+          value: cached
+        };
+      } else {
+        missing.push({
+          key: item.key,
+          value: item.value
+        });
+        missingIndexes.push(index);
+      }
+    });
+    if (!missing.length) {
+      return result.filter(item => item !== undefined);
+    }
     const body = {
       game_id: Number(gameId),
       env: Number(env),
-      page_id: pageId || location.pathname,
-      param: param.map(i => ({
-        key: i.key,
-        value: i.value
-      }))
+      page_id: pageId || getDefaultPageId(),
+      param: missing
     };
-    const result = await businessGameInfoHighSecurityDecrypt(http, body);
-    // 适配 commonEesType：code === 0 视为成功
-    if (result.code === 0 && result.data) {
-      const data = result.data;
-      data.forEach(item => {
-        securityCache.set(item.key, item.value);
-      });
-      setSecurityData(Object.fromEntries(securityCache));
-    }
-  };
+
+    // 请求级并发去重：同一业务+环境+参数列表指纹在途时复用
+    const requestKey = `${gid}:${eid}:${missing.map(item => `${item.key}\u0001${item.value}`).join('\u0002')}`;
+    const existing = inflightRequests.get(requestKey);
+    if (existing) return existing;
+    const promise = (async () => {
+      try {
+        const res = await businessGameInfoHighSecurityDecrypt(http, body);
+        if (res.code === 0 && Array.isArray(res.data)) {
+          // yapi 生成类型为 Record<string, unknown>[]，按运行时结构收窄
+          const decrypted = res.data.map(raw => {
+            if (raw && typeof raw === 'object' && 'key' in raw) {
+              const item = raw;
+              if (typeof item.key === 'string') {
+                return {
+                  key: item.key,
+                  value: String(item.value ?? '')
+                };
+              }
+            }
+            return null;
+          }).filter(item => item !== null);
+          setEntries(gid, eid, decrypted);
+          decrypted.forEach(item => {
+            const index = missingIndexes.find(i => param[i].key === item.key);
+            if (index !== undefined) result[index] = item;
+          });
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn('[pnt-component-frontend] high-security-decrypt 解锁失败', res?.msg ?? res?.code);
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('[pnt-component-frontend] high-security-decrypt 请求异常', error);
+      } finally {
+        inflightRequests.delete(requestKey);
+      }
+      return result.filter(item => item !== undefined);
+    })();
+    inflightRequests.set(requestKey, promise);
+    return promise;
+  }, [http, snapshot]);
+  const clearSecurityData = useCallback(filter => {
+    clearEntries(filter);
+  }, []);
   return {
     securityData,
-    requestSecurityData
+    requestSecurityData,
+    clearSecurityData,
+    isUnlocked
   };
 };

package/lib/esm/index.d.ts

@@ -2,4 +2,10 @@ export { PntProvider, usePntConfig, type PntConfig, type commonEesType, } from '
 export { default as PntImage } from './components/PntImage';
 export { default as PntBusinessSelect } from './components/PntBusinessSelect';
 export { default as PntSecureBox } from './components/PntSecureBox';
+export { default as PntUpload } from './components/PntUpload';
+export type { PntUploadProps, PntUploadTexts, PntUploadErrorPhase, } from './components/PntUpload';
+export { default as usePntCosUploader, createPntCosUploader, normalizeSnakeCredential, type PntCosUploadOptions, type PntCosUploadResult, type PntCosUploader as PntCosUploaderInstance, type PntCosRequestOverrides, type FileNameStrategy, type CosScene, type GetCosCredentialParams, type NormalizedCosCredential, type NormalizeCredential, } from './components/PntCosUploader';
+export { useHighSecurity } from './hooks/useHighSecurity';
+export type { HighSecurityParamItem, HighSecurityRequestParams, UseHighSecurityOptions, UseHighSecurityResult, ClearSecurityDataFilter, } from './hooks/useHighSecurity';
+export { isSecurityData } from './utils';
 export { default as PntGeneralLayout } from './components/PntGeneralLayout';