1

src/app/onboarding/components/sign-out-link/index.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import Link from "next/link";
+import {useRouter} from "next/navigation";
 import { LogOut } from "lucide-react";
+import useUserStore from "@/store/user";
 
 /**
  * 退出入口的展示参数。
@@ -15,24 +16,27 @@ interface SignOutLinkProps {
 /** onboarding 顶部的退出入口，当前只保留 UI 和点击状态，不接真实退出接口。 */
 export function SignOutLink({ email = "you@brand.com" }: SignOutLinkProps) {
   const [busy, setBusy] = useState(false);
+    const router = useRouter();
+    const userStore = useUserStore();
 
   /** 退出点击占位，后续接入真实认证时在这里调用退出接口。 */
   function handleSignOut() {
     setBusy(true);
-    setTimeout(() => setBusy(false), 300);
+      userStore.logout();
+      router.replace("/login");
   }
 
   return (
     <div className="flex items-center gap-2 text-xs text-muted-foreground">
       <span className="hidden sm:inline">{email}</span>
-      <Link
-        href="/login"
+        <button
+            type="button"
         onClick={handleSignOut}
         className="inline-flex items-center gap-1 rounded-md px-2 py-1 transition-colors hover:bg-muted hover:text-foreground"
       >
         <LogOut className="h-3 w-3" aria-hidden="true" />
         {busy ? "Signing out..." : "Sign out"}
-      </Link>
+        </button>
     </div>
   );
 }