# 左侧资源管理面板设计

**设计日期**：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)

