Merge pull request #37 from Heavrnl/feature/connectionView

Feature/connection view

packages/backend/src/database/schema.ts

@@ -190,7 +190,6 @@ CREATE TABLE IF NOT EXISTS quick_command_tag_associations (
 );
 `;
 
-// --- End Quick Command Tags ---
 
 
 // 从 database.ts 移动过来的，保持一致性

packages/backend/src/notifications/notification.controller.ts

@@ -216,4 +216,4 @@ export class NotificationController {
          res.status(500).json({ message: i18next.t('notificationController.errorTriggerTest'), error: error.message });
      }
  };
-} // End of class NotificationController
+}

packages/frontend/src/App.vue

@@ -271,6 +271,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
           <img src="./assets/logo.png" alt="Project Logo" class="h-10 w-auto"> <!-- 移除右侧外边距，使其更靠左 -->
             <RouterLink to="/" class="inline-flex px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-nav-active-bg">{{ t('nav.dashboard') }}</RouterLink> <!-- 恢复仪表盘链接, 始终可见 -->
             <RouterLink to="/workspace" class="inline-flex px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-nav-active-bg">{{ t('nav.terminal') }}</RouterLink> <!-- 保持可见 -->
+            <RouterLink to="/connections" class="hidden md:inline-flex px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-nav-active-bg">{{ t('nav.connections') }}</RouterLink> <!-- 连接管理链接 -->
             <RouterLink to="/proxies" class="hidden md:inline-flex px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-nav-active-bg">{{ t('nav.proxies') }}</RouterLink> <!-- 移动端隐藏 -->
             <RouterLink to="/notifications" class="hidden md:inline-flex px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-nav-active-bg">{{ t('nav.notifications') }}</RouterLink> <!-- 移动端隐藏 -->
             <RouterLink to="/audit-logs" class="hidden md:inline-flex px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap" active-class="text-link-active bg-nav-active-bg">{{ t('nav.auditLogs') }}</RouterLink> <!-- 移动端隐藏 -->
@@ -297,7 +298,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
     <main>
       <!-- 使用 KeepAlive 包裹 RouterView，并指定缓存 WorkspaceView -->
       <RouterView v-slot="{ Component }">
-        <KeepAlive include="WorkspaceView">
+        <KeepAlive :include="['WorkspaceView', 'ConnectionsView']">
           <component :is="Component" />
         </KeepAlive>
       </RouterView>

packages/frontend/src/components/BatchEditConnectionForm.vue

@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { ref, watch, computed, PropType, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { ConnectionInfo } from '../stores/connections.store';
+import { useConnectionsStore } from '../stores/connections.store';
+import { useUiNotificationsStore } from '../stores/uiNotifications.store';
+import { useProxiesStore } from '../stores/proxies.store';
+import { useTagsStore, type TagInfo } from '../stores/tags.store';
+import { useSshKeysStore, type SshKeyBasicInfo } from '../stores/sshKeys.store';
+import TagInput from './TagInput.vue';
+
+interface BatchUpdateData {
+  port?: number | string | null;
+  username?: string | null;
+  password?: string | null;
+  ssh_key_id?: number | null;
+  proxy_id?: number | null;
+  tag_ids?: number[];
+  notes?: string | null;
+}
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  connectionIds: {
+    type: Array as PropType<number[]>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:visible', 'saved']);
+
+const { t } = useI18n();
+const connectionsStore = useConnectionsStore();
+const uiNotificationsStore = useUiNotificationsStore();
+const proxiesStore = useProxiesStore();
+const tagsStore = useTagsStore();
+const sshKeysStore = useSshKeysStore();
+
+const internalVisible = ref(props.visible);
+const isLoading = ref(false);
+const formData = ref<BatchUpdateData>({});
+
+const enablePortEdit = ref(false);
+const enableAuthEdit = ref(false);
+const enableAdvancedEdit = ref(false);
+// Removed enableNotesEdit, notes editability is tied to enableAdvancedEdit
+
+const availableTags = computed(() => tagsStore.tags as TagInfo[]);
+const availableProxies = computed(() => proxiesStore.proxies);
+const availableSshKeys = computed(() => sshKeysStore.sshKeys as SshKeyBasicInfo[]);
+
+watch(() => props.visible, (newVal) => {
+  internalVisible.value = newVal;
+  if (newVal) {
+    formData.value = {
+      port: undefined,
+      username: undefined,
+      password: undefined,
+      ssh_key_id: undefined,
+      proxy_id: undefined,
+      tag_ids: undefined,
+      notes: undefined, // Keep notes initialization
+    };
+    enablePortEdit.value = false;
+    enableAuthEdit.value = false;
+    enableAdvancedEdit.value = false;
+    // Removed enableNotesEdit initialization
+
+    if (availableProxies.value.length === 0 && !proxiesStore.isLoading) {
+      proxiesStore.fetchProxies();
+    }
+    if (availableTags.value.length === 0 && !tagsStore.isLoading) {
+      tagsStore.fetchTags();
+    }
+    if (availableSshKeys.value.length === 0 && !sshKeysStore.isLoading) {
+      sshKeysStore.fetchSshKeys();
+    }
+  }
+});
+
+watch(internalVisible, (newVal) => {
+  if (newVal !== props.visible) {
+    emit('update:visible', newVal);
+  }
+});
+
+const handleSave = async () => {
+  if (!props.connectionIds || props.connectionIds.length === 0) {
+    uiNotificationsStore.addNotification({ message: t('connections.batchEdit.noConnectionsToUpdate', '没有选中的连接可供更新'), type: 'warning' });
+    return;
+  }
+
+  const updatesToApply: Partial<ConnectionInfo> = {};
+
+  if (enablePortEdit.value && formData.value.port !== undefined) {
+    if (formData.value.port === null || String(formData.value.port).trim() === "") {
+      updatesToApply.port = undefined;
+    } else {
+      const parsedPort = parseInt(String(formData.value.port), 10);
+      if (!isNaN(parsedPort) && parsedPort > 0 && parsedPort <= 65535) {
+        updatesToApply.port = parsedPort;
+      } else {
+        updatesToApply.port = undefined;
+      }
+    }
+  }
+
+  if (enableAuthEdit.value) {
+    if (formData.value.username !== undefined) {
+      updatesToApply.username = formData.value.username === null ? undefined : formData.value.username;
+    }
+    if (formData.value.password !== undefined) {
+      (updatesToApply as any).password = formData.value.password;
+    }
+    if (formData.value.ssh_key_id !== undefined) {
+      updatesToApply.ssh_key_id = formData.value.ssh_key_id;
+    }
+  }
+
+  if (enableAdvancedEdit.value) {
+    if (formData.value.proxy_id !== undefined) {
+      updatesToApply.proxy_id = formData.value.proxy_id;
+    }
+    if (formData.value.tag_ids !== undefined) {
+      updatesToApply.tag_ids = formData.value.tag_ids;
+    }
+    // Notes are part of "Advanced Options". If advanced is enabled, and notes have a value (even empty string), apply it.
+    if (formData.value.notes !== undefined) {
+      updatesToApply.notes = formData.value.notes === null ? '' : formData.value.notes; // Send empty string to clear, or the new notes.
+    }
+  }
+
+
+  if (Object.keys(updatesToApply).length === 0) {
+    uiNotificationsStore.addNotification({ message: t('connections.batchEdit.noChanges', '未检测到任何更改'), type: 'info' });
+    isLoading.value = false;
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    let successCount = 0;
+    for (const id of props.connectionIds) {
+      const success = await connectionsStore.updateConnection(id, updatesToApply as ConnectionInfo);
+      if (success) successCount++;
+    }
+
+    if (successCount > 0) {
+      uiNotificationsStore.addNotification({ message: t('common.updateSuccess', { count: successCount }), type: 'success' });
+      emit('saved');
+    }
+    emit('update:visible', false);
+  } catch (error: any) {
+    console.error("Batch update error:", error);
+    uiNotificationsStore.addNotification({ message: error.message , type: 'error' });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleCancel = () => {
+  emit('update:visible', false);
+};
+
+const handleCreateTag = async (name: string) => {
+  const newTag = await tagsStore.addTag(name);
+  if (newTag) {
+    uiNotificationsStore.addNotification({ message: t('tags.createSuccess', { name }), type: 'success' });
+  } else {
+    uiNotificationsStore.addNotification({ message: t('tags.createFailed', { name, error: tagsStore.error || 'Unknown error' }), type: 'error' });
+  }
+};
+
+const handleDeleteTag = async (tagId: number) => {
+  const success = await tagsStore.deleteTag(tagId);
+  if (success) {
+    const deletedTagName = availableTags.value.find(tag => tag.id === tagId)?.name || String(tagId);
+    uiNotificationsStore.addNotification({ message: t('tags.deleteSuccessWithName', { name: deletedTagName }), type: 'success' });
+    if (formData.value.tag_ids) {
+      formData.value.tag_ids = formData.value.tag_ids.filter(id => id !== tagId);
+    }
+  } else {
+    const deletedTagName = availableTags.value.find(tag => tag.id === tagId)?.name || String(tagId);
+    uiNotificationsStore.addNotification({ message: t('tags.deleteFailedWithName', { name: deletedTagName, error: tagsStore.error || 'Unknown error' }), type: 'error' });
+  }
+};
+
+onMounted(() => {
+  if (props.visible) {
+    if (availableProxies.value.length === 0 && !proxiesStore.isLoading) {
+      proxiesStore.fetchProxies();
+    }
+    if (availableTags.value.length === 0 && !tagsStore.isLoading) {
+      tagsStore.fetchTags();
+    }
+    if (availableSshKeys.value.length === 0 && !sshKeysStore.isLoading) {
+      sshKeysStore.fetchSshKeys();
+    }
+  }
+});
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="internalVisible"
+      class="fixed inset-0 bg-overlay flex justify-center items-center z-50 p-4"
+      @click.self="handleCancel"
+    >
+      <div class="bg-background text-foreground p-6 rounded-lg shadow-xl border border-border w-full max-w-xl max-h-[90vh] flex flex-col">
+        <h3 class="text-xl font-semibold text-center mb-6 flex-shrink-0">
+          {{ t('connections.batchEdit.title', '批量编辑连接') }} ({{ props.connectionIds.length }} {{ t('connections.batchEdit.selectedItems', '项') }})
+        </h3>
+
+        <form @submit.prevent="handleSave" class="flex-grow overflow-y-auto pr-2 space-y-4">
+          <!-- Port Section -->
+          <div class="p-4 border border-border rounded-md bg-card">
+            <div class="flex justify-between items-center mb-2">
+              <h4 class="text-base font-semibold">{{ t('connections.table.port', '端口') }}</h4>
+              <input type="checkbox" v-model="enablePortEdit" class="form-checkbox h-5 w-5 text-primary rounded border-gray-300 focus:ring-primary" />
+            </div>
+            <div v-if="enablePortEdit">
+              <input
+                type="text"
+                id="batch-port"
+                v-model="formData.port"
+                class="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm"
+              />
+            </div>
+          </div>
+
+          <!-- Auth Section -->
+          <div class="p-4 border border-border rounded-md bg-card">
+            <div class="flex justify-between items-center mb-2">
+              <h4 class="text-base font-semibold">{{ t('connections.form.sectionAuth', '认证信息') }}</h4>
+              <input type="checkbox" v-model="enableAuthEdit" class="form-checkbox h-5 w-5 text-primary rounded border-gray-300 focus:ring-primary" />
+            </div>
+            <div v-if="enableAuthEdit" class="space-y-3">
+              <div>
+                <label for="batch-username" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.username', '用户名') }}</label>
+                <input type="text" id="batch-username" v-model="formData.username" class="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm" />
+              </div>
+              <div>
+                <label for="batch-password" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.authMethodPassword', '密码') }}</label>
+                <input type="password" id="batch-password" v-model="formData.password" class="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm" />
+              </div>
+              <div>
+                <label for="batch-ssh-key" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.authMethodKey', 'SSH 密钥') }}</label>
+                <select
+                  id="batch-ssh-key"
+                  v-model="formData.ssh_key_id"
+                  class="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm"
+                  :disabled="sshKeysStore.isLoading"
+                >
+                  <option :value="undefined">{{ t('connections.batchEdit.noChange', '-- 不更改 --') }}</option>
+                  <option :value="null">{{ t('connections.form.noSshKey', '无密钥') }}</option>
+                  <option v-if="sshKeysStore.isLoading" disabled>{{ t('common.loading', '加载中...') }}</option>
+                  <option v-for="key in availableSshKeys" :key="key.id" :value="key.id">
+                    {{ key.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <!-- Advanced Section (Now includes Notes) -->
+          <div class="p-4 border border-border rounded-md bg-card">
+            <div class="flex justify-between items-center mb-2">
+              <h4 class="text-base font-semibold">{{ t('connections.form.sectionAdvanced', '高级选项') }}</h4>
+              <input type="checkbox" v-model="enableAdvancedEdit" class="form-checkbox h-5 w-5 text-primary rounded border-gray-300 focus:ring-primary" />
+            </div>
+            <div v-if="enableAdvancedEdit" class="space-y-3">
+              <div>
+                <label for="batch-proxy" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.proxy', '代理') }}</label>
+                <select id="batch-proxy" v-model="formData.proxy_id" class="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm">
+                  <option :value="undefined">{{ t('connections.batchEdit.noChange', '-- 不更改 --') }}</option>
+                  <option :value="null">{{ t('connections.form.noProxy', '无代理') }}</option>
+                  <option v-for="proxy in availableProxies" :key="proxy.id" :value="proxy.id">
+                    {{ proxy.name }} ({{ proxy.type }})
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-text-secondary">{{ t('connections.table.tags', '标签') }}</label>
+                <TagInput
+                  :modelValue="formData.tag_ids || []"
+                  @update:modelValue="val => formData.tag_ids = val"
+                  :availableTags="availableTags"
+                  @create-tag="handleCreateTag"
+                  @delete-tag="handleDeleteTag"
+                  :allow-create="true"
+                  :allow-delete="true"
+                  class="mt-1"
+                />
+              </div>
+              <!-- Notes section moved here, no separate enable checkbox for notes itself -->
+              <div class="pt-2">
+                <label for="batch-notes" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.notes', '备注') }}</label>
+                <textarea
+                  id="batch-notes"
+                  v-model="formData.notes"
+                  rows="3"
+                  class="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-primary sm:text-sm"
+                ></textarea>
+              </div>
+            </div>
+          </div>
+
+        </form>
+
+        <div class="flex justify-end items-center pt-5 mt-auto flex-shrink-0 space-x-3">
+          <button
+            type="button"
+            @click="handleCancel"
+            class="px-4 py-2 bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out"
+            :disabled="isLoading"
+          >
+            {{ t('common.cancel', '取消') }}
+          </button>
+          <button
+            type="submit" @click="handleSave"
+            class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out"
+            :disabled="isLoading || (!enablePortEdit && !enableAuthEdit && !enableAdvancedEdit)"
+          > <!-- Removed enableNotesEdit from disabled condition -->
+            <i v-if="isLoading" class="fas fa-spinner fa-spin mr-2"></i>
+            {{ t('common.save', '保存') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

packages/frontend/src/components/WorkspaceConnectionList.vue

@@ -972,18 +972,11 @@ const cancelEditingTag = () => {
           @click="handleTagMenuAction('deleteAllConnections')"
         >
           <i class="fas fa-trash-alt mr-3 w-4 text-center text-error/80 group-hover:text-error"></i>
-          <span>{{ t('workspaceConnectionList.deleteAllConnectionsInGroupMenu') }}</span> <!-- 新增i18n -->
+          <span>{{ t('workspaceConnectionList.deleteAllConnectionsInGroupMenu') }}</span>
         </li>
-        <!-- Future: Add "Rename Tag" or "Delete Tag (if empty)" options here -->
       </ul>
     </div>
 
-    <!-- --- 移除 RDP Modal 渲染 --- -->
-    <!-- <RemoteDesktopModal
-      v-if="showRdpModal"
-      :connection="selectedRdpConnection"
-      @close="closeRdpModal"
-    /> -->
    <teleport to="body">
      <ManageTagConnectionsModal
        :tag-info="tagToManage"
@@ -994,4 +987,3 @@ const cancelEditingTag = () => {
  </div>
 </template>
 
-<!-- Scoped styles removed, now using Tailwind utility classes -->

packages/frontend/src/composables/useWebSocketConnection.ts

@@ -39,7 +39,7 @@ export function createWebSocketConnectionManager(
     let reconnectTimeoutId: ReturnType<typeof setTimeout> | null = null; // 重连定时器 ID
     let lastUrl = ''; // 保存上次连接的 URL
     let intentionalDisconnect = false; // 标记是否为用户主动断开
-    // --- End Instance State ---
+
 
     /**
      * 安全地获取状态文本的辅助函数

packages/frontend/src/features/appearance/config/default-themes.ts

@@ -42,7 +42,6 @@ export const defaultUiTheme: Record<string, string> = {
   '--button-bg-color': '#A06CD5', // 现代紫色 - 激活 (基础)
   '--button-text-color': '#ffffff',
   '--button-hover-bg-color': '#8E44AD', // 现代紫色 - 悬停 (稍暗)
-  // Added new variables
   '--icon-color': 'var(--text-color-secondary)', // 图标颜色
   '--icon-hover-color': 'var(--link-hover-color)', // 图标悬停颜色 (自动更新)
   '--split-line-color': 'var(--border-color)', /* 分割线颜色 */
@@ -50,7 +49,6 @@ export const defaultUiTheme: Record<string, string> = {
   '--input-focus-border-color': 'var(--link-active-color)', /* 输入框聚焦边框颜色 (自动更新) */
   '--input-focus-glow': 'var(--link-active-color)', /* 输入框聚焦光晕值 (自动更新) */
   '--overlay-bg-color': 'rgba(0, 0, 0, 0.6)', /* Added Overlay Background - 恢复 rgba 以支持透明度 */
-  // End added variables
   '--font-family-sans-serif': 'sans-serif',
   '--base-padding': '1rem',
   '--base-margin': '0.5rem',

packages/frontend/src/locales/en-US.json

@@ -6,6 +6,7 @@
   "nav": {
     "dashboard": "Dashboard",
     "terminal": "Terminal",
+    "connections": "Connections",
     "proxies": "Proxies",
     "login": "Login",
     "logout": "Logout",
@@ -126,7 +127,18 @@
       "lastConnected": "Last Connected",
       "actions": "Actions"
     },
+    "batchEdit":{
+      "toggleLabel":"Batch Edit",
+      "selectAll": "Select All",
+      "deselectAll": "Deselect All",
+      "invertSelection": "Invert Selection",
+      "title": "Batch Edit Connections",
+      "editSelected": "Edit Selected",
+      "noChange":"No change",
+      "selectedItems":"{count} items selected"
+    },
     "actions": {
+      "testAllFiltered":"Test All",
       "connect": "Connect",
       "edit": "Edit",
       "delete": "Delete",
@@ -151,6 +163,7 @@
       "confirm": "Confirm Add",
       "adding": "Adding...",
       "cancel": "Cancel",
+      "noSshKey":"No SSH Key",
       "errorRequiredFields": "Please fill in all required fields.",
       "errorPasswordRequired": "Password is required for password authentication.",
       "errorPrivateKeyRequired": "Private key is required for key authentication.",
@@ -968,6 +981,7 @@
     "restore": "Restore",
     "minimize": "Minimize",
     "send":"Send",
+    "updateSuccess":"Update successful",
     "copied": "Copied to clipboard"
   },
   "layoutConfigurator": {

packages/frontend/src/locales/ja-JP.json

@@ -106,10 +106,22 @@
         "restore": "元に戻す",
         "minimize": "最小化",
         "send":"送信する",
+        "updateSuccess":"更新に成功しました",
         "copied": "クリップボードにコピーしました"
     },
     "connections": {
+        "batchEdit": {
+            "toggleLabel": "一括編集",
+            "selectAll": "すべて選択",
+            "deselectAll": "すべて選択解除",
+            "invertSelection": "選択を反転",
+            "title": "接続の一括編集",
+            "editSelected": "選択した項目を編集",
+            "noChange": "変更なし",
+            "selectedItems": "{count} 件選択済み"
+        },
         "actions": {
+            "testAllFiltered":"すべてテスト",
             "connect": "接続",
             "delete": "削除",
             "edit": "編集",
@@ -150,6 +162,7 @@
             "password": "パスワード:",
             "port": "ポート:",
             "privateKey": "秘密鍵:",
+            "noSshKey":"SSHキーなし",
             "proxy": "プロキシ:",
             "saving": "保存中...",
             "sectionAdvanced": "詳細設定",
@@ -575,6 +588,7 @@
         "auditLogs": "監査ログ",
         "customizeStyle": "外観のカスタマイズ",
         "dashboard": "ダッシュボード",
+        "connections": "接続管理",
         "login": "ログイン",
         "logout": "ログアウト",
         "notifications": "通知管理",

packages/frontend/src/locales/zh-CN.json

@@ -6,6 +6,7 @@
   "nav": {
     "dashboard": "仪表盘",
     "terminal": "终端",
+    "connections": "连接管理",
     "proxies": "代理管理",
     "login": "登录",
     "logout": "登出",
@@ -125,7 +126,19 @@
       "lastConnected": "上次连接",
       "actions": "操作"
     },
+    "batchEdit":{
+      "toggleLabel":"批量修改",
+      "selectAll": "全选",
+      "deselectAll": "取消全选",
+      "invertSelection": "反向选择",
+      "editSelected": "编辑所选",
+      "title": "批量编辑连接",
+      "selectedItems": "已选项目",
+      "noChange": "保持不变",
+      "tagsPlaceholder": "输入标签 (替换现有)"
+    },
     "actions": {
+      "testAllFiltered":"测试全部",
       "connect": "连接",
       "edit": "编辑",
       "delete": "删除",
@@ -180,6 +193,7 @@
       "testConnection": "测试连接",
       "testing": "测试中...",
       "sshKey": "SSH 密钥",
+      "noSshKey":"无 SSH 密钥",
       "privateKeyDirect": "私钥内容",
       "keyUpdateNoteDirect": "编辑时将私钥和密码短语留空以保留现有密钥。",
       "keyUpdateNoteSelected": "编辑时选择其他密钥或使用直接输入来更改密钥。",
@@ -969,7 +983,8 @@
     "restore": "还原",
     "minimize": "最小化",
     "send":"发送",
-    "copied": "已复制到剪贴板"
+    "copied": "已复制到剪贴板",
+    "updateSuccess":"更新成功"
   },
   "layoutConfigurator": {
     "title": "布局管理器",

packages/frontend/src/router/index.ts

@@ -22,6 +22,12 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Proxies',
      component: () => import('../views/ProxiesView.vue')
    },
+   // 连接管理页面
+   {
+     path: '/connections',
+     name: 'Connections',
+     component: () => import('../views/ConnectionsView.vue')
+   },
    // 移除：标签管理页面路由
    // {
    //   path: '/tags',

packages/frontend/src/stores/connections.store.ts

@@ -191,13 +191,14 @@ export const useConnectionsStore = defineStore('connections', {
         },
 
         // 测试连接 Action
-        async testConnection(connectionId: number): Promise<{ success: boolean; message?: string }> {
+        async testConnection(connectionId: number): Promise<{ success: boolean; message?: string; latency?: number }> {
             // 注意：这里不改变 isLoading 状态，或者可以引入单独的 testing 状态
             // this.isLoading = true;
             // this.error = null;
             try {
-                const response = await apiClient.post<{ success: boolean; message: string }>(`/connections/${connectionId}/test`); // 使用 apiClient
+                // 假设后端返回 { success: boolean; message: string; latency?: number }
-                return { success: response.data.success, message: response.data.message };
+                const response = await apiClient.post<{ success: boolean; message: string; latency?: number }>(`/connections/${connectionId}/test`); // 使用 apiClient
+                return { success: response.data.success, message: response.data.message, latency: response.data.latency };
             } catch (err: any) {
                 console.error(`测试连接 ${connectionId} 失败:`, err);
                 const errorMessage = err.response?.data?.message || err.message || '测试连接时发生未知错误。';

packages/frontend/src/stores/fileEditor.store.ts

@@ -96,7 +96,7 @@ const decodeRawContent = (rawContentBase64: string, encoding: string): string =>
         return `// Error decoding content: ${error.message}`; // 返回错误信息
     }
 };
