From cd62ab6c9d2900a4a8933ce9ffd4dc1e3d876064 Mon Sep 17 00:00:00 2001
From: Ra-Liz <2879055132@qq.com>
Date: Thu, 11 Jul 2024 22:24:34 +0800
Subject: [PATCH] added skinNbg ui

---
 src/app/helper.tsx | 633 +++++++++++++++++++++++++--------------------
 tailwind.config.ts |   5 +
 2 files changed, 355 insertions(+), 283 deletions(-)

diff --git a/src/app/helper.tsx b/src/app/helper.tsx
index ed6482d..743b87c 100644
--- a/src/app/helper.tsx
+++ b/src/app/helper.tsx
@@ -13,303 +13,370 @@ import txt2Voice from "@/hooks/txt2VoiceAPI";
 
 // fake list
 const opList = [
-    {
-        id: 1,
-        title: "幸运转盘",
-        src: "http://picdown.jchysoft.com/uiIcon/xingyunzhuanpan.png",
-    },
-    {
-        id: 2,
-        title: "领券中心",
-        src: "http://picdown.jchysoft.com/uiIcon/lingjuanzhongxin.png",
-    }, // bjt错别字将错就错版
-    {
-        id: 3,
-        title: "0元抽",
-        src: "http://picdown.jchysoft.com/uiIcon/0yuanchou.png",
-    },
-    {
-        id: 4,
-        title: "欧宝赏",
-        src: "http://picdown.jchysoft.com/uiIcon/oubanshang.png",
-    }, // bjt错别字
+  {
+    id: 1,
+    title: "幸运转盘",
+    src: "http://picdown.jchysoft.com/uiIcon/xingyunzhuanpan.png",
+  },
+  {
+    id: 2,
+    title: "领券中心",
+    src: "http://picdown.jchysoft.com/uiIcon/lingjuanzhongxin.png",
+  }, // bjt错别字将错就错版
+  {
+    id: 3,
+    title: "0元抽",
+    src: "http://picdown.jchysoft.com/uiIcon/0yuanchou.png",
+  },
+  {
+    id: 4,
+    title: "欧宝赏",
+    src: "http://picdown.jchysoft.com/uiIcon/oubanshang.png",
+  }, // bjt错别字
 ];
 
 //import "@/deps/live2dcubismcore.min.js"
 export default function Home() {
-    const [useVoice, setUseVoice] = useState(false);
-    const query = useSearchParams();
-    const characterId = query.get("id");
-    const token = query.get("token");
-    localStorage.setItem("token", token || "");
-    const { complete, completion: data, isLoading, abort } = useRequest();
-    const voice2txt = (txt: string) => {
-        fetch("sharkapiBaseUrl/voice/txt2voice", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `${token}`,
-            },
-            body: JSON.stringify({
-                txt: txt,
-            }),
-        })
-    }
-    function draggable(model: any) {
-        model.buttonMode = true;
-        model.on("pointerdown", (e: any) => {
-            model.dragging = true;
-            model._pointerX = e.data.global.x - model.x;
-            model._pointerY = e.data.global.y - model.y;
-        });
-        model.on("pointermove", (e: any) => {
-            if (model.dragging) {
-                model.position.x = e.data.global.x - model._pointerX;
-                model.position.y = e.data.global.y - model._pointerY;
-            }
-        });
-        model.on("pointerupoutside", () => (model.dragging = false));
-        model.on("pointerup", () => (model.dragging = false));
-    }
-
-    function addFrame(model: any) {
-        const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
-        foreground.width = model.internalModel.width;
-        foreground.height = model.internalModel.height;
-        foreground.alpha = 0.2;
-
-        model.addChild(foreground);
-    }
-
-    function addHitAreaFrames(model: any) {
-        try {
-            //@ts-ignore
-            const hitAreaFrames = new PIXI.live2d.HitAreaFrames();
-
-            model.addChild(hitAreaFrames);
-
-            checkbox(
-                "Hit Area Frames",
-                (checked: any) => (hitAreaFrames.visible = checked)
-            );
-        } catch (err) { }
-    }
-
-    function checkbox(name: any, onChange: any) {
-        const id = name.replace(/\W/g, "").toLowerCase();
-
-        let checkbox = document.getElementById(id);
-
-        if (!checkbox) {
-            const p = document.createElement("p")!;
-            p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
-
-            document!.getElementById("control")!.appendChild(p);
-            checkbox = p.firstChild as HTMLElement;
-        }
-
-        checkbox.addEventListener("change", () => {
-            //@ts-ignore
-            onChange(checkbox.checked);
-        });
-        //@ts-ignore
-        onChange(checkbox.checked);
-    }
-    const send = (inputText: string) => {
-        setResponse(inputText);
-        if (!inputText) return;
-        complete(1, [], [{
-            content: inputText,
-            role: "user",
-        }]);
-    };
-    useEffect(() => {
-        (async () => {
-            if (data) {
-                setResponse(data);
-                if (typeof speak !== "undefined" && isLoading === false) {
-                    const base64Voice = "data:audio/mp3;base64," + await txt2Voice(data, 4);
-                    const audio = document.createElement("audio");
-                    audio.src = base64Voice;
-                    audio.play();
-                } else {
-                    model!.motion("tap_body");
-                }
-            }
-        })();
-
-    }, [data, isLoading]);
-
-    const { start, end, text, isListening, error } = useVoice2Txt({
-        lang: "cmn-Hans-CN",
-        continuous: false,
+  const [useVoice, setUseVoice] = useState(false);
+  const query = useSearchParams();
+  const characterId = query.get("id");
+  const token = query.get("token");
+  localStorage.setItem("token", token || "");
+  const { complete, completion: data, isLoading, abort } = useRequest();
+  const voice2txt = (txt: string) => {
+    fetch("sharkapiBaseUrl/voice/txt2voice", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${token}`,
+      },
+      body: JSON.stringify({
+        txt: txt,
+      }),
     });
+  };
+  function draggable(model: any) {
+    model.buttonMode = true;
+    model.on("pointerdown", (e: any) => {
+      model.dragging = true;
+      model._pointerX = e.data.global.x - model.x;
+      model._pointerY = e.data.global.y - model.y;
+    });
+    model.on("pointermove", (e: any) => {
+      if (model.dragging) {
+        model.position.x = e.data.global.x - model._pointerX;
+        model.position.y = e.data.global.y - model._pointerY;
+      }
+    });
+    model.on("pointerupoutside", () => (model.dragging = false));
+    model.on("pointerup", () => (model.dragging = false));
+  }
 
-    const { isSpeaking, speak, stop } = useTxt2Voice();
-    const [inputText, setInputText] = useState("");
-    const isMouthOpen = useRef(false);
-    const [response, setResponse] = useState("来和我聊天吧~");
-    useEffect(() => {
-        console.log(text, error);
-        if (!text) return;
-        send(text);
-        // 先叉了这里防止消息展示error
-        // if (error) {
-        //   setResponse(error);
-        //   return;
-        // }
-    }, [text, error]);
-    const [model, setModel] = useState<Live2DModel>();
-    useEffect(() => {
-        if (!isSpeaking) {
-            isMouthOpen.current = false;
-        }
-    }, [isSpeaking]);
+  function addFrame(model: any) {
+    const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
+    foreground.width = model.internalModel.width;
+    foreground.height = model.internalModel.height;
+    foreground.alpha = 0.2;
 
-    useEffect(() => {
-        if (!isListening && !isSpeaking) {
-        }
-    }, [isListening]);
+    model.addChild(foreground);
+  }
 
-    useEffect(() => {
-        // expose PIXI to window so that this plugin is able to
-        // reference window.PIXI.Ticker to automatically update Live2D models
-        //@ts-ignore
-        typeof window !== "undefined" && (window.PIXI = PIXI);
-        (async function () {
-            const app = new PIXI.Application({
-                view: document.getElementById("canvas") as HTMLCanvasElement,
-                backgroundAlpha: 0,
-            });
+  function addHitAreaFrames(model: any) {
+    try {
+      //@ts-ignore
+      const hitAreaFrames = new PIXI.live2d.HitAreaFrames();
 
-            const model = await Live2DModel.from(
-                "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json"
-            );
+      model.addChild(hitAreaFrames);
 
-            app.stage.addChild(model);
-            const scaleX = (innerWidth * 0.4) / model.width;
-            const scaleY = (innerHeight * 0.8) / model.height;
+      checkbox(
+        "Hit Area Frames",
+        (checked: any) => (hitAreaFrames.visible = checked)
+      );
+    } catch (err) {}
+  }
 
-            // fit the window
-            model.scale.set(0.3);
+  function checkbox(name: any, onChange: any) {
+    const id = name.replace(/\W/g, "").toLowerCase();
 
-            model.y = innerHeight * 0.1;
+    let checkbox = document.getElementById(id);
 
-            draggable(model);
-            addFrame(model);
-            addHitAreaFrames(model);
-            setModel(model);
-            model.on("hit", (hitAreas) => {
-                if (hitAreas.includes("body")) {
-                    model.motion("tap_body");
-                    model.motion("speak");
-                }
-            });
-            console.log("ok")
-        })();
-    }, []);
+    if (!checkbox) {
+      const p = document.createElement("p")!;
+      p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
 
-    return (
-        <main className="w-full h-full bg-blue-200">
-            {typeof window !== "undefined" &&
-                typeof window.Live2DCubismCore !== "undefined" && (
-                    <div className="flex w-full flex-col h-full items-center justify-center relative text-white">
-                        {/* live2d */}
-                        <canvas className="w-full " id="canvas"></canvas>
+      document!.getElementById("control")!.appendChild(p);
+      checkbox = p.firstChild as HTMLElement;
+    }
 
-                        {/* 旧叉 */}
-                        {/* <div className="absolute right-[20vw] top-4 bg-orange-300 rounded w-[20vw] h-auto text-sm">
-              {response ? response : "请输入文字和我聊天吧"}
-            </div> */}
-
-                        {/* 角色信息 */}
-                        <div className="absolute left-[4vw] top-4 bg-orange-300 rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
-                            <div className="w-10 h-10 rounded-full bg-white"></div>
-                            <div className="text-xl">昵称</div>
-                        </div>
-
-                        {/* 消息泡泡 */}
-                        <div className="absolute left-1/2 -translate-x-1/2 top-[10vh] bg-black bg-opacity-30 rounded-2xl w-[60vw] h-auto p-2 whitespace-normal break-words">
-                            {response ? response : "请输入文字和我聊天吧"}
-                        </div>
-
-                        {/* 选项 */}
-                        <div className="absolute right-0 top-[20vh] w-[16vw] flex flex-col flex-nowrap items-center gap-10">
-                            {opList.map((item) => (
-                                <div
-                                    key={item.id}
-                                    className="bg-orange-300 rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
-                                >
-                                    <div className="w-6 h-6 overflow-hidden">
-                                        <img
-                                            // 这图片中图标和空白的比例太邪门了
-                                            className="w-full h-full scale-[2.5]"
-                                            src={item.src}
-                                            alt={item.title}
-                                        />
-                                    </div>
-                                    <div className="text-xs">{item.title}</div>
-                                </div>
-                            ))}
-                        </div>
-
-                        {/* 旧叉 */}
-                        {/* <div id="control"></div> */}
-                        {/* <button onClick={start}>语音输入</button>
-                    <button onClick={end}>结束语音输入</button> */}
-
-                        {/* 输入框 */}
-                        <div className="absolute w-[90vw] h-10 bottom-2 left-1/2 -translate-x-1/2 bg-white rounded-xl flex flex-nowrap items-center justify-evenly gap-2 px-2 py-1">
-                            <button
-                                className="w-6 h-6 overflow-hidden"
-                                onClick={() => {
-                                    // 切换语音/键盘
-                                    useVoice ? setUseVoice(false) : setUseVoice(true);
-                                }}
-                            >
-                                <img
-                                    className="w-full h-full scale-[2.5]"
-                                    src={`http://picdown.jchysoft.com/uiIcon/${useVoice ? "jianpan" : "yuyin"
-                                        }.png`}
-                                    alt="输入方式"
-                                />
-                            </button>
-                            {useVoice ? (
-                                <button
-                                    onMouseDown={start}
-                                    onMouseUp={end}
-                                    onTouchStart={start}
-                                    onTouchEnd={end}
-                                    className="h-full bg-gray-300 flex-1 text-center rounded active:bg-gray-500 focus:outline-none select-none"
-                                >
-                                    按住说话
-                                </button>
-                            ) : (
-                                <input
-                                    className="h-full text-black rounded flex-1 bg-gray-200 pl-2"
-                                    value={inputText}
-                                    onChange={(e) => {
-                                        setInputText(e.target.value);
-                                        console.log(e.target.value);
-                                    }}
-                                ></input>
-                            )}
-                            <button
-                                className="w-6 h-6 overflow-hidden"
-                                onClick={() => {
-                                    send(inputText);
-                                    setInputText("");
-                                }}
-                            >
-                                <img
-                                    className="w-full h-full scale-[2.5]"
-                                    src="http://picdown.jchysoft.com/uiIcon/fasong.png"
-                                    alt="发送按钮"
-                                />
-                            </button>
-                        </div>
-                    </div>
-                )}
-        </main>
+    checkbox.addEventListener("change", () => {
+      //@ts-ignore
+      onChange(checkbox.checked);
+    });
+    //@ts-ignore
+    onChange(checkbox.checked);
+  }
+  const send = (inputText: string) => {
+    setResponse(inputText);
+    if (!inputText) return;
+    complete(
+      1,
+      [],
+      [
+        {
+          content: inputText,
+          role: "user",
+        },
+      ]
     );
+  };
+  useEffect(() => {
+    (async () => {
+      if (data) {
+        setResponse(data);
+        if (typeof speak !== "undefined" && isLoading === false) {
+          const base64Voice =
+            "data:audio/mp3;base64," + (await txt2Voice(data, 4));
+          const audio = document.createElement("audio");
+          audio.src = base64Voice;
+          audio.play();
+        } else {
+          model!.motion("tap_body");
+        }
+      }
+    })();
+  }, [data, isLoading]);
+
+  const { start, end, text, isListening, error } = useVoice2Txt({
+    lang: "cmn-Hans-CN",
+    continuous: false,
+  });
+
+  const { isSpeaking, speak, stop } = useTxt2Voice();
+  const [inputText, setInputText] = useState("");
+  const isMouthOpen = useRef(false);
+  const [response, setResponse] = useState("来和我聊天吧~");
+
+  useEffect(() => {
+    console.log(text, error);
+    if (!text) return;
+    send(text);
+    // 先叉了这里防止消息展示error
+    // if (error) {
+    //   setResponse(error);
+    //   return;
+    // }
+  }, [text, error]);
+  const [model, setModel] = useState<Live2DModel>();
+
+  useEffect(() => {
+    if (!isSpeaking) {
+      isMouthOpen.current = false;
+    }
+  }, [isSpeaking]);
+
+  useEffect(() => {
+    if (!isListening && !isSpeaking) {
+    }
+  }, [isListening]);
+
+  useEffect(() => {
+    // expose PIXI to window so that this plugin is able to
+    // reference window.PIXI.Ticker to automatically update Live2D models
+    //@ts-ignore
+    typeof window !== "undefined" && (window.PIXI = PIXI);
+    (async function () {
+      const app = new PIXI.Application({
+        view: document.getElementById("canvas") as HTMLCanvasElement,
+        backgroundAlpha: 0,
+      });
+
+      const model = await Live2DModel.from(
+        "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json"
+      );
+
+      app.stage.addChild(model);
+      const scaleX = (innerWidth * 0.4) / model.width;
+      const scaleY = (innerHeight * 0.8) / model.height;
+
+      // fit the window
+      model.scale.set(0.3);
+
+      model.y = innerHeight * 0.1;
+
+      draggable(model);
+      addFrame(model);
+      addHitAreaFrames(model);
+      setModel(model);
+      model.on("hit", (hitAreas) => {
+        if (hitAreas.includes("body")) {
+          model.motion("tap_body");
+          model.motion("speak");
+        }
+      });
+      console.log("ok");
+    })();
+  }, []);
+
+  // 换肤/换背景相关
+
+  return (
+    <main className="w-full h-full bg-blue-200">
+      {typeof window !== "undefined" &&
+        typeof window.Live2DCubismCore !== "undefined" && (
+          <div className="flex w-full flex-col h-full items-center justify-center relative text-white">
+            {/* live2d */}
+            <canvas className="w-full " id="canvas"></canvas>
+
+            {/* 角色信息 */}
+            <div className="absolute left-[4vw] top-8 bg-gradient-to-r from-start-color to-end-color rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
+              <div className="w-10 h-10 rounded-full bg-white"></div>
+              <div className="text-xl">昵称</div>
+            </div>
+
+            {/* 消息泡泡 */}
+            <div className="absolute left-1/2 -translate-x-1/2 top-[12vh] bg-black bg-opacity-30 rounded-2xl border-2 border-[#FCD161] w-[60vw] h-auto p-2 whitespace-normal break-words">
+              {response ? response : "请输入文字和我聊天吧"}
+            </div>
+
+            {/* 右侧选项 */}
+            <div className="absolute right-0 top-[30vh] w-[16vw] flex flex-col flex-nowrap items-center gap-10">
+              {opList.map((item) => (
+                <div
+                  key={item.id}
+                  className="bg-gradient-to-r from-end-color to-start-color rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
+                >
+                  <div className="w-6 h-6 overflow-hidden">
+                    <img
+                      // 这图片中图标和空白的比例太邪门了
+                      className="w-full h-full scale-[2.5]"
+                      src={item.src}
+                      alt={item.title}
+                    />
+                  </div>
+                  <div className="text-xs">{item.title}</div>
+                </div>
+              ))}
+            </div>
+
+            {/* 皮肤/背景列表 */}
+            <SkinOrBgList type="skin" list={fakeList} />
+
+            {/* 底部换肤 & 换背景 */}
+            <div className="absolute w-[90vw] bottom-14 left-1/2 -translate-x-1/2 flex flex-nowrap items-center justify-between">
+              <button
+                className="w-12 h-12 overflow-hidden"
+                onClick={() => {
+                  console.log("换肤");
+                }}
+              >
+                <img
+                  className="w-full h-full scale-[1.5]"
+                  src={`http://picdown.jchysoft.com/uiIcon/huanfu.png`}
+                  alt="换肤"
+                />
+              </button>
+              <button
+                className="w-12 h-12 overflow-hidden"
+                onClick={() => {
+                  console.log("换背景");
+                }}
+              >
+                <img
+                  className="w-full h-full scale-[1.5]"
+                  src={`http://picdown.jchysoft.com/uiIcon/huanbeijing.png`}
+                  alt="换背景"
+                />
+              </button>
+            </div>
+
+            {/* 底部消息输入发送框 */}
+            <div className="absolute w-[90vw] h-10 bottom-2 left-1/2 -translate-x-1/2 bg-white rounded-xl flex flex-nowrap items-center justify-evenly gap-2 px-2 py-1">
+              <button
+                className="w-6 h-6 overflow-hidden"
+                onClick={() => {
+                  // 切换语音/键盘
+                  useVoice ? setUseVoice(false) : setUseVoice(true);
+                }}
+              >
+                <img
+                  className="w-full h-full scale-[2.8]"
+                  src={`http://picdown.jchysoft.com/uiIcon/${
+                    useVoice ? "jianpan" : "yuyin"
+                  }.png`}
+                  alt="输入方式"
+                />
+              </button>
+              {useVoice ? (
+                <button
+                  onMouseDown={start}
+                  onMouseUp={end}
+                  onTouchStart={start}
+                  onTouchEnd={end}
+                  className="h-full bg-gray-300 flex-1 text-center rounded active:bg-gray-500 focus:outline-none select-none"
+                >
+                  按住说话
+                </button>
+              ) : (
+                <input
+                  className="h-full text-black rounded flex-1 bg-gray-200 pl-2"
+                  value={inputText}
+                  onChange={(e) => {
+                    setInputText(e.target.value);
+                    console.log(e.target.value);
+                  }}
+                ></input>
+              )}
+              <button
+                className="w-6 h-6 overflow-hidden"
+                onClick={() => {
+                  send(inputText);
+                  setInputText("");
+                }}
+              >
+                <img
+                  className="w-full h-full scale-[2.5]"
+                  src="http://picdown.jchysoft.com/uiIcon/fasong.png"
+                  alt="发送按钮"
+                />
+              </button>
+            </div>
+          </div>
+        )}
+    </main>
+  );
 }
