@pnt-team/pnt-component-frontend 0.0.138 → 0.0.139

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

@@ -0,0 +1,121 @@
+.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,93 @@
+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 预设尺寸：`small`=36px、`medium`=60px、`large`=136px；默认 `large`
+     * 若 `style` 中显式指定了 width/height，则以 style 为准；非正方形场景请使用 `style`
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 自定义样式
+     * @description 一般用于控制图片宽高；其中 width/height 优先级高于 size
+     */
+    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}
+ *   size="large"
+ * />
+ *
+ * // 纯预览模式
+ * <PntImage
+ *   src={url}
+ *   alt="avatar"
+ *   size="medium"
+ *   container={container}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 业务图片组件
+ */
+declare const PntImage: FC<PntImageProps>;
+export default PntImage;

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

@@ -0,0 +1,200 @@
+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}
+ *   size="large"
+ * />
+ *
+ * // 纯预览模式
+ * <PntImage
+ *   src={url}
+ *   alt="avatar"
+ *   size="medium"
+ *   container={container}
+ * />
+ * ```
+ *
+ * @returns {ReactElement} 业务图片组件
+ */
+const PntImage = ({
+  src,
+  alt = '',
+  defaultImg,
+  size,
+  style,
+  loading = false,
+  onRemove,
+  container,
+  texts
+}) => {
+  // 模式判定：传入 onRemove 即为上传预览模式
+  const isUploadMode = typeof onRemove === 'function';
+  const finalSrc = src?.length ? src : defaultImg || uploadImg;
+
+  // 预设尺寸映射：small=36 / medium=60 / large=136（默认 large）
+  const SIZE_MAP = {
+    small: 36,
+    medium: 60,
+    large: 136
+  };
+  const sizeValue = SIZE_MAP[size ?? 'large'];
+
+  // 合并尺寸：size 提供正方形宽高，style 中显式的 width/height 优先级更高
+  const sizeStyle = {
+    width: `${sizeValue}px`,
+    height: `${sizeValue}px`
+  };
+  const mergedStyle = {
+    ...sizeStyle,
+    ...style
+  };
+  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: mergedStyle
+        });
+      }
+    })
+  });
+};
+export default PntImage;

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

@@ -0,0 +1,61 @@
+.pnt-image-wrapper {
+  position: relative;
+
+  .pnt-image-progress,
+  .pnt-image-upload-progress {
+    width: 136px;
+    height: 136px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .pnt-image-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 {
+    width: 136px;
+    height: 136px;
+
+    .pnt-image-mask {
+      background: rgba(0, 0, 0, 60%);
+      color: #fff;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      // 纯预览模式：半透明遮罩，鼠标手型
+      &--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/components/PntRegionSelect/ImportDialog.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import type { PntRegionSelectTexts, RegionOption } from './types';
+/** 解析后单行状态 */
+export type ImportRowStatus = 'pending' | 'exists' | 'unmatched';
+export interface ImportRow {
+    /** 用户输入的原始文本 */
+    region: string;
+    status: ImportRowStatus;
+}
+/** 组件内部选项额外携带数据源原始码（保留前导零） */
+type ImportRegionOption = RegionOption & {
+    rawRegionCode?: string;
+};
+interface ImportDialogProps {
+    visible: boolean;
+    options: ImportRegionOption[];
+    currentValue: string[];
+    texts: Required<PntRegionSelectTexts>;
+    dialogProps?: Record<string, unknown>;
+    onClose: () => void;
+    /** 导入确认：回传合并后的值与本次新增项 */
+    onConfirm: (nextValue: string[], added: string[]) => void;
+}
+/**
+ * 批量导入弹窗：
+ * 粘贴文本 → 按 代码/中文名/英文名（大小写不敏感）解析 → 分类展示 → 确认导入
+ */
+declare const ImportDialog: FC<ImportDialogProps>;
+export default ImportDialog;