feat: comment allowcomment

Signed-off-by: Innei <[email protected]>

Author: Innei

src/app/(page-detail)/[slug]/layout.tsx

@@ -85,7 +85,11 @@ export default async (props: NextPageParams<PageParams>) => {
 
         <LayoutRightSideProvider className="absolute bottom-0 right-0 top-0 hidden translate-x-full lg:block" />
       </div>
-      {isCN ? <NotSupport /> : <CommentAreaRoot refId={data.id} />}
+      {isCN ? (
+        <NotSupport />
+      ) : (
+        <CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
+      )}
     </>
   )
 }

src/app/notes/[id]/layout.tsx

@@ -78,6 +78,8 @@ export default async (
 
   const isCN = geo === 'CN'
 
+  const { id: noteObjectId, allowComment } = data.data
+
   return (
     <>
       <CurrentNoteIdProvider noteId={id} />
@@ -86,7 +88,11 @@ export default async (
 
       <BottomToUpTransitionView className="min-w-0">
         <Paper as={NoteMainContainer}>{props.children}</Paper>
-        {isCN ? <NotSupport /> : <CommentAreaRoot refId={data.data.id} />}
+        {isCN ? (
+          <NotSupport />
+        ) : (
+          <CommentAreaRoot refId={noteObjectId} allowComment={allowComment} />
+        )}
       </BottomToUpTransitionView>
     </>
   )

src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
+import { headers } from 'next/dist/client/components/headers'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 
 import { RequestError } from '@mx-space/api-client'
 
+import { NotSupport } from '~/components/common/NotSupport'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { CommentAreaRoot } from '~/components/widgets/comment'
+import { REQUEST_GEO } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
 import { getSummaryFromMd } from '~/lib/markdown'
 import { CurrentPostDataProvider } from '~/providers/post/CurrentPostDataProvider'
@@ -73,13 +77,23 @@ export default async (props: NextPageParams<PageParams>) => {
       }
       throw error
     })
+  const header = headers()
+  const geo = header.get(REQUEST_GEO)
+
+  const isCN = geo === 'CN'
 
   return (
     <>
       <CurrentPostDataProvider data={data} />
       <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
         <BottomToUpTransitionView className="min-w-0">
           {props.children}
+
+          {isCN ? (
+            <NotSupport />
+          ) : (
+            <CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
+          )}
         </BottomToUpTransitionView>
 
         <LayoutRightSideProvider className="relative hidden lg:block" />

src/app/posts/(post-detail)/[category]/[slug]/page.tsx

@@ -8,7 +8,6 @@ import type { PropsWithChildren } from 'react'
 import { ClientOnly } from '~/components/common/ClientOnly'
 import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
 import { Markdown } from '~/components/ui/markdown'
-import { CommentAreaRoot } from '~/components/widgets/comment'
 import { PostActionAside } from '~/components/widgets/post/PostActionAside'
 import { PostCopyright } from '~/components/widgets/post/PostCopyright'
 import { PostMetaBar } from '~/components/widgets/post/PostMetaBar'
@@ -29,6 +28,7 @@ import Loading from './loading'
 const PostPage = () => {
   const id = useCurrentPostDataSelector((p) => p?.id)
   const title = useCurrentPostDataSelector((p) => p?.title)
+  const allowComment = useCurrentPostDataSelector((p) => p?.allowComment)
   if (!id) {
     return <Loading />
   }
@@ -71,8 +71,6 @@ const PostPage = () => {
         <SubscribeBell defaultType="post_c" />
         <XLogInfoForPost />
       </ClientOnly>
-
-      <CommentAreaRoot refId={id} />
     </div>
   )
 }

src/components/widgets/comment/CommentRoot.tsx

@@ -8,7 +8,17 @@ import { CommentBoxRoot } from './CommentBox/Root'
 import { Comments } from './Comments'
 
 const LoadingElement = <Loading loadingText="评论区加载中..." />
-export const CommentAreaRoot: FC<CommentBaseProps> = (props) => {
+export const CommentAreaRoot: FC<
+  CommentBaseProps & {
+    allowComment: boolean
+  }
+> = (props) => {
+  if (!props.allowComment) {
+    return (
+      <p className="mt-[100px] text-center text-xl font-medium">评论已关闭</p>
+    )
+  }
+
   return (
     <LazyLoad placeholder={LoadingElement}>
       <div className="relative mt-12">

tailwind.config.ts

@@ -244,8 +244,8 @@ const twConfig: Config = {
       {
         dark: {
           'color-scheme': 'dark',
-          primary: '#1f8f93',
-          secondary: '#92bbff',
+          primary: '#91bef0',
+          secondary: '#39C5BB',
           accent: '#91bef0',
 
           neutral: UIKitColors.grey3.dark,