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

feat(connection): add connection colors and database tab labels

Browse Source
This commit is contained in:
t8y2
2026-04-30 13:18:15 +08:00
parent 5c546f68af
commit 1a60c5b7ac
7 changed files with 82 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/connection/ConnectionDialog.vue
+27
View File
@@ -36,6 +36,7 @@ const defaultForm = (): Omit<ConnectionConfig, "id"> => ({
username: "root",
password: "",
database: undefined,
color: "",
ssh_enabled: false,
ssh_host: "",
ssh_port: 22,
@@ -48,6 +49,16 @@ const defaultForm = (): Omit<ConnectionConfig, "id"> => ({
const form = ref(defaultForm());
const selectedType = ref("mysql");
const colorOptions = [
{ value: "", class: "bg-transparent border-dashed", labelKey: "connection.colorNone" },
{ value: "#22c55e", class: "bg-green-500", labelKey: "connection.colorGreen" },
{ value: "#eab308", class: "bg-yellow-500", labelKey: "connection.colorYellow" },
{ value: "#f97316", class: "bg-orange-500", labelKey: "connection.colorOrange" },
{ value: "#ef4444", class: "bg-red-500", labelKey: "connection.colorRed" },
{ value: "#3b82f6", class: "bg-blue-500", labelKey: "connection.colorBlue" },
{ value: "#a855f7", class: "bg-purple-500", labelKey: "connection.colorPurple" },
];
watch(() => props.editConfig, (config) => {
if (config) {
editingId.value = config.id;
@@ -59,6 +70,7 @@ watch(() => props.editConfig, (config) => {
username: config.username,
password: config.password,
database: config.database,
color: config.color || "",
ssh_enabled: config.ssh_enabled || false,
ssh_host: config.ssh_host || "",
ssh_port: config.ssh_port || 22,
@@ -245,6 +257,21 @@ watch([() => editingId.value, () => open.value], () => {
</Select>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">{{ t('connection.color') }}</Label>
<div class="col-span-3 flex items-center gap-1.5">
<button
v-for="color in colorOptions"
:key="color.value || 'none'"
type="button"
class="h-6 w-6 rounded-full border ring-offset-background transition hover:scale-105"
:class="[color.class, form.color === color.value ? 'ring-2 ring-ring ring-offset-2' : 'border-border']"
:title="t(color.labelKey)"
@click="form.color = color.value"
/>
</div>
</div>
<!-- SQLite / DuckDB: file path only -->
<template v-if="form.db_type === 'sqlite' || form.db_type === 'duckdb'">
<div class="grid grid-cols-4 items-center gap-4">
src/components/sidebar/TreeItem.vue
+6
View File
@@ -223,6 +223,11 @@ const isConnected = computed(() =>
props.node.type === "connection" && !!props.node.connectionId && connectionStore.connectedIds.has(props.node.connectionId)
);
const connectionColor = computed(() => {
const connectionId = props.node.connectionId;
return connectionId ? connectionStore.getConfig(connectionId)?.color || "" : "";
});
const CHILDREN_PAGE_SIZE = 100;
const displayLimit = ref(CHILDREN_PAGE_SIZE);
@@ -269,6 +274,7 @@ async function showMore() {
<span v-else class="w-3.5 h-3.5 shrink-0" />
<DatabaseIcon v-if="node.type === 'connection'" :db-type="connectionStore.getConfig(node.connectionId || '')?.db_type || 'postgres'" class="w-3.5 h-3.5 shrink-0" />
<component v-else :is="getIconInfo(node)?.icon || Database" class="w-3.5 h-3.5 shrink-0" :class="getIconInfo(node)?.colorClass" />
<span v-if="node.type === 'connection' && connectionColor" class="h-3 w-1.5 rounded-full shrink-0" :style="{ backgroundColor: connectionColor }" />
<span class="truncate">{{ isGroupLabel(node) ? t(node.label) : node.label }}</span>
<span v-if="node.type === 'connection' && node.connectionId && connectionStore.connectedIds.has(node.connectionId)" class="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />
</div>