|
|
|
@@ -0,0 +1,213 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, computed, onMounted } from 'vue';
|
|
|
|
|
import { useConnectionsStore } from '../stores/connections.store';
|
|
|
|
|
import { useAuditLogStore } from '../stores/audit.store'; // 修正 Store 名称
|
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
|
import type { ConnectionBase } from '../../../backend/src/types/connection.types'; // 修正导入的类型
|
|
|
|
|
import type { AuditLogEntry } from '../../../backend/src/types/audit.types'; // 引入 AuditLogEntry 类型
|
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
|
|
|
import { zhCN, enUS } from 'date-fns/locale'; // 导入语言包
|
|
|
|
|
|
|
|
|
|
const { t, locale } = useI18n();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const connectionsStore = useConnectionsStore();
|
|
|
|
|
const auditLogStore = useAuditLogStore(); // 修正变量名
|
|
|
|
|
|
|
|
|
|
const { connections, isLoading: isLoadingConnections } = storeToRefs(connectionsStore);
|
|
|
|
|
const { logs: auditLogs, isLoading: isLoadingLogs, totalLogs } = storeToRefs(auditLogStore); // 使用修正后的变量名
|
|
|
|
|
|
|
|
|
|
const maxRecentConnections = 5;
|
|
|
|
|
const maxRecentLogs = 5;
|
|
|
|
|
|
|
|
|
|
// --- 最近连接 ---
|
|
|
|
|
const recentConnections = computed(() => {
|
|
|
|
|
// 过滤掉 last_connected_at 为 null 或 undefined 的连接
|
|
|
|
|
const connected = connections.value.filter(c => c.last_connected_at); // 使用 last_connected_at
|
|
|
|
|
// 按 last_connected_at 降序排序
|
|
|
|
|
connected.sort((a, b) => (b.last_connected_at ?? 0) - (a.last_connected_at ?? 0)); // 使用 last_connected_at
|
|
|
|
|
// 取前 N 条
|
|
|
|
|
return connected.slice(0, maxRecentConnections);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// --- 最近活动 ---
|
|
|
|
|
const recentAuditLogs = computed(() => {
|
|
|
|
|
// 直接取最新的 N 条 (假设 store 中已按时间倒序)
|
|
|
|
|
return auditLogs.value.slice(0, maxRecentLogs);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// --- 加载数据 ---
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
// 如果 connections store 还没有加载过数据，则加载
|
|
|
|
|
if (connections.value.length === 0) {
|
|
|
|
|
try {
|
|
|
|
|
await connectionsStore.fetchConnections();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("加载连接列表失败:", error);
|
|
|
|
|
// 可以在这里显示错误通知
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 加载最新的审计日志
|
|
|
|
|
try {
|
|
|
|
|
// 只需要加载少量日志用于摘要
|
|
|
|
|
await auditLogStore.fetchLogs(1, maxRecentLogs, '', 'desc'); // 使用修正后的变量名
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("加载审计日志失败:", error);
|
|
|
|
|
// 可以在这里显示错误通知
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// --- 方法 ---
|
|
|
|
|
const connectTo = (connection: ConnectionBase) => { // 使用 ConnectionBase 类型
|
|
|
|
|
// 跳转到 Workspace 页面，并传递连接信息 (如果需要)
|
|
|
|
|
// 注意：当前 Workspace 路由不接受参数，需要依赖全局状态或 store
|
|
|
|
|
// 可以在 connections.store 中添加一个设置当前活动连接的方法
|
|
|
|
|
// connectionsStore.setActiveConnection(connection); // 假设有这个方法
|
|
|
|
|
router.push({ name: 'Workspace' }); // 直接跳转
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const formatRelativeTime = (dateString: string | undefined | null): string => {
|
|
|
|
|
if (!dateString) return t('connections.status.never');
|
|
|
|
|
try {
|
|
|
|
|
const date = new Date(dateString);
|
|
|
|
|
const currentLocale = locale.value === 'zh' ? zhCN : enUS;
|
|
|
|
|
return formatDistanceToNow(date, { addSuffix: true, locale: currentLocale });
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error("格式化日期失败:", e);
|
|
|
|
|
return dateString; // 出错时返回原始字符串
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getActionTranslation = (actionType: string): string => {
|
|
|
|
|
// 尝试从 i18n 获取翻译，如果找不到则返回原始 actionType
|
|
|
|
|
const key = `auditLog.actions.${actionType}`;
|
|
|
|
|
const translated = t(key);
|
|
|
|
|
// 如果翻译结果等于 key 本身，说明没有找到翻译
|
|
|
|
|
return translated === key ? actionType : translated;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="dashboard-view p-4 md:p-6 lg:p-8">
|
|
|
|
|
<h1 class="text-2xl font-semibold mb-6">{{ t('nav.dashboard') }}</h1>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
|
|
|
|
|
|
<!-- 最近连接 -->
|
|
|
|
|
<div class="card bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
|
|
|
|
|
<div class="card-header px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
|
|
|
<h2 class="text-lg font-medium">{{ t('dashboard.recentConnections', '最近连接') }}</h2> <!-- TODO: Add translation -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body p-4">
|
|
|
|
|
<div v-if="isLoadingConnections" class="text-center text-gray-500">{{ t('common.loading') }}</div>
|
|
|
|
|
<ul v-else-if="recentConnections.length > 0" class="space-y-3">
|
|
|
|
|
<li v-for="conn in recentConnections" :key="conn.id" class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-150 ease-in-out"> <!-- 使用 conn.id -->
|
|
|
|
|
<div class="flex-grow mr-4 overflow-hidden">
|
|
|
|
|
<span class="font-medium block truncate" :title="conn.name || ''">{{ conn.name || 'Unnamed' }}</span> <!-- 处理 name 可能为 null 的情况 -->
|
|
|
|
|
<span class="text-sm text-gray-500 dark:text-gray-400 block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
|
|
|
|
|
{{ conn.username }}@{{ conn.host }}:{{ conn.port }}
|
|
|
|
|
</span>
|
|
|
|
|
<span class="text-xs text-gray-400 dark:text-gray-500 block">
|
|
|
|
|
{{ t('dashboard.lastConnected', '上次连接:') }} {{ formatRelativeTime(conn.last_connected_at) }} <!-- TODO: Add translation --> <!-- 使用 last_connected_at -->
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<button @click="connectTo(conn)" class="button-primary button-small flex-shrink-0">
|
|
|
|
|
{{ t('connections.actions.connect') }}
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div v-else class="text-center text-gray-500">{{ t('dashboard.noRecentConnections', '没有最近连接记录') }}</div> <!-- TODO: Add translation -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-footer px-4 py-3 border-t border-gray-200 dark:border-gray-700 text-right">
|
|
|
|
|
<RouterLink :to="{ name: 'Workspace' }" class="text-sm text-link hover:text-link-hover">
|
|
|
|
|
{{ t('dashboard.viewAllConnections', '查看所有连接') }} <!-- TODO: Add translation -->
|
|
|
|
|
</RouterLink>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 最近活动 -->
|
|
|
|
|
<div class="card bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
|
|
|
|
|
<div class="card-header px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
|
|
|
<h2 class="text-lg font-medium">{{ t('dashboard.recentActivity', '最近活动') }}</h2> <!-- TODO: Add translation -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body p-4">
|
|
|
|
|
<div v-if="isLoadingLogs" class="text-center text-gray-500">{{ t('common.loading') }}</div>
|
|
|
|
|
<ul v-else-if="recentAuditLogs.length > 0" class="space-y-3">
|
|
|
|
|
<li v-for="log in recentAuditLogs" :key="log._id" class="p-3 bg-gray-50 dark:bg-gray-700 rounded">
|
|
|
|
|
<div class="flex justify-between items-start mb-1">
|
|
|
|
|
<span class="font-medium text-sm">{{ getActionTranslation(log.actionType) }}</span>
|
|
|
|
|
<span class="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0 ml-2">{{ formatRelativeTime(log.timestamp) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 break-words">{{ log.details }}</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div v-else class="text-center text-gray-500">{{ t('dashboard.noRecentActivity', '没有最近活动记录') }}</div> <!-- TODO: Add translation -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-footer px-4 py-3 border-t border-gray-200 dark:border-gray-700 text-right">
|
|
|
|
|
<RouterLink :to="{ name: 'AuditLogs' }" class="text-sm text-link hover:text-link-hover">
|
|
|
|
|
{{ t('dashboard.viewFullAuditLog', '查看完整审计日志') }} <!-- TODO: Add translation -->
|
|
|
|
|
</RouterLink>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 使用 Tailwind 类，这里可以添加一些特定于此视图的微调样式 */
|
|
|
|
|
.card {
|
|
|
|
|
/* 卡片基础样式 */
|
|
|
|
|
}
|
|
|
|
|
.card-header {
|
|
|
|
|
/* 卡片头部样式 */
|
|
|
|
|
}
|
|
|
|
|
.card-body {
|
|
|
|
|
/* 卡片主体样式 */
|
|
|
|
|
}
|
|
|
|
|
.card-footer {
|
|
|
|
|
/* 卡片底部样式 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 按钮小型化 */
|
|
|
|
|
.button-small {
|
|
|
|
|
padding: 0.3rem 0.6rem !important;
|
|
|
|
|
font-size: 0.85rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 主按钮样式 (假设全局或组件库已定义) */
|
|
|
|
|
.button-primary {
|
|
|
|
|
background-color: var(--button-bg-color);
|
|
|
|
|
color: var(--button-text-color);
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background-color 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
.button-primary:hover {
|
|
|
|
|
background-color: var(--button-hover-bg-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 链接样式 */
|
|
|
|
|
.text-link {
|
|
|
|
|
color: var(--link-color);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
transition: color 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
.text-link-hover:hover {
|
|
|
|
|
color: var(--link-hover-color);
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 暗黑模式下的颜色变量 (假设已通过全局 CSS 或 store 应用) */
|
|
|
|
|
.dark .dark\:bg-gray-800 { background-color: var(--app-bg-color); } /* 示例 */
|
|
|
|
|
.dark .dark\:bg-gray-700 { background-color: var(--header-bg-color); } /* 示例 */
|
|
|
|
|
.dark .dark\:border-gray-700 { border-color: var(--border-color); } /* 示例 */
|
|
|
|
|
.dark .dark\:text-gray-300 { color: var(--text-color); } /* 示例 */
|
|
|
|
|
.dark .dark\:text-gray-400 { color: var(--text-color-secondary); } /* 示例 */
|
|
|
|
|
.dark .dark\:text-gray-500 { color: var(--text-color-secondary); opacity: 0.7; } /* 示例 */
|
|
|
|
|
.dark .dark\:hover\:bg-gray-600:hover { background-color: rgba(255, 255, 255, 0.1); } /* 示例 */
|
|
|
|
|
|
|
|
|
|
</style>
|
Baobhan Sith