ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Claude Code Router 国际化详解:改 3 个地方,界面全切中文

Claude Code Router 国际化详解:改 3 个地方,界面全切中文 Claude Code Router 国际化详解改 3 个地方界面全切中文【免费下载链接】claude-code-routerOne local control plane for every AI agent: route across models, fuse new capabilities, orchestrate tools, and stay fully in control.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-router你第一次打开 Claude Code Router 桌面端界面上每个按钮都是英文。把设置里的语言下拉框切成中文整个 UI 跟着换掉。这套 i18n国际化实现只有 1 个文件、2 张表、1 个钩子多语言配置全在这里。下面演示改一句文案、加一门新语言、翻译不生效时去哪找。先看效果切完之后界面长什么样这是英文状态的 Overview 页。侧边栏的 Overview、Providers、Logs状态条上的 System status切到中文后这些标签会全部换成中文。这张是 Providers 和 Router 配置页。你填的供应商名称、模型名kimi、deepseek-chat不会变那属于数据会变的是 Providers、Save and Restart 这类界面文案。记住这条分界线后面判断该不该翻译就靠它。背后只有三样东西这个项目没用 i18next是一套手写实现共三件appCopypackages/ui/src/pages/home/shared/i18n.tsx 里 en / zh 两张文案表AppI18nContextApp 根节点用 React Context 把当前语言表注入整棵组件树useAppText()钩子返回一个t()函数拿英文原文查表查不到就原样返回没有 JSON 语言文件、没有检测插件成本是所有文案集中在一个文件里。跟着改三处改现有翻译搜英文原文改中文你要做的事在 zh 表里找到那句英文对应的 key把值改掉。下面这段就是i18n.tsx里 zh 表的局部结构// packages/ui/src/pages/home/shared/i18n.tsxzh 表的 text 部分 text: { // ... 省略 ... Save and Restart: 保存并重启, // 把右边改成你想要的措辞 // ... 省略 ... }key 是英文原文本身不用另起命名规则英文表里新增了一句文案而 zh 表没有界面就显示英文不会报错。加一门新语言复制一张表扩一下联合类型你要做的事把 en 表复制一份翻译成 ja然后在三处登记。核心改动如下// i18n.tsx联合类型从两个值扩成三个加一张 ja 表 type ResolvedLanguage en | zh | ja; const appCopy: RecordResolvedLanguage, AppCopy { en: { /* ... */ }, zh: { /* ... */ }, ja: { /* ... 复制 en 表翻译 */ } };剩下两步在 settings.tsx 的languageOptions里加一个{ label: 日本語, value: ja }用户选完后偏好自动写进 localStorage 的ccr.ui.languagehtml lang也会同步不用你管。组件里取一句文案3 行代码你要做的事在任意组件里拿t()传入英文原文即可。import { useAppText } from ./shared/i18n; const t useAppText(); return Button{t(Save and Restart)}/Button;命中表返回译文没命中返回原文不用判空。红色错误提示走另一条路useAppErrorText()对应文案表在 packages/core/src/contracts/i18n.ts分精确匹配 正则模式两层。踩坑与救火4 个高频问题和修法1. 改了文案不生效症状zh 表改了界面还是英文。原因大概率是设置里语言下拉还停在 English偏好存在ccr.ui.language或者你改到了 en 表那一侧。修法设置里确认语言是中文再检查改的是appCopy.zh而不是appCopy.en。2. 键名差一个字符界面悄悄变回英文症状个别文字是英文、个别是中文像坏了一样。原因key 就是英文原文t()查不到时直接返回入参不报错。上面弹窗里标题是英文、颜色占位符是中文就是部分 key 没进 zh 表的表现不是 bug。修法从代码里复制那串英文原文做 key别手敲。3. 错误提示不跟着界面切语言症状界面是中文弹出来的错误还是英文。原因错误文案不在 UI 表里在 core 的zhExactErrorMessages逐字匹配和zhPatternErrorMessages正则处理带变量名、端点的长句。修法短句子进精确表加一条带参数的长句进 pattern 表加一条正则。4. 选跟随系统却显示英文症状系统是中文界面却是英文。原因system 模式读浏览器的navigator.language前缀zh-开头才判中文另外 localStorage 里如果存过手动选择它会优先于系统检测。修法清掉localStorage里的ccr.ui.language重新选一次或在设置里直接指定中文。界面文案集中在 packages/ui/src/pages/home/shared/i18n.tsx错误消息翻译在 packages/core/src/contracts/i18n.ts语言切换逻辑在 App 根组件里三行状态搞定。下次再遇到看不懂的英文去这两个文件里搜原文加一行中文就完事。【免费下载链接】claude-code-routerOne local control plane for every AI agent: route across models, fuse new capabilities, orchestrate tools, and stay fully in control.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-router创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表