feat(m): 新增删除

bestGao · bestGao · commit a37b691ef7d2 · 2024-12-29T13:48:55.000+08:00
diff --git a/src/components/articleCom/articleCom.module.less b/src/components/articleCom/articleCom.module.less
diff --git a/src/components/articleCom/index.tsx b/src/components/articleCom/index.tsx
diff --git a/src/components/articleLink/index.tsx b/src/components/articleLink/index.tsx
@@ -0,0 +1,32 @@
+import { Typography, List } from "antd";
+import { useNavigate } from "react-router-dom";
+import { memo } from "react";
+interface IProps {
+  item: {
+    title: string;
+    download_url: string;
+    path: string;
+  };
+}
+function ArticleLink({ item }: IProps) {
+  const nav = useNavigate();
+  return (
+    <List.Item>
+      <Typography.Link
+        onClick={() => {
+          nav(`/user/write`, {
+            state: {
+              url: item.download_url,
+              title: item.title,
+              path: item.path,
+            },
+          });
+        }}
+      >
+        {item.title}
+      </Typography.Link>
+    </List.Item>
+  );
+}
+
+export default memo(ArticleLink);
diff --git a/src/components/articleList/index.tsx b/src/components/articleList/index.tsx
@@ -0,0 +1,18 @@
+import { List, Skeleton } from "antd";
+import { memo } from "react";
+import ArticleLink from "../articleLink";
+
+function ArticleList({ postList }: any) {
+  return postList?.length ? (
+    <List
+      size="large"
+      bordered
+      dataSource={postList}
+      renderItem={(item: any) => <ArticleLink item={item} />}
+    />
+  ) : (
+    <Skeleton />
+  );
+}
+
+export default memo(ArticleList);
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1 +1,2 @@
-export { default as ArticleCom } from "./articleCom";
+export { default as ArticleLink } from "./articleLink";
+export { default as ArticleList } from "./articleList";
diff --git a/src/pages/ai/index.module.less b/src/pages/ai/index.module.less
@@ -3,13 +3,3 @@
     height: 64px;
   }
 }
-.bigMe {
-  position: absolute;
-  bottom: 0;
-  right: 16px;
-  width: 200px;
-  height: 100px;
-  background-repeat: no-repeat;
-  background-image: url("../../assets/me.png");
-  background-size: 100%;
-}
diff --git a/src/pages/ai/index.tsx b/src/pages/ai/index.tsx
@@ -1,11 +1,9 @@
 import { useEffect } from "react";
-import { List, Typography } from "antd";
 import { post } from "@/utils/request";
 import style from "./index.module.less";
 import useCustomReducer from "@/hooks/useCusReducer";
-import { useNavigate } from "react-router-dom";
+import ArticleList from "@/components/articleList";
 export default function AI() {
-  const nav = useNavigate();
   const [state, dispatch] = useCustomReducer({
     article: [],
   });
@@ -21,25 +19,7 @@ export default function AI() {
   }, []);
   return (
     <div className={style.aiContainer}>
-      <List
-        size="large"
-        bordered
-        dataSource={state.article}
-        renderItem={(item: any) => (
-          <List.Item>
-            <Typography.Link
-              onClick={() => {
-                nav(`/user/write`, {
-                  state: { url: item.download_url },
-                });
-              }}
-            >
-              {item.title}
-            </Typography.Link>
-          </List.Item>
-        )}
-      />
-      <div className={style.bigMe} />
+      <ArticleList postList={state.article} />
     </div>
   );
 }
diff --git a/src/pages/arch/index.tsx b/src/pages/arch/index.tsx
@@ -1,11 +1,9 @@
 import { useEffect } from "react";
-import { List, Typography } from "antd";
 import style from "./index.module.less";
+import ArticleList from "@/components/articleList";
 import { post } from "@/utils/request";
 import useCustomReducer from "@/hooks/useCusReducer";
-import { useNavigate } from "react-router-dom";
 export default function BFE() {
-  const nav = useNavigate();
   const [state, dispatch] = useCustomReducer({
     article: [],
   });
@@ -23,24 +21,7 @@ export default function BFE() {
   }, []);
   return (
     <div className={style.archWP}>
-      <List
-        size="large"
-        bordered
-        dataSource={state.article}
-        renderItem={(item: any) => (
-          <List.Item>
-            <Typography.Link
-              onClick={() => {
-                nav(`/user/write`, {
-                  state: { url: item.download_url },
-                });
-              }}
-            >
-              {item.title}
-            </Typography.Link>
-          </List.Item>
-        )}
-      />
+      <ArticleList postList={state.article} />
     </div>
   );
 }
diff --git a/src/pages/be/index.tsx b/src/pages/be/index.tsx
@@ -1,11 +1,9 @@
 import { useEffect } from "react";
-import { List, Typography } from "antd";
 import style from "./index.module.less";
+import ArticleList from "@/components/articleList";
 import { post } from "@/utils/request";
 import useCustomReducer from "@/hooks/useCusReducer";
-import { useNavigate } from "react-router-dom";
 export default function BFE() {
-  const nav = useNavigate();
   const [state, dispatch] = useCustomReducer({
     article: [],
   });
@@ -21,24 +19,7 @@ export default function BFE() {
   }, []);
   return (
     <div className={style.BEWP}>
-      <List
-        size="large"
-        bordered
-        dataSource={state.article}
-        renderItem={(item: any) => (
-          <List.Item>
-            <Typography.Link
-              onClick={() => {
-                nav(`/user/write`, {
-                  state: { url: item.download_url },
-                });
-              }}
-            >
-              {item.title}
-            </Typography.Link>
-          </List.Item>
-        )}
-      />
+      <ArticleList postList={state.article} />
     </div>
   );
 }
