Yaak 多语言切换怎么做3 步给界面装上中英文日切换开关【免费下载链接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 项目地址: https://gitcode.com/GitHub_Trending/ya/yaak用 Yaak 管理 REST、GraphQL、gRPC 请求时最直观的感受是功能顺手但整个界面是英文的。如果你希望日常操作里看到中文菜单和提示这篇 i18n 实战i18n 就是让软件界面说用户母语的做法会带你从零搭出一套可实时切换的多语言方案中文、英文、日文、韩文切换不用重启应用。先说结论Yaak 官方目前还没内置界面本地化所以自建方案不是临时方案而是值得参考的正路。为什么这个工具还不会说中文Yaak 的定位是最直觉的桌面 API 客户端开发重心一直在协议能力上——REST、WebSockets、Server Sent Events、gRPC 全支持。翻过 apps/yaak-client/components/ 下的源码后会确认界面文案基本是直接写死的英文比如设置页里的 Update Channel、右键菜单里的 Copy as Curl。它不是藏了个语言开关而是根本没有这一层。这对国内用户的影响很具体快捷键列表、设置项描述、报错提示全是英文。方案思路也很直接——既然官方没做我们自己补一层而且尽量不动 Yaak 的既有架构。语言切换背后的三个部件不管哪个框架做多语言拆开看都只有三样东西先把它们说清楚再动手。资源文件每个语言一个 JSON 文件存的是key → 文案的映射。key 是语言无关的标识比如common.send中文包里值是发送英文包里是Send。全局状态一个全应用共享的当前语言变量。React 生态里常见做法是 jotai 的 atom——你可以理解成一个谁都能订阅的共享格子。文案替换点界面上每句写死的文字改成拿着 key 去当前语言的包里查。理解这三点后你会发现所谓本地化没有魔法难点全在工程细节key 怎么组织、状态放哪里、替换点怎么不漏。从零搭出切换能力目录结构先示意一下语言包放在前端应用目录下apps/yaak-client/ ├── locales/ │ ├── en.json │ ├── zh-CN.json │ ├── ja.json │ └── ko.json └── lib/i18n/ └── context.tsx翻译包保持克制只放界面真正用到的文案两三个键就够起步{ common: { send: 发送, cancel: 取消 }, settings: { language: 界面语言 } }然后做三件事在设置页加语言选项。Yaak 的设置页是分区渲染的apps/yaak-client/components/Settings/ 下每个文件对应一个分区。给语言加选项就是在外观或通用分区里仿照现有的下拉设置项再加一行选项值填en、zh-CN、ja、ko。写语言上下文。React 的 Context 机制可以把数据穿到任意深度的组件相当于应用级广播。核心就一个翻译函数t按 key 的层级去包里取值取不到就回退英文再不行直接显示 key 方便排查// 示意语言上下文向全应用提供翻译函数 export function useI18n() { const [language, setLanguage] useAtom(languageAtom); const pack translations[language] ?? translations.en; const t (key: string, vars?: Recordstring, string) { let out key.split(.).reduceany((o, k) o?.[k], pack); if (typeof out ! string) out translations.en t(key); return vars ? out.replace(/\{(\w)\}/g, (_, n) vars[n]) : out; }; return { t, language, setLanguage }; }替换文案。把组件里的ButtonSend/Button换成Button{t(common.send)}/Button这样的形式。不必追求一步到位先从侧边栏、设置页这些高频区域改起用改一处、切一次语言确认的节奏推进。切换即时生效怎么做实时两个字拆开看其实是两个问题切换后界面立刻变以及关掉应用后选择还在。第一个问题状态放对了位置就自动解决了。languageAtom是全应用共享的翻译函数每次都读当前 atom 的值React 的依赖追踪会让所有用到t()的组件在 atom 变化时重新渲染——你在下拉框里选了中文整屏文案当场跟着变不需要任何通知代码。第二个问题靠持久化。切换时把语言值写进本地存储Yaak 的设置本身是存在模型里的更贴合的做法是像它的 Update Channel 那样给设置加一个language字段不想动数据层的话写 localStorage 也完全够用。应用启动时先读一次持久化的值初始化 atom再兜底取系统语言navigator.language以zh开头就给zh-CN用户首次打开应用就能看到对应语言的界面。这两个点做到位实时切换就没有额外成本本质是状态联动加一次持久化。验证、遗漏与常见坑怎么算改对了用每种语言走一遍主流程新建请求 → 发送 → 看响应 → 打开设置切语言任何一处出现漏译的英文就是遗漏点。容易漏的文案有几类可以对照检查类别典型位置处理建议弹窗与确认框删除确认、大文件提示优先补出镜率高Toast 与报错信息请求失败提示保留错误码原文只翻译前缀快捷键、右键菜单侧边栏、编辑器最后统一过一遍插件提供的界面插件面板插件侧支持 key 覆盖宿主提供回退插件是容易忽略的一块Yaak 的插件运行在独立运行时里宿主可以通过注入翻译函数的方式让插件也调t()插件没提供对应语言文案时回退英文这样插件生态不会成为多语言短板。常见的坑还有两个。一是 key 用中文当值导致英文回退时直接显示中文二是翻译了静态文案却漏了模板字符串比如共 3 条响应这类带数字的句子建议用变量占位{count}而不是字符串拼接。这套方案的适用边界把适用边界说透。它覆盖的是 Yaak 应用自身的界面文案插件文案要靠注入机制跟随后端返回的错误原文、请求和响应内容本身不在范围内也不该翻译。它同样是一份外挂改动散落在几十个组件里官方升级后大概率需要重新对齐长期看更省力的姿势是盯着官方是否内置 i18n一旦内置就把自建方案平滑过去。【免费下载链接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 项目地址: https://gitcode.com/GitHub_Trending/ya/yaak创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Yaak 多语言切换怎么做？3 步给界面装上中英文日切换开关
Yaak 多语言切换怎么做3 步给界面装上中英文日切换开关【免费下载链接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 项目地址: https://gitcode.com/GitHub_Trending/ya/yaak用 Yaak 管理 REST、GraphQL、gRPC 请求时最直观的感受是功能顺手但整个界面是英文的。如果你希望日常操作里看到中文菜单和提示这篇 i18n 实战i18n 就是让软件界面说用户母语的做法会带你从零搭出一套可实时切换的多语言方案中文、英文、日文、韩文切换不用重启应用。先说结论Yaak 官方目前还没内置界面本地化所以自建方案不是临时方案而是值得参考的正路。为什么这个工具还不会说中文Yaak 的定位是最直觉的桌面 API 客户端开发重心一直在协议能力上——REST、WebSockets、Server Sent Events、gRPC 全支持。翻过 apps/yaak-client/components/ 下的源码后会确认界面文案基本是直接写死的英文比如设置页里的 Update Channel、右键菜单里的 Copy as Curl。它不是藏了个语言开关而是根本没有这一层。这对国内用户的影响很具体快捷键列表、设置项描述、报错提示全是英文。方案思路也很直接——既然官方没做我们自己补一层而且尽量不动 Yaak 的既有架构。语言切换背后的三个部件不管哪个框架做多语言拆开看都只有三样东西先把它们说清楚再动手。资源文件每个语言一个 JSON 文件存的是key → 文案的映射。key 是语言无关的标识比如common.send中文包里值是发送英文包里是Send。全局状态一个全应用共享的当前语言变量。React 生态里常见做法是 jotai 的 atom——你可以理解成一个谁都能订阅的共享格子。文案替换点界面上每句写死的文字改成拿着 key 去当前语言的包里查。理解这三点后你会发现所谓本地化没有魔法难点全在工程细节key 怎么组织、状态放哪里、替换点怎么不漏。从零搭出切换能力目录结构先示意一下语言包放在前端应用目录下apps/yaak-client/ ├── locales/ │ ├── en.json │ ├── zh-CN.json │ ├── ja.json │ └── ko.json └── lib/i18n/ └── context.tsx翻译包保持克制只放界面真正用到的文案两三个键就够起步{ common: { send: 发送, cancel: 取消 }, settings: { language: 界面语言 } }然后做三件事在设置页加语言选项。Yaak 的设置页是分区渲染的apps/yaak-client/components/Settings/ 下每个文件对应一个分区。给语言加选项就是在外观或通用分区里仿照现有的下拉设置项再加一行选项值填en、zh-CN、ja、ko。写语言上下文。React 的 Context 机制可以把数据穿到任意深度的组件相当于应用级广播。核心就一个翻译函数t按 key 的层级去包里取值取不到就回退英文再不行直接显示 key 方便排查// 示意语言上下文向全应用提供翻译函数 export function useI18n() { const [language, setLanguage] useAtom(languageAtom); const pack translations[language] ?? translations.en; const t (key: string, vars?: Recordstring, string) { let out key.split(.).reduceany((o, k) o?.[k], pack); if (typeof out ! string) out translations.en t(key); return vars ? out.replace(/\{(\w)\}/g, (_, n) vars[n]) : out; }; return { t, language, setLanguage }; }替换文案。把组件里的ButtonSend/Button换成Button{t(common.send)}/Button这样的形式。不必追求一步到位先从侧边栏、设置页这些高频区域改起用改一处、切一次语言确认的节奏推进。切换即时生效怎么做实时两个字拆开看其实是两个问题切换后界面立刻变以及关掉应用后选择还在。第一个问题状态放对了位置就自动解决了。languageAtom是全应用共享的翻译函数每次都读当前 atom 的值React 的依赖追踪会让所有用到t()的组件在 atom 变化时重新渲染——你在下拉框里选了中文整屏文案当场跟着变不需要任何通知代码。第二个问题靠持久化。切换时把语言值写进本地存储Yaak 的设置本身是存在模型里的更贴合的做法是像它的 Update Channel 那样给设置加一个language字段不想动数据层的话写 localStorage 也完全够用。应用启动时先读一次持久化的值初始化 atom再兜底取系统语言navigator.language以zh开头就给zh-CN用户首次打开应用就能看到对应语言的界面。这两个点做到位实时切换就没有额外成本本质是状态联动加一次持久化。验证、遗漏与常见坑怎么算改对了用每种语言走一遍主流程新建请求 → 发送 → 看响应 → 打开设置切语言任何一处出现漏译的英文就是遗漏点。容易漏的文案有几类可以对照检查类别典型位置处理建议弹窗与确认框删除确认、大文件提示优先补出镜率高Toast 与报错信息请求失败提示保留错误码原文只翻译前缀快捷键、右键菜单侧边栏、编辑器最后统一过一遍插件提供的界面插件面板插件侧支持 key 覆盖宿主提供回退插件是容易忽略的一块Yaak 的插件运行在独立运行时里宿主可以通过注入翻译函数的方式让插件也调t()插件没提供对应语言文案时回退英文这样插件生态不会成为多语言短板。常见的坑还有两个。一是 key 用中文当值导致英文回退时直接显示中文二是翻译了静态文案却漏了模板字符串比如共 3 条响应这类带数字的句子建议用变量占位{count}而不是字符串拼接。这套方案的适用边界把适用边界说透。它覆盖的是 Yaak 应用自身的界面文案插件文案要靠注入机制跟随后端返回的错误原文、请求和响应内容本身不在范围内也不该翻译。它同样是一份外挂改动散落在几十个组件里官方升级后大概率需要重新对齐长期看更省力的姿势是盯着官方是否内置 i18n一旦内置就把自建方案平滑过去。【免费下载链接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 项目地址: https://gitcode.com/GitHub_Trending/ya/yaak创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考