-// --- End Helper Functions ---
+
 
 export const useFileEditorStore = defineStore('fileEditor', () => {
     const { t } = useI18n();

packages/frontend/src/stores/quickCommands.store.ts

@@ -462,7 +462,6 @@ export const useQuickCommandsStore = defineStore('quickCommands', () => {
                         }
                     });
                     console.log(`[Store] Manually updated tagIds for ${updatedCount} commands in local state.`);
-                    // --- End manual state update ---
 
                     // Optionally, still fetch for full consistency, but UI should update based on manual change first.
                     // clearQuickCommandsCache();

packages/frontend/src/views/ConnectionsView.vue

@@ -0,0 +1,698 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import AddConnectionForm from '../components/AddConnectionForm.vue';
+import BatchEditConnectionForm from '../components/BatchEditConnectionForm.vue';
+import { useConnectionsStore } from '../stores/connections.store';
+import { useSessionStore } from '../stores/session.store';
+import { useTagsStore } from '../stores/tags.store';
+import type { TagInfo } from '../stores/tags.store';
+import type { SortField, SortOrder } from '../stores/settings.store';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import type { ConnectionInfo } from '../stores/connections.store';
+import { storeToRefs } from 'pinia';
+import { formatDistanceToNow } from 'date-fns';
+import { zhCN, enUS, ja } from 'date-fns/locale';
+import type { Locale } from 'date-fns';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const connectionsStore = useConnectionsStore();
+const sessionStore = useSessionStore();
+const tagsStore = useTagsStore();
+
+const { connections, isLoading: isLoadingConnections } = storeToRefs(connectionsStore);
+const { tags, isLoading: isLoadingTags } = storeToRefs(tagsStore);
+
+const LS_SORT_BY_KEY = 'connections_view_sort_by';
+const LS_SORT_ORDER_KEY = 'connections_view_sort_order';
+const LS_FILTER_TAG_KEY = 'connections_view_filter_tag';
+
+const localSortBy = ref<SortField>(localStorage.getItem(LS_SORT_BY_KEY) as SortField || 'last_connected_at');
+const localSortOrder = ref<SortOrder>(localStorage.getItem(LS_SORT_ORDER_KEY) as SortOrder || 'desc');
+
+const getInitialSelectedTagId = (): number | null => {
+  const storedValue = localStorage.getItem(LS_FILTER_TAG_KEY);
+  return storedValue && storedValue !== 'null' ? parseInt(storedValue, 10) : null;
+};
+const selectedTagId = ref<number | null>(getInitialSelectedTagId());
+const searchQuery = ref('');
+
+const showAddEditConnectionForm = ref(false);
+const connectionToEdit = ref<ConnectionInfo | null>(null);
+
+// Batch Edit Mode
+const isBatchEditMode = ref(false);
+const selectedConnectionIdsForBatch = ref<Set<number>>(new Set());
+const showBatchEditForm = ref(false);
+
+const sortOptions: { value: SortField; labelKey: string }[] = [
+  { value: 'last_connected_at', labelKey: 'dashboard.sortOptions.lastConnected' },
+  { value: 'name', labelKey: 'dashboard.sortOptions.name' },
+  { value: 'type', labelKey: 'dashboard.sortOptions.type' },
+  { value: 'updated_at', labelKey: 'dashboard.sortOptions.updated' },
+  { value: 'created_at', labelKey: 'dashboard.sortOptions.created' },
+];
+
+const filteredAndSortedConnections = computed(() => {
+  const sortBy = localSortBy.value;
+  const sortOrderVal = localSortOrder.value;
+  const factor = sortOrderVal === 'desc' ? -1 : 1;
+  const filterTagId = selectedTagId.value;
+  const query = searchQuery.value.toLowerCase().trim();
+
+  let filteredByTag = filterTagId === null
+    ? [...connections.value]
+    : connections.value.filter(conn => conn.tag_ids?.includes(filterTagId));
+
+  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);
+      const notesMatch = conn.notes?.toLowerCase().includes(query); // 添加对备注的搜索
+      return nameMatch || usernameMatch || hostMatch || portMatch || notesMatch;
+    });
+  }
+
+  return searchedConnections.sort((a, b) => {
+    let valA: any;
+    let valB: any;
+
+    switch (sortBy) {
+      case 'name':
+        valA = a.name || '';
+        valB = b.name || '';
+        return valA.localeCompare(valB) * factor;
+      case 'type':
+        valA = a.type || '';
+        valB = b.type || '';
+        return valA.localeCompare(valB) * factor;
+      case 'created_at':
+        valA = a.created_at ?? 0;
+        valB = b.created_at ?? 0;
+        return (valA - valB) * factor;
+      case 'updated_at':
+        valA = a.updated_at ?? 0;
+        valB = b.updated_at ?? 0;
+        return (valA - valB) * factor;
+      case 'last_connected_at':
+        valA = a.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
+        valB = b.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
+        if (valA === valB) return 0;
+        if (valA < valB) return -1 * factor;
+        return 1 * factor;
+      default:
+        return 0;
+    }
+  });
+});
+
+onMounted(async () => {
+  if (connections.value.length === 0) {
+    try {
+      await connectionsStore.fetchConnections();
+    } catch (error) {
+      console.error("加载连接列表失败:", error);
+    }
+  }
+  try {
+    await tagsStore.fetchTags();
+  } catch (error) {
+    console.error("加载标签列表失败:", error);
+  }
+});
+
+const connectTo = (connection: ConnectionInfo) => {
+  sessionStore.handleConnectRequest(connection);
+};
+
+const toggleSortOrder = () => {
+  localSortOrder.value = localSortOrder.value === 'asc' ? 'desc' : 'asc';
+};
+
+const isAscending = computed(() => localSortOrder.value === 'asc');
+
+watch(localSortBy, (newValue) => {
+  localStorage.setItem(LS_SORT_BY_KEY, newValue);
+});
+
+watch(localSortOrder, (newValue) => {
+  localStorage.setItem(LS_SORT_ORDER_KEY, newValue);
+});
+
+watch(selectedTagId, (newValue) => {
+  localStorage.setItem(LS_FILTER_TAG_KEY, newValue === null ? 'null' : String(newValue));
+});
+
+const dateFnsLocales: Record<string, Locale> = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+  'ja-JP': ja,
+  'en': enUS,
+  'zh': zhCN,
+  'ja': ja,
+};
+
+const formatRelativeTime = (timestampInSeconds: number | null | undefined): string => {
+  if (!timestampInSeconds) return t('connections.status.never');
+  try {
+    const timestampInMs = timestampInSeconds * 1000;
+    if (isNaN(timestampInMs)) {
+        console.warn(`[ConnectionsView] Invalid timestamp received: ${timestampInSeconds}`);
+        return String(timestampInSeconds);
+    }
+    const date = new Date(timestampInMs);
+    const currentI18nLocale = locale.value;
+    const langPart = currentI18nLocale.split('-')[0];
+    let targetDateFnsLocale = dateFnsLocales[currentI18nLocale] || dateFnsLocales[langPart] || enUS;
+    return formatDistanceToNow(date, { addSuffix: true, locale: targetDateFnsLocale });
+  } catch (e) {
+    console.error("格式化日期失败:", e);
+    return String(timestampInSeconds);
+  }
+};
+
+const getTagNames = (tagIds: number[] | undefined): string[] => {
+  if (!tagIds || tagIds.length === 0) {
+    return [];
+  }
+  const allTags = tags.value as TagInfo[];
+  return tagIds
+    .map(id => allTags.find(tag => tag.id === id)?.name)
+    .filter((name): name is string => !!name);
+};
+
+const openAddConnectionForm = () => {
+  connectionToEdit.value = null;
+  showAddEditConnectionForm.value = true;
+};
+
+const openEditConnectionForm = (conn: ConnectionInfo) => {
+  connectionToEdit.value = conn;
+  showAddEditConnectionForm.value = true;
+};
+
+const handleFormClose = () => {
+  showAddEditConnectionForm.value = false;
+  connectionToEdit.value = null;
+};
+
+const handleConnectionModified = async () => {
+  showAddEditConnectionForm.value = false;
+  connectionToEdit.value = null;
+  await connectionsStore.fetchConnections();
+};
+
+// --- Batch Edit Functions ---
+const toggleBatchEditMode = () => {
+  isBatchEditMode.value = !isBatchEditMode.value;
+  if (!isBatchEditMode.value) {
+    selectedConnectionIdsForBatch.value.clear(); // Clear selection when exiting batch mode
+  }
+};
+
+const handleConnectionClick = (connId: number) => {
+  if (!isBatchEditMode.value) return;
+  if (selectedConnectionIdsForBatch.value.has(connId)) {
+    selectedConnectionIdsForBatch.value.delete(connId);
+  } else {
+    selectedConnectionIdsForBatch.value.add(connId);
+  }
+};
+
+const isConnectionSelectedForBatch = (connId: number): boolean => {
+  return selectedConnectionIdsForBatch.value.has(connId);
+};
+
+const selectAllConnections = () => {
+  if (!isBatchEditMode.value) return;
+  filteredAndSortedConnections.value.forEach(conn => selectedConnectionIdsForBatch.value.add(conn.id));
+};
+
+const deselectAllConnections = () => {
+  if (!isBatchEditMode.value) return;
+  selectedConnectionIdsForBatch.value.clear();
+};
+
+const invertSelection = () => {
+  if (!isBatchEditMode.value) return;
+  const allVisibleIds = new Set(filteredAndSortedConnections.value.map(conn => conn.id));
+  allVisibleIds.forEach(id => {
+    if (selectedConnectionIdsForBatch.value.has(id)) {
+      selectedConnectionIdsForBatch.value.delete(id);
+    } else {
+      selectedConnectionIdsForBatch.value.add(id);
+    }
+  });
+};
+
+const openBatchEditModal = () => {
+  if (selectedConnectionIdsForBatch.value.size === 0) {
+    // Optionally, show a notification from uiNotificationsStore using your project's method
+    alert(t('connections.batchEdit.noSelectionForEdit', '请至少选择一个连接进行编辑。')); // Placeholder
+    return;
+  }
+  showBatchEditForm.value = true;
+};
+
+const handleBatchEditSaved = async () => {
+  showBatchEditForm.value = false;
+  selectedConnectionIdsForBatch.value.clear();
+  // isBatchEditMode.value = false; // Optionally exit batch mode after saving
+  await connectionsStore.fetchConnections(); // Refresh the list
+};
+
+const handleBatchEditFormClose = () => {
+  showBatchEditForm.value = false;
+};
+
+// --- Test Connection Logic ---
+interface ConnectionTestState {
+  status: 'idle' | 'testing' | 'success' | 'error';
+  resultText: string;
+  latency?: number;
+  latencyColor?: string;
+}
+const connectionTestStates = ref<Map<number, ConnectionTestState>>(new Map());
+const isTestingAll = ref(false);
+
+const getLatencyColorString = (latencyMs?: number): string => {
+  if (latencyMs === undefined) return 'inherit'; // Default or inherit
+  // These colors should ideally come from theme variables if available
+  if (latencyMs < 100) return 'var(--color-success, #4CAF50)';
+  if (latencyMs < 300) return 'var(--color-warning, #ff9800)';
+  return 'var(--color-error, #F44336)';
+};
+
+const handleTestSingleConnection = async (conn: ConnectionInfo) => {
+  if (!conn.id || conn.type !== 'SSH') return;
+
+  connectionTestStates.value.set(conn.id, {
+    status: 'testing',
+    resultText: t('connections.test.testingInProgress', '测试中...'),
+  });
+
+  try {
+    // Pass only the ID to testConnection, as per store definition
+    const result = await connectionsStore.testConnection(conn.id);
+
+    if (result.success) {
+      const latencyMs = result.latency;
+      let displayText = ''; // 初始化为空字符串，符合只显示延迟的要求
+      let determinedColor;
+
+      if (latencyMs !== undefined) {
+        displayText = `${latencyMs}ms`;
+        determinedColor = getLatencyColorString(latencyMs);
+      } else {
+        // 测试成功，但没有延迟信息。不显示文本。
+        // 颜色应为明确的成功颜色。
+        // getLatencyColorString(0) 会返回绿色，代表非常好的情况。
+        determinedColor = getLatencyColorString(0); // 或者直接使用 'var(--color-success, #4CAF50)'
+      }
+
+      connectionTestStates.value.set(conn.id, {
+        status: 'success',
+        resultText: displayText, // 将显示 "XXms" 或者为空
+        latency: latencyMs,
+        latencyColor: determinedColor,
+      });
+    } else {
+      connectionTestStates.value.set(conn.id, {
+        status: 'error',
+        resultText: result.message || t('connections.test.unknownError', '未知错误'),
+      });
+    }
+  } catch (error: any) {
+    connectionTestStates.value.set(conn.id, {
+      status: 'error',
+      resultText: error.message || t('connections.test.unknownError', '未知错误'),
+    });
+  }
+};
+
+const handleTestAllFilteredConnections = async () => {
+  if (isTestingAll.value || isLoadingConnections.value) return;
+  // Ensure conn.id exists for map function and error handling
+  const sshConnectionsToTest = filteredAndSortedConnections.value.filter(c => c.type === 'SSH' && c.id != null);
+  if (sshConnectionsToTest.length === 0) {
+    // Optionally notify user that there are no SSH connections to test
+    // Consider using uiNotificationsStore from your project for a user-friendly message
+    return;
+  }
+
+  isTestingAll.value = true;
+  const testPromises = sshConnectionsToTest.map(conn => {
+    // conn.id is guaranteed to exist here due to the filter above.
+    // We're calling handleTestSingleConnection for each.
+    // Individual errors within handleTestSingleConnection will update that specific connection's state.
+    // We also add a .catch here to handle any unexpected errors from handleTestSingleConnection itself
+    // or if conn.id was somehow null/undefined (though filtered out).
+    return handleTestSingleConnection(conn).catch(error => {
+      console.error(`Error testing connection ${conn.id}:`, error);
+      // Ensure state is updated for this specific connection to show an error
+      // The 'id' here is from the 'conn' object in the map function's scope.
+      connectionTestStates.value.set(conn.id!, { // Using non-null assertion as id is checked
+        status: 'error',
+        resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'), // New i18n key
+      });
+    });
+  });
+
+  try {
+    await Promise.all(testPromises);
+  } catch (error) {
+    // This catch block handles errors if Promise.all itself fails,
+    // though individual promise rejections are handled above.
+    console.error("Error during batch testing of connections (Promise.all):", error);
+    // Optionally, set a general error state or notification for the entire batch operation if needed.
+  } finally {
+    isTestingAll.value = false;
+  }
+};
+
+const getSingleTestButtonInfo = (connId: number | undefined, connType: string | undefined) => {
+  const state = connId ? connectionTestStates.value.get(connId) : undefined;
+
+  if (connType !== 'SSH') {
+    return {
+      textKey: 'connections.actions.test',
+      iconClass: 'fas fa-plug',
+      disabled: true,
+      loading: false,
+      title: t('connections.test.onlySshSupportedTest', '仅SSH连接支持测试。')
+    };
+  }
+  if (!connId) { // Should not happen if connType is SSH and we are in the list
+     return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: true, loading: false, title: '' };
+  }
+
+  if (state?.status === 'testing') {
+    return { textKey: 'connections.actions.testing', iconClass: 'fas fa-spinner fa-spin', disabled: true, loading: true, title: t('connections.actions.testing', '测试中') };
+  }
+  if (state?.status === 'success' || state?.status === 'error') {
+    // 测试完成后，按钮恢复为初始“测试”状态
+    return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
+  }
+  // 默认状态也是“测试”
+  return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
+};
+
+const getTruncatedNotes = (notes: string | null | undefined): string => {
+  if (!notes || notes.trim() === '') return ''; // 返回空字符串，如果没有备注
+  const maxLength = 100;
+  if (notes.length <= maxLength) return notes;
+  return notes.substring(0, maxLength) + '...';
+};
+
+
+
+// --- Connect All Filtered Connections ---
+const isConnectingAll = ref(false);
+
+const handleConnectAllFilteredConnections = async () => {
+  if (isConnectingAll.value || isLoadingConnections.value) return;
+
+  const sshConnectionsToConnect = filteredAndSortedConnections.value.filter(conn => conn.type === 'SSH');
+  if (sshConnectionsToConnect.length === 0) {
+    console.warn(t('connections.messages.noSshConnectionsToConnectAll', '没有可连接的 SSH 筛选结果。'));
+    // Optionally, use a UI notification if available in your project
+    // e.g., uiNotificationsStore.addNotification({ message: t('connections.messages.noSshConnectionsToConnectAll'), type: 'info' });
+    return;
+  }
+
+  isConnectingAll.value = true;
+  try {
+    for (const conn of sshConnectionsToConnect) {
+      connectTo(conn);
+      // Consider a small delay if you want to visually see connections initiating one by one,
+      // or if connectTo triggers operations that might benefit from not being fired too rapidly.
+      // await new Promise(resolve => setTimeout(resolve, 200)); // Example delay
+    }
+  } catch (error) {
+    console.error("Error connecting to all filtered SSH connections:", error);
+    // uiNotificationsStore.addNotification({ message: t('connections.errors.connectAllSshFailed', '连接全部 SSH 操作失败。'), type: 'error' });
+  } finally {
+    isConnectingAll.value = false;
+  }
+};
+
+</script>
+
+<template>
+  <div class="p-4 md:p-6 lg:p-8 bg-background text-foreground"> <!-- 最外层，负责背景和整体内边距 -->
+    <div class="max-w-screen-lg mx-auto"> <!-- 将 xl 修改为 lg -->
+      <h1 class="text-2xl font-semibold mb-6">{{ t('nav.connections', '连接管理') }}</h1>
+
+      <div class="bg-card text-card-foreground shadow rounded-lg overflow-hidden border border-border min-h-[400px]"> <!-- 移除了 max-w-screen-2xl mx-auto -->
+        <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-wrap sm:flex-nowrap items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
+          <!-- Batch Edit Toggle -->
+          <div class="flex items-center mr-3">
+            <label for="batch-edit-toggle" class="mr-2 text-sm font-medium text-text-secondary">{{ t('connections.batchEdit.toggleLabel', '批量修改') }}</label>
+            <button
+              id="batch-edit-toggle"
+              @click="toggleBatchEditMode"
+              :class="[
+                'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
+                isBatchEditMode ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
+              ]"
+              role="switch"
+              :aria-checked="isBatchEditMode"
+            >
+              <span
+                aria-hidden="true"
+                :class="[
+                  'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+                  isBatchEditMode ? 'translate-x-5' : 'translate-x-0'
+                ]"
+              ></span>
+            </button>
+          </div>
+
+          <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">
+           <select
+              v-model="selectedTagId"
+              class="h-8 px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary appearance-none bg-no-repeat bg-right pr-8"
+              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 16px 12px;"
+              aria-label="Filter connections by tag"
+              :disabled="isLoadingTags"
+            >
+              <option :value="null">{{ t('dashboard.filterTags.all', '所有标签') }}</option>
+              <option v-if="isLoadingTags" disabled>{{ t('common.loading') }}</option>
+              <option v-for="tag in (tags as TagInfo[])" :key="tag.id" :value="tag.id">
+                {{ tag.name }}
+              </option>
+            </select>
+
+           <select
+              v-model="localSortBy"
+              class="h-8 px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary appearance-none bg-no-repeat bg-right pr-8"
+              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 16px 12px;"
+              aria-label="Sort connections by"
+            >
+              <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+                {{ t(option.labelKey, option.value.replace('_', ' ')) }}
+              </option>
+            </select>
+
+            <button
+              @click="toggleSortOrder"
+              class="h-8 px-1.5 py-1 border border-border rounded hover:bg-muted focus:outline-none focus:ring-1 focus:ring-primary flex items-center justify-center"
+              :aria-label="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
+              :title="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
+            >
+              <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a', 'w-4 h-4']"></i>
+            </button>
+          </div>
+          <button @click="openAddConnectionForm" :title="t('connections.addConnection', 'Add Connection')" class="h-8 w-8 bg-button rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0">
+            <i class="fas fa-plus" style="color: white;"></i>
+          </button>
+          <!-- Test All Filtered Connections Button -->
+          <button
+            @click="handleTestAllFilteredConnections"
+            :disabled="isTestingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
+            class="h-8 px-3 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
+            :title="t('connections.actions.testAllFiltered', '测试全部筛选的SSH连接')"
+          >
+            <i v-if="isTestingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2"></i>
+            <i v-else class="fas fa-check-double mr-1 sm:mr-2"></i>
+            <span class="hidden sm:inline">{{ t('connections.actions.testAllFiltered') }}</span>
+          </button>
+          <!-- Connect All Filtered Connections Button -->
+          <button
+            @click="handleConnectAllFilteredConnections"
+            :disabled="isConnectingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
+            class="h-8 px-3 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
+          >
+            <i v-if="isConnectingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2"></i>
+            <i v-else class="fas fa-network-wired mr-1 sm:mr-2"></i>
+            <span class="hidden sm:inline">{{ t('workspaceConnectionList.connectAllSshInGroupMenu', '连接全部') }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Batch Action Buttons -->
+      <div v-if="isBatchEditMode" class="px-4 py-2 border-b border-border bg-card flex flex-wrap items-center gap-2">
+        <button
+          @click="selectAllConnections"
+          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
+        >
+          {{ t('connections.batchEdit.selectAll', '全选') }} ({{ selectedConnectionIdsForBatch.size }})
+        </button>
+        <button
+          @click="deselectAllConnections"
+          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
+        >
+          {{ t('connections.batchEdit.deselectAll', '取消全选') }}
+        </button>
+        <button
+          @click="invertSelection"
+          class="px-3 py-1.5 text-sm bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none transition duration-150 ease-in-out"
+        >
+          {{ t('connections.batchEdit.invertSelection', '反选') }}
+        </button>
+        <button
+          @click="openBatchEditModal"
+          :disabled="selectedConnectionIdsForBatch.size === 0"
+          class="px-4 py-1.5 text-sm bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <i class="fas fa-edit mr-1"></i>
+          {{ t('connections.batchEdit.editSelected', '编辑选中') }}
+        </button>
+      </div>
+
+      <div class="p-4">
+        <div v-if="isLoadingConnections && filteredAndSortedConnections.length === 0" class="text-center text-text-secondary">{{ t('common.loading') }}</div>
+        <ul v-else-if="filteredAndSortedConnections.length > 0" class="space-y-3">
+          <li
+            v-for="conn in filteredAndSortedConnections"
+            :key="conn.id"
+            @click="handleConnectionClick(conn.id)"
+            :class="[
+              'flex items-center p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out', // Changed: items-center, removed justify-between
+              { 'ring-2 ring-primary ring-offset-1 ring-offset-background': isBatchEditMode && isConnectionSelectedForBatch(conn.id) },
+              { 'cursor-pointer hover:bg-border/70': isBatchEditMode },
+              { 'hover:bg-border/30': !isBatchEditMode }
+            ]"
+          >
+            <div class="flex-1 min-w-0 mr-3"> <!-- Changed: flex-1 min-w-0 mr-3 -->
+              <span class="font-medium block truncate flex items-center" :title="conn.name || ''">
+                <i :class="['fas', conn.type === 'VNC' ? 'fa-plug' : (conn.type === 'RDP' ? 'fa-desktop' : 'fa-server'), 'mr-2 w-4 text-center text-text-secondary']"></i>
+                <span>{{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}</span>
+              </span>
+              <span class="text-sm text-text-secondary block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
+                {{ conn.username }}@{{ conn.host }}:{{ conn.port }}
+              </span>
+              <span class="text-xs text-text-alt block">
+                {{ t('dashboard.lastConnected', '上次连接:') }} {{ formatRelativeTime(conn.last_connected_at) }}
+              </span>
+              <!-- 备注信息移到这里 -->
+              <div v-if="conn.notes && conn.notes.trim() !== ''" class="text-xs text-text-secondary mt-1">
+                <span class="font-medium text-text-alt">{{ t('connections.form.notes', '备注:') }}</span>
+                <span class="break-words leading-snug ml-1" :title="conn.notes">
+                  {{ getTruncatedNotes(conn.notes) }}
+                </span>
+              </div>
+              <div v-if="getTagNames(conn.tag_ids).length > 0" class="flex flex-wrap gap-1 mt-1.5">
+                <span
+                  v-for="tagName in getTagNames(conn.tag_ids)"
+                  :key="tagName"
+                  class="px-1.5 py-0.5 text-xs rounded bg-muted text-muted-foreground border border-border"
+                >
+                  {{ tagName }}
+                </span>
+              </div>
+              <!-- Test Result Display -->
+              <div
+                v-if="conn.type === 'SSH' && connectionTestStates.get(conn.id) && connectionTestStates.get(conn.id)?.status !== 'idle'"
+                class="text-xs mt-1.5 pt-1 border-t border-border/30"
+              >
+                <div v-if="connectionTestStates.get(conn.id)?.status === 'testing'" class="text-text-secondary animate-pulse flex items-center">
+                  <i class="fas fa-spinner fa-spin mr-1.5 text-xs"></i>
+                  {{ t('connections.test.testingInProgress', '测试中...') }}
+                </div>
+                <div
+                  v-else-if="connectionTestStates.get(conn.id)?.status === 'success'"
+                  class="font-medium flex items-center"
+                  :style="{ color: connectionTestStates.get(conn.id)?.latencyColor || 'inherit' }"
+                >
+                  <i class="fas fa-check-circle mr-1.5 text-xs"></i>
+                  {{ connectionTestStates.get(conn.id)?.resultText }}
+                </div>
+                <div
+                  v-else-if="connectionTestStates.get(conn.id)?.status === 'error'"
+                  class="text-error font-medium flex items-center"
+                >
+                  <i class="fas fa-times-circle mr-1.5 text-xs"></i>
+                  {{ t('connections.test.errorPrefix', '错误:') }} {{ connectionTestStates.get(conn.id)?.resultText }}
+                </div>
+              </div>
+            </div>
+            <!-- 中间备注区域已被移除 -->
+            <div class="flex items-center space-x-2 flex-shrink-0">
+              <!-- Test Single Connection Button -->
+              <button
+                v-if="conn.type === 'SSH'"
+                @click.stop="handleTestSingleConnection(conn)"
+                :disabled="isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled"
+                class="px-3 py-1.5 bg-transparent text-foreground border border-border rounded-md shadow-sm hover:bg-border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
+                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled }"
+                :title="getSingleTestButtonInfo(conn.id, conn.type).title"
+              >
+                <i :class="[getSingleTestButtonInfo(conn.id, conn.type).iconClass, 'w-4 text-center', getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing' ? 'mr-1' : '']"></i>
+                <span v-if="getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing'">{{ t(getSingleTestButtonInfo(conn.id, conn.type).textKey) }}</span>
+              </button>
+              <button
+                @click.stop="openEditConnectionForm(conn)"
+                class="px-3 py-1.5 bg-transparent text-foreground border border-border rounded-md shadow-sm hover:bg-border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
+                :disabled="isBatchEditMode"
+                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
+              >
+                <i class="fas fa-pencil-alt mr-1"></i>{{ t('connections.actions.edit') }}
+              </button>
+              <button
+                @click.stop="connectTo(conn)"
+                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium h-9 flex items-center justify-center"
+                :disabled="isBatchEditMode"
+                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
+              >
+                {{ t('connections.actions.connect') }}
+              </button>
+            </div>
+          </li>
+        </ul>
+        <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>
+    </div> <!-- 结束新增的包裹层 -->
+
+    <AddConnectionForm
+      v-if="showAddEditConnectionForm"
+      :connectionToEdit="connectionToEdit"
+      @close="handleFormClose"
+      @connection-added="handleConnectionModified"
+      @connection-updated="handleConnectionModified"
+    />
+
+    <BatchEditConnectionForm
+      v-if="showBatchEditForm"
+      :visible="showBatchEditForm"
+      :connection-ids="Array.from(selectedConnectionIdsForBatch)"
+      @update:visible="handleBatchEditFormClose"
+      @saved="handleBatchEditSaved"
+    />
+  </div>
+</template>

