feat: 后端: 在建立 SSH 连接时应用代理配置

packages/frontend/src/components/AddConnectionForm.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue'; // 引入 watch 和 computed
+import { ref, reactive, watch, computed, onMounted } from 'vue'; // 引入 onMounted
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store'; // 引入 ConnectionInfo
+import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store';
+import { useProxiesStore } from '../stores/proxies.store'; // 引入代理 Store
 
-// 定义组件发出的事件 (添加 connection-updated)
+// 定义组件发出的事件
 const emit = defineEmits(['close', 'connection-added', 'connection-updated']);
 
 // 定义 Props
@@ -14,7 +15,9 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const connectionsStore = useConnectionsStore();
-const { isLoading, error: storeError } = storeToRefs(connectionsStore); // 重命名 error 避免冲突
+const proxiesStore = useProxiesStore(); // 获取代理 store 实例
+const { isLoading: isConnLoading, error: connStoreError } = storeToRefs(connectionsStore);
+const { proxies, isLoading: isProxyLoading, error: proxyStoreError } = storeToRefs(proxiesStore); // 获取代理列表和状态
 
 // 表单数据模型
 const initialFormData = {
@@ -26,10 +29,13 @@ const initialFormData = {
   password: '',
   private_key: '',
   passphrase: '',
+  proxy_id: null as number | null, // 新增 proxy_id 字段
 };
 const formData = reactive({ ...initialFormData });
 
 const formError = ref<string | null>(null); // 表单级别的错误信息
+const isLoading = computed(() => isConnLoading.value || isProxyLoading.value); // 合并加载状态
+const storeError = computed(() => connStoreError.value || proxyStoreError.value); // 合并错误状态
 
 // 计算属性判断是否为编辑模式
 const isEditMode = computed(() => !!props.connectionToEdit);
@@ -41,6 +47,7 @@ const formTitle = computed(() => {
 
 // 计算属性动态设置提交按钮文本
 const submitButtonText = computed(() => {
+    // 使用合并后的 isLoading
     if (isLoading.value) {
         return isEditMode.value ? t('connections.form.saving') : t('connections.form.adding');
     }
@@ -57,7 +64,8 @@ watch(() => props.connectionToEdit, (newVal) => {
         formData.port = newVal.port;
         formData.username = newVal.username;
         formData.auth_method = newVal.auth_method;
-        // 清空敏感字段，要求用户重新输入以更新
+        formData.proxy_id = newVal.proxy_id ?? null; // 填充 proxy_id
+        // 清空敏感字段
         formData.password = '';
         formData.private_key = '';
         formData.passphrase = '';
@@ -65,12 +73,18 @@ watch(() => props.connectionToEdit, (newVal) => {
         // 添加模式：重置表单
         Object.assign(formData, initialFormData);
     }
-}, { immediate: true }); // immediate: true 确保初始加载时也执行
+}, { immediate: true });
+
+// 组件挂载时获取代理列表
+onMounted(() => {
+    proxiesStore.fetchProxies();
+});
 
 // 处理表单提交
 const handleSubmit = async () => {
-  formError.value = null; // 清除之前的错误
-  connectionsStore.error = null; // 清除 store 中的旧错误
+  formError.value = null;
+  connectionsStore.error = null;
+  proxiesStore.error = null; // 同时清除代理 store 的错误
 
   // 基础前端验证 (保持不变)
   if (!formData.name || !formData.host || !formData.username) {
@@ -81,15 +95,39 @@ const handleSubmit = async () => {
       formError.value = t('connections.form.errorPort');
       return;
   }
-  // 根据认证方式验证特定字段
-  if (formData.auth_method === 'password' && !formData.password) {
-      formError.value = t('connections.form.errorPasswordRequired');
-      return;
+
+  // --- 更新后的验证逻辑 ---
+  // 1. 添加模式下，密码/密钥是必填的
+  if (!isEditMode.value) {
+      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;
+      }
   }
-  if (formData.auth_method === 'key' && !formData.private_key) {
-      formError.value = t('connections.form.errorPrivateKeyRequired');
-      return;
+  // 2. 编辑模式下，如果切换到密码认证，则密码必填
+  else if (isEditMode.value && formData.auth_method === 'password' && !formData.password) {
+      // 检查原始连接的认证方式，如果原始不是密码，则切换时必须提供密码
+      if (props.connectionToEdit?.auth_method !== 'password') {
+          formError.value = t('connections.form.errorPasswordRequiredOnSwitch'); // 新增翻译键
+          return;
+      }
+      // 如果原始就是密码，编辑时密码可以不填（表示不修改）
   }
+  // 3. 编辑模式下，如果切换到密钥认证，则私钥必填
+  else if (isEditMode.value && formData.auth_method === 'key' && !formData.private_key) {
+       // 检查原始连接的认证方式，如果原始不是密钥，则切换时必须提供私钥
+       if (props.connectionToEdit?.auth_method !== 'key') {
+           formError.value = t('connections.form.errorPrivateKeyRequiredOnSwitch'); // 新增翻译键
+           return;
+       }
+       // 如果原始就是密钥，编辑时私钥可以不填（表示不修改）
+  }
+  // --- 验证逻辑结束 ---
+
 
   // 构建要发送的数据 (区分添加和编辑)
   const dataToSend: any = {
@@ -98,21 +136,27 @@ const handleSubmit = async () => {
       port: formData.port,
       username: formData.username,
       auth_method: formData.auth_method,
+      proxy_id: formData.proxy_id || null,
   };
 
-  // 只有当用户输入了新的密码/密钥时才包含它们
-  if (formData.auth_method === 'password' && formData.password) {
-      dataToSend.password = formData.password;
+  // 处理敏感字段
+  if (formData.auth_method === 'password') {
+      // 仅当用户输入新密码或在编辑模式下明确清空时才发送
+      if (formData.password) {
+          dataToSend.password = formData.password;
+      } else if (isEditMode.value && formData.password === '') {
+          dataToSend.password = null; // 发送 null 表示清空密码 (后端需要能处理 null)
+      }
   } else if (formData.auth_method === 'key') {
-      if (formData.private_key) { // 只有输入了新私钥才发送
+      // 仅当用户输入新私钥时才发送
+      if (formData.private_key) {
           dataToSend.private_key = formData.private_key;
       }
-      if (formData.passphrase) { // 只有输入了新密码短语才发送
+      // 仅当用户输入新密码短语或在编辑模式下明确清空时才发送
+      if (formData.passphrase) {
           dataToSend.passphrase = formData.passphrase;
-      } else if (isEditMode.value && formData.private_key && !formData.passphrase) {
-          // 如果是编辑模式，输入了新私钥但清空了密码短语，需要显式发送空字符串或 null
-          // 取决于后端如何处理清空密码短语。假设发送空字符串。
-          dataToSend.passphrase = '';
+      } else if (isEditMode.value && formData.passphrase === '') {
+          dataToSend.passphrase = null; // 发送 null 表示清空密码短语
       }
   }
 
@@ -171,14 +215,16 @@ const handleSubmit = async () => {
         <!-- 密码输入 (条件渲染) -->
         <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'" />
+          <!-- 编辑模式下非必填 -->
+          <input type="password" id="conn-password" v-model="formData.password" :required="formData.auth_method === 'password' && !isEditMode" />
         </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>
+                <!-- 编辑模式下非必填 -->
+                <textarea id="conn-private-key" v-model="formData.private_key" rows="6" :required="formData.auth_method === 'key' && !isEditMode"></textarea>
             </div>
             <div class="form-group">
                 <label for="conn-passphrase">{{ t('connections.form.passphrase') }} ({{ t('connections.form.optional') }})</label>
@@ -189,16 +235,29 @@ const handleSubmit = async () => {
              </div>
         </div>
 
+        <!-- 新增：代理选择 -->
+        <div class="form-group">
+            <label for="conn-proxy">{{ t('connections.form.proxy') }} ({{ t('connections.form.optional') }})</label>
+            <select id="conn-proxy" v-model="formData.proxy_id">
+                <option :value="null">{{ t('connections.form.noProxy') }}</option>
+                <option v-for="proxy in proxies" :key="proxy.id" :value="proxy.id">
+                    {{ proxy.name }} ({{ proxy.type }} - {{ proxy.host }}:{{ proxy.port }})
+                </option>
+            </select>
+             <div v-if="isProxyLoading" class="loading-small">{{ t('proxies.loading') }}</div>
+             <div v-if="proxyStoreError" class="error-small">{{ t('proxies.error', { error: proxyStoreError }) }}</div>
+        </div>
+
         <!-- 显示 storeError 或 formError -->
         <div v-if="formError || storeError" class="error-message">
-          {{ formError || storeError }}
+          {{ formError || storeError }} <!-- 使用合并后的 storeError -->
         </div>
 
         <div class="form-actions">
-          <button type="submit" :disabled="isLoading">
-            {{ submitButtonText }} <!-- 使用计算属性 -->
+          <button type="submit" :disabled="isLoading"> <!-- 使用合并后的 isLoading -->
+            {{ submitButtonText }}
           </button>
-          <button type="button" @click="emit('close')" :disabled="isLoading">{{ t('connections.form.cancel') }}</button>
+          <button type="button" @click="emit('close')" :disabled="isLoading">{{ t('connections.form.cancel') }}</button> <!-- 使用合并后的 isLoading -->
         </div>
       </form>
     </div>

packages/frontend/src/components/AddProxyForm.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useProxiesStore, ProxyInfo } from '../stores/proxies.store';
+
+// 定义组件发出的事件
+const emit = defineEmits(['close', 'proxy-added', 'proxy-updated']);
+
+// 定义 Props
+const props = defineProps<{
+  proxyToEdit: ProxyInfo | null; // 接收要编辑的代理对象
+}>();
+
+const { t } = useI18n();
+const proxiesStore = useProxiesStore();
+const { isLoading, error: storeError } = storeToRefs(proxiesStore);
+
+// 表单数据模型
+const initialFormData = {
+  name: '',
+  type: 'SOCKS5' as 'SOCKS5' | 'HTTP',
+  host: '',
+  port: 1080, // 默认 SOCKS5 端口
+  username: '',
+  password: '',
+};
+const formData = reactive({ ...initialFormData });
+
+const formError = ref<string | null>(null); // 表单级别的错误信息
+
+// 计算属性判断是否为编辑模式
+const isEditMode = computed(() => !!props.proxyToEdit);
+
+// 计算属性动态设置表单标题
+const formTitle = computed(() => {
+    return isEditMode.value ? t('proxies.form.titleEdit') : t('proxies.form.title');
+});
+
+// 计算属性动态设置提交按钮文本
+const submitButtonText = computed(() => {
+    if (isLoading.value) {
+        return isEditMode.value ? t('proxies.form.saving') : t('proxies.form.adding');
+    }
+    return isEditMode.value ? t('proxies.form.confirmEdit') : t('proxies.form.confirm');
+});
+
+// 监听 prop 变化以填充或重置表单
+watch(() => props.proxyToEdit, (newVal) => {
+    formError.value = null; // 清除错误
+    if (newVal) {
+        // 编辑模式：填充表单，但不填充密码
+        formData.name = newVal.name;
+        formData.type = newVal.type;
+        formData.host = newVal.host;
+        formData.port = newVal.port;
+        formData.username = newVal.username ?? '';
+        formData.password = ''; // 清空密码，要求用户重新输入以更新
+    } else {
+        // 添加模式：重置表单
+        Object.assign(formData, initialFormData);
+    }
+}, { immediate: true });
+
+// 处理表单提交
+const handleSubmit = async () => {
+  formError.value = null;
+  proxiesStore.error = null;
+
+  // 基础前端验证 (保持不变)
+  if (!formData.name || !formData.host || !formData.port) {
+    formError.value = t('proxies.form.errorRequiredFields');
+    return;
+  }
+   if (formData.port <= 0 || formData.port > 65535) {
+      formError.value = t('proxies.form.errorPort');
+      return;
+  }
+
+  // 构建要发送的数据
+  const dataToSend: any = {
+      name: formData.name,
+      type: formData.type,
+      host: formData.host,
+      port: formData.port,
+      username: formData.username || null, // 如果为空字符串则发送 null
+  };
+
+  // 处理密码字段
+  // 仅当用户输入新密码或在编辑模式下明确清空时才发送
+  if (formData.password) {
+      dataToSend.password = formData.password;
+  } else if (isEditMode.value && formData.password === '') {
+      dataToSend.password = null; // 发送 null 表示清空密码 (后端需要能处理 null)
+  }
+  // 如果是添加模式且密码为空，则不发送 password 字段
+
+  let success = false;
+  if (isEditMode.value && props.proxyToEdit) {
+      success = await proxiesStore.updateProxy(props.proxyToEdit.id, dataToSend);
+      if (success) {
+          emit('proxy-updated');
+      } else {
+          formError.value = t('proxies.form.errorUpdate', { error: proxiesStore.error || '未知错误' });
+      }
+  } else {
+      success = await proxiesStore.addProxy(dataToSend);
+      if (success) {
+          emit('proxy-added');
+      } else {
+          formError.value = t('proxies.form.errorAdd', { error: proxiesStore.error || '未知错误' });
+      }
+  }
+};
+</script>
+
+<template>
+  <div class="add-proxy-form-overlay">
+    <div class="add-proxy-form">
+      <h3>{{ formTitle }}</h3>
+      <form @submit.prevent="handleSubmit">
+        <div class="form-group">
+          <label for="proxy-name">{{ t('proxies.form.name') }}</label>
+          <input type="text" id="proxy-name" v-model="formData.name" required />
+        </div>
+        <div class="form-group">
+          <label for="proxy-type">{{ t('proxies.form.type') }}</label>
+          <select id="proxy-type" v-model="formData.type">
+            <option value="SOCKS5">SOCKS5</option>
+            <option value="HTTP">HTTP</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="proxy-host">{{ t('proxies.form.host') }}</label>
+          <input type="text" id="proxy-host" v-model="formData.host" required />
+        </div>
+        <div class="form-group">
+          <label for="proxy-port">{{ t('proxies.form.port') }}</label>
+          <input type="number" id="proxy-port" v-model.number="formData.port" required min="1" max="65535" />
+        </div>
+        <div class="form-group">
+          <label for="proxy-username">{{ t('proxies.form.username') }} ({{ t('proxies.form.optional') }})</label>
+          <input type="text" id="proxy-username" v-model="formData.username" />
+        </div>
+        <div class="form-group">
+          <label for="proxy-password">{{ t('proxies.form.password') }} ({{ t('proxies.form.optional') }})</label>
+          <input type="password" id="proxy-password" v-model="formData.password" />
+           <small v-if="isEditMode">{{ t('proxies.form.passwordUpdateNote') }}</small>
+        </div>
+
+        <div v-if="formError || storeError" class="error-message">
+          {{ formError || storeError }}
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" :disabled="isLoading">
+            {{ submitButtonText }}
+          </button>
+          <button type="button" @click="emit('close')" :disabled="isLoading">{{ t('proxies.form.cancel') }}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 样式可以复用 AddConnectionForm 的，或者根据需要调整 */
+.add-proxy-form-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.add-proxy-form {
+  background-color: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  min-width: 300px;
+  max-width: 500px;
+}
+
+h3 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: bold;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="password"],
+select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+small {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.8em;
+    color: #666;
+}
+
+.error-message {
+  color: red;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.form-actions button {
+  margin-left: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #007bff;
+  color: white;
+}
+
+.form-actions button[type="button"] {
+  background-color: #ccc;
+  color: #333;
+}
+
+.form-actions button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>

packages/frontend/src/components/ProxyList.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useProxiesStore, ProxyInfo } from '../stores/proxies.store';
+
+const { t } = useI18n();
+const proxiesStore = useProxiesStore();
+const { proxies, isLoading, error } = storeToRefs(proxiesStore);
+
+// 定义组件发出的事件
+const emit = defineEmits(['edit-proxy']);
+
+// 处理删除代理的方法
+const handleDelete = async (proxy: ProxyInfo) => {
+    const confirmMessage = t('proxies.prompts.confirmDelete', { name: proxy.name });
+    if (window.confirm(confirmMessage)) {
+        const success = await proxiesStore.deleteProxy(proxy.id);
+        if (!success) {
+            alert(t('proxies.errors.deleteFailed', { error: proxiesStore.error || '未知错误' }));
+        }
+    }
+};
+
+// 辅助函数：格式化时间戳 (可以考虑提取到公共工具函数)
+const formatTimestamp = (timestamp: number | null): string => {
+  if (!timestamp) return '-';
+  return new Date(timestamp * 1000).toLocaleString();
+};
+</script>
+
+<template>
+  <div class="proxy-list">
+    <div v-if="isLoading" class="loading">{{ t('proxies.loading') }}</div>
+    <div v-else-if="error" class="error">{{ t('proxies.error', { error: error }) }}</div>
+    <div v-else-if="proxies.length === 0" class="no-proxies">
+      {{ t('proxies.noProxies') }}
+    </div>
+    <table v-else>
+      <thead>
+        <tr>
+          <th>{{ t('proxies.table.name') }}</th>
+          <th>{{ t('proxies.table.type') }}</th>
+          <th>{{ t('proxies.table.host') }}</th>
+          <th>{{ t('proxies.table.port') }}</th>
+          <th>{{ t('proxies.table.user') }}</th>
+          <th>{{ t('proxies.table.updatedAt') }}</th>
+          <th>{{ t('proxies.table.actions') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="proxy in proxies" :key="proxy.id">
+          <td>{{ proxy.name }}</td>
+          <td>{{ proxy.type }}</td>
+          <td>{{ proxy.host }}</td>
+          <td>{{ proxy.port }}</td>
+          <td>{{ proxy.username || '-' }}</td>
+          <td>{{ formatTimestamp(proxy.updated_at) }}</td>
+          <td>
+            <button @click="emit('edit-proxy', proxy)">{{ t('proxies.actions.edit') }}</button>
+            <button @click="handleDelete(proxy)">{{ t('proxies.actions.delete') }}</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.proxy-list {
+  margin-top: 1rem;
+}
+
+.loading, .error, .no-proxies {
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+
+.error {
+  color: red;
+  border-color: red;
+}
+
+.no-proxies {
+  color: #666;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 0.5rem;
+  text-align: left;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+button {
+  margin-right: 0.5rem;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+}
+</style>