From 9ea098bd57345d46c60e4bbf39f4a85bab06ffaf Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 9 May 2026 00:21:56 +0800
Subject: [PATCH] refactor: use icons for tab mode and Navicat-style tab titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace text badges (SQL/表) with icons (Code2/Table2), remove
connection color dot, and adopt table@database.schema naming.
---
 src/components/layout/AppTabBar.vue | 25 ++++++++++---------------
 src/lib/tabPresentation.ts          |  9 +++++----
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/layout/AppTabBar.vue b/src/components/layout/AppTabBar.vue
index 36ea4f85ab..88b5ac4f7c 100644
--- a/src/components/layout/AppTabBar.vue
+++ b/src/components/layout/AppTabBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
-import { X, Pin, ChevronRight } from "lucide-vue-next";
+import { X, Pin, ChevronRight, Table2, Code2 } from "lucide-vue-next";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -12,7 +12,7 @@ import {
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { useQueryStore } from "@/stores/queryStore";
 import { useTabScroll } from "@/composables/useTabScroll";
-import { connectionColor, tabDisplayTitle, tabTooltipLines, tabModeLabel } from "@/lib/tabPresentation";
+import { connectionColor, tabDisplayTitle, tabTooltipLines } from "@/lib/tabPresentation";
 
 const { t } = useI18n();
 const queryStore = useQueryStore();
@@ -78,9 +78,14 @@ watch(
                 @mousedown.middle.prevent="queryStore.closeTab(tab.id)"
               >
                 <span
-                  class="h-1.5 w-1.5 rounded-full shrink-0"
-                  :style="{ backgroundColor: connectionColor(tab.connectionId) || '#9ca3af' }"
-                />
+                  class="shrink-0"
+                  :class="
+                    tab.mode === 'data' ? 'text-emerald-600 dark:text-emerald-400' : 'text-blue-600 dark:text-blue-400'
+                  "
+                >
+                  <Table2 v-if="tab.mode === 'data'" class="h-3.5 w-3.5" />
+                  <Code2 v-else class="h-3.5 w-3.5" />
+                </span>
                 <span class="min-w-0 truncate flex-1">{{ tabDisplayTitle(tab) }}</span>
                 <Tooltip>
                   <TooltipTrigger as-child>
@@ -94,16 +99,6 @@ watch(
                   </TooltipTrigger>
                   <TooltipContent>{{ tab.pinned ? t("contextMenu.unpin") : t("contextMenu.pin") }}</TooltipContent>
                 </Tooltip>
-                <span
-                  class="shrink-0 rounded border px-1 text-[10px] leading-4"
-                  :class="
-                    tab.mode === 'data'
-                      ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300'
-                      : 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300'
-                  "
-                >
-                  {{ tabModeLabel(tab) }}
-                </span>
                 <button
                   class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0"
                   @click.stop="queryStore.closeTab(tab.id)"
diff --git a/src/lib/tabPresentation.ts b/src/lib/tabPresentation.ts
index 7d0b6cee6a..d2ee4d056e 100644
--- a/src/lib/tabPresentation.ts
+++ b/src/lib/tabPresentation.ts
@@ -30,16 +30,17 @@ export function tabDisplayTitle(tab: QueryTab): string {
   const database = databaseDisplayNameForTab(tab.connectionId, tab.database);
   if (isPreviewTab(tab)) return tab.title;
   if (tab.mode === "data" && tab.tableMeta?.tableName) {
-    return tab.tableMeta.tableName;
+    const suffix = tab.tableMeta.schema ? `@${database}.${tab.tableMeta.schema}` : `@${database}`;
+    return `${tab.tableMeta.tableName}${suffix}`;
   }
   if (tab.mode === "query") {
-    return `${connectionDisplayName(tab.connectionId)} | ${database}`;
+    return `${connectionDisplayName(tab.connectionId)}@${database}`;
   }
   if (tab.mode === "mongo" && tab.sql) {
-    return `${database} | ${tab.sql}`;
+    return `${tab.sql}@${database}`;
   }
   if (tab.mode === "redis") {
-    return `${connectionDisplayName(tab.connectionId)} | ${database}`;
+    return `${connectionDisplayName(tab.connectionId)}@${database}`;
   }
   return tab.title;
 }