# 左侧资源管理面板设计 **设计日期**：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 ``` #### 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)