修改样式

public/css/style.css

@@ -305,6 +305,98 @@ body {
   transform: rotate(30deg);
 }
 
+/* ---- Theme Switch ---- */
+.theme-switch-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.theme-switch {
+  display: inline-block;
+  height: 28px;
+  position: relative;
+  width: 54px;
+}
+
+.theme-switch input {
+  display: none;
+}
+
+.slider {
+  background-color: var(--bg-card);
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: .4s;
+  border: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+}
+
+.slider:before {
+  background-color: #fff;
+  bottom: 3px;
+  content: "";
+  height: 20px;
+  left: 4px;
+  position: absolute;
+  transition: .4s;
+  width: 20px;
+  z-index: 2;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--accent-indigo);
+  border-color: var(--accent-indigo);
+}
+
+input:checked + .slider:before {
+  transform: translateX(24px);
+}
+
+.theme-icon {
+  width: 14px;
+  height: 14px;
+  z-index: 1;
+  transition: opacity 0.3s;
+}
+
+.sun-icon {
+  color: #fbbf24;
+}
+
+.moon-icon {
+  color: #cbd5e1;
+}
+
+/* ---- Gauge Time ---- */
+.title-time {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--accent-indigo);
+  margin-right: 8px;
+  opacity: 0.9;
+}
+
+:root.light-theme .title-time {
+  color: var(--accent-blue);
+}
+
 /* ---- Dashboard Layout ---- */
 .dashboard {
   padding: 24px 28px 40px;

public/index.html

@@ -67,10 +67,15 @@
       </div>
       <div class="header-right">
         <div class="clock" id="clock"></div>
-        <button class="btn-icon theme-toggle" id="themeToggle" title="切换主题">
+        <div class="theme-switch-wrapper">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon sun-icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+          <label class="theme-switch" for="themeToggle">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon moon-icon" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+            <input type="checkbox" id="themeToggle" />
-        </button>
+            <div class="slider round">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon sun-icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon moon-icon" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+            </div>
+          </label>
+        </div>
         <div id="userSection">
           <button class="btn btn-login" id="btnLogin">登录</button>
         </div>
@@ -198,6 +203,7 @@
         <div class="chart-card chart-card-gauges" id="gaugesCard">
           <div class="chart-card-header">
             <h2 class="chart-title">
+              <span class="title-time" id="gaugesTime"></span>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="chart-title-icon">
                 <path d="M12 20V10M18 20V4M6 20v-4"/>
               </svg>

public/js/app.js

@@ -63,7 +63,8 @@
     loginModal: document.getElementById('loginModalOverlay'),
     closeLoginModal: document.getElementById('closeLoginModal'),
     loginForm: document.getElementById('loginForm'),
-    loginError: document.getElementById('loginError')
+    loginError: document.getElementById('loginError'),
+    gaugesTime: document.getElementById('gaugesTime')
   };
 
   // ---- State ----
@@ -79,6 +80,10 @@
     // Clock
     updateClock();
     setInterval(updateClock, 1000);
+    
+    // Resource Gauges Time
+    updateGaugesTime();
+    setInterval(updateGaugesTime, 1000);
 
     // Initial theme check (localStorage handled after site settings load to ensure priority)
 
@@ -95,7 +100,7 @@
     dom.btnAdd.addEventListener('click', addSource);
 
     // Auth & Theme listeners
-    dom.themeToggle.addEventListener('click', toggleTheme);
+    dom.themeToggle.addEventListener('change', toggleTheme);
     dom.btnLogin.addEventListener('click', openLoginModal);
     dom.closeLoginModal.addEventListener('click', closeLoginModal);
     dom.loginForm.addEventListener('submit', handleLogin);
@@ -152,25 +157,30 @@
 
   // ---- Theme Switching ----
   function toggleTheme() {
-    const isLight = document.documentElement.classList.toggle('light-theme');
+    const theme = dom.themeToggle.checked ? 'light' : 'dark';
-    const theme = isLight ? 'light' : 'dark';
+    document.documentElement.classList.toggle('light-theme', theme === 'light');
     localStorage.setItem('theme', theme);
     updateThemeIcons(theme);
   }
 
   function applyTheme(theme) {
     const isLight = theme === 'light';
+    dom.themeToggle.checked = isLight;
     document.documentElement.classList.toggle('light-theme', isLight);
     updateThemeIcons(theme);
   }
 
   function updateThemeIcons(theme) {
     if (theme === 'light') {
-      dom.sunIcon.style.display = 'none';
+      dom.sunIcon.style.display = 'block'; // Always show both in slider, but might adjust opacity
       dom.moonIcon.style.display = 'block';
+      dom.sunIcon.style.opacity = '0.3';
+      dom.moonIcon.style.opacity = '1';
     } else {
       dom.sunIcon.style.display = 'block';
-      dom.moonIcon.style.display = 'none';
+      dom.moonIcon.style.display = 'block';
+      dom.sunIcon.style.opacity = '1';
+      dom.moonIcon.style.opacity = '0.3';
     }
   }
 
@@ -287,6 +297,12 @@
     dom.clock.textContent = formatClock();
   }
 
+  function updateGaugesTime() {
+    if (dom.gaugesTime) {
+      dom.gaugesTime.textContent = formatClock();
+    }
+  }
+
   // ---- Fetch Metrics ----
   async function fetchMetrics() {
     try {