From 7b00a111ddca10182782ad99624d3886f2f6fd3d Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Sun, 20 Apr 2025 21:32:38 +0800
Subject: [PATCH] update

---
 .../src/components/LayoutRenderer.vue         |  5 +--
 .../frontend/src/components/StatusMonitor.vue | 33 +++++++++++--------
 packages/frontend/src/locales/en.json         | 23 +++++++++++--
 packages/frontend/src/locales/zh.json         | 23 +++++++++++--
 4 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/LayoutRenderer.vue b/packages/frontend/src/components/LayoutRenderer.vue
index 19e23a3..2351410 100644
--- a/packages/frontend/src/components/LayoutRenderer.vue
+++ b/packages/frontend/src/components/LayoutRenderer.vue
@@ -283,6 +283,7 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
             <div v-if="!activeSession" class="pane-placeholder empty-session">
               <div class="empty-session-content">
                 <i class="fas fa-terminal-slash"></i>
+                <i class="fas fa-plug"></i>
                 <span>无活动会话</span>
                 <div class="empty-session-tip">请先连接一个会话</div>
               </div>
@@ -300,7 +301,7 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
             </keep-alive>
             <div v-if="!activeSession" class="pane-placeholder empty-session">
               <div class="empty-session-content">
-                <i class="fas fa-terminal-slash"></i>
+                <i class="fas fa-plug"></i>
                 <span>无活动会话</span>
                 <div class="empty-session-tip">请先连接一个会话</div>
               </div>
@@ -316,7 +317,7 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
              />
              <div v-else class="pane-placeholder empty-session">
               <div class="empty-session-content">
-                <i class="fas fa-terminal-slash"></i>
+                <i class="fas fa-plug"></i>
                 <span>无活动会话</span>
                 <div class="empty-session-tip">请先连接一个会话</div>
               </div>
diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue
index 504436f..cc43a02 100644
--- a/packages/frontend/src/components/StatusMonitor.vue
+++ b/packages/frontend/src/components/StatusMonitor.vue
@@ -6,6 +6,7 @@
       错误: {{ statusError }}
     </div>
     <div v-else-if="!serverStatus" class="loading-status">
+      <i class="fas fa-spinner fa-spin"></i>
       等待数据...
     </div>
     <div v-else class="status-grid">
