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

package/lib/esm/components/PntRegionSelect/ImportDialog.js

@@ -0,0 +1,244 @@
+import { useMemo, useState } from 'react';
+import { CheckIcon, CloseIcon, FileCopyIcon } from 'tdesign-icons-react';
+import { Button, Dialog, MessagePlugin, Textarea, Tooltip } from 'tdesign-react';
+
+/** 解析后单行状态 */
+
+/** 组件内部选项额外携带数据源原始码（保留前导零） */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** 分隔符：换行/逗号/分号（中英文） */
+const SEPARATOR = /[\r?\n,，;；]+/;
+
+/**
+ * 批量导入弹窗：
+ * 粘贴文本 → 按 代码/中文名/英文名（大小写不敏感）解析 → 分类展示 → 确认导入
+ */
+const ImportDialog = ({
+  visible,
+  options,
+  currentValue,
+  texts,
+  dialogProps,
+  onClose,
+  onConfirm
+}) => {
+  const [importText, setImportText] = useState('');
+  const [rows, setRows] = useState([]);
+  const [isParsed, setIsParsed] = useState(false);
+
+  // ---- 别名映射：原始码/归一化码/中文名/英文名（小写） -> 归一化 region_code ----
+  // 同时收录原始码（如 '004'）与归一化码（'4'），粘贴任一种代码都能匹配
+  const aliasMap = useMemo(() => {
+    const map = new Map();
+    options.filter(item => !item.disabled).forEach(item => {
+      [item.rawRegionCode, item.region_code, item.region_ch, item.region_en].filter(Boolean).map(alias => String(alias).trim().toLowerCase()).forEach(alias => {
+        if (alias) map.set(alias, item.region_code);
+      });
+    });
+    return map;
+  }, [options]);
+
+  // ---- 派生分类列表 ----
+  const {
+    pendingList,
+    existsList,
+    unmatchedList
+  } = useMemo(() => {
+    const selectedSet = new Set(currentValue);
+    const pending = [];
+    const exists = [];
+    const unmatched = [];
+    const seenPending = new Set();
+    const seenExists = new Set();
+    const seenUnmatched = new Set();
+    rows.forEach(row => {
+      if (row.status === 'unmatched') {
+        if (!seenUnmatched.has(row.region)) {
+          seenUnmatched.add(row.region);
+          unmatched.push(row.region);
+        }
+        return;
+      }
+      const code = aliasMap.get(row.region.toLowerCase());
+      if (!code) return;
+      if (row.status === 'exists' || selectedSet.has(code)) {
+        if (!seenExists.has(code)) {
+          seenExists.add(code);
+          exists.push(code);
+        }
+      } else if (!seenPending.has(code)) {
+        seenPending.add(code);
+        pending.push(code);
+      }
+    });
+    return {
+      pendingList: pending,
+      existsList: exists,
+      unmatchedList: unmatched
+    };
+  }, [rows, aliasMap, currentValue]);
+
+  // ---- 重置 ----
+  const reset = () => {
+    setImportText('');
+    setRows([]);
+    setIsParsed(false);
+  };
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  // ---- 解析 ----
+  const parse = () => {
+    const uniqueInputs = Array.from(new Set(importText.split(SEPARATOR).map(item => item.trim()).filter(Boolean)));
+    const selectedSet = new Set(currentValue);
+    const nextRows = uniqueInputs.map(input => {
+      const code = aliasMap.get(input.toLowerCase());
+      if (!code) return {
+        region: input,
+        status: 'unmatched'
+      };
+      return {
+        region: input,
+        status: selectedSet.has(code) ? 'exists' : 'pending'
+      };
+    });
+
+    // 排序：未匹配 > 待导入 > 已存在，同级保持输入顺序
+    const priority = {
+      unmatched: 0,
+      pending: 1,
+      exists: 2
+    };
+    nextRows.sort((a, b) => priority[a.status] - priority[b.status]);
+    setRows(nextRows);
+    setIsParsed(true);
+  };
+
+  // ---- 复制未匹配项 ----
+  const copyUnmatched = async () => {
+    if (!unmatchedList.length) return;
+    const text = unmatchedList.join('\n');
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand('copy');
+        textArea.remove();
+      }
+      MessagePlugin.success(texts.copySuccess);
+    } catch {
+      // 复制失败静默
+    }
+  };
+
+  // ---- 确认 ----
+  const handleConfirm = () => {
+    if (!isParsed) {
+      parse();
+      return;
+    }
+    const nextSet = new Set(currentValue);
+    pendingList.forEach(code => nextSet.add(code));
+    const nextValue = Array.from(nextSet);
+    onConfirm(nextValue, pendingList);
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    visible: visible,
+    header: texts.importTitle,
+    width: 520,
+    closeOnOverlayClick: false,
+    confirmBtn: isParsed ? texts.importConfirmBtn : texts.parseBtn,
+    cancelBtn: texts.cancelBtn,
+    onConfirm: handleConfirm,
+    onClose: handleClose,
+    ...dialogProps,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "pnt-region-import__tip",
+      children: texts.importTip
+    }), /*#__PURE__*/_jsx(Textarea, {
+      value: importText,
+      onChange: next => {
+        setImportText(String(next ?? ''));
+        if (isParsed) {
+          setRows([]);
+          setIsParsed(false);
+        }
+      },
+      rows: 3,
+      placeholder: texts.importPlaceholder
+    }), isParsed ? /*#__PURE__*/_jsxs("div", {
+      className: "pnt-region-import__result",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "pnt-region-import__summary",
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "pnt-region-import__summary-item pnt-region-import__summary-item--unmatched",
+          children: [texts.importUnmatched, "\uFF1A", unmatchedList.length]
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: texts.copyUnmatchedTip,
+          children: /*#__PURE__*/_jsx(Button, {
+            theme: "primary",
+            variant: "text",
+            size: "small",
+            className: "pnt-region-import__copy-btn",
+            disabled: !unmatchedList.length,
+            onClick: copyUnmatched,
+            children: /*#__PURE__*/_jsx(FileCopyIcon, {
+              strokeWidth: 2
+            })
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: "pnt-region-import__summary-dot",
+          children: "\xB7"
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "pnt-region-import__summary-item pnt-region-import__summary-item--pending",
+          children: [texts.importPending, "\uFF1A", pendingList.length]
+        }), /*#__PURE__*/_jsx("span", {
+          className: "pnt-region-import__summary-dot",
+          children: "\xB7"
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "pnt-region-import__summary-item pnt-region-import__summary-item--exists",
+          children: [texts.importExists, "\uFF1A", existsList.length]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "pnt-region-import__table",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "pnt-region-import__table-head",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: texts.importRegionColumn
+          }), /*#__PURE__*/_jsx("span", {
+            children: texts.importStatusColumn
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "pnt-region-import__table-body",
+          children: rows.length ? rows.map(row => /*#__PURE__*/_jsxs("div", {
+            className: "pnt-region-import__table-row",
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "pnt-region-import__region",
+              children: row.region
+            }), /*#__PURE__*/_jsxs("span", {
+              className: `pnt-region-import__status pnt-region-import__status--${row.status}`,
+              children: [row.status === 'unmatched' ? /*#__PURE__*/_jsx(CloseIcon, {
+                strokeWidth: 2
+              }) : /*#__PURE__*/_jsx(CheckIcon, {
+                strokeWidth: 2
+              }), row.status === 'pending' ? texts.importPending : row.status === 'exists' ? texts.importExists : texts.importUnmatched]
+            })]
+          }, row.region)) : /*#__PURE__*/_jsx("div", {
+            className: "pnt-region-import__empty",
+            children: "-"
+          })
+        })]
+      })]
+    }) : null]
+  });
+};
+export default ImportDialog;

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

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import './index.scss';
+import type { PntRegionSelectProps } from './types';
+/**
+ * 归一化 region_code：纯数字字符串去掉前导零（'012' -> '12'），非数字保持原样
+ * @description 后端详情接口可能返回 '12'，字典接口可能返回 '012'，需统一格式才能匹配
+ */
+export declare const normalizeRegionCode: (code: string | number | undefined | null) => string;
+/**
+ * 地区选择器组件
+ * @description 统一的国家/地区选择组件，支持单选/多选、批量选择、批量导入、自定义区域、合规区域
+ *
+ * @example
+ * ```tsx
+ * // 基础多选（内部拉取默认区域列表）
+ * <PntRegionSelect
+ *   value={regions}
+ *   onChange={(v) => setRegions(v)}
+ * />
+ *
+ * // 业务最终生效区域
+ * <PntRegionSelect
+ *   dataSource="business"
+ *   gameId={gameId}
+ *   value={regions}
+ *   onChange={(v) => setRegions(v)}
+ * />
+ *
+ * // 外部受控选项 + 批量导入
+ * <PntRegionSelect
+ *   options={regionList}
+ *   importable
+ *   value={regions}
+ *   onChange={(v) => setRegions(v)}
+ * />
+ * ```
+ */
+declare const PntRegionSelect: FC<PntRegionSelectProps>;
+export default PntRegionSelect;