Zebras 多语言同步工具

使用方法

1. 全局安装

npm i zebras-locale-utils -g

2. 组件集成

//在项目的 layout.tsx 使用上下文
import { ZebrasLocalProvider } from '@zebras/rjs_front_components/ZebrasLocal';
import * as zebras from 'zebras';

export default ()=>{
    return (
        <ZebrasLocalProvider zebras={zebras}>
            <Outlet />
        </ZebrasLocalProvider>
    )
}

//使用多语言切换组件
import { ZebrasLocalSelect } from '@zebras/rjs_front_components/ZebrasLocal';


export default ()=>{
    return (
        <ZebrasLocalSelect />
    )
}

//配置需要翻译的文本
import { useZebrasLocal } from '@zebras/rjs_front_components/ZebrasLocal';

export default ()=>{
    const { $$locale } = useZebrasLocal();
    return (
        <>
            {/** 一般使用 */}
            <div>{$$locale("确认")}</div>
            {/** 使用占位符 */}
            <div>{$$locale("共{0}条数据，共{1}页",100,20)}</div>
        </>
    )
}

3. 同步翻译

zebras-locale ai-api-key

ai-api-key首次运行时传入即可，没有请到 https://bailian.console.aliyun.com/#/home 获取