refactor: 提取 Modal 基础组件，消除 4 个弹窗的重复样板代码
将 backdrop 遮罩、点击关闭、AnimatePresence 动画封装为 Modal 组件， 支持 sheet（底部弹出）和 dialog（居中缩放）两种变体，净减约 110 行。
This commit is contained in:
+134
-163
@@ -1,11 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useRef } from "react";
|
import { useState } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { X, Loader2, Eye, EyeOff } from "lucide-react";
|
import { X, Loader2, Eye, EyeOff } from "lucide-react";
|
||||||
import { AVATARS } from "@/lib/avatars";
|
import { AVATARS } from "@/lib/avatars";
|
||||||
import { setCachedProfile } from "@/lib/userId";
|
import { setCachedProfile } from "@/lib/userId";
|
||||||
import type { UserProfile } from "@/types";
|
import type { UserProfile } from "@/types";
|
||||||
|
import Modal from "@/components/Modal";
|
||||||
|
|
||||||
type Tab = "login" | "register";
|
type Tab = "login" | "register";
|
||||||
|
|
||||||
@@ -17,7 +18,6 @@ interface AuthModalProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function AuthModal({ open, onClose, onAuth, defaultTab = "login" }: AuthModalProps) {
|
export default function AuthModal({ open, onClose, onAuth, defaultTab = "login" }: AuthModalProps) {
|
||||||
const backdropRef = useRef<HTMLDivElement>(null);
|
|
||||||
const [tab, setTab] = useState<Tab>(defaultTab);
|
const [tab, setTab] = useState<Tab>(defaultTab);
|
||||||
const [username, setUsername] = useState("");
|
const [username, setUsername] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
@@ -27,10 +27,6 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
||||||
if (e.target === backdropRef.current) onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
setUsername("");
|
setUsername("");
|
||||||
setPassword("");
|
setPassword("");
|
||||||
@@ -114,169 +110,144 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<Modal open={open} onClose={onClose}>
|
||||||
{open && (
|
<div className="mb-4 flex items-center justify-between">
|
||||||
<motion.div
|
<span className="text-lg font-bold text-heading">欢迎</span>
|
||||||
ref={backdropRef}
|
<button
|
||||||
className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
|
onClick={onClose}
|
||||||
initial={{ opacity: 0 }}
|
className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
onClick={handleBackdropClick}
|
|
||||||
>
|
>
|
||||||
<motion.div
|
<X size={16} />
|
||||||
className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
|
</button>
|
||||||
initial={{ y: "100%" }}
|
</div>
|
||||||
animate={{ y: 0 }}
|
|
||||||
exit={{ y: "100%" }}
|
<div className="flex gap-1 rounded-xl bg-elevated p-1">
|
||||||
transition={{ type: "spring", damping: 28, stiffness: 350 }}
|
{(["login", "register"] as const).map((t) => (
|
||||||
|
<button
|
||||||
|
key={t}
|
||||||
|
onClick={() => switchTab(t)}
|
||||||
|
className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
|
||||||
|
tab === t ? "text-heading" : "text-muted"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<div className="mb-4 flex items-center justify-between">
|
{tab === t && (
|
||||||
<span className="text-lg font-bold text-heading">欢迎</span>
|
<motion.div
|
||||||
<button
|
layoutId="auth-tab"
|
||||||
onClick={onClose}
|
className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
|
||||||
className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
|
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
||||||
>
|
|
||||||
<X size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<div className="flex gap-1 rounded-xl bg-elevated p-1">
|
|
||||||
{(["login", "register"] as const).map((t) => (
|
|
||||||
<button
|
|
||||||
key={t}
|
|
||||||
onClick={() => switchTab(t)}
|
|
||||||
className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
|
|
||||||
tab === t ? "text-heading" : "text-muted"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{tab === t && (
|
|
||||||
<motion.div
|
|
||||||
layoutId="auth-tab"
|
|
||||||
className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
|
|
||||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<span className="relative z-10">
|
|
||||||
{t === "login" ? "登录" : "注册"}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Username */}
|
|
||||||
<div className="mt-5">
|
|
||||||
<p className="text-xs font-medium text-muted">用户名</p>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={username}
|
|
||||||
onChange={(e) => {
|
|
||||||
setUsername(e.target.value.slice(0, 16));
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
|
|
||||||
maxLength={16}
|
|
||||||
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Password */}
|
|
||||||
<div className="mt-4">
|
|
||||||
<p className="text-xs font-medium text-muted">密码</p>
|
|
||||||
<div className="relative mt-2">
|
|
||||||
<input
|
|
||||||
type={showPassword ? "text" : "password"}
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPassword(e.target.value);
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
|
|
||||||
className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
|
|
||||||
>
|
|
||||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Confirm password (register only) */}
|
|
||||||
{tab === "register" && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<p className="text-xs font-medium text-muted">确认密码</p>
|
|
||||||
<input
|
|
||||||
type={showPassword ? "text" : "password"}
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={(e) => {
|
|
||||||
setConfirmPassword(e.target.value);
|
|
||||||
setError("");
|
|
||||||
}}
|
|
||||||
placeholder="再次输入密码"
|
|
||||||
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
<span className="relative z-10">
|
||||||
|
{t === "login" ? "登录" : "注册"}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Avatar picker (register only) */}
|
<div className="mt-5">
|
||||||
{tab === "register" && (
|
<p className="text-xs font-medium text-muted">用户名</p>
|
||||||
<div className="mt-4">
|
<input
|
||||||
<p className="text-xs font-medium text-muted">
|
type="text"
|
||||||
选择头像
|
value={username}
|
||||||
<span className="ml-1 text-dim">（可选）</span>
|
onChange={(e) => {
|
||||||
</p>
|
setUsername(e.target.value.slice(0, 16));
|
||||||
<div className="mt-2 grid grid-cols-6 gap-2">
|
setError("");
|
||||||
{AVATARS.map((a) => (
|
}}
|
||||||
<button
|
placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
|
||||||
key={a.emoji}
|
maxLength={16}
|
||||||
onClick={() => setAvatar(a.emoji)}
|
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
|
||||||
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
|
/>
|
||||||
avatar === a.emoji
|
</div>
|
||||||
? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
|
|
||||||
: "bg-elevated hover:bg-subtle"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{a.emoji}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
<div className="mt-4">
|
||||||
<motion.p
|
<p className="text-xs font-medium text-muted">密码</p>
|
||||||
className="mt-3 text-center text-xs font-medium text-rose-400"
|
<div className="relative mt-2">
|
||||||
initial={{ opacity: 0, y: -4 }}
|
<input
|
||||||
animate={{ opacity: 1, y: 0 }}
|
type={showPassword ? "text" : "password"}
|
||||||
>
|
value={password}
|
||||||
{error}
|
onChange={(e) => {
|
||||||
</motion.p>
|
setPassword(e.target.value);
|
||||||
)}
|
setError("");
|
||||||
|
}}
|
||||||
|
placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
|
||||||
|
className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
{tab === "register" && (
|
||||||
onClick={handleSubmit}
|
<div className="mt-4">
|
||||||
disabled={loading}
|
<p className="text-xs font-medium text-muted">确认密码</p>
|
||||||
className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
|
<input
|
||||||
>
|
type={showPassword ? "text" : "password"}
|
||||||
{loading ? (
|
value={confirmPassword}
|
||||||
<>
|
onChange={(e) => {
|
||||||
<Loader2 size={16} className="animate-spin" />
|
setConfirmPassword(e.target.value);
|
||||||
{tab === "login" ? "登录中..." : "注册中..."}
|
setError("");
|
||||||
</>
|
}}
|
||||||
) : tab === "login" ? (
|
placeholder="再次输入密码"
|
||||||
"登录"
|
className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
|
||||||
) : (
|
/>
|
||||||
"注册"
|
</div>
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
|
||||||
|
{tab === "register" && (
|
||||||
|
<div className="mt-4">
|
||||||
|
<p className="text-xs font-medium text-muted">
|
||||||
|
选择头像
|
||||||
|
<span className="ml-1 text-dim">（可选）</span>
|
||||||
|
</p>
|
||||||
|
<div className="mt-2 grid grid-cols-6 gap-2">
|
||||||
|
{AVATARS.map((a) => (
|
||||||
|
<button
|
||||||
|
key={a.emoji}
|
||||||
|
onClick={() => setAvatar(a.emoji)}
|
||||||
|
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
|
||||||
|
avatar === a.emoji
|
||||||
|
? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
|
||||||
|
: "bg-elevated hover:bg-subtle"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{a.emoji}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<motion.p
|
||||||
|
className="mt-3 text-center text-xs font-medium text-rose-400"
|
||||||
|
initial={{ opacity: 0, y: -4 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</motion.p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={loading}
|
||||||
|
className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 size={16} className="animate-spin" />
|
||||||
|
{tab === "login" ? "登录中..." : "注册中..."}
|
||||||
|
</>
|
||||||
|
) : tab === "login" ? (
|
||||||
|
"登录"
|
||||||
|
) : (
|
||||||
|
"注册"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useRef } from "react";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import { LogOut } from "lucide-react";
|
import { LogOut } from "lucide-react";
|
||||||
|
import Modal from "@/components/Modal";
|
||||||
|
|
||||||
interface LeaveConfirmModalProps {
|
interface LeaveConfirmModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -15,61 +14,35 @@ export default function LeaveConfirmModal({
|
|||||||
onConfirm,
|
onConfirm,
|
||||||
onCancel,
|
onCancel,
|
||||||
}: LeaveConfirmModalProps) {
|
}: LeaveConfirmModalProps) {
|
||||||
const backdropRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
||||||
if (e.target === backdropRef.current) onCancel();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<Modal open={open} onClose={onCancel} variant="dialog">
|
||||||
{open && (
|
<div className="flex flex-col items-center">
|
||||||
<motion.div
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
|
||||||
ref={backdropRef}
|
<LogOut size={22} className="text-rose-400" />
|
||||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
</div>
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
<h2 className="mt-4 text-base font-bold text-heading">
|
||||||
exit={{ opacity: 0 }}
|
确定要退出房间吗？
|
||||||
transition={{ duration: 0.15 }}
|
</h2>
|
||||||
onClick={handleBackdropClick}
|
<p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
|
||||||
>
|
退出后你的滑卡进度不会丢失，可以用房间号重新加入
|
||||||
<motion.div
|
</p>
|
||||||
className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
|
|
||||||
initial={{ scale: 0.9, opacity: 0 }}
|
<div className="mt-5 flex w-full gap-2.5">
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
<button
|
||||||
exit={{ scale: 0.9, opacity: 0 }}
|
onClick={onCancel}
|
||||||
transition={{ type: "spring", damping: 25, stiffness: 350 }}
|
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
|
||||||
>
|
>
|
||||||
<div className="flex flex-col items-center">
|
继续滑卡
|
||||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
|
</button>
|
||||||
<LogOut size={22} className="text-rose-400" />
|
<button
|
||||||
</div>
|
onClick={onConfirm}
|
||||||
|
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
|
||||||
<h2 className="mt-4 text-base font-bold text-heading">
|
>
|
||||||
确定要退出房间吗？
|
退出房间
|
||||||
</h2>
|
</button>
|
||||||
<p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
|
</div>
|
||||||
退出后你的滑卡进度不会丢失，可以用房间号重新加入
|
</div>
|
||||||
</p>
|
</Modal>
|
||||||
|
|
||||||
<div className="mt-5 flex w-full gap-2.5">
|
|
||||||
<button
|
|
||||||
onClick={onCancel}
|
|
||||||
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
|
|
||||||
>
|
|
||||||
继续滑卡
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onConfirm}
|
|
||||||
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
|
|
||||||
>
|
|
||||||
退出房间
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,75 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
|
||||||
|
type ModalVariant = "sheet" | "dialog";
|
||||||
|
|
||||||
|
interface ModalProps {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
variant?: ModalVariant;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sheet = {
|
||||||
|
backdrop:
|
||||||
|
"fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center",
|
||||||
|
content:
|
||||||
|
"relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6",
|
||||||
|
initial: { y: "100%" },
|
||||||
|
animate: { y: 0 },
|
||||||
|
exit: { y: "100%" },
|
||||||
|
transition: { type: "spring" as const, damping: 28, stiffness: 350 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialog = {
|
||||||
|
backdrop:
|
||||||
|
"fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm",
|
||||||
|
content:
|
||||||
|
"mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border",
|
||||||
|
initial: { scale: 0.9, opacity: 0 },
|
||||||
|
animate: { scale: 1, opacity: 1 },
|
||||||
|
exit: { scale: 0.9, opacity: 0 },
|
||||||
|
transition: { type: "spring" as const, damping: 25, stiffness: 350 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const variants = { sheet, dialog };
|
||||||
|
|
||||||
|
export default function Modal({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
variant = "sheet",
|
||||||
|
}: ModalProps) {
|
||||||
|
const backdropRef = useRef<HTMLDivElement>(null);
|
||||||
|
const v = variants[variant];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{open && (
|
||||||
|
<motion.div
|
||||||
|
ref={backdropRef}
|
||||||
|
className={v.backdrop}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (e.target === backdropRef.current) onClose();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className={v.content}
|
||||||
|
initial={v.initial}
|
||||||
|
animate={v.animate}
|
||||||
|
exit={v.exit}
|
||||||
|
transition={v.transition}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useCallback, useRef } from "react";
|
import { useCallback } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import { QRCodeSVG } from "qrcode.react";
|
import { QRCodeSVG } from "qrcode.react";
|
||||||
import { X, Copy, Share2, QrCode } from "lucide-react";
|
import { X, Copy, Share2, QrCode } from "lucide-react";
|
||||||
import type { SceneType } from "@/types";
|
import type { SceneType } from "@/types";
|
||||||
import { getSceneConfig } from "@/lib/sceneConfig";
|
import { getSceneConfig } from "@/lib/sceneConfig";
|
||||||
|
import Modal from "@/components/Modal";
|
||||||
|
|
||||||
interface QrInviteModalProps {
|
interface QrInviteModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -27,11 +27,6 @@ export default function QrInviteModal({
|
|||||||
typeof window !== "undefined"
|
typeof window !== "undefined"
|
||||||
? `${window.location.origin}/invite/${roomId}`
|
? `${window.location.origin}/invite/${roomId}`
|
||||||
: "";
|
: "";
|
||||||
const backdropRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
||||||
if (e.target === backdropRef.current) onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCopy = useCallback(async () => {
|
const handleCopy = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
@@ -62,77 +57,57 @@ export default function QrInviteModal({
|
|||||||
}, [inviteUrl, handleCopy, sceneConfig]);
|
}, [inviteUrl, handleCopy, sceneConfig]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<Modal open={open} onClose={onClose}>
|
||||||
{open && (
|
<button
|
||||||
<motion.div
|
onClick={onClose}
|
||||||
ref={backdropRef}
|
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
|
||||||
className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
|
>
|
||||||
initial={{ opacity: 0 }}
|
<X size={16} />
|
||||||
animate={{ opacity: 1 }}
|
</button>
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
<div className="flex flex-col items-center">
|
||||||
onClick={handleBackdropClick}
|
<div className="flex items-center gap-2 text-heading">
|
||||||
>
|
<QrCode size={18} className="text-accent" />
|
||||||
<motion.div
|
<h2 className="text-lg font-bold">邀请饭搭子</h2>
|
||||||
className="relative w-full max-w-sm rounded-t-3xl bg-surface px-6 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
|
</div>
|
||||||
initial={{ y: "100%" }}
|
<p className="mt-1 text-xs text-muted">
|
||||||
animate={{ y: 0 }}
|
{sceneConfig.qrSubtitle}
|
||||||
exit={{ y: "100%" }}
|
</p>
|
||||||
transition={{ type: "spring", damping: 28, stiffness: 350 }}
|
|
||||||
|
<div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
|
||||||
|
<QRCodeSVG
|
||||||
|
value={inviteUrl}
|
||||||
|
size={180}
|
||||||
|
level="M"
|
||||||
|
bgColor="transparent"
|
||||||
|
fgColor="#e5e7eb"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 flex items-center gap-2">
|
||||||
|
<span className="text-xs text-muted">房间号</span>
|
||||||
|
<span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
|
||||||
|
{roomId}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5 flex w-full gap-2.5">
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
|
||||||
>
|
>
|
||||||
<button
|
<Copy size={15} />
|
||||||
onClick={onClose}
|
复制链接
|
||||||
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
|
</button>
|
||||||
>
|
<button
|
||||||
<X size={16} />
|
onClick={handleShare}
|
||||||
</button>
|
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
|
||||||
|
>
|
||||||
<div className="flex flex-col items-center">
|
<Share2 size={15} />
|
||||||
<div className="flex items-center gap-2 text-heading">
|
发送邀请
|
||||||
<QrCode size={18} className="text-accent" />
|
</button>
|
||||||
<h2 className="text-lg font-bold">邀请饭搭子</h2>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-1 text-xs text-muted">
|
</Modal>
|
||||||
{sceneConfig.qrSubtitle}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
|
|
||||||
<QRCodeSVG
|
|
||||||
value={inviteUrl}
|
|
||||||
size={180}
|
|
||||||
level="M"
|
|
||||||
bgColor="transparent"
|
|
||||||
fgColor="#e5e7eb"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 flex items-center gap-2">
|
|
||||||
<span className="text-xs text-muted">房间号</span>
|
|
||||||
<span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
|
|
||||||
{roomId}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-5 flex w-full gap-2.5">
|
|
||||||
<button
|
|
||||||
onClick={handleCopy}
|
|
||||||
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
|
|
||||||
>
|
|
||||||
<Copy size={15} />
|
|
||||||
复制链接
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleShare}
|
|
||||||
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
|
|
||||||
>
|
|
||||||
<Share2 size={15} />
|
|
||||||
发送邀请
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+157
-185
@@ -1,7 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useRef, useCallback } from "react";
|
import { useState, useCallback } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import {
|
import {
|
||||||
X,
|
X,
|
||||||
Lock,
|
Lock,
|
||||||
@@ -13,6 +12,7 @@ import {
|
|||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { UserProfile } from "@/types";
|
import { UserProfile } from "@/types";
|
||||||
import { getAvatar, getAvatarBg } from "@/lib/avatars";
|
import { getAvatar, getAvatarBg } from "@/lib/avatars";
|
||||||
|
import Modal from "@/components/Modal";
|
||||||
|
|
||||||
interface RoomManageModalProps {
|
interface RoomManageModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -39,15 +39,10 @@ export default function RoomManageModal({
|
|||||||
userProfiles,
|
userProfiles,
|
||||||
onToast,
|
onToast,
|
||||||
}: RoomManageModalProps) {
|
}: RoomManageModalProps) {
|
||||||
const backdropRef = useRef<HTMLDivElement>(null);
|
|
||||||
const [loading, setLoading] = useState<string | null>(null);
|
const [loading, setLoading] = useState<string | null>(null);
|
||||||
const [confirmKick, setConfirmKick] = useState<string | null>(null);
|
const [confirmKick, setConfirmKick] = useState<string | null>(null);
|
||||||
const [confirmEnd, setConfirmEnd] = useState(false);
|
const [confirmEnd, setConfirmEnd] = useState(false);
|
||||||
|
|
||||||
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
||||||
if (e.target === backdropRef.current) onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const manage = useCallback(
|
const manage = useCallback(
|
||||||
async (action: string, targetUserId?: string) => {
|
async (action: string, targetUserId?: string) => {
|
||||||
setLoading(action + (targetUserId ?? ""));
|
setLoading(action + (targetUserId ?? ""));
|
||||||
@@ -91,190 +86,167 @@ export default function RoomManageModal({
|
|||||||
const otherUsers = users.filter((u) => u !== userId);
|
const otherUsers = users.filter((u) => u !== userId);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<Modal open={open} onClose={onClose}>
|
||||||
{open && (
|
<button
|
||||||
<motion.div
|
onClick={onClose}
|
||||||
ref={backdropRef}
|
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
|
||||||
className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
|
>
|
||||||
initial={{ opacity: 0 }}
|
<X size={16} />
|
||||||
animate={{ opacity: 1 }}
|
</button>
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
<div className="flex items-center gap-2">
|
||||||
onClick={handleBackdropClick}
|
<Crown size={18} className="text-amber-400" />
|
||||||
|
<h2 className="text-lg font-bold text-heading">房间管理</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-xs text-muted">
|
||||||
|
房间号 {roomId}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-5">
|
||||||
|
<button
|
||||||
|
onClick={() => manage(locked ? "unlock" : "lock")}
|
||||||
|
disabled={loading !== null}
|
||||||
|
className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
|
||||||
|
locked
|
||||||
|
? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
|
||||||
|
: "bg-elevated text-secondary ring-1 ring-border active:bg-subtle"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<motion.div
|
{loading === "lock" || loading === "unlock" ? (
|
||||||
className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
|
<Loader2 size={15} className="animate-spin" />
|
||||||
initial={{ y: "100%" }}
|
) : locked ? (
|
||||||
animate={{ y: 0 }}
|
<Unlock size={15} />
|
||||||
exit={{ y: "100%" }}
|
) : (
|
||||||
transition={{ type: "spring", damping: 28, stiffness: 350 }}
|
<Lock size={15} />
|
||||||
>
|
)}
|
||||||
<button
|
{locked ? "解锁房间（允许新人加入）" : "锁定房间（阻止新人加入）"}
|
||||||
onClick={onClose}
|
</button>
|
||||||
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
|
</div>
|
||||||
>
|
|
||||||
<X size={16} />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="mt-5">
|
||||||
<Crown size={18} className="text-amber-400" />
|
<h3 className="text-xs font-semibold text-muted">
|
||||||
<h2 className="text-lg font-bold text-heading">房间管理</h2>
|
房间成员（{users.length}）
|
||||||
</div>
|
</h3>
|
||||||
<p className="mt-1 text-xs text-muted">
|
<div className="mt-2 flex flex-col gap-1.5">
|
||||||
房间号 {roomId}
|
{users.map((uid) => {
|
||||||
</p>
|
const profile = userProfiles[uid];
|
||||||
|
const emoji = profile?.avatar ?? getAvatar(uid).emoji;
|
||||||
|
const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(uid).bg;
|
||||||
|
const displayName = profile?.username ?? uid.slice(0, 8);
|
||||||
|
const isCreator = uid === userId;
|
||||||
|
const swiped = swipeCounts[uid] ?? 0;
|
||||||
|
const finished = swiped >= totalCards;
|
||||||
|
|
||||||
{/* Lock/Unlock */}
|
return (
|
||||||
<div className="mt-5">
|
<div
|
||||||
<button
|
key={uid}
|
||||||
onClick={() => manage(locked ? "unlock" : "lock")}
|
className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
|
||||||
disabled={loading !== null}
|
|
||||||
className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
|
|
||||||
locked
|
|
||||||
? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
|
|
||||||
: "bg-elevated text-secondary ring-1 ring-border active:bg-subtle"
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
{loading === "lock" || loading === "unlock" ? (
|
<span
|
||||||
<Loader2 size={15} className="animate-spin" />
|
className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
|
||||||
) : locked ? (
|
>
|
||||||
<Unlock size={15} />
|
{emoji}
|
||||||
) : (
|
</span>
|
||||||
<Lock size={15} />
|
<div className="flex min-w-0 flex-1 flex-col">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
{isCreator && (
|
||||||
|
<span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
|
||||||
|
<Crown size={10} />
|
||||||
|
房主
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="truncate text-xs font-medium text-tertiary">
|
||||||
|
{displayName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
|
||||||
|
>
|
||||||
|
{swiped}/{totalCards}
|
||||||
|
{finished ? " 已完成" : " 进行中"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isCreator && (
|
||||||
|
<>
|
||||||
|
{confirmKick === uid ? (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => manage("kick", uid)}
|
||||||
|
disabled={loading !== null}
|
||||||
|
className="rounded-lg bg-rose-500 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors active:bg-rose-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading === "kick" + uid ? (
|
||||||
|
<Loader2
|
||||||
|
size={12}
|
||||||
|
className="animate-spin"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
"确认"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmKick(null)}
|
||||||
|
className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-tertiary transition-colors active:bg-elevated"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmKick(uid)}
|
||||||
|
className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
|
||||||
|
>
|
||||||
|
<UserX size={13} />
|
||||||
|
移出
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
{locked ? "解锁房间（允许新人加入）" : "锁定房间（阻止新人加入）"}
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5">
|
||||||
|
{confirmEnd ? (
|
||||||
|
<div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
|
||||||
|
<p className="text-xs font-medium text-amber-300">
|
||||||
|
确定要结束投票吗？将根据当前已有的投票结果直接结算。
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => manage("end_voting")}
|
||||||
|
disabled={loading !== null}
|
||||||
|
className="flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg bg-amber-500 text-xs font-semibold text-white transition-colors active:bg-amber-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading === "end_voting" ? (
|
||||||
|
<Loader2 size={13} className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Flag size={13} />
|
||||||
|
)}
|
||||||
|
确认结束
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmEnd(false)}
|
||||||
|
className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-tertiary transition-colors active:bg-subtle"
|
||||||
|
>
|
||||||
|
再等等
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* User list with kick */}
|
) : (
|
||||||
<div className="mt-5">
|
<button
|
||||||
<h3 className="text-xs font-semibold text-muted">
|
onClick={() => setConfirmEnd(true)}
|
||||||
房间成员（{users.length}）
|
disabled={loading !== null}
|
||||||
</h3>
|
className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
|
||||||
<div className="mt-2 flex flex-col gap-1.5">
|
>
|
||||||
{users.map((uid) => {
|
<Flag size={15} />
|
||||||
const profile = userProfiles[uid];
|
结束投票（立即出结果）
|
||||||
const emoji = profile?.avatar ?? getAvatar(uid).emoji;
|
</button>
|
||||||
const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(uid).bg;
|
)}
|
||||||
const displayName = profile?.username ?? uid.slice(0, 8);
|
</div>
|
||||||
const isCreator = uid === userId;
|
</Modal>
|
||||||
const swiped = swipeCounts[uid] ?? 0;
|
|
||||||
const finished = swiped >= totalCards;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={uid}
|
|
||||||
className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
|
|
||||||
>
|
|
||||||
{emoji}
|
|
||||||
</span>
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
{isCreator && (
|
|
||||||
<span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
|
|
||||||
<Crown size={10} />
|
|
||||||
房主
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="truncate text-xs font-medium text-tertiary">
|
|
||||||
{displayName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
|
|
||||||
>
|
|
||||||
{swiped}/{totalCards}
|
|
||||||
{finished ? " 已完成" : " 进行中"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!isCreator && (
|
|
||||||
<>
|
|
||||||
{confirmKick === uid ? (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => manage("kick", uid)}
|
|
||||||
disabled={loading !== null}
|
|
||||||
className="rounded-lg bg-rose-500 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors active:bg-rose-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading === "kick" + uid ? (
|
|
||||||
<Loader2
|
|
||||||
size={12}
|
|
||||||
className="animate-spin"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
"确认"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setConfirmKick(null)}
|
|
||||||
className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-tertiary transition-colors active:bg-elevated"
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => setConfirmKick(uid)}
|
|
||||||
className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
|
|
||||||
>
|
|
||||||
<UserX size={13} />
|
|
||||||
移出
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* End voting */}
|
|
||||||
<div className="mt-5">
|
|
||||||
{confirmEnd ? (
|
|
||||||
<div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
|
|
||||||
<p className="text-xs font-medium text-amber-300">
|
|
||||||
确定要结束投票吗？将根据当前已有的投票结果直接结算。
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => manage("end_voting")}
|
|
||||||
disabled={loading !== null}
|
|
||||||
className="flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg bg-amber-500 text-xs font-semibold text-white transition-colors active:bg-amber-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading === "end_voting" ? (
|
|
||||||
<Loader2 size={13} className="animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Flag size={13} />
|
|
||||||
)}
|
|
||||||
确认结束
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setConfirmEnd(false)}
|
|
||||||
className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-tertiary transition-colors active:bg-subtle"
|
|
||||||
>
|
|
||||||
再等等
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => setConfirmEnd(true)}
|
|
||||||
disabled={loading !== null}
|
|
||||||
className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<Flag size={15} />
|
|
||||||
结束投票（立即出结果）
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user