feat: add commnet to topic detail

Author: thonatos

src/app.tsx

@@ -16,7 +16,8 @@ const qiankunApps: Array<QiankunApp> = [];
 
 export async function getInitialState(): Promise<InitialState> {
   return {
-    currentUser: 'Suyi',
+    avatar_url: 'https://avatars.githubusercontent.com/u/958063?v=4&s=120',
+    loginname: 'thonatos',
   };
 }
 
@@ -90,5 +91,6 @@ interface QiankunApp {
 }
 
 export interface InitialState {
-  currentUser: string;
+  loginname: string;
+  avatar_url: string;
 }

src/global.less

@@ -6,6 +6,11 @@
   width: 100% !important;
 }
 
+.ant-layout-content {
+  max-width: 100%;
+  overflow: hidden;
+}
+
 .cnode-header {
   display: flex;
   align-items: center;

src/layout.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'umi';
 import { Avatar } from 'antd';
-import { UserOutlined } from '@ant-design/icons';
 
 import {
   DefaultFooter,
@@ -14,10 +13,13 @@ import { InitialState } from './app';
 import config from '../config/basic';
 import Brand from './component/Brand';
 
-const RightContent: React.FC<any> = () => {
+const RightContent: React.FC<{
+  data: InitialState;
+}> = (props) => {
+  const { avatar_url } = props.data;
   return (
     <div className="cnode-header-right">
-      <Avatar shape="square" size="small" icon={<UserOutlined />} />
+      <Avatar shape="square" size="small" src={avatar_url} />
     </div>
   );
 };
@@ -77,7 +79,8 @@ const layoutConfig = ({
 
     // right
     rightContentRender: () => {
-      return <RightContent />;
+      const { avatar_url } = initialState;
+      return <RightContent data={initialState} />;
     },
 
     // footer

src/page/topic/component/SubTitle.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { Avatar, Divider, Space } from 'antd';
+
+const SubTitle: React.FC<Props> = (props) => {
+  const { author, create_at, visit_count, reply_count } = props;
+  return (
+    <Space size={0} split={<Divider type="vertical"></Divider>}>
+      <Avatar size="small" src={author.avatar_url} alt={author.loginname} />
+      <span>发布：{dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')}</span>
+      <span>浏览：{visit_count}</span>
+      <span>回复：{reply_count}</span>
+    </Space>
+  );
+};
+
+export default SubTitle;
+
+interface Props {
+  create_at: Date;
+  reply_count: number;
+  visit_count: number;
+
+  author: {
+    loginname: string;
+    avatar_url: string;
+  };
+}

src/page/topic/index.less

@@ -11,3 +11,19 @@
     }
   }
 }
+
+.detail {
+}
+
+.comment {
+  img {
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+.comment_content {
+  * {
+    overflow: hidden;
+  }
+}

src/page/topic/index.tsx

@@ -1,16 +1,26 @@
 import React from 'react';
+import dayjs from 'dayjs';
+
 import { useParams } from 'umi';
 import { useRequest } from 'ahooks';
-import { PageHeader } from 'antd';
+import { PageHeader, Comment, Avatar, Divider, Space } from 'antd';
+import {
+  LikeFilled,
+  EditFilled,
+  DeleteFilled,
+  CommentOutlined,
+} from '@ant-design/icons';
 import * as API from '@/service/topic';
 
 import MarkdownIt from 'markdown-it';
 import MdEditor from 'react-markdown-editor-lite';
 import 'react-markdown-editor-lite/lib/index.css';
 
+import SubTitle from './component/SubTitle';
+
 import * as styles from './index.less';
 
-const mdParser = new MarkdownIt(/* Markdown-it options */);
+const mdParser = new MarkdownIt();
 
 const TopicDetail: React.FC<React.PropsWithChildren<Props>> = (props) => {
   const params: Record<string, any> = useParams();
@@ -42,24 +52,105 @@ const TopicDetail: React.FC<React.PropsWithChildren<Props>> = (props) => {
     return null;
   }
 
+  const renderComment = () => {
+    if (!data) {
+      return null;
+    }
+
+    const { replies } = data;
+
+    return (
+      <div className={styles.comment}>
+        {replies.map((reply: Reply, index: number) => {
+          const { author, content, create_at } = reply;
+          return (
+            <>
+              {index === replies.length - 1 ? null : (
+                <Divider type="horizontal" />
+              )}
+
+              <Comment
+                actions={[
+                  <LikeFilled />,
+                  <EditFilled />,
+                  <DeleteFilled />,
+                  <CommentOutlined />,
+                ]}
+                author={
+                  <Space size={8}>
+                    <span>{author.loginname}</span>
+                    <span>
+                      {dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')}
+                    </span>
+                  </Space>
+                }
+                avatar={
+                  <Avatar src={author.avatar_url} alt={author.loginname} />
+                }
+                content={
+                  <div
+                    className={styles.comment_content}
+                    dangerouslySetInnerHTML={{
+                      __html: mdParser.render(content),
+                    }}
+                  ></div>
+                }
+              ></Comment>
+            </>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderDetail = () => {
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <div className={styles.detail}>
+        <Divider type="horizontal"></Divider>
+        <MdEditor
+          className={styles.editor}
+          readOnly
+          view={{
+            menu: false,
+            md: false,
+            html: true,
+          }}
+          value={data.content}
+          renderHTML={(text) => mdParser.render(text)}
+          // onChange={handleEditorChange}
+        />
+      </div>
+    );
+  };
+
   return (
     <PageHeader title={data?.title} onBack={() => window.history.back()}>
-      <MdEditor
-        className={styles.editor}
-        readOnly
-        view={{
-          menu: false,
-          md: false,
-          html: true,
-        }}
-        value={data.content}
-        renderHTML={(text) => mdParser.render(text)}
-        // onChange={handleEditorChange}
-      />
+      <SubTitle {...data} />
+      {renderDetail()}
+      {renderComment()}
     </PageHeader>
   );
 };
 
 export default TopicDetail;
 
 interface Props {}
+
+interface Reply {
+  id: string;
+  content: string;
+
+  author: {
+    loginname: string;
+    avatar_url: string;
+  };
+
+  ups: string[];
+  create_at: Date;
+  reply_id?: string;
+  is_uped: boolean;
+}