chore'

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) => {
@@ -92,7 +92,7 @@ export default function Home() {
         "Hit Area Frames",
         (checked: any) => (hitAreaFrames.visible = checked)
       );
-        } catch (err) { }
+    } catch (err) {}
   }
 
   function checkbox(name: any, onChange: 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,40 +213,44 @@ export default function Home() {
           model.motion("speak");
         }
       });
-            console.log("ok")
+      console.log("ok");
     })();
   }, []);
 
+  // 换肤/换背景相关
+  const [skinOpen, setSkinOpen] = useState(false);
+  const [bgOpen, setBgOpen] = useState(false);
+
   return (
-        <main className="w-full h-full bg-blue-200">
+    // TODO: 背景状态
+    <main className="w-full h-full bg-[url('http://picdown.jchysoft.com/live2d/beijing/bj1%20%281%29.webp')] bg-center bg-cover">
       {typeof window !== "undefined" &&
         typeof window.Live2DCubismCore !== "undefined" && (
           <div className="flex w-full flex-col h-full items-center justify-center relative text-white">
             {/* live2d */}
+            {/* TODO: 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 className="flex flex-col justify-evenly">
+                <div className="text-xs">亲密度</div>
+              </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 p-1"
                 >
                   <div className="w-6 h-6 overflow-hidden">
                     <img
@@ -253,12 +265,64 @@ export default function Home() {
               ))}
             </div>
 
-                        {/* 旧叉 */}
-                        {/* <div id="control"></div> */}
-                        {/* <button onClick={start}>语音输入</button>
-                    <button onClick={end}>结束语音输入</button> */}
+            {/* 皮肤列表 */}
+            {skinOpen && (
+              <SkinOrBgList
+                type="skin"
+                list={fakeList}
+                onSelect={(type, selectedItem) => {
+                  console.log("选中的新的皮肤", type, selectedItem);
+                }}
+              />
+            )}
+            {/* 背景列表 */}
+            {bgOpen && (
+              <SkinOrBgList
+                type="bg"
+                list={fakeList2}
+                onSelect={(type, selectedItem) => {
+                  console.log("选中的新的背景", type, selectedItem);
+                }}
+              />
+            )}
 
-                        {/* 输入框 */}
+            {/* 底部换肤 & 换背景 */}
+            <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("换肤");
+                  if (bgOpen && !skinOpen) {
+                    setBgOpen(false);
+                  }
+                  setSkinOpen(!skinOpen);
+                }}
+              >
+                <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("换背景");
+                  if (skinOpen && !bgOpen) {
+                    setSkinOpen(false);
+                  }
+                  setBgOpen(!bgOpen);
+                }}
+              >
+                <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 +332,9 @@ export default function Home() {
                 }}
               >
                 <img
-                                    className="w-full h-full scale-[2.5]"
-                                    src={`http://picdown.jchysoft.com/uiIcon/${useVoice ? "jianpan" : "yuyin"
+                  className="w-full h-full scale-[2.8]"
+                  src={`http://picdown.jchysoft.com/uiIcon/${
+                    useVoice ? "jianpan" : "yuyin"
                   }.png`}
                   alt="输入方式"
                 />
@@ -313,3 +378,77 @@ export default function Home() {
     </main>
   );
 }
+
+const fakeList = [
+  { id: 1, src: "", name: "皮肤1", state: 1 },
+  { id: 2, src: "", name: "皮肤2", state: 1 },
+  { id: 3, src: "", name: "皮肤3", state: 0 },
+  { id: 4, src: "", name: "皮肤4", state: 0 },
+  { id: 5, src: "", name: "皮肤5", state: 0 },
+  { id: 6, src: "", name: "皮肤6", state: 0 },
+  { id: 7, src: "", name: "皮肤7", state: 0 },
+  { id: 8, src: "", name: "皮肤8", state: 0 },
+  { id: 9, src: "", name: "皮肤9", state: 0 },
+  { id: 10, src: "", name: "皮肤10", state: 0 },
+];
+const fakeList2 = [
+  { id: 1, src: "", name: "背景1", state: 1 },
+  { id: 2, src: "", name: "背景2", state: 1 },
+  { id: 3, src: "", name: "背景3", state: 0 },
+  { id: 4, src: "", name: "背景4", state: 0 },
+  { id: 5, src: "", name: "背景5", state: 0 },
+  { id: 6, src: "", name: "背景6", state: 0 },
+  { id: 7, src: "", name: "背景7", state: 0 },
+  { id: 8, src: "", name: "背景8", state: 0 },
+  { id: 9, src: "", name: "背景9", state: 0 },
+  { id: 10, src: "", name: "背景10", state: 0 },
+];
+
+type listItem = { id: number; src: string; name: string; state: number };
+export const SkinOrBgList = ({
+  type,
+  list,
+  onSelect,
+}: {
+  type: "skin" | "bg";
+  list: listItem[];
+  onSelect: (type: "skin" | "bg", item: listItem) => void;
+}) => {
+  function handleSelect(selectedItem: listItem) {
+    if (selectedItem.state == 0) {
+      console.log("未解锁，不可用");
+      // TODO: 解锁操作
+      return;
+    }
+    onSelect(type, selectedItem);
+  }
+
+  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
+          onClick={() => handleSelect(item)}
+          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 relative overflow-hidden"
+        >
+          {item.name}
+          <img
+            className="absolute top-0 left-0 w-full h-full object-cover"
+            src="https://iconfont.alicdn.com/p/illus/preview_image/eZQFvSX6g8f1/70d91c51-e6b0-408c-84c5-50174d24a059.png"
+            alt={`${item.name}图片`}
+          />
+          {item.state == 0 && (
+            <>
+              <div className="absolute top-0 left-0 w-full h-full bg-white bg-opacity-30"></div>
+              <img
+                className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 z-10 w-1/2 h-auto"
+                src="http://picdown.jchysoft.com/uiIcon/weijiesuo.png"
+                alt="未解锁"
+              />
+            </>
+          )}
+        </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",
       },
     },
   },