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

Merge pull request #37 from Heavrnl/feature/connectionView

Browse Source 
Feature/connection view
This commit is contained in:
Baobhan Sith
2025-05-16 14:13:02 +08:00
committed by GitHub
parent af892fcbe9 98600c8961
commit b79f492558
17 changed files with 1095 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/backend/src/database/schema.ts
-1
View File
@@ -190,7 +190,6 @@ CREATE TABLE IF NOT EXISTS quick_command_tag_associations (
);
`;
// --- End Quick Command Tags ---
// 从 database.ts 移动过来的，保持一致性
packages/backend/src/notifications/notification.controller.ts
+1 -1
View File
@@ -216,4 +216,4 @@ export class NotificationController {
res.status(500).json({ message: i18next.t('notificationController.errorTriggerTest'), error: error.message });
}
};
} // End of class NotificationController
}
packages/frontend/src/App.vue
+2 -1
View File
@@ -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="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.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> <!-- 移动端隐藏 -->
@@ -297,7 +298,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
<main>
<!-- 使用 KeepAlive 包裹 RouterView，并指定缓存 WorkspaceView -->
<RouterView v-slot="{ Component }">
<KeepAlive include="WorkspaceView">
<KeepAlive :include="['WorkspaceView', 'ConnectionsView']">
<component :is="Component" />
</KeepAlive>
</RouterView>
packages/frontend/src/components/BatchEditConnectionForm.vue
+336
View File
@@ -0,0 +1,336 @@
<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('common.updateSuccess', { count: successCount }), type: 'success' });
emit('saved');
}
emit('update:visible', false);
} catch (error: any) {
console.error("Batch update error:", error);
uiNotificationsStore.addNotification({ message: error.message , 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.table.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">
<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"
/>
</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', '认证信息') }}</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.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" />
</div>
<div>
<label for="batch-password" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.authMethodPassword', '密码') }}</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" />
</div>
<div>
<label for="batch-ssh-key" class="block text-sm font-medium text-text-secondary">{{ t('connections.form.authMethodKey', '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.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>
</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', '高级选项') }}</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.proxy', '代理') }}</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.noProxy', '无代理') }}</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.table.tags', '标签') }}</label>
<TagInput
:modelValue="formData.tag_ids || []"
@update:modelValue="val => formData.tag_ids = val"
:availableTags="availableTags"
@create-tag="handleCreateTag"
@delete-tag="handleDeleteTag"
:allow-create="true"
:allow-delete="true"
class="mt-1"
/>
</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"
></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.save', '保存') }}
</button>
</div>
</div>
</div>
</Teleport>
</template>
packages/frontend/src/components/WorkspaceConnectionList.vue
+1 -9
View File
@@ -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 -->
packages/frontend/src/composables/useWebSocketConnection.ts
+1 -1
View File
@@ -39,7 +39,7 @@ export function createWebSocketConnectionManager(
let reconnectTimeoutId: ReturnType<typeof setTimeout> | null = null; // 重连定时器 ID
let lastUrl = ''; // 保存上次连接的 URL
let intentionalDisconnect = false; // 标记是否为用户主动断开
// --- End Instance State ---
/**
* 安全地获取状态文本的辅助函数
packages/frontend/src/features/appearance/config/default-themes.ts
-2
View File
@@ -42,7 +42,6 @@ export const defaultUiTheme: Record<string, string> = {
'--button-bg-color': '#A06CD5', // 现代紫色 - 激活 (基础)
'--button-text-color': '#ffffff',
'--button-hover-bg-color': '#8E44AD', // 现代紫色 - 悬停 (稍暗)
// Added new variables
'--icon-color': 'var(--text-color-secondary)', // 图标颜色
'--icon-hover-color': 'var(--link-hover-color)', // 图标悬停颜色 (自动更新)
'--split-line-color': 'var(--border-color)', /* 分割线颜色 */
@@ -50,7 +49,6 @@ export const defaultUiTheme: Record<string, string> = {
'--input-focus-border-color': 'var(--link-active-color)', /* 输入框聚焦边框颜色 (自动更新) */
'--input-focus-glow': 'var(--link-active-color)', /* 输入框聚焦光晕值 (自动更新) */
'--overlay-bg-color': 'rgba(0, 0, 0, 0.6)', /* Added Overlay Background - 恢复 rgba 以支持透明度 */
// End added variables
'--font-family-sans-serif': 'sans-serif',
'--base-padding': '1rem',
'--base-margin': '0.5rem',
packages/frontend/src/locales/en-US.json
+14
View File
@@ -6,6 +6,7 @@
"nav": {
"dashboard": "Dashboard",
"terminal": "Terminal",
"connections": "Connections",
"proxies": "Proxies",
"login": "Login",
"logout": "Logout",
@@ -126,7 +127,18 @@
"lastConnected": "Last Connected",
"actions": "Actions"
},
"batchEdit":{
"toggleLabel":"Batch Edit",
"selectAll": "Select All",
"deselectAll": "Deselect All",
"invertSelection": "Invert Selection",
"title": "Batch Edit Connections",
"editSelected": "Edit Selected",
"noChange":"No change",
"selectedItems":"{count} items selected"
},
"actions": {
"testAllFiltered":"Test All",
"connect": "Connect",
"edit": "Edit",
"delete": "Delete",
@@ -151,6 +163,7 @@
"confirm": "Confirm Add",
"adding": "Adding...",
"cancel": "Cancel",
"noSshKey":"No SSH Key",
"errorRequiredFields": "Please fill in all required fields.",
"errorPasswordRequired": "Password is required for password authentication.",
"errorPrivateKeyRequired": "Private key is required for key authentication.",
@@ -968,6 +981,7 @@
"restore": "Restore",
"minimize": "Minimize",
"send":"Send",
"updateSuccess":"Update successful",
"copied": "Copied to clipboard"
},
"layoutConfigurator": {
packages/frontend/src/locales/ja-JP.json
+14
View File
@@ -106,10 +106,22 @@
"restore": "元に戻す",
"minimize": "最小化",
"send":"送信する",
"updateSuccess":"更新に成功しました",
"copied": "クリップボードにコピーしました"
},
"connections": {
"batchEdit": {
"toggleLabel": "一括編集",
"selectAll": "すべて選択",
"deselectAll": "すべて選択解除",
"invertSelection": "選択を反転",
"title": "接続の一括編集",
"editSelected": "選択した項目を編集",
"noChange": "変更なし",
"selectedItems": "{count} 件選択済み"
},
"actions": {
"testAllFiltered":"すべてテスト",
"connect": "接続",
"delete": "削除",
"edit": "編集",
@@ -150,6 +162,7 @@
"password": "パスワード:",
"port": "ポート:",
"privateKey": "秘密鍵:",
"noSshKey":"SSHキーなし",
"proxy": "プロキシ:",
"saving": "保存中...",
"sectionAdvanced": "詳細設定",
@@ -575,6 +588,7 @@
"auditLogs": "監査ログ",
"customizeStyle": "外観のカスタマイズ",
"dashboard": "ダッシュボード",
"connections": "接続管理",
"login": "ログイン",
"logout": "ログアウト",
"notifications": "通知管理",
packages/frontend/src/locales/zh-CN.json
+16 -1
View File
@@ -6,6 +6,7 @@
"nav": {
"dashboard": "仪表盘",
"terminal": "终端",
"connections": "连接管理",
"proxies": "代理管理",
"login": "登录",
"logout": "登出",
@@ -125,7 +126,19 @@
"lastConnected": "上次连接",
"actions": "操作"
},
"batchEdit":{
"toggleLabel":"批量修改",
"selectAll": "全选",
"deselectAll": "取消全选",
"invertSelection": "反向选择",
"editSelected": "编辑所选",
"title": "批量编辑连接",
"selectedItems": "已选项目",
"noChange": "保持不变",
"tagsPlaceholder": "输入标签 (替换现有)"
},
"actions": {
"testAllFiltered":"测试全部",
"connect": "连接",
"edit": "编辑",
"delete": "删除",
@@ -180,6 +193,7 @@
"testConnection": "测试连接",
"testing": "测试中...",
"sshKey": "SSH 密钥",
"noSshKey":"无 SSH 密钥",
"privateKeyDirect": "私钥内容",
"keyUpdateNoteDirect": "编辑时将私钥和密码短语留空以保留现有密钥。",
"keyUpdateNoteSelected": "编辑时选择其他密钥或使用直接输入来更改密钥。",
@@ -969,7 +983,8 @@
"restore": "还原",
"minimize": "最小化",
"send":"发送",
"copied": "已复制到剪贴板"
"copied": "已复制到剪贴板",
"updateSuccess":"更新成功"
},
"layoutConfigurator": {
"title": "布局管理器",
packages/frontend/src/router/index.ts
+6
View File
@@ -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',
packages/frontend/src/stores/connections.store.ts
+4 -3
View File
@@ -191,13 +191,14 @@ export const useConnectionsStore = defineStore('connections', {
},
// 测试连接 Action
async testConnection(connectionId: number): Promise<{ success: boolean; message?: string }> {
async testConnection(connectionId: number): Promise<{ success: boolean; message?: string; latency?: number }> {
// 注意：这里不改变 isLoading 状态，或者可以引入单独的 testing 状态
// this.isLoading = true;
// this.error = null;
try {
const response = await apiClient.post<{ success: boolean; message: string }>(`/connections/${connectionId}/test`); // 使用 apiClient
return { success: response.data.success, message: response.data.message };
// 假设后端返回 { success: boolean; message: string; latency?: number }
const response = await apiClient.post<{ success: boolean; message: string; latency?: number }>(`/connections/${connectionId}/test`); // 使用 apiClient
return { success: response.data.success, message: response.data.message, latency: response.data.latency };
} catch (err: any) {
console.error(`测试连接 ${connectionId} 失败:`, err);
const errorMessage = err.response?.data?.message || err.message || '测试连接时发生未知错误。';
packages/frontend/src/stores/fileEditor.store.ts
+1 -1
View File
@@ -96,7 +96,7 @@ const decodeRawContent = (rawContentBase64: string, encoding: string): string =>
return `// Error decoding content: ${error.message}`; // 返回错误信息
}
};
// --- End Helper Functions ---
export const useFileEditorStore = defineStore('fileEditor', () => {
const { t } = useI18n();
packages/frontend/src/stores/quickCommands.store.ts
-1
View File
@@ -462,7 +462,6 @@ export const useQuickCommandsStore = defineStore('quickCommands', () => {
}
});
console.log(`[Store] Manually updated tagIds for ${updatedCount} commands in local state.`);
// --- End manual state update ---
// Optionally, still fetch for full consistency, but UI should update based on manual change first.
// clearQuickCommandsCache();
packages/frontend/src/views/ConnectionsView.vue
+698
View File
@@ -0,0 +1,698 @@
<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);
const notesMatch = conn.notes?.toLowerCase().includes(query); // 添加对备注的搜索
return nameMatch || usernameMatch || hostMatch || portMatch || notesMatch;
});
}
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;
};
// --- Test Connection Logic ---
interface ConnectionTestState {
status: 'idle' | 'testing' | 'success' | 'error';
resultText: string;
latency?: number;
latencyColor?: string;
}
const connectionTestStates = ref<Map<number, ConnectionTestState>>(new Map());
const isTestingAll = ref(false);
const getLatencyColorString = (latencyMs?: number): string => {
if (latencyMs === undefined) return 'inherit'; // Default or inherit
// These colors should ideally come from theme variables if available
if (latencyMs < 100) return 'var(--color-success, #4CAF50)';
if (latencyMs < 300) return 'var(--color-warning, #ff9800)';
return 'var(--color-error, #F44336)';
};
const handleTestSingleConnection = async (conn: ConnectionInfo) => {
if (!conn.id || conn.type !== 'SSH') return;
connectionTestStates.value.set(conn.id, {
status: 'testing',
resultText: t('connections.test.testingInProgress', '测试中...'),
});
try {
// Pass only the ID to testConnection, as per store definition
const result = await connectionsStore.testConnection(conn.id);
if (result.success) {
const latencyMs = result.latency;
let displayText = ''; // 初始化为空字符串，符合只显示延迟的要求
let determinedColor;
if (latencyMs !== undefined) {
displayText = `${latencyMs}ms`;
determinedColor = getLatencyColorString(latencyMs);
} else {
// 测试成功，但没有延迟信息。不显示文本。
// 颜色应为明确的成功颜色。
// getLatencyColorString(0) 会返回绿色，代表非常好的情况。
determinedColor = getLatencyColorString(0); // 或者直接使用 'var(--color-success, #4CAF50)'
}
connectionTestStates.value.set(conn.id, {
status: 'success',
resultText: displayText, // 将显示 "XXms" 或者为空
latency: latencyMs,
latencyColor: determinedColor,
});
} else {
connectionTestStates.value.set(conn.id, {
status: 'error',
resultText: result.message || t('connections.test.unknownError', '未知错误'),
});
}
} catch (error: any) {
connectionTestStates.value.set(conn.id, {
status: 'error',
resultText: error.message || t('connections.test.unknownError', '未知错误'),
});
}
};
const handleTestAllFilteredConnections = async () => {
if (isTestingAll.value || isLoadingConnections.value) return;
// Ensure conn.id exists for map function and error handling
const sshConnectionsToTest = filteredAndSortedConnections.value.filter(c => c.type === 'SSH' && c.id != null);
if (sshConnectionsToTest.length === 0) {
// Optionally notify user that there are no SSH connections to test
// Consider using uiNotificationsStore from your project for a user-friendly message
return;
}
isTestingAll.value = true;
const testPromises = sshConnectionsToTest.map(conn => {
// conn.id is guaranteed to exist here due to the filter above.
// We're calling handleTestSingleConnection for each.
// Individual errors within handleTestSingleConnection will update that specific connection's state.
// We also add a .catch here to handle any unexpected errors from handleTestSingleConnection itself
// or if conn.id was somehow null/undefined (though filtered out).
return handleTestSingleConnection(conn).catch(error => {
console.error(`Error testing connection ${conn.id}:`, error);
// Ensure state is updated for this specific connection to show an error
// The 'id' here is from the 'conn' object in the map function's scope.
connectionTestStates.value.set(conn.id!, { // Using non-null assertion as id is checked
status: 'error',
resultText: t('connections.test.unknownErrorDuringBatch', '批量测试中发生错误'), // New i18n key
});
});
});
try {
await Promise.all(testPromises);
} catch (error) {
// This catch block handles errors if Promise.all itself fails,
// though individual promise rejections are handled above.
console.error("Error during batch testing of connections (Promise.all):", error);
// Optionally, set a general error state or notification for the entire batch operation if needed.
} finally {
isTestingAll.value = false;
}
};
const getSingleTestButtonInfo = (connId: number | undefined, connType: string | undefined) => {
const state = connId ? connectionTestStates.value.get(connId) : undefined;
if (connType !== 'SSH') {
return {
textKey: 'connections.actions.test',
iconClass: 'fas fa-plug',
disabled: true,
loading: false,
title: t('connections.test.onlySshSupportedTest', '仅SSH连接支持测试。')
};
}
if (!connId) { // Should not happen if connType is SSH and we are in the list
return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: true, loading: false, title: '' };
}
if (state?.status === 'testing') {
return { textKey: 'connections.actions.testing', iconClass: 'fas fa-spinner fa-spin', disabled: true, loading: true, title: t('connections.actions.testing', '测试中') };
}
if (state?.status === 'success' || state?.status === 'error') {
// 测试完成后，按钮恢复为初始“测试”状态
return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
}
// 默认状态也是“测试”
return { textKey: 'connections.actions.test', iconClass: 'fas fa-plug', disabled: false, loading: false, title: t('connections.actions.test', '测试') };
};
const getTruncatedNotes = (notes: string | null | undefined): string => {
if (!notes || notes.trim() === '') return ''; // 返回空字符串，如果没有备注
const maxLength = 100;
if (notes.length <= maxLength) return notes;
return notes.substring(0, maxLength) + '...';
};
// --- Connect All Filtered Connections ---
const isConnectingAll = ref(false);
const handleConnectAllFilteredConnections = async () => {
if (isConnectingAll.value || isLoadingConnections.value) return;
const sshConnectionsToConnect = filteredAndSortedConnections.value.filter(conn => conn.type === 'SSH');
if (sshConnectionsToConnect.length === 0) {
console.warn(t('connections.messages.noSshConnectionsToConnectAll', '没有可连接的 SSH 筛选结果。'));
// Optionally, use a UI notification if available in your project
// e.g., uiNotificationsStore.addNotification({ message: t('connections.messages.noSshConnectionsToConnectAll'), type: 'info' });
return;
}
isConnectingAll.value = true;
try {
for (const conn of sshConnectionsToConnect) {
connectTo(conn);
// Consider a small delay if you want to visually see connections initiating one by one,
// or if connectTo triggers operations that might benefit from not being fired too rapidly.
// await new Promise(resolve => setTimeout(resolve, 200)); // Example delay
}
} catch (error) {
console.error("Error connecting to all filtered SSH connections:", error);
// uiNotificationsStore.addNotification({ message: t('connections.errors.connectAllSshFailed', '连接全部 SSH 操作失败。'), type: 'error' });
} finally {
isConnectingAll.value = false;
}
};
</script>
<template>
<div class="p-4 md:p-6 lg:p-8 bg-background text-foreground"> <!-- 最外层，负责背景和整体内边距 -->
<div class="max-w-screen-lg mx-auto"> <!-- 将 xl 修改为 lg -->
<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]"> <!-- 移除了 max-w-screen-2xl mx-auto -->
<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="t('connections.addConnection', '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>
<!-- Test All Filtered Connections Button -->
<button
@click="handleTestAllFilteredConnections"
:disabled="isTestingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
class="h-8 px-3 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 flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
:title="t('connections.actions.testAllFiltered', '测试全部筛选的SSH连接')"
>
<i v-if="isTestingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2"></i>
<i v-else class="fas fa-check-double mr-1 sm:mr-2"></i>
<span class="hidden sm:inline">{{ t('connections.actions.testAllFiltered') }}</span>
</button>
<!-- Connect All Filtered Connections Button -->
<button
@click="handleConnectAllFilteredConnections"
:disabled="isConnectingAll || isLoadingConnections || !filteredAndSortedConnections.some(c => c.type === 'SSH')"
class="h-8 px-3 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 flex items-center justify-center flex-shrink-0 ml-2 sm:ml-0"
>
<i v-if="isConnectingAll" class="fas fa-spinner fa-spin mr-1 sm:mr-2"></i>
<i v-else class="fas fa-network-wired mr-1 sm:mr-2"></i>
<span class="hidden sm:inline">{{ t('workspaceConnectionList.connectAllSshInGroupMenu', '连接全部') }}</span>
</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 p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out', // Changed: items-center, removed justify-between
{ '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-1 min-w-0 mr-3"> <!-- Changed: flex-1 min-w-0 mr-3 -->
<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 || conn.host || t('connections.unnamedFallback', '未命名连接') }}</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">
{{ t('dashboard.lastConnected', '上次连接:') }} {{ formatRelativeTime(conn.last_connected_at) }}
</span>
<!-- 备注信息移到这里 -->
<div v-if="conn.notes && conn.notes.trim() !== ''" class="text-xs text-text-secondary mt-1">
<span class="font-medium text-text-alt">{{ t('connections.form.notes', '备注:') }}</span>
<span class="break-words leading-snug ml-1" :title="conn.notes">
{{ getTruncatedNotes(conn.notes) }}
</span>
</div>
<div v-if="getTagNames(conn.tag_ids).length > 0" class="flex flex-wrap gap-1 mt-1.5">
<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>
<!-- Test Result Display -->
<div
v-if="conn.type === 'SSH' && connectionTestStates.get(conn.id) && connectionTestStates.get(conn.id)?.status !== 'idle'"
class="text-xs mt-1.5 pt-1 border-t border-border/30"
>
<div v-if="connectionTestStates.get(conn.id)?.status === 'testing'" class="text-text-secondary animate-pulse flex items-center">
<i class="fas fa-spinner fa-spin mr-1.5 text-xs"></i>
{{ t('connections.test.testingInProgress', '测试中...') }}
</div>
<div
v-else-if="connectionTestStates.get(conn.id)?.status === 'success'"
class="font-medium flex items-center"
:style="{ color: connectionTestStates.get(conn.id)?.latencyColor || 'inherit' }"
>
<i class="fas fa-check-circle mr-1.5 text-xs"></i>
{{ connectionTestStates.get(conn.id)?.resultText }}
</div>
<div
v-else-if="connectionTestStates.get(conn.id)?.status === 'error'"
class="text-error font-medium flex items-center"
>
<i class="fas fa-times-circle mr-1.5 text-xs"></i>
{{ t('connections.test.errorPrefix', '错误:') }} {{ connectionTestStates.get(conn.id)?.resultText }}
</div>
</div>
</div>
<!-- 中间备注区域已被移除 -->
<div class="flex items-center space-x-2 flex-shrink-0">
<!-- Test Single Connection Button -->
<button
v-if="conn.type === 'SSH'"
@click.stop="handleTestSingleConnection(conn)"
:disabled="isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled"
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 h-9 flex items-center justify-center"
:class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode || getSingleTestButtonInfo(conn.id, conn.type).disabled }"
:title="getSingleTestButtonInfo(conn.id, conn.type).title"
>
<i :class="[getSingleTestButtonInfo(conn.id, conn.type).iconClass, 'w-4 text-center', getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing' ? 'mr-1' : '']"></i>
<span v-if="getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.actions.testing'">{{ t(getSingleTestButtonInfo(conn.id, conn.type).textKey) }}</span>
</button>
<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 h-9 flex items-center justify-center"
:disabled="isBatchEditMode"
:class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
>
<i class="fas fa-pencil-alt mr-1"></i>{{ t('connections.actions.edit') }}
</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 h-9 flex items-center justify-center"
:disabled="isBatchEditMode"
:class="{ 'opacity-50 cursor-not-allowed': isBatchEditMode }"
>
{{ 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>
</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>
packages/frontend/src/views/DashboardView.vue
+1 -1
View File
@@ -355,7 +355,7 @@ const handleConnectionModified = async () => {
<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>{{ conn.name || conn.host || t('connections.unnamedFallback', '未命名连接') }}</span>
</span>
<span class="text-sm text-text-secondary block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
{{ conn.username }}@{{ conn.host }}:{{ conn.port }}
packages/frontend/src/views/LoginView.vue
-3
View File
@@ -51,7 +51,6 @@ const resetCaptchaWidget = () => {
// Reset reCAPTCHA v2 if it exists
recaptchaWidget.value?.reset();
};
// --- End CAPTCHA Event Handlers ---
// 处理登录或 2FA 验证提交
@@ -67,8 +66,6 @@ const handleSubmit = async () => {
return; // Stop submission if CAPTCHA is required but not completed
}
}
// --- End CAPTCHA Check ---
// --- End CAPTCHA Check ---
try {
if (loginRequires2FA.value) {