From 1ded7e8332a5db1397b29672232aed3940a0a557 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Thu, 25 Jun 2026 14:52:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=9D=E7=95=99=E9=A9=B1=E5=8A=A8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=A0=87=E7=AD=BE=E9=A1=B5=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>
---
 apps/desktop/src/App.vue                      | 40 ++++++++++++++-----
 .../src/components/layout/AppTabBar.vue       | 32 +++++++++------
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue
index f60bebf5bf..c5b2edd30e 100644
--- a/apps/desktop/src/App.vue
+++ b/apps/desktop/src/App.vue
@@ -114,7 +114,9 @@ const showSettingsDialog = ref(false);
 const settingsInitialTab = ref("editor");
 const settingsInitialSection = ref<string | undefined>(undefined);
 const showQueryEditorDdlDialog = ref(false);
-const showDriverStore = ref(false);
+const driverStoreTabOpen = ref(false);
+const driverStoreActive = ref(false);
+const showDriverStore = computed(() => driverStoreTabOpen.value && driverStoreActive.value);
 const showQuickOpen = ref(false);
 const agentDriverUpdateCount = ref(0);
 const showHistory = ref(false);
@@ -347,7 +349,7 @@ watch(
       );
     }
     if (id) newQueryContextSource.value = "tab";
-    if (id && showDriverStore.value) showDriverStore.value = false;
+    if (id && driverStoreActive.value) driverStoreActive.value = false;
     selectedSql.value = "";
     activeOutputView.value = "result";
     if (id) queryStore.reloadEvictedTab(id);
