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

package/lib/{esm/components/PntImagePreview → cjs/components/PntImage}/index.scss

@@ -1,15 +1,15 @@
-.pnt-image-preview-wrapper {
+.pnt-image-wrapper {
   position: relative;
 
-  .pnt-image-preview-progress,
-  .pnt-image-preview-upload-progress {
+  .pnt-image-progress,
+  .pnt-image-upload-progress {
     width: 136px;
     height: 136px;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .pnt-image-preview-loading {
+    .pnt-image-loading {
       width: 100%;
       height: 100%;
       text-align: center;
@@ -33,18 +33,25 @@
     }
   }
 
-  .pnt-image-preview {
+  .pnt-image {
     width: 136px;
     height: 136px;
 
-    .pnt-image-preview-mask {
+    .pnt-image-mask {
       background: rgba(0, 0, 0, 60%);
       color: #fff;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      .pnt-image-preview-divider {
+
+      // 纯预览模式：半透明遮罩，鼠标手型
+      &--basic {
+        cursor: pointer;
+      }
+
+      // 上传预览模式：分隔线
+      .pnt-image-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/cjs/index.d.ts

@@ -1,5 +1,5 @@
 export { PntProvider, usePntConfig, type PntConfig, type commonEesType, } from './config';
-export { default as PntImagePreview } from './components/PntImagePreview';
+export { default as PntImage } from './components/PntImage';
 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

@@ -31,14 +31,14 @@ var src_exports = {};
 __export(src_exports, {
   PntBusinessSelect: () => import_PntBusinessSelect.default,
   PntGeneralLayout: () => import_PntGeneralLayout.default,
-  PntImagePreview: () => import_PntImagePreview.default,
+  PntImage: () => import_PntImage.default,
   PntProvider: () => import_config.PntProvider,
   PntSecureBox: () => import_PntSecureBox.default,
   usePntConfig: () => import_config.usePntConfig
 });
 module.exports = __toCommonJS(src_exports);
 var import_config = require("./config");
-var import_PntImagePreview = __toESM(require("./components/PntImagePreview"));
+var import_PntImage = __toESM(require("./components/PntImage"));
 var import_PntBusinessSelect = __toESM(require("./components/PntBusinessSelect"));
 var import_PntSecureBox = __toESM(require("./components/PntSecureBox"));
 var import_PntGeneralLayout = __toESM(require("./components/PntGeneralLayout"));
@@ -46,7 +46,7 @@ var import_PntGeneralLayout = __toESM(require("./components/PntGeneralLayout"));
 0 && (module.exports = {
   PntBusinessSelect,
   PntGeneralLayout,
-  PntImagePreview,
+  PntImage,
   PntProvider,
   PntSecureBox,
   usePntConfig

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

@@ -153,36 +153,19 @@ const PntBusinessSelect = props => {
   // append=true 为滚动翻页（追加），append=false 为初始化/搜索/重置（替换）
   const fetchData = useCallback(async (kw, page, append) => {
     if (append) {
-      if (appendLoadingRef.current || loadingRef.current) {
-        console.log('[PntBS] fetchData APPEND blocked: loading=' + loadingRef.current + ' appendLoading=' + appendLoadingRef.current);
-        return;
-      }
+      if (appendLoadingRef.current || loadingRef.current) return;
       const meta = listMetaRef.current;
-      if (meta.keyword !== kw) {
-        console.log('[PntBS] fetchData APPEND blocked: kw mismatch ' + kw + ' vs ' + meta.keyword);
-        return;
-      }
-      if (page <= meta.page) {
-        console.log('[PntBS] fetchData APPEND blocked: page ' + page + ' <= ' + meta.page);
-        return;
-      }
-      if (optionsRef.current.length >= meta.total) {
-        console.log('[PntBS] fetchData APPEND blocked: no more');
-        return;
-      }
+      if (meta.keyword !== kw) return;
+      if (page <= meta.page) return;
+      if (optionsRef.current.length >= meta.total) return;
       appendLoadingRef.current = true;
     }
     const seq = ++fetchSeqRef.current;
-    console.log('[PntBS] fetchData START kw="' + kw + '" page=' + page + ' append=' + append + ' seq=' + seq);
     loadingRef.current = true;
     setLoading(true);
     try {
       const res = await requestFn(buildParams(kw, page));
-      console.log('[PntBS] fetchData GOT seq=' + seq + ' latestSeq=' + fetchSeqRef.current + ' code=' + res.code);
-      if (seq !== fetchSeqRef.current) {
-        console.log('[PntBS] fetchData seq MISMATCH - DROPPED (seq=' + seq + ' latest=' + fetchSeqRef.current + ')');
-        return;
-      }
+      if (seq !== fetchSeqRef.current) return;
       if (res.code === 0 && res.data) {
         const newList = res.data.list || [];
         const resTotal = res.data.pagination?.total || 0;
@@ -200,15 +183,11 @@ const PntBusinessSelect = props => {
           page,
           total: resTotal
         };
-        console.log('[PntBS] fetchData SET options count=' + nextList.length + ' first=' + (nextList[0]?.name || 'null'));
         setOptions(nextList);
         onLoadedRef.current?.(nextList);
-      } else {
-        console.log('[PntBS] fetchData BAD RESPONSE code=' + res.code + ' hasData=' + !!res.data);
       }
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      console.log('[PntBS] fetchData ERROR seq=' + seq + ' kw="' + kw + '": ' + msg);
+    } catch {
+      // 请求失败静默处理，不阻塞主流程
     } finally {
       if (append) appendLoadingRef.current = false;
       if (seq === fetchSeqRef.current) {
@@ -221,12 +200,9 @@ const PntBusinessSelect = props => {
   // ---- 远程搜索（防抖） ----
   const handleSearch = useCallback(val => {
     keywordRef.current = val;
-    console.log('[PntBS] handleSearch val="' + val + '" debounceMs=' + searchDebounce);
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
-      const kw = keywordRef.current;
-      console.log('[PntBS] handleSearch timer fired, fetchData kw="' + kw + '" append=false seq++');
-      fetchData(kw, 1, false);
+      fetchData(keywordRef.current, 1, false);
     }, searchDebounce);
   }, [fetchData, searchDebounce]);
 
@@ -250,7 +226,6 @@ const PntBusinessSelect = props => {
     //    上次搜索结果，关闭时必须重置回默认列表。
     keywordRef.current = '';
     if (listMetaRef.current.keyword) {
-      console.log('[PntBS] popupClose resetting from kw="' + listMetaRef.current.keyword + '"');
       fetchData('', 1, false);
     }
   }, [fetchData]);
@@ -475,7 +450,6 @@ const PntBusinessSelect = props => {
   // 点击 clear 按钮（X）时重置列表——TDesign 的 onClearValue 只 setInputValue，
   // 不触发 handleInputChange / onSearch，所以需要主动重置。
   const handleClear = useCallback(() => {
-    console.log('[PntBS] handleClear X-button clicked, resetting');
     keywordRef.current = '';
     if (debounceRef.current) clearTimeout(debounceRef.current);
     if (listMetaRef.current.keyword) {

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

@@ -0,0 +1,87 @@
+import React, { FC } from 'react';
+import './index.scss';
+/**
+ * PntImage 文案集合
+ * @description 所有内部展示文案均可通过 texts prop 自定义，用于多语言场景
+ */
+export interface PntImageTexts {
+    /** 上传中占位文案（仅上传预览模式生效） */
+    uploading?: string;
+    /** 图片加载中占位文案（纯预览模式生效，透传给 tdesign Image loading） */
+    loading?: string;
+    /** 图片加载失败占位文案（纯预览模式生效，透传给 tdesign Image error） */
+    loadFailed?: string;
+}
+export interface PntImageProps {
+    /**
+     * 图片地址
+     * @description 图片的完整 URL 地址；为空则展示 defaultImg 或内置 uploadImg
+     */
+    src: string | undefined;
+    /**
+     * alt 文本
+     * @description 图片加载失败时的替代文本，纯预览模式必传以提升可访问性
+     */
+    alt?: string;
+    /**
+     * 默认图片
+     * @description src 为空时展示的占位图；不传则使用内置的 uploadImg
+     */
+    defaultImg?: string;
+    /**
+     * 自定义样式
+     * @description 一般用于控制图片宽高
+     */
+    style?: React.CSSProperties;
+    /**
+     * 上传中状态
+     * @description 当为 true 时显示上传中 loading 占位，阻止其他操作；仅在上传预览模式（传入 onRemove）生效
+     */
+    loading?: boolean;
+    /**
+     * 删除回调
+     * @description 传入即启用「上传预览模式」，mask 含预览 + 删除按钮；不传则为「纯预览模式」
+     * @param e - 事件对象
+     */
+    onRemove?: (e: any) => void;
+    /**
+     * attach 容器
+     * @description 弹窗场景下需要透传给 tdesign ImageViewer 的 attach，避免预览浮层被父容器裁剪
+     */
+    container?: HTMLElement | (() => HTMLElement);
+    /**
+     * 多语言文案
+     * @description 传入即覆盖默认中文文案；仅对应字段会覆盖，未传字段仍用默认值
+     */
+    texts?: PntImageTexts;
+}
+/**
+ * PntImage 业务图片组件
+ * @description 统一覆盖「上传图片预览」和「纯图片预览」两种业务场景，避免业务侧维护两套组件
+ *
+ * 模式判定：传入 `onRemove` 即为上传预览模式，否则为纯预览模式
+ *
+ * @example
+ * ```tsx
+ * // 上传预览模式
+ * <PntImage
+ *   src={iconUrl}
+ *   loading={loading}
+ *   defaultImg={defaultImg}
+ *   onRemove={handleRemove}
+ *   style={{ width: 136, height: 136 }}
+ * />
+ *
+ * // 纯预览模式
+ * <PntImage
+ *   src={url}
+ *   alt="avatar"
+ *   style={{ width: 60, height: 60 }}
+ *   container={container}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 业务图片组件
+ */
+declare const PntImage: FC<PntImageProps>;
+export default PntImage;

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

@@ -0,0 +1,181 @@
+import uploadImg from "../../assets/images/uploadImg.png";
+import React from 'react';
+import { BrowseIcon, DeleteIcon, ImageErrorIcon, ImageIcon, LoadingIcon } from 'tdesign-icons-react';
+import { Image, ImageViewer, Space } from 'tdesign-react';
+import "./index.scss";
+
+/**
+ * PntImage 文案集合
+ * @description 所有内部展示文案均可通过 texts prop 自定义，用于多语言场景
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 默认中文文案
+ */
+const DEFAULT_TEXTS = {
+  uploading: '上传中',
+  loading: '加载中',
+  loadFailed: '加载失败'
+};
+/**
+ * PntImage 业务图片组件
+ * @description 统一覆盖「上传图片预览」和「纯图片预览」两种业务场景，避免业务侧维护两套组件
+ *
+ * 模式判定：传入 `onRemove` 即为上传预览模式，否则为纯预览模式
+ *
+ * @example
+ * ```tsx
+ * // 上传预览模式
+ * <PntImage
+ *   src={iconUrl}
+ *   loading={loading}
+ *   defaultImg={defaultImg}
+ *   onRemove={handleRemove}
+ *   style={{ width: 136, height: 136 }}
+ * />
+ *
+ * // 纯预览模式
+ * <PntImage
+ *   src={url}
+ *   alt="avatar"
+ *   style={{ width: 60, height: 60 }}
+ *   container={container}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 业务图片组件
+ */
+const PntImage = ({
+  src,
+  alt = '',
+  defaultImg,
+  style,
+  loading = false,
+  onRemove,
+  container,
+  texts
+}) => {
+  // 模式判定：传入 onRemove 即为上传预览模式
+  const isUploadMode = typeof onRemove === 'function';
+  const finalSrc = src?.length ? src : defaultImg || uploadImg;
+  const attach = container ? typeof container === 'function' ? container : () => container : undefined;
+  // 合并文案：texts 字段覆盖默认中文
+  const finalTexts = {
+    ...DEFAULT_TEXTS,
+    ...texts
+  };
+
+  /**
+   * 上传预览模式的 loading 占位
+   * @param isImageLoading - 是否为 tdesign Image 内部图片加载状态（区别于上传中状态）
+   */
+  const UploadLoadingContent = isImageLoading => /*#__PURE__*/_jsx("div", {
+    className: isImageLoading ? 'pnt-image-progress' : 'pnt-image-upload-progress',
+    style: style,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "pnt-image-loading",
+      children: [/*#__PURE__*/_jsx(LoadingIcon, {
+        size: "18px",
+        name: "loading"
+      }), /*#__PURE__*/_jsx("p", {
+        children: finalTexts.uploading
+      })]
+    })
+  });
+
+  /**
+   * 纯预览模式：图片加载中占位（透传给 tdesign Image loading）
+   */
+  const basicImageLoading = /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    align: "center",
+    size: "small",
+    style: {
+      color: 'var(--td-text-color-disabled)'
+    },
+    children: [/*#__PURE__*/_jsx(ImageIcon, {
+      size: 24
+    }), finalTexts.loading]
+  });
+
+  /**
+   * 纯预览模式：图片加载失败占位（透传给 tdesign Image error）
+   */
+  const basicImageError = /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    align: "center",
+    size: "small",
+    children: [/*#__PURE__*/_jsx(ImageErrorIcon, {
+      size: 24
+    }), finalTexts.loadFailed]
+  });
+
+  /**
+   * 纯预览模式 mask：半透明遮罩，点击触发预览
+   */
+  const basicMask = open => /*#__PURE__*/_jsx("div", {
+    className: "pnt-image-mask pnt-image-mask--basic",
+    style: {
+      background: 'rgba(0,0,0,.1)',
+      height: '100%'
+    },
+    onClick: open
+  });
+
+  /**
+   * 上传预览模式 mask：预览按钮 + 分隔线 + 删除按钮
+   */
+  const uploadMask = open => /*#__PURE__*/_jsxs("div", {
+    className: "pnt-image-mask pnt-image-mask--upload",
+    children: [/*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(BrowseIcon, {
+        onClick: open,
+        size: "16px",
+        name: "browse"
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      className: "pnt-image-divider"
+    }), /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(DeleteIcon, {
+        onClick: onRemove,
+        size: "16px",
+        name: "delete"
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: "pnt-image-wrapper",
+    onClick: e => {
+      // 上传预览模式：图片已上传或上传中时阻止冒泡，避免触发外层 Upload
+      if (isUploadMode && (src?.length || loading)) {
+        e.stopPropagation();
+      }
+    },
+    children: isUploadMode && loading ? UploadLoadingContent(false) : /*#__PURE__*/_jsx(ImageViewer, {
+      images: [finalSrc],
+      closeOnOverlay: true
+      // @ts-expect-error - attach 在 tdesign-react 运行时支持但未在类型定义中声明（弹窗 attach 容器）
+      ,
+      attach: attach,
+      trigger: ({
+        open
+      }) => {
+        const mask = isUploadMode ? uploadMask(open) : basicMask(open);
+        return /*#__PURE__*/_jsx(Image, {
+          alt: alt,
+          src: finalSrc,
+          loading: isUploadMode ? UploadLoadingContent(true) : basicImageLoading,
+          error: isUploadMode ? undefined : basicImageError,
+          overlayContent: isUploadMode ? src ? mask : /*#__PURE__*/_jsx(_Fragment, {}) : mask,
+          overlayTrigger: "hover",
+          fit: "contain",
+          className: "pnt-image",
+          style: style
+        });
+      }
+    })
+  });
+};
+export default PntImage;

package/lib/{cjs/components/PntImagePreview → esm/components/PntImage}/index.scss

@@ -1,15 +1,15 @@
-.pnt-image-preview-wrapper {
+.pnt-image-wrapper {
   position: relative;
 
-  .pnt-image-preview-progress,
-  .pnt-image-preview-upload-progress {
+  .pnt-image-progress,
+  .pnt-image-upload-progress {
     width: 136px;
     height: 136px;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .pnt-image-preview-loading {
+    .pnt-image-loading {
       width: 100%;
       height: 100%;
       text-align: center;
@@ -33,18 +33,25 @@
     }
   }
 
-  .pnt-image-preview {
+  .pnt-image {
     width: 136px;
     height: 136px;
 
-    .pnt-image-preview-mask {
+    .pnt-image-mask {
       background: rgba(0, 0, 0, 60%);
       color: #fff;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      .pnt-image-preview-divider {
+
+      // 纯预览模式：半透明遮罩，鼠标手型
+      &--basic {
+        cursor: pointer;
+      }
+
+      // 上传预览模式：分隔线
+      .pnt-image-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/index.d.ts

@@ -1,5 +1,5 @@
 export { PntProvider, usePntConfig, type PntConfig, type commonEesType, } from './config';
-export { default as PntImagePreview } from './components/PntImagePreview';
+export { default as PntImage } from './components/PntImage';
 export { default as PntBusinessSelect } from './components/PntBusinessSelect';
 export { default as PntSecureBox } from './components/PntSecureBox';
 export { default as PntGeneralLayout } from './components/PntGeneralLayout';

package/lib/esm/index.js

@@ -8,7 +8,7 @@
 export { PntProvider, usePntConfig } from "./config";
 
 // ---------- L1 基础展示组件 ----------
-export { default as PntImagePreview } from "./components/PntImagePreview";
+export { default as PntImage } from "./components/PntImage";
 
 // ---------- L2 业务复合组件 ----------
 export { default as PntBusinessSelect } from "./components/PntBusinessSelect";

package/lib/umd/pnt-component-frontend.min.css

@@ -1 +1 @@
-.pnt-image-preview-wrapper{position:relative}.pnt-image-preview-wrapper .pnt-image-preview-progress,.pnt-image-preview-wrapper .pnt-image-preview-upload-progress{align-items:center;display:flex;height:8.5rem;justify-content:center;width:8.5rem}.pnt-image-preview-wrapper .pnt-image-preview-progress .pnt-image-preview-loading,.pnt-image-preview-wrapper .pnt-image-preview-upload-progress .pnt-image-preview-loading{align-items:center;background-color:#f7f8fa;border-radius:.25rem;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center;width:100%}.pnt-image-preview-wrapper .pnt-image-preview-progress .pnt-image-preview-loading svg,.pnt-image-preview-wrapper .pnt-image-preview-upload-progress .pnt-image-preview-loading svg{color:var(--td-brand-color);font-size:1.5rem}.pnt-image-preview-wrapper .pnt-image-preview-progress .pnt-image-preview-loading p,.pnt-image-preview-wrapper .pnt-image-preview-upload-progress .pnt-image-preview-loading p{color:#808191;font-size:.75rem;margin-top:.25rem}.pnt-image-preview-wrapper .pnt-image-preview{height:8.5rem;width:8.5rem}.pnt-image-preview-wrapper .pnt-image-preview .pnt-image-preview-mask{align-items:center;background:rgba(0,0,0,.6);color:#fff;display:flex;height:100%;justify-content:center}.pnt-image-preview-wrapper .pnt-image-preview .pnt-image-preview-mask .pnt-image-preview-divider{border-left:.0625rem solid var(--td-text-color-anti);height:var(--td-comp-size-xxxs);margin:0 var(--td-comp-margin-l)}.pnt-business-select{width:100%}.pnt-business-select-option-label{display:block;width:100%}.pnt-business-select-popup .t-popup__content .t-loading,.pnt-business-select-popup .t-popup__content .total-wrapper{align-items:center;display:flex;font-weight:400;height:2.25rem;line-height:1.25rem;padding:0 .875rem}.pnt-business-select-popup .t-popup__content .total-wrapper{color:#808191;font-size:.875rem}.pnt-secure-box{color:#333;max-width:-moz-fit-content;max-width:fit-content;position:relative}.pnt-secure-box .view-icon{color:#3f8cff!important;cursor:pointer;font-size:small;position:absolute;right:-1.875rem;top:.0625rem}.pnt-secure-box .security-value{position:relative;top:.1875rem}.pnt-general-layout{--pnt-layout-body-padding:1.5rem;--pnt-layout-card-radius:0.25rem;background-color:transparent;height:100%}.pnt-general-layout .t-layout__header{align-items:stretch;border-bottom:.0625rem solid #f0f3f6;display:flex;flex-shrink:0;height:auto;justify-content:space-between}.pnt-general-layout .t-layout__header .header-title{align-items:center;display:inline-flex;padding:1.5rem}.pnt-general-layout .t-layout__header .header-title .goback-icon{color:#3f8cff;cursor:pointer;margin-right:.75rem}.pnt-general-layout .t-layout__header .header-title .title{font-size:1.25rem;font-weight:600;line-height:1.5rem}.pnt-general-layout .t-layout__header .header-operation{align-items:center;display:flex;padding-right:1.5rem}.pnt-general-layout .t-layout__header .header-operation .t-button+.t-button{margin-left:.75rem}.pnt-general-layout--borderless .t-layout__header{border-bottom:none}.pnt-general-layout .general-layout-sub-header{border-bottom:.0625rem solid #f0f3f6;flex-shrink:0}.pnt-general-layout .general-layout-body{background:#fafafa;flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--pnt-layout-body-padding)}.pnt-general-layout .general-layout-body>div.t-card,.pnt-general-layout .general-layout-body>div.t-loading__parent>div.t-card,.pnt-general-layout .general-layout-body>div.tea-card,.pnt-general-layout .general-layout-body>div[class*=-block],.pnt-general-layout .general-layout-body>div[class*=-wrapper]{border-radius:var(--pnt-layout-card-radius);box-shadow:none;margin-bottom:1.5rem}.pnt-general-layout .general-layout-body>div.t-card .t-card__body,.pnt-general-layout .general-layout-body>div.t-loading__parent>div.t-card .t-card__body,.pnt-general-layout .general-layout-body>div.tea-card .t-card__body,.pnt-general-layout .general-layout-body>div[class*=-block] .t-card__body,.pnt-general-layout .general-layout-body>div[class*=-wrapper] .t-card__body{border-radius:var(--pnt-layout-card-radius)}.pnt-general-layout .general-layout-body>div.t-loading__parent>div:last-child.t-card,.pnt-general-layout .general-layout-body>div:last-child,.pnt-general-layout .general-layout-body>div:last-child.t-card,.pnt-general-layout .general-layout-body>div:last-child.tea-card,.pnt-general-layout .general-layout-body>div:last-child[class*=-block],.pnt-general-layout .general-layout-body>div:last-child[class*=-wrapper]{margin-bottom:0}.pnt-general-layout .t-layout__footer{background:#fff;border-top:.0625rem solid #f0f3f6;flex-shrink:0;padding:1.125rem 1.5rem}.pnt-general-layout .t-layout__footer .t-button{font-size:.875rem;font-weight:600;height:2.25rem;min-width:5.75rem}.pnt-general-layout .t-layout__footer .t-button+.t-button{margin-left:.75rem}.pnt-general-layout--footer-auto .t-layout__footer .t-button{font-size:inherit;font-weight:inherit;height:auto;min-width:0}
+.pnt-image-wrapper{position:relative}.pnt-image-wrapper .pnt-image-progress,.pnt-image-wrapper .pnt-image-upload-progress{align-items:center;display:flex;height:8.5rem;justify-content:center;width:8.5rem}.pnt-image-wrapper .pnt-image-progress .pnt-image-loading,.pnt-image-wrapper .pnt-image-upload-progress .pnt-image-loading{align-items:center;background-color:#f7f8fa;border-radius:.25rem;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center;width:100%}.pnt-image-wrapper .pnt-image-progress .pnt-image-loading svg,.pnt-image-wrapper .pnt-image-upload-progress .pnt-image-loading svg{color:var(--td-brand-color);font-size:1.5rem}.pnt-image-wrapper .pnt-image-progress .pnt-image-loading p,.pnt-image-wrapper .pnt-image-upload-progress .pnt-image-loading p{color:#808191;font-size:.75rem;margin-top:.25rem}.pnt-image-wrapper .pnt-image{height:8.5rem;width:8.5rem}.pnt-image-wrapper .pnt-image .pnt-image-mask{align-items:center;background:rgba(0,0,0,.6);color:#fff;display:flex;height:100%;justify-content:center}.pnt-image-wrapper .pnt-image .pnt-image-mask--basic{cursor:pointer}.pnt-image-wrapper .pnt-image .pnt-image-mask .pnt-image-divider{border-left:.0625rem solid var(--td-text-color-anti);height:var(--td-comp-size-xxxs);margin:0 var(--td-comp-margin-l)}.pnt-business-select{width:100%}.pnt-business-select-option-label{display:block;width:100%}.pnt-business-select-popup .t-popup__content .t-loading,.pnt-business-select-popup .t-popup__content .total-wrapper{align-items:center;display:flex;font-weight:400;height:2.25rem;line-height:1.25rem;padding:0 .875rem}.pnt-business-select-popup .t-popup__content .total-wrapper{color:#808191;font-size:.875rem}.pnt-secure-box{color:#333;max-width:-moz-fit-content;max-width:fit-content;position:relative}.pnt-secure-box .view-icon{color:#3f8cff!important;cursor:pointer;font-size:small;position:absolute;right:-1.875rem;top:.0625rem}.pnt-secure-box .security-value{position:relative;top:.1875rem}.pnt-general-layout{--pnt-layout-body-padding:1.5rem;--pnt-layout-card-radius:0.25rem;background-color:transparent;height:100%}.pnt-general-layout .t-layout__header{align-items:stretch;border-bottom:.0625rem solid #f0f3f6;display:flex;flex-shrink:0;height:auto;justify-content:space-between}.pnt-general-layout .t-layout__header .header-title{align-items:center;display:inline-flex;padding:1.5rem}.pnt-general-layout .t-layout__header .header-title .goback-icon{color:#3f8cff;cursor:pointer;margin-right:.75rem}.pnt-general-layout .t-layout__header .header-title .title{font-size:1.25rem;font-weight:600;line-height:1.5rem}.pnt-general-layout .t-layout__header .header-operation{align-items:center;display:flex;padding-right:1.5rem}.pnt-general-layout .t-layout__header .header-operation .t-button+.t-button{margin-left:.75rem}.pnt-general-layout--borderless .t-layout__header{border-bottom:none}.pnt-general-layout .general-layout-sub-header{border-bottom:.0625rem solid #f0f3f6;flex-shrink:0}.pnt-general-layout .general-layout-body{background:#fafafa;flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--pnt-layout-body-padding)}.pnt-general-layout .general-layout-body>div.t-card,.pnt-general-layout .general-layout-body>div.t-loading__parent>div.t-card,.pnt-general-layout .general-layout-body>div.tea-card,.pnt-general-layout .general-layout-body>div[class*=-block],.pnt-general-layout .general-layout-body>div[class*=-wrapper]{border-radius:var(--pnt-layout-card-radius);box-shadow:none;margin-bottom:1.5rem}.pnt-general-layout .general-layout-body>div.t-card .t-card__body,.pnt-general-layout .general-layout-body>div.t-loading__parent>div.t-card .t-card__body,.pnt-general-layout .general-layout-body>div.tea-card .t-card__body,.pnt-general-layout .general-layout-body>div[class*=-block] .t-card__body,.pnt-general-layout .general-layout-body>div[class*=-wrapper] .t-card__body{border-radius:var(--pnt-layout-card-radius)}.pnt-general-layout .general-layout-body>div.t-loading__parent>div:last-child.t-card,.pnt-general-layout .general-layout-body>div:last-child,.pnt-general-layout .general-layout-body>div:last-child.t-card,.pnt-general-layout .general-layout-body>div:last-child.tea-card,.pnt-general-layout .general-layout-body>div:last-child[class*=-block],.pnt-general-layout .general-layout-body>div:last-child[class*=-wrapper]{margin-bottom:0}.pnt-general-layout .t-layout__footer{background:#fff;border-top:.0625rem solid #f0f3f6;flex-shrink:0;padding:1.125rem 1.5rem}.pnt-general-layout .t-layout__footer .t-button{font-size:.875rem;font-weight:600;height:2.25rem;min-width:5.75rem}.pnt-general-layout .t-layout__footer .t-button+.t-button{margin-left:.75rem}.pnt-general-layout--footer-auto .t-layout__footer .t-button{font-size:inherit;font-weight:inherit;height:auto;min-width:0}