achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
宇阳
2025-01-10 20:57:03 +08:00
parent 7cbd6061d3
commit c9345aae66
2 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/CreateRecord/index.tsx
View File

@@ -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,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)}
/>
</>

1
src/pages/File/index.tsx
View File

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