完成修改文章功能

src/pages/Create/components/PublishForm/index.tsx

@@ -10,6 +10,7 @@ import { Tag } from "@/types/tag";
 import dayjs from 'dayjs';
 import "./index.scss"
 import { Article } from "@/types/article";
+import { useNavigate } from "react-router-dom";
 
 interface FieldType {
     title: string,
@@ -20,16 +21,17 @@ interface FieldType {
     description: string;
 }
 
-const PublishForm = ({ data }: { data: Article }) => {
+const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => void }) => {
     const [form] = Form.useForm()
+    const navigate = useNavigate()
+
     const [cateList, setCateList] = useState<Cate[]>([])
     const [tagList, setTagList] = useState<Tag[]>([])
 
     useEffect(() => {
         if (!data.id) return
-        const cateIds = transCateArray(data.cateList)
-        console.log(cateIds);
 
+        const cateIds = transCateArray(data.cateList)
         const tagIds = data.tagList.map(item => item.id)
         form.setFieldsValue({
             ...data,
@@ -37,7 +39,6 @@ const PublishForm = ({ data }: { data: Article }) => {
             tagIds,
             createTime: dayjs(+data.createTime!)
         })
-        console.log(data, 9999);
     }, [data])
 
     const getCateList = async () => {
@@ -64,15 +65,21 @@ const PublishForm = ({ data }: { data: Article }) => {
         values.createTime = values.createTime.valueOf()
         values.cateIds = (values.cateIds as number[]).flat().join(',')
         values.tagIds = values.tagIds ? (values.tagIds as number[]).join(',') : ""
-        console.log(values);
 
         if (data.id) {
-            await editArticleDataAPI({ ...values, content: data.content } as Article)
+            await editArticleDataAPI({ id: data.id, ...values, content: data.content } as Article)
             message.success("🎉 编辑成功")
         } else {
-            await addArticleDataAPI({ ...values, content: data.content } as Article)
+            await addArticleDataAPI({ id: data.id, ...values, content: data.content } as Article)
             message.success("🎉 发布成功")
         }
+
+        // 关闭弹框
+        closeModel()
+        // 跳转到文章页
+        navigate("/article")
+        // 初始化表单
+        form.resetFields()
     }
 
     return (

src/pages/Create/components/VditorMD/index.tsx

@@ -11,14 +11,6 @@ interface VditorProps {
 const VditorEditor = ({ value, getValue }: VditorProps) => {
     const [vd, setVd] = useState<Vditor>();
 
-    // useEffect(() => {
-    //     if (vd) {
-    //         vd.setValue(value || '')
-    //     }
-    //     console.log(value,444);
-        
-    // }, [value])
-
     useEffect(() => {
         const vditor = new Vditor("vditor", {
             minHeight: 550,
@@ -27,32 +19,37 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
             //     enable: true,
             //     position: 'left'
             // },
+            // 禁止缓存数据
             cache: {
                 enable: false
             },
+            preview: {
+                // 限制防抖时间
+                delay: 500
+            },
             input: (value) => {
                 // 把数据传给父组件
                 getValue(value)
             },
             after: () => {
-                console.log(value?.trim(),!!value?.trim().length);
-                
-                // value?.trim().length && vditor.setValue(value)
-
-                // vditor.setValue("`Vditor` 最小代码示例");
-
                 setVd(vditor);
             }
         })
 
-        // Clear the effect
         return () => {
             vd?.destroy();
             setVd(undefined);
         };
     }, []);
 
+    // 监听 value 变化并更新编辑器内容
+    useEffect(() => {
+        if (vd && value) {
+            vd.setValue(value);
+        }
+    }, [value, vd]);
+
     return <div id="vditor" className="vditor" />;
 };
 
-export default VditorEditor;
+export default VditorEditor;

src/pages/Create/index.tsx

@@ -20,8 +20,6 @@ const CreatePage = () => {
 
   // 获取编辑器的内容
   const getVditorData = (value: string) => {
-    console.log(value, 333);
-
     setContent(value)
   }
 
@@ -34,23 +32,16 @@ const CreatePage = () => {
   const getArticleData = async () => {
     const { data } = await getArticleDataAPI(id)
     setData(data)
-    console.log(222,data);
+    setContent(data.content)
   }
 
   useEffect(() => {
-    if (id) {
-      console.log(111);
-      
-      getArticleData()
-    }
+    if (id) getArticleData()
   }, [id])
 
   useEffect(() => {
-    if (data.id) {
-      setContent(data.content)
-      console.log(333,data);
-    }
-  }, [data])
+    setData({ ...data, content })
+  }, [content])
 
   return (
     <>
@@ -63,7 +54,7 @@ const CreatePage = () => {
           </Button>
         </div>
 
-        <VditorEditor value={data.content} getValue={getVditorData} />
+        <VditorEditor value={content} getValue={getVditorData} />
 
         <Drawer
           title={data.id ? "编辑文章" : "发布文章"}
@@ -73,7 +64,7 @@ const CreatePage = () => {
           onClose={() => setPublishOpen(false)}
           open={publishOpen}
         >
-          <PublishForm data={data} />
+          <PublishForm data={data} closeModel={() => setPublishOpen(false)} />
         </Drawer>
       </Card >
     </>