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

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

@@ -0,0 +1,368 @@
+import { businessRegionQuery } from "../../api";
+import { usePntConfig } from "../../config";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Checkbox, Select } from 'tdesign-react';
+import ImportDialog from "./ImportDialog";
+import "./index.scss";
+import { DEFAULT_TEXTS } from "./types";
+
+/**
+ * 将后端区域项归一化为组件内部的 RegionOption
+ * @description 后端契约字段均为可选，此处补默认值
+ */
+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 toRegionOptions = list => (list || []).map(item => ({
+  ...item,
+  region_code: item.region_code ?? '',
+  region_ch: item.region_ch ?? '',
+  region_en: item.region_en ?? ''
+}));
+
+/**
+ * 构建标签文本
+ */
+const 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;
+  }
+};
+
+/**
+ * 地区选择器组件
+ * @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)}
+ * />
+ * ```
+ */
+const 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
+  } = usePntConfig();
+  const texts = useMemo(() => ({
+    ...DEFAULT_TEXTS,
+    ...customTexts
+  }), [customTexts]);
+
+  // ---- 状态 ----
+  const [innerOptions, setInnerOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [importVisible, setImportVisible] = useState(false);
+
+  // ---- Refs ----
+  const fetchSeqRef = useRef(0);
+  const onLoadedRef = useRef(onLoaded);
+  onLoadedRef.current = onLoaded;
+
+  // ---- 外部受控模式：传入 options 时跳过内部请求 ----
+  const isExternal = externalOptions !== undefined;
+
+  // ---- 获取数据 ----
+  const fetchData = useCallback(async () => {
+    if (isExternal) return;
+    const seq = ++fetchSeqRef.current;
+    setLoading(true);
+    try {
+      let list = [];
+      const url = scope === 'platform' ? regionQuery?.queryPlatUrl || '/api/v5/business/region/plat-query?audience=/laas-pnt' : 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 businessRegionQuery(http, {
+          game_id: Number(gameId)
+        }, url);
+        if (seq !== fetchSeqRef.current) return;
+        if (res.code === 0 && res.data?.region_list) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      } else {
+        const res = await businessRegionQuery(http, {}, url);
+        if (seq !== fetchSeqRef.current) return;
+        if (res.code === 0 && res.data?.region_list) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      }
+      setInnerOptions(list);
+      onLoadedRef.current?.(list);
+    } catch {
+      // 请求失败静默处理
+    } finally {
+      if (seq === fetchSeqRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [http, dataSource, gameId, isExternal, scope, regionQuery]);
+
+  // ---- 初始加载 ----
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ---- 生效的选项列表 ----
+  const options = useMemo(() => isExternal ? externalOptions : innerOptions, [isExternal, externalOptions, innerOptions]);
+
+  // ---- 归一化选中值为数组（兼容单选字符串） ----
+  const valueArr = useMemo(() => {
+    if (value === undefined || value === null || value === '') return [];
+    return Array.isArray(value) ? value.map(String) : [String(value)];
+  }, [value]);
+
+  // ---- 本地搜索过滤 ----
+  const filteredOptions = useMemo(() => {
+    if (!searchKeyword) return options;
+    const kw = searchKeyword.toLowerCase();
+    return options.filter(item => item.region_ch?.toLowerCase().includes(kw) || item.region_en?.toLowerCase().includes(kw) || item.region_code?.toLowerCase().includes(kw));
+  }, [options, searchKeyword]);
+
+  // ---- 判断选项是否禁用 ----
+  const isOptionDisabled = useCallback(item => {
+    if (item.disabled) return true;
+    return optionDisabled ? optionDisabled(item) : false;
+  }, [optionDisabled]);
+
+  // ---- 多选 onChange 统一出口 ----
+  const emitMultiple = useCallback(nextValue => {
+    onChange?.(nextValue, options.filter(o => nextValue.includes(o.region_code)));
+  }, [onChange, options]);
+
+  // ---- 全选/清空 ----
+  const handleSelectAll = useCallback(() => {
+    const allValues = filteredOptions.filter(item => !isOptionDisabled(item)).map(item => item.region_code);
+    emitMultiple(Array.from(new Set([...valueArr, ...allValues])));
+  }, [filteredOptions, valueArr, emitMultiple, isOptionDisabled]);
+  const handleClearAll = useCallback(() => {
+    emitMultiple([]);
+  }, [emitMultiple]);
+
+  // ---- 反选 ----
+  const handleInvert = 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 = 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 = 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]);
+
+  // ---- 构建 Select options ----
+  const selectOptions = useMemo(() => {
+    return filteredOptions.map(item => {
+      const label = getLabelText(item, labelFormat);
+      const isDisabled = isOptionDisabled(item);
+      const tooltip = optionTooltip ? optionTooltip(item) : undefined;
+      return {
+        label,
+        value: item.region_code,
+        disabled: isDisabled,
+        tooltip,
+        rawItem: item
+      };
+    });
+  }, [filteredOptions, labelFormat, isOptionDisabled, optionTooltip]);
+
+  // ---- Select onChange ----
+  const handleChange = useCallback(val => {
+    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?.(strValues, selectedOptions);
+    } else {
+      onChange?.(strValues[0] ?? '', selectedOptions[0] ?? undefined);
+    }
+  }, [onChange, options, multiple]);
+
+  // ---- 批量导入确认 ----
+  const handleImportConfirm = useCallback(nextValue => {
+    emitMultiple(nextValue);
+    // 兼容外部表单 onBlur 校验触发
+    onBlur?.({
+      value: nextValue
+    });
+  }, [emitMultiple, onBlur]);
+
+  // ---- 面板顶部操作栏 ----
+  const panelTopContent = useMemo(() => {
+    if (!multiple) return null;
+    return /*#__PURE__*/_jsxs("div", {
+      className: "pnt-region-select__toolbar",
+      children: [/*#__PURE__*/_jsx(Checkbox, {
+        checked: isAllSelected,
+        indeterminate: isIndeterminate,
+        onChange: checked => {
+          if (checked) {
+            handleSelectAll();
+          } else {
+            handleClearAll();
+          }
+        },
+        children: texts.selectAll
+      }), invertible && /*#__PURE__*/_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__*/_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 = useMemo(() => {
+    if (loading) return null;
+    if (filteredOptions.length === 0) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "pnt-region-select__empty",
+        children: texts.noResult
+      });
+    }
+    return null;
+  }, [loading, filteredOptions.length, texts.noResult]);
+  const selectNode = /*#__PURE__*/_jsx(Select, {
+    value: multiple ? valueArr : valueArr[0],
+    onChange: handleChange,
+    filterable: filterable,
+    onSearch: setSearchKeyword,
+    loading: loading && options.length === 0,
+    multiple: multiple,
+    max: max,
+    clearable: true,
+    disabled: disabled,
+    placeholder: placeholder || texts.placeholder,
+    panelTopContent: panelTopContent,
+    empty: emptyContent,
+    minCollapsedNum: minCollapsedNum,
+    collapsedItems: collapsedItems,
+    onBlur: onBlur,
+    popupProps: {
+      ...popupProps,
+      overlayClassName: ['pnt-region-select-popup', popupProps?.overlayClassName].filter(Boolean).join(' ')
+    },
+    className: className ? `pnt-region-select ${className}` : 'pnt-region-select',
+    style: style,
+    children: selectOptions.map(opt => /*#__PURE__*/_jsx(Select.Option, {
+      value: opt.value,
+      label: opt.label,
+      disabled: opt.disabled,
+      title: opt.tooltip
+    }, opt.value))
+  });
+
+  // ---- 批量导入模式：输入框右侧叠加导入按钮 ----
+  if (importable && multiple) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "pnt-region-select__import-wrapper",
+        children: [selectNode, /*#__PURE__*/_jsx(Button, {
+          theme: "primary",
+          size: "small",
+          variant: "outline",
+          disabled: disabled,
+          className: "pnt-region-select__import-btn",
+          onClick: () => setImportVisible(true),
+          children: texts.importBtn
+        })]
+      }), /*#__PURE__*/_jsx(ImportDialog, {
+        visible: importVisible,
+        options: options,
+        currentValue: valueArr,
+        texts: texts,
+        dialogProps: importDialogProps,
+        onClose: () => setImportVisible(false),
+        onConfirm: handleImportConfirm
+      })]
+    });
+  }
+  return selectNode;
+};
+export default PntRegionSelect;

package/lib/esm/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/esm/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>;
+}