+
+const fakeList = [
+  { id: 1, src: "", name: "皮肤1" },
+  { id: 2, src: "", name: "皮肤2" },
+  { id: 3, src: "", name: "皮肤3" },
+  { id: 4, src: "", name: "皮肤4" },
+  { id: 5, src: "", name: "皮肤5" },
+  { id: 6, src: "", name: "皮肤6" },
+  { id: 7, src: "", name: "皮肤7" },
+  { id: 8, src: "", name: "皮肤8" },
+  { id: 9, src: "", name: "皮肤9" },
+  { id: 10, src: "", name: "皮肤10" },
+];
+
+type listItem = { id: number; src: string; name: string };
+export const SkinOrBgList = ({
+  type,
+  list,
+}: {
+  type: "skin" | "bg";
+  list: listItem[];
+}) => {
+  return (
+    <div className="absolute left-1/2 -translate-x-1/2 bottom-24 mb-4 w-[90vw] h-32 bg-white bg-opacity-30 rounded-2xl py-4 px-6 flex flex-nowrap gap-2 overflow-x-auto">
+      {list.map((item) => (
+        <div
+          key={item.id}
+          className="h-full w-24 rounded-2xl border-4 border-dashed border-[#FCD161] bg-orange-100 bg-opacity-10 flex-shrink-0"
+        >
+          {item.name}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e9a0944..4924ca0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,11 @@ const config: Config = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
+      },
+      colors: {
+        "start-color": "#FD7A61",
+        "end-color": "#FF934D",
       },
     },
   },