审查视图

app/components/bg-removal.tsx 5.2 KB
202304001 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
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>
        </>
    )
}