Super-frpc/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SideBar): add separate status indicators for server and watchdog

Browse Source 
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:
NanamiAdmin
2026-04-05 21:41:24 +08:00
parent 928998f255
commit 838042f239
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/SideBar.vue
View File

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