中英文切换 Locales

基于 react-intl-universal 封装的中英文切换组件

---

🧩 使用示例

1. 📚 在 App.jsx 内初始化

import React, { useEffect } from 'react';

import { LanguageProvider } from '@npmqg/react-context-lang';

import { useGlobalStore } from '@/store';

import Routers from '@/router/index';

import { setGlobalNavigate } from '@/lib/utils';
import en_US from '@/locales/en_US';
import zh_CN from '@/locales/zh_CN';

function AppIndex() {
  const locales = useGlobalStore((state) => state.locales);
  const setState = useGlobalStore((state) => state.setState);

  return (
    <LanguageProvider en_US={en_US} locales={locales} setState={setState} zh_CN={zh_CN}>
      <Routers />
    </LanguageProvider>
  );
}

export default AppIndex;

📚 2. 组件内使用

import React from 'react';

import { Intl } from '@npmqg/utils-locale-toggle';

function Index() {
  return (
    <Space size={12}>
      <Button size="zero" textColor="primary" variant="link">
        {Intl.v('编辑')}
      </Button>

      <Button size="zero" textColor="danger" variant="link">
        {Intl.v('删除')}
      </Button>

      <Button size="zero" textColor="info" variant="link">
        {Intl.v('查看')}
      </Button>
    </Space>
  );
}

---

🧩 使用说明

只需 在数组内 按顺序填入要转换的中英文并搭配 <IntlDropdown locales={locales} /> 即可实现中英文切换

📚 src/locales/zh_CN.js

const zh_CN = ['你好', '我好', '大家好'];

📚 src/locales/en_US.js

const en_US = ['Hello', 'I am fine', 'Hello everyone'];