重构：文件系统模块化架构，优化应用启动流程
This commit is contained in:
118
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/书签模板历史功能定位设计.md
Normal file
118
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/书签模板历史功能定位设计.md
Normal file
@@ -0,0 +1,118 @@
|
||||
# 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)
|
||||
314
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/多表结构查看方案分析.md
Normal file
314
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/多表结构查看方案分析.md
Normal file
@@ -0,0 +1,314 @@
|
||||
# 多表结构查看方案分析
|
||||
|
||||
**分析日期**：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）。
|
||||
|
||||
277
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/左侧资源管理面板设计.md
Normal file
277
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/左侧资源管理面板设计.md
Normal file
@@ -0,0 +1,277 @@
|
||||
# 左侧资源管理面板设计
|
||||
|
||||
**设计日期**：2025-01-28
|
||||
**设计目标**：在左侧功能区下方增加资源管理面板，统一管理SQL编辑器历史、书签和SQL模板
|
||||
|
||||
---
|
||||
|
||||
## 一、需求概述
|
||||
|
||||
### 1.1 功能目标
|
||||
- 在左侧功能区分上下两部分
|
||||
- 下方增加资源管理面板（参考数据库连接树的效果）
|
||||
- 整合SQL编辑器历史、书签、SQL模板列表
|
||||
|
||||
### 1.2 设计原则
|
||||
- 保持与数据库连接树一致的UI风格
|
||||
- 支持折叠/展开
|
||||
- 支持快速访问和操作
|
||||
|
||||
---
|
||||
|
||||
## 二、布局设计
|
||||
|
||||
### 2.1 整体布局
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ 左侧功能区（上下分区） │
|
||||
├─────────────────────────┤
|
||||
│ 上部分：数据库连接树 │
|
||||
│ - 连接列表 │
|
||||
│ - 数据库/表结构 │
|
||||
├─────────────────────────┤
|
||||
│ 下部分：资源管理面板 │
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 资源管理（可折叠） │ │
|
||||
│ ├─────────────────────┤ │
|
||||
│ │ 📝 SQL编辑器历史 │ │
|
||||
│ │ ⭐ 书签 │ │
|
||||
│ │ 📋 SQL模板 │ │
|
||||
│ └─────────────────────┘ │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.2 布局参数
|
||||
|
||||
- **上部分（连接树）**：可调整高度，默认占 60%
|
||||
- **下部分（资源面板）**：可调整高度，默认占 40%
|
||||
- **分隔条**：支持拖拽调整上下比例
|
||||
- **最小高度**：每部分最小 150px
|
||||
|
||||
---
|
||||
|
||||
## 3. 组件设计
|
||||
|
||||
### 3.1 ResourcePanel 组件
|
||||
|
||||
#### 3.1.1 组件结构
|
||||
```vue
|
||||
<template>
|
||||
<div class="resource-panel">
|
||||
<!-- 头部：标题和折叠按钮 -->
|
||||
<div class="resource-panel-header">
|
||||
<h3>资源管理</h3>
|
||||
<a-button type="text" @click="toggleCollapse">
|
||||
<icon-up v-if="!collapsed" />
|
||||
<icon-down v-else />
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div v-show="!collapsed" class="resource-panel-content">
|
||||
<!-- Tab切换 -->
|
||||
<a-tabs v-model:active-key="activeTab">
|
||||
<a-tab-pane key="history" title="SQL历史">
|
||||
<SqlHistoryList />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="bookmarks" title="书签">
|
||||
<BookmarkList />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="templates" title="模板">
|
||||
<TemplateList />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### 3.1.2 功能特性
|
||||
- **折叠/展开**：支持收起资源面板以节省空间
|
||||
- **Tab切换**：三个Tab分别显示SQL历史、书签、模板
|
||||
- **搜索功能**：每个Tab支持搜索过滤
|
||||
- **右键菜单**：支持编辑、删除、使用等操作
|
||||
|
||||
---
|
||||
|
||||
## 四、子组件设计
|
||||
|
||||
### 4.1 SqlHistoryList（SQL编辑器历史）
|
||||
|
||||
#### 4.1.1 数据结构
|
||||
```typescript
|
||||
interface SqlHistoryItem {
|
||||
id: string
|
||||
title: string
|
||||
content: string
|
||||
connectionId: number | null
|
||||
database: string | null
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
```
|
||||
|
||||
#### 4.1.2 功能
|
||||
- 显示所有SQL编辑器Tab的历史记录
|
||||
- 支持按连接、数据库筛选
|
||||
- 支持搜索（标题、内容）
|
||||
- 支持双击打开到新Tab
|
||||
- 支持右键删除
|
||||
|
||||
#### 4.1.3 UI设计
|
||||
- 树形列表（参考ConnectionTree）
|
||||
- 每个历史项显示：标题、连接信息、更新时间
|
||||
- 支持拖拽排序（按使用频率）
|
||||
|
||||
---
|
||||
|
||||
### 4.2 BookmarkList（书签列表）
|
||||
|
||||
#### 4.2.1 数据结构
|
||||
```typescript
|
||||
interface BookmarkItem {
|
||||
id: number
|
||||
name: string
|
||||
sql: string
|
||||
connectionId: number | null
|
||||
database: string | null
|
||||
description?: string
|
||||
createdAt: number
|
||||
}
|
||||
```
|
||||
|
||||
#### 4.2.2 功能
|
||||
- 显示所有书签
|
||||
- 支持按连接筛选
|
||||
- 支持搜索（名称、SQL、描述）
|
||||
- 支持双击使用（插入到当前编辑器）
|
||||
- 支持右键编辑、删除
|
||||
|
||||
#### 4.2.3 UI设计
|
||||
- 树形列表（参考ConnectionTree）
|
||||
- 每个书签显示：名称、描述、连接信息
|
||||
- 支持分组（按连接分组）
|
||||
|
||||
---
|
||||
|
||||
### 4.3 TemplateList（SQL模板列表）
|
||||
|
||||
#### 4.3.1 数据结构
|
||||
```typescript
|
||||
interface TemplateItem {
|
||||
id: number
|
||||
name: string
|
||||
sql: string
|
||||
category?: string
|
||||
description?: string
|
||||
createdAt: number
|
||||
}
|
||||
```
|
||||
|
||||
#### 4.3.2 功能
|
||||
- 显示所有SQL模板
|
||||
- 支持按分类筛选
|
||||
- 支持搜索（名称、SQL、描述）
|
||||
- 支持双击使用（插入到当前编辑器）
|
||||
- 支持右键编辑、删除
|
||||
|
||||
#### 4.3.3 UI设计
|
||||
- 树形列表（参考ConnectionTree）
|
||||
- 每个模板显示：名称、分类、描述
|
||||
- 支持分组（按分类分组）
|
||||
|
||||
---
|
||||
|
||||
## 五、交互设计
|
||||
|
||||
### 5.1 折叠/展开
|
||||
- 点击头部折叠按钮，收起/展开资源面板
|
||||
- 折叠时只显示头部 (收缩下压到底部，让内容区留给连接列表)
|
||||
- 展开时显示完整内容
|
||||
|
||||
### 5.2 高度调整
|
||||
- 上下两部分之间可拖拽调整高度
|
||||
- 支持双击重置为默认比例
|
||||
- 最小高度限制：每部分 150px
|
||||
|
||||
### 5.3 快速操作
|
||||
- **双击**：使用资源（打开历史/插入书签或模板）
|
||||
- **右键**：显示上下文菜单（编辑、删除、复制等）
|
||||
- **拖拽**：调整顺序（历史记录）
|
||||
|
||||
---
|
||||
|
||||
## 六、实现方案
|
||||
|
||||
### 6.1 组件结构
|
||||
```
|
||||
components/
|
||||
ResourcePanel.vue # 主面板组件
|
||||
SqlHistoryList.vue # SQL历史列表
|
||||
BookmarkList.vue # 书签列表
|
||||
TemplateList.vue # 模板列表
|
||||
```
|
||||
|
||||
### 6.2 状态管理
|
||||
- 使用 `useResourcePanel` composable 管理面板状态
|
||||
- 使用现有的 `useMessageLog`、`useDbConnection` 等 composables
|
||||
|
||||
### 6.3 数据来源
|
||||
- **SQL历史**：从 `SqlEditor` 组件的 `tabs` 状态获取
|
||||
- **书签**：从后端 API 获取（已有 `GetBookmarks`）
|
||||
- **模板**：从后端 API 获取（已有 `GetTemplates`）
|
||||
|
||||
---
|
||||
|
||||
## 七、样式设计
|
||||
|
||||
### 7.1 参考ConnectionTree样式
|
||||
- 使用相同的字体、颜色、间距
|
||||
- 使用相同的树形节点样式
|
||||
- 使用相同的图标风格
|
||||
|
||||
### 7.2 自定义样式
|
||||
- 面板头部：与连接树头部一致
|
||||
- Tab切换：紧凑型Tab样式
|
||||
- 列表项：与连接树节点一致
|
||||
|
||||
---
|
||||
|
||||
## 八、技术实现要点
|
||||
|
||||
### 8.1 布局实现
|
||||
- 使用 Flexbox 实现上下分区
|
||||
- 使用 `ResizeObserver` 或自定义拖拽条实现高度调整
|
||||
- 使用 `v-show` 实现折叠/展开动画
|
||||
|
||||
### 8.2 数据同步
|
||||
- SQL历史与编辑器Tabs实时同步
|
||||
- 书签和模板从后端加载，支持刷新
|
||||
|
||||
### 8.3 性能优化
|
||||
- 列表虚拟滚动（如果数据量大）
|
||||
- 懒加载（按需加载历史记录）
|
||||
- 防抖搜索
|
||||
|
||||
---
|
||||
|
||||
## 九、后续扩展
|
||||
|
||||
### 9.1 功能扩展
|
||||
- 支持收藏常用SQL
|
||||
- 支持导出/导入资源
|
||||
- 支持资源分组和标签
|
||||
|
||||
### 9.2 UI扩展
|
||||
- 支持自定义面板位置（可拖拽到右侧）
|
||||
- 支持多面板模式
|
||||
- 支持面板主题切换
|
||||
|
||||
---
|
||||
|
||||
## 十、相关文档
|
||||
|
||||
- [前端布局样式系统设计.md](../需求设计/前端布局样式系统设计.md)
|
||||
- [ConnectionTree.vue](../../../../go-desk/web/src/views/db-cli/components/ConnectionTree.vue)
|
||||
|
||||
1108
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/新表创建功能设计.md
Normal file
1108
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/新表创建功能设计.md
Normal file
File diff suppressed because it is too large
Load Diff
374
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/表结构查看功能设计-待讨论问题.md
Normal file
374
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/表结构查看功能设计-待讨论问题.md
Normal file
@@ -0,0 +1,374 @@
|
||||
# 表结构查看功能 - 待讨论问题
|
||||
|
||||
**创建日期**：2025-01-28
|
||||
**目的**：整理设计文档中需要进一步讨论和明确的问题
|
||||
|
||||
---
|
||||
|
||||
## 一、实现细节待明确
|
||||
|
||||
### 1.1 MongoDB 字段统计实现方式
|
||||
|
||||
**问题**：FIXME标记 - 使用采样统计，默认采样10个文档
|
||||
|
||||
**需要讨论**：
|
||||
- ✅ 已确定：使用采样统计，默认采样10个文档
|
||||
- ⚠️ 待明确：
|
||||
- 采样方式：使用 `$sample` 聚合管道还是 `find().limit(10)`？ FIME:sample
|
||||
- 采样数量：10个是否足够？是否需要可配置？ FIXME:后期支持可配置
|
||||
- 性能影响：10个文档的性能如何？是否需要异步加载？ FIXME: 全异步
|
||||
- 前端展示：是否需要显示"基于10个文档采样"的提示？FIXME: 展示
|
||||
|
||||
**建议**：
|
||||
- 使用 `$sample` 聚合管道随机采样（更准确）
|
||||
- 默认采样10个文档（性能好，准确性适中）
|
||||
- 前端明确标注"基于10个文档采样统计"
|
||||
- 后续可扩展为可配置采样数量（P2）
|
||||
|
||||
---
|
||||
|
||||
### 1.2 触发查看结构（已确定）
|
||||
|
||||
**触发方式**：
|
||||
- ✅ 点击连接节点：查看连接的数据库列表结构
|
||||
- ✅ 点击数据库节点：查看数据库的表/集合列表结构
|
||||
- ✅ 点击表/集合/Key节点：查看具体的表/集合/Key结构
|
||||
- ✅ 结构信息展示区域自动激活（切换到"结构"Tab并打开）
|
||||
|
||||
**实现方式**：
|
||||
- 在 `handleTreeSelect` 中，根据节点类型触发 `table-structure` 事件
|
||||
- 事件处理函数自动切换到结果面板的"结构"Tab
|
||||
- 如果结果面板隐藏，自动显示
|
||||
|
||||
---
|
||||
|
||||
### 1.3 连接树右键菜单实现
|
||||
**问题**：如何实现右键菜单触发"查看结构"
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- Arco Design Tree 组件是否支持右键菜单？
|
||||
- 如果不支持，是否需要自定义实现？
|
||||
- 右键菜单的选项有哪些？（查看结构、生成SQL、删除等）
|
||||
- 菜单位置和样式如何设计？
|
||||
|
||||
**建议**：
|
||||
- 检查 Arco Design Tree 的右键菜单支持
|
||||
- 如果不支持，使用 `@contextmenu` 事件自定义菜单
|
||||
- 菜单选项：查看结构、生成SELECT语句、复制表名（根据节点类型显示不同选项）
|
||||
FIXME: 系统性设计右键菜单补充相关设计文档
|
||||
---
|
||||
|
||||
### 1.4 事件名称和参数传递（已确定）
|
||||
|
||||
**事件名称**：✅ `table-structure`
|
||||
|
||||
**参数格式**：✅ 已确定
|
||||
```typescript
|
||||
emit('table-structure', {
|
||||
connectionId: number,
|
||||
database: string,
|
||||
tableName: string, // 表名/集合名/Key名，对于连接和数据库节点可能为空
|
||||
dbType: 'mysql' | 'mongo' | 'redis',
|
||||
nodeType: 'table' | 'collection' | 'key' | 'database' | 'connection'
|
||||
})
|
||||
```
|
||||
|
||||
**事件处理**：
|
||||
- 在 `index.vue` 中监听 `table-structure` 事件
|
||||
- 调用 `useStructureState.loadStructure()` 加载结构数据
|
||||
- 自动切换到结果面板的"结构"Tab
|
||||
|
||||
**详细设计**：详见 `事件系统设计.md`
|
||||
|
||||
---
|
||||
|
||||
### 1.5 结构Tab的显示/隐藏逻辑（已确定）
|
||||
|
||||
**方案**：✅ **方案二 - 始终显示Tab**
|
||||
|
||||
**实现方式**：
|
||||
- "结构"Tab始终显示在结果面板中
|
||||
- 无数据时显示空状态提示："请从连接树中选择节点查看结构"
|
||||
- 有数据时显示结构内容
|
||||
- 切换连接时，清空结构数据，显示空状态
|
||||
- 执行SQL时，结构Tab保留，不清空数据
|
||||
|
||||
**优点**：
|
||||
- ✅ Tab位置固定，用户习惯更好
|
||||
- ✅ 用户可以随时查看结构，无需先触发查看
|
||||
|
||||
**空状态设计**：
|
||||
- 显示图标和提示文本
|
||||
- 提供操作引导："右键点击连接树节点 → 查看结构"
|
||||
---
|
||||
|
||||
### 1.6 多表结构查看场景（已确定）
|
||||
|
||||
**方案**：✅ **方案一 - 单表查看，查看新表时替换当前结构**
|
||||
|
||||
**实现方式**：
|
||||
- 查看新表时，替换当前结构数据
|
||||
- 结构Tab始终只有一个表的结构
|
||||
- 简单直接，符合当前设计
|
||||
|
||||
**未来扩展**：
|
||||
- **方案二**：在SQL编辑器Tab区域支持结构Tab
|
||||
- 右键菜单添加"在新Tab中查看结构"选项
|
||||
- 在SQL编辑器Tab区域创建结构Tab
|
||||
- 可以同时查看多个表的结构
|
||||
- 详见 `多表结构查看方案分析.md`
|
||||
|
||||
**当前阶段**：
|
||||
- P0：使用方案一（单表查看）
|
||||
- P2：考虑实现方案二（SQL编辑器Tab支持结构Tab）
|
||||
|
||||
---
|
||||
|
||||
### 1.6 结构数据与查询结果的冲突
|
||||
|
||||
**问题**：查看结构时执行SQL，如何处理结果展示
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 执行SQL时，结构Tab是否自动切换到"结果"Tab？
|
||||
- 结构数据是否保留，还是清空？
|
||||
- 用户如何切换回结构Tab？
|
||||
|
||||
**建议**：FIXME: OK
|
||||
- 执行SQL时，自动切换到"结果"Tab
|
||||
- 结构数据保留，不清空
|
||||
- 用户可以手动切换回"结构"Tab继续查看
|
||||
|
||||
---
|
||||
|
||||
## 二、技术实现待明确
|
||||
|
||||
### 2.1 数据缓存策略
|
||||
|
||||
**问题**：结构数据缓存的具体实现
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 缓存位置：前端缓存（内存）还是后端缓存？
|
||||
- 缓存Key：如何生成唯一Key？（connectionId + database + tableName）
|
||||
- 缓存时间：5分钟是否合适？
|
||||
- 缓存失效：何时清除缓存？（切换连接、表结构变更后）
|
||||
|
||||
**建议**：OK
|
||||
- 前端缓存：使用 Map 存储，Key为 `${connectionId}-${database}-${tableName}`
|
||||
- 缓存时间：5分钟（可配置）
|
||||
- 缓存失效：切换连接时清除，手动刷新时清除
|
||||
|
||||
---
|
||||
|
||||
### 2.2 权限检查实现
|
||||
|
||||
**问题**：编辑功能如何检查数据库用户权限
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 权限检查时机：编辑模式切换时还是保存时？
|
||||
- 权限检查方式：如何检查 ALTER TABLE、CREATE INDEX 权限？
|
||||
- 权限不足时的提示：如何友好地提示用户？
|
||||
|
||||
**建议**：OK
|
||||
- 切换编辑模式时检查权限
|
||||
- 使用 `SHOW GRANTS` 或尝试执行测试语句检查权限
|
||||
- 权限不足时禁用编辑功能，显示提示信息
|
||||
|
||||
---
|
||||
|
||||
### 2.3 确认对话框设计
|
||||
|
||||
**问题**：编辑保存时的确认对话框内容
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 对话框内容：显示什么信息？（SQL语句、影响范围、风险提示）
|
||||
- 确认方式：是否需要二次确认？
|
||||
- 取消操作：取消时如何处理未保存的修改？
|
||||
|
||||
**建议**：OK
|
||||
- 显示将要执行的 SQL 语句（完整 ALTER TABLE 语句）
|
||||
- 显示影响范围（修改的字段/索引数量）
|
||||
- 显示风险提示（"此操作不可撤销，请确认"）
|
||||
- 取消时保留编辑内容，不切换回查看模式
|
||||
|
||||
---
|
||||
|
||||
### 2.4 错误处理和重试
|
||||
|
||||
**问题**：加载结构数据失败时的处理
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 错误提示：如何显示错误信息？
|
||||
- 重试机制：是否自动重试？重试次数？
|
||||
- 部分失败：如果部分数据加载成功，如何处理？
|
||||
|
||||
**建议**：OK
|
||||
- 显示详细的错误信息（错误类型、错误消息）
|
||||
- 提供"重试"按钮，不自动重试
|
||||
- 部分失败时显示已加载的数据，标注失败的部分
|
||||
|
||||
---
|
||||
|
||||
## 三、用户体验待明确
|
||||
|
||||
### 3.1 加载状态展示
|
||||
|
||||
**问题**：加载结构数据时的用户体验
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 加载提示：显示什么内容？（Spin、进度条、加载文本）
|
||||
- 加载时间：如果加载较慢，是否需要超时处理？
|
||||
- 骨架屏：是否需要使用骨架屏提升体验？
|
||||
|
||||
**建议**：OK
|
||||
- 使用 Arco Design Spin 组件 + "加载中..."文本
|
||||
- 设置超时时间（30秒），超时后提示用户
|
||||
- 大数据集时显示"数据较多，加载可能需要一些时间"的提示
|
||||
|
||||
---
|
||||
|
||||
### 3.2 空状态设计
|
||||
|
||||
**问题**：无结构数据时的展示
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 空状态内容：显示什么提示？
|
||||
- 操作引导：是否需要提供操作按钮？
|
||||
|
||||
**建议**：OK
|
||||
- 显示空状态图标和提示文本
|
||||
- 提供"刷新"按钮
|
||||
- 根据数据库类型显示不同的提示（MySQL/MongoDB/Redis）
|
||||
|
||||
---
|
||||
|
||||
### 3.3 数据刷新策略
|
||||
|
||||
**问题**：何时自动刷新结构数据
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 自动刷新：是否需要自动刷新？（表结构可能被其他工具修改）
|
||||
- 刷新时机：切换Tab时？定时刷新？
|
||||
- 手动刷新：刷新按钮的位置和样式？
|
||||
|
||||
**建议**：OK
|
||||
- 不自动刷新（避免不必要的请求）
|
||||
- 提供手动刷新按钮（在结构Tab工具栏）
|
||||
- 编辑保存后自动刷新
|
||||
|
||||
---
|
||||
|
||||
## 四、扩展功能待明确
|
||||
|
||||
### 4.1 导出功能实现
|
||||
|
||||
**问题**：导出功能的具体实现方式
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 导出格式：SQL、JSON、文本的具体格式？
|
||||
- 导出内容：导出哪些信息？（字段、索引、注释等）
|
||||
- 导出方式：下载文件还是复制到剪贴板？
|
||||
|
||||
**建议**：OK
|
||||
- MySQL：导出为 CREATE TABLE 语句（包含字段、索引、注释）
|
||||
- MongoDB：导出为 JSON Schema 格式
|
||||
- Redis：导出为文本格式（Key信息） FIXME: 不需要
|
||||
- 支持下载文件和复制到剪贴板两种方式
|
||||
|
||||
---
|
||||
|
||||
### 4.2 编辑功能的撤销/重做
|
||||
|
||||
**问题**：编辑模式是否需要撤销/重做功能
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 是否需要撤销/重做功能？
|
||||
- 如果需要，如何实现？（历史记录、操作栈）
|
||||
- 撤销范围：单次操作还是多次操作？
|
||||
|
||||
**建议**：OK
|
||||
- P2功能，暂不实现
|
||||
- 如果需要，使用操作栈记录每次修改
|
||||
- 支持撤销最近10次操作
|
||||
|
||||
---
|
||||
|
||||
## 五、性能优化待明确
|
||||
|
||||
### 5.1 大数据集处理
|
||||
|
||||
**问题**：字段/索引很多时的性能优化
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 分页加载：何时启用分页？（字段数 > 50？）
|
||||
- 虚拟滚动：是否需要虚拟滚动？
|
||||
- 懒加载：Tab切换时是否懒加载内容？
|
||||
|
||||
**建议**：OK
|
||||
- 字段数 > 50 时启用分页（每页20条）
|
||||
- 使用 Arco Design Table 的内置分页
|
||||
- Tab切换时懒加载（使用 v-if）
|
||||
|
||||
---
|
||||
|
||||
### 5.2 网络请求优化
|
||||
|
||||
**问题**：如何减少不必要的网络请求
|
||||
|
||||
**需要讨论**：
|
||||
- ⚠️ 待明确：
|
||||
- 请求合并：是否可以合并多个请求？
|
||||
- 请求取消：切换表时是否取消之前的请求？
|
||||
- 请求去重：相同请求是否去重？
|
||||
|
||||
**建议**：ok
|
||||
- 使用 AbortController 取消之前的请求
|
||||
- 相同请求使用缓存，不重复请求
|
||||
- 字段和索引信息可以合并为一个请求（当前已实现）
|
||||
|
||||
---
|
||||
|
||||
## 六、总结
|
||||
|
||||
### 优先级分类
|
||||
|
||||
**P0（必须明确）**：
|
||||
1. ✅ MongoDB字段统计实现方式（已确定：采样10个文档）
|
||||
2. ⚠️ 连接树右键菜单实现方式 FIXME: 做系统性全局设计， 在部分优先功能区开始设计实现，如连接区右键
|
||||
3. ⚠️ 事件名称和参数格式 FIXME: 做个系统性全局设计，简洁易于扩展各种事件都简洁强大，
|
||||
4. ⚠️ 结构Tab显示/隐藏逻辑
|
||||
5. ⚠️ 结构数据与查询结果的冲突处理
|
||||
|
||||
**P1（重要）**：
|
||||
1. ⚠️ 数据缓存策略
|
||||
2. ⚠️ 权限检查实现
|
||||
3. ⚠️ 确认对话框设计
|
||||
4. ⚠️ 错误处理和重试
|
||||
|
||||
**P2（优化）**：
|
||||
1. ⚠️ 加载状态优化
|
||||
2. ⚠️ 空状态设计
|
||||
3. ⚠️ 导出功能实现
|
||||
4. ⚠️ 大数据集处理
|
||||
|
||||
### 建议讨论顺序
|
||||
|
||||
1. **首先讨论 P0 问题**：这些是核心功能，必须明确
|
||||
2. **然后讨论 P1 问题**：影响用户体验，需要仔细设计
|
||||
3. **最后讨论 P2 问题**：优化功能，可以后续迭代
|
||||
|
||||
---
|
||||
|
||||
**下一步**：根据讨论结果更新设计文档，明确实现细节。
|
||||
|
||||
748
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/表结构查看功能设计.md
Normal file
748
docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/表结构查看功能设计.md
Normal file
@@ -0,0 +1,748 @@
|
||||
# 表结构查看功能设计
|
||||
|
||||
**设计日期**：2025-01-28
|
||||
**设计范围**：MySQL、Redis、MongoDB 表结构查看界面设计
|
||||
**状态**：设计阶段
|
||||
|
||||
---
|
||||
|
||||
## 设计概览
|
||||
|
||||
表结构查看功能提供统一的界面查看不同数据库类型的结构信息，支持：
|
||||
- **MySQL**：表字段详情、索引信息
|
||||
- **MongoDB**：文档示例、字段统计、索引信息
|
||||
- **Redis**：Key 类型、TTL、值预览、长度统计
|
||||
|
||||
**核心特性**：
|
||||
- 统一的对话框界面
|
||||
- 根据数据库类型自动适配展示内容
|
||||
- 支持 Tab 切换不同信息视图
|
||||
- 表格、JSON 等多种展示方式
|
||||
- 响应式设计，适配不同屏幕尺寸
|
||||
|
||||
---
|
||||
|
||||
## 一、功能概述
|
||||
|
||||
表结构查看功能允许用户查看不同数据库类型的结构信息：
|
||||
- **MySQL**：表字段信息、索引信息
|
||||
- **MongoDB**：集合文档示例、字段统计、索引信息
|
||||
- **Redis**：Key 类型、TTL、值预览、长度统计
|
||||
|
||||
---
|
||||
|
||||
## 二、界面设计
|
||||
|
||||
### 2.1 触发方式
|
||||
|
||||
#### 方式一：连接树右键菜单（推荐）
|
||||
- 在连接树中，右键点击表/集合/Key节点
|
||||
- 显示上下文菜单，包含"查看结构"选项
|
||||
- 点击后在结果面板的"结构"Tab中展示
|
||||
|
||||
#### 方式二：连接树节点操作按钮
|
||||
- 在表/集合/Key节点上悬停显示操作按钮
|
||||
- 点击"结构"图标按钮，在结果面板展示
|
||||
|
||||
#### 方式三：双击节点
|
||||
- 双击表/集合/Key节点，自动切换到"结构"Tab并加载结构信息
|
||||
|
||||
**推荐实现方式一**，用户体验最佳。
|
||||
|
||||
---
|
||||
|
||||
### 2.2 展示位置设计
|
||||
|
||||
#### 在结果面板中展示
|
||||
表结构信息展示在现有的 `ResultPanel` 组件中，作为第三个 Tab：
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 结果面板 │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ [结果] [消息] [结构] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ [查看模式] [编辑模式] [刷新] [导出] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [结构 Tab 内容区域] │
|
||||
│ ┌─────────┬─────────┬─────────┐ │
|
||||
│ │ 字段信息 │ 索引信息 │ 其他信息 │ │
|
||||
│ └─────────┴─────────┴─────────┘ │
|
||||
│ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 模式切换
|
||||
- **查看模式**（默认）：只读展示，显示表结构信息
|
||||
- **编辑模式**：可编辑模式，支持修改字段、添加/删除索引等操作
|
||||
- **切换方式**：通过模式切换按钮或 Tab 切换
|
||||
|
||||
#### 展示区域属性
|
||||
- **位置**：结果面板（`ResultPanel`）的第三个 Tab
|
||||
- **Tab 标题**：根据数据库类型显示
|
||||
- MySQL: `结构 - ${database}.${table}`
|
||||
- MongoDB: `结构 - ${database}.${collection}`
|
||||
- Redis: `结构 - ${key}`
|
||||
- **高度**：跟随结果面板高度（可调整，默认 300px）
|
||||
- **滚动**：内容超出时自动滚动
|
||||
|
||||
#### 优势
|
||||
- ✅ 无需弹出窗口，界面更简洁
|
||||
- ✅ 与查询结果、消息在同一区域，操作连贯
|
||||
- ✅ 可以同时查看结构信息和查询结果
|
||||
- ✅ 符合现有架构，无需新增组件
|
||||
|
||||
---
|
||||
|
||||
### 2.3 内容展示设计
|
||||
|
||||
#### MySQL 表结构
|
||||
|
||||
**Tab 1: 字段信息**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 字段名 │ 类型 │ 是否NULL │ 键 │ 默认值 │ 额外信息 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ id │ int(11) │ NO │ PRI │ NULL │ auto_inc │
|
||||
│ name │ varchar(50) │ YES │ │ NULL │ │
|
||||
│ email │ varchar(100)│ NO │ UNI │ NULL │ │
|
||||
│ created_at│ datetime │ NO │ │ NULL │ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**字段说明**：
|
||||
- **字段名**：列名
|
||||
- **类型**：数据类型（int, varchar, text, datetime 等）
|
||||
- **是否NULL**：YES/NO
|
||||
- **键**：PRI（主键）、UNI（唯一键）、MUL（多键）
|
||||
- **默认值**：默认值或 NULL
|
||||
- **额外信息**：auto_increment、on update 等
|
||||
|
||||
**Tab 2: 索引信息**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 索引名 │ 唯一 │ 字段 │ 排序 │ 索引类型 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ PRIMARY │ 是 │ id │ ASC │ BTREE │
|
||||
│ idx_email │ 是 │ email │ ASC │ BTREE │
|
||||
│ idx_name │ 否 │ name │ ASC │ BTREE │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**字段说明**：
|
||||
- **索引名**：索引名称
|
||||
- **唯一**：是/否
|
||||
- **字段**：索引字段（可能有多个，用逗号分隔）
|
||||
- **排序**：ASC/DESC
|
||||
- **索引类型**：BTREE、HASH 等
|
||||
|
||||
---
|
||||
|
||||
#### MongoDB 集合结构
|
||||
|
||||
**Tab 1: 文档示例**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 文档 1 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ { │
|
||||
│ "_id": ObjectId("..."), │
|
||||
│ "name": "John", │
|
||||
│ "email": "john@example.com", │
|
||||
│ "age": 30, │
|
||||
│ "created_at": ISODate("2025-01-01T00:00:00Z") │
|
||||
│ } │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
[显示最多 5 个文档示例，JSON 格式，可折叠展开]
|
||||
```
|
||||
|
||||
**Tab 2: 字段统计**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 字段名 │ 出现次数 │ 占比 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ _id │ 5 │ 100% (基于5个文档示例) │
|
||||
│ name │ 5 │ 100% │
|
||||
│ email │ 4 │ 80% │
|
||||
│ age │ 3 │ 60% │
|
||||
│ created_at │ 2 │ 40% │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
文档总数: 1000
|
||||
⚠️ 字段统计基于文档示例（最多5个），仅供参考
|
||||
```
|
||||
|
||||
**性能分析与优化建议**：
|
||||
|
||||
#### 当前实现分析
|
||||
|
||||
1. **字段统计**（当前实现）：
|
||||
- **查询方式**：基于文档示例（最多5个）进行统计
|
||||
- **性能影响**：✅ **低** - 只查询5个文档，几乎无性能影响
|
||||
- **准确性**：⚠️ **不准确** - 仅基于5个文档，不能代表全表字段分布
|
||||
- **适用场景**：快速预览，了解集合可能包含的字段
|
||||
|
||||
2. **文档总数**（当前实现）：
|
||||
- **查询方式**：`CountDocuments({})` - 全表扫描
|
||||
- **性能影响**：⚠️ **中等** - 大数据集（百万级+）可能较慢
|
||||
- **优化建议**：使用 `estimatedDocumentCount()` 获取估算值（更快）
|
||||
|
||||
#### 优化方案
|
||||
|
||||
**方案一：保持当前实现（推荐）**
|
||||
- ✅ **优点**：性能好，响应快
|
||||
- ⚠️ **缺点**：字段统计不准确
|
||||
- **适用**：快速预览场景，不需要精确统计
|
||||
|
||||
**方案二：采样统计（已确定采用）** ✅ 默认采样 10个文档
|
||||
- 使用 `$sample` 聚合管道随机采样10个文档进行统计
|
||||
- **性能影响**：✅ **低** - 采样10个文档，性能良好
|
||||
- **准确性**：✅ **适中** - 比5个文档更准确，比全表扫描性能更好
|
||||
- **实现方式**：使用 MongoDB `$sample` 聚合管道（已实现）
|
||||
- **异步加载**：✅ 全异步执行，不阻塞主流程
|
||||
- **前端展示**：✅ 显示"基于10个文档采样统计，仅供参考"
|
||||
- **未来扩展**：支持可配置采样数量（P2）
|
||||
|
||||
**方案三：全表统计（不推荐）**
|
||||
- 扫描所有文档统计字段
|
||||
- **性能影响**：❌ **高** - 大数据集可能非常慢
|
||||
- **适用**：小数据集（< 10万文档）
|
||||
|
||||
#### 推荐实现
|
||||
|
||||
```go
|
||||
// 方案一：保持当前实现（快速预览）
|
||||
// 字段统计基于文档示例（5个），性能好但准确性低
|
||||
fieldStats := make(map[string]int)
|
||||
for _, doc := range sampleDocs { // 5个文档
|
||||
for key := range doc {
|
||||
fieldStats[key]++
|
||||
}
|
||||
}
|
||||
|
||||
// 方案二：采样统计（可选，通过参数控制）
|
||||
// 如果用户需要更准确的统计，可以采样更多文档
|
||||
if needAccurateStats {
|
||||
pipeline := []bson.M{
|
||||
{"$sample": bson.M{"size": 1000}}, // 采样1000个文档
|
||||
{"$project": bson.M{"keys": bson.M{"$objectToArray": "$$ROOT"}}},
|
||||
{"$unwind": "$keys"},
|
||||
{"$group": bson.M{
|
||||
"_id": "$keys.k",
|
||||
"count": bson.M{"$sum": 1},
|
||||
}},
|
||||
}
|
||||
// 执行聚合查询...
|
||||
}
|
||||
```
|
||||
|
||||
#### 前端展示建议
|
||||
|
||||
1. **明确标注**：字段统计显示"基于X个文档示例，仅供参考"
|
||||
2. **可选刷新**：提供"精确统计"按钮，用户需要时再执行采样统计
|
||||
3. **性能提示**：大数据集时提示"精确统计可能较慢"
|
||||
4. **缓存策略**：字段统计结果缓存5-10分钟，避免重复查询
|
||||
|
||||
#### 最终建议（已确定）
|
||||
|
||||
- **默认实现**：✅ 使用采样统计，默认采样10个文档（性能好，准确性适中）
|
||||
- **文档总数**：✅ 使用 `estimatedDocumentCount()` 替代 `CountDocuments()` 提升性能
|
||||
- **前端展示**：明确标注"基于10个文档采样统计，仅供参考"
|
||||
- **后续优化**：可考虑提供"精确统计"按钮，采样更多文档（100-1000个），作为P2功能
|
||||
|
||||
**Tab 3: 索引信息**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 索引名 │ 唯一 │ 键定义 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ _id_ │ 是 │ {"_id": 1} │
|
||||
│ idx_email │ 是 │ {"email": 1} │
|
||||
│ idx_name │ 否 │ {"name": 1, "age": -1} │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Redis Key 信息
|
||||
|
||||
**单页展示（无 Tab）**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Key 信息 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Key 名称: user:1001 │
|
||||
│ Key 类型: hash │
|
||||
│ TTL: 3600 秒 (1 小时) │
|
||||
│ 长度: 5 个字段 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ 值预览: │
|
||||
│ { │
|
||||
│ "name": "John", │
|
||||
│ "email": "john@example.com", │
|
||||
│ "age": "30" │
|
||||
│ } │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**字段说明**：
|
||||
- **Key 名称**：完整的 Key 名称
|
||||
- **Key 类型**：string、hash、list、set、zset 等
|
||||
- **TTL**：过期时间（秒），-1 表示永不过期，-2 表示 Key 不存在
|
||||
- **长度**：根据类型显示（string=字符数，hash/list/set/zset=元素数）
|
||||
- **值预览**：限制显示前 200 字符，过长时显示省略号
|
||||
|
||||
---
|
||||
|
||||
## 三、组件设计
|
||||
|
||||
### 3.1 组件结构
|
||||
|
||||
```
|
||||
ResultPanel.vue (现有组件，扩展)
|
||||
└── 新增 "结构" Tab
|
||||
├── StructureContent.vue (结构内容组件)
|
||||
│ ├── 模式切换（查看/编辑）
|
||||
│ ├── MySQLStructure.vue (MySQL 专用)
|
||||
│ │ ├── ViewMode.vue (查看模式)
|
||||
│ │ │ ├── FieldsTab.vue (字段信息子Tab)
|
||||
│ │ │ └── IndexesTab.vue (索引信息子Tab)
|
||||
│ │ └── EditMode.vue (编辑模式)
|
||||
│ │ ├── FieldsEditor.vue (字段编辑表格)
|
||||
│ │ ├── IndexesEditor.vue (索引编辑表格)
|
||||
│ │ └── EditToolbar.vue (保存/取消按钮)
|
||||
│ ├── MongoStructure.vue (MongoDB 专用)
|
||||
│ │ ├── ViewMode.vue (查看模式)
|
||||
│ │ │ ├── SampleDocsTab.vue (文档示例子Tab)
|
||||
│ │ │ ├── FieldStatsTab.vue (字段统计子Tab)
|
||||
│ │ │ └── IndexesTab.vue (索引信息子Tab)
|
||||
│ │ └── EditMode.vue (编辑模式)
|
||||
│ │ └── IndexesEditor.vue (索引编辑，MongoDB不支持字段编辑)
|
||||
│ └── RedisStructure.vue (Redis 专用，仅查看模式)
|
||||
└── 状态管理（通过 composable）
|
||||
```
|
||||
|
||||
### 3.2 组件接口
|
||||
|
||||
#### ResultPanel.vue Props（扩展）
|
||||
```typescript
|
||||
interface Props {
|
||||
// ... 现有 props
|
||||
structureData?: {
|
||||
connectionId: number
|
||||
database: string
|
||||
tableName: string
|
||||
dbType: 'mysql' | 'mongo' | 'redis'
|
||||
} | null // 表结构数据，null 表示不显示结构Tab
|
||||
}
|
||||
```
|
||||
|
||||
#### 新增 Composable: useStructureState.ts
|
||||
```typescript
|
||||
export function useStructureState() {
|
||||
const structureLoading = ref(false)
|
||||
const structureError = ref('')
|
||||
const structureData = ref<any>(null)
|
||||
const structureInfo = ref<{
|
||||
connectionId: number
|
||||
database: string
|
||||
tableName: string
|
||||
dbType: 'mysql' | 'mongo' | 'redis'
|
||||
} | null>(null)
|
||||
|
||||
// 编辑模式相关
|
||||
const editMode = ref<'view' | 'edit'>('view')
|
||||
const editData = ref<any>(null) // 编辑中的数据（用于撤销）
|
||||
const hasChanges = ref(false) // 是否有未保存的修改
|
||||
|
||||
const loadStructure = async (connectionId, database, tableName, dbType) => {
|
||||
// 加载表结构数据
|
||||
}
|
||||
|
||||
const clearStructure = () => {
|
||||
structureData.value = null
|
||||
structureInfo.value = null
|
||||
editMode.value = 'view'
|
||||
editData.value = null
|
||||
hasChanges.value = false
|
||||
}
|
||||
|
||||
const switchToEditMode = () => {
|
||||
// 切换到编辑模式，复制数据到 editData
|
||||
editData.value = JSON.parse(JSON.stringify(structureData.value))
|
||||
editMode.value = 'edit'
|
||||
hasChanges.value = false
|
||||
}
|
||||
|
||||
const switchToViewMode = () => {
|
||||
// 切换到查看模式
|
||||
editMode.value = 'view'
|
||||
editData.value = null
|
||||
hasChanges.value = false
|
||||
}
|
||||
|
||||
const saveStructure = async () => {
|
||||
// 保存结构修改，生成 ALTER TABLE 语句并执行
|
||||
}
|
||||
|
||||
return {
|
||||
structureLoading,
|
||||
structureError,
|
||||
structureData,
|
||||
structureInfo,
|
||||
editMode,
|
||||
editData,
|
||||
hasChanges,
|
||||
loadStructure,
|
||||
clearStructure,
|
||||
switchToEditMode,
|
||||
switchToViewMode,
|
||||
saveStructure
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、数据流程
|
||||
|
||||
### 4.1 数据获取流程
|
||||
|
||||
```
|
||||
用户触发查看结构（右键菜单/操作按钮）
|
||||
↓
|
||||
ConnectionTree 触发 'table-structure' 事件
|
||||
↓
|
||||
index.vue 接收事件，调用 useStructureState.loadStructure()
|
||||
↓
|
||||
根据 connectionId 获取连接信息（确定 dbType）
|
||||
↓
|
||||
调用 GetTableStructure API
|
||||
↓
|
||||
后端根据 dbType 分发：
|
||||
- MySQL → GetTableStructure (DESCRIBE 查询)
|
||||
- MongoDB → GetCollectionStructure (文档分析)
|
||||
- Redis → GetKeyInfo (命令查询)
|
||||
↓
|
||||
返回结构数据
|
||||
↓
|
||||
更新 structureData 和 structureInfo
|
||||
↓
|
||||
ResultPanel 检测到 structureInfo 不为空，显示"结构"Tab
|
||||
↓
|
||||
StructureContent 根据 dbType 渲染对应组件
|
||||
```
|
||||
|
||||
### 4.2 API 调用
|
||||
|
||||
```typescript
|
||||
// 获取表结构
|
||||
const result = await window.go.main.App.GetTableStructure(
|
||||
connectionId,
|
||||
database,
|
||||
tableName
|
||||
)
|
||||
|
||||
// 返回数据结构
|
||||
// MySQL:
|
||||
{
|
||||
type: 'mysql',
|
||||
database: 'test',
|
||||
table: 'users',
|
||||
columns: [...], // 字段信息数组
|
||||
}
|
||||
|
||||
// MongoDB:
|
||||
{
|
||||
type: 'mongo',
|
||||
database: 'test',
|
||||
collection: 'users',
|
||||
structure: {
|
||||
sampleDocs: [...], // 文档示例
|
||||
fieldStats: {...}, // 字段统计
|
||||
indexes: [...], // 索引信息
|
||||
documentCount: 1000 // 文档总数
|
||||
}
|
||||
}
|
||||
|
||||
// Redis:
|
||||
{
|
||||
type: 'redis',
|
||||
key: 'user:1001',
|
||||
info: {
|
||||
type: 'hash',
|
||||
ttl: 3600,
|
||||
length: 5,
|
||||
value: {...} // 值预览
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、实现细节
|
||||
|
||||
### 5.1 表格展示
|
||||
|
||||
#### 使用 Arco Design Table 组件
|
||||
- **分页**：字段/索引较多时，使用分页（每页 20 条）
|
||||
- **排序**：支持按字段名、类型等排序
|
||||
- **搜索**：字段信息表格支持搜索字段名
|
||||
- **固定列**：字段名列固定，方便横向滚动查看
|
||||
|
||||
#### 样式优化
|
||||
- **字体**：使用等宽字体显示类型信息
|
||||
- **颜色**：主键字段用特殊颜色标识，NULL 字段用灰色
|
||||
- **宽度**：列宽自适应，最小宽度 100px
|
||||
|
||||
### 5.2 JSON 展示
|
||||
|
||||
#### MongoDB 文档示例、Redis 值预览
|
||||
- 使用 `<pre>` 标签展示格式化的 JSON
|
||||
- 支持折叠/展开（使用 `a-collapse` 组件）
|
||||
- 长文本自动换行，限制最大高度，超出部分滚动
|
||||
- 支持复制功能（点击复制按钮）
|
||||
|
||||
### 5.3 加载状态
|
||||
|
||||
- **加载中**：显示 Spin 组件和"加载中..."提示
|
||||
- **加载失败**：显示错误提示，提供重试按钮
|
||||
- **空数据**：显示空状态提示
|
||||
|
||||
### 5.4 响应式设计
|
||||
|
||||
- **小屏幕**：对话框宽度自适应，最小 600px
|
||||
- **表格**：横向滚动，固定关键列
|
||||
- **Tab**：内容过多时，Tab 可滚动
|
||||
|
||||
---
|
||||
|
||||
## 六、交互设计
|
||||
|
||||
### 6.1 触发查看结构
|
||||
|
||||
1. **从连接树触发**：
|
||||
- 右键菜单 → "查看结构"
|
||||
- 或点击节点操作按钮
|
||||
- 或双击节点
|
||||
|
||||
2. **参数传递**：
|
||||
- 从节点数据获取 `connectionId`、`database`、`tableName`、`dbType`
|
||||
- 通过事件传递给 `index.vue`
|
||||
- `index.vue` 调用 `useStructureState.loadStructure()`
|
||||
|
||||
3. **Tab 切换**：
|
||||
- 自动切换到结果面板的"结构"Tab
|
||||
- 如果结果面板隐藏，自动显示
|
||||
|
||||
### 6.2 结构Tab操作
|
||||
|
||||
- **切换Tab**：点击"结构"Tab查看，点击其他Tab返回
|
||||
- **刷新**：在结构Tab中添加刷新按钮，重新加载结构数据
|
||||
- **复制**：字段信息、索引信息支持复制（选中文本或复制按钮）
|
||||
- **关闭**：切换到其他Tab或清空结构数据
|
||||
|
||||
### 6.3 数据更新
|
||||
|
||||
- **自动加载**：触发查看结构时自动加载数据
|
||||
- **手动刷新**：在结构Tab中提供刷新按钮
|
||||
- **错误重试**：加载失败时显示错误提示和重试按钮
|
||||
- **清空数据**：切换连接或执行SQL时自动清空结构数据
|
||||
|
||||
---
|
||||
|
||||
## 七、技术实现要点
|
||||
|
||||
### 7.1 组件拆分
|
||||
|
||||
- **扩展组件**：`ResultPanel.vue` 添加"结构"Tab
|
||||
- **内容组件**：`StructureContent.vue` 负责根据 `dbType` 路由到对应组件
|
||||
- **专用组件**：`MySQLStructure.vue`、`MongoStructure.vue`、`RedisStructure.vue`
|
||||
- **复用组件**：`IndexesTab.vue` 可被 MySQL 和 MongoDB 复用（需适配数据格式）
|
||||
- **状态管理**：`useStructureState.ts` composable 管理结构数据状态
|
||||
|
||||
### 7.2 数据格式化
|
||||
|
||||
- **MySQL 字段类型**：保持原样显示（如 `int(11)`、`varchar(50)`）
|
||||
- **MongoDB 文档**：BSON 转换为 JSON 格式显示
|
||||
- **Redis 值**：根据类型格式化（string 直接显示，hash 显示为对象）
|
||||
|
||||
### 7.3 性能优化
|
||||
|
||||
- **懒加载**：结构Tab切换时才加载对应内容（使用 `v-if`）
|
||||
- **数据缓存**：同一表结构数据缓存 5 分钟，避免重复请求
|
||||
- **分页加载**：字段/索引较多时使用分页，避免一次性加载过多数据
|
||||
- **按需渲染**：只有在 structureInfo 不为空时才渲染结构Tab
|
||||
|
||||
---
|
||||
|
||||
## 八、扩展功能（可选）
|
||||
|
||||
### 8.1 导出功能
|
||||
|
||||
- **导出为 SQL**：MySQL 表结构导出为 CREATE TABLE 语句
|
||||
- **导出为 JSON**：MongoDB 集合结构导出为 JSON Schema
|
||||
- **导出为文本**：所有类型支持导出为文本格式
|
||||
|
||||
### 8.2 编辑功能（融入查看区域）
|
||||
|
||||
#### 设计原则
|
||||
- ✅ **融入查看区域**：编辑功能直接在结构查看 Tab 中实现，通过模式切换
|
||||
- ✅ **统一界面**：查看和编辑使用相同的布局和组件，减少界面切换
|
||||
- ✅ **权限检查**：编辑前检查用户权限（ALTER TABLE、CREATE INDEX 等）
|
||||
- ✅ **操作确认**：结构修改是危险操作，需要确认对话框
|
||||
|
||||
#### 编辑模式设计
|
||||
|
||||
**模式切换**：
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 结构 - database.table [查看] [编辑] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ [字段信息] [索引信息] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [编辑模式内容] │
|
||||
│ - 可编辑表格（字段信息） │
|
||||
│ - 添加字段按钮 │
|
||||
│ - 删除字段按钮 │
|
||||
│ - 保存/取消按钮 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**编辑功能**：
|
||||
- **MySQL**：
|
||||
- 修改字段：类型、是否NULL、默认值、注释
|
||||
- 添加字段：在指定位置添加新字段
|
||||
- 删除字段：删除不需要的字段（需确认）
|
||||
- 修改索引：添加/删除索引
|
||||
- **MongoDB**：
|
||||
- 添加索引：创建新索引
|
||||
- 删除索引：删除不需要的索引（需确认）
|
||||
- 注意：MongoDB 字段是动态的，不支持字段编辑
|
||||
- **Redis**：
|
||||
- 不支持编辑（Redis 是键值存储，无结构概念）
|
||||
|
||||
#### 实现方式
|
||||
|
||||
**方式一：Tab 切换（推荐）**
|
||||
- 在结构 Tab 内部使用子 Tab 切换查看/编辑模式
|
||||
- 查看 Tab：只读展示
|
||||
- 编辑 Tab：可编辑表格，带保存/取消按钮
|
||||
|
||||
**方式二：按钮切换**
|
||||
- 在结构 Tab 顶部添加"编辑"按钮
|
||||
- 点击后切换到编辑模式，按钮变为"查看"
|
||||
- 编辑模式下显示保存/取消按钮
|
||||
|
||||
**推荐使用方式一**，界面更清晰，模式切换更明显。
|
||||
|
||||
#### 编辑操作流程
|
||||
|
||||
```
|
||||
用户点击"编辑"Tab/按钮
|
||||
↓
|
||||
检查权限（ALTER TABLE、CREATE INDEX）
|
||||
↓
|
||||
加载当前结构数据到编辑表格
|
||||
↓
|
||||
用户修改字段/索引
|
||||
↓
|
||||
点击"保存"按钮
|
||||
↓
|
||||
生成 ALTER TABLE 语句
|
||||
↓
|
||||
显示确认对话框（显示将要执行的 SQL）
|
||||
↓
|
||||
用户确认
|
||||
↓
|
||||
执行 ALTER TABLE 语句
|
||||
↓
|
||||
刷新结构数据
|
||||
↓
|
||||
切换回查看模式
|
||||
```
|
||||
|
||||
#### 安全措施
|
||||
|
||||
1. **权限检查**：编辑前检查数据库用户权限
|
||||
2. **确认对话框**：显示将要执行的 SQL，用户必须确认
|
||||
3. **操作日志**：记录所有结构修改操作
|
||||
4. **撤销功能**：支持撤销最近一次修改（可选，P2）
|
||||
5. **备份提示**：重要表修改前提示备份（可选，P2）
|
||||
|
||||
### 8.3 对比功能
|
||||
|
||||
- **结构对比**：对比两个表的结构差异
|
||||
- **版本历史**：记录表结构变更历史（需要额外存储）
|
||||
|
||||
---
|
||||
|
||||
## 九、实现优先级
|
||||
|
||||
### P0（必须实现）
|
||||
1. ✅ 在 ResultPanel 中添加"结构"Tab
|
||||
2. ✅ useStructureState composable 实现
|
||||
3. ✅ MySQL 字段信息展示
|
||||
4. ✅ MySQL 索引信息展示
|
||||
5. ✅ MongoDB 文档示例展示
|
||||
6. ✅ MongoDB 字段统计展示
|
||||
7. ✅ Redis Key 信息展示
|
||||
8. ✅ 连接树右键菜单触发
|
||||
|
||||
### P0.5（查看功能完成后实现）
|
||||
1. 查看/编辑模式切换
|
||||
2. MySQL 字段编辑（修改类型、NULL、默认值）
|
||||
3. MySQL 索引编辑（添加/删除索引）
|
||||
4. MongoDB 索引编辑（添加/删除索引）
|
||||
5. 权限检查
|
||||
6. 确认对话框
|
||||
|
||||
### P1（重要功能）
|
||||
1. 数据加载状态和错误处理
|
||||
2. JSON 格式化显示
|
||||
3. 表格搜索和排序
|
||||
4. 自动切换到结构Tab
|
||||
5. 清空结构数据逻辑（切换连接、执行SQL时）
|
||||
|
||||
### P2（优化功能）
|
||||
1. 数据缓存
|
||||
2. 复制功能
|
||||
3. 导出功能
|
||||
4. 响应式优化
|
||||
5. 编辑模式撤销/重做
|
||||
6. 修改前备份提示
|
||||
|
||||
---
|
||||
|
||||
## 十、总结
|
||||
|
||||
表结构查看功能设计遵循以下原则：
|
||||
|
||||
1. **统一接口**：不同数据库类型使用相同的触发方式和展示框架
|
||||
2. **差异化展示**：根据数据库类型展示对应的结构信息
|
||||
3. **集成设计**：在结果面板中展示，无需弹出窗口，界面更简洁
|
||||
4. **用户体验**：提供清晰的表格展示、JSON 格式化、搜索排序等功能
|
||||
5. **性能优化**：懒加载、数据缓存、分页等优化措施
|
||||
6. **可扩展性**：组件化设计，便于后续添加新功能
|
||||
|
||||
### 设计优势
|
||||
|
||||
- ✅ **无需弹出窗口**：在结果面板中展示，界面更简洁
|
||||
- ✅ **操作连贯**：与查询结果、消息在同一区域，切换方便
|
||||
- ✅ **符合现有架构**：扩展 ResultPanel 组件，无需新增复杂组件
|
||||
- ✅ **状态管理清晰**：使用 composable 管理结构数据，易于维护
|
||||
- ✅ **查看编辑融合**：编辑功能融入查看区域，通过模式切换，无需额外界面
|
||||
- ✅ **统一体验**：查看和编辑使用相同布局，降低学习成本
|
||||
|
||||
### 编辑功能融入优势
|
||||
|
||||
- ✅ **无缝切换**：查看和编辑在同一区域，切换流畅
|
||||
- ✅ **上下文保持**：编辑时可以看到原始结构，便于对比
|
||||
- ✅ **操作连贯**：查看 → 编辑 → 保存 → 查看，流程顺畅
|
||||
- ✅ **界面简洁**：不需要额外的编辑窗口或页面
|
||||
|
||||
通过以上设计，可以实现一个功能完善、用户体验良好的表结构查看和编辑功能。
|
||||
|
||||
Reference in New Issue
Block a user