feat: 房间创建者管理权限——锁定房间、踢人、结束投票

src/components/TopNav.tsx

@@ -1,19 +1,37 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Users, QrCode, LogOut } from "lucide-react";
+import { Users, QrCode, LogOut, Crown, Lock } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import QrInviteModal from "./QrInviteModal";
+import RoomManageModal from "./RoomManageModal";
 
 interface TopNavProps {
   roomId: string;
   userCount: number;
   onExit?: () => void;
+  isCreator?: boolean;
+  userId?: string;
+  users?: string[];
+  locked?: boolean;
+  swipeCounts?: Record<string, number>;
+  totalCards?: number;
 }
 
-export default function TopNav({ roomId, userCount, onExit }: TopNavProps) {
+export default function TopNav({
+  roomId,
+  userCount,
+  onExit,
+  isCreator = false,
+  userId = "",
+  users = [],
+  locked = false,
+  swipeCounts = {},
+  totalCards = 0,
+}: TopNavProps) {
   const [toast, setToast] = useState("");
   const [showQr, setShowQr] = useState(false);
+  const [showManage, setShowManage] = useState(false);
 
   const showToast = useCallback((msg: string) => {
     setToast(msg);
@@ -23,14 +41,23 @@ export default function TopNav({ roomId, userCount, onExit }: TopNavProps) {
   return (
     <>
       <nav className="relative z-10 flex h-14 items-center justify-between px-4">
-        <div className="w-24">
+        <div className="flex items-center gap-1.5">
           <button
             onClick={() => setShowQr(true)}
             className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100"
           >
             <QrCode size={13} />
-            邀请饭搭子
+            邀请
           </button>
+          {isCreator && (
+            <button
+              onClick={() => setShowManage(true)}
+              className="flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-600 transition-colors active:bg-amber-100"
+            >
+              <Crown size={13} />
+              管理
+            </button>
+          )}
         </div>
 
         <h1 className="text-center text-base font-bold tracking-tight text-zinc-900">
@@ -41,6 +68,9 @@ export default function TopNav({ roomId, userCount, onExit }: TopNavProps) {
         </h1>
 
         <div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
+          {locked && (
+            <Lock size={12} className="text-amber-500" />
+          )}
           <span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
             {roomId}
           </span>
@@ -78,6 +108,20 @@ export default function TopNav({ roomId, userCount, onExit }: TopNavProps) {
         roomId={roomId}
         onToast={showToast}
       />
+
+      {isCreator && (
+        <RoomManageModal
+          open={showManage}
+          onClose={() => setShowManage(false)}
+          roomId={roomId}
+          userId={userId}
+          users={users}
+          locked={locked}
+          swipeCounts={swipeCounts}
+          totalCards={totalCards}
+          onToast={showToast}
+        />
+      )}
     </>
   );
 }