refactor: streamline sidebar account menu

src/components/Sidebar.scss

@@ -45,29 +45,48 @@
   margin: 0 12px 10px;
 }
 
-.sidebar-user-clear-trigger {
+.sidebar-user-menu {
   position: absolute;
   left: 0;
   right: 0;
   bottom: calc(100% + 8px);
   z-index: 12;
-  border: 1px solid rgba(255, 59, 48, 0.28);
-  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
   background: var(--bg-secondary);
-  color: #d93025;
-  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.sidebar-user-menu-item {
+  width: 100%;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-primary);
+  padding: 9px 10px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 13px;
+  font-weight: 500;
   cursor: pointer;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
-  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  text-align: left;
+  transition: background 0.2s ease, color 0.2s ease;
 
   &:hover {
-    background: rgba(255, 59, 48, 0.08);
-    border-color: rgba(255, 59, 48, 0.46);
+    background: var(--bg-tertiary);
+  }
+
+  &.danger {
+    color: #d93025;
+
+    &:hover {
+      background: rgba(255, 59, 48, 0.08);
+    }
   }
 }
 

src/components/Sidebar.tsx

@@ -282,6 +282,11 @@ function Sidebar({ collapsed }: SidebarProps) {
     setShowClearAccountDialog(true)
   }
 
+  const openSettingsFromAccountMenu = () => {
+    setIsAccountMenuOpen(false)
+    navigate('/settings')
+  }
+
   const handleConfirmClearAccountData = async () => {
     if (!canConfirmClear || isClearingAccountData) return
     setIsClearingAccountData(true)
@@ -420,16 +425,43 @@ function Sidebar({ collapsed }: SidebarProps) {
       </nav>
 
       <div className="sidebar-footer">
+        <button
+          className="nav-item"
+          onClick={() => {
+            if (authEnabled) {
+              setLocked(true)
+              return
+            }
+            navigate('/settings', { state: { initialTab: 'security' } })
+          }}
+          title={collapsed ? (authEnabled ? '锁定' : '未锁定') : undefined}
+        >
+          <span className="nav-icon">{authEnabled ? <Lock size={20} /> : <LockOpen size={20} />}</span>
+          <span className="nav-label">{authEnabled ? '锁定' : '未锁定'}</span>
+        </button>
+
         <div className="sidebar-user-card-wrap" ref={accountCardWrapRef}>
           {isAccountMenuOpen && (
-            <button
-              className="sidebar-user-clear-trigger"
-              onClick={openClearAccountDialog}
-              type="button"
-            >
-              <Trash2 size={14} />
-              <span>清除此账号所有数据</span>
-            </button>
+            <div className="sidebar-user-menu" role="menu" aria-label="账号菜单">
+              <button
+                className="sidebar-user-menu-item"
+                onClick={openSettingsFromAccountMenu}
+                type="button"
+                role="menuitem"
+              >
+                <Settings size={14} />
+                <span>设置</span>
+              </button>
+              <button
+                className="sidebar-user-menu-item danger"
+                onClick={openClearAccountDialog}
+                type="button"
+                role="menuitem"
+              >
+                <Trash2 size={14} />
+                <span>清除数据</span>
+              </button>
+            </div>
           )}
           <div
             className={`sidebar-user-card ${isAccountMenuOpen ? 'menu-open' : ''}`}
@@ -458,33 +490,6 @@ function Sidebar({ collapsed }: SidebarProps) {
             )}
           </div>
         </div>
-
-        <button
-          className="nav-item"
-          onClick={() => {
-            if (authEnabled) {
-              setLocked(true)
-              return
-            }
-            navigate('/settings', { state: { initialTab: 'security' } })
-          }}
-          title={collapsed ? (authEnabled ? '锁定' : '未锁定') : undefined}
-        >
-          <span className="nav-icon">{authEnabled ? <Lock size={20} /> : <LockOpen size={20} />}</span>
-          <span className="nav-label">{authEnabled ? '锁定' : '未锁定'}</span>
-        </button>
-
-        <NavLink
-          to="/settings"
-          className={`nav-item ${isActive('/settings') ? 'active' : ''}`}
-          title={collapsed ? '设置' : undefined}
-        >
-          <span className="nav-icon">
-            <Settings size={20} />
-          </span>
-          <span className="nav-label">设置</span>
-        </NavLink>
-
       </div>
 
       {showClearAccountDialog && (