@pnt-team/pnt-component-frontend 0.0.111 → 0.0.116

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

@@ -0,0 +1,387 @@
+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/PntRegionSelect/index.tsx
+var PntRegionSelect_exports = {};
+__export(PntRegionSelect_exports, {
+  default: () => PntRegionSelect_default
+});
+module.exports = __toCommonJS(PntRegionSelect_exports);
+var import_api = require("../../api");
+var import_config = require("../../config");
+var import_react = require("react");
+var import_tdesign_react = require("tdesign-react");
+var import_ImportDialog = __toESM(require("./ImportDialog"));
+var import_index = require("./index.scss");
+var import_types = require("./types");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toRegionOptions = (list) => (list || []).map((item) => {
+  var _a, _b, _c;
+  return {
+    ...item,
+    region_code: (_a = item.region_code) != null ? _a : "",
+    region_ch: (_b = item.region_ch) != null ? _b : "",
+    region_en: (_c = item.region_en) != null ? _c : ""
+  };
+});
+var getLabelText = (item, format) => {
+  const { region_ch, region_en, region_code } = item;
+  switch (format) {
+    case "name_en":
+      return region_en || region_ch || region_code;
+    case "name_en_name":
+      return region_en && region_ch ? `${region_en}（${region_ch}）` : region_en || region_ch || region_code;
+    case "code":
+      return region_code;
+    default:
+      return region_ch || region_en || region_code;
+  }
+};
+var PntRegionSelect = (props) => {
+  const {
+    value = [],
+    onChange,
+    multiple = true,
+    dataSource = "default",
+    scope = "business",
+    gameId,
+    options: externalOptions,
+    disabled = false,
+    placeholder,
+    max,
+    filterable = true,
+    labelFormat = "name",
+    texts: customTexts,
+    onLoaded,
+    optionDisabled,
+    optionTooltip,
+    importable = false,
+    invertible = false,
+    minCollapsedNum,
+    collapsedItems,
+    onBlur,
+    importDialogProps,
+    className,
+    style,
+    popupProps
+  } = props;
+  const { http, regionQuery } = (0, import_config.usePntConfig)();
+  const texts = (0, import_react.useMemo)(
+    () => ({ ...import_types.DEFAULT_TEXTS, ...customTexts }),
+    [customTexts]
+  );
+  const [innerOptions, setInnerOptions] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [searchKeyword, setSearchKeyword] = (0, import_react.useState)("");
+  const [importVisible, setImportVisible] = (0, import_react.useState)(false);
+  const fetchSeqRef = (0, import_react.useRef)(0);
+  const onLoadedRef = (0, import_react.useRef)(onLoaded);
+  onLoadedRef.current = onLoaded;
+  const isExternal = externalOptions !== void 0;
+  const fetchData = (0, import_react.useCallback)(async () => {
+    var _a, _b, _c;
+    if (isExternal)
+      return;
+    const seq = ++fetchSeqRef.current;
+    setLoading(true);
+    try {
+      let list = [];
+      const url = scope === "platform" ? (regionQuery == null ? void 0 : regionQuery.queryPlatUrl) || "/api/v5/business/region/plat-query?audience=/laas-pnt" : (regionQuery == null ? void 0 : regionQuery.queryUrl) || "/api/v5/business/region/query?audience=/laas-pnt";
+      if (dataSource === "business") {
+        if (!gameId) {
+          console.warn(
+            '[PntRegionSelect] dataSource="business" 时必须传入 gameId'
+          );
+          return;
+        }
+        const res = await (0, import_api.businessRegionQuery)(http, {
+          game_id: Number(gameId)
+        }, url);
+        if (seq !== fetchSeqRef.current)
+          return;
+        if (res.code === 0 && ((_a = res.data) == null ? void 0 : _a.region_list)) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      } else {
+        const res = await (0, import_api.businessRegionQuery)(http, {}, url);
+        if (seq !== fetchSeqRef.current)
+          return;
+        if (res.code === 0 && ((_b = res.data) == null ? void 0 : _b.region_list)) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      }
+      setInnerOptions(list);
+      (_c = onLoadedRef.current) == null ? void 0 : _c.call(onLoadedRef, list);
+    } catch {
+    } finally {
+      if (seq === fetchSeqRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [http, dataSource, gameId, isExternal, scope, regionQuery]);
+  (0, import_react.useEffect)(() => {
+    fetchData();
+  }, [fetchData]);
+  const options = (0, import_react.useMemo)(
+    () => isExternal ? externalOptions : innerOptions,
+    [isExternal, externalOptions, innerOptions]
+  );
+  const valueArr = (0, import_react.useMemo)(() => {
+    if (value === void 0 || value === null || value === "")
+      return [];
+    return Array.isArray(value) ? value.map(String) : [String(value)];
+  }, [value]);
+  const filteredOptions = (0, import_react.useMemo)(() => {
+    if (!searchKeyword)
+      return options;
+    const kw = searchKeyword.toLowerCase();
+    return options.filter(
+      (item) => {
+        var _a, _b, _c;
+        return ((_a = item.region_ch) == null ? void 0 : _a.toLowerCase().includes(kw)) || ((_b = item.region_en) == null ? void 0 : _b.toLowerCase().includes(kw)) || ((_c = item.region_code) == null ? void 0 : _c.toLowerCase().includes(kw));
+      }
+    );
+  }, [options, searchKeyword]);
+  const isOptionDisabled = (0, import_react.useCallback)(
+    (item) => {
+      if (item.disabled)
+        return true;
+      return optionDisabled ? optionDisabled(item) : false;
+    },
+    [optionDisabled]
+  );
+  const emitMultiple = (0, import_react.useCallback)(
+    (nextValue) => {
+      onChange == null ? void 0 : onChange(
+        nextValue,
+        options.filter((o) => nextValue.includes(o.region_code))
+      );
+    },
+    [onChange, options]
+  );
+  const handleSelectAll = (0, import_react.useCallback)(() => {
+    const allValues = filteredOptions.filter((item) => !isOptionDisabled(item)).map((item) => item.region_code);
+    emitMultiple(Array.from(/* @__PURE__ */ new Set([...valueArr, ...allValues])));
+  }, [filteredOptions, valueArr, emitMultiple, isOptionDisabled]);
+  const handleClearAll = (0, import_react.useCallback)(() => {
+    emitMultiple([]);
+  }, [emitMultiple]);
+  const handleInvert = (0, import_react.useCallback)(() => {
+    const selectedSet = new Set(valueArr);
+    const nextValue = filteredOptions.filter((item) => !isOptionDisabled(item)).map((item) => item.region_code).filter((code) => !selectedSet.has(code));
+    emitMultiple(nextValue);
+  }, [filteredOptions, valueArr, emitMultiple, isOptionDisabled]);
+  const isAllSelected = (0, import_react.useMemo)(() => {
+    const selectable = filteredOptions.filter(
+      (item) => !isOptionDisabled(item)
+    );
+    return selectable.length > 0 && selectable.every((item) => valueArr.includes(item.region_code));
+  }, [filteredOptions, valueArr, isOptionDisabled]);
+  const isIndeterminate = (0, import_react.useMemo)(() => {
+    const selectable = filteredOptions.filter(
+      (item) => !isOptionDisabled(item)
+    );
+    const selected = selectable.filter(
+      (item) => valueArr.includes(item.region_code)
+    );
+    return selected.length > 0 && selected.length < selectable.length;
+  }, [filteredOptions, valueArr, isOptionDisabled]);
+  const selectOptions = (0, import_react.useMemo)(() => {
+    return filteredOptions.map((item) => {
+      const label = getLabelText(item, labelFormat);
+      const isDisabled = isOptionDisabled(item);
+      const tooltip = optionTooltip ? optionTooltip(item) : void 0;
+      return {
+        label,
+        value: item.region_code,
+        disabled: isDisabled,
+        tooltip,
+        rawItem: item
+      };
+    });
+  }, [filteredOptions, labelFormat, isOptionDisabled, optionTooltip]);
+  const handleChange = (0, import_react.useCallback)(
+    (val) => {
+      var _a, _b;
+      const values = Array.isArray(val) ? val : val ? [val] : [];
+      const strValues = values.map(String);
+      const selectedOptions = options.filter(
+        (o) => strValues.includes(o.region_code)
+      );
+      if (multiple) {
+        onChange == null ? void 0 : onChange(strValues, selectedOptions);
+      } else {
+        onChange == null ? void 0 : onChange(
+          (_a = strValues[0]) != null ? _a : "",
+          (_b = selectedOptions[0]) != null ? _b : void 0
+        );
+      }
+    },
+    [onChange, options, multiple]
+  );
+  const handleImportConfirm = (0, import_react.useCallback)(
+    (nextValue) => {
+      emitMultiple(nextValue);
+      onBlur == null ? void 0 : onBlur({ value: nextValue });
+    },
+    [emitMultiple, onBlur]
+  );
+  const panelTopContent = (0, import_react.useMemo)(() => {
+    if (!multiple)
+      return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-region-select__toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tdesign_react.Checkbox,
+        {
+          checked: isAllSelected,
+          indeterminate: isIndeterminate,
+          onChange: (checked) => {
+            if (checked) {
+              handleSelectAll();
+            } else {
+              handleClearAll();
+            }
+          },
+          children: texts.selectAll
+        }
+      ),
+      invertible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: "pnt-region-select__invert",
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleInvert();
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              event.stopPropagation();
+              handleInvert();
+            }
+          },
+          children: texts.invertSelection
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pnt-region-select__count", children: texts.selectedCount.replace("{count}", String(valueArr.length)) })
+    ] });
+  }, [
+    multiple,
+    isAllSelected,
+    isIndeterminate,
+    handleSelectAll,
+    handleClearAll,
+    invertible,
+    handleInvert,
+    texts,
+    valueArr.length
+  ]);
+  const emptyContent = (0, import_react.useMemo)(() => {
+    if (loading)
+      return null;
+    if (filteredOptions.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-region-select__empty", children: texts.noResult });
+    }
+    return null;
+  }, [loading, filteredOptions.length, texts.noResult]);
+  const selectNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tdesign_react.Select,
+    {
+      value: multiple ? valueArr : valueArr[0],
+      onChange: handleChange,
+      filterable,
+      onSearch: setSearchKeyword,
+      loading: loading && options.length === 0,
+      multiple,
+      max,
+      clearable: true,
+      disabled,
+      placeholder: placeholder || texts.placeholder,
+      panelTopContent,
+      empty: emptyContent,
+      minCollapsedNum,
+      collapsedItems,
+      onBlur,
+      popupProps: {
+        ...popupProps,
+        overlayClassName: [
+          "pnt-region-select-popup",
+          popupProps == null ? void 0 : popupProps.overlayClassName
+        ].filter(Boolean).join(" ")
+      },
+      className: className ? `pnt-region-select ${className}` : "pnt-region-select",
+      style,
+      children: selectOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tdesign_react.Select.Option,
+        {
+          value: opt.value,
+          label: opt.label,
+          disabled: opt.disabled,
+          title: opt.tooltip
+        },
+        opt.value
+      ))
+    }
+  );
+  if (importable && multiple) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-region-select__import-wrapper", children: [
+        selectNode,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tdesign_react.Button,
+          {
+            theme: "primary",
+            size: "small",
+            variant: "outline",
+            disabled,
+            className: "pnt-region-select__import-btn",
+            onClick: () => setImportVisible(true),
+            children: texts.importBtn
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ImportDialog.default,
+        {
+          visible: importVisible,
+          options,
+          currentValue: valueArr,
+          texts,
+          dialogProps: importDialogProps,
+          onClose: () => setImportVisible(false),
+          onConfirm: handleImportConfirm
+        }
+      )
+    ] });
+  }
+  return selectNode;
+};
+var PntRegionSelect_default = PntRegionSelect;

