From 28f8c88ea9f365be73cddc12491bd94fd6541ad6 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sun, 10 May 2026 09:54:21 +0800
Subject: [PATCH] feat(ui): refine panel and tab chrome

---
 src/App.vue                           |  8 ++++----
 src/components/editor/AiAssistant.vue |  2 +-
 src/components/layout/AppSidebar.vue  |  4 ++--
 src/components/layout/AppTabBar.vue   | 18 +++++++++---------
 src/styles/globals.css                |  7 +++++++
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb011b7be7..186feca95f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -511,7 +511,7 @@ onUnmounted(() => {
           @open-sql-file="dialogs.showSqlFileDialog.value = true"
         />
 
-        <div class="flex-1 flex min-h-0 gap-1 bg-muted/35 p-1">
+        <div class="app-panel-gutter flex-1 flex min-h-0 gap-1 p-1">
           <AppSidebar
             :sidebar-width="sidebarWidth"
             @import="dialogs.onImportClick"
@@ -519,7 +519,7 @@ onUnmounted(() => {
             @start-resize="startSidebarResize"
           />
 
-          <div class="flex-1 min-w-0 overflow-hidden rounded-md border bg-background">
+          <div class="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 />
               <div v-if="activeTab" class="flex flex-col flex-1 min-h-0">
@@ -590,7 +590,7 @@ onUnmounted(() => {
 
           <div
             v-if="showAiPanel"
-            class="h-full shrink-0 relative overflow-hidden rounded-md border bg-background"
+            class="h-full shrink-0 relative overflow-hidden rounded-md border border-border/80 bg-background"
             :style="{ width: aiPanelWidth + 'px' }"
           >
             <div class="panel-resize-handle panel-resize-handle--left" @mousedown="startAiPanelResize" />
@@ -608,7 +608,7 @@ onUnmounted(() => {
 
           <div
             v-if="showHistory"
-            class="h-full shrink-0 relative overflow-hidden rounded-md border bg-background"
+            class="h-full shrink-0 relative overflow-hidden rounded-md border border-border/80 bg-background"
             :style="{ width: historyWidth + 'px' }"
           >
             <div class="panel-resize-handle panel-resize-handle--left" @mousedown="startHistoryResize" />
diff --git a/src/components/editor/AiAssistant.vue b/src/components/editor/AiAssistant.vue
index e0bb72843c..65910b3f13 100644
--- a/src/components/editor/AiAssistant.vue
+++ b/src/components/editor/AiAssistant.vue
@@ -463,7 +463,7 @@ function formatInlineText(text: string): string {
 
 <template>
   <div class="flex h-full min-h-0 flex-col overflow-hidden">
-    <div class="h-9 flex items-center gap-2 border-b px-3 shrink-0">
+    <div class="h-10 flex items-center gap-2 border-b px-3 shrink-0">
       <span class="flex-1 truncate text-xs font-medium">{{ chatTitle }}</span>
       <Button variant="ghost" size="icon" class="h-6 w-6" @click="startNewChat" :title="t('ai.newChat')">
         <MessageSquarePlus class="h-3.5 w-3.5" />
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index 0dc7446883..ac9fa871c1 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -32,11 +32,11 @@ async function refreshTree() {
 
 <template>
   <div
-    class="h-full shrink-0 relative select-none overflow-hidden rounded-md border bg-background"
+    class="h-full shrink-0 relative select-none overflow-hidden rounded-md border border-border/80 bg-background"
     :style="{ width: sidebarWidth + 'px' }"
   >
     <div class="h-full flex flex-col overflow-hidden">
-      <div class="h-9 flex items-center px-3 text-xs font-medium text-muted-foreground border-b bg-muted/20">
+      <div class="h-10 flex items-center px-3 text-xs font-medium text-muted-foreground border-b bg-muted/20">
         {{ t("sidebar.connections") }}
         <span class="flex-1" />
         <Tooltip>
diff --git a/src/components/layout/AppTabBar.vue b/src/components/layout/AppTabBar.vue
index ff9f0c98e9..9e5b2a5438 100644
--- a/src/components/layout/AppTabBar.vue
+++ b/src/components/layout/AppTabBar.vue
@@ -48,18 +48,18 @@ function tabColorStyle(tab: QueryTab) {
   const color = connectionColor(tab.connectionId);
   const isActive = tab.id === queryStore.activeTabId;
   if (!color) {
-    return isActive ? { boxShadow: "0 1px 0 0 var(--color-background)" } : undefined;
+    return isActive ? { borderColor: "var(--ring)" } : undefined;
   }
 
   return {
-    backgroundColor: hexToRgba(color, isActive ? 0.16 : 0.07),
-    boxShadow: isActive ? `inset 0 -2px 0 ${color}` : undefined,
+    backgroundColor: hexToRgba(color, isActive ? 0.16 : 0.09),
+    borderColor: isActive ? hexToRgba(color, 0.72) : hexToRgba(color, 0.18),
   };
 }
 </script>
 
 <template>
-  <div v-if="queryStore.tabs.length > 0" class="relative h-9 flex items-stretch border-b bg-muted shrink-0">
+  <div v-if="queryStore.tabs.length > 0" class="relative h-10 flex items-center border-b bg-background px-2 shrink-0">
     <button
       v-if="canScrollLeft"
       class="absolute left-0 z-10 h-full pl-1 pr-6 bg-linear-to-r from-background from-40% to-transparent text-muted-foreground hover:text-foreground"
@@ -70,20 +70,20 @@ function tabColorStyle(tab: QueryTab) {
     </button>
     <div
       ref="tabsContainerRef"
-      class="flex-1 flex items-center overflow-x-auto min-w-0"
+      class="flex-1 flex items-center gap-1.5 overflow-x-auto min-w-0"
       style="-ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch"
       @scroll="updateScrollButtons"
     >
       <ContextMenu v-for="tab in queryStore.tabs" :key="tab.id">
-        <ContextMenuTrigger class="h-full">
+        <ContextMenuTrigger>
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="group flex min-w-38 items-center gap-1 px-2 h-full text-xs cursor-pointer transition-colors whitespace-nowrap border-r border-border/50"
+                class="group flex h-7 min-w-38 items-center gap-1 rounded-md border px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
                 :class="
                   tab.id === queryStore.activeTabId
-                    ? 'bg-background text-foreground font-medium'
-                    : 'text-foreground/70 hover:text-foreground/90'
+                    ? 'text-foreground font-medium'
+                    : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90'
                 "
                 :style="tabColorStyle(tab)"
                 :data-active-tab="tab.id === queryStore.activeTabId"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 18520683b4..3a3d284032 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -162,6 +162,13 @@
 }
 
 /* Panel resize handles */
+.app-panel-gutter {
+  background: oklch(0.965 0 0);
+}
+.dark .app-panel-gutter {
+  background: oklch(0.18 0 0);
+}
+
 .panel-resize-handle {
   position: absolute;
   top: 0;