SuperAPI AI 工具集

react-admin-i18n

前端与建站

查看项目

更新于 10-16 00:06

技能介绍

用途:为 react-admin / shadcn admin kit 应用添加多语言支持,把仅英文的应用改造为可切换语言的界面。

主要能力:给出完整工作流——安装 ra-i18n-polyglot、ra-language-english、ra-language-<目标语言> 及认证提供方语言包;用 polyglotI18nProvider 创建 i18nProvider 并合并目录、检测浏览器语言;建立英文与目标语言消息目录;把 JSX 中硬编码字符串改为 <Translate> 或 useTranslate(),或依赖 react-admin 自动推断;关闭浏览器自动翻译;在 Profile 页添加语言切换器;清理未使用键。

命名空间约定:ra.* 为框架消息,ra-supabase.* 等为认证提供方消息,resources.<resource>.name 与 resources.<resource>.fields.<field> 用于资源与字段标签,app.* 或项目前缀用于应用文案。字段翻译放在 resources 下可让 TextInput、TextField 与筛选器自动解析标签。

关键规则:避免重复翻译;让 react-admin 推断标签;字段、输入与筛选器共用同一键;用插值而非拼接;用 Polyglot 的 |||| 复数形式;消息按功能就近作用域;语法差异用独立键;使用控制器提供的 defaultTitle;迁移期可用 _ 默认值但完成后移除;notify() 也要翻译;数字与日期用 Intl;用 resolveBrowserLocale() 检测初始语言;在 HTML 加 translate="no" 与 notranslate meta;翻译 sr-only、aria 标签与 placeholder。

类型安全:英文目录用 as const 并派生类型,仓库内语言用 satisfies AppMessages 保证缺键编译报错,外部语言用 PartialAppMessages 允许回退英文。i18nProvider 中把非默认语言目录合并到英文目录之上以回退。语言切换器用 useLocaleState() 与 useLocales(),仅在多语言时渲染。

限制:资料未提供具体版本要求、性能数据或收费信息;示例代码为示意,实际键名与目录结构需按项目调整。