@@ -75,6 +76,10 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'; // 引入 watch
+import { useI18n } from 'vue-i18n'; // 引入 useI18n
+
+// 获取 t 函数
+const { t } = useI18n();
 
 // 接口定义，与后端 ServerStatusDetails 匹配
 interface ServerStatus {
@@ -123,48 +128,48 @@ watch(() => props.serverStatus, (newData) => {
 // --- 显示计算属性 (包含缓存逻辑) - 更新引用 ---
 const displayCpuModel = computed(() => {
   // 优先使用当前有效数据，否则回退到缓存，最后是 'N/A'
-  return (props.serverStatus?.cpuModel ?? cachedCpuModel.value) || 'N/A';
+  return (props.serverStatus?.cpuModel ?? cachedCpuModel.value) || t('statusMonitor.notAvailable');
 });
 
 const displayOsName = computed(() => {
   // 优先使用当前有效数据，否则回退到缓存，最后是 'N/A'
-  return (props.serverStatus?.osName ?? cachedOsName.value) || 'N/A';
+  return (props.serverStatus?.osName ?? cachedOsName.value) || t('statusMonitor.notAvailable');
 });
 
 
 // 辅助函数：格式化字节/秒为合适的单位 (B, KB, MB, GB)
 const formatBytesPerSecond = (bytes?: number): string => {
-    if (bytes === undefined || bytes === null || isNaN(bytes)) return 'N/A';
-    if (bytes < 1024) return `${bytes} B/s`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB/s`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB/s`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB/s`;
+    if (bytes === undefined || bytes === null || isNaN(bytes)) return t('statusMonitor.notAvailable');
+    if (bytes < 1024) return `${bytes} ${t('statusMonitor.bytesPerSecond')}`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} ${t('statusMonitor.kiloBytesPerSecond')}`;
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} ${t('statusMonitor.megaBytesPerSecond')}`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} ${t('statusMonitor.gigaBytesPerSecond')}`;
 };
 
 
 // 辅助函数：格式化 KB 为 GB
 const formatKbToGb = (kb?: number): string => {
-    if (kb === undefined || kb === null) return 'N/A'; // 处理无效输入
-    if (kb === 0) return '0.0 GB'; // 处理 0 的情况
+    if (kb === undefined || kb === null) return t('statusMonitor.notAvailable'); // 处理无效输入
+    if (kb === 0) return `0.0 ${t('statusMonitor.gigaBytes')}`; // 处理 0 的情况
     const gb = kb / 1024 / 1024;
-    return `${gb.toFixed(1)} GB`;
+    return `${gb.toFixed(1)} ${t('statusMonitor.gigaBytes')}`;
 };
 
 // 计算属性用于显示内存信息 (更新引用)
 const memDisplay = computed(() => {
     const data = props.serverStatus;
-    if (!data || data.memUsed === undefined || data.memTotal === undefined) return 'N/A'; // 检查数据有效性
+    if (!data || data.memUsed === undefined || data.memTotal === undefined) return t('statusMonitor.notAvailable'); // 检查数据有效性
     const percent = data.memPercent !== undefined ? `(${data.memPercent.toFixed(1)}%)` : '';
     // 确保 MB 值在是整数时不显示小数
     const usedMb = Number.isInteger(data.memUsed) ? data.memUsed : data.memUsed.toFixed(1);
     const totalMb = Number.isInteger(data.memTotal) ? data.memTotal : data.memTotal.toFixed(1);
-    return `${usedMb} MB / ${totalMb} MB ${percent}`;
+    return `${usedMb} ${t('statusMonitor.megaBytes')} / ${totalMb} ${t('statusMonitor.megaBytes')} ${percent}`;
 });
 
 // 计算属性用于显示磁盘信息 (更新引用)
 const diskDisplay = computed(() => {
     const data = props.serverStatus;
-    if (!data || data.diskUsed === undefined || data.diskTotal === undefined) return 'N/A'; // 检查数据有效性
+    if (!data || data.diskUsed === undefined || data.diskTotal === undefined) return t('statusMonitor.notAvailable'); // 检查数据有效性
     // 百分比代表已用空间
     const percent = data.diskPercent !== undefined ? `(${data.diskPercent.toFixed(1)}%)` : '';
     // 显示 已用 / 总量
@@ -182,7 +187,7 @@ const swapDisplay = computed(() => {
     const percent = `(${percentVal.toFixed(1)}%)`;
     const usedMb = Number.isInteger(used) ? used : used.toFixed(1);
     const totalMb = Number.isInteger(total) ? total : total.toFixed(1);
-    return `${usedMb} MB / ${totalMb} MB ${percent}`;
+    return `${usedMb} ${t('statusMonitor.megaBytes')} / ${totalMb} ${t('statusMonitor.megaBytes')} ${percent}`;
 });
 
 
diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json
index d579373..071f033 100644
--- a/packages/frontend/src/locales/en.json
+++ b/packages/frontend/src/locales/en.json
@@ -372,7 +372,24 @@
     "searchPlaceholder": "Search files..."
   },
   "statusMonitor": {
-      "noActiveSession": "No active session"
+    "title": "Server Status",
+    "errorPrefix": "Error:",
+    "loading": "Waiting for data...",
+    "cpuModelLabel": "CPU Model:",
+    "osLabel": "OS:",
+    "cpuLabel": "CPU:",
+    "memoryLabel": "Memory:",
+    "swapLabel": "Swap:",
+    "diskLabel": "Disk:",
+    "networkLabel": "Network",
+    "notAvailable": "N/A",
+    "bytesPerSecond": "B/s",
+    "kiloBytesPerSecond": "KB/s",
+    "megaBytesPerSecond": "MB/s",
+    "gigaBytesPerSecond": "GB/s",
+    "megaBytes": "MB",
+    "gigaBytes": "GB",
+    "noActiveSession": "No active session"
   },
   "tags": {
     "title": "Tag Management",
@@ -806,8 +823,8 @@
       "fetchFailed": "Failed to fetch remote container status",
       "commandFailed": "Failed to execute remote command '{command}'",
       "invalidResponse": "Received invalid response from server",
-      "noActiveSession": "No active SSH session.",
-      "connectFirst": "Please connect to an SSH session first.",
+      "noActiveSession": "No active session.",
+      "connectFirst": "Please connect to an session first.",
       "sshDisconnected": "SSH session disconnected.",
       "sshError": "SSH Connection Error",
       "sshNotConnected": "SSH session is not connected."
diff --git a/packages/frontend/src/locales/zh.json b/packages/frontend/src/locales/zh.json
index 197ed9a..346cd9b 100644
--- a/packages/frontend/src/locales/zh.json
+++ b/packages/frontend/src/locales/zh.json
@@ -372,7 +372,24 @@
     "searchPlaceholder": "搜索文件..."
   },
   "statusMonitor": {
-      "noActiveSession": "无活动会话"
+    "title": "服务器状态",
+    "errorPrefix": "错误:",
+    "loading": "等待数据...",
+    "cpuModelLabel": "CPU 型号:",
+    "osLabel": "系统:",
+    "cpuLabel": "CPU:",
+    "memoryLabel": "内存:",
+    "swapLabel": "Swap:",
+    "diskLabel": "磁盘:",
+    "networkLabel": "网络",
+    "notAvailable": "N/A",
+    "bytesPerSecond": "B/s",
+    "kiloBytesPerSecond": "KB/s",
+    "megaBytesPerSecond": "MB/s",
+    "gigaBytesPerSecond": "GB/s",
+    "megaBytes": "MB",
+    "gigaBytes": "GB",
+    "noActiveSession": "无活动会话"
   },
   "tags": {
     "title": "标签管理",
@@ -806,8 +823,8 @@
       "fetchFailed": "获取远程容器状态失败",
       "commandFailed": "执行远程命令 '{command}' 失败",
       "invalidResponse": "收到无效的服务器响应",
-      "noActiveSession": "无活动的 SSH 会话。",
-      "connectFirst": "请先连接到一个 SSH 会话。",
+      "noActiveSession": "无活动的会话。",
+      "connectFirst": "请先连接到一个会话。",
       "sshDisconnected": "SSH 会话已断开。",
       "sshError": "SSH 连接错误",
       "sshNotConnected": "SSH 会话未连接。"