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
@@ -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 -->