DBView 开发日志 ⑤ — v2 阶段 I18n 修复与 SqlEditor 国际化改造

日期： 2026-06-15
项目： DBView — Database Visual Explorer（数据库可视化工具）
状态： v2 阶段 P1 推进中

---

一、本期概要

v2 阶段进入第二周 P1 任务推进中，本期主要完成两件事：

1. I18n 尾逗号故障排查 — 定位并修复了翻译文件尾逗号导致应用界面全白的运行时错误
2. SqlEditor 国际化改造 — 配合 i18n 修复同步对 SqlEditor、QueryHistory、DatabaseTree 等组件进行全面的国际化适配

涉及 8 个文件，+170/-75 行改动。

---

二、I18n 尾逗号故障排查

2.1 问题现象

应用启动后，界面大部分文字显示为空白或 key 本身（如 common.save、sidebar.connections），而非预期的中文翻译。Ant Design 组件本身显示正常，说明 React 渲染层没有问题。

2.2 排查过程

1. 检查 i18next 初始化配置：resources 加载正常，lng 设置为 zh
2. 浏览器控制台无 404 错误，翻译 JSON 文件路径正确
3. 逐层检查 t() 调用链 → 最终定位到 JSON.parse() 解析翻译文件时抛出 SyntaxError
4. i18next 默认使用 JSON.parse() 加载 JSON 格式的翻译资源，单次失败即导致全部翻译失效

2.3 根因

en/translation.json 和 zh/translation.json 中 connection 对象的最后一个字段 searchPlaceholder 末尾多了一个尾逗号：

{
  "connection": {
    "searchPlaceholder": "搜索连接...",   // ← 尾逗号
  }
}

标准 JSON 规范（RFC 7159）不允许尾逗号（trailing comma），而 JavaScript 对象字面量允许——这是开发者在手动编辑 JSON 时最容易踩的坑。

2.4 修复方法

在两个翻译文件中去掉尾逗号，并用 JSON.parse() 验证：

node -e "JSON.parse(require('fs').readFileSync('src/renderer/locales/en/translation.json','utf8')); console.log('OK')"
node -e "JSON.parse(require('fs').readFileSync('src/renderer/locales/zh/translation.json','utf8')); console.log('OK')"

2.5 预防措施

建议在 CI 或 pre-commit hook 中加入 JSON 格式校验，避免同类问题再次出现：

find src -name '*.json' -not -path '*/node_modules/*' -exec node -e \
  "JSON.parse(require('fs').readFileSync(process.argv[1]))" {} \;

---

三、SqlEditor 国际化改造

配合 i18n 修复，对 SQL 编辑相关组件进行了全面的国际化适配，改造范围：

文件	改动内容
SqlEditor.tsx	查询按钮文字、占位符、工具栏提示改为 t() 调用
QueryHistory.tsx	历史记录列表标题、空状态文案、操作按钮文字国际化
DatabaseTree.tsx	搜索框占位符、右键菜单文字国际化
en/translation.json	新增 sqlEditor、queryHistory、databaseTree 等翻译键
zh/translation.json	新增对应的中文翻译
package.json / pnpm-lock.yaml	依赖更新

---

四、v2 阶段 Commit 记录

本期 commit：

bc07344 fix: remove trailing commas in translation.json causing i18n JSON parse error

v2 阶段全部 commits 一览：

bc07344 fix: remove trailing commas in translation.json causing i18n JSON parse error
2b1bd08 chore: 第2周 P1 任务进行中 - 查询历史分页/连接入口统一
65061dc feat(v2): 完成第1周 P1 核心修复
b3acc44 docs: 添加 dbview-v2 OpenSpec 版本计划（P1-P2问题清单）
4186414 fix: Oracle查询取消改用Promise.race+conn.break()双保险机制
6d65b96 fix: SQLite查询取消改用interrupt()替代粗暴的close()
34a3e7e refactor: Oracle驱动改用连接池模式(pool.execute)替代手动连接管理
f65b692 fix: DataTable批量编辑添加事务保护(BEGIN/COMMIT/ROLLBACK)
1e4afc3 fix: DDL生成支持PostgreSQL/Oracle列注释语法(COMMENT ON COLUMN)
0ca0402 fix: 修复PostgreSQL和Oracle驱动主键检测为空的问题
1376cb1 fix: 数据库刷新后预加载子文件夹
42e9273 fix: 数据库刷新后子节点不显示
e908e08 fix: 数据库刷新后子节点无法展开的问题
fbbb60f fix: 数据库右键刷新后无法重新加载的问题

---

五、下一步计划

1. P2 任务推进：SSH 隧道、列类型筛选、查询结果分页
2. i18n 覆盖度提升：当前已覆盖主要 UI 组件，后续新建组件时同步添加翻译键
3. v2 阶段任务完成后：归档 v2 proposal，进入下一阶段规划

---

六、附录：涉及文件清单

文件	操作
src/renderer/locales/en/translation.json	修改
src/renderer/locales/zh/translation.json	修改
src/renderer/components/sql-editor/SqlEditor.tsx	修改
src/renderer/components/sql-editor/QueryHistory.tsx	修改
src/renderer/components/database-tree/DatabaseTree.tsx	修改
package.json	修改
pnpm-lock.yaml	修改
openspec/changes/dbview-v2/tasks.md	修改