mofumofu/src/components/LogoPanel.tsx

import { useState } from "react";
import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
import {
    Button,
    Modal,
    ModalBody,
    ModalContent,
    ModalOverlay,
    Image,
    IconButton
} from "@chakra-ui/react";
import { pickFile } from "@/lib/upload";
import useModelStore, { StickerType } from "@/store/useModelStore";
import { v4 as uuidv4 } from 'uuid'
import { Vector3 } from "three";

const LogoPanel = () => {
    const [open, setOpen] = useState(false);
    const decals = useModelStore((state) => state.decals);
    const setDecals = useModelStore((state) => state.setDecals);
    const setActiveDecal = useModelStore((state) => state.setActiveDecal);
    const activeDecal = useModelStore((state) => state.activeDecal);
    return (
        <>
            <ul>
                {decals
                    .filter((el) => el.type === StickerType.logo)
                    .map((decal) => (
                        <li
                            onClick={() => {
                                setActiveDecal(decal.id)
                            }}
                            key={decal.id}
                            className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${decal.id === activeDecal ? "border-2 border-green-100 bg-blue-200" : ""
                                }`}
                        >
                            <Image className={"w-12 h-12 object-contain"} src={decal.url} />
                            <IconButton icon={<DeleteIcon />} aria-label={""} colorScheme="red" size={"xs"} onClick={() => {
                                setDecals(decals.filter(el => el.id !== decal.id))
                            }} />
                        </li>
                    ))}
            </ul>
            <div className="flex justify-center mt-4">
                <Button
                    colorScheme="messenger"
                    onClick={() => {
                        pickFile({
                            accept: ["image/png"],
                        }).then((files) => {
                            if (!files.length) return
                            const id = uuidv4()
                            setDecals([...decals, {
                                id,
                                url: URL.createObjectURL(files[0]),
                                postion: new Vector3(0, 0, 0),
                                type: StickerType.logo
                            }])
                            setActiveDecal(id)
                        });
                    }}
                    leftIcon={<AddIcon />}
                >
                    添加LOGO
                </Button>
            </div>

            <Modal
                isOpen={open}
                onClose={() => {
                    setOpen(() => false);
                }}
            >
                <ModalOverlay />
                <ModalContent>
                    <ModalBody>
                        <div className="flex justify-center p-4">
                            <div
                                onClick={() => { }}
                                className={
                                    "flex aspect-square w-24 cursor-pointer items-center justify-center rounded-lg border-2 border-gray-300"
                                }
                            >
                                <AddIcon />
                            </div>
                        </div>
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    );
};

export default LogoPanel;