freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: 站点媒体库与移动端底部导航，服务测试补强

Browse Source 
- 新增媒体库：media_library/media_thumbs 服务（WebP 缩略图）、管理端 media 页面
- 移动端底部导航 MobileTabBar 替换 MobilePostBar
- 旧数据导入增强与测试、路由与登录会话/板块侧边栏测试补强
- site-doc 组件精简（移除 Breadcrumb），文档新增迁移公告说明
This commit is contained in:
姜十三
2026-09-27 02:35:38 +08:00
parent 734afbc39f
commit 1d862a0dd3
61 changed files with 4757 additions and 1129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/app/chat/[id]/ChatRoomClient.tsx
View File

@@ -16,6 +16,7 @@ import {
Undo2,
Reply,
Copy,
ChevronsDown,
} from "lucide-react";
import {
apiListChatMessages,
@@ -419,6 +420,10 @@ export default function ChatRoomClient({
const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
const [hasMore, setHasMore] = useState(initialHasMore);
const [loadingMore, setLoadingMore] = useState(false);
// 「回到底部」悬浮钮：column-reverse 下 scrollTop≤0（视觉底部为 0，上翻为负），
// -scrollTop 即距底部距离；newBelowCount 为翻历史期间新到的、尚未“看见”的消息数
const [showJumpBottom, setShowJumpBottom] = useState(false);
const [newBelowCount, setNewBelowCount] = useState(0);
const [content, setContent] = useState("");
const [sending, setSending] = useState(false);
const [members, setMembers] = useState<ChatRoomMember[]>([]);
@@ -550,12 +555,22 @@ export default function ChatRoomClient({
[roomId, isRealMember]
);
// 悬浮钮/新消息引导回底：跳底 + 推进已读 + 清空待看计数
const jumpToBottom = useCallback(() => {
setNewBelowCount(0);
scrollToBottom(true);
markReadToLatest();
}, [scrollToBottom, markReadToLatest]);
useEffect(() => {
if (!canView) return;
realtime.joinRoom(roomId);
void refreshMembers();
// 列表用 flex-col-reverse，SSR/无 JS 默认即贴底，无需首屏 scrollToBottom（避免 F5 闪一下）
markReadToLatest();
// 换房时重置「回到底部」悬浮钮状态
setShowJumpBottom(false);
setNewBelowCount(0);
return () => {
realtime.leaveRoom(roomId);
};
@@ -573,10 +588,13 @@ export default function ChatRoomClient({
requestAnimationFrame(() => {
const el = listRef.current;
if (!el) return;
// column-reverse：靠近 scrollTop=0 即贴底
if (el.scrollTop < 120) {
// column-reverse：-scrollTop 为距底部距离，接近 0 即贴底
if (-el.scrollTop < 120) {
scrollToBottom(true);
markReadToLatest();
} else {
// 正在上方翻历史：不强行跟到底，计数交给「回到底部」按钮提示
setNewBelowCount((c) => c + 1);
}
});
});
@@ -652,8 +670,9 @@ export default function ChatRoomClient({
requestAnimationFrame(() => {
const el = listRef.current;
if (!el) return;
// column-reverse：历史插在上方，用高度差补偿保持视口锚点
el.scrollTop = prevTop + (el.scrollHeight - prevHeight);
// column-reverse：历史插在上方，scrollTop 为负；
// 新增高度 H 使锚点内容距底部多 H，需 scrollTop 再减 H（更负）保持视口不动
el.scrollTop = prevTop - (el.scrollHeight - prevHeight);
});
} else {
setHasMore(false);
@@ -668,13 +687,20 @@ export default function ChatRoomClient({
const handleScroll = useCallback(() => {
const el = listRef.current;
if (!el) return;
// column-reverse：滚向上方历史 ≈ 接近 max scrollTop
if (el.scrollHeight - el.scrollTop - el.clientHeight < 60) {
// column-reverse：scrollTop≤0（视觉底部为 0，上翻为负），-scrollTop 即距底部距离
const fromBottom = -el.scrollTop;
// 滚向上方历史：距顶部不足 60px 时加载更多
if (el.scrollHeight - el.clientHeight - fromBottom < 60) {
loadMore();
}
if (el.scrollTop < 60) {
if (fromBottom < 60) {
markReadToLatest();
}
// 「回到底部」：离开底部一段距离即出现，接近底部时消失
setShowJumpBottom(fromBottom > 160);
if (fromBottom < 120) {
setNewBelowCount(0);
}
}, [loadMore, markReadToLatest]);
const syncComposerHeight = () => {
@@ -1238,7 +1264,7 @@ export default function ChatRoomClient({
<button
onClick={() => togglePanel("members")}
aria-label="成员列表"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
style={{
color: rightPanel === "members" ? "var(--accent)" : "var(--ink-2)",
background: rightPanel === "members" ? "var(--accent-soft)" : undefined,
@@ -1252,7 +1278,7 @@ export default function ChatRoomClient({
<button
onClick={() => togglePanel("invite")}
aria-label="邀请成员"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
style={{
color: rightPanel === "invite" ? "var(--accent)" : "var(--ink-2)",
background: rightPanel === "invite" ? "var(--accent-soft)" : undefined,
@@ -1266,7 +1292,7 @@ export default function ChatRoomClient({
<button
onClick={() => togglePanel("settings")}
aria-label="群设置"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
style={{
color: rightPanel === "settings" ? "var(--accent)" : "var(--ink-2)",
background: rightPanel === "settings" ? "var(--accent-soft)" : undefined,
@@ -1280,7 +1306,7 @@ export default function ChatRoomClient({
<button
onClick={handleLeave}
aria-label={isDirect ? "关闭私聊" : "退出群聊"}
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--danger-soft)]"
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--danger-soft)] focus-visible:bg-[var(--danger-soft)]"
style={{ color: "var(--ink-3)" }}
data-tip={isDirect ? "关闭私聊" : "退出群聊"}
>
@@ -1290,12 +1316,13 @@ export default function ChatRoomClient({
</div>
</div>
<div
ref={listRef}
onScroll={handleScroll}
className="flex-1 overflow-y-auto flex flex-col-reverse px-4 sm:px-5 py-4"
style={{ minHeight: 0 }}
>
<div className="relative flex-1 flex flex-col" style={{ minHeight: 0 }}>
<div
ref={listRef}
onScroll={handleScroll}
className="j13-chat-scroll flex-1 overflow-y-auto overflow-x-hidden flex flex-col-reverse px-4 sm:px-5 py-4"
style={{ minHeight: 0 }}
>
{!canView ? (
<div className="text-center py-12 px-4">
<p style={{ color: "var(--ink)" }}>
@@ -1313,7 +1340,7 @@ export default function ChatRoomClient({
<button
onClick={loadMore}
disabled={loadingMore}
className="mx-auto block text-[12px] meta hover:text-[var(--accent)] transition-colors py-2"
className="mx-auto block text-[12px] meta hover:text-[var(--accent)] focus-visible:text-[var(--accent)] transition-colors py-2"
>
{loadingMore ? "加载中..." : "加载更早消息"}
</button>
@@ -1435,7 +1462,7 @@ export default function ChatRoomClient({
</span>
</div>
<div
className="px-3.5 py-2.5 rounded-2xl text-[14px] leading-[1.55] break-words whitespace-pre-wrap select-text w-full"
className="px-3.5 py-2.5 rounded-2xl text-[14px] leading-[1.55] [overflow-wrap:anywhere] whitespace-pre-wrap select-text w-full"
style={{
background: "var(--panel-2)",
border:
@@ -1531,7 +1558,7 @@ export default function ChatRoomClient({
</div>
)}
<div
className="px-3.5 py-2.5 rounded-2xl text-[14px] leading-[1.55] break-words whitespace-pre-wrap select-text"
className="px-3.5 py-2.5 rounded-2xl text-[14px] leading-[1.55] [overflow-wrap:anywhere] whitespace-pre-wrap select-text"
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -1566,7 +1593,7 @@ export default function ChatRoomClient({
<button
type="button"
onClick={() => scrollToMsg(m.reply_to_id!)}
className="block w-full text-left mb-1.5 px-2 py-1.5 rounded-lg text-[12px] leading-snug"
className="block w-full text-left mb-1.5 px-2 py-1.5 rounded-lg text-[12px] leading-snug [overflow-wrap:anywhere]"
style={{
background: mine
? "color-mix(in srgb, var(--accent) 10%, transparent)"
@@ -1587,6 +1614,35 @@ export default function ChatRoomClient({
)}
</div>
)}
</div>
{/* 回到底部：飞书式悬浮钮，贴近当前对话框右下角；翻历史期间带新消息计数 */}
{canView && showJumpBottom && (
<button
type="button"
onClick={jumpToBottom}
aria-label="回到底部"
data-tip="回到底部"
className="absolute right-4 sm:right-5 bottom-3 z-10 w-10 h-10 rounded-full flex items-center justify-center border border-gray-300 hover:border-gray-400 focus-visible:border-gray-400 transition-colors j13-toast-in text-black hover:bg-gray-50"
style={{
background: "#fff",
boxShadow: "var(--shadow)",
}}
>
<ChevronsDown size={18} />
{newBelowCount > 0 && (
<span
className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[10px] font-medium flex items-center justify-center rounded-full"
style={{
background: "var(--clay)",
color: "#fff",
border: "2px solid var(--bg)",
}}
>
{newBelowCount > 99 ? "99+" : newBelowCount}
</span>
)}
</button>
)}
</div>
{isRealMember ? (
@@ -1710,10 +1766,16 @@ export default function ChatRoomClient({
: "输入消息，@ 可提醒成员"
}
maxLength={2000}
className={`j13-chat-composer-input relative w-full bg-transparent text-[14px] leading-5 py-2 max-h-32 min-h-[36px]${
className={`j13-chat-scroll j13-chat-composer-input relative w-full bg-transparent text-[14px] leading-5 py-2 max-h-32 min-h-[36px]${
content ? " has-value" : ""
}`}
style={{ color: content ? undefined : "var(--ink)" }}
onFocus={(e) => {
// 键盘弹出兜底：把输入框滚入可视区（个别浏览器
// interactiveWidget=resizes-content 不生效时仍能聚焦可见）
const composer = e.currentTarget.closest(".j13-chat-composer");
composer?.scrollIntoView({ block: "end", behavior: "smooth" });
}}
onInput={(e) => {
const t = e.currentTarget;
t.style.height = "auto";
@@ -1796,7 +1858,7 @@ export default function ChatRoomClient({
<X size={14} />
</button>
</div>
<div className="flex-1 overflow-y-auto min-h-0 p-4">
<div className="j13-chat-scroll flex-1 overflow-y-auto min-h-0 p-4">
{rightPanel === "members" && (
<MembersPanel
members={members}
@@ -1845,7 +1907,7 @@ export default function ChatRoomClient({
{/* 非嵌入模式：未开右栏时桌面仍显示成员常驻栏 */}
{!embedded && canView && !isDirect && !rightPanel && (
<aside className="hidden lg:flex flex-col panel p-4 overflow-y-auto min-h-0">
<aside className="j13-chat-scroll hidden lg:flex flex-col panel p-4 overflow-y-auto min-h-0">
<MembersPanel
members={members}
meId={meId}
@@ -2032,7 +2094,7 @@ function MembersPanel({
<button
type="button"
onClick={() => onSetAdmin(m.user_id, name, !isTargetAdmin)}
className="opacity-0 group-hover:opacity-100 transition-opacity text-[11px] px-1.5 py-0.5 rounded"
className="opacity-100 lg:opacity-0 lg:group-hover:opacity-100 lg:focus-visible:opacity-100 lg:group-focus-within:opacity-100 transition-opacity text-[11px] px-1.5 py-0.5 rounded hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
style={{ color: "var(--accent)", background: "var(--accent-soft)" }}
>
{isTargetAdmin ? "取消管" : "设管"}
@@ -2043,7 +2105,7 @@ function MembersPanel({
<button
type="button"
onClick={() => onMute(m.user_id, name, !m.muted)}
className="opacity-0 group-hover:opacity-100 transition-opacity text-[11px] px-1"
className="opacity-100 lg:opacity-0 lg:group-hover:opacity-100 lg:focus-visible:opacity-100 lg:group-focus-within:opacity-100 transition-opacity text-[11px] px-1.5 py-0.5 rounded hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
style={{ color: "var(--ink-3)" }}
>
{m.muted ? "解禁" : "禁言"}
@@ -2052,7 +2114,7 @@ function MembersPanel({
type="button"
onClick={() => onKick(m.user_id, name)}
aria-label={`移出 ${name}`}
className="opacity-0 group-hover:opacity-100 transition-opacity w-6 h-6 flex items-center justify-center rounded-full hover:bg-[var(--danger-soft)]"
className="opacity-100 lg:opacity-0 lg:group-hover:opacity-100 lg:focus-visible:opacity-100 lg:group-focus-within:opacity-100 transition-opacity w-6 h-6 flex items-center justify-center rounded-full hover:bg-[var(--danger-soft)] focus-visible:bg-[var(--danger-soft)]"
style={{ color: "var(--danger)" }}
>
<UserX size={12} />