English | 中文 | CHANGELOG

@enum-plus/plugin-next-international

集成 next-international 并实现枚举标签的国际化

简介

@enum-plus/plugin-next-international 是 enum-plus 的一个插件，自动集成 next-international 实现枚举标签的国际化。它允许你在枚举定义中使用 next-international 的本地化键，并动态显示为当前语言的翻译文本。

⚠️ 请注意，该插件仅支持在客户端环境，不支持在服务端渲染。

安装

npm install @enum-plus/plugin-next-international

在应用程序的入口文件中，导入 @enum-plus/plugin-next-international 插件并安装：

import { clientI18nPlugin } from '@enum-plus/plugin-next-international';
import { Enum } from 'enum-plus';

Enum.install(clientI18nPlugin);

插件选项

安装插件时，可以传入一个配置对象，用于设置插件的全局选项：

Enum.install(clientI18nPlugin, {
  localize: {
    /**
     * 本地化输出结果，默认为 'text'
     *
     * - `text`: 返回纯文本字符串，不会随语言变化而变化
     * - `component`: 返回 React 组件实例，切换语言后会自动更新显示内容
     */
    mode: 'text',
  },
  isMatch: {
    defaultSearchField: 'label', // isMatch 方法的默认搜索字段，默认为 'label'
  },
});

用法

枚举标签响应语言的变化

可以通过在枚举定义中使用本地化键，来实现枚举标签的国际化。

• 使用文本模式（默认）

import { clientI18nPlugin } from '@enum-plus/plugin-next-international';
import { Enum } from 'enum-plus';
import { useChangeLocale } from './path/to/client';

// index.js
Enum.install(clientI18nPlugin, {
  localize: {
    mode: 'text',
  },
});

// SomeComponent.js
const changeLanguage = useChangeLocale();
const WeekEnum = Enum(
  {
    Monday: { value: 1, label: 'week.monday' },
    Tuesday: { value: 2, label: 'week.tuesday' },
  },
  {
    name: 'weekDays.name', // 枚举类型名称，可选
  }
);

WeekEnum.label(1); // Monday
WeekEnum.name; // Week

changeLanguage('zh-CN');
WeekEnum.label(1); // 星期一
WeekEnum.name; // 周

• 使用组件模式

import { clientI18nPlugin } from '@enum-plus/plugin-next-international';
import { Enum } from 'enum-plus';
import { useChangeLocale } from './path/to/client';

// index.js
Enum.install(clientI18nPlugin, {
  localize: {
    mode: 'component',
  },
});

// SomeComponent.js
const changeLanguage = useChangeLocale();
const WeekEnum = Enum(
  {
    Monday: { value: 1, label: 'week.monday' },
    Tuesday: { value: 2, label: 'week.tuesday' },
  },
  {
    name: 'weekDays.name', // 枚举类型名称，可选
  }
);

WeekEnum.label(1); // React组件，显示为 Monday，可自动响应语言变化
WeekEnum.name; // React组件，显示为 Week，可自动响应语言变化

changeLanguage('zh-CN');
WeekEnum.label(1); // React组件，显示为 星期一，可自动响应语言变化
WeekEnum.name; // React组件，显示为 周，可自动响应语言变化

从枚举生成的UI组件，当语言变化时，标签会自动更新：

import { Button, Select } from 'antd';
import { useChangeLocale } from './path/to/client';

const changeLanguage = useChangeLocale();

<Select options={WeekEnum.items} defaultValue={WeekEnum.Monday} />;
// 选中并显示: Monday

<Button onClick={() => changeLanguage('zh-CN')}>切换语言</Button>;

// 切换语言后，选中项的文本会自动更新为: 星期一

下拉框搜索

在 组件 模式下，由于枚举的 label 已经变成了组件实例，而不是字符串类型，故无法直接用于文本搜索。可以使用 isMatch 或 isMatchCaseSensitive 方法来实现对枚举项的过滤。

import { Select } from 'antd';

<Select options={WeekEnum.items} filterOption={WeekEnum.isMatch} />;

其它API

💎 isMatch

[方法]   isMatch(searchText: string, item: EnumItem): boolean

isMatch 方法用于根据搜索文本过滤枚举项，支持对枚举项的 label 进行模糊匹配，且忽略大小写。

• 下拉框搜索

import { Select } from 'antd';

<Select options={WeekEnum.items} filterOption={WeekEnum.isMatch} />;

• 常规过滤的用法

WeekEnum.items.filter((item) => WeekEnum.isMatch('Mon', item)); // 过滤出 label 中包含 'Mon' 的枚举项

💎 isMatchCaseSensitive

[方法]   isMatchCaseSensitive(searchText: string, item: EnumItem): boolean

isMatchCaseSensitive 方法用于根据搜索文本过滤枚举项，支持对枚举项的 label 进行模糊匹配，且区分大小写。

• 下拉框搜索

import { Select } from 'antd';

<Select options={WeekEnum.items} filterOption={WeekEnum.isMatchCaseSensitive} />;

• 常规过滤用法

WeekEnum.items.filter((item) => WeekEnum.isMatch('mon', item)); // 过滤出 label 中包含 'mon' 的枚举项 (区分大小写)