From 7c46132d30da6cbb0d43a2f0e97d95c91145559e Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Thu, 24 Apr 2025 14:06:35 +0800
Subject: [PATCH] update

---
 package-lock.json                             |  11 +
 packages/frontend/package.json                |   1 +
 packages/frontend/src/App.vue                 |   2 +-
 packages/frontend/src/locales/en.json         |   9 +
 packages/frontend/src/locales/zh.json         |   9 +
 packages/frontend/src/router/index.ts         |   4 +-
 packages/frontend/src/views/DashboardView.vue | 213 ++++++++++++++++++
 7 files changed, 246 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/views/DashboardView.vue

diff --git a/package-lock.json b/package-lock.json
index e541914..4f57a85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2815,6 +2815,16 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -7394,6 +7404,7 @@
         "@tailwindcss/vite": "^4.1.4",
         "@xterm/addon-search": "^0.15.0",
         "axios": "^1.8.4",
+        "date-fns": "^4.1.0",
         "monaco-editor": "^0.52.2",
         "pinia": "^3.0.2",
         "pinia-plugin-persistedstate": "^4.2.0",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 60f0bbc..d4b7a7b 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -14,6 +14,7 @@
       "@tailwindcss/vite": "^4.1.4",
       "@xterm/addon-search": "^0.15.0",
       "axios": "^1.8.4",
+      "date-fns": "^4.1.0",
       "monaco-editor": "^0.52.2",
       "pinia": "^3.0.2",
       "pinia-plugin-persistedstate": "^4.2.0",
diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index e5c99b1..6c839bb 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -255,7 +255,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
         <div class="flex items-center space-x-1">
           <!-- 项目 Logo -->
           <img src="./assets/logo.png" alt="Project Logo" class="h-10 w-auto"> <!-- 移除右侧外边距，使其更靠左 -->
-            <!-- <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> --> <!-- 隐藏仪表盘链接 -->
+            <RouterLink to="/" class="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="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="/proxies" class="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="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>
diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json
index b1a93eb..9802c9e 100644
--- a/packages/frontend/src/locales/en.json
+++ b/packages/frontend/src/locales/en.json
@@ -788,5 +788,14 @@
       "blockIO": "Block I/O",
       "pids": "PIDs"
     }
+  },
+  "dashboard": {
+    "recentConnections": "Recent Connections",
+    "lastConnected": "Last connected:",
+    "noRecentConnections": "No recent connection records",
+    "viewAllConnections": "View All Connections",
+    "recentActivity": "Recent Activity",
+    "noRecentActivity": "No recent activity records",
+    "viewFullAuditLog": "View Full Audit Log"
   }
 }
diff --git a/packages/frontend/src/locales/zh.json b/packages/frontend/src/locales/zh.json
index bf4891f..a439e4f 100644
--- a/packages/frontend/src/locales/zh.json
+++ b/packages/frontend/src/locales/zh.json
@@ -793,5 +793,14 @@
       "blockIO": "磁盘 I/O",
       "pids": "进程数"
     }
+  },
+  "dashboard": {
+    "recentConnections": "最近连接",
+    "lastConnected": "上次连接:",
+    "noRecentConnections": "没有最近连接记录",
+    "viewAllConnections": "查看所有连接",
+    "recentActivity": "最近活动",
+    "noRecentActivity": "没有最近活动记录",
+    "viewFullAuditLog": "查看完整审计日志"
   }
 }
diff --git a/packages/frontend/src/router/index.ts b/packages/frontend/src/router/index.ts
index f38242a..e97d18f 100644
--- a/packages/frontend/src/router/index.ts
+++ b/packages/frontend/src/router/index.ts
@@ -7,8 +7,8 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Dashboard',
-    // component: () => import('../views/DashboardView.vue') // 稍后创建
-    component: { template: '<div>仪表盘 (建设中)</div>' } // 临时占位
+    component: () => import('../views/DashboardView.vue') // 指向实际的仪表盘组件
+    // component: { template: '<div>仪表盘 (建设中)</div>' } // 移除临时占位
   },
   // 登录页面 (占位符)
   {
diff --git a/packages/frontend/src/views/DashboardView.vue b/packages/frontend/src/views/DashboardView.vue
new file mode 100644
index 0000000..90ab7a4
--- /dev/null
+++ b/packages/frontend/src/views/DashboardView.vue
@@ -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>
\ No newline at end of file