From 7a71c4866d6d5eb692ca48f5a5bf9d8b174dcba7 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 5 May 2026 16:55:14 +0800
Subject: [PATCH] feat(ContentArea): enhance tab display with improved styling
 for table name and database info

---
 src/components/layout/ContentArea.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/ContentArea.vue b/src/components/layout/ContentArea.vue
index 8125716827..88fc8b1223 100644
--- a/src/components/layout/ContentArea.vue
+++ b/src/components/layout/ContentArea.vue
@@ -219,8 +219,14 @@ const hasNumericData = computed(() => {
             <Table2 class="h-3.5 w-3.5" />
             {{ t("tabs.tableData") }}
           </span>
-          <span class="font-medium truncate">{{ activeTab.tableMeta?.tableName || activeTab.title }}</span>
-          <span class="text-muted-foreground truncate">
+          <span
+            class="inline-flex items-center rounded border border-border bg-muted/50 px-2 py-0.5 font-medium truncate"
+          >
+            {{ activeTab.tableMeta?.tableName || activeTab.title }}
+          </span>
+          <span
+            class="inline-flex items-center rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground truncate"
+          >
             {{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database) }}
             <template v-if="activeTab.tableMeta?.schema"> &middot; {{ activeTab.tableMeta.schema }}</template>
           </span>