diff --git a/src/pages/bfe/index.tsx b/src/pages/bfe/index.tsx
@@ -1,11 +1,9 @@
 import { useEffect } from "react";
-import { Typography, List } from "antd";
 import style from "./index.module.less";
+import ArticleList from "@/components/articleList";
 import { post } from "@/utils/request";
 import useCustomReducer from "@/hooks/useCusReducer";
-import { useNavigate } from "react-router-dom";
 export default function BFE() {
-  const nav = useNavigate();
   const [state, dispatch] = useCustomReducer({
     article: [],
   });
@@ -21,24 +19,7 @@ export default function BFE() {
   }, []);
   return (
     <div className={style.BFEWP}>
-      <List
-        size="large"
-        bordered
-        dataSource={state.article}
-        renderItem={(item: any) => (
-          <List.Item>
-            <Typography.Link
-              onClick={() => {
-                nav(`/user/write`, {
-                  state: { url: item.download_url },
-                });
-              }}
-            >
-              {item.title}
-            </Typography.Link>
-          </List.Item>
-        )}
-      />
+      <ArticleList postList={state.article} />
     </div>
   );
 }
diff --git a/src/pages/user/write/index.tsx b/src/pages/user/write/index.tsx
@@ -1,42 +1,54 @@
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Vditor from "vditor";
 import style from "./index.module.less";
 import "vditor/dist/index.css";
 import { post } from "@/utils/request";
-import { Button, Modal, Form, Input, Select, message } from "antd";
+import { Button, Modal, Form, Input, Select, message, Space } from "antd";
 import { articleTypes } from "@/constants/commonTypes";
 import { useNavigate, useLocation } from "react-router-dom";
 
 const Write = () => {
   const [vd, setVd] = useState<Vditor>();
   const { state } = useLocation();
-  console.log(location);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const navigate = useNavigate();
   const [form] = Form.useForm();
+  const [articleInfo, setArticleInfo] = useState({
+    path: "",
+    title: "",
+    category: "",
+  });
 
   useEffect(() => {
     const vditor = new Vditor("vditor", {
       mode: "sv",
+      value: '',
       after: () => {
         setVd(vditor);
       },
     });
     // Clear the effect
     return () => {
+      vd?.setValue('');
       vd?.destroy();
       setVd(undefined);
     };
   }, []);
 
   useEffect(() => {
     async function init() {
-      if (state.url) {
+      if (state.url && vd) {
         const res: any = await post("/user/postDetail", {
           download_url: state.url,
         });
-        console.log("res", res);
+        console.log("res", res, "url", state);
         vd?.setValue(res.content);
+        const category = state.path?.split("/")[0];
+        setArticleInfo({
+          title: state.title,
+          category: category,
+          path: state.path,
+        });
       }
     }
     init();
@@ -85,12 +97,35 @@ const Write = () => {
     form.resetFields();
   };
 
+  const handleDel = async () => {
+    Modal.confirm({
+      title: "确定删除该文章吗？",
+      content: "删除后不可恢复",
+      okText: "确定",
+      cancelText: "取消",
+      onOk: async () => {
+        if (state.url) {
+          const res: any = await post("/user/deletePost", {
+            url: articleInfo.path,
+          });
+          if (res.success) {
+          }
+        }
+      },
+    });
+  };
+
   return (
     <div className={style.writeWP}>
       <div className={style.operaBtns}>
-        <Button type="primary" onClick={handlePublish}>
-          发布
-        </Button>
+        <Space>
+          <Button type="primary" onClick={handlePublish}>
+            发布
+          </Button>
+          <Button danger onClick={handleDel}>
+            删除
+          </Button>
+        </Space>
       </div>
       <div id="vditor" className="vditor" />
       <Modal
@@ -105,6 +140,7 @@ const Write = () => {
           <Form.Item
             name="category"
             label="文章分类"
+            initialValue={articleInfo.category}
             rules={[{ required: true, message: "请选择文章分类" }]}
           >
             <Select
@@ -115,6 +151,7 @@ const Write = () => {
           <Form.Item
             name="title"
             label="文章标题"
+            initialValue={articleInfo.title}
             rules={[{ required: true, message: "请输入文章标题" }]}
           >
             <Input placeholder="请输入文章标题" />

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-export { default as ArticleCom } from "./articleCom";`
	`1`	`+export { default as ArticleLink } from "./articleLink";`
	`2`	`+export { default as ArticleList } from "./articleList";`
Original file line number	Diff line number	Diff line change
`@@ -3,13 +3,3 @@`
`3`	`3`	`height: 64px;`
`4`	`4`	`}`
`5`	`5`	`}`
`6`		`-.bigMe {`
`7`		`- position: absolute;`
`8`		`- bottom: 0;`
`9`		`- right: 16px;`
`10`		`- width: 200px;`
`11`		`- height: 100px;`
`12`		`- background-repeat: no-repeat;`
`13`		`- background-image: url("../../assets/me.png");`
`14`		`- background-size: 100%;`
`15`		`-}`