@pnt-team/pnt-component-frontend 0.0.110 → 0.0.113

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

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import './index.scss';
+import type { PntRegionSelectProps } from './types';
+/**
+ * 地区选择器组件
+ * @description 统一的国家/地区选择组件，支持单选/多选、批量选择、批量导入、自定义区域、合规区域
+ *
+ * @example
+ * ```tsx
+ * // 基础多选（内部拉取默认区域列表）
+ * <PntRegionSelect
+ *   value={regions}
+ *   onChange={(v) => setRegions(v)}
+ * />
+ *
+ * // 自定义合规区域
+ * <PntRegionSelect
+ *   dataSource="custom"
+ *   gameId={gameId}
+ *   env={0}
+ *   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;

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

@@ -0,0 +1,388 @@
+import { businessGameInfoGetCustomRegion, 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="custom"
+ *   gameId={gameId}
+ *   env={0}
+ *   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',
+    gameId,
+    env = 0,
+    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
+  } = 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 = [];
+      if (dataSource === 'custom') {
+        if (!gameId) {
+          console.warn('[PntRegionSelect] dataSource="custom" 时必须传入 gameId');
+          return;
+        }
+        const res = await businessGameInfoGetCustomRegion(http, {
+          game_id: Number(gameId),
+          env
+        });
+        if (seq !== fetchSeqRef.current) return;
+        if (res.code === 0 && res.data?.region_list) {
+          list = toRegionOptions(res.data.region_list);
+        }
+      } else if (dataSource === 'business') {
+        if (!gameId) {
+          console.warn('[PntRegionSelect] dataSource="business" 时必须传入 gameId');
+          return;
+        }
+        const res = await businessRegionQuery(http, {
+          game_id: Number(gameId)
+        });
+        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, {});
+        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, env, isExternal]);
+
+  // ---- 初始加载 ----
+  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);
+  }
+}