119 lines
2.6 KiB
Markdown
119 lines
2.6 KiB
Markdown
# SQL历史功能设计
|
||
|
||
**设计日期**：2025-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 数据结构
|
||
|
||
```typescript
|
||
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实时同步：
|
||
|
||
```typescript
|
||
// 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模板（待实现）
|
||
|
||
---
|
||
|
||
## 六、相关文档
|
||
|
||
- [左侧资源管理面板设计.md](./左侧资源管理面板设计.md)
|
||
- [需求设计/需求.md](../需求设计/需求.md)
|