日期: 2026-07-28
项目: DBView — Database Visual Explorer(数据库可视化工具)
状态: v3 阶段全部完成,处于修复收尾
一、本期概要
自 v2 P1 核心修复 + I18n 改造(开发日志⑤)之后,项目经历了两个阶段:
- v2 P2 收尾(第2~4周)——国际化激活、体验优化、测试覆盖、打包配置
- v3 完整版本(第1~6周 + 修复)——从 OpenSpec 提案到 8 大功能模块全部落地
共 18 次提交,新增代码数千行。v3 版本将 DBView 从”数据库浏览器”升级为”数据库生产力工具”。
二、v2 P2 收尾
2.1 查询历史分页 & 连接入口统一
延续 P1 路线,完成了查询历史列表的分页加载(避免历史数据累积导致界面卡顿),并将连接入口从分散的多个位置统一收敛到侧边栏顶部的单一入口。
2.2 P2-6 国际化激活
前期 I18n 框架已搭建(见开发日志⑤),但大量组件仍在使用硬编码中文。P2-6 逐一扫描了所有 UI 组件,将硬编码字符串全部替换为 t('key') 调用,并补充了翻译文件中缺失的条目。
涉及组件:DatabaseTree、SqlEditor、DataTable、SchemaEditor、QueryHistory、连接表单、设置面板等。
2.3 P2 体验优化(第3周)
| 任务 | 说明 |
|---|---|
| CodeMirror 方言 | 为 SQLite 和 Oracle 配置自定义 SQLConfig 关键字列表 |
| 树历史”查看更多” | 查询文件夹底部添加查看更多按钮,点击跳转 QueryHistory |
| Oracle 表单优化 | 调整 serviceName 字段位置,自动填充默认值 xe |
| 树刷新闪烁修复 | 刷新时保留旧 children 直到新数据加载完成 |
| SQL 日志持久化 | SqlLogService 接入 sql.js 实现持久化存储 |
2.4 P2 工程基建(第4周)
测试覆盖: 安装 vitest,DDL/DML 生成测试覆盖四种数据库,CSV/JSON/SQL 格式化测试,SQL 引用测试,CI 集成。
打包配置: electron-builder.yml 配置 Windows NSIS + macOS dmg,应用图标与元数据,electron-updater 自动更新。
三、v3 提案:从”浏览器”到”生产力工具”
v3.0 的目标明确:**将 DBView 从”数据库浏览器”升级为”数据库生产力工具”**。
3.1 八大功能模块
| 模块 | 定位 |
|---|---|
| 可视化查询构建器 | 拖拽式多表 JOIN,降低非 SQL 专家使用门槛 |
| ER 图可视化 | Schema 自动生成实体关系图 |
| 数据库对比/同步 | 结构+数据对比,生成迁移脚本 |
| 数据导入 | CSV/JSON/Excel 导入,与 v1 导出形成闭环 |
| 查询性能分析 | EXPLAIN 可视化、慢查询分析、索引建议 |
| 虚拟滚动 DataTable | 替代分页,支持 10 万+行流畅浏览 |
| 快捷键系统 | 可自定义快捷键映射 |
| 连接健康监测 | 连接池心跳、自动重连、状态可视化 |
3.2 架构影响
- 新增依赖:
@xyflow/react(流程图/ER 图)、xlsx(Excel 导入) - 新增服务层:
DiffService、ImportService、ProfilingService - 新增 IPC 通道:
diff:*、import:*、profiling:*、shortcut:* - 无破坏性变更:所有新增功能为可选增强
四、v3 六周迭代
第1周:基础设施(10h)
安装所有新依赖,更新 Electron Vite 打包配置,在 preload 层注册所有新 IPC 通道的类型声明与调用包装。
第2周:虚拟滚动 DataTable + 快捷键系统(14h)
VirtualTable 组件(509 行):
- 基于
@tanstack/react-virtual实现虚拟滚动 - 列冻结:fixedColumns + scrollableColumns 分区
- 列拖动调整宽度 + 重新排序
- 复制功能:单单元格、多行 TSV/JSON、带表头
- Ctrl+A 全选(全部行,非仅可见行)
- 支持分页/虚拟滚动模式切换
快捷键系统(412 行):
shortcutStore(Zustand)管理快捷键映射useHotkeyshook 全局键盘事件监听- 快捷键冲突检测,ShortcutSettings 对话框
- 快捷键配置导入/导出 JSON + 持久化
- 默认快捷键:Ctrl+Enter 执行、Ctrl+Shift+F 格式化、Ctrl+W 关 Tab 等
第3周:可视化查询构建器(14h,1,087 行新增)
画布交互:
- 集成 React Flow 画布
TableNode自定义节点:显示表名、列 checkbox、列类型- 从数据库树拖拽表到画布
JoinEdge自定义连线:可点击切换 JOIN 类型- 自动检测 FK 关系 + 手动拖拽字段建立 JOIN
SQL 生成:
QueryGraph中间结构(拓扑排序)SQLBuilder从 QueryGraph 生成 SQL- 支持:SELECT、WHERE、ORDER BY、GROUP BY、HAVING
- JOIN 类型切换:INNER/LEFT/RIGHT/FULL/CROSS
- SQL 预览 + 一键”执行”和”发送到编辑器”
- 状态持久化(切换 Tab 不丢失)
第4周:ER 图 + 连接健康监测(12h,617 行)
ERDiagram(337 行):
- main 进程
getErDiagramData获取 Schema 元数据 - 集成 React Flow + dagre 自动布局
- 表实体节点渲染:表名、PK 图标、列类型
- 关系连线:带基数标记(1:1 / 1:N / N:M)
- 缩放 / 平移 / 双击聚焦,点击跳转结构视图
- 搜索过滤 / 显示相关表 / 布局持久化
连接健康监测:
- ConnectionManager 心跳定时器管理
SELECT 1心跳查询(可配置间隔)- 自动重连逻辑(3 次重试,10 秒间隔)
- 连接状态指示器(绿/黄/红/灰圆点 + tooltip)
第5周:数据库对比同步 + 数据导入(12h,1,114 行)
DiffService + DiffViewer:
- 表级/列级/索引级结构对比
MigrationGenerator从差异生成 ALTER DDL- 迁移 SQL 预览 + 执行 + Dry Run 模式
- 数据对比(按主键逐行对比)
ImportService + DataImport:
- CSV/JSON/Excel 解析(编码检测、类型推断、多 sheet)
- 字段映射 UI:拖拽匹配 CSV 列 → 表列
- 分批导入:可配置批次大小,进度反馈
- 导入错误处理:跳过/重试/中止
- 从导入数据创建新表
第6周:查询性能分析 + 集成验证(10h,503 行)
ProfilingService + ExplainTree:
- 四种数据库 EXPLAIN 实现:MySQL(FORMAT=JSON)、PostgreSQL(ANALYZE FORMAT JSON)、SQLite(QUERY PLAN)、Oracle(PLAN FOR + DBMS_XPLAN)
- ExplainTree 组件:React Flow 树形可视化
- 节点颜色编码(绿色→黄色→红色按成本)
- 慢查询日志面板 + 索引建议(Seq Scan + WHERE 条件 → 建议 CREATE INDEX)
集成验证(5 条端到端链路):
- 查询构建器 → 生成 SQL → 执行 → 虚拟滚动表显示
- ER 图 → 点击表 → 打开结构视图
- 结构对比 → 生成迁移 → 预览 → 执行
- CSV 导入 → 字段映射 → 批量写入 → 验证数据
- EXPLAIN → 可视化 → 索引建议
五、v3 修复阶段
六周迭代完成后,进行了全面的质量修复:
| 提交 | 内容 |
|---|---|
5a3b5cb |
修复 VirtualTable 样式语法错误 |
405cd86 |
数据库树连接状态改用图标颜色表示,移除状态圆点 |
ffe1c6e |
修复 v3.0 审查发现的 13 个 bug(涉及 10 个文件) |
d9aa1d8 |
QueryBuilder/ER 图按钮无反应 |
a73095f |
补全 v3.0 中英文翻译(6 个新模块) |
0bcfe93 |
closePool 幂等化 |
六、下一步计划
- v3 稳定化:持续追踪用户反馈,修复遗留问题
- 下一阶段规划:v4 方向尚未确定,候选方向包括 AI 智能 SQL 生成、多 Tab 对比、云端同步、插件系统
- 版本发布:v0.3.0 正式发布打包
七、统计
| 指标 | 数值 |
|---|---|
| 总提交数 | 18 |
| v3 新增行数 | ~4,200 行 |
| 累计迭代周数 | 10 周(v2 P1~P2 + v3) |
| 新增功能模块 | 8 个 |
| 新增 IPC 通道 | 12 个 |