完成闪念手动输入图片链接

src/pages/CreateRecord/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
-import { Button, Card, Image, message } from "antd"
+import { Button, Card, Dropdown, Image, Input, message, Modal } from "antd"
 import TextArea from "antd/es/input/TextArea"
 
 import { addRecordDataAPI, editRecordDataAPI, getRecordDataAPI } from '@/api/Record'
@@ -63,6 +63,46 @@ export default () => {
         if (id) getRecordData()
     }, [id])
 
+    // 添加下拉菜单项配置
+    const dropdownItems = {
+        items: [
+            {
+                key: 'upload',
+                label: '上传图片',
+                onClick: () => setIsModalOpen(true)
+            },
+            {
+                key: 'input',
+                label: '输入链接',
+                onClick: () => {
+                    let inputUrl = '';
+                    Modal.confirm({
+                        title: '输入图片链接',
+                        content: (
+                            <Input
+                                className="mt-2"
+                                placeholder="请输入图片链接"
+                                onChange={(e) => {
+                                    inputUrl = e.target.value;
+                                }}
+                            />
+                        ),
+                        okText: '确认',
+                        cancelText: '取消',
+                        onOk: () => {
+                            if (!inputUrl.startsWith('http://') && !inputUrl.startsWith('https://')) {
+                                message.error('链接必须以 http:// 或 https:// 开头');
+                                return Promise.reject();
+                            }
+                            setImageList([...imageList, inputUrl]);
+                            return Promise.resolve();
+                        }
+                    });
+                }
+            }
+        ]
+    };
+
     return (
         <>
             <Title value="闪念" />
@@ -77,12 +117,10 @@ export default () => {
                         onChange={(e) => setContent(e.target.value)}
                         className="w-[800px] p-4 border-2 border-[#eee] dark:border-strokedark text-base rounded-md" />
 
-                    {imageList.length
-                        ? (
-                            <div className="absolute bottom-4 left-4 flex space-x-2">
-                                {
-                                    imageList.map((item, index) => (
-                                        <div key={index} className="group overflow-hidden relative">
+                    <div className="absolute bottom-4 left-4 flex items-end space-x-3">
+                        <div className="flex space-x-2 overflow-x-auto">
+                            {imageList.length > 0 && imageList.map((item, index) => (
+                                <div key={index} className="group overflow-hidden relative shrink-0">
                                     <div className="absolute top-0 -right-6 group-hover:right-0 z-10 bg-slate-600 rounded-full cursor-pointer p-1" onClick={() => handleDelImage(item)}>
                                         <RiDeleteBinLine className="text-white" />
                                     </div>
@@ -93,14 +131,16 @@ export default () => {
                                         width={100}
                                         height={100}
                                         preview={false}
-                                                className='absolute top-0 left-0 rounded-lg'
+                                        className='rounded-lg'
                                     />
                                 </div>
-                                    ))
-                                }
+                            ))}
+                        </div>
+                        
+                        <Dropdown menu={dropdownItems} placement="top">
+                            <LuImagePlus className="mb-1 text-4xl text-slate-700 dark:text-white hover:text-primary dark:hover:text-primary cursor-pointer shrink-0" />
+                        </Dropdown>
                     </div>
-                        )
-                        : <LuImagePlus className="absolute bottom-4 left-4 text-4xl text-slate-700 dark:text-white hover:text-primary dark:hover:text-primary cursor-pointer" onClick={() => setIsModalOpen(true)} />}
 
                     <Button type="primary" size="large" icon={<BiLogoTelegram className="text-xl" />} className="absolute bottom-4 right-4" onClick={onSubmit} />
                 </div>
@@ -109,7 +149,10 @@ export default () => {
             <FileUpload
                 dir="record"
                 open={isModalOpen}
-                onSuccess={(url: string[]) => setImageList(url)}
+                onSuccess={(url: string[]) => {
+                    setImageList([...imageList, ...url]);
+                    setIsModalOpen(false);
+                }}
                 onCancel={() => setIsModalOpen(false)}
             />
         </>

src/pages/File/index.tsx

@@ -159,7 +159,6 @@ export default () => {
             <FileUpload
                 dir={dirName}
                 open={openUploadModalOpen}
-                // open={true}
                 onSuccess={() => getFileList(dirName)}
                 onCancel={() => setOpenUploadModalOpen(false)}
             />