Claude Code Router 多语言配置指南界面切中英文改文案只需动 2 个文件【免费下载链接】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 RouterCCR准备接入团队同事用英文界面你却想切中文却找不到设置在哪、文案到底存在哪个文件。这段教程讲清 CCR 的多语言是怎么实现的、偏好设在哪、想改一句文案该动哪里。⚡ 30 秒速览语言偏好在 设置 → 语言 里三选一中文 / English / 跟随系统它是每个浏览器级别的偏好存在 localStorage 里界面文案集中在appCopy字典英文是源语言text表以英文原文做 key、中文译文做值报错文案是另一套系统在 core 包的translateErrorMessage精确匹配表 正则模板表两层任何没收录的 key 都会原样显示英文原文这就是 CCR 的回退界面文案与报错文案分属两个文件改之前先分清是哪一种 动手之前前置条件Node.js 18 和 npmmonorepo 结构依赖在根目录统一安装。文件职责packages/ui/src/pages/home/shared/i18n.tsx界面文案词典appCopyen/zh 两本与查表函数packages/ui/src/pages/home/shared/common.ts读写语言偏好、检测系统语言packages/core/src/contracts/i18n.ts报错文案翻译精确表 正则模板表packages/ui/src/pages/home/components/settings.tsx设置里的语言切换项 分步实操第 1 步克隆仓库并启动git clone https://gitcode.com/GitHub_Trending/cl/claude-code-router cd claude-code-router npm install npm run build # 各包构建 npm run dev # 启动验证浏览器打开管理界面导航出现 Onboarding、Providers 等英文菜单即正常。常见卡点Node 版本太老导致依赖安装失败先升级 Node 18 再重试。第 2 步切换界面语言打开 设置 → 语言在 中文 / English / 跟随系统 之间选择。验证导航文案变成上手引导 / 供应商 / 日志刷新页面后偏好仍在跟随系统则由系统首选语言决定。常见卡点换浏览器或无痕窗口会回到英文——偏好是存 localStorage 的换环境等于没存过。第 3 步读懂界面文案的落点appCopy提供 en 与 zh 两本词典组件通过useAppText()拿到一个查表函数export function useAppText() { const copy useContext(AppI18nContext); return useMemo(() (value: string) translateText(copy, value), [copy]); } // 没收录的 key 原样返回 export function translateText(copy: AppCopy, value: string): string { return copy.text[value] ?? value; }验证在 i18n.tsx 里能看到text表的固定结构——英文原文做 key、中文译文做值zh: { text: { Add Provider: 添加供应商, Check Connection: 检测连通性 // …… } }第 4 步处理报错文案报错文案来自 core 的translateErrorMessage分两层精确匹配表收录高频固定错误正则模板表处理带变量的消息。if (language ! zh) return trimmed; const exact zhExactErrorMessages[trimmed]; if (exact) return exact; for (const translator of zhPatternErrorMessages) { const match trimmed.match(translator.pattern); if (match) return translator.translate(...match.slice(1)); } return message;验证触发一个报错比如未配置模型时启动网关界面显示的应是中文提示而非原始英文。 原理速览界面语言的判定逻辑是手动偏好 系统语言readLanguagePreference读 localStorage没存过就交给detectSystemLanguage读navigator.languages只要有一个以 zh 开头就选中文否则英文。整个界面靠一个 Context 注入当前词典切换语言就是换个 Context 的值所有组件跟着重渲染——就像换语言时把整本词典换成另一本。报错翻译是精确表 模板表两层设计带变量的错误消息靠正则捕获组把变量抽出来再填回中文模板没收录的错误原样显示英文原文。这种取舍让维护者不必穷举所有报错高频文案先收录长尾报错退回英文也不影响功能。 灵活改造如果你只想改某句界面文案在appCopy的 en 和 zh 两侧text表各补一行。zh: { text: { Check Connection: 检查连接 } }如果你想让跟随系统支持第三种语言ResolvedLanguage类型目前只有en | zh两个值且detectSystemLanguage只做 zh 前缀判断类型系统会强制你改完所有引用点——先评估工作量再动。⚠️ 踩坑记录界面某处出现英文原文 →translateText查不到 key 时原样返回兜底 → 把该文案补进 en、zh 的text表报错没被翻译成中文 →translateErrorMessage只认精确表和模板表都没命中就返回原文 → 往zhExactErrorMessages补条目或复用相近的正则模板改了appCopy但界面没变化 → UI 是预构建产物 → 重新构建或重启 dev 流程再刷新页面两份关键源码界面文案 packages/ui/src/pages/home/shared/i18n.tsx报错翻译 packages/core/src/contracts/i18n.ts。【免费下载链接】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），仅供参考