From 838042f239380f61b4ac73b7aa7b32be2348f4e9 Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Sun, 5 Apr 2026 21:41:24 +0800
Subject: [PATCH] feat(SideBar): add separate status indicators for server and
 watchdog

Add distinct status indicators for server and watchdog components to provide more detailed system status information. The status display now includes labels and improved styling for better visibility.
---
 src/components/SideBar.vue | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 3e48f70..4d6fb12 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -14,8 +14,14 @@
         </div>
         <div class="status-info">
             <div class="status-item">
-                <span :class="['status-dot', { online: isOnline }]"></span>
-                <span class="status-text">{{ isOnline ? 'Online' : 'Offline' }}</span>
+                <p>Server </p>
+                <span :class="['status-dot', { online: isOnline_Server }]"></span>
+                <span class="status-text">{{ isOnline_Server ? 'Online' : 'Offline' }}</span>
+            </div>
+            <div class="status-item">
+                <p>Watchdog </p>
+                <span :class="['status-dot', { online: isOnline_Watchdog }]"></span>
+                <span class="status-text">{{ isOnline_Watchdog ? 'Online' : 'Offline' }}</span>
             </div>
         </div>
         <div class="theme-toggle">
@@ -38,7 +44,8 @@ export default {
         const userType = getCookie('user-type') || 'visitor';
         const isDarkMode = inject('isDarkMode');
         const toggleTheme = inject('toggleTheme');
-        const isOnline = ref(false);
+        const isOnline_Server = ref(false);
+        const isOnline_Watchdog = ref(false);
         let statusInterval;
 
         const allMenuItems = [
@@ -57,9 +64,11 @@ export default {
         const checkStatus = async () => {
             try {
                 const result = await systemApi.getStatus();
-                isOnline.value = result.data.Status === 'Online';
+                isOnline_Server.value = result.data.ServerStatus === 'Online';
+                isOnline_Watchdog.value = result.data.WatchdogStatus === 'Online';
             } catch (error) {
-                isOnline.value = false;
+                isOnline_Server.value = false;
+                isOnline_Watchdog.value = false;
             }
         };
 
@@ -78,7 +87,8 @@ export default {
             menuItems,
             isDarkMode,
             toggleTheme,
-            isOnline
+            isOnline_Server,
+            isOnline_Watchdog
         };
     }
 };
@@ -196,6 +206,10 @@ export default {
     display: flex;
     align-items: center;
     gap: 8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: var(--sidebar-text);
+    font-weight: 500;
 }
 
 .status-dot {