diff --git a/src/pages/CreateRecord/index.tsx b/src/pages/CreateRecord/index.tsx index 297847c..07b6abb 100644 --- a/src/pages/CreateRecord/index.tsx +++ b/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: ( + { + 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 ( <> @@ -77,30 +117,30 @@ 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 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> + <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> - <Image - key={index} - src={item} - width={100} - height={100} - preview={false} - className='absolute top-0 left-0 rounded-lg' - /> - </div> - )) - } - </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)} />} + <Image + key={index} + src={item} + width={100} + height={100} + preview={false} + 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> <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)} /> </> diff --git a/src/pages/File/index.tsx b/src/pages/File/index.tsx index 206c99a..86b19fa 100644 --- a/src/pages/File/index.tsx +++ b/src/pages/File/index.tsx @@ -159,7 +159,6 @@ export default () => { <FileUpload dir={dirName} open={openUploadModalOpen} - // open={true} onSuccess={() => getFileList(dirName)} onCancel={() => setOpenUploadModalOpen(false)} />