github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-29 08:11:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use icons for tab mode and Navicat-style tab titles

Browse Source 
Replace text badges (SQL/表) with icons (Code2/Table2), remove
connection color dot, and adopt table@database.schema naming.
This commit is contained in:
t8y2
2026-05-09 00:21:56 +08:00
parent 70b55fe49a
commit 9ea098bd57
2 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/AppTabBar.vue
+10 -15
View File
@@ -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)"
src/lib/tabPresentation.ts
+5 -4
View File
@@ -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;
}