admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Baobhan Sith
2025-04-15 07:31:25 +08:00
parent 0e863456a2
commit 4f2f8b9f07
19 changed files with 1444 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/App.vue
+1
View File
@@ -19,6 +19,7 @@ const handleLogout = () => {
<nav>
<RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> |
<RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink> |
<RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
<RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
<a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
</nav>
packages/frontend/src/components/AddConnectionForm.vue
+89 -30
View File
@@ -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
+258
View File
@@ -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
+110
View File
@@ -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>
packages/frontend/src/locales/en.json
+53 -1
View File
@@ -3,6 +3,7 @@
"nav": {
"dashboard": "Dashboard",
"connections": "Connections",
"proxies": "Proxies",
"login": "Login",
"logout": "Logout"
},
@@ -53,13 +54,17 @@
"errorRequiredFields": "Please fill in all required fields.",
"errorPasswordRequired": "Password is required for password authentication.",
"errorPrivateKeyRequired": "Private key is required for key authentication.",
"errorPasswordRequiredOnSwitch": "Password is required when switching to password authentication.",
"errorPrivateKeyRequiredOnSwitch": "Private key is required when switching to key authentication.",
"errorPort": "Port must be between 1 and 65535.",
"errorAdd": "Failed to add connection: {error}",
"titleEdit": "Edit Connection",
"confirmEdit": "Confirm Edit",
"saving": "Saving...",
"errorUpdate": "Failed to update connection: {error}",
"keyUpdateNote": "Leave private key and passphrase blank to keep the existing key."
"keyUpdateNote": "Leave private key and passphrase blank to keep the existing key.",
"proxy": "Proxy:",
"noProxy": "No Proxy"
},
"prompts": {
"confirmDelete": "Are you sure you want to delete the connection \"{name}\"? This cannot be undone."
@@ -71,6 +76,53 @@
"never": "Never"
}
},
"proxies": {
"title": "Proxy Management",
"addProxy": "Add New Proxy",
"loading": "Loading proxies...",
"error": "Failed to load proxies: {error}",
"noProxies": "No proxies yet. Click 'Add New Proxy' to create one!",
"table": {
"name": "Name",
"type": "Type",
"host": "Host",
"port": "Port",
"user": "User",
"updatedAt": "Updated At",
"actions": "Actions"
},
"actions": {
"edit": "Edit",
"delete": "Delete"
},
"form": {
"title": "Add New Proxy",
"titleEdit": "Edit Proxy",
"name": "Name:",
"type": "Type:",
"host": "Host/IP:",
"port": "Port:",
"username": "Username:",
"password": "Password:",
"optional": "Optional",
"confirm": "Confirm Add",
"confirmEdit": "Confirm Edit",
"adding": "Adding...",
"saving": "Saving...",
"cancel": "Cancel",
"errorRequiredFields": "Please fill in all required fields.",
"errorPort": "Port must be between 1 and 65535.",
"errorAdd": "Failed to add proxy: {error}",
"errorUpdate": "Failed to update proxy: {error}",
"passwordUpdateNote": "Leave password blank to keep the existing password."
},
"prompts": {
"confirmDelete": "Are you sure you want to delete the proxy \"{name}\"? This cannot be undone."
},
"errors": {
"deleteFailed": "Failed to delete proxy: {error}"
}
},
"workspace": {
"statusBar": "Status: {status} (Connection ID: {id})",
"status": {
packages/frontend/src/locales/zh.json
+53 -1
View File
@@ -3,6 +3,7 @@
"nav": {
"dashboard": "仪表盘",
"connections": "连接管理",
"proxies": "代理管理",
"login": "登录",
"logout": "登出"
},
@@ -53,13 +54,17 @@
"errorRequiredFields": "请填写所有必填字段。",
"errorPasswordRequired": "使用密码认证时，密码为必填项。",
"errorPrivateKeyRequired": "使用密钥认证时，私钥为必填项。",
"errorPasswordRequiredOnSwitch": "切换到密码认证时，密码为必填项。",
"errorPrivateKeyRequiredOnSwitch": "切换到密钥认证时，私钥为必填项。",
"errorPort": "端口号必须在 1 到 65535 之间。",
"errorAdd": "添加连接失败: {error}",
"titleEdit": "编辑连接",
"confirmEdit": "确认编辑",
"saving": "正在保存...",
"errorUpdate": "更新连接失败: {error}",
"keyUpdateNote": "将私钥和密码短语留空以保留现有密钥。"
"keyUpdateNote": "将私钥和密码短语留空以保留现有密钥。",
"proxy": "代理:",
"noProxy": "无代理"
},
"prompts": {
"confirmDelete": "确定要删除连接 \"{name}\" 吗？此操作不可撤销。"
@@ -71,6 +76,53 @@
"never": "从未"
}
},
"proxies": {
"title": "代理管理",
"addProxy": "添加新代理",
"loading": "正在加载代理...",
"error": "加载代理列表失败: {error}",
"noProxies": "还没有任何代理配置。点击“添加新代理”来创建一个吧！",
"table": {
"name": "名称",
"type": "类型",
"host": "主机",
"port": "端口",
"user": "用户名",
"updatedAt": "更新时间",
"actions": "操作"
},
"actions": {
"edit": "编辑",
"delete": "删除"
},
"form": {
"title": "添加新代理",
"titleEdit": "编辑代理",
"name": "名称:",
"type": "类型:",
"host": "主机/IP:",
"port": "端口:",
"username": "用户名:",
"password": "密码:",
"optional": "可选",
"confirm": "确认添加",
"confirmEdit": "确认编辑",
"adding": "正在添加...",
"saving": "正在保存...",
"cancel": "取消",
"errorRequiredFields": "请填写所有必填字段。",
"errorPort": "端口号必须在 1 到 65535 之间。",
"errorAdd": "添加代理失败: {error}",
"errorUpdate": "更新代理失败: {error}",
"passwordUpdateNote": "将密码留空以保留现有密码。"
},
"prompts": {
"confirmDelete": "确定要删除代理 \"{name}\" 吗？此操作不可撤销。"
},
"errors": {
"deleteFailed": "删除代理失败: {error}"
}
},
"workspace": {
"statusBar": "状态: {status} (连接 ID: {id})",
"status": {
packages/frontend/src/router/index.ts
+9 -1
View File
@@ -22,6 +22,12 @@ const routes: Array<RouteRecordRaw> = [
name: 'Connections',
component: () => import('../views/ConnectionsView.vue')
},
// 新增：代理管理页面
{
path: '/proxies',
name: 'Proxies',
component: () => import('../views/ProxiesView.vue')
},
// 工作区页面，需要 connectionId 参数
{
path: '/workspace/:connectionId', // 使用动态路由段
@@ -42,7 +48,9 @@ router.beforeEach((to, from, next) => {
// 在守卫内部获取 store 实例，确保 Pinia 已初始化
const authStore = useAuthStore();
const requiresAuth = !['Login'].includes(to.name as string); // 需要认证的路由 (除了登录页)
// 定义不需要认证的路由名称列表
const publicRoutes = ['Login'];
const requiresAuth = !publicRoutes.includes(to.name as string);
if (requiresAuth && !authStore.isAuthenticated) {
// 如果需要认证但用户未登录，重定向到登录页
packages/frontend/src/stores/connections.store.ts
+9 -6
View File
@@ -8,7 +8,8 @@ export interface ConnectionInfo {
host: string;
port: number;
username: string;
auth_method: 'password' | 'key'; // 允许 key 类型
auth_method: 'password' | 'key';
proxy_id?: number | null; // 新增：关联的代理 ID (可选)
created_at: number;
updated_at: number;
last_connected_at: number | null;
@@ -58,11 +59,12 @@ export const useConnectionsStore = defineStore('connections', {
port: number;
username: string;
auth_method: 'password' | 'key';
password?: string; // 密码变为可选
private_key?: string; // 私钥是可选的 (仅在 auth_method 为 key 时需要)
passphrase?: string; // 私钥密码是可选的
password?: string;
private_key?: string;
passphrase?: string;
proxy_id?: number | null; // 新增：允许传入 proxy_id
}) {
this.isLoading = true; // 可以为添加操作单独设置加载状态，或共用 isLoading
this.isLoading = true;
this.error = null;
try {
const response = await axios.post<{ message: string; connection: ConnectionInfo }>('/api/v1/connections', newConnectionData);
@@ -82,7 +84,8 @@ export const useConnectionsStore = defineStore('connections', {
},
// 更新连接 Action
async updateConnection(connectionId: number, updatedData: Partial<Omit<ConnectionInfo, 'id' | 'created_at' | 'updated_at' | 'last_connected_at'> & { password?: string; private_key?: string; passphrase?: string }>) {
// 更新参数类型以包含 proxy_id
async updateConnection(connectionId: number, updatedData: Partial<Omit<ConnectionInfo, 'id' | 'created_at' | 'updated_at' | 'last_connected_at'> & { password?: string; private_key?: string; passphrase?: string; proxy_id?: number | null }>) {
this.isLoading = true;
this.error = null;
try {
packages/frontend/src/stores/proxies.store.ts
+129
View File
@@ -0,0 +1,129 @@
import { defineStore } from 'pinia';
import axios from 'axios';
// 定义代理信息接口 (前端使用，不含密码)
export interface ProxyInfo {
id: number;
name: string;
type: 'SOCKS5' | 'HTTP';
host: string;
port: number;
username?: string | null;
created_at: number;
updated_at: number;
}
// 定义 Store State 的接口
interface ProxiesState {
proxies: ProxyInfo[];
isLoading: boolean;
error: string | null;
}
// 定义 Pinia Store
export const useProxiesStore = defineStore('proxies', {
state: (): ProxiesState => ({
proxies: [],
isLoading: false,
error: null,
}),
actions: {
// 获取代理列表 Action
async fetchProxies() {
this.isLoading = true;
this.error = null;
try {
const response = await axios.get<ProxyInfo[]>('/api/v1/proxies');
this.proxies = response.data;
} catch (err: any) {
console.error('获取代理列表失败:', err);
this.error = err.response?.data?.message || err.message || '获取代理列表时发生未知错误。';
if (err.response?.status === 401) {
console.warn('未授权，需要登录才能获取代理列表。');
// TODO: 处理未授权情况
}
} finally {
this.isLoading = false;
}
},
// 添加新代理 Action
async addProxy(newProxyData: {
name: string;
type: 'SOCKS5' | 'HTTP';
host: string;
port: number;
username?: string | null;
password?: string | null; // 包含原始密码
}) {
this.isLoading = true;
this.error = null;
try {
const response = await axios.post<{ message: string; proxy: ProxyInfo }>('/api/v1/proxies', newProxyData);
this.proxies.unshift(response.data.proxy); // 将新代理添加到列表开头
return true; // 成功
} catch (err: any) {
console.error('添加代理失败:', err);
this.error = err.response?.data?.message || err.message || '添加代理时发生未知错误。';
if (err.response?.status === 401) {
console.warn('未授权，需要登录才能添加代理。');
}
if (err.response?.status === 409) {
console.warn('添加代理冲突:', err.response?.data?.message);
}
return false; // 失败
} finally {
this.isLoading = false;
}
},
// 更新代理 Action
async updateProxy(proxyId: number, updatedData: Partial<ProxyInfo & { password?: string | null }>) {
this.isLoading = true;
this.error = null;
try {
const response = await axios.put<{ message: string; proxy: ProxyInfo }>(`/api/v1/proxies/${proxyId}`, updatedData);
const index = this.proxies.findIndex(p => p.id === proxyId);
if (index !== -1) {
// 使用返回的更新后的信息替换旧信息
this.proxies[index] = { ...this.proxies[index], ...response.data.proxy };
} else {
await this.fetchProxies(); // 如果本地找不到，重新获取列表
}
return true; // 成功
} catch (err: any) {
console.error(`更新代理 ${proxyId} 失败:`, err);
this.error = err.response?.data?.message || err.message || '更新代理时发生未知错误。';
if (err.response?.status === 401) {
console.warn('未授权，需要登录才能更新代理。');
}
if (err.response?.status === 409) {
console.warn('更新代理冲突:', err.response?.data?.message);
}
return false; // 失败
} finally {
this.isLoading = false;
}
},
// 删除代理 Action
async deleteProxy(proxyId: number) {
this.isLoading = true;
this.error = null;
try {
await axios.delete(`/api/v1/proxies/${proxyId}`);
this.proxies = this.proxies.filter(p => p.id !== proxyId); // 从列表中移除
return true; // 成功
} catch (err: any) {
console.error(`删除代理 ${proxyId} 失败:`, err);
this.error = err.response?.data?.message || err.message || '删除代理时发生未知错误。';
if (err.response?.status === 401) {
console.warn('未授权，需要登录才能删除代理。');
}
return false; // 失败
} finally {
this.isLoading = false;
}
},
},
});
packages/frontend/src/views/ProxiesView.vue
+81
View File
@@ -0,0 +1,81 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useProxiesStore, ProxyInfo } from '../stores/proxies.store';
import ProxyList from '../components/ProxyList.vue'; // 引入列表组件
import AddProxyForm from '../components/AddProxyForm.vue'; // 引入表单组件
const { t } = useI18n();
const proxiesStore = useProxiesStore();
const showForm = ref(false);
const editingProxy = ref<ProxyInfo | null>(null);
// 组件挂载时获取代理列表
onMounted(() => {
proxiesStore.fetchProxies();
});
const handleProxyAdded = () => {
showForm.value = false;
};
const handleProxyUpdated = () => {
editingProxy.value = null;
showForm.value = false;
};
const handleEditRequest = (proxy: ProxyInfo) => {
editingProxy.value = proxy;
showForm.value = true;
};
const openAddForm = () => {
editingProxy.value = null;
showForm.value = true;
};
const closeForm = () => {
editingProxy.value = null;
showForm.value = false;
};
</script>
<template>
<div class="proxies-view">
<h2>{{ t('proxies.title') }}</h2>
<button @click="openAddForm" v-if="!showForm">{{ t('proxies.addProxy') }}</button>
<!-- 添加/编辑代理表单 -->
<AddProxyForm
v-if="showForm"
:proxy-to-edit="editingProxy"
@close="closeForm"
@proxy-added="handleProxyAdded"
@proxy-updated="handleProxyUpdated"
/>
<!-- 代理列表 -->
<ProxyList @edit-proxy="handleEditRequest" />
</div>
</template>
<style scoped>
.proxies-view {
padding: 1rem;
}
button {
margin-bottom: 1rem;
padding: 0.5rem 1rem;
cursor: pointer;
}
.placeholder-form, .placeholder-list {
border: 1px dashed #ccc;
padding: 1rem;
margin-top: 1rem;
background-color: #f9f9f9;
}
</style>