u-desk/docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/多表结构查看方案分析.md

多表结构查看方案分析

分析日期：2026-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切换逻辑更复杂

实现细节：

// 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类型区分：

// 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管理：

// 结构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）。