315 lines
9.8 KiB
Markdown
315 lines
9.8 KiB
Markdown
# 多表结构查看方案分析
|
||
|
||
**分析日期**：2025-01-28
|
||
**分析范围**：多表结构查看的不同实现方案
|
||
**状态**：方案分析
|
||
|
||
---
|
||
|
||
## 一、需求分析
|
||
|
||
### 1.1 使用场景
|
||
|
||
用户可能需要：
|
||
- 同时查看多个表的结构，进行对比
|
||
- 查看表结构时，需要查看其他表的结构作为参考
|
||
- 在SQL编写过程中，需要频繁查看不同表的结构
|
||
|
||
### 1.2 当前限制
|
||
|
||
- **方案一**：单表查看，查看新表时替换当前结构
|
||
- 优点：简单直接，界面不混乱
|
||
- 缺点：无法同时查看多个表的结构
|
||
|
||
---
|
||
|
||
## 二、方案对比
|
||
|
||
### 方案一：结果面板Tab中查看（当前方案）
|
||
|
||
**实现方式**：
|
||
- 在结果面板的"结构"Tab中查看
|
||
- 查看新表时替换当前结构
|
||
|
||
**优点**：
|
||
- ✅ 实现简单
|
||
- ✅ 界面简洁
|
||
- ✅ 符合当前架构
|
||
|
||
**缺点**：
|
||
- ❌ 无法同时查看多个表
|
||
- ❌ 切换表时丢失之前的结构信息
|
||
|
||
**适用场景**：
|
||
- 单表结构查看
|
||
- 临时查看表结构
|
||
|
||
---
|
||
|
||
### 方案二：SQL编辑器Tab中展示
|
||
|
||
**实现方式**：
|
||
- 在SQL编辑器的Tab区域，新增"结构"类型的Tab
|
||
- 每个表结构作为一个独立的Tab
|
||
- Tab标题：`结构: database.table`
|
||
|
||
**界面布局**：
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ SQL编辑器区域 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [查询 1] [查询 2] [结构: test.users] [结构: test.orders] │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ [结构内容区域] │
|
||
│ - 字段信息 │
|
||
│ - 索引信息 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**优点**：
|
||
- ✅ 可以同时查看多个表的结构
|
||
- ✅ Tab管理统一，用户习惯好
|
||
- ✅ 结构Tab和SQL Tab可以并存，方便对比
|
||
|
||
**缺点**：
|
||
- ⚠️ SQL编辑器Tab区域可能变得拥挤
|
||
- ⚠️ 需要区分SQL Tab和结构Tab
|
||
- ⚠️ Tab切换逻辑更复杂
|
||
|
||
**实现细节**：
|
||
```typescript
|
||
// Tab类型定义
|
||
interface Tab {
|
||
id: string
|
||
key: string
|
||
title: string
|
||
type: 'sql' | 'structure' // Tab类型
|
||
content?: string // SQL内容（仅SQL Tab）
|
||
structureData?: StructureData // 结构数据（仅结构Tab）
|
||
connectionId?: number
|
||
database?: string
|
||
tableName?: string
|
||
}
|
||
|
||
// Tab管理
|
||
const tabs = ref<Tab[]>([])
|
||
|
||
// 创建结构Tab
|
||
const createStructureTab = (data: TableStructureEvent) => {
|
||
const tabKey = `structure-${data.connectionId}-${data.database}-${data.tableName}`
|
||
// 检查是否已存在
|
||
const existingTab = tabs.value.find(t => t.key === tabKey)
|
||
if (existingTab) {
|
||
activeTab.value = existingTab.key
|
||
return
|
||
}
|
||
|
||
// 创建新Tab
|
||
const newTab: Tab = {
|
||
id: null,
|
||
key: tabKey,
|
||
title: `结构: ${data.database}.${data.tableName}`,
|
||
type: 'structure',
|
||
connectionId: data.connectionId,
|
||
database: data.database,
|
||
tableName: data.tableName,
|
||
structureData: null // 异步加载
|
||
}
|
||
|
||
tabs.value.push(newTab)
|
||
activeTab.value = newTab.key
|
||
|
||
// 异步加载结构数据
|
||
loadStructureData(newTab)
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 方案三：结构Tab内部子Tab
|
||
|
||
**实现方式**：
|
||
- 在结果面板的"结构"Tab内部，使用子Tab区分不同表
|
||
- 子Tab标题：`database.table`
|
||
|
||
**界面布局**：
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 结果面板 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [结果] [消息] [结构] │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [test.users] [test.orders] [test.products] │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ [当前表结构内容] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**优点**：
|
||
- ✅ 结构查看区域独立，不影响SQL编辑器
|
||
- ✅ 可以同时查看多个表的结构
|
||
- ✅ 结构Tab位置固定，用户习惯好
|
||
|
||
**缺点**：
|
||
- ⚠️ 结构Tab内部Tab管理，复杂度中等
|
||
- ⚠️ Tab层级较深，可能影响用户体验
|
||
|
||
---
|
||
|
||
### 方案四：侧边栏结构查看器
|
||
|
||
**实现方式**：
|
||
- 在左侧连接树区域，新增一个可折叠的结构查看面板
|
||
- 或者使用抽屉（Drawer）从侧边滑出
|
||
|
||
**界面布局**：
|
||
```
|
||
┌──────────┬─────────────────────────────────────────┐
|
||
│ 连接树 │ SQL编辑器 │
|
||
│ │ │
|
||
│ [结构] │ │
|
||
│ ────────│ │
|
||
│ test.users│ │
|
||
│ - 字段 │ │
|
||
│ - 索引 │ │
|
||
└──────────┴─────────────────────────────────────────┘
|
||
```
|
||
|
||
**优点**：
|
||
- ✅ 结构查看区域独立
|
||
- ✅ 可以同时查看多个表（使用Tab）
|
||
- ✅ 不影响SQL编辑器和结果区域
|
||
|
||
**缺点**：
|
||
- ⚠️ 需要额外的UI空间
|
||
- ⚠️ 可能影响连接树的显示
|
||
|
||
---
|
||
|
||
## 三、方案推荐
|
||
|
||
### 3.1 短期方案（P0）
|
||
|
||
**推荐：方案一（当前方案）+ 方案二（可选）**
|
||
|
||
- **默认使用方案一**：在结果面板的"结构"Tab中查看，查看新表时替换
|
||
- **可选支持方案二**：通过右键菜单选项"在新Tab中查看结构"，在SQL编辑器Tab区域创建结构Tab
|
||
|
||
**实现策略**：
|
||
1. 右键菜单添加"查看结构"和"在新Tab中查看结构"两个选项
|
||
2. "查看结构"：使用方案一（结果面板）
|
||
3. "在新Tab中查看结构"：使用方案二（SQL编辑器Tab）
|
||
|
||
---
|
||
|
||
### 3.2 长期方案（P2）
|
||
|
||
**推荐：方案三（结构Tab内部子Tab）**
|
||
|
||
- 在结果面板的"结构"Tab内部，使用子Tab管理多个表结构
|
||
- 提供更好的多表对比体验
|
||
- 不影响SQL编辑器Tab区域
|
||
|
||
---
|
||
|
||
## 四、实现建议
|
||
|
||
### 4.1 方案二实现要点
|
||
|
||
**Tab类型区分**：
|
||
```typescript
|
||
// Tab类型
|
||
type TabType = 'sql' | 'structure'
|
||
|
||
// Tab渲染
|
||
<template>
|
||
<a-tab-pane
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
:title="tab.title"
|
||
>
|
||
<!-- SQL Tab -->
|
||
<SqlEditorContent v-if="tab.type === 'sql'" :tab="tab" />
|
||
|
||
<!-- 结构Tab -->
|
||
<StructureContent v-else-if="tab.type === 'structure'" :tab="tab" />
|
||
</a-tab-pane>
|
||
</template>
|
||
```
|
||
|
||
**Tab标题样式**：
|
||
- SQL Tab：`查询 1`、`查询 2`
|
||
- 结构Tab：`结构: database.table`（使用不同颜色或图标区分）
|
||
|
||
**Tab关闭逻辑**：
|
||
- SQL Tab：可以关闭（最后一个不可关闭）
|
||
- 结构Tab：可以关闭，关闭时清除结构数据
|
||
|
||
---
|
||
|
||
### 4.2 方案三实现要点
|
||
|
||
**子Tab管理**：
|
||
```typescript
|
||
// 结构Tab状态
|
||
const structureTabs = ref<Array<{
|
||
key: string
|
||
title: string
|
||
connectionId: number
|
||
database: string
|
||
tableName: string
|
||
data: StructureData | null
|
||
}>>([])
|
||
|
||
const activeStructureTab = ref<string>('')
|
||
```
|
||
|
||
**Tab切换**：
|
||
- 查看新表结构时，如果已存在则切换到对应Tab
|
||
- 如果不存在，创建新Tab并加载数据
|
||
|
||
---
|
||
|
||
## 五、用户体验对比
|
||
|
||
| 方案 | 多表查看 | 界面简洁 | 实现复杂度 | 用户习惯 |
|
||
|------|---------|---------|-----------|---------|
|
||
| 方案一 | ❌ | ✅ | ✅ 低 | ✅ 好 |
|
||
| 方案二 | ✅ | ⚠️ | ⚠️ 中 | ✅ 好 |
|
||
| 方案三 | ✅ | ✅ | ⚠️ 中 | ⚠️ 中 |
|
||
| 方案四 | ✅ | ⚠️ | ⚠️ 中 | ⚠️ 中 |
|
||
|
||
---
|
||
|
||
## 六、最终建议
|
||
|
||
### 6.1 实现策略
|
||
|
||
**阶段一（P0）**：
|
||
- 实现方案一：结果面板"结构"Tab，单表查看
|
||
- 右键菜单：添加"查看结构"选项
|
||
|
||
**阶段二（P1）**：
|
||
- 扩展方案二：支持"在新Tab中查看结构"
|
||
- 右键菜单：添加"在新Tab中查看结构"选项
|
||
- SQL编辑器Tab区域支持结构Tab类型
|
||
|
||
**阶段三（P2）**：
|
||
- 考虑方案三：结构Tab内部子Tab
|
||
- 提供更好的多表对比体验
|
||
|
||
### 6.2 决策要点
|
||
|
||
- **先实现方案一**：满足基本需求，实现简单
|
||
- **后续扩展方案二**：提供多表查看能力，不影响现有功能
|
||
- **未来考虑方案三**：如果用户反馈需要更好的多表查看体验
|
||
|
||
---
|
||
|
||
**结论**：先使用方案一（单表查看），后续根据用户反馈决定是否实现方案二（SQL编辑器Tab）或方案三（结构Tab子Tab）。
|
||
|