update

2025-04-15 01:39:40 +08:00
parent a974b8b1d9
commit 0e863456a2
22 changed files with 2522 additions and 1722 deletions
@@ -1,54 +1,138 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { storeToRefs } from 'pinia'; // 导入 storeToRefs
-import { useI18n } from 'vue-i18n'; // 引入 useI18n
-import { useConnectionsStore } from '../stores/connections.store';
+import { ref, reactive, watch, computed } from 'vue'; // 引入 watch 和 computed
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store'; // 引入 ConnectionInfo

-// 定义组件发出的事件
-const emit = defineEmits(['close', 'connection-added']);
+// 定义组件发出的事件 (添加 connection-updated)
+const emit = defineEmits(['close', 'connection-added', 'connection-updated']);

-const { t } = useI18n(); // 获取 t 函数
+// 定义 Props
+const props = defineProps<{
+  connectionToEdit: ConnectionInfo | null; // 接收要编辑的连接对象
+}>();
+
+const { t } = useI18n();
 const connectionsStore = useConnectionsStore();
-const { isLoading, error } = storeToRefs(connectionsStore); // 获取加载和错误状态
+const { isLoading, error: storeError } = storeToRefs(connectionsStore); // 重命名 error 避免冲突

 // 表单数据模型
-const formData = reactive({
+const initialFormData = {
  name: '',
  host: '',
  port: 22,
  username: '',
+  auth_method: 'password' as 'password' | 'key',
  password: '',
-});
+  private_key: '',
+  passphrase: '',
+};
+const formData = reactive({ ...initialFormData });

 const formError = ref<string | null>(null); // 表单级别的错误信息

