import styles from './bg-removal.module.scss' import { IconButton } from "./button"; import Locale from '../locales' import CloseIcon from "../icons/close.svg"; import { useNavigate } from "react-router-dom"; import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps, UploadFile } from 'antd'; import { Button, Flex, Splitter, message, Upload } from 'antd'; import { useState, useRef, useEffect } from 'react'; import { FileList } from './bgRemoval/fileList' import { BgRemovalRight } from './common/bgRemoval-right'; import clsx from 'clsx'; import LoadingIcon from "@/app/icons/loading.svg"; import BotIcon from "@/app/icons/bot.svg"; export function BgRemovalPage() { const navigate = useNavigate(); const [fileData, setFileData] = useState<Blob | null>(null); //储存上传图片 const [previewUrl, setPreviewUrl] = useState<string | null>(''); //预览图片的URL const allowType: string[] = ['png', 'jpg'] //允许上传的图片类型 const [fileList, setFileList] = useState<Blob[]>([]) //用户的图片列表 本地存储 const [isLoading, setIsLoading] = useState(false) // 修改 useEffect 监听 fileData useEffect(() => { if (fileData) { // 创建 Blob 的临时 URL const objectUrl = URL.createObjectURL(fileData); setPreviewUrl(objectUrl); // 组件卸载时释放内存 return () => URL.revokeObjectURL(objectUrl); } }, [fileData]); // 关闭图片 const closePic = () => { setFileData(null); setPreviewUrl(''); }; //上传图片 const onChange = (info: any) => { if (info.file.status === 'uploading') { return; } if (info.file.status === 'done') { // 获取上传的文件对象 const file = info.file as UploadFile; const blob = file.originFileObj as Blob; setFileData(blob); } else if (info.file.status === 'error') { message.error(`${info.file.name} file upload failed.`); } }; return ( <> <div className="window-header"> <div className="window-header-title"> <div className="window-header-main-title"> {Locale.BgRemoval.Title} </div> </div> <div className="window-actions"> <div className="window-action-button"> <IconButton icon={<CloseIcon />} bordered onClick={() => navigate(-1)} /> </div> </div> </div> <div className={styles['removal-body']}> <Splitter className={styles['splitter']}> <Splitter.Panel defaultSize="70%" min="60%" max="70%" className={styles['splitterPanel']} > <Flex vertical justify='center' align="center" gap="middle" className={styles['panelFlex']}> {isLoading ? ( <div className={clsx("no-dark", styles["loading-content"])}> <BotIcon /> <LoadingIcon /> </div> ) : previewUrl ? ( <div className={styles['preview']}> <img src={previewUrl} alt="Preview" className={styles['previewImage']} /> <IconButton icon={<CloseIcon />} bordered onClick={closePic} className={styles['icon']} /> </div> ) : ( <Upload onChange={onChange} beforeUpload={(file) => { setFileData(file); return false; }} showUploadList={false} accept="image/*" > <Button icon={<UploadOutlined />} size='large'> 上传图片 </Button> </Upload> )} </Flex> </Splitter.Panel> <Splitter.Panel> <BgRemovalRight fileData={fileData} setFileData={setFileData} previewUrl={previewUrl} setPreviewUrl={setPreviewUrl} isLoading={isLoading} setIsLoading={setIsLoading} /> </Splitter.Panel> </Splitter> </div> <div> {/* <FileList filelist={filelist} /> */} </div> </> ) }