added skinNbg ui

src/app/helper.tsx

@@ -48,13 +48,13 @@ export default function Home() {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-                "Authorization": `${token}`,
+        Authorization: `${token}`,
       },
       body: JSON.stringify({
         txt: txt,
       }),
-        })
+    });
-    }
+  };
   function draggable(model: any) {
     model.buttonMode = true;
     model.on("pointerdown", (e: any) => {
@@ -118,17 +118,24 @@ export default function Home() {
   const send = (inputText: string) => {
     setResponse(inputText);
     if (!inputText) return;
-        complete(1, [], [{
+    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 base64Voice =
+            "data:audio/mp3;base64," + (await txt2Voice(data, 4));
           const audio = document.createElement("audio");
           audio.src = base64Voice;
           audio.play();
@@ -137,7 +144,6 @@ export default function Home() {
         }
       }
     })();
-
   }, [data, isLoading]);
 
   const { start, end, text, isListening, error } = useVoice2Txt({
@@ -149,6 +155,7 @@ export default function Home() {
   const [inputText, setInputText] = useState("");
   const isMouthOpen = useRef(false);
   const [response, setResponse] = useState("来和我聊天吧~");
+
   useEffect(() => {
     console.log(text, error);
     if (!text) return;
@@ -160,6 +167,7 @@ export default function Home() {
     // }
   }, [text, error]);
   const [model, setModel] = useState<Live2DModel>();
+
   useEffect(() => {
     if (!isSpeaking) {
       isMouthOpen.current = false;
@@ -205,10 +213,12 @@ export default function Home() {
           model.motion("speak");
         }
       });
-            console.log("ok")
+      console.log("ok");
     })();
   }, []);
 
+  // 换肤/换背景相关
+
   return (
     <main className="w-full h-full bg-blue-200">
       {typeof window !== "undefined" &&
@@ -217,28 +227,23 @@ export default function Home() {
             {/* live2d */}
             <canvas className="w-full " id="canvas"></canvas>
 
-                        {/* 旧叉 */}
-                        {/* <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="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-[10vh] bg-black bg-opacity-30 rounded-2xl w-[60vw] h-auto p-2 whitespace-normal break-words">
+            <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-[20vh] w-[16vw] flex flex-col flex-nowrap items-center gap-10">
+            <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-orange-300 rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
+                  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
@@ -253,12 +258,38 @@ export default function Home() {
               ))}
             </div>
 
-                        {/* 旧叉 */}
+            {/* 皮肤/背景列表 */}
-                        {/* <div id="control"></div> */}
+            <SkinOrBgList type="skin" list={fakeList} />
-                        {/* <button onClick={start}>语音输入</button>
-                    <button onClick={end}>结束语音输入</button> */}
 
-                        {/* 输入框 */}
+            {/* 底部换肤 & 换背景 */}
+            <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"
@@ -268,8 +299,9 @@ export default function Home() {
                 }}
               >
                 <img
-                                    className="w-full h-full scale-[2.5]"
+                  className="w-full h-full scale-[2.8]"
-                                    src={`http://picdown.jchysoft.com/uiIcon/${useVoice ? "jianpan" : "yuyin"
+                  src={`http://picdown.jchysoft.com/uiIcon/${
+                    useVoice ? "jianpan" : "yuyin"
                   }.png`}
                   alt="输入方式"
                 />
@@ -313,3 +345,38 @@ export default function Home() {
     </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>
+  );
+};

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",
       },
     },
   },