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

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,8 +153,6 @@ const PntBusinessSelect = props => {
   // append=true 为滚动翻页（追加），append=false 为初始化/搜索/重置（替换）
   const fetchData = useCallback(async (kw, page, append) => {
     if (append) {
-      // 任何请求进行中都不再追加；并校验关键词/页码/总数，
-      // 防止搜索后残余滚动事件用新关键词 + 旧页码请求错误分页
       if (appendLoadingRef.current || loadingRef.current) return;
       const meta = listMetaRef.current;
       if (meta.keyword !== kw) return;
@@ -162,26 +160,21 @@ const PntBusinessSelect = props => {
       if (optionsRef.current.length >= meta.total) return;
       appendLoadingRef.current = true;
     }
-    // 替换请求不被在途请求阻塞，靠序号让旧响应失效
     const seq = ++fetchSeqRef.current;
     loadingRef.current = true;
     setLoading(true);
     try {
       const res = await requestFn(buildParams(kw, page));
-      // 已有更新的替换请求发出，本次（可能是旧关键词的翻页）结果丢弃
       if (seq !== fetchSeqRef.current) return;
-      // 适配 commonEesType：code === 0 视为成功
       if (res.code === 0 && res.data) {
         const newList = res.data.list || [];
         const resTotal = res.data.pagination?.total || 0;
         let nextList;
         if (append) {
-          // 按 game_id 去重，避免重复页混入
           const existed = new Set(optionsRef.current.map(o => o.game_id));
           nextList = [...optionsRef.current, ...newList.filter(o => !existed.has(o.game_id))];
         } else {
           nextList = newList;
-          // 列表整体替换，屏蔽随后浏览器 clamp 滚动位置触发的残余触底
           lastReplaceAtRef.current = Date.now();
         }
         optionsRef.current = nextList;
@@ -193,6 +186,8 @@ const PntBusinessSelect = props => {
         setOptions(nextList);
         onLoadedRef.current?.(nextList);
       }
+    } catch {
+      // 请求失败静默处理，不阻塞主流程
     } finally {
       if (append) appendLoadingRef.current = false;
       if (seq === fetchSeqRef.current) {
@@ -207,7 +202,6 @@ const PntBusinessSelect = props => {
     keywordRef.current = val;
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
-      // 防抖结束时以最新输入为准（请求序号会使期间的旧翻页响应失效）
       fetchData(keywordRef.current, 1, false);
     }, searchDebounce);
   }, [fetchData, searchDebounce]);
@@ -224,8 +218,14 @@ const PntBusinessSelect = props => {
   const handlePopupVisibleChange = useCallback(visible => {
     if (visible) return;
     if (debounceRef.current) clearTimeout(debounceRef.current);
-    if (keywordRef.current) {
-      keywordRef.current = '';
+    // 必须以「当前列表实际使用的关键词」为准，不能只看 keywordRef：
+    // 1) 单选选中一项后，TDesign 关闭弹窗时会先以 blur 触发 onSearch('')，
+    //    把 keywordRef 提前清空并挂一个重置 timer，随后本回调又会清掉该 timer，
+    //    若仅按 keywordRef 判断就会漏发重置请求；
+    // 2) 用户手动清空输入但未关闭下拉时，keywordRef 已为 ''，但列表仍残留
+    //    上次搜索结果，关闭时必须重置回默认列表。
+    keywordRef.current = '';
+    if (listMetaRef.current.keyword) {
       fetchData('', 1, false);
     }
   }, [fetchData]);
@@ -429,11 +429,11 @@ const PntBusinessSelect = props => {
       // 兜底：从 TDesign 上下文剥离 React 字段（children/content）
       const fromCtx = ctxOptions.find(o => String(o.value) === id);
       if (fromCtx) {
-        const {
-          children,
-          content,
-          ...rest
-        } = fromCtx;
+        const rest = {
+          ...fromCtx
+        };
+        delete rest.children;
+        delete rest.content;
         return rest;
       }
       return {
@@ -446,15 +446,23 @@ const PntBusinessSelect = props => {
       selectedOptions: multiple ? selectedOptions : selectedOptions.slice(0, 1)
     });
   }, [onChange, multiple, getLabelText]);
+
+  // 点击 clear 按钮（X）时重置列表——TDesign 的 onClearValue 只 setInputValue，
+  // 不触发 handleInputChange / onSearch，所以需要主动重置。
+  const handleClear = useCallback(() => {
+    keywordRef.current = '';
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (listMetaRef.current.keyword) {
+      fetchData('', 1, false);
+    }
+  }, [fetchData]);
   return /*#__PURE__*/_jsx(Select, {
     value: selectValue,
     onChange: handleChange,
-    filterable: filterable
-    // 远程搜索模式由服务端过滤（传了 onSearch 时 TDesign 也会跳过本地过滤）；
-    // 仅全量模式使用本地过滤
-    ,
+    filterable: filterable,
     filter: enableRemoteSearch ? undefined : filterable ? localFilter : undefined,
     onSearch: enableRemoteSearch ? handleSearch : undefined,
+    onClear: enableRemoteSearch ? handleClear : undefined,
     loading: loading && options.length === 0,
     multiple: multiple,
     max: max,

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

@@ -19,6 +19,11 @@ interface PntGeneralLayoutProps {
      * 返回按钮点击回调
      */
     onBackButtonClick?: (() => void) | undefined;
+    /**
+     * 是否显示头部底部分割线
+     * @default true
+     */
+    headerBordered?: boolean;
     /**
      * 子头部内容
      * @description 位于 Header 下方，常用于放置面包屑、Tab 等
@@ -41,6 +46,25 @@ interface PntGeneralLayoutProps {
      * 内容区自定义样式
      */
     bodyStyle?: React.CSSProperties;
+    /**
+     * 内容区内边距
+     * @description 数字按 px 处理；需要全出血内容时可传 '24px 0'
+     * @default 24
+     */
+    bodyPadding?: number | string;
+    /**
+     * 内容区卡片圆角（px）
+     * @description 作用于 body 内 t-card / tea-card / 各业务 wrapper、block 容器
+     * @default 4
+     */
+    cardRadius?: number;
+    /**
+     * 底部按钮样式模式
+     * @description fixed-统一下按钮尺寸（高 36px、最小宽 92px、加粗中号字）；
+     * auto-不约束按钮尺寸，仅保留按钮间距
+     * @default 'fixed'
+     */
+    footerButton?: 'fixed' | 'auto';
     /**
      * 底部内容
      * @description 传入后将渲染 Layout Footer 区域，常用于放置操作按钮
@@ -50,7 +74,8 @@ interface PntGeneralLayoutProps {
 /**
  * 通用页面布局组件（L3 布局组件）
  * @description 提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，
- * 基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
+ * 基于 TDesign Layout（flex column）封装，内容区自动填满剩余高度，
+ * 适用于后台管理系统的列表页、详情页、表单页等场景。
  *
  * @example
  * ```tsx
@@ -76,6 +101,13 @@ interface PntGeneralLayoutProps {
  * >
  *   <Detail />
  * </PntGeneralLayout>
+ *
+ * // 全出血内容区（无头部边线、内容无左右内边距、底部按钮不强制尺寸）
+ * <PntGeneralLayout
+ *   headerBordered={false}
+ *   bodyPadding="24px 0"
+ *   footerButton="auto"
+ * />
  * ```
  */
 declare const PntGeneralLayout: FunctionComponent<PntGeneralLayoutProps>;

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

@@ -7,7 +7,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 通用页面布局组件（L3 布局组件）
  * @description 提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，
- * 基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
+ * 基于 TDesign Layout（flex column）封装，内容区自动填满剩余高度，
+ * 适用于后台管理系统的列表页、详情页、表单页等场景。
  *
  * @example
  * ```tsx
@@ -33,6 +34,13 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * >
  *   <Detail />
  * </PntGeneralLayout>
+ *
+ * // 全出血内容区（无头部边线、内容无左右内边距、底部按钮不强制尺寸）
+ * <PntGeneralLayout
+ *   headerBordered={false}
+ *   bodyPadding="24px 0"
+ *   footerButton="auto"
+ * />
  * ```
  */
 const PntGeneralLayout = prop => {
@@ -41,19 +49,29 @@ const PntGeneralLayout = prop => {
     headerTitle,
     showBackButton = false,
     onBackButtonClick,
+    headerBordered = true,
     subHeaderContent,
     operation,
     bodyRef,
     children,
     bodyStyle,
+    bodyPadding = 24,
+    cardRadius = 4,
+    footerButton = 'fixed',
     footer
   } = prop;
   const {
     Header,
     Footer
   } = Layout;
+  const layoutClassName = ['pnt-general-layout', !headerBordered && 'pnt-general-layout--borderless', footerButton === 'auto' && 'pnt-general-layout--footer-auto', className].filter(Boolean).join(' ');
+  const cssVars = {
+    '--pnt-layout-body-padding': typeof bodyPadding === 'number' ? `${bodyPadding}px` : bodyPadding,
+    '--pnt-layout-card-radius': `${cardRadius}px`
+  };
   return /*#__PURE__*/_jsxs(Layout, {
-    className: `pnt-general-layout${className ? ' ' + className : ''}`,
+    className: layoutClassName,
+    style: cssVars,
     children: [headerTitle && /*#__PURE__*/_jsxs(Header, {
       children: [/*#__PURE__*/_jsxs("span", {
         className: "header-title",
@@ -75,10 +93,7 @@ const PntGeneralLayout = prop => {
     }), /*#__PURE__*/_jsx("div", {
       className: "general-layout-body",
       ref: bodyRef,
-      style: {
-        height: `calc(100%${headerTitle && ' - 72px'}${footer && ' - 72px'})`,
-        ...bodyStyle
-      },
+      style: bodyStyle,
       children: children
     }), footer && /*#__PURE__*/_jsx(Footer, {
       children: footer

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

@@ -1,90 +1,121 @@
-.pnt-general-layout {
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
-
-  .t-layout__header {
-    height: auto;
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid #f0f3f6;
-
-    .header-title {
-      display: inline-block;
-      vertical-align: top;
-      padding: 24px;
-
-      .goback-icon {
-        margin-right: 12px;
-        vertical-align: top;
-        color: #3f8cff;
-        cursor: pointer;
-      }
-
-      .title {
-        display: inline-block;
-        vertical-align: top;
-        font-weight: 600;
-        font-size: 20px;
-        height: 24px;
-        line-height: 24px;
-      }
-    }
-
-    .header-operation {
-      height: 72px;
-      line-height: 72px;
-      padding-right: 24px;
-
-      .t-button + .t-button {
-        margin-left: 12px;
-      }
-    }
-  }
-
-  .general-layout-sub-header {
-    border-bottom: 1px solid #f0f3f6;
-  }
-
-  .general-layout-body {
-    height: 100%;
-    padding: 24px;
-    overflow-y: auto;
-    background: #fafafa;
-
-    > div.tea-card,
-    > div.t-card,
-    > div.t-loading__parent > div.t-card,
-    > div[class*='-wrapper'],
-    > div[class*='-block'] {
-      box-shadow: none;
-      margin-bottom: 24px;
-      border-radius: 4px;
-    }
-
-    > div:last-child,
-    > div:last-child.t-card,
-    > div:last-child.tea-card,
-    > div.t-loading__parent > div:last-child.t-card,
-    > div:last-child[class*='-wrapper'],
-    > div:last-child[class*='-block'] {
-      margin-bottom: 0;
-    }
-  }
-
-  .t-layout__footer {
-    padding: 18px 24px;
-    background: #fff;
-    border-top: 1px solid #f0f3f6;
-
-    .t-button {
-      font-size: 14px;
-      min-width: 92px;
-      height: 36px;
-      font-weight: 600;
-
-      & + .t-button {
-        margin-left: 12px;
-      }
-    }
-  }
-}
+.pnt-general-layout {
+  // 可通过 props（bodyPadding / cardRadius）覆盖的布局变量
+  --pnt-layout-body-padding: 24px;
+  --pnt-layout-card-radius: 4px;
+
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+
+  .t-layout__header {
+    height: auto;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    border-bottom: 1px solid #f0f3f6;
+
+    .header-title {
+      display: inline-flex;
+      align-items: center;
+      padding: 24px;
+
+      .goback-icon {
+        margin-right: 12px;
+        color: #3f8cff;
+        cursor: pointer;
+      }
+
+      .title {
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 24px;
+      }
+    }
+
+    // 统一 flex 居中：高度由 header-title 的 padding 撑起（72px），
+    // 比固定 line-height: 72px 更稳，按钮高度变化也不会错位
+    .header-operation {
+      display: flex;
+      align-items: center;
+      padding-right: 24px;
+
+      .t-button + .t-button {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  // 无头部分割线变体（headerBordered={false}）
+  &--borderless {
+    .t-layout__header {
+      border-bottom: none;
+    }
+  }
+
+  .general-layout-sub-header {
+    flex-shrink: 0;
+    border-bottom: 1px solid #f0f3f6;
+  }
+
+  .general-layout-body {
+    // flex 自动填满 header/sub-header/footer 之外的剩余空间；
+    // min-height: 0 保证内容超长时由 body 自身滚动，而不是撑破布局
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--pnt-layout-body-padding);
+    overflow-y: auto;
+    background: #fafafa;
+
+    // 卡片/业务容器取各项目选择器超集，统一去阴影、间距与圆角
+    > div.tea-card,
+    > div.t-card,
+    > div.t-loading__parent > div.t-card,
+    > div[class*='-wrapper'],
+    > div[class*='-block'] {
+      box-shadow: none;
+      margin-bottom: 24px;
+      border-radius: var(--pnt-layout-card-radius);
+
+      .t-card__body {
+        border-radius: var(--pnt-layout-card-radius);
+      }
+    }
+
+    > div:last-child,
+    > div:last-child.t-card,
+    > div:last-child.tea-card,
+    > div.t-loading__parent > div:last-child.t-card,
+    > div:last-child[class*='-wrapper'],
+    > div:last-child[class*='-block'] {
+      margin-bottom: 0;
+    }
+  }
+
+  .t-layout__footer {
+    flex-shrink: 0;
+    padding: 18px 24px;
+    background: #fff;
+    border-top: 1px solid #f0f3f6;
+
+    .t-button {
+      font-size: 14px;
+      min-width: 92px;
+      height: 36px;
+      font-weight: 600;
+
+      & + .t-button {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  // 底部按钮不约束尺寸变体（footerButton='auto'），仅保留按钮间距
+  &--footer-auto {
+    .t-layout__footer .t-button {
+      font-size: inherit;
+      min-width: 0;
+      height: auto;
+      font-weight: inherit;
+    }
+  }
+}

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;