From 26fa196bdbb85c22167c1124f84e1c147b00198f Mon Sep 17 00:00:00 2001 From: zyh Date: Tue, 22 Oct 2024 07:35:36 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E5=AF=B9=E8=AF=9D=E6=A1=86=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=BB=A5=E6=9B=BF=E4=BB=A3=E9=93=BE=E6=8E=A5=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?=E6=96=B9=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/auth/ProfileDialog.tsx | 38 ++++++ app/components/auth/SubscriptionDialog.tsx | 24 ++++ app/components/header/UserMenu.tsx | 130 +++++++++++---------- app/hooks/useAuth.ts | 27 +++-- 4 files changed, 151 insertions(+), 68 deletions(-) create mode 100644 app/components/auth/ProfileDialog.tsx create mode 100644 app/components/auth/SubscriptionDialog.tsx diff --git a/app/components/auth/ProfileDialog.tsx b/app/components/auth/ProfileDialog.tsx new file mode 100644 index 0000000..694c112 --- /dev/null +++ b/app/components/auth/ProfileDialog.tsx @@ -0,0 +1,38 @@ +import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog'; +import { useAuth } from '~/hooks/useAuth'; + +interface ProfileDialogProps { + isOpen: boolean; + onClose: () => void; +} + +export function ProfileDialog({ isOpen, onClose }: ProfileDialogProps) { + const { user } = useAuth(); + + if (!user) return null; + + return ( + + + 个人信息 + +
+
+ +

{user.nickname}

+
+
+ +

{user.phone}

+
+ {/* 可以根据需要添加更多用户信息 */} +
+ + + + ); +} diff --git a/app/components/auth/SubscriptionDialog.tsx b/app/components/auth/SubscriptionDialog.tsx new file mode 100644 index 0000000..d1cb1ce --- /dev/null +++ b/app/components/auth/SubscriptionDialog.tsx @@ -0,0 +1,24 @@ +import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog'; + +interface SubscriptionDialogProps { + isOpen: boolean; + onClose: () => void; +} + +export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps) { + return ( + + + 订阅信息 + +
+

+ 这里显示用户的订阅信息。您可以根据实际需求添加更多详细内容。 +

+ {/* 可以添加更多订阅相关的信息 */} +
+ + + + ); +} diff --git a/app/components/header/UserMenu.tsx b/app/components/header/UserMenu.tsx index 4c5e84a..9e8cf74 100644 --- a/app/components/header/UserMenu.tsx +++ b/app/components/header/UserMenu.tsx @@ -1,74 +1,82 @@ import { Menu, Transition } from '@headlessui/react'; -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { useAuth } from '~/hooks/useAuth'; import { Avatar } from '~/components/ui/Avatar'; -import { Link } from '@remix-run/react'; +import { ProfileDialog } from '~/components/auth/ProfileDialog'; +import { SubscriptionDialog } from '~/components/auth/SubscriptionDialog'; export function UserMenu() { const { user, logout } = useAuth(); + const [isProfileOpen, setIsProfileOpen] = useState(false); + const [isSubscriptionOpen, setIsSubscriptionOpen] = useState(false); if (!user) return null; return ( - -
- - - {user.nickname} - + <> + +
+ + + {user.nickname} + - - -
- - {({ active }) => ( - - 个人信息 - - )} - - - {({ active }) => ( - - 订阅信息 - - )} - - - {({ active }) => ( - - )} - -
- - -
+ + +
+ + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + +
+ + +
+ + setIsProfileOpen(false)} /> + setIsSubscriptionOpen(false)} /> + ); } diff --git a/app/hooks/useAuth.ts b/app/hooks/useAuth.ts index 26ed9d1..6544ff6 100644 --- a/app/hooks/useAuth.ts +++ b/app/hooks/useAuth.ts @@ -15,13 +15,25 @@ export function useAuth() { const navigate = useNavigate(); useEffect(() => { - const token = localStorage.getItem('token'); - const storedUser = localStorage.getItem('user'); - if (token && storedUser) { - setIsAuthenticated(true); - setUser(JSON.parse(storedUser)); - } - setIsLoading(false); + const checkAuth = () => { + const token = localStorage.getItem('token'); + const storedUser = localStorage.getItem('user'); + if (token && storedUser) { + setIsAuthenticated(true); + setUser(JSON.parse(storedUser)); + } else { + setIsAuthenticated(false); + setUser(null); + } + setIsLoading(false); + }; + + checkAuth(); + window.addEventListener('storage', checkAuth); + + return () => { + window.removeEventListener('storage', checkAuth); + }; }, []); const login = (token: string, userData: User) => { @@ -36,6 +48,7 @@ export function useAuth() { localStorage.removeItem('user'); setIsAuthenticated(false); setUser(null); + navigate('/'); }; return { isAuthenticated, isLoading, user, login, logout };