@pnt-team/pnt-component-frontend 0.0.92 → 0.0.96

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

@@ -46,6 +46,7 @@ var PntImage = ({
   src,
   alt = "",
   defaultImg,
+  size,
   style,
   loading = false,
   onRemove,
@@ -54,6 +55,13 @@ var PntImage = ({
 }) => {
   const isUploadMode = typeof onRemove === "function";
   const finalSrc = (src == null ? void 0 : src.length) ? src : defaultImg || import_uploadImg.default;
+  const SIZE_MAP = { small: 36, medium: 60, large: 136 };
+  const sizeValue = SIZE_MAP[size != null ? size : "large"];
+  const sizeStyle = {
+    width: `${sizeValue}px`,
+    height: `${sizeValue}px`
+  };
+  const mergedStyle = { ...sizeStyle, ...style };
   const attach = container ? typeof container === "function" ? container : () => container : void 0;
   const finalTexts = { ...DEFAULT_TEXTS, ...texts };
   const UploadLoadingContent = (isImageLoading) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -125,7 +133,7 @@ var PntImage = ({
                 overlayTrigger: "hover",
                 fit: "contain",
                 className: "pnt-image",
-                style
+                style: mergedStyle
               }
             );
           }

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

@@ -28,12 +28,17 @@ var import_index = require("./index.scss");
 var import_jsx_runtime = require("react/jsx-runtime");
 var PntSecureBox = (prop) => {
   const { dataKey, dataValue, env, gameId, renderDom, viewText, pageId } = prop;
-  const { securityData, requestSecurityData } = (0, import_useHighSecurity.useHighSecurity)();
+  const { securityData, isUnlocked, requestSecurityData } = (0, import_useHighSecurity.useHighSecurity)({
+    gameId,
+    env
+  });
+  const isSecurity = (0, import_utils.isSecurityData)(dataValue);
+  const unlocked = isSecurity && isUnlocked(dataKey);
   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
+      unlocked ? securityData[dataKey] || "******" : isSecurity ? "******" : dataValue
     ),
-    (0, import_utils.isSecurityData)(dataValue) && !securityData.hasOwnProperty(dataKey) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    isSecurity && !isUnlocked(dataKey) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       {
         className: "view-icon",

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

@@ -0,0 +1,149 @@
+import type { CosScene } from "../../api/cos";
+import type { FileNameStrategy, PntCosUploadOptions } from "../PntCosUploader";
+import React, { FC } from 'react';
+import './index.scss';
+/**
+ * PntUpload 文案集合
+ * @description 所有内部展示文案均可通过 texts prop 自定义，用于多语言场景
+ */
+export interface PntUploadTexts {
+    /** 上传中文案 */
+    uploading?: string;
+    /** 上传失败文案 */
+    uploadFailed?: string;
+    /** 文件大小超出限制文案 */
+    sizeInvalid?: string;
+    /** 文件类型不支持文案 */
+    typeInvalid?: string;
+    /** 选择文件文案（无文件时） */
+    selectFile?: string;
+    /** 重新选择文案（已有文件时，非图片模式） */
+    reselect?: string;
+}
+/**
+ * 校验/上传失败阶段
+ */
+export type PntUploadErrorPhase = 'validate' | 'upload';
+export interface PntUploadProps {
+    /**
+     * 当前已上传文件 URL（受控）
+     */
+    value?: string;
+    /**
+     * 上传成功回调
+     * @param fileUrl 上传后的可访问 URL
+     * @param cosKey COS 对象 Key
+     * @param file 原始文件
+     */
+    onChange?: (fileUrl: string, cosKey: string, file: File) => void;
+    /**
+     * 删除回调
+     * @description 由消费方清空 value
+     */
+    onRemove?: () => void;
+    /**
+     * 异常回调（校验失败 / 上传失败）
+     * @param err 错误对象（校验失败时 message 为对应文案）
+     * @param phase 失败阶段：validate=本地校验，upload=凭证获取或 COS 上传
+     * @param file 原始文件
+     */
+    onError?: (err: Error, phase: PntUploadErrorPhase, file: File) => void;
+    /**
+     * 业务场景（透传给 PntCosUploader）
+     */
+    scene: CosScene;
+    /**
+     * 业务类型路径 key（透传给 PntCosUploader）
+     */
+    pathKey?: string;
+    /**
+     * 业务上下文（透传给 PntCosUploader）
+     */
+    context?: Record<string, string | number>;
+    /**
+     * 网关 audience（透传给 PntCosUploader）
+     * @default '/player-network'
+     */
+    audience?: string;
+    /**
+     * 文件类型限制
+     * @description 支持 MIME（'image/png'）、通配（'image/*'）、扩展名（'.zip'），可传数组
+     */
+    accept?: string | string[];
+    /**
+     * 文件大小限制（字节）
+     */
+    sizeLimit?: number;
+    /**
+     * 是否为图片预览模式
+     * @description true 使用 PntImage 预览；false 使用文件名 + 选择区域
+     * @default true
+     */
+    imagePreview?: boolean;
+    /**
+     * 图片预览区样式（imagePreview=true 生效，一般控制宽高）
+     */
+    previewStyle?: React.CSSProperties;
+    /**
+     * 默认占位图（imagePreview=true 生效）
+     */
+    defaultImg?: string;
+    /**
+     * 文件名生成策略（透传给 PntCosUploader）
+     * @default 'uuid'
+     */
+    fileNameStrategy?: FileNameStrategy;
+    /**
+     * 是否走 CDN 域名拼接（透传给 PntCosUploader）
+     * @default true
+     */
+    useCdn?: boolean;
+    /**
+     * 自定义凭证获取函数（透传给 PntCosUploader）
+     */
+    getCredential?: PntCosUploadOptions['getCredential'];
+    /**
+     * 自定义凭证响应归一化（透传给 PntCosUploader）
+     */
+    normalizeCredential?: PntCosUploadOptions['normalizeCredential'];
+    /**
+     * 多语言文案
+     * @description 传入即覆盖默认中文文案；仅对应字段会覆盖，未传字段仍用默认值
+     */
+    texts?: PntUploadTexts;
+    /**
+     * 禁用上传与删除
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 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('')}
+ * />
+ * ```
+ */
+declare const PntUpload: FC<PntUploadProps>;
+export default PntUpload;

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

@@ -0,0 +1,228 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PntUpload/index.tsx
+var PntUpload_exports = {};
+__export(PntUpload_exports, {
+  default: () => PntUpload_default
+});
+module.exports = __toCommonJS(PntUpload_exports);
+var import_PntCosUploader = __toESM(require("../PntCosUploader"));
+var import_PntImage = __toESM(require("../PntImage"));
+var import_react = require("react");
+var import_tdesign_icons_react = require("tdesign-icons-react");
+var import_tdesign_react = require("tdesign-react");
+var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_TEXTS = {
+  uploading: "上传中",
+  uploadFailed: "上传失败，请重试",
+  sizeInvalid: "文件大小超出限制",
+  typeInvalid: "文件类型不支持",
+  selectFile: "选择文件",
+  reselect: "重新选择"
+};
+var toAcceptList = (accept) => {
+  const raw = Array.isArray(accept) ? accept : accept ? accept.split(",") : [];
+  return raw.map((item) => item.trim().toLowerCase()).filter(Boolean);
+};
+var 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;
+  });
+};
+var getFileNameFromUrl = (url) => {
+  if (!url) {
+    return "";
+  }
+  const lastSeg = url.split("?")[0].split("/").pop() || "";
+  try {
+    return decodeURIComponent(lastSeg);
+  } catch {
+    return lastSeg;
+  }
+};
+var 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] = (0, import_react.useState)(false);
+  const [percent, setPercent] = (0, import_react.useState)(0);
+  const [errorText, setErrorText] = (0, import_react.useState)("");
+  const [lastFile, setLastFile] = (0, import_react.useState)(null);
+  const finalTexts = (0, import_react.useMemo)(() => ({ ...DEFAULT_TEXTS, ...texts }), [texts]);
+  const acceptList = (0, import_react.useMemo)(() => toAcceptList(accept), [accept]);
+  const acceptString = (0, import_react.useMemo)(() => acceptList.join(", "), [acceptList]);
+  const uploader = (0, import_PntCosUploader.default)({
+    scene,
+    pathKey,
+    context,
+    audience,
+    fileNameStrategy,
+    useCdn,
+    getCredential,
+    normalizeCredential
+  });
+  const reportError = (message, phase, file) => {
+    setErrorText(message);
+    onError == null ? void 0 : onError(new Error(message), phase, file);
+  };
+  const requestMethod = async (files) => {
+    const tdFile = Array.isArray(files) ? files[0] : files;
+    const file = tdFile == null ? void 0 : tdFile.raw;
+    if (!file) {
+      return { status: "fail", error: "no file", response: {} };
+    }
+    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: {} };
+    }
+    setUploading(true);
+    setPercent(0);
+    setErrorText("");
+    try {
+      const result = await uploader.upload(file, setPercent);
+      setLastFile(file);
+      onChange == null ? void 0 : 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 == null ? void 0 : onError(err, "upload", file);
+      return { status: "fail", error: err.message, response: {} };
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    if (disabled || uploading) {
+      return;
+    }
+    setLastFile(null);
+    setErrorText("");
+    onRemove == null ? void 0 : onRemove();
+  };
+  const wrapperClassName = [
+    "pnt-upload",
+    imagePreview ? "pnt-upload--image" : "pnt-upload--file",
+    disabled ? "pnt-upload--disabled" : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  const displayName = (lastFile == null ? void 0 : lastFile.name) || getFileNameFromUrl(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: wrapperClassName, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tdesign_react.Upload,
+      {
+        theme: "custom",
+        requestMethod,
+        accept: acceptString || void 0,
+        allowUploadDuplicateFile: true,
+        disabled: disabled || uploading,
+        className: "pnt-upload__trigger",
+        children: imagePreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_PntImage.default,
+          {
+            src: value,
+            loading: uploading,
+            defaultImg,
+            style: previewStyle,
+            texts: { uploading: finalTexts.uploading },
+            onRemove: disabled ? void 0 : handleRemove
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-upload-file", children: value && !uploading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-upload-file__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tdesign_icons_react.FileIcon, { className: "pnt-upload-file__icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pnt-upload-file__name", title: displayName, children: displayName }),
+          !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tdesign_icons_react.DeleteIcon,
+            {
+              className: "pnt-upload-file__delete",
+              onClick: handleRemove
+            }
+          )
+        ] }) : uploading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-upload-file__row pnt-upload-file__row--progress", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tdesign_react.Progress,
+            {
+              percentage: percent,
+              className: "pnt-upload-file__progress"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "pnt-upload-file__percent", children: [
+            finalTexts.uploading,
+            " ",
+            percent,
+            "%"
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-upload-file__row pnt-upload-file__row--empty", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tdesign_icons_react.UploadIcon, { className: "pnt-upload-file__icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: value ? finalTexts.reselect : finalTexts.selectFile })
+        ] }) })
+      }
+    ),
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "pnt-upload__error", children: errorText })
+  ] });
+};
+var PntUpload_default = PntUpload;

package/lib/cjs/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/cjs/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;