feat: 实时消息与管理端运营能力
新增群聊/私信与公共 WebSocket 总线，站长用户内容档案，并将通知与待审角标改为推送驱动；同步精简管理仪表盘并修复主题换肤 DOM 冲突。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
706
frontend/app/chat/ChatShell.tsx
Normal file
706
frontend/app/chat/ChatShell.tsx
Normal file
@@ -0,0 +1,706 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
MessageSquare,
|
||||
Users,
|
||||
X,
|
||||
Pin,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
apiListChatRooms,
|
||||
apiSearchChatUsers,
|
||||
apiOpenDirectChat,
|
||||
apiCreateChatRoom,
|
||||
apiPinChatRoom,
|
||||
type ChatRoomView,
|
||||
type User,
|
||||
} from "@/lib/api";
|
||||
import { realtime, RT_CHAT_UNREAD, RT_CHAT_MEMBERSHIP } from "@/lib/realtime";
|
||||
import type { RtChatUnreadData, RtChatMembershipData } from "@/lib/realtime";
|
||||
import { toast } from "@/lib/toast";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import ContextMenu, { type CtxMenuItem } from "@/components/ContextMenu";
|
||||
|
||||
function roomTitle(room: ChatRoomView) {
|
||||
if (room.room_type === "direct") {
|
||||
return room.peer?.nickname || room.peer?.username || room.name || "私聊";
|
||||
}
|
||||
return room.name || "未命名群";
|
||||
}
|
||||
|
||||
function roomPreview(room: ChatRoomView) {
|
||||
const lm = room.last_message;
|
||||
if (!lm) return room.description || "暂无消息";
|
||||
if (lm.recalled_at) {
|
||||
if (lm.recalled_by && lm.recalled_by !== lm.sender_id) {
|
||||
return "管理员撤回了此消息";
|
||||
}
|
||||
return "此消息已撤回";
|
||||
}
|
||||
const who =
|
||||
room.room_type === "direct"
|
||||
? ""
|
||||
: `${lm.sender?.nickname || lm.sender?.username || ""}：`;
|
||||
return `${who}${lm.content || ""}`.slice(0, 48);
|
||||
}
|
||||
|
||||
function formatTime(dateStr?: string) {
|
||||
if (!dateStr) return "";
|
||||
const d = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const sameDay =
|
||||
d.getFullYear() === now.getFullYear() &&
|
||||
d.getMonth() === now.getMonth() &&
|
||||
d.getDate() === now.getDate();
|
||||
if (sameDay) {
|
||||
return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`;
|
||||
}
|
||||
|
||||
/** 与后端一致：大厅强制置顶 > 个人置顶 > last_message_id */
|
||||
function sortRooms(list: ChatRoomView[]): ChatRoomView[] {
|
||||
return [...list].sort((a, b) => {
|
||||
const aHall = !!a.is_default;
|
||||
const bHall = !!b.is_default;
|
||||
if (aHall !== bHall) return aHall ? -1 : 1;
|
||||
const aPin = !aHall && !!a.pinned;
|
||||
const bPin = !bHall && !!b.pinned;
|
||||
if (aPin !== bPin) return aPin ? -1 : 1;
|
||||
if (a.last_message_id !== b.last_message_id) {
|
||||
return (b.last_message_id || 0) - (a.last_message_id || 0);
|
||||
}
|
||||
return b.id - a.id;
|
||||
});
|
||||
}
|
||||
|
||||
function isPinnedView(room: ChatRoomView) {
|
||||
return !!room.is_default || !!room.pinned || !!room.pin_forced;
|
||||
}
|
||||
|
||||
/**
|
||||
* PC 端飞书式消息壳：左会话列表 + 右会话区；移动端列表/会话互斥全屏。
|
||||
*/
|
||||
export default function ChatShell({
|
||||
meId,
|
||||
initialRooms,
|
||||
activeRoomId = null,
|
||||
children,
|
||||
}: {
|
||||
meId: number;
|
||||
initialRooms: ChatRoomView[];
|
||||
activeRoomId?: number | null;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [rooms, setRooms] = useState<ChatRoomView[]>(initialRooms);
|
||||
const [query, setQuery] = useState("");
|
||||
const [userHits, setUserHits] = useState<User[]>([]);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [ctxMenu, setCtxMenu] = useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
room: ChatRoomView;
|
||||
} | null>(null);
|
||||
const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setRooms(sortRooms(initialRooms));
|
||||
}, [initialRooms]);
|
||||
|
||||
const refreshRooms = useCallback(async () => {
|
||||
try {
|
||||
const res = await apiListChatRooms(1, 50, "", "joined");
|
||||
setRooms(sortRooms(res.rooms || []));
|
||||
} catch {
|
||||
// 静默
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 每次进入消息壳都用 HTTP 拉最新排序（避免首页 Link 预取/路由缓存导致新消息会话不置顶）
|
||||
useEffect(() => {
|
||||
refreshRooms();
|
||||
}, [refreshRooms, activeRoomId]);
|
||||
|
||||
// 从其他标签页切回时也对账一次
|
||||
useEffect(() => {
|
||||
const onVisible = () => {
|
||||
if (document.visibilityState === "visible") refreshRooms();
|
||||
};
|
||||
document.addEventListener("visibilitychange", onVisible);
|
||||
return () => document.removeEventListener("visibilitychange", onVisible);
|
||||
}, [refreshRooms]);
|
||||
|
||||
// 实时未读：更新侧栏角标与预览，按置顶规则重排（不盲目置顶到最前）
|
||||
useEffect(() => {
|
||||
const off = realtime.on<RtChatUnreadData>(RT_CHAT_UNREAD, (data) => {
|
||||
if (!data?.room_id) return;
|
||||
if (activeRoomId === data.room_id) return;
|
||||
setRooms((prev) => {
|
||||
const idx = prev.findIndex((r) => r.id === data.room_id);
|
||||
if (idx < 0) {
|
||||
refreshRooms();
|
||||
return prev;
|
||||
}
|
||||
const next = [...prev];
|
||||
const cur = next[idx];
|
||||
next[idx] = {
|
||||
...cur,
|
||||
unread_count: (cur.unread_count || 0) + (data.delta || 1),
|
||||
last_message_id: data.message_id,
|
||||
last_message: {
|
||||
id: data.message_id,
|
||||
room_id: data.room_id,
|
||||
sender_id: data.sender_id,
|
||||
content: data.preview || "",
|
||||
created_at: new Date().toISOString(),
|
||||
sender: cur.last_message?.sender || ({
|
||||
id: data.sender_id,
|
||||
username: "",
|
||||
nickname: "",
|
||||
avatar: "",
|
||||
role: "user",
|
||||
} as User),
|
||||
},
|
||||
};
|
||||
return sortRooms(next);
|
||||
});
|
||||
});
|
||||
return off;
|
||||
}, [activeRoomId, refreshRooms]);
|
||||
|
||||
useEffect(() => {
|
||||
const off = realtime.on<RtChatMembershipData>(RT_CHAT_MEMBERSHIP, (data) => {
|
||||
if (!data) return;
|
||||
if (data.status === "invited" || data.status === "dissolved" || data.status === "kicked") {
|
||||
refreshRooms();
|
||||
}
|
||||
});
|
||||
return off;
|
||||
}, [refreshRooms]);
|
||||
|
||||
// 进入会话后清零该会话未读
|
||||
useEffect(() => {
|
||||
if (!activeRoomId) return;
|
||||
setRooms((prev) =>
|
||||
prev.map((r) => (r.id === activeRoomId ? { ...r, unread_count: 0 } : r))
|
||||
);
|
||||
}, [activeRoomId]);
|
||||
|
||||
// 搜索：会话本地过滤 + 用户远程搜索
|
||||
useEffect(() => {
|
||||
const q = query.trim();
|
||||
if (!q) {
|
||||
setUserHits([]);
|
||||
return;
|
||||
}
|
||||
const t = setTimeout(async () => {
|
||||
setSearching(true);
|
||||
try {
|
||||
const res = await apiSearchChatUsers(q);
|
||||
setUserHits(res.users || []);
|
||||
} catch {
|
||||
setUserHits([]);
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
}, 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [query]);
|
||||
|
||||
const filteredRooms = (() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return rooms;
|
||||
return rooms.filter((r) => {
|
||||
const title = roomTitle(r).toLowerCase();
|
||||
const uname = r.peer?.username?.toLowerCase() || "";
|
||||
return title.includes(q) || uname.includes(q) || r.name.toLowerCase().includes(q);
|
||||
});
|
||||
})();
|
||||
|
||||
const openDM = async (uid: number) => {
|
||||
try {
|
||||
const { room } = await apiOpenDirectChat(uid);
|
||||
setQuery("");
|
||||
setUserHits([]);
|
||||
router.push(`/chat/${room.id}`);
|
||||
refreshRooms();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "无法发起私聊");
|
||||
}
|
||||
};
|
||||
|
||||
const togglePin = async (room: ChatRoomView) => {
|
||||
setCtxMenu(null);
|
||||
if (room.is_default || room.pin_forced) {
|
||||
toast("大厅已置顶且不可取消");
|
||||
return;
|
||||
}
|
||||
const next = !room.pinned;
|
||||
try {
|
||||
await apiPinChatRoom(room.id, next);
|
||||
setRooms((prev) =>
|
||||
sortRooms(
|
||||
prev.map((r) =>
|
||||
r.id === room.id ? { ...r, pinned: next } : r
|
||||
)
|
||||
)
|
||||
);
|
||||
toast(next ? "已置顶" : "已取消置顶", "ok");
|
||||
} catch (err) {
|
||||
toast(err instanceof Error ? err.message : "操作失败");
|
||||
}
|
||||
};
|
||||
|
||||
const openRoomMenu = (room: ChatRoomView, x: number, y: number) => {
|
||||
if (room.is_default || room.pin_forced) return;
|
||||
setCtxMenu({ x, y, room });
|
||||
};
|
||||
|
||||
const clearLongPress = () => {
|
||||
if (longPressTimer.current) {
|
||||
clearTimeout(longPressTimer.current);
|
||||
longPressTimer.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const showList = !activeRoomId;
|
||||
// 移动端：有会话时隐藏列表；桌面始终显示列表
|
||||
const listClass = activeRoomId
|
||||
? "hidden lg:flex"
|
||||
: "flex";
|
||||
const paneClass = activeRoomId
|
||||
? "flex"
|
||||
: "hidden lg:flex";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="panel overflow-hidden grid grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)]"
|
||||
style={{
|
||||
height: "calc(100vh - 8.5rem)",
|
||||
minHeight: "480px",
|
||||
borderColor: "var(--line)",
|
||||
}}
|
||||
>
|
||||
{/* 左栏：会话列表 */}
|
||||
<aside
|
||||
className={`${listClass} flex-col min-h-0`}
|
||||
style={{ borderRight: "1px solid var(--line)" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between gap-2 px-4 py-3 shrink-0"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<h1 className="font-extrabold text-[17px]" style={{ color: "var(--ink)" }}>
|
||||
消息
|
||||
</h1>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
|
||||
style={{ color: "var(--accent)" }}
|
||||
aria-label="新建群聊"
|
||||
title="新建群聊"
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-3 py-2.5 shrink-0 space-y-1.5">
|
||||
<label
|
||||
className="j13-chat-search flex items-center gap-2 px-3 h-10 rounded-xl cursor-text transition-[border-color,box-shadow] duration-150"
|
||||
style={{
|
||||
background: "var(--bg)",
|
||||
border: "1px solid var(--line)",
|
||||
}}
|
||||
>
|
||||
<Search size={15} className="shrink-0 pointer-events-none" style={{ color: query ? "var(--accent)" : "var(--ink-3)" }} />
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="搜索会话、用户名或昵称"
|
||||
className="j13-chat-search-input bg-transparent flex-1 self-stretch h-full text-[13px] min-w-0"
|
||||
style={{ color: "var(--ink)" }}
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setQuery("");
|
||||
}}
|
||||
aria-label="清除搜索"
|
||||
className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] shrink-0"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
)}
|
||||
</label>
|
||||
{query.trim() && (
|
||||
<p className="px-1 text-[11px] meta">
|
||||
{searching
|
||||
? "正在搜索用户…"
|
||||
: `会话 ${filteredRooms.length} · 用户 ${userHits.length}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
{query.trim() && (
|
||||
<div className="px-2 pb-2">
|
||||
<p
|
||||
className="px-2 py-1.5 text-[11px] font-bold uppercase tracking-wider"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
用户 {searching ? "…" : ""}
|
||||
</p>
|
||||
{userHits.length === 0 && !searching ? (
|
||||
<p className="px-2 py-2 text-[12px] meta">无匹配用户</p>
|
||||
) : (
|
||||
userHits.map((u) => (
|
||||
<button
|
||||
key={u.id}
|
||||
onClick={() => openDM(u.id)}
|
||||
className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-[var(--accent-soft)] transition-colors"
|
||||
>
|
||||
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={36} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-[13px] font-semibold truncate" style={{ color: "var(--ink)" }}>
|
||||
{u.nickname || u.username}
|
||||
</p>
|
||||
<p className="text-[11px] meta truncate">@{u.username}</p>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
<p
|
||||
className="px-2 py-1.5 mt-1 text-[11px] font-bold uppercase tracking-wider"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
会话
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filteredRooms.length === 0 ? (
|
||||
<div className="text-center py-16 px-4">
|
||||
<MessageSquare size={28} style={{ color: "var(--ink-3)", margin: "0 auto 8px" }} />
|
||||
<p className="text-[13px] meta">
|
||||
{query ? "无匹配会话" : "还没有会话，搜索用户发起私聊或新建群聊"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="px-1.5 pb-2">
|
||||
{filteredRooms.map((room) => {
|
||||
const active = room.id === activeRoomId;
|
||||
const pinned = isPinnedView(room);
|
||||
return (
|
||||
<li key={room.id}>
|
||||
<Link
|
||||
href={`/chat/${room.id}`}
|
||||
className="flex items-center gap-2.5 px-2.5 py-2.5 rounded-xl transition-colors"
|
||||
style={{
|
||||
background: active ? "var(--accent-soft)" : "transparent",
|
||||
}}
|
||||
onContextMenu={(e) => {
|
||||
if (room.is_default || room.pin_forced) return;
|
||||
e.preventDefault();
|
||||
openRoomMenu(room, e.clientX, e.clientY);
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
if (room.is_default || room.pin_forced) return;
|
||||
const t = e.touches[0];
|
||||
if (!t) return;
|
||||
clearLongPress();
|
||||
longPressTimer.current = setTimeout(() => {
|
||||
openRoomMenu(room, t.clientX, t.clientY);
|
||||
}, 480);
|
||||
}}
|
||||
onTouchEnd={clearLongPress}
|
||||
onTouchMove={clearLongPress}
|
||||
>
|
||||
<span
|
||||
className="w-10 h-10 shrink-0 rounded-xl flex items-center justify-center overflow-hidden"
|
||||
style={{ background: "var(--panel-2)" }}
|
||||
>
|
||||
{room.room_type === "direct" && room.peer ? (
|
||||
<Avatar
|
||||
name={room.peer.nickname || room.peer.username}
|
||||
src={room.peer.avatar || undefined}
|
||||
size={40}
|
||||
/>
|
||||
) : (
|
||||
<Users size={18} style={{ color: "var(--accent)" }} />
|
||||
)}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className="font-semibold text-[13.5px] truncate"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{roomTitle(room)}
|
||||
</span>
|
||||
{pinned && (
|
||||
<span
|
||||
className="inline-flex items-center gap-0.5 text-[10px] font-bold shrink-0 px-1.5 py-0.5 rounded"
|
||||
style={{
|
||||
background: "var(--accent-soft)",
|
||||
color: "var(--accent)",
|
||||
}}
|
||||
title={room.is_default ? "强制置顶" : "置顶"}
|
||||
>
|
||||
<Pin size={10} /> 置顶
|
||||
</span>
|
||||
)}
|
||||
{room.is_default && (
|
||||
<span className="text-[10px] font-bold shrink-0" style={{ color: "var(--gold)" }}>
|
||||
大厅
|
||||
</span>
|
||||
)}
|
||||
{room.is_private && room.room_type === "group" && (
|
||||
<span className="text-[10px] font-bold shrink-0 meta">私密</span>
|
||||
)}
|
||||
<span className="ml-auto meta text-[10.5px] shrink-0">
|
||||
{formatTime(room.last_message?.created_at || room.updated_at)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<p className="text-[12px] truncate meta flex-1">{roomPreview(room)}</p>
|
||||
{room.unread_count > 0 && (
|
||||
<span
|
||||
className="shrink-0 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center"
|
||||
style={{ background: "var(--clay)", color: "#fff" }}
|
||||
>
|
||||
{room.unread_count > 99 ? "99+" : room.unread_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 右栏：会话内容 */}
|
||||
<section className={`${paneClass} flex-col min-h-0 min-w-0`}>
|
||||
{children ? (
|
||||
children
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center px-6 text-center">
|
||||
<span
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<MessageSquare size={28} />
|
||||
</span>
|
||||
<p className="font-bold text-[16px]" style={{ color: "var(--ink)" }}>
|
||||
选择一个会话开始聊天
|
||||
</p>
|
||||
<p className="meta mt-1.5 text-[13px] max-w-xs">
|
||||
在左侧搜索用户发起私聊，或新建群聊。全站大厅已为你自动加入。
|
||||
</p>
|
||||
{showList && (
|
||||
<p className="lg:hidden meta mt-4 text-[12px]">请从上方列表选择会话</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{showCreate && (
|
||||
<CreateGroupModal
|
||||
onClose={() => setShowCreate(false)}
|
||||
onCreated={(id) => {
|
||||
setShowCreate(false);
|
||||
toast("群已创建", "ok");
|
||||
router.push(`/chat/${id}`);
|
||||
refreshRooms();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{ctxMenu && (
|
||||
<ContextMenu
|
||||
x={ctxMenu.x}
|
||||
y={ctxMenu.y}
|
||||
items={
|
||||
[
|
||||
{
|
||||
key: "pin",
|
||||
label: ctxMenu.room.pinned ? "取消置顶" : "置顶",
|
||||
icon: <Pin size={14} />,
|
||||
onClick: () => togglePin(ctxMenu.room),
|
||||
},
|
||||
] as CtxMenuItem[]
|
||||
}
|
||||
onClose={() => setCtxMenu(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateGroupModal({
|
||||
onClose,
|
||||
onCreated,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onCreated: (roomId: number) => void;
|
||||
}) {
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [isPrivate, setIsPrivate] = useState(false);
|
||||
const [memberInput, setMemberInput] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const submit = async () => {
|
||||
const trimmed = name.trim();
|
||||
if (trimmed.length < 2 || trimmed.length > 32) {
|
||||
toast("群名称需为 2-32 个字符");
|
||||
return;
|
||||
}
|
||||
if (description.length > 200) {
|
||||
toast("群简介不能超过 200 个字符");
|
||||
return;
|
||||
}
|
||||
const usernames = memberInput
|
||||
.split(/[\s,，]+/)
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const { room } = await apiCreateChatRoom(trimmed, description.trim(), {
|
||||
is_private: isPrivate,
|
||||
member_usernames: isPrivate ? usernames : [],
|
||||
});
|
||||
onCreated(room.id);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "建群失败");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
|
||||
style={{ background: "rgba(0,0,0,0.55)" }}
|
||||
// 刻意不绑定外侧点击关闭，避免误关丢失已填内容
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md rounded-2xl p-6 j13-toast-in"
|
||||
style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<h2 className="text-[18px] font-extrabold" style={{ color: "var(--ink)" }}>
|
||||
新建群聊
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={submitting}
|
||||
aria-label="关闭"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={15} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
|
||||
群名称 <span style={{ color: "var(--danger)" }}>*</span>
|
||||
</label>
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
maxLength={32}
|
||||
placeholder="2-32 个字符"
|
||||
className="w-full px-3.5 h-10 rounded-lg outline-none"
|
||||
style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
|
||||
群简介（选填）
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
maxLength={200}
|
||||
rows={3}
|
||||
className="w-full px-3.5 py-2.5 rounded-lg outline-none resize-none"
|
||||
style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
|
||||
可见性
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsPrivate(false)}
|
||||
className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
|
||||
style={{
|
||||
background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
|
||||
color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
|
||||
border: `1px solid ${!isPrivate ? "var(--accent)" : "var(--line)"}`,
|
||||
}}
|
||||
>
|
||||
公开
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsPrivate(true)}
|
||||
className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
|
||||
style={{
|
||||
background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
|
||||
color: isPrivate ? "var(--accent)" : "var(--ink-2)",
|
||||
border: `1px solid ${isPrivate ? "var(--accent)" : "var(--line)"}`,
|
||||
}}
|
||||
>
|
||||
私密
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{isPrivate && (
|
||||
<div>
|
||||
<label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
|
||||
初始成员（选填）
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={memberInput}
|
||||
onChange={(e) => setMemberInput(e.target.value)}
|
||||
placeholder="用户名，多个用空格或逗号分隔"
|
||||
className="w-full px-3.5 h-10 rounded-lg outline-none"
|
||||
style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<button onClick={onClose} disabled={submitting} className="btn btn-line btn-sm">
|
||||
取消
|
||||
</button>
|
||||
<button onClick={submit} disabled={submitting} className="btn btn-accent btn-sm">
|
||||
{submitting ? "创建中..." : "创建"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user