From 2cade12b547e0bdee07b901f6eecf7a732992dba Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Fri, 22 May 2026 16:29:22 +0800
Subject: [PATCH] feat(editor): collapse query results pane

---
 .../src/components/layout/ContentArea.vue     | 66 ++++++++++++++++---
 apps/desktop/src/i18n/locales/en.ts           |  2 +
 apps/desktop/src/i18n/locales/es.ts           |  2 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |  2 +
 .../app-tests/queryResultPaneCollapse.test.ts | 16 +++++
 5 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 packages/app-tests/queryResultPaneCollapse.test.ts

diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index e2e985dc64..fb5b46102d 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, defineAsyncComponent } from "vue";
+import { computed, ref, defineAsyncComponent, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   Check,
@@ -12,6 +12,8 @@ import {
   GitBranch,
   BarChart3,
   TableProperties,
+  ChevronDown,
+  ChevronUp,
 } from "lucide-vue-next";
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
@@ -133,6 +135,37 @@ const activeQueryError = computed(() => {
   if (!result?.columns.includes("Error")) return "";
   return String(result.rows[0]?.[0] ?? "");
 });
+const hasQueryOutput = computed(
+  () =>
+    !!props.activeTab.result ||
+    !!props.activeTab.explainPlan ||
+    !!props.activeTab.explainError ||
+    props.activeTab.isExecuting === true ||
+    props.activeTab.isExplaining === true,
+);
+const resultsPaneOpen = ref(false);
+
+watch(
+  hasQueryOutput,
+  (hasOutput) => {
+    resultsPaneOpen.value = hasOutput ? true : false;
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.activeTab.id,
+  () => {
+    resultsPaneOpen.value = hasQueryOutput.value;
+  },
+);
+
+watch(
+  () => [props.activeTab.isExecuting, props.activeTab.isExplaining],
+  ([isExecuting, isExplaining]) => {
+    if (isExecuting || isExplaining) resultsPaneOpen.value = true;
+  },
+);
 
 // Column info panel handlers
 async function onHandleClickColumn(
@@ -228,7 +261,7 @@ defineExpose({ focusSearch, refreshData });
     <!-- Query mode: editor + results -->
     <template v-if="activeTab.mode === 'query'">
       <Splitpanes horizontal class="flex-1">
-        <Pane :size="40" :min-size="15">
+        <Pane :size="resultsPaneOpen ? 40 : 100" :min-size="resultsPaneOpen ? 15 : 100">
           <div class="h-full flex flex-col relative">
             <QueryEditor
               ref="queryEditorRef"
@@ -257,18 +290,22 @@ defineExpose({ focusSearch, refreshData });
               :error="columnInfoError"
               @close="closeColumnInfo"
             />
+            <Button
+              v-if="hasQueryOutput && !resultsPaneOpen"
+              variant="secondary"
+              size="sm"
+              class="absolute bottom-3 right-3 z-20 h-7 gap-1.5 rounded-full border bg-background/95 px-3 text-xs shadow-lg backdrop-blur hover:bg-accent"
+              @click="resultsPaneOpen = true"
+            >
+              <ChevronUp class="h-3.5 w-3.5" />
+              {{ t("editor.showResultsPane") }}
+            </Button>
           </div>
         </Pane>
-        <Pane :size="60" :min-size="20">
+        <Pane v-if="resultsPaneOpen" :size="60" :min-size="20">
           <div class="h-full flex flex-col">
             <div
-              v-if="
-                activeTab.result ||
-                activeTab.explainPlan ||
-                activeTab.explainError ||
-                activeTab.isExecuting ||
-                activeTab.isExplaining
-              "
+              v-if="hasQueryOutput"
               class="h-8 shrink-0 border-b bg-muted/20 px-2 flex items-center gap-1 overflow-x-auto"
               style="scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch"
             >
@@ -314,6 +351,15 @@ defineExpose({ focusSearch, refreshData });
                 <BarChart3 class="h-3.5 w-3.5" />
                 {{ t("chart.title") }}
               </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="ml-auto h-6 shrink-0 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+                @click="resultsPaneOpen = false"
+              >
+                <ChevronDown class="h-3.5 w-3.5" />
+                {{ t("editor.hideResultsPane") }}
+              </Button>
             </div>
 
             <ExplainPlanViewer
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 83384be924..ac59ccab1e 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -206,6 +206,8 @@ export default {
   editor: {
     pressToExecute: "Press {mod}+Enter to execute",
     pressToSaveSql: "Press {mod}+S to save SQL",
+    showResultsPane: "Show results",
+    hideResultsPane: "Hide results",
     noDatabase: "No database selected",
     selectConnection: "Select connection",
     searchConnection: "Search connections...",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index a7f9786852..8ebcf6b2f4 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -201,6 +201,8 @@ export default {
   editor: {
     pressToExecute: "Presiona {mod}+Enter para ejecutar",
     pressToSaveSql: "Presiona {mod}+S para guardar el SQL",
+    showResultsPane: "Mostrar resultados",
+    hideResultsPane: "Ocultar resultados",
     noDatabase: "Sin base de datos seleccionada",
     selectConnection: "Seleccionar conexión",
     searchConnection: "Buscar conexiones...",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 704d7dd8f8..cdf2b01e0b 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -204,6 +204,8 @@ export default {
   editor: {
     pressToExecute: "按 {mod}+Enter 执行查询",
     pressToSaveSql: "按 {mod}+S 保存 SQL",
+    showResultsPane: "显示结果",
+    hideResultsPane: "收起结果",
     noDatabase: "未选择数据库",
     selectConnection: "选择连接",
     searchConnection: "搜索连接...",
diff --git a/packages/app-tests/queryResultPaneCollapse.test.ts b/packages/app-tests/queryResultPaneCollapse.test.ts
new file mode 100644
index 0000000000..b0c9e9ec65
--- /dev/null
+++ b/packages/app-tests/queryResultPaneCollapse.test.ts
@@ -0,0 +1,16 @@
+import { readFileSync } from "node:fs";
+import { strict as assert } from "node:assert";
+import test from "node:test";
+
+const source = readFileSync("apps/desktop/src/components/layout/ContentArea.vue", "utf8");
+
+test("query result pane is hidden by default and can be reopened after output exists", () => {
+  assert.match(source, /const resultsPaneOpen = ref\(false\)/);
+  assert.match(source, /const hasQueryOutput = computed\(/);
+  assert.match(source, /watch\(\s*hasQueryOutput,[\s\S]*?resultsPaneOpen\.value = true/);
+  assert.match(source, /<Pane[\s\S]*:size="resultsPaneOpen \? 40 : 100"[\s\S]*>/);
+  assert.match(source, /<Pane v-if="resultsPaneOpen"[\s\S]*:size="60"[\s\S]*>/);
+  assert.match(source, /resultsPaneOpen = false/);
+  assert.match(source, /v-if="hasQueryOutput && !resultsPaneOpen"/);
+  assert.match(source, /resultsPaneOpen = true/);
+});