feat: 添加连接管理路由

Related to #35
2025-05-16 12:42:07 +08:00
parent af892fcbe9
commit 90db1e218f
8 changed files with 821 additions and 9 deletions
@@ -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="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> <!-- 移动端隐藏 -->
@@ -0,0 +1,349 @@
+<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('connections.batchEdit.updateSuccess', { count: successCount }), type: 'success' });
+      emit('saved');
+    }
+    if (successCount < props.connectionIds.length) {
+      uiNotificationsStore.addNotification({ message: t('connections.batchEdit.updatePartialFail', { failCount: props.connectionIds.length - successCount }), type: 'warning' });
+    }
+    if (successCount === 0 && props.connectionIds.length > 0) {
+       uiNotificationsStore.addNotification({ message: t('connections.batchEdit.updateAllFail', '所有连接更新失败'), type: 'error' });
+    }
+    emit('update:visible', false);
+  } catch (error: any) {
+    console.error("Batch update error:", error);
+    uiNotificationsStore.addNotification({ message: error.message || t('connections.batchEdit.updateError', '批量更新时发生错误'), 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.form.sectionBasic.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">
+              <label for="batch-port" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.sectionBasic.portPlaceholder', '例如: 22') }}</label>
+              <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"
+                :placeholder="t('connections.batchEdit.portPlaceholder', '输入新端口号')"
+              />
+            </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.title', '认证信息') }}</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.sectionAuth.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" :placeholder="t('connections.batchEdit.authPlaceholder', '留空表示不更改此字段')" />
+              </div>
+              <div>
+                <label for="batch-password" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.sectionAuth.password', '密码') }}</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" :placeholder="t('connections.batchEdit.passwordInfoBatch', '输入新密码，或留空不更改')" />
+                <p class="mt-1 text-xs text-text-alt">{{ t('connections.batchEdit.passwordWarning', '注意：某些连接类型可能不支持空密码或有特定密码策略。') }}</p>
+              </div>
+              <div>
+                <label for="batch-ssh-key" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.sectionAuth.sshKey', '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.sectionAuth.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>
+                <p class="mt-1 text-xs text-text-alt">{{ t('connections.batchEdit.sshKeyInfo', '选择密钥将覆盖密码认证（如果连接类型支持）。') }}</p>
+              </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.title', '高级选项') }}</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.sectionAdvanced.proxy.label', '代理') }}</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.sectionAdvanced.proxy.none', '无代理') }}</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.form.sectionAdvanced.tags.label', '标签') }}</label>
+                <TagInput
+                  :modelValue="formData.tag_ids || []"
+                  @update:modelValue="val => formData.tag_ids = val"
+                  :availableTags="availableTags"
+                  @create-tag="handleCreateTag"
+                  @delete-tag="handleDeleteTag"
+                  :placeholder="t('connections.batchEdit.tagsPlaceholder', '选择或创建标签 (将替换现有标签)')"
+                  :allow-create="true"
+                  :allow-delete="true"
+                  class="mt-1"
+                />
+                 <p class="mt-1 text-xs text-text-alt">{{ t('connections.batchEdit.tagsInfoReplace', '选择的标签将替换所有选中连接的现有标签。') }}</p>
+              </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"
+                  :placeholder="t('connections.batchEdit.notesPlaceholder', '输入新备注，或留空不更改')"
+                ></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.saveChanges', '保存更改') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
@@ -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 -->
@@ -6,6 +6,7 @@
  "nav": {
    "dashboard": "Dashboard",
    "terminal": "Terminal",
+    "connections": "Connections",
    "proxies": "Proxies",
    "login": "Login",
    "logout": "Logout",
@@ -575,6 +575,7 @@
        "auditLogs": "監査ログ",
        "customizeStyle": "外観のカスタマイズ",
        "dashboard": "ダッシュボード",
+        "connections": "接続管理",
        "login": "ログイン",
        "logout": "ログアウト",
        "notifications": "通知管理",
@@ -6,6 +6,7 @@
  "nav": {
    "dashboard": "仪表盘",
    "terminal": "终端",
+    "connections": "连接管理",
    "proxies": "代理管理",
    "login": "登录",
    "logout": "登出",
@@ -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',
@@ -0,0 +1,461 @@
+<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);
+      return nameMatch || usernameMatch || hostMatch || portMatch;
+    });
+  }
+
+  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;
+};
+// --- End Batch Edit Functions ---
+
+</script>
+
+<template>
+  <div class="p-4 md:p-6 lg:p-8 bg-background text-foreground">
+    <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]">
+      <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="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>
+        </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 justify-between p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out',
+              { '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-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>
+              <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 mb-1">
+                {{ t('dashboard.lastConnected', '上次连接:') }} {{ formatRelativeTime(conn.last_connected_at) }}
+              </span>
+              <div v-if="getTagNames(conn.tag_ids).length > 0" class="flex flex-wrap gap-1 mt-1">
+                <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>
+            </div>
+            <div class="flex space-x-2 flex-shrink-0">
+              <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"
+                :disabled="isBatchEditMode"
+                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
+                :title="isBatchEditMode ? t('connections.batchEdit.disabledInBatchMode', '批量模式下禁用') : t('connections.actions.edit', '编辑')"
+              >
+                <i class="fas fa-pencil-alt"></i>
+              </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"
+                :disabled="isBatchEditMode"
+                :class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
+                :title="isBatchEditMode ? t('connections.batchEdit.disabledInBatchMode', '批量模式下禁用') : t('connections.actions.connect', '连接')"
+              >
+                {{ 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>
+
+    <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>