From 0b376c234f0d6f8f803cf72ecea651b8d880e2a8 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sun, 10 May 2026 09:18:04 +0800
Subject: [PATCH] feat(ui): add connection color tinting

---
 src/components/layout/AppTabBar.vue     | 21 +++++++++++++++++----
 src/components/layout/EditorToolbar.vue | 10 ++++++++++
 src/components/sidebar/TreeItem.vue     | 13 ++++++++++++-
 src/lib/color.ts                        | 18 ++++++++++++++++++
 4 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/color.ts

diff --git a/src/components/layout/AppTabBar.vue b/src/components/layout/AppTabBar.vue
index 7f769cccf..ff9f0c98e 100644
--- a/src/components/layout/AppTabBar.vue
+++ b/src/components/layout/AppTabBar.vue
@@ -12,7 +12,9 @@ import {
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { useQueryStore } from "@/stores/queryStore";
 import { useTabScroll } from "@/composables/useTabScroll";
-import { tabDisplayTitle, tabTooltipLines } from "@/lib/tabPresentation";
+import { connectionColor, tabDisplayTitle, tabTooltipLines } from "@/lib/tabPresentation";
+import { hexToRgba } from "@/lib/color";
+import type { QueryTab } from "@/types/database";
 
 const { t } = useI18n();
 const queryStore = useQueryStore();
@@ -41,6 +43,19 @@ watch(
     });
   },
 );
+
+function tabColorStyle(tab: QueryTab) {
+  const color = connectionColor(tab.connectionId);
+  const isActive = tab.id === queryStore.activeTabId;
+  if (!color) {
+    return isActive ? { boxShadow: "0 1px 0 0 var(--color-background)" } : undefined;
+  }
+
+  return {
+    backgroundColor: hexToRgba(color, isActive ? 0.16 : 0.07),
+    boxShadow: isActive ? `inset 0 -2px 0 ${color}` : undefined,
+  };
+}
 </script>
 
 <template>
@@ -70,9 +85,7 @@ watch(
                     ? 'bg-background text-foreground font-medium'
                     : 'text-foreground/70 hover:text-foreground/90'
                 "
-                :style="
-                  tab.id === queryStore.activeTabId ? { boxShadow: '0 1px 0 0 var(--color-background)' } : undefined
-                "
+                :style="tabColorStyle(tab)"
                 :data-active-tab="tab.id === queryStore.activeTabId"
                 @click="queryStore.activeTabId = tab.id"
                 @mousedown.middle.prevent="queryStore.closeTab(tab.id)"
diff --git a/src/components/layout/EditorToolbar.vue b/src/components/layout/EditorToolbar.vue
index b0af6cc24..e4d2eea95 100644
--- a/src/components/layout/EditorToolbar.vue
+++ b/src/components/layout/EditorToolbar.vue
@@ -24,6 +24,7 @@ import { useSchemaOptions } from "@/composables/useSchemaOptions";
 import { connectionIconType } from "@/lib/connectionPresentation";
 import { isDefaultDatabase } from "@/lib/defaultDatabase";
 import { connectionDisplayName } from "@/lib/tabPresentation";
+import { hexToRgba } from "@/lib/color";
 import type { QueryTab, ConnectionConfig } from "@/types/database";
 
 const props = defineProps<{
@@ -72,6 +73,14 @@ const activeSchemaOptions = computed(() => {
 });
 
 const isActiveDatabaseDefault = computed(() => isDefaultDatabase(props.activeConnection, activeDatabaseValue.value));
+const toolbarStyle = computed(() => {
+  const color = props.activeConnection?.color;
+  if (!color) return undefined;
+  return {
+    backgroundColor: hexToRgba(color, 0.1),
+    boxShadow: `inset 0 1px 0 ${hexToRgba(color, 0.18)}`,
+  };
+});
 
 function databaseDisplayName(database: string): string {
   const connection = props.activeConnection;
@@ -83,6 +92,7 @@ function databaseDisplayName(database: string): string {
 <template>
   <div
     class="h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-1 text-xs text-muted-foreground relative z-10"
+    :style="toolbarStyle"
   >
     <div class="flex items-center gap-0.5">
       <Tooltip>
diff --git a/src/components/sidebar/TreeItem.vue b/src/components/sidebar/TreeItem.vue
index 116251e21..84e76891b 100644
--- a/src/components/sidebar/TreeItem.vue
+++ b/src/components/sidebar/TreeItem.vue
@@ -80,6 +80,7 @@ import {
   usesFetchFirst,
 } from "@/lib/databaseCapabilities";
 import { treeNodeRowAction } from "@/lib/treeNodeClick";
+import { hexToRgba } from "@/lib/color";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import { isTauriRuntime } from "@/lib/tauriRuntime";
 import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
@@ -1091,6 +1092,16 @@ const connectionColor = computed(() => {
   const connectionId = props.node.connectionId;
   return connectionId ? connectionStore.getConfig(connectionId)?.color || "" : "";
 });
+const isActiveConnectionScope = computed(
+  () => !!props.node.connectionId && connectionStore.activeConnectionId === props.node.connectionId,
+);
+const rowStyle = computed(() => {
+  const color = connectionColor.value;
+  return {
+    paddingLeft,
+    backgroundColor: hexToRgba(color, isActiveConnectionScope.value ? 0.14 : 0.08),
+  };
+});
 
 const CHILDREN_PAGE_SIZE = 100;
 const displayLimit = ref(CHILDREN_PAGE_SIZE);
@@ -1299,7 +1310,7 @@ const isDragging = computed(() => dragState.active && dragState.draggedId === pr
             'ring-1 ring-primary/50 bg-primary/5': showDropInside,
             'opacity-50': isDragging,
           }"
-          :style="{ paddingLeft }"
+          :style="rowStyle"
           @click="onClick"
           @mousedown="isDraggable ? startDrag($event, node.id, node.type) : undefined"
           @mousemove="isDropTarget ? updateTarget($event, node.id, node.type) : undefined"
diff --git a/src/lib/color.ts b/src/lib/color.ts
new file mode 100644
index 000000000..c83f607c8
--- /dev/null
+++ b/src/lib/color.ts
@@ -0,0 +1,18 @@
+export function hexToRgba(color: string | undefined, alpha: number): string | undefined {
+  if (!color) return undefined;
+  const hex = color.trim().replace(/^#/, "");
+  const normalized =
+    hex.length === 3
+      ? hex
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : hex;
+  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return undefined;
+
+  const value = Number.parseInt(normalized, 16);
+  const r = (value >> 16) & 255;
+  const g = (value >> 8) & 255;
+  const b = value & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}