@@ -1186,7 +1188,8 @@ function handleKeydown(e: KeyboardEvent) {
   if (isCloseTabShortcut(e, shortcuts)) {
     e.preventDefault();
     if (showDriverStore.value) {
-      showDriverStore.value = false;
+      driverStoreTabOpen.value = false;
+      driverStoreActive.value = false;
     } else if (queryStore.activeTabId) {
       queryStore.closeTab(queryStore.activeTabId);
     }
@@ -1309,7 +1312,8 @@ function handleContextMenu(e: MouseEvent) {
 }
 
 function openDriverStoreFromEvent() {
-  showDriverStore.value = true;
+  driverStoreTabOpen.value = true;
+  driverStoreActive.value = true;
 }
 
 function runUpdateNotificationChecks() {
@@ -1436,7 +1440,10 @@ onUnmounted(() => {
           @toggle-sql-library="toggleSqlLibrary"
           @open-github="openGitHub"
           @open-settings="openSettings()"
-          @open-driver-store="showDriverStore = !showDriverStore"
+          @open-driver-store="
+            driverStoreTabOpen = true;
+            driverStoreActive = true;
+          "
           @check-updates="checkUpdates()"
           @open-transfer="dialogs.showTransferDialog.value = true"
           @open-sql-file="dialogs.showSqlFileDialog.value = true"
@@ -1454,9 +1461,23 @@ onUnmounted(() => {
 
           <div :class="isClassicLayout ? 'flex-1 min-w-0 overflow-hidden' : 'flex-1 min-w-0 overflow-hidden rounded-md border border-border/80 bg-background'">
             <div class="h-full flex flex-col min-w-0">
-              <AppTabBar :show-driver-store="showDriverStore" :agent-driver-update-count="toolbarAgentDriverUpdateCount" @toggle-driver-store="showDriverStore = true" @close-driver-store="showDriverStore = false" @save-tab="handleSaveTab" />
-              <DriverStorePage v-if="showDriverStore" class="flex-1 min-h-0" :update-notifications-enabled="updateNotificationsEnabled" @update-count-change="updateAgentDriverUpdateCount" />
-              <div v-else-if="activeTab" class="flex flex-col flex-1 min-h-0">
+              <AppTabBar
+                :driver-store-open="driverStoreTabOpen"
+                :driver-store-active="driverStoreActive"
+                :agent-driver-update-count="toolbarAgentDriverUpdateCount"
+                @activate-driver-store="
+                  driverStoreTabOpen = true;
+                  driverStoreActive = true;
+                "
+                @activate-tab="driverStoreActive = false"
+                @close-driver-store="
+                  driverStoreTabOpen = false;
+                  driverStoreActive = false;
+                "
+                @save-tab="handleSaveTab"
+              />
+              <DriverStorePage v-if="driverStoreTabOpen" v-show="driverStoreActive" class="flex-1 min-h-0" :update-notifications-enabled="updateNotificationsEnabled" @update-count-change="updateAgentDriverUpdateCount" />
+              <div v-if="activeTab" v-show="!driverStoreActive" class="flex flex-col flex-1 min-h-0">
                 <EditorToolbar
                   v-if="activeTab.mode === 'query' && !isPreviewTab(activeTab)"
                   :active-tab="activeTab"
@@ -1609,7 +1630,8 @@ onUnmounted(() => {
           "
           @open-driver-store="
             setConnectionDialogOpen(false);
-            showDriverStore = true;
+            driverStoreTabOpen = true;
+            driverStoreActive = true;
           "
           @open-lineage-target="openLineageTarget"
           @open-database-search-target="openDatabaseSearchTarget"
diff --git a/apps/desktop/src/components/layout/AppTabBar.vue b/apps/desktop/src/components/layout/AppTabBar.vue
index 4b4f8c4703..80e6544733 100644
--- a/apps/desktop/src/components/layout/AppTabBar.vue
+++ b/apps/desktop/src/components/layout/AppTabBar.vue
@@ -19,12 +19,14 @@ import { useToast } from "@/composables/useToast";
 import type { QueryTab } from "@/types/database";
 
 const props = defineProps<{
-  showDriverStore?: boolean;
+  driverStoreOpen?: boolean;
+  driverStoreActive?: boolean;
   agentDriverUpdateCount?: number;
 }>();
 
 const emit = defineEmits<{
-  "toggle-driver-store": [];
+  "activate-tab": [];
+  "activate-driver-store": [];
   "close-driver-store": [];
   "save-tab": [tabId: string];
 }>();
@@ -172,7 +174,7 @@ watch(
 );
 
 watch(
-  () => props.showDriverStore,
+  () => props.driverStoreActive,
   (show) => {
     if (!show) return;
     nextTick(() => {
@@ -189,7 +191,7 @@ watch(
 
 function tabColorStyle(tab: QueryTab) {
   const color = connectionColor(tab.connectionId);
-  const isActive = tab.id === queryStore.activeTabId && !props.showDriverStore;
+  const isActive = tab.id === queryStore.activeTabId && !props.driverStoreActive;
   const isClassic = settingsStore.editorSettings.appLayout === "classic";
   if (!color) {
     if (isClassic) {
@@ -294,12 +296,12 @@ function activateTab(tabId: string) {
   dispatchBeforeTabSwitch(tabId);
   tabScrollBehavior.value = "auto";
   queryStore.activeTabId = tabId;
-  emit("close-driver-store");
+  emit("activate-tab");
 }
 </script>
 
 <template>
-  <div v-if="queryStore.tabs.length > 0 || showDriverStore" class="relative flex border-b shrink-0" :class="settingsStore.editorSettings.appLayout === 'classic' ? 'h-9 items-stretch bg-muted' : 'h-10 items-center bg-background px-2'">
+  <div v-if="queryStore.tabs.length > 0 || driverStoreOpen" class="relative flex border-b shrink-0" :class="settingsStore.editorSettings.appLayout === 'classic' ? 'h-9 items-stretch bg-muted' : 'h-10 items-center bg-background px-2'">
     <div class="app-tab-strip relative h-full min-w-0 flex-1">
       <div v-if="showTabOverflowControls" class="app-tab-scrollbar" :class="{ 'app-tab-scrollbar--dragging': isScrollbarDragging }" @pointerdown="startScrollbarDrag">
         <div class="app-tab-scrollbar__thumb" :style="tabScrollbarThumbStyle" />
@@ -313,11 +315,11 @@ function activateTab(tabId: string) {
                   class="group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
                   :class="
                     settingsStore.editorSettings.appLayout === 'classic'
-                      ? [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-full border-r border-border/80 font-medium dark:border-border/45', tab.id === queryStore.activeTabId && !showDriverStore ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
-                      : [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-7 rounded-md border', tab.id === queryStore.activeTabId && !showDriverStore ? 'text-foreground font-medium' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
+                      ? [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-full border-r border-border/80 font-medium dark:border-border/45', tab.id === queryStore.activeTabId && !driverStoreActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
+                      : [compactTabTitle ? 'min-w-24' : 'min-w-38', 'h-7 rounded-md border', tab.id === queryStore.activeTabId && !driverStoreActive ? 'text-foreground font-medium' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
                   "
                   :style="[tabColorStyle(tab), tabDropStyle(tab.id)]"
-                  :data-active-tab="tab.id === queryStore.activeTabId && !showDriverStore"
+                  :data-active-tab="tab.id === queryStore.activeTabId && !driverStoreActive"
                   @click="handleTabClick(tab)"
                   @dblclick.stop="startRenameTab(tab)"
                   @mousedown.middle.prevent="queryStore.closeTab(tab.id)"
@@ -379,12 +381,16 @@ function activateTab(tabId: string) {
 
         <!-- Driver Store Tab -->
         <div
-          v-if="showDriverStore"
+          v-if="driverStoreOpen"
           data-driver-store-tab
           class="group flex min-w-38 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
-          :class="settingsStore.editorSettings.appLayout === 'classic' ? ['h-full border-r border-border/80 dark:border-border/45 bg-background text-foreground font-medium'] : ['h-7 rounded-md border text-foreground font-medium', 'border-ring']"
-          :style="settingsStore.editorSettings.appLayout === 'classic' ? { boxShadow: '0 1px 0 0 var(--color-background)' } : {}"
-          @click="emit('toggle-driver-store')"
+          :class="
+            settingsStore.editorSettings.appLayout === 'classic'
+              ? ['h-full border-r border-border/80 dark:border-border/45 font-medium', driverStoreActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
+              : ['h-7 rounded-md border font-medium', driverStoreActive ? 'border-ring text-foreground' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
+          "
+          :style="settingsStore.editorSettings.appLayout === 'classic' && driverStoreActive ? { boxShadow: '0 1px 0 0 var(--color-background)' } : {}"
+          @click="emit('activate-driver-store')"
         >
           <span class="shrink-0 text-amber-600 dark:text-amber-400">
             <Package class="h-3.5 w-3.5" />