decal

src/components/LogoPanel.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
-import { AddIcon } from "@chakra-ui/icons";
+import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
 import {
     Button,
     Modal,
     ModalBody,
     ModalContent,
     ModalOverlay,
-    Image
+    Image,
+    IconButton
 } from "@chakra-ui/react";
 import { pickFile } from "@/lib/upload";
 import useModelStore, { StickerType } from "@/store/useModelStore";
@@ -30,10 +31,13 @@ const LogoPanel = () => {
                                 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" : ""
+                            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>

src/components/RightPanel.tsx

@@ -26,13 +26,12 @@ const RightPanel = () => {
                   onClick={() => {
                     setActiveModel(index);
                   }}
-                  className={`${
+                  className={`${activeModel === index ? "border-2 border-green-300" : ""
-                    activeModel === index ? "border-2 border-green-300" : ""
                     } flex aspect-square items-center justify-center overflow-hidden rounded-xl bg-blue-100`}
                 >
                   <img
                     className="h-full w-full object-cover"
-                    src={models[activeModel].icon}
+                    src={models[index].icon}
                   />
                 </div>
               ))}

src/components/TextLabelPanel.tsx

@@ -52,6 +52,7 @@ const TextLabelPanel = () => {
                                 const canvas = document.createElement("canvas");
                                 const fabricText = new fabric.Text(text, {
                                     fill: color,
+                                    // fontFamily: 'sans-serif'
                                 });
                                 const fabricCanvas = new fabric.Canvas(canvas, {
                                     width: fabricText.width,
@@ -90,8 +91,7 @@ const TextLabelPanel = () => {
                                     setActiveDecal(text.id);
                                 }}
                                 key={text.id}
-                className={`mt-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${
+                                className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${activeDecal === text.id ? "border-2 border-green-100 bg-blue-200" : ""
-                  activeDecal === text.id ? "border-2 border-green-100" : ""
                                     }`}
                             >
                                 <span>{text.text}</span>
@@ -108,10 +108,12 @@ const TextLabelPanel = () => {
                                         className={"ml-1"}
                                         onClick={(ev) => {
                                             ev.stopPropagation();
+                                            setDecals(decals.filter(el => el.id !== text.id))
                                         }}
                                         size={"xs"}
                                         icon={<DeleteIcon />}
                                         aria-label={""}
+                                        colorScheme="red"
                                     />
                                 </div>
                             </li>
@@ -122,7 +124,6 @@ const TextLabelPanel = () => {
                 <Button
                     colorScheme="messenger"
                     onClick={() => {
-            // setOpen(() => true)
                         setEditing(() => true);
                     }}
                     leftIcon={<AddIcon />}

src/components/ThreeScene.tsx

@@ -53,7 +53,6 @@ const CapModel = () => {
                       y / models[activeModel].scale,
                       z / models[activeModel].scale,
                     );
-                    console.log(pos);
                     setDecalPositon(activeDecal, pos);
                   }
                 }}
@@ -76,7 +75,6 @@ const CapModel = () => {
                 ) : (
                   <meshStandardMaterial color="gray" />
                 )}
-
               </mesh>
             );
           }

src/constant/models.ts

@@ -2,7 +2,7 @@ export const models = [
   {
     name: "版型1",
     path: "/models/baseball_cap_3d.glb",
-    icon: "/icon/baseball_cap_3d.png",
+    icon: "/icon/model1.jpg",
     scale: 18,
     mesh: [
       {
@@ -49,7 +49,7 @@ export const models = [
   },
   {
     name: "版型2",
-    icon: "/icon/baseball_cap_3d_logo.png",
+    icon: "/icon/model2.jpg",
     path: "/models/baseball_cap.glb",
     scale: 0.02,
     mesh: [

vite.config.ts

@@ -5,6 +5,9 @@ import {fileURLToPath, URL} from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    host: true
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url))