From 71aa09ebd70b9f352e3aca8c300ea4b7fcbf9053 Mon Sep 17 00:00:00 2001
From: MikiVL <mikivl@MikiVLdeMacBook-Air.local>
Date: Tue, 5 May 2026 12:54:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=8F=9C=E5=8D=95=EF=BC=88=E7=99=BB=E5=BD=95=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81/=E4=BA=91=E5=AD=98=E5=82=A8/=E7=99=BB=E5=87=BA?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/UserMenu.tsx | 85 ++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/components/auth/UserMenu.tsx

diff --git a/src/components/auth/UserMenu.tsx b/src/components/auth/UserMenu.tsx
new file mode 100644
index 0000000..a6ad75e
--- /dev/null
+++ b/src/components/auth/UserMenu.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { User, LogOut, Cloud, Key } from 'lucide-react'
+import { useAppStore } from '../../stores/appStore'
+import { LoginModal } from './LoginModal'
+
+export function UserMenu() {
+  const { currentUser, logout, syncStatus, syncFromCloud } = useAppStore()
+  const [showLogin, setShowLogin] = useState(false)
+  const [showActivate, setShowActivate] = useState(false)
+
+  if (!currentUser) {
+    return (
+      <>
+        <button
+          onClick={() => setShowLogin(true)}
+          className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-xs transition-all"
+          style={{ color: 'var(--text-faint)', background: 'transparent' }}
+          onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-muted)')}
+          onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+        >
+          <User size={13} />
+          <span>登录 / 注册</span>
+        </button>
+        {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className="px-3 py-2 flex flex-col gap-1">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div
+              className="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0"
+              style={{ background: 'var(--accent)', color: '#fff' }}
+            >
+              {currentUser.username[0].toUpperCase()}
+            </div>
+            <span className="text-xs font-medium truncate" style={{ color: 'var(--text)' }}>
+              {currentUser.username}
+            </span>
+          </div>
+          <button
+            onClick={logout}
+            title="登出"
+            className="p-1 rounded flex-shrink-0"
+            style={{ color: 'var(--text-faint)' }}
+            onMouseEnter={e => (e.currentTarget.style.color = 'var(--text)')}
+            onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-faint)')}
+          >
+            <LogOut size={12} />
+          </button>
+        </div>
+
+        {currentUser.cloudEnabled ? (
+          <button
+            onClick={syncFromCloud}
+            disabled={syncStatus === 'syncing'}
+            className="flex items-center gap-1.5 text-xs"
+            style={{ color: syncStatus === 'error' ? '#ef4444' : 'var(--accent)' }}
+          >
+            <Cloud size={11} />
+            {syncStatus === 'syncing' ? '同步中…' : syncStatus === 'error' ? '同步失败' : '云端已开启'}
+          </button>
+        ) : (
+          <button
+            onClick={() => setShowActivate(true)}
+            className="flex items-center gap-1.5 text-xs"
+            style={{ color: 'var(--text-faint)' }}
+            onMouseEnter={e => (e.currentTarget.style.color = 'var(--accent)')}
+            onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-faint)')}
+          >
+            <Key size={11} />
+            <span>输入邀请码开启云存储</span>
+          </button>
+        )}
+      </div>
+
+      {showActivate && (
+        <LoginModal initialTab="activate" onClose={() => setShowActivate(false)} />
+      )}
+    </>
+  )
+}