package/lib/cjs/components/PntRegionSelect/index.scss

@@ -0,0 +1,166 @@
+.pnt-region-select {
+  width: 100%;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--td-component-border, #e7e7e7);
+    background: var(--td-bg-color-container, #fff);
+  }
+
+  &__invert {
+    margin-left: 12px;
+    margin-right: auto;
+    font-size: 12px;
+    color: var(--td-brand-color, #0052d9);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: var(--td-brand-color-hover, #2667d4);
+    }
+  }
+
+  &__count {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--td-text-color-secondary, #999);
+  }
+
+  &__invert + &__count {
+    margin-left: 0;
+  }
+
+  &__empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--td-text-color-secondary, #999);
+    font-size: 14px;
+  }
+
+  // ---- 批量导入 ----
+  &__import-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .pnt-region-select {
+      flex: 1;
+    }
+  }
+
+  &__import-btn {
+    position: absolute;
+    right: 32px;
+    z-index: 1;
+    flex-shrink: 0;
+  }
+}
+
+.pnt-region-select-popup {
+  .t-select__list {
+    padding-top: 0;
+  }
+}
+
+// ---- 批量导入弹窗 ----
+.pnt-region-import {
+  &__tip {
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: var(--td-text-color-secondary, #999);
+  }
+
+  &__result {
+    margin-top: 12px;
+  }
+
+  &__summary {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 8px;
+    font-size: 12px;
+  }
+
+  &__summary-item {
+    &--unmatched {
+      color: var(--td-error-color, #d54941);
+    }
+
+    &--pending {
+      color: var(--td-success-color, #2ba471);
+    }
+
+    &--exists {
+      color: var(--td-text-color-secondary, #999);
+    }
+  }
+
+  &__summary-dot {
+    color: var(--td-text-color-placeholder, #bbb);
+  }
+
+  &__copy-btn {
+    padding: 0 4px;
+    height: 20px;
+  }
+
+  &__table {
+    border: 1px solid var(--td-component-border, #e7e7e7);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__table-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: var(--td-bg-color-secondarycontainer, #f3f3f3);
+    font-size: 12px;
+    color: var(--td-text-color-secondary, #999);
+  }
+
+  &__table-body {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  &__table-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 12px;
+    font-size: 12px;
+
+    & + & {
+      border-top: 1px solid var(--td-component-border, #e7e7e7);
+    }
+  }
+
+  &__status {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    &--unmatched {
+      color: var(--td-error-color, #d54941);
+    }
+
+    &--pending {
+      color: var(--td-success-color, #2ba471);
+    }
+
+    &--exists {
+      color: var(--td-text-color-secondary, #999);
+    }
+  }
+
+  &__empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--td-text-color-secondary, #999);
+  }
+}

package/lib/cjs/components/PntRegionSelect/types.d.ts

@@ -0,0 +1,160 @@
+/// <reference types="react" />
+/**
+ * 地区选项数据结构（统一格式）
+ */
+export interface RegionOption {
+    /** 地区代码（唯一标识，如 'CN'、'HK'） */
+    region_code: string;
+    /** 中文名称 */
+    region_ch: string;
+    /** 英文名称 */
+    region_en: string;
+    /** ISO 3166-1 alpha-2 代码 */
+    region_a2_code?: string;
+    /** ISO 3166-1 alpha-3 代码 */
+    region_a3_code?: string;
+    /** 是否禁用（合规区域 creatable=false 时使用） */
+    disabled?: boolean;
+    /** 禁用原因提示 */
+    disabledReason?: string;
+}
+/**
+ * 数据源类型
+ * - default: 全部国家区域（不带任何参数，返回全部 251 个）/api/v5/business/region/query
+ * - business: 业务最终生效的区域（必须传 gameId）/api/v5/business/region/query
+ */
+export type RegionDataSource = 'default' | 'business';
+/**
+ * 标签格式
+ * - name: 中文名
+ * - name_en: 英文名
+ * - name_en_name: 英文名（中文名）
+ * - code: 仅代码
+ */
+export type RegionLabelFormat = 'name' | 'name_en' | 'name_en_name' | 'code';
+/**
+ * 组件文案集合
+ */
+export interface PntRegionSelectTexts {
+    /** 占位提示 */
+    placeholder?: string;
+    /** 全选按钮 */
+    selectAll?: string;
+    /** 反选按钮 */
+    invertSelection?: string;
+    /** 清空按钮 */
+    clearAll?: string;
+    /** 已选数量提示（{count} 为占位符） */
+    selectedCount?: string;
+    /** 搜索无结果提示 */
+    noResult?: string;
+    /** 加载中提示 */
+    loading?: string;
+    /** 批量导入按钮 */
+    importBtn?: string;
+    /** 批量导入弹窗标题 */
+    importTitle?: string;
+    /** 批量导入弹窗说明 */
+    importTip?: string;
+    /** 批量导入输入框占位 */
+    importPlaceholder?: string;
+    /** 解析按钮 */
+    parseBtn?: string;
+    /** 导入确认按钮 */
+    importConfirmBtn?: string;
+    /** 取消按钮 */
+    cancelBtn?: string;
+    /** 解析结果：未匹配 */
+    importUnmatched?: string;
+    /** 解析结果：待导入 */
+    importPending?: string;
+    /** 解析结果：已存在 */
+    importExists?: string;
+    /** 复制未匹配项提示 */
+    copyUnmatchedTip?: string;
+    /** 复制成功提示 */
+    copySuccess?: string;
+    /** 解析结果表格：地区列 */
+    importRegionColumn?: string;
+    /** 解析结果表格：状态列 */
+    importStatusColumn?: string;
+}
+export declare const DEFAULT_TEXTS: Required<PntRegionSelectTexts>;
+/**
+ * 地区选择器组件 Props
+ */
+export interface PntRegionSelectProps {
+    /**
+     * 当前选中值：多选为地区代码数组，单选为单个地区代码
+     * （兼容 TDesign FormItem 注入的单值/多值）
+     */
+    value?: string | string[];
+    /**
+     * 值变化回调：多选时回传 (string[], RegionOption[])，
+     * 单选时回传 (string, RegionOption)
+     */
+    onChange?: (value: string[] | string, options: RegionOption[] | RegionOption) => void;
+    /** 是否多选 @default true */
+    multiple?: boolean;
+    /** 数据源类型 @default 'default' */
+    dataSource?: RegionDataSource;
+    /**
+     * 接口作用域 @default 'business'
+     * - business: 业务级区域查询 /api/v5/business/region/query
+     * - platform: 平台级区域查询 /api/v5/business/region/plat-query
+     */
+    scope?: 'business' | 'platform';
+    /** 业务ID（dataSource='business' 时必传） */
+    gameId?: string | number;
+    /**
+     * 外部受控选项列表（传入后跳过内部请求，直接使用该数据；
+     * 适用于选项由父组件获取/过滤的场景）
+     */
+    options?: RegionOption[];
+    /** 是否禁用 @default false */
+    disabled?: boolean;
+    /** 占位文案 */
+    placeholder?: string;
+    /** 最大可选数量（多选时生效） */
+    max?: number;
+    /** 是否可搜索 @default true */
+    filterable?: boolean;
+    /** 标签格式 @default 'name' */
+    labelFormat?: RegionLabelFormat;
+    /** 自定义文案 */
+    texts?: PntRegionSelectTexts;
+    /** 数据加载完成回调 */
+    onLoaded?: (options: RegionOption[]) => void;
+    /** 自定义选项禁用逻辑 */
+    optionDisabled?: (item: RegionOption) => boolean;
+    /** 自定义选项 tooltip */
+    optionTooltip?: (item: RegionOption) => string;
+    /**
+     * 是否启用批量导入（仅多选时生效）：
+     * 输入框右侧显示导入按钮，支持粘贴文本按 代码/中文名/英文名 解析匹配
+     * @default false
+     */
+    importable?: boolean;
+    /** 是否在工具栏显示反选按钮（仅多选时生效） @default false */
+    invertible?: boolean;
+    /** 最小折叠数量（多选时透传 TDesign Select） */
+    minCollapsedNum?: number;
+    /** 折叠项自定义渲染（透传 TDesign Select） */
+    collapsedItems?: (props: {
+        value: unknown[];
+        collapsedSelectedItems: unknown[];
+        count: number;
+    }) => React.ReactNode;
+    /** 失焦回调（透传 TDesign Select，常用于表单校验触发） */
+    onBlur?: (context: {
+        value: unknown;
+    }) => void;
+    /** 批量导入弹窗属性透传（如 attach 挂载容器） */
+    importDialogProps?: Record<string, unknown>;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 弹层属性透传 */
+    popupProps?: Record<string, unknown>;
+}