上次我分享了一个小工具 —— 《多语言维护太痛苦？我自研了一个翻译自动化 CLI 工具》，
它能帮你自动翻译项目中的语言包，解决“手动维护翻译”的噩梦。
这次，我又给它升级了一个质变级的功能：
👉 在页面上直接审查、修改文案。
再也不用来回改 JSON 文件，也不用导出 Excel 给别人校对。
现在，只要打开网页，就能直接点选文本、修改译文、导出更新。
🧩 为什么要做可视化编辑？
在第一版里，虽然翻译自动化已经很爽了，但仍然有这些痛点：
- 校对体验差：非技术同学要改译文，只能在 Excel 或 JSON 里找。
- 上下文缺失：看不到实际页面，不知道这句话出现在哪儿。
- 协作脱节：前端、产品、翻译三方之间沟通依旧繁琐。
于是我想：
既然我们已经有完整的翻译数据库（
i18n.db.json），
能不能直接在网页上“高亮 + 可编辑”？
答案当然是可以 😎。
💡 新功能预览
现在，只需要引入一段脚本，就能让网页进入“文案审查模式”：
功能包括：
- ✨ 一键开启/关闭编辑模式
- 🟡 页面内自动高亮所有翻译文本
- 📝 点击任意文本即可修改翻译
- 💾 保存修改并导出更新后的文案数据
- 🔄 实时渲染占位符（如
{username}、{'literal'}）
⚙️ 工作原理
其实实现思路不复杂，核心是两个部分：
1️⃣ 页面扫描 & 高亮
脚本会遍历页面的所有文本节点，通过反向映射表匹配对应的 key：
const reverseMap = generateReverseMap(i18nDB.entries, targetLangs);
匹配后，用一个带虚线框的 <span> 包裹文本：
<span data-i18n-editable="true">欢迎回来，Neo！</span>
这一步就让所有文案都“亮了起来”。
2️⃣ 可编辑弹窗
点击任意高亮文本，会弹出一个编辑界面：
- 显示候选 key
- 当前文本
- 输入框编辑译文
- 保存或取消
修改会即时更新到 i18nDB.entries，页面文本也会实时刷新。
🧠 技术细节亮点
为了让页面渲染更智能，脚本里有几个值得一提的小点：
-
🧩 智能占位符匹配： 支持
{variable}和{'literal'}两种插值模式。 可以精准识别Welcome, {username}!这种场景。 -
🧱 反向映射缓存： 构建从译文 → key 的快速索引，查找效率极高。
-
🔍 MutationObserver 实时监听： 页面动态更新时（如 SPA 切页），也能自动重新标记文本。
-
🧰 纯前端实现，无后端依赖： 直接嵌入一段脚本即可运行（脚本由 i18n-cli 自动生成）。
📦 导出修改
修改完成后，只需点击“导出修改数据”：
{
"entries": {
"welcome.message": {
"en": "Welcome, {username}!",
"zh-TW": "歡迎回來，{username}！"
}
}
}
导出的文件可直接替换原 i18n.db.json，
然后再执行 i18n run，即可生成新的语言包。
🌈 实际使用场景
这个功能非常适合：
- 产品经理 / 翻译人员：直接在页面上校对文案。
- 多语言站点回测：快速发现漏翻、错翻。
- 前端开发：调试时检查 key 是否正确绑定。
你甚至可以嵌入到 staging 环境，让任何人都能参与翻译校对。
🔮 当前不足
目前，在线编辑器仅支持以下格式语法：
- 常规文本, 如:
"welcome_message": "欢迎使用 i18n-cli！" - 命名插值，如：
"hello": "你好, {name}!" - 列表插值，如：
"hello": "{0} 世界" - 字面插值，如：
"address": "{account}{'@'}{domain}"
对于其它语法，尚不支持，如 HTML Message: hello: 'hello <br> world'
🏁 总结
从最初的 CLI，到现在的可视化编辑器， i18n CLI 已经进化成一款真正让团队国际化更高效的工具。
它让你：
- 自动翻译主语言包
- 缓存复用译文
- 页面内直接修改、导出
一句话总结：
“以前改翻译要三个人，现在一个人，一分钟。”
📦 项目地址：
GitHub → github.com/zdocapp/i18…
NPM → www.npmjs.com/package/@zd…
欢迎体验、提 issue 或 PR，一起让 i18n 更简单 ❤️
