v2.1.5 — 退出改为点击头像弹出下拉菜单

static/app.js

@@ -469,6 +469,17 @@
     if (card) card.classList.add('active');
   };
 
+  /* 头像菜单 */
+  window.toggleUserMenu = function(e) {
+    e.stopPropagation();
+    var dd = document.getElementById('user-dropdown');
+    if (dd) dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
+  };
+  document.addEventListener('click', function() {
+    var dd = document.getElementById('user-dropdown');
+    if (dd) dd.style.display = 'none';
+  });
+
   /* ================================================================
      Load & Auto Save Checkin
      ================================================================ */

static/style.css

@@ -71,6 +71,41 @@ body {
   gap: 8px;
   padding: 24px 12px 16px;
   position: relative;
+  cursor: pointer;
+}
+
+.sidebar-user .user-avatar {
+  transition: transform 0.15s;
+}
+.sidebar-user:hover .user-avatar { transform: scale(1.05); }
+
+.user-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-hover);
+  z-index: 100;
+  min-width: 120px;
+  padding: 4px;
+}
+.user-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text-dim);
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+.user-dropdown-item:hover {
+  background: var(--danger-light);
+  color: var(--danger);
 }
 
 .sidebar-user .user-name {
@@ -174,6 +209,45 @@ body {
   font-weight: 400;
 }
 
+/* ═══════════════════════════════════════════
+   Sidebar Dark Theme（左侧导航栏专属）
+   ═══════════════════════════════════════════ */
+.sidebar {
+  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
+  border-right: 1px solid #334155;
+}
+.sidebar .user-name {
+  color: #94A3B8;
+}
+.sidebar .user-avatar {
+  background: #4F46E5;
+  color: #FFF;
+}
+.sidebar .btn-logout-icon {
+  color: #64748B;
+}
+.sidebar .btn-logout-icon:hover {
+  background: rgba(248,113,113,0.15);
+  color: #FCA5A5;
+}
+.sidebar .nav-item {
+  color: #94A3B8;
+}
+.sidebar .nav-item:hover {
+  background: rgba(99,102,241,0.08);
+  color: #E2E8F0;
+}
+.sidebar .nav-item .icon-md {
+  color: #6366F1;
+}
+.sidebar .nav-item:hover .icon-md { color: #818CF8; }
+.sidebar .nav-item.active {
+  background: rgba(99,102,241,0.15);
+  color: #FFF;
+  border: 1px solid rgba(99,102,241,0.3);
+}
+.sidebar .nav-item.active .icon-md { color: #818CF8; }
+
 /* ═══════════════════════════════════════════
    Calendar Widget
    ═══════════════════════════════════════════ */

templates/index.html

@@ -40,12 +40,14 @@
   <aside class="sidebar">
 
     <!-- 用户信息 -->
-    <div class="sidebar-user">
+    <div class="sidebar-user" id="sidebar-user-menu" onclick="toggleUserMenu(event)">
       <div class="user-avatar">{{ username[0] }}</div>
       <span class="user-name">{{ username }}</span>
-      <a href="/logout" class="btn-logout-icon" title="退出登录" onclick="return confirm('确定退出登录？')">
-        <svg class="icon-sm"><use href="#icon-logout"/></svg>
-      </a>
+      <div class="user-dropdown" id="user-dropdown" style="display:none">
+        <a class="user-dropdown-item" href="/logout" onclick="return confirm('确定退出登录？')">
+          <svg class="icon-sm"><use href="#icon-logout"/></svg> 退出登录
+        </a>
+      </div>
     </div>
 
     <!-- 功能入口 -->