975 lines
36 KiB
TypeScript
975 lines
36 KiB
TypeScript
import { useState, useEffect, useCallback, useRef, useMemo, Suspense, startTransition } from 'react';
|
||
import { Outlet, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
|
||
import { Menu, Moon, Sun, Search, Plus, PanelRight, X, Mail, SlidersHorizontal } from 'lucide-react';
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from '@/components/ui/dropdown-menu';
|
||
import { useAuth } from '../hooks/useAuth';
|
||
import { useTheme, useMediaQuery } from '../hooks/useTheme';
|
||
import { useOverlayA11y, moveTabIndex } from '../hooks/useOverlayA11y';
|
||
import { api } from '../api/client';
|
||
import type { Board, RecentComment, RecentUser, ForumStats, TagCount, User } from '../api/types';
|
||
import type { PostHeading } from '../utils/postHeadings';
|
||
import { getCachedBoards, getCachedStats, getCachedRecentComments, getCachedRecentUsers, getCachedTags, hasCachedAside, setCachedBoards, setCachedStats, setCachedRecentComments, setCachedRecentUsers, setCachedTags } from '../utils/layoutCache';
|
||
import Sidebar, { isNeutralSidebarRoute } from '../components/Sidebar';
|
||
import RightPanel from '../components/RightPanel';
|
||
import BackToTop from '../components/BackToTop';
|
||
import { useForumLimits } from '../hooks/useForumLimits';
|
||
import { resolveAsideWidgets } from '../utils/asideWidgets';
|
||
import { buildHomeUrl, parseFeedSort } from '../components/FeedSortBar';
|
||
import { navigateFeed, PAGE_FORCE_REFRESH_EVENT } from '../utils/feedCache';
|
||
import { PAGE_SOFT_REFRESH_COMMIT_EVENT } from '../utils/softRefresh';
|
||
import { prefetchRoute, wasColdBootEnsured } from '../utils/prefetchRoute';
|
||
import {
|
||
transitionTo,
|
||
} from '../utils/spaTransition';
|
||
import PostSearchPanel from '../components/search/PostSearchPanel';
|
||
import {
|
||
POST_SEARCH_OPEN_EVENT,
|
||
usePostSearch,
|
||
} from '../hooks/usePostSearch';
|
||
import { cn } from '@/lib/utils';
|
||
import { getBoardThemeIndex } from '../utils/boardTheme';
|
||
import { loginPath } from '../utils/authRedirect';
|
||
import { openForumPost } from '../utils/openPost';
|
||
import { refetchSiteBranding, useSiteBranding } from '../hooks/useSiteBranding';
|
||
import { useMonitorPageview } from '../hooks/useMonitorPageview';
|
||
import SiteBrandMark from '../components/SiteBrandMark';
|
||
import SiteFooter from '../components/SiteFooter';
|
||
import { userPath } from '../utils/userPath';
|
||
import { parsePermalinkID } from '../utils/permalink';
|
||
import { ensureSitePagesLoaded } from '../hooks/useSitePages';
|
||
import { endHomeHydrate, isHomeHydrating } from '../utils/homeHydrate';
|
||
import { getBootUnread } from '../utils/authBoot';
|
||
|
||
export default function MainLayout() {
|
||
const { user, loading: authLoading, logout } = useAuth();
|
||
const { theme, toggle } = useTheme();
|
||
const { branding } = useSiteBranding();
|
||
useMonitorPageview();
|
||
const mqMobile = useMediaQuery('(max-width: 768px)');
|
||
const hideAside = useMediaQuery('(max-width: 1100px)');
|
||
/** hydrate 首帧强制桌面布局（SSR 为桌面三栏），随后再跟 matchMedia */
|
||
const [forceDesktop, setForceDesktop] = useState(() => isHomeHydrating());
|
||
const isMobile = forceDesktop ? false : mqMobile;
|
||
const nav = useNavigate();
|
||
const loc = useLocation();
|
||
const [params] = useSearchParams();
|
||
const isCompose = loc.pathname.startsWith('/compose') || /\/post\/\d+\/edit$/.test(loc.pathname);
|
||
|
||
useEffect(() => {
|
||
if (!forceDesktop) return;
|
||
endHomeHydrate();
|
||
startTransition(() => setForceDesktop(false));
|
||
}, [forceDesktop]);
|
||
|
||
const [boards, setBoards] = useState<Board[]>(() => getCachedBoards());
|
||
const [stats, setStats] = useState<ForumStats | null>(() => getCachedStats());
|
||
const [recentComments, setRecentComments] = useState<RecentComment[]>(() => getCachedRecentComments());
|
||
const [recentUsers, setRecentUsers] = useState<RecentUser[]>(() => getCachedRecentUsers());
|
||
const [unreadMessages, setUnreadMessages] = useState(() => getBootUnread());
|
||
const [tags, setTags] = useState<TagCount[]>(() => getCachedTags());
|
||
const [tagsLoading, setTagsLoading] = useState(() => getCachedTags().length === 0);
|
||
const [postOutline, setPostOutline] = useState<{
|
||
headings: PostHeading[];
|
||
scrollRoot: HTMLElement | null;
|
||
title?: string;
|
||
author?: User | null;
|
||
publishedAt?: string;
|
||
viewCount?: number;
|
||
} | null>(null);
|
||
const [asideOpen, setAsideOpen] = useState(false);
|
||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||
const [searchPanelOpen, setSearchPanelOpen] = useState(false);
|
||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||
const [asideLoading, setAsideLoading] = useState(() => !hasCachedAside());
|
||
const [boardsLoading, setBoardsLoading] = useState(() => getCachedBoards().length === 0);
|
||
const [layoutRefreshTick, setLayoutRefreshTick] = useState(0);
|
||
const asideEverLoaded = useRef(false);
|
||
/** 冷启动门闩：main.tsx 已预热则可同步放行；否则等齐再呈现 */
|
||
const [shellReady, setShellReady] = useState(() => isCompose || wasColdBootEnsured());
|
||
const coldBootDone = useRef(isCompose || wasColdBootEnsured());
|
||
const bootGen = useRef(0);
|
||
const [boardId, setBoardId] = useState(() => {
|
||
const m = loc.pathname.match(/^\/board\/(\d+(?:\.[A-Za-z0-9]{1,16})?)$/);
|
||
if (m) return parsePermalinkID(m[1]) || 0;
|
||
return Number(params.get('board')) || 0;
|
||
});
|
||
const [keywordDraft, setKeywordDraft] = useState(params.get('keyword') || '');
|
||
const { limits: forumLimits } = useForumLimits();
|
||
const feedSort = parseFeedSort(params.get('sort'), forumLimits.feed_sort_tabs);
|
||
const postSearch = usePostSearch(forumLimits);
|
||
const asideWidgets = useMemo(() => resolveAsideWidgets(forumLimits), [forumLimits]);
|
||
const showTagCloud = asideWidgets.some(w => w.id === 'tag_cloud' && w.enabled);
|
||
const showRecentComments = asideWidgets.some(w => w.id === 'recent_comments' && w.enabled);
|
||
const showRecentUsers = asideWidgets.some(w => w.id === 'recent_users' && w.enabled);
|
||
|
||
const asideDrawerRef = useRef<HTMLElement>(null);
|
||
const asideCloseRef = useRef<HTMLButtonElement>(null);
|
||
const sidebarDrawerRef = useRef<HTMLElement>(null);
|
||
const sidebarCloseRef = useRef<HTMLButtonElement>(null);
|
||
const boardBarRef = useRef<HTMLDivElement>(null);
|
||
|
||
const closeAside = useCallback(() => setAsideOpen(false), []);
|
||
const closeSidebar = useCallback(() => setSidebarOpen(false), []);
|
||
const openAside = useCallback(() => {
|
||
setSidebarOpen(false);
|
||
setAsideOpen(true);
|
||
}, []);
|
||
const openSidebar = useCallback(() => {
|
||
setAsideOpen(false);
|
||
setSidebarOpen(true);
|
||
}, []);
|
||
|
||
useOverlayA11y(asideOpen && hideAside && !isCompose, closeAside, asideDrawerRef, {
|
||
initialFocusRef: asideCloseRef,
|
||
});
|
||
useOverlayA11y(sidebarOpen && isMobile && !isCompose, closeSidebar, sidebarDrawerRef, {
|
||
initialFocusRef: sidebarCloseRef,
|
||
});
|
||
|
||
useEffect(() => {
|
||
const m = loc.pathname.match(/^\/board\/(\d+(?:\.[A-Za-z0-9]{1,16})?)$/);
|
||
if (m) {
|
||
setBoardId(parsePermalinkID(m[1]) || 0);
|
||
return;
|
||
}
|
||
setBoardId(Number(params.get('board')) || 0);
|
||
}, [loc.pathname, params]);
|
||
useEffect(() => {
|
||
setKeywordDraft(params.get('keyword') || '');
|
||
}, [params]);
|
||
useEffect(() => {
|
||
setAsideOpen(false);
|
||
setSidebarOpen(false);
|
||
}, [loc.pathname, loc.search]);
|
||
useEffect(() => {
|
||
if (!/^\/post\/\d+/.test(loc.pathname)) setPostOutline(null);
|
||
}, [loc.pathname]);
|
||
useEffect(() => {
|
||
if (!hideAside) setAsideOpen(false);
|
||
}, [hideAside]);
|
||
useEffect(() => {
|
||
if (!isMobile) setSidebarOpen(false);
|
||
}, [isMobile]);
|
||
|
||
const openSearchPanel = useCallback(() => setSearchPanelOpen(true), []);
|
||
|
||
useEffect(() => {
|
||
const onOpen = () => setSearchPanelOpen(true);
|
||
window.addEventListener(POST_SEARCH_OPEN_EVENT, onOpen);
|
||
return () => window.removeEventListener(POST_SEARCH_OPEN_EVENT, onOpen);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (isCompose) return;
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (!(e.ctrlKey || e.metaKey) || e.key.toLowerCase() !== 'k') return;
|
||
const tag = (e.target as HTMLElement | null)?.tagName;
|
||
const editable = (e.target as HTMLElement | null)?.isContentEditable;
|
||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || editable) return;
|
||
e.preventDefault();
|
||
if (isMobile) {
|
||
setSearchPanelOpen(true);
|
||
} else {
|
||
searchInputRef.current?.focus();
|
||
searchInputRef.current?.select();
|
||
}
|
||
};
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [isCompose, isMobile]);
|
||
useEffect(() => {
|
||
if (!asideOpen && !sidebarOpen) return;
|
||
const prev = document.body.style.overflow;
|
||
document.body.style.overflow = 'hidden';
|
||
return () => { document.body.style.overflow = prev; };
|
||
}, [asideOpen, sidebarOpen]);
|
||
|
||
const refreshBoards = useCallback(() => {
|
||
return Promise.all([
|
||
api.boards().then(d => {
|
||
const next = d.boards ?? [];
|
||
setBoards(next);
|
||
setCachedBoards(next);
|
||
return next;
|
||
}).catch(() => [] as Board[]),
|
||
api.stats().then(next => {
|
||
setStats(next);
|
||
setCachedStats(next);
|
||
return next;
|
||
}).catch(() => null),
|
||
]).finally(() => {
|
||
setBoardsLoading(false);
|
||
});
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
refreshBoards();
|
||
const onRefresh = () => refreshBoards();
|
||
window.addEventListener('boards-refresh', onRefresh);
|
||
return () => window.removeEventListener('boards-refresh', onRefresh);
|
||
}, [refreshBoards]);
|
||
|
||
// 冷启动兜底：main 未预热时静默等齐（不打进度条）；站内已预热则保持打开
|
||
useEffect(() => {
|
||
if (isCompose) {
|
||
coldBootDone.current = true;
|
||
setShellReady(true);
|
||
return;
|
||
}
|
||
if (coldBootDone.current || wasColdBootEnsured()) {
|
||
coldBootDone.current = true;
|
||
setShellReady(true);
|
||
setBoardsLoading(false);
|
||
setAsideLoading(false);
|
||
setTagsLoading(false);
|
||
asideEverLoaded.current = true;
|
||
return;
|
||
}
|
||
|
||
const gen = ++bootGen.current;
|
||
let cancelled = false;
|
||
|
||
(async () => {
|
||
try {
|
||
const path = `${loc.pathname}${loc.search}`;
|
||
const tasks: Promise<unknown>[] = [
|
||
prefetchRoute(path, { force: false }),
|
||
refreshBoards(),
|
||
ensureSitePagesLoaded(),
|
||
];
|
||
|
||
if (!hideAside) {
|
||
if (showRecentComments) {
|
||
tasks.push(
|
||
api.recentComments().then((d) => {
|
||
const next = Array.isArray(d.comments) ? d.comments : [];
|
||
setRecentComments(next);
|
||
setCachedRecentComments(next);
|
||
}).catch(() => undefined),
|
||
);
|
||
}
|
||
if (showRecentUsers) {
|
||
tasks.push(
|
||
api.recentUsers().then((d) => {
|
||
const next = Array.isArray(d.users) ? d.users : [];
|
||
setRecentUsers(next);
|
||
setCachedRecentUsers(next);
|
||
}).catch(() => undefined),
|
||
);
|
||
}
|
||
if (showTagCloud) {
|
||
tasks.push(
|
||
api.tags(40).then((d) => {
|
||
const next = Array.isArray(d.tags) ? d.tags : [];
|
||
setTags(next);
|
||
setCachedTags(next);
|
||
}).catch(() => undefined),
|
||
);
|
||
}
|
||
}
|
||
|
||
await Promise.all(tasks);
|
||
} catch {
|
||
// 失败也放行
|
||
} finally {
|
||
if (!cancelled && bootGen.current === gen) {
|
||
asideEverLoaded.current = true;
|
||
setAsideLoading(false);
|
||
setTagsLoading(false);
|
||
setBoardsLoading(false);
|
||
coldBootDone.current = true;
|
||
setShellReady(true);
|
||
}
|
||
}
|
||
})();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [
|
||
isCompose,
|
||
loc.pathname,
|
||
loc.search,
|
||
hideAside,
|
||
showRecentComments,
|
||
showRecentUsers,
|
||
showTagCloud,
|
||
refreshBoards,
|
||
]);
|
||
|
||
const refreshUnreadMessages = useCallback(() => {
|
||
if (!user) {
|
||
setUnreadMessages(0);
|
||
return;
|
||
}
|
||
api.messageUnreadCount()
|
||
.then((r) => setUnreadMessages(r.count || 0))
|
||
.catch(() => setUnreadMessages(0));
|
||
}, [user]);
|
||
|
||
useEffect(() => {
|
||
refreshUnreadMessages();
|
||
const onRefresh = () => refreshUnreadMessages();
|
||
window.addEventListener('messages-unread-refresh', onRefresh);
|
||
const timer = window.setInterval(refreshUnreadMessages, 60_000);
|
||
return () => {
|
||
window.removeEventListener('messages-unread-refresh', onRefresh);
|
||
window.clearInterval(timer);
|
||
};
|
||
}, [refreshUnreadMessages]);
|
||
|
||
useEffect(() => {
|
||
const syncFromCache = () => {
|
||
// 仅当 cache 有内容时覆盖，避免空数组盖住已渲染的非空 UI
|
||
const nextBoards = getCachedBoards();
|
||
if (nextBoards.length > 0) setBoards(nextBoards);
|
||
setBoardsLoading(false);
|
||
const nextStats = getCachedStats();
|
||
if (nextStats) setStats(nextStats);
|
||
const nextComments = getCachedRecentComments();
|
||
if (nextComments.length > 0 || hasCachedAside()) setRecentComments(nextComments);
|
||
const nextUsers = getCachedRecentUsers();
|
||
if (nextUsers.length > 0 || hasCachedAside()) setRecentUsers(nextUsers);
|
||
const nextTags = getCachedTags();
|
||
if (nextTags.length > 0) setTags(nextTags);
|
||
setTagsLoading(false);
|
||
setAsideLoading(false);
|
||
asideEverLoaded.current = true;
|
||
refreshUnreadMessages();
|
||
};
|
||
const onForce = () => {
|
||
// 旧路径：仍可能被别处派发；尽量静默刷新壳层
|
||
refreshBoards();
|
||
refreshUnreadMessages();
|
||
refetchSiteBranding();
|
||
setLayoutRefreshTick(n => n + 1);
|
||
};
|
||
const onCommit = () => {
|
||
// 软刷新：预热已写入 cache，同一拍同步进 state，不触发分批 loading
|
||
syncFromCache();
|
||
};
|
||
window.addEventListener(PAGE_FORCE_REFRESH_EVENT, onForce);
|
||
window.addEventListener(PAGE_SOFT_REFRESH_COMMIT_EVENT, onCommit);
|
||
return () => {
|
||
window.removeEventListener(PAGE_FORCE_REFRESH_EVENT, onForce);
|
||
window.removeEventListener(PAGE_SOFT_REFRESH_COMMIT_EVENT, onCommit);
|
||
};
|
||
}, [refreshBoards, refreshUnreadMessages]);
|
||
|
||
// 标签云：进页/离开发帖页时拉取；不跟 posts-refresh 联动（置顶/推荐等不改标签）
|
||
useEffect(() => {
|
||
if (isCompose || !showTagCloud) return;
|
||
let cancelled = false;
|
||
// 有 session 缓存则静默刷新（软刷新不卸空白）
|
||
if (getCachedTags().length === 0) setTagsLoading(true);
|
||
api.tags(40).then(d => {
|
||
if (cancelled) return;
|
||
const next = Array.isArray(d.tags) ? d.tags : [];
|
||
setTags(next);
|
||
setCachedTags(next);
|
||
}).catch(() => {}).finally(() => {
|
||
if (!cancelled) setTagsLoading(false);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [isCompose, showTagCloud, layoutRefreshTick]);
|
||
|
||
const needAsideData = !isCompose && (!hideAside || asideOpen);
|
||
const needRecentComments = needAsideData && showRecentComments;
|
||
useEffect(() => {
|
||
if (!needRecentComments) return;
|
||
let cancelled = false;
|
||
// 无缓存时才显示加载态，有缓存则静默刷新，避免抽屉高度跳动
|
||
if (!asideEverLoaded.current && !hasCachedAside()) {
|
||
setAsideLoading(true);
|
||
}
|
||
|
||
api.recentComments().then(d => {
|
||
if (cancelled) return;
|
||
const next = Array.isArray(d.comments) ? d.comments : [];
|
||
setRecentComments(next);
|
||
setCachedRecentComments(next);
|
||
}).catch(() => {}).finally(() => {
|
||
if (!cancelled) {
|
||
asideEverLoaded.current = true;
|
||
setAsideLoading(false);
|
||
}
|
||
});
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [needRecentComments, layoutRefreshTick]);
|
||
|
||
const needRecentUsers = needAsideData && showRecentUsers;
|
||
useEffect(() => {
|
||
if (!needRecentUsers) return;
|
||
let cancelled = false;
|
||
if (!asideEverLoaded.current && !hasCachedAside()) {
|
||
setAsideLoading(true);
|
||
}
|
||
|
||
api.recentUsers().then(d => {
|
||
if (cancelled) return;
|
||
const next = Array.isArray(d.users) ? d.users : [];
|
||
setRecentUsers(next);
|
||
setCachedRecentUsers(next);
|
||
}).catch(() => {}).finally(() => {
|
||
if (!cancelled) {
|
||
asideEverLoaded.current = true;
|
||
setAsideLoading(false);
|
||
}
|
||
});
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [needRecentUsers, layoutRefreshTick]);
|
||
|
||
const doQuickSearch = () => {
|
||
const { author, titleOnly, scopeBoardId } = postSearch.filters;
|
||
postSearch.submitSearch({
|
||
keyword: keywordDraft,
|
||
author,
|
||
titleOnly,
|
||
scopeBoardId,
|
||
}, { refreshIfSame: true });
|
||
};
|
||
|
||
const handleHeaderClear = () => {
|
||
const hasUrlSearch = postSearch.filters.isFiltered;
|
||
setKeywordDraft('');
|
||
if (hasUrlSearch) postSearch.clearSearch();
|
||
};
|
||
|
||
const contextBoard = boards.find((b) => b.id === boardId);
|
||
const searchPanelDraft = {
|
||
keyword: keywordDraft,
|
||
author: postSearch.filters.author,
|
||
titleOnly: postSearch.filters.titleOnly,
|
||
scopeBoardId: postSearch.filters.scopeBoardId,
|
||
};
|
||
|
||
const openPost = useCallback((id: number, opts?: { floor?: number }) => {
|
||
setAsideOpen(false);
|
||
openForumPost(nav, id, forumLimits.open_posts_in_new_tab, opts);
|
||
}, [nav, forumLimits.open_posts_in_new_tab]);
|
||
|
||
const userInitial = user?.nickname?.charAt(0) || '?';
|
||
const isFeedHome = loc.pathname === '/' || /^\/board\/\d+/.test(loc.pathname);
|
||
const outletKeyword = params.get('keyword') || '';
|
||
const outletTag = params.get('tag') || '';
|
||
const outletAuthor = params.get('author') || '';
|
||
// 搜索/标签结果页不选中任何板块芯片（避免看起来仍停在「全部」）
|
||
const mobileActiveBoard =
|
||
isNeutralSidebarRoute(loc.pathname) || !!outletKeyword || !!outletTag || !!outletAuthor
|
||
? -1
|
||
: boardId;
|
||
|
||
const boardChipIds = useMemo(() => [0, ...boards.map(b => b.id)], [boards]);
|
||
const activeChipIndex = Math.max(0, boardChipIds.indexOf(mobileActiveBoard === -1 ? 0 : mobileActiveBoard));
|
||
|
||
const isPostDetail = /^\/post\/\d+/.test(loc.pathname) && !/\/edit$/.test(loc.pathname);
|
||
const setPostOutlineSafe = useCallback((outline: {
|
||
headings: PostHeading[];
|
||
scrollRoot: HTMLElement | null;
|
||
title?: string;
|
||
author?: User | null;
|
||
publishedAt?: string;
|
||
viewCount?: number;
|
||
} | null) => {
|
||
setPostOutline(outline);
|
||
}, []);
|
||
const layoutCtx = useMemo<LayoutCtx>(() => ({
|
||
boardId,
|
||
keyword: outletKeyword,
|
||
setBoardId,
|
||
boards,
|
||
boardsLoading,
|
||
stats,
|
||
refreshBoards,
|
||
isMobile,
|
||
setPostOutline: setPostOutlineSafe,
|
||
}), [boardId, outletKeyword, boards, boardsLoading, stats, refreshBoards, isMobile, setPostOutlineSafe]);
|
||
|
||
const selectBoardChip = (id: number) => {
|
||
setBoardId(id);
|
||
navigateFeed(nav, buildHomeUrl(id, feedSort, { permalink: forumLimits }));
|
||
};
|
||
|
||
const onBoardBarKeyDown = (e: React.KeyboardEvent) => {
|
||
const next = moveTabIndex(e.key, activeChipIndex, boardChipIds.length);
|
||
if (next == null) return;
|
||
e.preventDefault();
|
||
selectBoardChip(boardChipIds[next]);
|
||
requestAnimationFrame(() => {
|
||
const tabs = boardBarRef.current?.querySelectorAll<HTMLElement>('[role="tab"]');
|
||
tabs?.[next]?.focus();
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className={cn('app-shell', forceDesktop && 'ssr-home')}>
|
||
<div className="app-frame">
|
||
<header className="app-header">
|
||
<div className="header-inner">
|
||
{!isCompose && (
|
||
<button
|
||
type="button"
|
||
className="header-icon-btn header-menu-btn"
|
||
onClick={openSidebar}
|
||
aria-label="打开导航菜单"
|
||
aria-expanded={sidebarOpen}
|
||
aria-controls="sidebar-drawer"
|
||
title="导航"
|
||
>
|
||
<Menu size={18} aria-hidden />
|
||
</button>
|
||
)}
|
||
{/* 任意页点 Logo：回首页并强制刷新，不展示会话缓存 */}
|
||
<button type="button" className="header-brand" onClick={() => navigateFeed(nav, '/', { refresh: true })}>
|
||
<SiteBrandMark branding={branding} className="header-logo-mark" />
|
||
<span className="header-logo-text">{branding.name}</span>
|
||
</button>
|
||
|
||
{!isCompose && isMobile && (
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
'header-search-mobile-pill',
|
||
(keywordDraft || postSearch.filters.isFiltered) && 'header-search-mobile-pill--active',
|
||
)}
|
||
onClick={openSearchPanel}
|
||
aria-label="搜索帖子"
|
||
>
|
||
<Search size={15} aria-hidden className="header-search-mobile-pill__icon" />
|
||
<span className="header-search-mobile-pill__text">
|
||
{keywordDraft
|
||
|| postSearch.filters.keyword
|
||
|| postSearch.filters.author
|
||
|| '搜索帖子…'}
|
||
</span>
|
||
{postSearch.filters.hasAdvancedFilters && (
|
||
<span className="header-search-mobile-pill__dot" aria-hidden />
|
||
)}
|
||
</button>
|
||
)}
|
||
|
||
{!isCompose && !isMobile && (
|
||
<form
|
||
className="header-search-wrap"
|
||
role="search"
|
||
onSubmit={e => {
|
||
e.preventDefault();
|
||
doQuickSearch();
|
||
}}
|
||
>
|
||
<div className="header-search-row">
|
||
<Search className="header-search-icon" size={16} aria-hidden />
|
||
<input
|
||
ref={searchInputRef}
|
||
className="header-search-input"
|
||
type="search"
|
||
placeholder="搜索帖子…"
|
||
aria-label="搜索帖子"
|
||
value={keywordDraft}
|
||
onChange={e => setKeywordDraft(e.target.value)}
|
||
maxLength={forumLimits.search_keyword_max > 0 ? forumLimits.search_keyword_max : undefined}
|
||
enterKeyHint="search"
|
||
/>
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
'header-search-filter-btn',
|
||
postSearch.filters.hasAdvancedFilters && 'header-search-filter-btn--active',
|
||
)}
|
||
onClick={openSearchPanel}
|
||
aria-label="搜索筛选"
|
||
title="筛选"
|
||
>
|
||
<SlidersHorizontal size={15} aria-hidden />
|
||
{postSearch.filters.hasAdvancedFilters && (
|
||
<span className="header-search-filter-btn__dot" aria-hidden />
|
||
)}
|
||
</button>
|
||
{(keywordDraft || postSearch.filters.isFiltered) && (
|
||
<button
|
||
type="button"
|
||
className="header-search-clear"
|
||
onClick={handleHeaderClear}
|
||
aria-label="清除搜索"
|
||
>×</button>
|
||
)}
|
||
<kbd className="header-search-kbd" aria-hidden>Ctrl K</kbd>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
<div className="header-actions">
|
||
{!isCompose && (
|
||
<button
|
||
type="button"
|
||
className="header-compose-btn"
|
||
onClick={() => user ? void transitionTo(nav, '/compose') : nav(loginPath('/compose'))}
|
||
aria-label="发帖"
|
||
>
|
||
<Plus size={16} aria-hidden />
|
||
<span className="header-compose-btn__label">发帖</span>
|
||
</button>
|
||
)}
|
||
|
||
<div className="header-action-group">
|
||
{/* 平板：侧栏收起时用按钮打开社区动态；手机改由导航抽屉入口 */}
|
||
{!isCompose && hideAside && !isMobile && (
|
||
<button
|
||
type="button"
|
||
className="header-icon-btn"
|
||
onClick={openAside}
|
||
aria-label={isPostDetail ? '打开作者与目录' : '打开社区动态'}
|
||
aria-expanded={asideOpen}
|
||
aria-controls="aside-drawer"
|
||
title={isPostDetail ? '作者与目录' : '社区动态'}
|
||
>
|
||
<PanelRight size={18} aria-hidden />
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
type="button"
|
||
className="header-icon-btn header-theme-btn"
|
||
onClick={toggle}
|
||
aria-label={theme === 'light' ? '切换暗色模式' : '切换亮色模式'}
|
||
title={theme === 'light' ? '切换暗色模式' : '切换亮色模式'}
|
||
>
|
||
{theme === 'light' ? <Moon size={18} aria-hidden /> : <Sun size={18} aria-hidden />}
|
||
</button>
|
||
|
||
{authLoading ? (
|
||
<span className="header-auth-slot header-auth-slot--loading" aria-hidden />
|
||
) : user ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="header-icon-btn header-msg-btn"
|
||
title={unreadMessages > 0 ? `${unreadMessages} 条未读消息` : '站内消息'}
|
||
aria-label={unreadMessages > 0 ? `站内消息，${unreadMessages} 条未读` : '站内消息'}
|
||
onClick={() => void transitionTo(nav, '/messages')}
|
||
>
|
||
<Mail size={18} aria-hidden />
|
||
{unreadMessages > 0 && (
|
||
<span className="header-msg-badge">{unreadMessages > 99 ? '99+' : unreadMessages}</span>
|
||
)}
|
||
</button>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<button type="button" className="header-user-btn" title={user.nickname} aria-label={`用户菜单：${user.nickname}`}>
|
||
{user.avatar
|
||
? <img src={user.avatar} alt="" className="header-user-avatar" loading="lazy" decoding="async" />
|
||
: <span className="header-user-initial">{userInitial}</span>}
|
||
</button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent
|
||
align="end"
|
||
className="w-40"
|
||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||
>
|
||
<DropdownMenuItem onClick={() => void transitionTo(nav, userPath(user.id))}>个人主页</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => void transitionTo(nav, '/profile')}>
|
||
账号设置{typeof user.points === 'number' ? ` · ${user.points} 积分` : ''}
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => void transitionTo(nav, '/messages')}>
|
||
站内消息{unreadMessages > 0 ? ` (${unreadMessages})` : ''}
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => void transitionTo(nav, '/favorites')}>我的收藏</DropdownMenuItem>
|
||
{isMobile && (
|
||
<DropdownMenuItem onClick={toggle}>
|
||
{theme === 'light' ? '切换暗色模式' : '切换亮色模式'}
|
||
</DropdownMenuItem>
|
||
)}
|
||
{user.role === 'admin' && (
|
||
<>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onClick={() => nav('/admin/dashboard')}>管理后台</DropdownMenuItem>
|
||
</>
|
||
)}
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onClick={() => logout().then(() => nav('/login'))}>
|
||
退出登录
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</>
|
||
) : (
|
||
<button type="button" className="header-login-btn" onClick={() => nav(loginPath())}>
|
||
登录
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{!isCompose && (
|
||
<PostSearchPanel
|
||
open={searchPanelOpen}
|
||
onOpenChange={setSearchPanelOpen}
|
||
draft={searchPanelDraft}
|
||
contextBoardId={boardId}
|
||
contextBoardName={contextBoard?.name}
|
||
onSubmit={(input) => {
|
||
const ok = postSearch.submitSearch(input);
|
||
if (ok) setKeywordDraft((input.keyword ?? '').trim());
|
||
return ok;
|
||
}}
|
||
onClear={postSearch.clearSearch}
|
||
/>
|
||
)}
|
||
|
||
<div className={`app-body${isCompose ? ' app-body--compose' : ''}`}>
|
||
{!isCompose && shellReady && (
|
||
<Sidebar
|
||
boards={boards}
|
||
activeBoard={boardId}
|
||
onSelectBoard={setBoardId}
|
||
boardsLoading={boardsLoading}
|
||
|
||
/>
|
||
)}
|
||
|
||
<div className={cn(
|
||
'content-workspace',
|
||
isCompose && 'content-workspace--compose',
|
||
hideAside && !isCompose && 'content-workspace--aside-hidden',
|
||
)}>
|
||
<main
|
||
className={cn(
|
||
'main-content',
|
||
isCompose && 'main-content--compose',
|
||
// 手机 Feed：整栏滚动，板块条 / 排序栏可滚出视口，多露出帖子列表
|
||
isMobile && !isCompose && isFeedHome && 'main-content--feed-mobile-scroll',
|
||
)}
|
||
aria-busy={!shellReady}
|
||
>
|
||
{shellReady && isMobile && !isCompose && isFeedHome && (
|
||
<div
|
||
ref={boardBarRef}
|
||
className="mobile-board-bar"
|
||
role="tablist"
|
||
aria-label="板块"
|
||
onKeyDown={onBoardBarKeyDown}
|
||
>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
tabIndex={activeChipIndex === 0 ? 0 : -1}
|
||
aria-selected={mobileActiveBoard === 0}
|
||
className={`board-chip ${mobileActiveBoard === 0 ? 'active' : ''}`}
|
||
onClick={() => selectBoardChip(0)}
|
||
>全部</button>
|
||
{boards.map((b, i) => {
|
||
const themeIdx = getBoardThemeIndex(b);
|
||
const isActive = mobileActiveBoard === b.id;
|
||
const idx = i + 1;
|
||
return (
|
||
<button
|
||
key={b.id}
|
||
type="button"
|
||
role="tab"
|
||
tabIndex={activeChipIndex === idx ? 0 : -1}
|
||
aria-selected={isActive}
|
||
className={cn(
|
||
'board-chip',
|
||
isActive && 'active',
|
||
isActive && `board-chip--${themeIdx}`,
|
||
)}
|
||
onClick={() => selectBoardChip(b.id)}
|
||
>{b.name}</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
{shellReady ? (
|
||
<Suspense fallback={null}>
|
||
<Outlet context={layoutCtx} />
|
||
</Suspense>
|
||
) : null}
|
||
</main>
|
||
|
||
{!isCompose && (
|
||
<aside className="aside-panel" aria-busy={!shellReady}>
|
||
{shellReady && (
|
||
<RightPanel
|
||
recentComments={recentComments}
|
||
recentUsers={recentUsers}
|
||
tags={tags}
|
||
tagsLoading={tagsLoading}
|
||
stats={stats}
|
||
loading={asideLoading}
|
||
asideWidgets={asideWidgets}
|
||
onPostClick={openPost}
|
||
|
||
postDetail={isPostDetail ? {
|
||
author: postOutline?.author ?? null,
|
||
publishedAt: postOutline?.publishedAt,
|
||
viewCount: postOutline?.viewCount,
|
||
headings: postOutline?.headings ?? [],
|
||
scrollRoot: postOutline?.scrollRoot ?? null,
|
||
outlineTitle: postOutline?.title,
|
||
} : null}
|
||
/>
|
||
)}
|
||
</aside>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 桌面壳层贴底；手机端由各页 InFlowSiteFooter 随内容滚动 */}
|
||
{!isCompose && !isMobile && <SiteFooter />}
|
||
</div>
|
||
|
||
{sidebarOpen && isMobile && !isCompose && (
|
||
<div className="sidebar-drawer-root">
|
||
<button
|
||
type="button"
|
||
className="aside-drawer-backdrop"
|
||
aria-label="关闭导航菜单"
|
||
tabIndex={-1}
|
||
onClick={closeSidebar}
|
||
/>
|
||
<aside
|
||
id="sidebar-drawer"
|
||
ref={sidebarDrawerRef}
|
||
className="sidebar-drawer"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="导航菜单"
|
||
>
|
||
<div className="aside-drawer-head">
|
||
<span>导航</span>
|
||
<button
|
||
ref={sidebarCloseRef}
|
||
type="button"
|
||
className="header-icon-btn"
|
||
aria-label="关闭"
|
||
onClick={closeSidebar}
|
||
>
|
||
<X size={18} aria-hidden />
|
||
</button>
|
||
</div>
|
||
<div className="aside-drawer-body sidebar-drawer-body">
|
||
{shellReady && (
|
||
<Sidebar
|
||
boards={boards}
|
||
activeBoard={boardId}
|
||
onSelectBoard={setBoardId}
|
||
boardsLoading={boardsLoading}
|
||
/>
|
||
)}
|
||
<div className="sidebar-drawer-extras">
|
||
<button
|
||
type="button"
|
||
className="sidebar-drawer-extra-btn"
|
||
onClick={() => { closeSidebar(); openAside(); }}
|
||
>
|
||
<PanelRight size={16} aria-hidden />
|
||
{isPostDetail ? '作者与目录' : '社区动态'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="sidebar-drawer-extra-btn"
|
||
onClick={toggle}
|
||
>
|
||
{theme === 'light' ? <Moon size={16} aria-hidden /> : <Sun size={16} aria-hidden />}
|
||
{theme === 'light' ? '切换暗色模式' : '切换亮色模式'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
)}
|
||
|
||
{asideOpen && hideAside && !isCompose && (
|
||
<div className="aside-drawer-root">
|
||
<button
|
||
type="button"
|
||
className="aside-drawer-backdrop"
|
||
aria-label="关闭社区动态"
|
||
tabIndex={-1}
|
||
onClick={closeAside}
|
||
/>
|
||
<aside
|
||
id="aside-drawer"
|
||
ref={asideDrawerRef}
|
||
className="aside-drawer"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label={isPostDetail ? '作者与目录' : '社区动态'}
|
||
>
|
||
<div className="aside-drawer-head">
|
||
<span>{isPostDetail ? '作者与目录' : '社区动态'}</span>
|
||
<button
|
||
ref={asideCloseRef}
|
||
type="button"
|
||
className="header-icon-btn"
|
||
aria-label="关闭"
|
||
onClick={closeAside}
|
||
>
|
||
<X size={18} aria-hidden />
|
||
</button>
|
||
</div>
|
||
<div className="aside-drawer-body">
|
||
<RightPanel
|
||
recentComments={recentComments}
|
||
recentUsers={recentUsers}
|
||
tags={tags}
|
||
tagsLoading={tagsLoading}
|
||
stats={stats}
|
||
loading={asideLoading}
|
||
asideWidgets={asideWidgets}
|
||
onPostClick={openPost}
|
||
postDetail={isPostDetail ? {
|
||
author: postOutline?.author ?? null,
|
||
publishedAt: postOutline?.publishedAt,
|
||
viewCount: postOutline?.viewCount,
|
||
headings: postOutline?.headings ?? [],
|
||
scrollRoot: postOutline?.scrollRoot ?? null,
|
||
outlineTitle: postOutline?.title,
|
||
} : null}
|
||
/>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
)}
|
||
|
||
<BackToTop />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export type LayoutCtx = {
|
||
boardId: number;
|
||
keyword: string;
|
||
setBoardId: (id: number) => void;
|
||
boards: Board[];
|
||
boardsLoading: boolean;
|
||
stats: ForumStats | null;
|
||
refreshBoards: () => void;
|
||
isMobile: boolean;
|
||
/** 详情页上报作者与目录，供右侧栏展示 */
|
||
setPostOutline: (outline: {
|
||
headings: PostHeading[];
|
||
scrollRoot: HTMLElement | null;
|
||
title?: string;
|
||
author?: User | null;
|
||
publishedAt?: string;
|
||
viewCount?: number;
|
||
} | null) => void;
|
||
};
|