From bc9a0318904413691312da01ae5e07bdf109e149 Mon Sep 17 00:00:00 2001
From: freefire <aarbbs@88.com>
Date: Tue, 1 Sep 2026 18:34:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=95=E9=A1=B5=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E6=A0=8F=E4=B8=8E=E5=B8=96=E5=AD=90=E5=85=B1?=
 =?UTF-8?q?=E7=94=A8=E7=9B=AE=E5=BD=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/RightPanel.tsx | 12 ++++---
 frontend/src/layouts/MainLayout.tsx    | 23 ++++++++-----
 frontend/src/pages/SitePageView.tsx    | 47 ++++++++++++++++++++++++--
 3 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/RightPanel.tsx b/frontend/src/components/RightPanel.tsx
index 2cdc1eb..f3797ff 100644
--- a/frontend/src/components/RightPanel.tsx
+++ b/frontend/src/components/RightPanel.tsx
@@ -232,11 +232,13 @@ export default function RightPanel({
     <div className={`aside-panel-inner${isPostDetail ? ' aside-panel-inner--post-detail' : ''}`}>
       {isPostDetail && (
         <>
-          <PostAuthorCard
-            author={postDetail.author}
-            publishedAt={postDetail.publishedAt}
-            viewCount={postDetail.viewCount}
-          />
+          {postDetail.author?.id ? (
+            <PostAuthorCard
+              author={postDetail.author}
+              publishedAt={postDetail.publishedAt}
+              viewCount={postDetail.viewCount}
+            />
+          ) : null}
           <div className="widget-card widget-card--outline">
             <div className="widget-card-head">
               <ListTree className="widget-card-icon widget-card-icon--outline" aria-hidden />
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 90f1de1..a00862b 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -148,7 +148,10 @@ export default function MainLayout() {
     setSidebarOpen(false);
   }, [loc.pathname, loc.search]);
   useEffect(() => {
-    if (!/^\/post\/\d+/.test(loc.pathname)) setPostOutline(null);
+    const isArticleAside =
+      (/^\/post\/\d+/.test(loc.pathname) && !/\/edit$/.test(loc.pathname))
+      || /^\/page\//.test(loc.pathname);
+    if (!isArticleAside) setPostOutline(null);
   }, [loc.pathname]);
   useEffect(() => {
     if (!hideAside) setAsideOpen(false);
@@ -477,6 +480,10 @@ export default function MainLayout() {
   const activeChipIndex = Math.max(0, boardChipIds.indexOf(mobileActiveBoard === -1 ? 0 : mobileActiveBoard));
 
   const isPostDetail = /^\/post\/\d+/.test(loc.pathname) && !/\/edit$/.test(loc.pathname);
+  const isSitePage = /^\/page\//.test(loc.pathname);
+  const isArticleAside = isPostDetail || isSitePage;
+  // 帖子有作者 →「作者与目录」；单页仅目录
+  const articleAsideLabel = isPostDetail ? '作者与目录' : '文章目录';
   const setPostOutlineSafe = useCallback((outline: {
     headings: PostHeading[];
     scrollRoot: HTMLElement | null;
@@ -632,10 +639,10 @@ export default function MainLayout() {
                   type="button"
                   className="header-icon-btn"
                   onClick={openAside}
-                  aria-label={isPostDetail ? '打开作者与目录' : '打开社区动态'}
+                  aria-label={isArticleAside ? `打开${articleAsideLabel}` : '打开社区动态'}
                   aria-expanded={asideOpen}
                   aria-controls="aside-drawer"
-                  title={isPostDetail ? '作者与目录' : '社区动态'}
+                  title={isArticleAside ? articleAsideLabel : '社区动态'}
                 >
                   <PanelRight size={18} aria-hidden />
                 </button>
@@ -815,7 +822,7 @@ export default function MainLayout() {
             asideWidgets={asideWidgets}
             onPostClick={openPost}
             
-            postDetail={isPostDetail ? {
+            postDetail={isArticleAside ? {
               author: postOutline?.author ?? null,
               publishedAt: postOutline?.publishedAt,
               viewCount: postOutline?.viewCount,
@@ -879,7 +886,7 @@ export default function MainLayout() {
                   onClick={() => { closeSidebar(); openAside(); }}
                 >
                   <PanelRight size={16} aria-hidden />
-                  {isPostDetail ? '作者与目录' : '社区动态'}
+                  {isArticleAside ? articleAsideLabel : '社区动态'}
                 </button>
                 <button
                   type="button"
@@ -910,10 +917,10 @@ export default function MainLayout() {
             className="aside-drawer"
             role="dialog"
             aria-modal="true"
-            aria-label={isPostDetail ? '作者与目录' : '社区动态'}
+            aria-label={isArticleAside ? articleAsideLabel : '社区动态'}
           >
             <div className="aside-drawer-head">
-              <span>{isPostDetail ? '作者与目录' : '社区动态'}</span>
+              <span>{isArticleAside ? articleAsideLabel : '社区动态'}</span>
               <button
                 ref={asideCloseRef}
                 type="button"
@@ -934,7 +941,7 @@ export default function MainLayout() {
                 loading={asideLoading}
                 asideWidgets={asideWidgets}
                 onPostClick={openPost}
-                postDetail={isPostDetail ? {
+                postDetail={isArticleAside ? {
                   author: postOutline?.author ?? null,
                   publishedAt: postOutline?.publishedAt,
                   viewCount: postOutline?.viewCount,
diff --git a/frontend/src/pages/SitePageView.tsx b/frontend/src/pages/SitePageView.tsx
index e7d28d0..b0a998b 100644
--- a/frontend/src/pages/SitePageView.tsx
+++ b/frontend/src/pages/SitePageView.tsx
@@ -1,13 +1,18 @@
-import { useParams } from 'react-router-dom';
+import { useEffect, useMemo, useRef } from 'react';
+import { useOutletContext, useParams } from 'react-router-dom';
 import NotFoundPage from './NotFoundPage';
 import { api } from '../api/client';
 import type { SitePage } from '../api/types';
+import ArticleOutline from '../components/ArticleOutline';
 import PostContent from '../components/PostContent';
 import { usePageSEO } from '../hooks/usePageSEO';
 import { parsePermalinkSlug, pagePath } from '../utils/permalink';
 import { useForumLimits } from '../hooks/useForumLimits';
 import { useAuth } from '../hooks/useAuth';
 import { useSessionResource } from '../hooks/useSessionResource';
+import type { LayoutCtx } from '../layouts/MainLayout';
+import { extractHeadingsFromHtml } from '../utils/postHeadings';
+import { renderPostContentHtml } from '../utils/postContent';
 
 /** 自定义单页（关于我们、版规等） */
 export default function SitePageView() {
@@ -15,12 +20,25 @@ export default function SitePageView() {
   const slug = parsePermalinkSlug(rawSlug);
   const { limits } = useForumLimits();
   const { user } = useAuth();
+  const { setPostOutline, isMobile } = useOutletContext<LayoutCtx>();
+  const pageRef = useRef<HTMLDivElement>(null);
   const { data: page, loading } = useSessionResource<SitePage | null>(
     slug ? `sitepage:${slug}` : null,
     () => api.page(slug).then(d => d.page),
     { enabled: !!slug },
   );
   const notFound = !slug || (!loading && !page);
+  const isLoggedIn = !!user;
+  const pageContent = page?.content ?? '';
+
+  // 同步从正文派生目录，与帖子详情共用右侧栏目录布局
+  const headings = useMemo(() => {
+    if (!pageContent.trim()) return [];
+    const rendered = renderPostContentHtml(pageContent, isLoggedIn, {
+      openLinksInNewTab: limits.open_content_links_in_new_tab,
+    });
+    return extractHeadingsFromHtml(rendered);
+  }, [pageContent, isLoggedIn, limits.open_content_links_in_new_tab]);
 
   usePageSEO({
     title: page?.title,
@@ -29,19 +47,42 @@ export default function SitePageView() {
     ogType: 'article',
   });
 
+  useEffect(() => {
+    if (loading || !page) {
+      setPostOutline({ headings: [], scrollRoot: null, title: '文章目录' });
+      return () => setPostOutline(null);
+    }
+    setPostOutline({
+      headings,
+      scrollRoot: pageRef.current,
+      title: '文章目录',
+    });
+    return () => setPostOutline(null);
+  }, [headings, loading, page, setPostOutline]);
+
   if (!slug) return <NotFoundPage title="页面不存在" />;
   if (loading) return null;
   if (notFound || !page) return <NotFoundPage title="页面不存在" description="该页面不存在或未发布" />;
 
   return (
-    <div className="page-wrap">
+    <div className="page-wrap" ref={pageRef}>
       <article className="site-page">
         <header className="site-page__head">
           <h1>{page.title}</h1>
         </header>
+        {isMobile && headings.length > 0 && (
+          <details className="post-detail-toc-mobile">
+            <summary>文章目录（{headings.length}）</summary>
+            <ArticleOutline
+              headings={headings}
+              scrollRoot={pageRef.current}
+              title="目录"
+            />
+          </details>
+        )}
         <PostContent
           html={page.content}
-          isLoggedIn={!!user}
+          isLoggedIn={isLoggedIn}
           className="site-page__body post-detail-content"
         />
       </article>