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

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

@@ -0,0 +1,471 @@
+import { businessRegionQuery } from "../../api";
+import { usePntConfigOptional } 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 { getTextsByLocale } from "./types";
+
+/**
+ * 归一化 region_code：纯数字字符串去掉前导零（'012' -> '12'），非数字保持原样
+ * @description 后端详情接口可能返回 '12'，字典接口可能返回 '012'，需统一格式才能匹配
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const normalizeRegionCode = code => {
+  if (code === null || code === undefined || code === '') return '';
+  const str = String(code);
+  return /^\d+$/.test(str) ? String(Number(str)) : str;
+};
+
+/**
+ * 组件内部选项：region_code 为归一化码（用于匹配/选中），
+ * rawRegionCode 保留数据源的原始码（如 '004'，用于对外回传，避免前导零丢失）
+ */
+
+/**
+ * 将后端区域项归一化为组件内部的 RegionOption
+ * @description 后端契约字段均为可选，此处补默认值；同时保留原始 region_code
+ */
+const toRegionOptions = list => (list || []).map(item => ({
+  ...item,
+  region_code: normalizeRegionCode(item.region_code),
+  rawRegionCode: item.region_code === null || item.region_code === undefined ? '' : String(item.region_code),
+  region_ch: item.region_ch ?? '',
+  region_en: item.region_en ?? ''
+}));
+
+/**
+ * 构建标签文本
+ */
+const getLabelText = (item, format) => {
+  const {
+    region_ch,
+    region_en,
+    region_code,
+    rawRegionCode
+  } = item;
+  switch (format) {
+    case 'name_en':
+      return region_en || region_ch || rawRegionCode || region_code;
+    case 'name_en_name':
+      return region_en && region_ch ? `${region_en}（${region_ch}）` : region_en || region_ch || rawRegionCode || region_code;
+    case 'code':
+      // 代码标签优先展示数据源原始码（保留前导零，如 '004'）
+      return rawRegionCode || region_code;
+    default:
+      return region_ch || region_en || rawRegionCode || 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,
+    optionFilter,
+    optionTooltip,
+    importable = false,
+    invertible = false,
+    preserveLeadingZero = true,
+    minCollapsedNum,
+    collapsedItems,
+    onBlur,
+    importDialogProps,
+    className,
+    style,
+    popupProps,
+    locale: propLocale
+  } = props;
+
+  // 外部受控模式下无需 http，因此使用可选版配置读取
+  const config = usePntConfigOptional();
+  const http = config?.http;
+  const regionQuery = config?.regionQuery;
+  // 优先级：prop locale > PntProvider locale > 默认 'zh'
+  const locale = propLocale || config?.locale || 'zh';
+  // 文案优先级：customTexts > locale 默认文案
+  const texts = useMemo(() => ({
+    ...getTextsByLocale(locale),
+    ...customTexts
+  }), [customTexts, locale]);
+
+  // ---- 状态 ----
+  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;
+    if (!http) {
+      console.warn('[PntRegionSelect] 未注入 PntProvider.http，无法内部拉取区域数据；请用 <PntProvider> 包裹，或改用外部 options 模式');
+      return;
+    }
+    const seq = ++fetchSeqRef.current;
+    setLoading(true);
+    try {
+      let list = [];
+      const url = scope === 'platform' ? regionQuery?.queryPlatUrl || '/v5/business/region/plat-query?audience=/laas-pnt' : regionQuery?.queryUrl || '/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]);
+
+  // ---- 生效的选项列表 ----
+  // region_code 统一归一化（去前导零）用于与 valueArr 匹配；
+  // rawRegionCode 保留数据源原始码（内部拉取已有，外部 options 取其原始值）
+  const options = useMemo(() => (isExternal ? externalOptions ?? [] : innerOptions).map(item => ({
+    ...item,
+    region_code: normalizeRegionCode(item.region_code),
+    rawRegionCode: item.rawRegionCode ?? (item.region_code === null || item.region_code === undefined ? '' : String(item.region_code))
+  })), [isExternal, externalOptions, innerOptions]);
+
+  // ---- 归一化码 -> 数据源原始码（如 '4' -> '004'），以选项字典为权威来源 ----
+  const rawCodeMap = useMemo(() => {
+    const map = new Map();
+    options.forEach(item => {
+      map.set(item.region_code, item.rawRegionCode || item.region_code);
+    });
+    return map;
+  }, [options]);
+
+  // ---- 受控 value 中存在、但选项里缺失的码，兜底保留调用方传入的原始写法 ----
+  const inputRawCodeMap = useMemo(() => {
+    const map = new Map();
+    if (value === undefined || value === null || value === '') return map;
+    const arr = Array.isArray(value) ? value : [value];
+    arr.forEach(item => {
+      if (item === null || item === undefined || item === '') return;
+      map.set(normalizeRegionCode(item), String(item));
+    });
+    return map;
+  }, [value]);
+
+  // ---- 将内部归一化码还原为应对外输出的原始码 ----
+  // preserveLeadingZero=true（默认）: 输出数据源原始码（保留前导零，如 '004'）
+  // preserveLeadingZero=false: 输出归一化码（去前导零，如 '4'）
+  const resolveRawCodes = useCallback(codes => codes.map(code => {
+    const raw = rawCodeMap.get(code) ?? inputRawCodeMap.get(code) ?? code;
+    return preserveLeadingZero ? raw : normalizeRegionCode(raw);
+  }), [rawCodeMap, inputRawCodeMap, preserveLeadingZero]);
+
+  // ---- 转为对外暴露的 RegionOption（region_code 根据 preserveLeadingZero 决定格式） ----
+  const toPublicOption = useCallback(item => {
+    const raw = rawCodeMap.get(item.region_code) ?? item.region_code;
+    return {
+      region_code: preserveLeadingZero ? raw : normalizeRegionCode(raw),
+      region_ch: item.region_ch,
+      region_en: item.region_en,
+      region_a2_code: item.region_a2_code,
+      region_a3_code: item.region_a3_code,
+      disabled: item.disabled,
+      disabledReason: item.disabledReason
+    };
+  }, [rawCodeMap, preserveLeadingZero]);
+
+  // ---- 归一化选中值为数组（兼容单选字符串），并去掉前导零与 options 对齐 ----
+  const valueArr = useMemo(() => {
+    if (value === undefined || value === null || value === '') return [];
+    const arr = Array.isArray(value) ? value : [value];
+    return arr.map(v => normalizeRegionCode(v));
+  }, [value]);
+
+  // ---- 本地搜索过滤 + optionFilter 自定义过滤 ----
+  const filteredOptions = useMemo(() => {
+    let result = options;
+    if (optionFilter) {
+      result = result.filter(optionFilter);
+    }
+    if (!searchKeyword) return result;
+    const kw = searchKeyword.toLowerCase();
+    return result.filter(item => item.region_ch?.toLowerCase().includes(kw) || item.region_en?.toLowerCase().includes(kw) || item.region_code?.toLowerCase().includes(kw) || item.rawRegionCode?.toLowerCase().includes(kw));
+  }, [options, searchKeyword, optionFilter]);
+
+  // ---- 判断选项是否禁用 ----
+  const isOptionDisabled = useCallback(item => {
+    if (item.disabled) return true;
+    return optionDisabled ? optionDisabled(item) : false;
+  }, [optionDisabled]);
+
+  // ---- 多选 onChange 统一出口 ----
+  // 入参为内部归一化码，对外回传数据源原始码（保留前导零，如 '004'）
+  const emitMultiple = useCallback(nextValue => {
+    const rawValues = resolveRawCodes(nextValue);
+    const selectedOptions = options.filter(o => nextValue.includes(o.region_code)).map(toPublicOption);
+    onChange?.(rawValues, selectedOptions);
+    return rawValues;
+  }, [onChange, options, resolveRawCodes, toPublicOption]);
+
+  // ---- 全选/清空 ----
+  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] : [];
+    // Select 回传的是 option 上的归一化码，仅用于匹配
+    const strValues = values.map(normalizeRegionCode);
+    const selectedOptions = options.filter(o => strValues.includes(o.region_code)).map(toPublicOption);
+    // 对外输出还原为数据源原始码（保留前导零）
+    const rawValues = resolveRawCodes(strValues);
+    // 多选模式下勾选后清除搜索关键字，恢复完整列表
+    if (multiple) {
+      setSearchKeyword('');
+    }
+    if (multiple) {
+      onChange?.(rawValues, selectedOptions);
+    } else {
+      onChange?.(rawValues[0] ?? '', selectedOptions[0] ?? undefined);
+    }
+  }, [onChange, options, multiple, resolveRawCodes, toPublicOption]);
+
+  // ---- 批量导入确认 ----
+  const handleImportConfirm = useCallback(nextValue => {
+    // ImportDialog 回传归一化码，经 emitMultiple 还原为原始码
+    const rawValues = emitMultiple(nextValue);
+    // 兼容外部表单 onBlur 校验触发，同样回传原始码
+    onBlur?.({
+      value: rawValues
+    });
+  }, [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 handlePopupVisibleChange = useCallback(visible => {
+    if (!visible) {
+      setSearchKeyword('');
+    }
+  }, []);
+  const selectNode = /*#__PURE__*/_jsx(Select, {
+    value: multiple ? valueArr : valueArr[0],
+    onChange: handleChange,
+    filterable: filterable,
+    onSearch: setSearchKeyword,
+    onPopupVisibleChange: handlePopupVisibleChange,
+    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,174 @@
+.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;
+  }
+
+  // ---- 批量导入 ----
+  // 批量导入按钮绝对定位在 Select 输入框内部，
+  // 给 .t-input 预留右侧 padding，避免选中大量地区时标签与按钮重叠
+  &__import-wrapper {
+    position: relative;
+    width: 100%;
+
+    .pnt-region-select {
+      width: 100%;
+    }
+
+    // Select 输入框预留按钮占位（按钮约 80px + 右侧 20px = 100px）
+    .t-input {
+      padding-right: 100px;
+    }
+  }
+
+  &__import-btn {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    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);
+  }
+}