国际化

插件通过 SDK 的国际化工具跟随 Kite 的语言设置。英文翻译必填，其他语言均可选；缺失的文案会逐项回退到英文。

翻译文件

脚手架默认生成 src/locales/en.json 和 src/locales/zh.json。以英文翻译为基础，例如 en.json：

{
  "navigation": {
    "workloads": "Workload tools",
    "deployment": "Deployment"
  },
  "actions": {
    "refresh": "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 标签。
• 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，不会因此构建失败。
• 页面中的翻译键在当前语言和英文中都不存在时，显示原始键名（如 actions.refresh）。