From 19cd336443ab46d914937e143540e14a1cd241d5 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Tue, 24 Feb 2026 17:07:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E6=B7=BB=E5=8A=A0=E9=80=80=E5=87=BA=E6=88=BF=E9=97=B4?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopNav.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index d9369d0..0c4db48 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Users, Share2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Users, Share2, LogOut } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface TopNavProps {
@@ -10,6 +11,7 @@ interface TopNavProps {
 }
 
 export default function TopNav({ roomId, userCount }: TopNavProps) {
+  const router = useRouter();
   const [toast, setToast] = useState("");
 
   const showToast = useCallback((msg: string) => {
@@ -62,7 +64,7 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
           </span>
         </h1>
 
-        <div className="flex w-24 items-center justify-end gap-1.5 text-xs text-zinc-500">
+        <div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
           <span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
             {roomId}
           </span>
@@ -70,6 +72,13 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
             <Users size={13} />
             <span className="font-semibold text-emerald-500">{userCount}</span>
           </div>
+          <button
+            onClick={() => router.push("/")}
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
+            aria-label="退出房间"
+          >
+            <LogOut size={15} />
+          </button>
         </div>
       </nav>