From 73d259b3a1588c2062ee1f713166bf1b50eb9f12 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:28:08 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=8D=95=E5=9B=BE=E6=A0=87=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/dist/admin.html | 58 +++++++++++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/backend/dist/admin.html b/backend/dist/admin.html
index e3e5cd2..3ffcc9c 100644
--- a/backend/dist/admin.html
+++ b/backend/dist/admin.html
@@ -129,7 +129,8 @@ tr:hover td{background:color-mix(in oklch,var(--accent) 40%,transparent)}
 .modal-box h3{font-size:16px;font-weight:600;margin-bottom:16px}
 
 /* Theme toggle */
-.theme-toggle{position:fixed;bottom:16px;right:16px;z-index:50;display:flex;padding:3px;background:var(--muted);border-radius:var(--radius);box-shadow:0 2px 8px oklch(0 0 0 / .08);gap:3px}
+.theme-toggle{position:fixed;bottom:16px;right:16px;z-index:50}
+.theme-toggle-inner{display:flex;padding:3px;background:var(--muted);border-radius:var(--radius);box-shadow:0 2px 8px oklch(0 0 0 / .08);gap:3px}
 .theme-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:calc(var(--radius) - 2px);cursor:pointer;background:transparent;color:var(--muted-foreground);font-size:16px;transition:all .15s;padding:0}
 .theme-btn:hover{color:var(--foreground)}
 .theme-btn.active{background:var(--background);color:var(--foreground);box-shadow:0 1px 3px oklch(0 0 0 / .08)}
@@ -202,15 +203,7 @@ tr:hover td{background:color-mix(in oklch,var(--accent) 40%,transparent)}
 
 <!-- Theme Toggle -->
 <div class="theme-toggle" id="themeToggle">
-  <button class="theme-btn active" onclick="setTheme('light')" id="themeLight" title="浅色">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-  </button>
-  <button class="theme-btn" onclick="setTheme('dark')" id="themeDark" title="深色">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
-  </button>
-  <button class="theme-btn" onclick="setTheme('system')" id="themeSystem" title="自动">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
-  </button>
+  <button class="theme-btn" id="themeBtn" onclick="toggleThemeExpand()" title="切换主题"></button>
 </div>
 
 <script>
@@ -218,21 +211,52 @@ const API = location.origin;
 let token = localStorage.getItem('admin_token');
 
 // Theme
-(function initTheme(){
+const themeIcons = {
+  light: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>',
+  dark: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>',
+  system: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>'
+};
+let themeExpanded = false;
+
+function initTheme(){
   const t = localStorage.getItem('theme') || 'system';
   setTheme(t, false);
-})();
+  document.addEventListener('mousedown', e => {
+    if (themeExpanded && !document.getElementById('themeToggle').contains(e.target)) {
+      themeExpanded = false;
+      renderThemeBtn();
+    }
+  });
+}
 
 function setTheme(mode, save=true) {
   if (save) localStorage.setItem('theme', mode);
   const dark = mode === 'dark' || (mode === 'system' && matchMedia('(prefers-color-scheme:dark)').matches);
   document.documentElement.classList.toggle('dark', dark);
-  document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
-  document.getElementById(mode === 'light' ? 'themeLight' : mode === 'dark' ? 'themeDark' : 'themeSystem').classList.add('active');
+  themeExpanded = false;
+  renderThemeBtn();
 }
-matchMedia('(prefers-color-scheme:dark)').addEventListener('change', () => {
-  if ((localStorage.getItem('theme') || 'system') === 'system') setTheme('system', false);
-});
+
+function renderThemeBtn() {
+  const current = localStorage.getItem('theme') || 'system';
+  const toggle = document.getElementById('themeToggle');
+  if (!themeExpanded) {
+    toggle.innerHTML = `<button class="theme-btn" id="themeBtn" onclick="toggleThemeExpand()" title="切换主题">${themeIcons[current]}</button>`;
+  } else {
+    toggle.innerHTML = `<div class="theme-toggle-inner">
+      <button class="theme-btn ${current==='light'?'active':''}" onclick="setTheme('light')" title="浅色">${themeIcons.light}</button>
+      <button class="theme-btn ${current==='dark'?'active':''}" onclick="setTheme('dark')" title="深色">${themeIcons.dark}</button>
+      <button class="theme-btn ${current==='system'?'active':''}" onclick="setTheme('system')" title="自动">${themeIcons.system}</button>
+    </div>`;
+  }
+}
+
+function toggleThemeExpand() {
+  themeExpanded = !themeExpanded;
+  renderThemeBtn();
+}
+
+initTheme();
 
 // Init
 if (token) showDashboard();