绝尘
a5d30684ed
- 拆分 FileSystem.vue 为模块化组件架构 - 新增 Markdown Mermaid 图表渲染支持 - 新增 180+ 编程语言代码高亮 - 修复编辑/预览模式切换渲染问题 - 优化亮色/暗色模式主题适配 - 新增 TypeScript 类型定义
2.6 KiB
2.6 KiB
SQL历史功能设计
设计日期：2026-01-28
设计目标：明确SQL历史功能的设计，SQL由SQL编辑区保存得到
一、功能定位
1.1 核心概念
SQL历史：自动记录SQL编辑区的Tab历史，用于追溯和恢复之前编辑的SQL内容。
1.2 功能特征
- ✅ 自动记录：系统自动记录SQL编辑区的Tab内容
- ✅ 时间序列：按时间顺序记录
- ✅ 追溯功能：查看之前编辑了什么SQL
- ✅ 快速恢复：双击历史记录，恢复到SQL编辑器
二、数据来源
2.1 数据来源
SQL历史数据来源于 SQL编辑区的Tab：
- 每个SQL编辑Tab的内容自动保存到SQLite
- Tab的创建、更新、删除都会同步到历史记录
- 历史记录显示所有已保存的Tab内容
2.2 数据结构
interface SqlHistory {
id: number
title: string // Tab标题（如"查询 1"）
content: string // SQL内容
connectionId?: number // 关联的连接ID（可选）
tabId?: string // 关联Tab ID
createdAt: number // 创建时间
updatedAt: number // 更新时间
}
三、功能实现
3.1 数据同步
SQL历史与SQL编辑区的Tab实时同步：
// index.vue
watch(() => sqlEditorRef.value, (editor: any) => {
if (editor && typeof editor.getTabs === 'function') {
sqlEditorTabs.value = editor.getTabs()
}
}, { immediate: true, deep: true })
3.2 使用流程
用户双击历史记录
↓
SqlHistoryList → emit('use-history', content)
↓
ResourcePanel → emit('use-resource', content)
↓
index.vue → handleUseResource(content)
↓
SqlEditor.insertSQL(content) → 替换当前Tab内容
四、UI展示
4.1 显示位置
SQL历史显示在左侧资源管理面板的"SQL历史"Tab中。
4.2 显示内容
- Tab标题
- 相对时间（刚刚、X分钟前、X小时前）
- 连接信息（如果有）
4.3 交互方式
- 双击：使用历史记录（加载到当前Tab）
- 右键菜单：编辑、删除等（待实现）
五、后续扩展
5.1 待实现功能
- SQL执行历史记录（记录执行的SQL、结果、时间）
- 历史搜索功能
- 历史删除功能
- 从历史"保存为书签"（待书签功能实现后）
5.2 其他概念
- 书签：个人收藏的常用SQL（待实现）
- 模板：标准SQL模板（待实现）