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.
This commit is contained in:
2026-04-05 21:41:24 +08:00
parent 928998f255
commit 838042f239

View File

@@ -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 {