278 lines
7.0 KiB
Markdown
278 lines
7.0 KiB
Markdown
# 左侧资源管理面板设计
|
||
|
||
**设计日期**：2026-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/frontend/src/views/db-cli/components/ConnectionTree.vue)
|
||
|