xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(grid): show connection name in data header

This commit is contained in:
LRcoding 2026-07-17 00:15:12 +08:00 committed by GitHub
parent 916aad66bf
commit 1a6d4df68f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/desktop/src/components/layout/ContentArea.vue
View File

@ -1218,10 +1218,13 @@ defineExpose({ focusSearch, refreshData, refreshQueryEditorCompletionCache, hand
<template v-else-if="activeTab.mode === 'data'">
<div class="flex-1 min-h-0 flex flex-col">
<div class="h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-2 text-xs">
<span class="inline-flex items-center rounded border border-border bg-muted/50 px-2 py-0.5 font-medium truncate">
<span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name">
{{ activeConnection.name }}
</span>
<span class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium">
{{ 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">
<span class="inline-flex max-w-56 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground">
<template v-if="activeTab.tableMeta?.schema">{{ activeTab.tableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }}
</span>
<span v-if="activeTab.mode === 'data' && activeTab.tableMeta" class="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-2 py-0.5 font-medium text-muted-foreground tabular-nums"> {{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }} </span>

31
packages/app-tests/dataTabHeaderConnection.test.ts vendored Normal file
View File

@ -0,0 +1,31 @@
import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import { test } from "vitest";
import { compileTemplate, parse } from "vue/compiler-sfc";
const contentAreaPath = "apps/desktop/src/components/layout/ContentArea.vue";
function dataModeTemplate(): string {
const source = readFileSync(contentAreaPath, "utf8");
const { descriptor, errors } = parse(source, { filename: contentAreaPath });
assert.deepEqual(errors, []);
assert.ok(descriptor.template);
const result = compileTemplate({ id: contentAreaPath, filename: contentAreaPath, source: descriptor.template.content });
assert.deepEqual(result.errors, []);
const start = descriptor.template.content.indexOf("activeTab.mode === 'data'");
const end = descriptor.template.content.indexOf("activeTab.mode === 'redis'", start);
assert.ok(start >= 0 && end > start, "ContentArea should keep a bounded data-mode template");
return descriptor.template.content.slice(start, end);
}
test("data tab header shows the active connection before the table context", () => {
const template = dataModeTemplate();
const connectionIndex = template.indexOf("data-data-header-connection");
const tableIndex = template.indexOf("activeTab.tableMeta?.tableName");
assert.ok(connectionIndex >= 0 && connectionIndex < tableIndex);
assert.match(template, /v-if="activeConnection\?\.name\?\.trim\(\)"/);
assert.match(template, /:title="activeConnection\.name"/);
assert.match(template, /data-data-header-connection class="[^"]*max-w-48[^"]*truncate/);
});