From c44cbfbc1775d2d7935b3fdfe086908398d31e8d Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 7 May 2025 09:59:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E7=9A=84=E8=BF=9E=E6=8E=A5=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8D=B3=E6=97=B6=E6=90=9C=E7=B4=A2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/locales/en-US.json      |  4 +-
 packages/frontend/src/locales/ja-JP.json      |  2 +
 packages/frontend/src/locales/zh-CN.json      |  4 +-
 packages/frontend/src/views/DashboardView.vue | 48 ++++++++++++++-----
 4 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/locales/en-US.json b/packages/frontend/src/locales/en-US.json
index 075ae0a..5e4fcd5 100644
--- a/packages/frontend/src/locales/en-US.json
+++ b/packages/frontend/src/locales/en-US.json
@@ -1085,7 +1085,9 @@
     "filterTags": {
       "all": "All Tags"
     },
-    "noConnectionsWithTag": "No connections found with this tag"
+    "noConnectionsWithTag": "No connections found with this tag",
+    "noConnectionsMatchSearch": "No connections match your search.",
+    "searchConnectionsPlaceholder": "Search connections..."
   },
   "terminalTabBar": {
     "selectServerTitle": "Select server to connect"
diff --git a/packages/frontend/src/locales/ja-JP.json b/packages/frontend/src/locales/ja-JP.json
index c7d9eb1..85acee1 100644
--- a/packages/frontend/src/locales/ja-JP.json
+++ b/packages/frontend/src/locales/ja-JP.json
@@ -199,6 +199,8 @@
             "all": "すべてのタグ"
         },
         "noConnectionsWithTag": "このタグには接続記録がありません",
+        "noConnectionsMatchSearch": "検索条件に一致する接続はありません。",
+        "searchConnectionsPlaceholder": "接続を検索...",
         "viewAllConnections": "すべての接続を表示",
         "viewFullAuditLog": "完全な監査ログを表示"
     },
diff --git a/packages/frontend/src/locales/zh-CN.json b/packages/frontend/src/locales/zh-CN.json
index a68ddf2..7d506a9 100644
--- a/packages/frontend/src/locales/zh-CN.json
+++ b/packages/frontend/src/locales/zh-CN.json
@@ -1088,7 +1088,9 @@
     "filterTags": {
       "all": "所有标签"
     },
-    "noConnectionsWithTag": "该标签下没有连接记录"
+    "noConnectionsWithTag": "该标签下没有连接记录",
+    "noConnectionsMatchSearch": "没有连接匹配搜索条件",
+    "searchConnectionsPlaceholder": "搜索连接..."
   },
   "terminalTabBar": {
     "selectServerTitle": "选择要连接的服务器"
diff --git a/packages/frontend/src/views/DashboardView.vue b/packages/frontend/src/views/DashboardView.vue
index f0d293e..c4e94d4 100644
--- a/packages/frontend/src/views/DashboardView.vue
+++ b/packages/frontend/src/views/DashboardView.vue
@@ -43,9 +43,10 @@ const getInitialSelectedTagId = (): number | null => {
   return storedValue && storedValue !== 'null' ? parseInt(storedValue, 10) : null;
 };
 const selectedTagId = ref<number | null>(getInitialSelectedTagId());
-
+const searchQuery = ref(''); // +++ 新增搜索查询状态 +++
+ 
 const maxRecentLogs = 5;
-
+ 
 const sortOptions: { value: SortField; labelKey: string }[] = [
   { value: 'last_connected_at', labelKey: 'dashboard.sortOptions.lastConnected' },
   { value: 'name', labelKey: 'dashboard.sortOptions.name' },
@@ -60,14 +61,27 @@ const filteredAndSortedConnections = computed(() => {
   const sortOrderVal = localSortOrder.value;
   const factor = sortOrderVal === 'desc' ? -1 : 1;
   const filterTagId = selectedTagId.value;
-
+  const query = searchQuery.value.toLowerCase().trim(); // +++ 获取搜索查询 +++
+ 
   // 1. Filter by selected tag
-  const filtered = filterTagId === null
+  let filteredByTag = filterTagId === null
     ? [...connections.value] // No tag selected, show all
     : connections.value.filter(conn => conn.tag_ids?.includes(filterTagId));
-
-  // 2. Sort the filtered connections
-  return filtered.sort((a, b) => {
+ 
+  // 2. Filter by search query
+  let searchedConnections = filteredByTag;
+  if (query) {
+    searchedConnections = filteredByTag.filter(conn => {
+      const nameMatch = conn.name?.toLowerCase().includes(query);
+      const usernameMatch = conn.username?.toLowerCase().includes(query);
+      const hostMatch = conn.host?.toLowerCase().includes(query);
+      const portMatch = conn.port?.toString().includes(query);
+      return nameMatch || usernameMatch || hostMatch || portMatch;
+    });
+  }
+ 
+  // 3. Sort the searched connections
+  return searchedConnections.sort((a, b) => {
     let valA: any;
     let valB: any;
 
@@ -247,9 +261,17 @@ const getTagNames = (tagIds: number[] | undefined): string[] => {
 
       <!-- Connection List -->
       <div class="bg-card text-card-foreground shadow rounded-lg overflow-hidden border border-border min-h-[400px]">
-        <div class="px-4 py-3 border-b border-border flex justify-between items-center">
-          <h2 class="text-lg font-medium">{{ t('dashboard.connectionList', '连接列表') }} ({{ filteredAndSortedConnections.length }})</h2>
-          <div class="flex items-center space-x-2 flex-wrap gap-y-2"> <!-- Added flex-wrap and gap-y for responsiveness -->
+        <div class="px-4 py-3 border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
+          <h2 class="text-lg font-medium flex-shrink-0">{{ t('dashboard.connectionList', '连接列表') }} ({{ filteredAndSortedConnections.length }})</h2>
+          <div class="w-full sm:w-auto flex flex-col sm:flex-row items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
+            <!-- Search Input -->
+            <input
+              type="text"
+              v-model="searchQuery"
+              :placeholder="t('dashboard.searchConnectionsPlaceholder', '搜索连接...')"
+              class="h-8 px-3 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary w-full sm:w-48"
+            />
+            <div class="flex items-center space-x-2"> <!-- Wrapper for existing controls -->
              <!-- Tag Filter Dropdown -->
              <select
                 v-model="selectedTagId"
@@ -287,6 +309,7 @@ const getTagNames = (tagIds: number[] | undefined): string[] => {
               >
                 <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a', 'w-4 h-4']"></i>
               </button>
+            </div>
           </div>
         </div>
         <div class="p-4">
@@ -321,8 +344,9 @@ const getTagNames = (tagIds: number[] | undefined): string[] => {
               </button>
             </li>
           </ul>
-          <!-- Adjust no connections message based on filtering -->
-          <div v-else-if="!isLoadingConnections && selectedTagId !== null" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsWithTag', '该标签下没有连接记录') }}</div>
+          <!-- Adjust no connections message based on filtering and search -->
+          <div v-else-if="!isLoadingConnections && searchQuery && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsMatchSearch', '没有连接匹配搜索条件') }}</div>
+          <div v-else-if="!isLoadingConnections && selectedTagId !== null && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('dashboard.noConnectionsWithTag', '该标签下没有连接记录') }}</div>
           <div v-else class="text-center text-text-secondary">{{ t('dashboard.noConnections', '没有连接记录') }}</div>
         </div>
       </div>