SuperAPI AI 工具集

i18n-frontend

前端与建站

查看项目

更新于 10-15 20:31

技能介绍

用途:为 TypeScript Web 前端(React、Next.js、Vue、Nuxt、Angular、Tauri)建立国际化规范,让可见文案来自语言目录而非 JSX 中拼接的字符串。移动端见 i18n-mobile,API 见 i18n-backend,桌面原生 egui 不适用本技能。

主要能力与规则:新代码不得硬编码 UI 字符串;使用稳定键名(如 account.save)而非英文句子;用 ICU 处理复数与 select,不在视图里写 count === 1;文档设置 html lang 与 dir(ar、he 等为 rtl);显式回退链(如 pt-BR → pt → en),生产环境不出现原始键;日期数字用 Intl.DateTimeFormat / NumberFormat 配合当前 locale,API 用 ISO、UI 再格式化;CI 中加入伪 locale 或键检查。

目录与路由:locales/en/common.json、locales/pt-BR/common.json,按域分命名空间(common、auth、errors);用库的插值而非手动 replace;为译者提供键的上下文与长度说明;不翻译 ID、SKU、API 路由与受保护品牌名。locale 优先级通常为路径(/pt-BR/settings)或已登录用户的 cookie/header > Accept-Language > 默认值;公开内容考虑 hreflang 与按语言 URL;SSR 需保证首屏 HTML 与 hydration 使用同一 locale,避免闪烁。

框架用法:React SPA 用 react-i18next 等仓库既有库;Next.js App Router 用 next-intl 等,app/ 下加 [locale],middleware 处理前缀,Server Components 用 getTranslations;Vue 用 vue-i18n 的 useI18n,Nuxt 用 @nuxtjs/i18n 并配置 langDir、locales 与 localePath;Angular 用 @angular/localize 或既有库(ngx-translate/Transloco)之一,配置 LOCALE_ID 与 registerLocaleData;Tauri 沿用 Web 栈,默认取 navigator.language,用户可覆盖并持久化,不翻译 tauri.conf 标识符。

RTL 与限制:根节点设 dir="rtl",用逻辑 CSS 属性(margin-inline-start、ps-4);方向性图标镜像,logo 与照片不镜像;表单与表格需测试阿拉伯语。反模式包括字符串拼接、翻译服务端原始 error.message、单语 JSON 加 if (lang === 'pt')、无 locale 的 toLocaleDateString()、功能中途更换 i18n 库、把 RTL 推迟。完成标准:新字符串入目录、ICU 复数、lang/dir 正确、SSR 无 locale 闪烁、Intl 格式化、回退无原始键、路由与链接感知 locale。