packages/frontend/src/views/DashboardView.vue

@@ -355,7 +355,7 @@ const handleConnectionModified = async () => {
               <div class="flex-grow mr-4 overflow-hidden">
                 <span class="font-medium block truncate flex items-center" :title="conn.name || ''">
                   <i :class="['fas', conn.type === 'VNC' ? 'fa-plug' : (conn.type === 'RDP' ? 'fa-desktop' : 'fa-server'), 'mr-2 w-4 text-center text-text-secondary']"></i>
-                  <span>{{ conn.name || t('connections.unnamed') }}</span>
+                  <span>{{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}</span>
                 </span>
                 <span class="text-sm text-text-secondary block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
                   {{ conn.username }}@{{ conn.host }}:{{ conn.port }}

packages/frontend/src/views/LoginView.vue

@@ -51,7 +51,6 @@ const resetCaptchaWidget = () => {
   // Reset reCAPTCHA v2 if it exists
   recaptchaWidget.value?.reset();
 };
-// --- End CAPTCHA Event Handlers ---
 
 
 // 处理登录或 2FA 验证提交
@@ -67,8 +66,6 @@ const handleSubmit = async () => {
       return; // Stop submission if CAPTCHA is required but not completed
     }
   }
-  // --- End CAPTCHA Check ---
-  // --- End CAPTCHA Check ---
 
   try {
     if (loginRequires2FA.value) {