+// 计算属性判断是否为编辑模式
+const isEditMode = computed(() => !!props.connectionToEdit);
+
+// 计算属性动态设置表单标题
+const formTitle = computed(() => {
+    return isEditMode.value ? t('connections.form.titleEdit') : t('connections.form.title');
+});
+
+// 计算属性动态设置提交按钮文本
+const submitButtonText = computed(() => {
+    if (isLoading.value) {
+        return isEditMode.value ? t('connections.form.saving') : t('connections.form.adding');
+    }
+    return isEditMode.value ? t('connections.form.confirmEdit') : t('connections.form.confirm');
+});
+
+// 监听 prop 变化以填充或重置表单
+watch(() => props.connectionToEdit, (newVal) => {
+    formError.value = null; // 清除错误
+    if (newVal) {
+        // 编辑模式：填充表单，但不填充敏感信息
+        formData.name = newVal.name;
+        formData.host = newVal.host;
+        formData.port = newVal.port;
+        formData.username = newVal.username;
+        formData.auth_method = newVal.auth_method;
+        // 清空敏感字段，要求用户重新输入以更新
+        formData.password = '';
+        formData.private_key = '';
+        formData.passphrase = '';
+    } else {
+        // 添加模式：重置表单
+        Object.assign(formData, initialFormData);
+    }
+}, { immediate: true }); // immediate: true 确保初始加载时也执行
+
 // 处理表单提交
 const handleSubmit = async () => {
  formError.value = null; // 清除之前的错误
+  connectionsStore.error = null; // 清除 store 中的旧错误

-  // 基础前端验证 (可以添加更复杂的验证)
-  if (!formData.name || !formData.host || !formData.username || !formData.password) {
-    formError.value = t('connections.form.errorRequired');
+  // 基础前端验证 (保持不变)
+  if (!formData.name || !formData.host || !formData.username) {
+    formError.value = t('connections.form.errorRequiredFields'); // 更通用的错误消息
    return;
  }
  if (formData.port <= 0 || formData.port > 65535) {
      formError.value = t('connections.form.errorPort');
      return;
  }
+  // 根据认证方式验证特定字段
+  if (formData.auth_method === 'password' && !formData.password) {
+      formError.value = t('connections.form.errorPasswordRequired');
+      return;
+  }
+  if (formData.auth_method === 'key' && !formData.private_key) {
+      formError.value = t('connections.form.errorPrivateKeyRequired');
+      return;
+  }

-  const success = await connectionsStore.addConnection({
+  // 构建要发送的数据 (区分添加和编辑)
+  const dataToSend: any = {
      name: formData.name,
      host: formData.host,
      port: formData.port,
      username: formData.username,
-      password: formData.password,
-  });
+      auth_method: formData.auth_method,
+  };

-  if (success) {
-    emit('connection-added'); // 通知父组件添加成功
+  // 只有当用户输入了新的密码/密钥时才包含它们
+  if (formData.auth_method === 'password' && formData.password) {
+      dataToSend.password = formData.password;
+  } else if (formData.auth_method === 'key') {
+      if (formData.private_key) { // 只有输入了新私钥才发送
+          dataToSend.private_key = formData.private_key;
+      }
+      if (formData.passphrase) { // 只有输入了新密码短语才发送
+          dataToSend.passphrase = formData.passphrase;
+      } else if (isEditMode.value && formData.private_key && !formData.passphrase) {
+          // 如果是编辑模式，输入了新私钥但清空了密码短语，需要显式发送空字符串或 null
+          // 取决于后端如何处理清空密码短语。假设发送空字符串。
+          dataToSend.passphrase = '';
+      }
+  }
+
+  let success = false;
+  if (isEditMode.value && props.connectionToEdit) {
+      // 调用更新 action
+      success = await connectionsStore.updateConnection(props.connectionToEdit.id, dataToSend);
+      if (success) {
+          emit('connection-updated'); // 发出更新成功事件
+      } else {
+          formError.value = t('connections.form.errorUpdate', { error: connectionsStore.error || '未知错误' });
+      }
  } else {
-    // 如果 store action 返回 false，则显示 store 中的错误信息
-    formError.value = t('connections.form.errorAdd', { error: connectionsStore.error || '未知错误' });
+      // 调用添加 action
+      success = await connectionsStore.addConnection(dataToSend);
+      if (success) {
+          emit('connection-added'); // 发出添加成功事件
+      } else {
+          formError.value = t('connections.form.errorAdd', { error: connectionsStore.error || '未知错误' });
+      }
  }
 };
 </script>
@@ -56,7 +140,7 @@ const handleSubmit = async () => {
 <template>
  <div class="add-connection-form-overlay">
    <div class="add-connection-form">
-      <h3>{{ t('connections.form.title') }}</h3>
+      <h3>{{ formTitle }}</h3> <!-- 使用计算属性 -->
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="conn-name">{{ t('connections.form.name') }}</label>
@@ -74,19 +158,45 @@ const handleSubmit = async () => {
          <label for="conn-username">{{ t('connections.form.username') }}</label>
          <input type="text" id="conn-username" v-model="formData.username" required />
        </div>
+
+        <!-- 认证方式选择 -->
        <div class="form-group">
-          <label for="conn-password">{{ t('connections.form.password') }}</label>
-          <input type="password" id="conn-password" v-model="formData.password" required />
-          <!-- 提示：MVP 仅支持密码认证 -->
+            <label for="conn-auth-method">{{ t('connections.form.authMethod') }}</label>
+            <select id="conn-auth-method" v-model="formData.auth_method">
+                <option value="password">{{ t('connections.form.authMethodPassword') }}</option>
+                <option value="key">{{ t('connections.form.authMethodKey') }}</option>
+            </select>
        </div>

-        <div v-if="formError || error" class="error-message">
-          {{ formError || error }} <!-- 保持显示具体错误 -->
+        <!-- 密码输入 (条件渲染) -->
+        <div class="form-group" v-if="formData.auth_method === 'password'">
+          <label for="conn-password">{{ t('connections.form.password') }}</label>
+          <input type="password" id="conn-password" v-model="formData.password" :required="formData.auth_method === 'password'" />
+        </div>
+
+        <!-- 密钥输入 (条件渲染) -->
+        <div v-if="formData.auth_method === 'key'">
+            <div class="form-group">
+                <label for="conn-private-key">{{ t('connections.form.privateKey') }}</label>
+                <textarea id="conn-private-key" v-model="formData.private_key" rows="6" :required="formData.auth_method === 'key'"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="conn-passphrase">{{ t('connections.form.passphrase') }} ({{ t('connections.form.optional') }})</label>
+                <input type="password" id="conn-passphrase" v-model="formData.passphrase" />
+            </div>
+             <div class="form-group" v-if="isEditMode && formData.auth_method === 'key'">
+                 <small>{{ t('connections.form.keyUpdateNote') }}</small>
+             </div>
+        </div>
+
+        <!-- 显示 storeError 或 formError -->
+        <div v-if="formError || storeError" class="error-message">
+          {{ formError || storeError }}
        </div>

        <div class="form-actions">
          <button type="submit" :disabled="isLoading">
-            {{ isLoading ? t('connections.form.adding') : t('connections.form.confirm') }}
+            {{ submitButtonText }} <!-- 使用计算属性 -->
          </button>
          <button type="button" @click="emit('close')" :disabled="isLoading">{{ t('connections.form.cancel') }}</button>
        </div>
@@ -136,7 +246,9 @@ label {

 input[type="text"],
 input[type="number"],
-input[type="password"] {
+input[type="password"],
+select,
+textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;