# 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)