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

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

@@ -1,471 +0,0 @@
-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

@@ -1,170 +0,0 @@
-.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;
-  }
-
-  // ---- 批量导入 ----
-  // 布局调整：取消固定宽度 + 按钮绝对定位，改为 flex 兄弟布局
-  // 避免选中大量地区时 Select 标签区域被按钮遮挡/挤压
-  &__import-wrapper {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    width: 100%;
-
-    .pnt-region-select {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  &__import-btn {
-    flex-shrink: 0;
-    // Button 默认 32px 高度，对齐 Select 输入框上边缘；
-    // 当 Select 因多行标签变高时，按钮保持顶部对齐不居中
-    margin-top: 2px;
-  }
-}
-
-.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);
-  }
-}