u-desk/docs/layout-analysis.md

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 属性的工作机制：

// 当设置 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 过大时，表格会超出容器

当前计算逻辑

// 当前计算公式
const scrollY = containerHeight - paginationHeight - 12;

// 问题：
// 1. containerHeight = result-table-container 的 offsetHeight
// 2. 但 result-table-container 是 flex: 1，它的实际高度由父容器决定
// 3. 如果 scroll.y 小于实际可用空间，就会有空白

🎯 正确的解决方案

方案对比

❌ 错误方案：直接计算 scroll.y

// 问题：计算的值可能不准确
const scrollY = containerHeight - paginationHeight - 12;

✅ 正确方案：使用 CSS 让表格自动填充

移除 scroll.y，纯 CSS 控制：

<a-table
    :columns="tableColumns"
    :data="pagedData"
    :pagination="false"
    class="result-table"
/>

.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 布局

<EFBFBD>骤骤3: 确保每个容器有正确的 flex 设置

步骤4: 测试不同数据量下的表现

🎨 期望效果

• ✅ 表格填满所有可用空间（无底部空白）
• ✅ 数据少时：表头 + 空行 + 分页控件填满空间
• ✅ 数据多时：表头 + 可滚动表体 + 分页控件
• ✅ 窗口调整时自动响应

🔧 待确认

1. 当前浏览器控制台输出的具体数值是多少？
2. 数据量是多还是少？（行数大概多少）
3. 空白区域大概有多少像素？