重构：文件系统模块化架构，优化应用启动流程

2026-01-28 00:28:54 +08:00
parent 4a9b25a505
commit 8c577f70e7
123 changed files with 32030 additions and 967 deletions
--- a/docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/左侧资源管理面板设计.md
+++ b/docs/04-功能迭代/GO-DESK-2.数据库客户端/设计文档/功能设计/左侧资源管理面板设计.md
@@ -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)
+