From cb7428b5a37764dd407070b879b7581501990121 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sun, 10 May 2026 09:37:02 +0800
Subject: [PATCH] feat(ui): refine app chrome layout

---
 src-tauri/tauri.conf.json                |  4 ++++
 src/App.vue                              |  8 ++++----
 src/components/layout/AppSidebar.vue     |  5 ++++-
 src/components/layout/AppToolbar.vue     | 24 ++++++++++++------------
 src/components/layout/WindowControls.vue |  6 +++---
 src/styles/globals.css                   | 23 +++++++++++++++--------
 6 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 717f902ae0..04caa062bc 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -21,6 +21,10 @@
         "fullscreen": false,
         "visible": false,
         "titleBarStyle": "Overlay",
+        "trafficLightPosition": {
+          "x": 16,
+          "y": 18
+        },
         "hiddenTitle": true
       }
     ],
diff --git a/src/App.vue b/src/App.vue
index 4d36909441..fb011b7be7 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">
+        <div class="flex-1 flex min-h-0 gap-1 bg-muted/35 p-1">
           <AppSidebar
             :sidebar-width="sidebarWidth"
             @import="dialogs.onImportClick"
@@ -519,7 +519,7 @@ onUnmounted(() => {
             @start-resize="startSidebarResize"
           />
 
-          <div class="flex-1 min-w-0">
+          <div class="flex-1 min-w-0 overflow-hidden rounded-md border 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 bg-background"
+            class="h-full shrink-0 relative overflow-hidden rounded-md border 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 bg-background"
+            class="h-full shrink-0 relative overflow-hidden rounded-md border bg-background"
             :style="{ width: historyWidth + 'px' }"
           >
             <div class="panel-resize-handle panel-resize-handle--left" @mousedown="startHistoryResize" />
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index 2f23c9a1af..0dc7446883 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -31,7 +31,10 @@ async function refreshTree() {
 </script>
 
 <template>
-  <div class="h-full shrink-0 relative select-none" :style="{ width: sidebarWidth + 'px' }">
+  <div
+    class="h-full shrink-0 relative select-none overflow-hidden rounded-md border 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">
         {{ t("sidebar.connections") }}
diff --git a/src/components/layout/AppToolbar.vue b/src/components/layout/AppToolbar.vue
index 164a44691e..711739ea41 100644
--- a/src/components/layout/AppToolbar.vue
+++ b/src/components/layout/AppToolbar.vue
@@ -55,12 +55,12 @@ function onToolbarDblClick(e: MouseEvent) {
 
 <template>
   <div
-    class="h-8 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0"
+    class="h-10 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0"
     :class="{ 'pl-17.5': isMac }"
     data-tauri-drag-region
     @dblclick="onToolbarDblClick"
   >
-    <Button variant="ghost" size="sm" class="h-7 px-2 text-xs gap-1" @click="emit('new-connection')">
+    <Button variant="ghost" size="sm" class="h-8 px-2 text-xs gap-1" @click="emit('new-connection')">
       <DatabaseZap class="h-3.5 w-3.5" />
       {{ t("toolbar.newConnection") }}
     </Button>
@@ -68,7 +68,7 @@ function onToolbarDblClick(e: MouseEvent) {
     <Button
       variant="ghost"
       size="sm"
-      class="h-7 px-2 text-xs gap-1"
+      class="h-8 px-2 text-xs gap-1"
       @click="emit('new-query')"
       :disabled="!hasConnections"
     >
@@ -79,7 +79,7 @@ function onToolbarDblClick(e: MouseEvent) {
     <Button
       variant="ghost"
       size="sm"
-      class="h-7 px-2 text-xs gap-1"
+      class="h-8 px-2 text-xs gap-1"
       @click="emit('open-transfer')"
       :disabled="!hasConnections"
     >
@@ -90,7 +90,7 @@ function onToolbarDblClick(e: MouseEvent) {
     <Button
       variant="ghost"
       size="sm"
-      class="h-7 px-2 text-xs gap-1"
+      class="h-8 px-2 text-xs gap-1"
       @click="emit('open-sql-file')"
       :disabled="!hasSqlFileConnections"
     >
@@ -102,7 +102,7 @@ function onToolbarDblClick(e: MouseEvent) {
 
     <Tooltip>
       <TooltipTrigger as-child>
-        <Button variant="ghost" size="icon" class="h-7 w-7" :disabled="checkingUpdates" @click="emit('check-updates')">
+        <Button variant="ghost" size="icon" class="h-8 w-8" :disabled="checkingUpdates" @click="emit('check-updates')">
           <Loader2 v-if="checkingUpdates" class="h-4 w-4 animate-spin" />
           <CloudDownload v-else class="h-4 w-4" />
         </Button>
@@ -115,7 +115,7 @@ function onToolbarDblClick(e: MouseEvent) {
         <Button
           variant="ghost"
           size="icon"
-          class="h-7 w-7"
+          class="h-8 w-8"
           :class="{ 'bg-accent': showHistory }"
           @click="emit('toggle-history')"
         >
@@ -130,7 +130,7 @@ function onToolbarDblClick(e: MouseEvent) {
         <Button
           variant="ghost"
           size="icon"
-          class="h-7 w-7"
+          class="h-8 w-8"
           :class="{ 'bg-accent': showAiPanel }"
           @click="emit('toggle-ai')"
         >
@@ -142,7 +142,7 @@ function onToolbarDblClick(e: MouseEvent) {
 
     <Tooltip>
       <TooltipTrigger as-child>
-        <Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('toggle-theme')">
+        <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('toggle-theme')">
           <Moon v-if="!isDark" class="h-4 w-4" />
           <Sun v-else class="h-4 w-4" />
         </Button>
@@ -152,7 +152,7 @@ function onToolbarDblClick(e: MouseEvent) {
 
     <Tooltip>
       <TooltipTrigger as-child>
-        <Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('toggle-locale')">
+        <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('toggle-locale')">
           <Globe class="h-4 w-4" />
         </Button>
       </TooltipTrigger>
@@ -161,7 +161,7 @@ function onToolbarDblClick(e: MouseEvent) {
 
     <Tooltip>
       <TooltipTrigger as-child>
-        <Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('open-github')">
+        <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('open-github')">
           <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
             <path
               d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.729.083-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.295 24 12 24 5.37 18.627 0 12 0z"
@@ -174,7 +174,7 @@ function onToolbarDblClick(e: MouseEvent) {
 
     <Tooltip>
       <TooltipTrigger as-child>
-        <Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('open-settings')">
+        <Button variant="ghost" size="icon" class="h-8 w-8" @click="emit('open-settings')">
           <Settings class="h-4 w-4" />
         </Button>
       </TooltipTrigger>
diff --git a/src/components/layout/WindowControls.vue b/src/components/layout/WindowControls.vue
index 6714e93792..f483e4d0d5 100644
--- a/src/components/layout/WindowControls.vue
+++ b/src/components/layout/WindowControls.vue
@@ -15,20 +15,20 @@ const emit = defineEmits<{
 <template>
   <div class="flex items-stretch -mr-2 ml-1">
     <button
-      class="inline-flex items-center justify-center w-11.5 h-8 hover:bg-foreground/10 transition-colors"
+      class="inline-flex items-center justify-center w-11.5 h-10 hover:bg-foreground/10 transition-colors"
       @click="emit('minimize')"
     >
       <Minus class="h-4 w-4" />
     </button>
     <button
-      class="inline-flex items-center justify-center w-11.5 h-8 hover:bg-foreground/10 transition-colors"
+      class="inline-flex items-center justify-center w-11.5 h-10 hover:bg-foreground/10 transition-colors"
       @click="emit('toggle-maximize')"
     >
       <Copy v-if="isMaximized" class="h-3.5 w-3.5" />
       <Square v-else class="h-3.5 w-3.5" />
     </button>
     <button
-      class="inline-flex items-center justify-center w-11.5 h-8 hover:bg-red-500 hover:text-white transition-colors"
+      class="inline-flex items-center justify-center w-11.5 h-10 hover:bg-red-500 hover:text-white transition-colors"
       @click="emit('close')"
     >
       <X class="h-4 w-4" />
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a59f704eb2..18520683b4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -166,21 +166,28 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 3px;
+  width: 7px;
   cursor: col-resize;
   z-index: 10;
   background: transparent;
 }
 .panel-resize-handle--right {
-  right: 0;
-  border-right: 1px solid var(--border);
+  right: -4px;
 }
 .panel-resize-handle--left {
-  left: 0;
-  border-left: 1px solid var(--border);
+  left: -4px;
 }
-.panel-resize-handle:hover,
-.panel-resize-handle:active {
+.panel-resize-handle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  background: var(--border);
+}
+.panel-resize-handle:hover::before,
+.panel-resize-handle:active::before {
   background: oklch(0.6 0.15 250);
 }
 
@@ -196,4 +203,4 @@
 .dark .cn-menu-translucent {
   background-color: oklch(0.205 0 0 / 0.82) !important;
   border-color: oklch(1 0 0 / 0.1) !important;
-}
\ No newline at end of file
+}