国际化

Kite 支持中英文切换，插件通过 SDK 的国际化工具使用相同的语言设置。插件的翻译独立管理，用户切换 Kite 语言时插件文案随之切换。

翻译文件

翻译保存在 src/locales/en.json 和 src/locales/zh.json，两个文件必须使用完全相同的键结构，否则构建失败：

{
  "navigation": {
    "workloads": "工作负载工具",
    "deployment": "部署"
  },
  "actions": {
    "refresh": "刷新 {{name}}"
  }
}

配置国际化

在 src/i18n.ts 中导入翻译文件并调用 createPluginI18n()：

import { createPluginI18n } from '@kite-dev/plugin-sdk/i18n'

import en from './locales/en.json'
import zh from './locales/zh.json'

export const {
  resources: translations,
  label,
  useTranslation,
} = createPluginI18n({ en, zh })

通过以下方式使用翻译：

• label(key)：用于 plugin.config.tsx 中的路由标题、菜单和 Tab 标签，返回该键的中英文文案，由 Kite 根据当前语言显示。
• useTranslation()：用于页面组件，按当前语言解析键。

配置中使用 label

import { lazy } from 'react'
import { definePlugin } from '@kite-dev/plugin-sdk'

import { label, translations } from './src/i18n'

const WorkloadsPage = lazy(() => import('./src/pages/workloads'))

export default definePlugin({
  i18n: translations,
  routes: [
    { id: 'workloads', path: '', title: label('navigation.workloads'), element: <WorkloadsPage /> },
  ],
  menus: [
    { id: 'workloads', label: label('navigation.workloads'), route: 'workloads' },
  ],
})

页面中使用 t

页面内从本地 src/i18n.ts 导入 useTranslation：

import { Button } from '@kite-dev/plugin-sdk/ui'

import { useTranslation } from '../i18n'

export function RefreshButton({ name, onClick }: { name: string; onClick: () => void }) {
  const { t } = useTranslation()
  return <Button onClick={onClick}>{t('actions.refresh', { name })}</Button>
}

• t('key') 的键有 TypeScript 自动补全。
• 插值用 t('key', { name }) 对应消息中的 ；也支持 i18next 的复数语法。
• Hook 同时返回 language（如 zh / en），可用于日期和数字的本地化格式化。

行为要点

• 页面翻译随插件一起加载，无需手动注册命名空间；插件停用时 Kite 自动清理其翻译内容。
• 翻译键必须同时存在于 en.json 和 zh.json，且嵌套结构逐层对齐，否则构建失败。
• 原始键名（如 actions.refresh）在缺失时会直接显示，不会抛出运行时错误。