diff --git a/static/app.js b/static/app.js index 2f0d32b..0112b59 100644 --- a/static/app.js +++ b/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 ================================================================ */ diff --git a/static/style.css b/static/style.css index 80b625c..a23f869 100644 --- a/static/style.css +++ b/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 { diff --git a/templates/index.html b/templates/index.html index 5bd7ef6..0ab021e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -40,12 +40,14 @@