Yaak 多语言切换教程4 个文件给桌面 API 客户端加上中文界面【免费下载链接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 项目地址: https://gitcode.com/GitHub_Trending/ya/yaakYaak 支持 REST、GraphQL、WebSockets、SSE、gRPC 等多种 API 协议但界面默认只有英文仓库里也没有现成的多语言切换入口。这篇教程带你用 4 个文件、约 20 分钟给 Yaak 加上「Yaak 中文界面」和免重启的语言切换能力。先说清楚现状。Yaak 的界面文案目前直接硬编码在各个 React 组件里没有集中的语言资源也没有语言状态。也就是说想做「Yaak 界面本地化」缺的不是翻译工具而是一个让所有文案统一走「查表」机制的出口。方案一共四件事翻译资源文件按语言存放文案的 JSON语言状态一个全局可读、可写、会持久化的语言代码设置页选择器让用户切换语言插件扩展位让第三方插件也能提供各语言文案第一步建好翻译资源文件让文案有统一出口在客户端目录下新增一个locales/目录放语言资源文件en.json、zh-CN.json、zh-TW.json、ja.json、ko.json。key 用分层命名common.send表示「发送」settings.appearance表示「外观」一眼能定位到模块。{ common: { send: 发送, cancel: 取消, save: 保存 }, settings: { general: 常规, appearance: 外观, language: 语言 } }之后把组件里写死的英文比如ButtonSend Request/Button统一换成t(common.sendRequest)这样的查表调用。这一步做完所有界面文案就都从「各写各的」变成「一个地方改」。第二步用 jotai 管理语言状态切换即时生效Yaak 前端已经在用 jotai例如 lib/atoms.ts 里就有 atom加语言状态不需要引新依赖。新建一个原子文件// apps/yaak-client/lib/atoms/language.ts import { atomWithStorage } from jotai/utils; export const languageAtom atomWithStorageen | zh-CN | ja( yaak-language, en ); export const makeT (language: string, dict: Recordstring, string) (key: string) dict[key] ?? key;atomWithStorage把选择写进本地存储下次打开应用语言还在。任何组件只要useAtom(languageAtom)读它语言一变React 自动重渲染——这就是「切换后界面临时跟着变、不用重启」的全部秘密。第三步在设置页加语言选择器并处理 RTL 与系统语言设置页apps/yaak-client/components/Settings/下的 General 页加一个下拉框即可Select labelLanguage / 语言 sizesm value{language} onChange{setLanguage} options{[ { label: English, value: en }, { label: 简体中文, value: zh-CN }, { label: 日本語, value: ja }, ]} /三个容易忽略的细节跟随系统首次启动读navigator.languagezh-TW归繁体其余zh归简体ja、ko直接对应兜底en。右到左排版阿拉伯语、希伯来语等 RTL 语言用document.documentElement.dir rtl翻转整页方向其余语言设回ltr。缺失兜底某语言文件里没翻译的 keymakeT会回退显示英文原文界面不会白屏。第四步给插件系统留多语言扩展位Yaak 的插件类型定义集中在 plugin-runtime-types 包。在插件清单类型里加一个可选字段export interface PluginLocale { en: Recordstring, string; zh-CN?: Recordstring, string; ja?: Recordstring, string; }插件运行时渲染插件自带的文案动作菜单、表单标签时按当前languageAtom的值先查zh-CN没有再回退en。这样「API 客户端如何多语言」就不只是主应用的事社区插件也能各自带翻译互不阻塞。最后怎么验证这套 Yaak 中文界面真的生效按顺序跑一遍全过才算完成默认状态界面应为英文刷新后仍是英文没动过选择的默认值。设置页切到「简体中文」侧边栏、菜单、设置项立即变中文无需重启。关掉应用再打开语言保持中文。把zh-CN.json里随便删一个 key对应位置应回退显示英文而不是空白。装一个带locales字段的插件其菜单文案随语言切换。几点实用建议新增语言只加一个 JSON 文件和下拉框选项不动组件代码文案 key 命名先按模块settings、sidebar再按功能方便社区协作翻译RTL 只影响排版方向不改变请求数据本身不用担心破坏 API 调试功能。【免费下载链接】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），仅供参考