# 多表结构查看方案分析

**分析日期**：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）。