新增：文档体系重构+CHANGELOG补充+发布产物清理

2026-05-01 22:22:06 +08:00
parent 3e1a540b83
commit 6eaaa56eb6
164 changed files with 40346 additions and 64 deletions
--- a/docs/06-前端开发/布局分析/layout-analysis.md
+++ b/docs/06-前端开发/布局分析/layout-analysis.md
@@ -0,0 +1,168 @@
+# Go Desk 表格高度问题分析
+
+## 📐 整体布局结构
+
+### 完整布局层级树
+
+```
+App.vue (100vh)
+└── a-layout (db-cli-layout, height: 100vh)
+    ├── a-layout-sider (sidebar, width: 280px, fixed)
+    │   └── ConnectionTree
+    │
+    └── a-layout (main-layout, flex: 1)
+        ├── a-layout-content (editor-area, 动态高度百分比)
+        │   └── SqlEditor
+        │
+        ├── div (editor-result-divider, 4px)
+        │
+        └── a-layout-content (result-area, flex: 1) ← 关键：应占据剩余空间
+            └── ResultPanel (result-panel-wrapper, height: 100%)
+                └── a-tabs (result-tabs, height: 100%)
+                    └── a-tab-pane (result-content, flex: 1, padding: 12px)
+                        └── result-data-wrapper (flex: 1)
+                            ├── result-stats (固定高度, margin-bottom: 4px)
+                            └── result-table-container (flex: 1, overflow: hidden)
+                                ├── a-table (scroll.y = tableScrollHeight)
+                                └── custom-pagination (固定高度)
+```
+
+## 🔍 问题诊断
+
+### 当前症状
+1. **底部有空白** - 表格下方有大量未使用的空白区域
+2. **表格没有填满可用空间**
+
+### 布局断点分析
+
+#### 断点1: main-layout
+- ✅ `flex: 1` - 正确，应占据除 sidebar 外的所有空间
+- ✅ `flex-direction: column`
+
+#### 断点2: result-area
+- ✅ `flex: 1` - 正确
+- ✅ 应该占据 main-layout 中除 editor-area 外的所有空间
+
+#### 断点3: result-content
+- ⚠️ `flex: 1` + `padding: 12px`
+- ✅ padding 会占用空间，但 flex: 1 应该让内容区填满剩余空间
+
+#### 断点4: result-data-wrapper
+- ✅ `flex: 1` - 正确
+
+#### 断点5: result-table-container (问题所在)
+- ✅ `flex: 1`
+- ❌ 内部使用 `scroll.y` 固定高度，与 flex 冲突
+
+### 核心问题
+
+**Arco Table 的 `scroll.y` 属性的工作机制**：
+
+```javascript
+// 当设置 scroll.y = 400 时
+<a-table :scroll="{ y: 400 }">
+
+// Arco Table 内部结构：
+.arco-table {
+  height: auto; // 或固定高度
+}
+.arco-table-body {
+  max-height: 400px; // 这是滚动高度
+  overflow: auto;
+}
+```
+
+**问题**：
+- `scroll.y` 设置的是 **tbody 的滚动高度**（不包括表头）
+- 表格总高度 = 表头高度 + scroll.y
+- 当 `scroll.y` 过小时，表格下方会有空白
+- 当 `scroll.y` 过大时，表格会超出容器
+
+### 当前计算逻辑
+
+```javascript
+// 当前计算公式
+const scrollY = containerHeight - paginationHeight - 12;
+
+// 问题：
+// 1. containerHeight = result-table-container 的 offsetHeight
+// 2. 但 result-table-container 是 flex: 1，它的实际高度由父容器决定
+// 3. 如果 scroll.y 小于实际可用空间，就会有空白
+```
+
+## 🎯 正确的解决方案
+
+### 方案对比
+
+#### ❌ 错误方案：直接计算 scroll.y
+```javascript
+// 问题：计算的值可能不准确
+const scrollY = containerHeight - paginationHeight - 12;
+```
+
+#### ✅ 正确方案：使用 CSS 让表格自动填充
+**移除 scroll.y，纯 CSS 控制**：
+
+```vue
+<a-table
+    :columns="tableColumns"
+    :data="pagedData"
+    :pagination="false"
+    class="result-table"
+/>
+```
+
+```css
+.result-table-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.result-table-container :deep(.arco-table) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.result-table-container :deep(.arco-table-body) {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+```
+
+### Arco Table 的 DOM 结构
+
+```
+.arco-table
+├── .arco-table-header (表头，固定高度)
+└── .arco-table-body (表体，flex: 1, overflow: auto)
+```
+
+**关键**：
+- 表头自动高度（由内容决定）
+- 表体填充剩余空间
+- overflow 在表体上，不是整个表格
+
+## 📋 行动计划
+
+### 步骤1: 移除 scroll.y 属性
+### 步骤2: 使用纯 CSS flex 布局
+### <20>骤骤3: 确保每个容器有正确的 flex 设置
+### 步骤4: 测试不同数据量下的表现
+
+## 🎨 期望效果
+
+- ✅ 表格填满所有可用空间（无底部空白）
+- ✅ 数据少时：表头 + 空行 + 分页控件填满空间
+- ✅ 数据多时：表头 + 可滚动表体 + 分页控件
+- ✅ 窗口调整时自动响应
+
+## 🔧 待确认
+
+1. 当前浏览器控制台输出的具体数值是多少？
+2. 数据量是多还是少？（行数大概多少）
+3. 空白区域大概有多少像素？