索引与热门样式

packages/viewer/src/app/indices/TopChart.tsx → packages/viewer/src/app/(indices)/indices/TopChart.tsx

@@ -13,6 +13,7 @@ export default function TopChart({
         <DiscussionEntry
           discussion={discussion}
           key={discussion.id}
+          decoratorBreakpoint="md"
           metaBottom={
             <>
               <svg

packages/viewer/src/app/indices/[page]/layout.tsx → packages/viewer/src/app/(indices)/indices/[page]/layout.tsx

@@ -15,15 +15,18 @@ export default async function Layout({
     paginate(numPages, page);
   return (
     <>
+      <h3 className="pb-1 text-center d-none d-md-block mb-4s">最新发布</h3>
       {children}
-      <PageButtons
-        ellipsisFront={!pagesLocalAttachedFront}
-        ellipsisBack={!pagesLocalAttachedBack}
-        numPages={numPages}
-        pagesLocal={pagesLocal}
-        generatorUrl={(curPage: number) => `/indices/${curPage}`}
-        active={page}
-      />
+      <div className="bg-body rounded-4 shadow-bssb my-4s px-4 py-3 py-md-4 text-center">
+        <PageButtons
+          ellipsisFront={!pagesLocalAttachedFront}
+          ellipsisBack={!pagesLocalAttachedBack}
+          numPages={numPages}
+          pagesLocal={pagesLocal}
+          generatorUrl={(curPage: number) => `/indices/${curPage}`}
+          active={page}
+        />
+      </div>
     </>
   );
 }

packages/viewer/src/app/(indices)/layout.tsx

@@ -0,0 +1,7 @@
+export default function Layout({ children }: React.PropsWithChildren) {
+  return (
+    <div className="row px-2 px-md-0">
+      <div className="col-lg-7 col-md-8 col-12 my-2 mx-auto">{children}</div>
+    </div>
+  );
+}

packages/viewer/src/app/(indices)/popular/page.tsx

@@ -0,0 +1,22 @@
+import prisma from "@/lib/prisma";
+import { selectDiscussion } from "@/lib/discussion";
+import { NUM_DISCUSSIONS_TOP_CHARTS } from "../indices/constants";
+import TopChart from "../indices/TopChart";
+
+export const dynamic = "force-dynamic";
+
+export default async function MostReplied() {
+  return (
+    <>
+      <h3 className="pb-1 text-center d-none d-md-block mb-4s">最多回复</h3>
+      <TopChart
+        discussions={await prisma.discussion.findMany({
+          select: selectDiscussion,
+          where: { takedown: { is: null } },
+          orderBy: { replyCount: "desc" },
+          take: NUM_DISCUSSIONS_TOP_CHARTS,
+        })}
+      />
+    </>
+  );
+}

packages/viewer/src/app/NavBar.tsx

@@ -47,7 +47,12 @@ export default function NavBar() {
             </li>
             <li className="nav-item my-tiny my-md-0">
               <Link className="nav-link" href="/indices">
-                帖子索引
+                索引
+              </Link>
+            </li>
+            <li className="nav-item my-tiny my-md-0">
+              <Link className="nav-link" href="/popular">
+                热门
               </Link>
             </li>
             <li className="nav-item my-tiny my-md-0">