From 1fd1cb10eb5cefad0c85521afd1468fef492bad2 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 9 May 2026 17:36:09 +0800
Subject: [PATCH] =?UTF-8?q?perf(sidebar):=20=E4=BC=98=E5=8C=96=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E6=90=9C=E7=B4=A2=E5=8C=B9=E9=85=8D=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sidebar/ConnectionTree.vue | 69 ++++++++++++++++-------
 src/lib/sidebarSearch.ts                  | 50 ++++++++++++++++
 tests/sidebarSearch.test.ts               | 23 ++++++++
 3 files changed, 122 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/sidebarSearch.ts
 create mode 100644 tests/sidebarSearch.test.ts

diff --git a/src/components/sidebar/ConnectionTree.vue b/src/components/sidebar/ConnectionTree.vue
index e92cec1fc6..128657d7b4 100644
--- a/src/components/sidebar/ConnectionTree.vue
+++ b/src/components/sidebar/ConnectionTree.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { Search, X, ListFilter, Check, FolderPlus } from "lucide-vue-next";
 import { useConnectionStore } from "@/stores/connectionStore";
 import type { TreeNode } from "@/types/database";
+import { matchSidebarLabel } from "@/lib/sidebarSearch";
 import TreeItem from "./TreeItem.vue";
 import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
 import {
@@ -18,7 +19,27 @@ import {
 const { t } = useI18n();
 const store = useConnectionStore();
 const searchQuery = ref("");
+const deferredSearchQuery = ref("");
 const selectedTypes = ref<string[]>([]);
+let searchTimer: number | undefined;
+
+watch(
+  searchQuery,
+  (value) => {
+    const normalized = value.trim().toLowerCase();
+    window.clearTimeout(searchTimer);
+
+    if (!normalized) {
+      deferredSearchQuery.value = "";
+      return;
+    }
+
+    searchTimer = window.setTimeout(() => {
+      deferredSearchQuery.value = normalized;
+    }, 120);
+  },
+  { flush: "sync" },
+);
 
 const isFiltering = computed(() => !!searchQuery.value.trim() || hasTypeFilter.value);
 
@@ -55,28 +76,36 @@ function clearTypeFilter() {
   selectedTypes.value = [];
 }
 
-function fuzzyMatch(text: string, query: string): boolean {
-  let j = 0;
-  for (let i = 0; i < text.length && j < query.length; i++) {
-    if (text[i] === query[j]) j++;
-  }
-  return j === query.length;
-}
+const normalizedLabelCache = new WeakMap<TreeNode, { label: string; normalized: string }>();
 
-function matchesQuery(node: TreeNode, q: string): boolean {
-  const label = node.label.toLowerCase();
-  if (label.includes(q) || fuzzyMatch(label, q)) return true;
-  return node.children?.some((child) => matchesQuery(child, q)) ?? false;
+function normalizedLabel(node: TreeNode): string {
+  const cached = normalizedLabelCache.get(node);
+  if (cached?.label === node.label) return cached.normalized;
+
+  const normalized = node.label.toLowerCase();
+  normalizedLabelCache.set(node, { label: node.label, normalized });
+  return normalized;
 }
 
 function filterTree(nodes: TreeNode[], q: string): TreeNode[] {
-  return nodes
-    .filter((node) => matchesQuery(node, q))
-    .map((node) => {
-      if (!node.children) return node;
-      const filtered = filterTree(node.children, q);
-      return { ...node, children: filtered, isExpanded: filtered.length > 0 };
-    });
+  const filteredNodes: TreeNode[] = [];
+
+  for (const node of nodes) {
+    const label = normalizedLabel(node);
+    const selfMatches = !!matchSidebarLabel(label, q);
+    const filteredChildren = node.children ? filterTree(node.children, q) : undefined;
+
+    if (selfMatches || (filteredChildren && filteredChildren.length > 0)) {
+      if (!node.children) {
+        filteredNodes.push(node);
+      } else {
+        const children = filteredChildren ?? [];
+        filteredNodes.push({ ...node, children, isExpanded: children.length > 0 });
+      }
+    }
+  }
+
+  return filteredNodes;
 }
 
 function matchesType(node: TreeNode): boolean {
@@ -102,7 +131,7 @@ const filteredNodes = computed(() => {
     });
   }
 
-  const q = searchQuery.value.trim().toLowerCase();
+  const q = deferredSearchQuery.value;
   if (q) {
     nodes = filterTree(nodes, q);
   }
diff --git a/src/lib/sidebarSearch.ts b/src/lib/sidebarSearch.ts
new file mode 100644
index 0000000000..d336cfa99d
--- /dev/null
+++ b/src/lib/sidebarSearch.ts
@@ -0,0 +1,50 @@
+export type SidebarSearchMatchKind = "exact" | "prefix" | "word-prefix" | "substring" | "abbreviation" | "fuzzy";
+
+export interface SidebarSearchMatch {
+  kind: SidebarSearchMatchKind;
+  score: number;
+}
+
+function isWordBoundary(text: string, index: number): boolean {
+  if (index === 0) return true;
+  const prev = text[index - 1];
+  return prev === "_" || prev === "-" || prev === "." || prev === " " || prev === "/" || prev === "\\";
+}
+
+function matchesWordPrefix(text: string, query: string): boolean {
+  for (let i = 0; i < text.length; i++) {
+    if (isWordBoundary(text, i) && text.startsWith(query, i)) return true;
+  }
+  return false;
+}
+
+function matchesAbbreviation(text: string, query: string): boolean {
+  let j = 0;
+  for (let i = 0; i < text.length && j < query.length; i++) {
+    if (isWordBoundary(text, i) && text[i] === query[j]) j++;
+  }
+  return j === query.length;
+}
+
+function matchesSubsequence(text: string, query: string): boolean {
+  if (query.length < 2 || query.length > text.length) return false;
+
+  let j = 0;
+  for (let i = 0; i < text.length && j < query.length; i++) {
+    if (text[i] === query[j]) j++;
+  }
+  return j === query.length;
+}
+
+export function matchSidebarLabel(label: string, query: string): SidebarSearchMatch | null {
+  if (!query) return null;
+
+  if (label === query) return { kind: "exact", score: 100 };
+  if (label.startsWith(query)) return { kind: "prefix", score: 90 };
+  if (matchesWordPrefix(label, query)) return { kind: "word-prefix", score: 80 };
+  if (label.includes(query)) return { kind: "substring", score: 70 };
+  if (query.length >= 2 && matchesAbbreviation(label, query)) return { kind: "abbreviation", score: 60 };
+  if (matchesSubsequence(label, query)) return { kind: "fuzzy", score: 40 };
+
+  return null;
+}
diff --git a/tests/sidebarSearch.test.ts b/tests/sidebarSearch.test.ts
new file mode 100644
index 0000000000..7176967abc
--- /dev/null
+++ b/tests/sidebarSearch.test.ts
@@ -0,0 +1,23 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { matchSidebarLabel } from "../src/lib/sidebarSearch.ts";
+
+test("matches exact and prefix labels first", () => {
+  assert.equal(matchSidebarLabel("orders", "orders")?.kind, "exact");
+  assert.equal(matchSidebarLabel("orders_archive", "ord")?.kind, "prefix");
+});
+
+test("matches word prefixes in underscored and dotted identifiers", () => {
+  assert.equal(matchSidebarLabel("user_orders", "ord")?.kind, "word-prefix");
+  assert.equal(matchSidebarLabel("sales.customer_profile", "cust")?.kind, "word-prefix");
+});
+
+test("matches DataGrip-style abbreviations by identifier word boundaries", () => {
+  assert.equal(matchSidebarLabel("additional_country", "ac")?.kind, "abbreviation");
+  assert.equal(matchSidebarLabel("sales.customer_profile", "scp")?.kind, "abbreviation");
+});
+
+test("keeps one-character fuzzy matches disabled", () => {
+  assert.equal(matchSidebarLabel("orders", "r")?.kind, "substring");
+  assert.equal(matchSidebarLabel("orders", "x"), null);
+});