add channel and path

dashboard/src/components/article/ArticleView.tsx

@@ -1,37 +1,60 @@
-import { Typography, Divider } from "antd";
+import { Typography, Divider, Button } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
+
 import MdView from "../template/MdView";
+import TocPath, { ITocPathNode } from "../corpus/TocPath";
 
-const { Paragraph, Title, Text } = Typography;
+const { Paragraph, Title } = Typography;
 
 export interface IWidgetArticleData {
   id?: string;
   title?: string;
   subTitle?: string;
   summary?: string;
-  content?: string;
+  content: string;
+  path?: ITocPathNode[];
   created_at?: string;
   updated_at?: string;
+  channels?: string[];
 }
 
 const Widget = ({
   id,
-  title,
+  title = "",
   subTitle,
   summary,
   content,
+  path = [],
   created_at,
   updated_at,
+  channels,
 }: IWidgetArticleData) => {
+  console.log("path", path);
   return (
     <>
-      <Title level={1}>{title}</Title>
-      <Text type="secondary">{subTitle}</Text>
-      <Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
-        {summary}
-      </Paragraph>
-      <Divider />
+      <Button shape="round" size="small" icon={<ReloadOutlined />}>
+        刷新
+      </Button>
+      <div>
+        <TocPath data={path} channel={channels} />
+        <Title type="secondary" level={5}>
+          {subTitle}
+        </Title>
+        <Title level={3}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: title ? title : "",
+            }}
+          ></div>
+        </Title>
+
+        <Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
+          {summary}
+        </Paragraph>
+        <Divider />
+      </div>
       <div>
-        <MdView html={content ? content : "none"} />
+        <MdView html={content} />
       </div>
     </>
   );