7.0 KiB
7.0 KiB
左侧资源管理面板设计
设计日期：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 组件结构
<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 数据结构
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 数据结构
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 数据结构
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 状态管理
- 使用
useResourcePanelcomposable 管理面板状态 - 使用现有的
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扩展
- 支持自定义面板位置（可拖拽到右侧）
- 支持多面板模式
- 支持面板主题切换