From 6c6fa7f6f45727f757d48cbfe5579aa66a9ad004 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com>
Date: Sat, 12 Oct 2024 12:55:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=96=87=E7=AB=A0=E9=A1=B5?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileUpload/index.tsx           |  4 +-
 .../Create/components/VditorMD/index.tsx      | 61 ++++++++++++++++++-
 src/pages/Create/index.tsx                    | 13 +++-
 src/pages/Setup/components/Layout/index.tsx   |  2 +-
 src/pages/Swiper/index.tsx                    |  2 +-
 5 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/components/FileUpload/index.tsx b/src/components/FileUpload/index.tsx
index 1823f04..46e345f 100644
--- a/src/components/FileUpload/index.tsx
+++ b/src/components/FileUpload/index.tsx
@@ -9,7 +9,7 @@ import Compressor from 'compressorjs';
 interface UploadFileProps {
     dir: FileDir,
     open: boolean,
-    onSuccess: (urls: string) => void,
+    onSuccess: (urls: string[]) => void,
     onCancel: () => void
 }
 
@@ -66,7 +66,7 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => {
         // 把数据写入到剪贴板
         await navigator.clipboard.writeText(data.join("\n"));
         message.success(`🎉 文件上传成功，URL链接已复制到剪贴板`);
-        onSuccess(data.join("\n"));
+        onSuccess(data);
         setIsLoading(false);
         onCloseModel();
     };
diff --git a/src/pages/Create/components/VditorMD/index.tsx b/src/pages/Create/components/VditorMD/index.tsx
index 58bf70b..9a6ee4c 100644
--- a/src/pages/Create/components/VditorMD/index.tsx
+++ b/src/pages/Create/components/VditorMD/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Vditor from "vditor";
 import "vditor/dist/index.css";
 import "./index.scss"
+import FileUpload from "@/components/FileUpload";
 
 const toolbar = [
     {
@@ -177,6 +178,7 @@ interface VditorProps {
 }
 
 const VditorEditor = ({ value, getValue }: VditorProps) => {
+    const [openUploadModalOpen, setOpenUploadModalOpen] = useState(false);
     const [vd, setVd] = useState<Vditor>();
 
     useEffect(() => {
@@ -191,11 +193,52 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
                 delay: 500
             },
             toolbar,
+            // upload: {
+            //     handler: async (files) => {
+            //         console.log(files, 333);
+
+            //         const formData = new FormData();
+            //         files.forEach(file => {
+            //             formData.append('files', file);
+            //         });
+
+            //         // 添加额外参数
+            //         formData.append('dir', 'article');
+
+            //         const res = await fetch(`${baseURL}/file`, {
+            //             method: "POST",
+            //             body: formData,
+            //             headers: {
+            //                 "Authorization": `Bearer ${store.token}`
+            //             }
+            //         });
+
+            //         const { code, message, data } = await res.json();
+            //         if (code !== 200) return message.error("文件上传失败：" + message);
+
+            //         // 插入到编辑器中
+            //         data.forEach((path: string) => {
+            //             vditor.insertValue(`![${path}](${path})`);
+            //         });
+            //     },
+            // },
             input: (value) => {
                 // 把数据传给父组件
                 getValue(value)
             },
             after: () => {
+                // 获取文件上传按钮
+                const uploadButton = document.querySelector('.vditor-toolbar [data-type="upload"]')!;
+
+                // 添加点击事件监听器
+                uploadButton.addEventListener('click', (e) => {
+                    e.preventDefault()
+                    console.log('文件上传图标被点击');
+                    // 在这里添加你的自定义逻辑
+
+                    setOpenUploadModalOpen(true)
+                });
+
                 setVd(vditor);
             }
         })
@@ -213,7 +256,23 @@ const VditorEditor = ({ value, getValue }: VditorProps) => {
         }
     }, [value, vd]);
 
-    return <div id="vditor" className="vditor" />;
+    return (
+        <>
+            <div id="vditor" className="vditor" />
+
+            {/* 文件上传 */}
+            <FileUpload
+                dir="article"
+                open={openUploadModalOpen}
+                onSuccess={(urls: string[]) => {
+                    urls.forEach((path: string) => {
+                        vd?.insertValue(`![${path}](${path})`);
+                    });
+                }}
+                onCancel={() => setOpenUploadModalOpen(false)}
+            />
+        </>
+    );
 };
 
 export default VditorEditor;
\ No newline at end of file
diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index 92732cf..84f54b9 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -24,7 +24,12 @@ const CreatePage = () => {
   }
 
   // 保存文章
-  const baseBtn = () => {
+  const saveBtn = () => {
+    content.trim().length >= 1 ? setPublishOpen(true) : message.error('请输入文章内容')
+  }
+
+  // 下一步
+  const nextBtn = () => {
     content.trim().length >= 1 ? setPublishOpen(true) : message.error('请输入文章内容')
   }
 
@@ -128,9 +133,13 @@ const CreatePage = () => {
         <div className='absolute top-[4.5%] right-[5%] z-10 flex space-x-4'>
           <Dropdown.Button menu={{ items }}>创作神器</Dropdown.Button>
 
-          <Button type="primary" className='w-full flex justify-between' onClick={baseBtn} >
+          <Button className='w-full flex justify-between' onClick={saveBtn} >
             <BiSave className='text-base' /> 保存
           </Button>
+
+          <Button type="primary" className='w-full flex justify-between' onClick={nextBtn} >
+            <BiSave className='text-base' /> 下一步
+          </Button>
         </div>
 
         <VditorEditor value={content} getValue={getVditorData} />
diff --git a/src/pages/Setup/components/Layout/index.tsx b/src/pages/Setup/components/Layout/index.tsx
index f42cbc0..80b34ea 100644
--- a/src/pages/Setup/components/Layout/index.tsx
+++ b/src/pages/Setup/components/Layout/index.tsx
@@ -115,7 +115,7 @@ const LayoutPage = () => {
             <FileUpload
                 dir="swiper"
                 open={isModalOpen}
-                onSuccess={(url: string) => setLayout({ ...layout, swiperImage: url })}
+                onSuccess={(url: string[]) => setLayout({ ...layout, swiperImage: url.join("\n") })}
                 onCancel={() => setIsModalOpen(false)}
             />
         </>
diff --git a/src/pages/Swiper/index.tsx b/src/pages/Swiper/index.tsx
index 7d98093..d52ca10 100644
--- a/src/pages/Swiper/index.tsx
+++ b/src/pages/Swiper/index.tsx
@@ -160,7 +160,7 @@ const SwiperPage = () => {
             <FileUpload
                 dir="swiper"
                 open={isModalOpen}
-                onSuccess={(url: string) => form.setFieldValue("image", url)}
+                onSuccess={(url: string[]) => form.setFieldValue("image", url.join("\n"))}
                 onCancel={() => setIsModalOpen(false)}
             />
         </>