Baobhan Sith
661 lines
31 KiB
Vue
661 lines
31 KiB
Vue
<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);
|
||
return nameMatch || usernameMatch || hostMatch || portMatch;
|
||
});
|
||
}
|
||
|
||
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;
|
||
};
|
||
// --- End Batch Edit Functions ---
|
||
|
||
// --- 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.test.testingShort', iconClass: 'fas fa-spinner fa-spin', disabled: true, loading: true, title: t('connections.test.testingShort', '测试中') };
|
||
}
|
||
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) + '...';
|
||
};
|
||
|
||
// --- End Test Connection Logic ---
|
||
|
||
</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="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>
|
||
<span class="sm:hidden">{{ t('connections.actions.testAllShort', '测试全部') }}</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-start p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out', // Changed: items-start, 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.notes.label', '备注:') }}</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.test.testingShort' ? 'mr-1' : '']"></i>
|
||
<span v-if="getSingleTestButtonInfo(conn.id, conn.type).textKey !== 'connections.test.testingShort'">{{ 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 }"
|
||
:title="isBatchEditMode ? t('connections.batchEdit.disabledInBatchMode', '批量模式下禁用') : t('connections.actions.edit', '编辑')"
|
||
>
|
||
<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 }"
|
||
:title="isBatchEditMode ? t('connections.batchEdit.disabledInBatchMode', '批量模式下禁用') : t('connections.actions.connect', '连接')"
|
||
>
|
||
{{ 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> |