feat: anazi

src/pages/index/index.jsx

@@ -23,11 +23,19 @@ import {
 import { AtToast } from "taro-ui";
 import { AtIcon } from "taro-ui";
 import iphone from "../../images/iphone.jpg";
+import gif11 from "../../images/11.gif";
+import confetti from "canvas-confetti";
+import gif22 from "../../images/22.gif";
+import doro11 from "../../images/doro11.gif";
+
 import testmpkv from "../../images/test.mp4";
 
+
 const Index = () => {
   // ws://（或者 wss:// 对于 HTTPS 环境
   const [message, setMessage] = useState("");
+  const [status, setStatus] = useState("0"); //0无状态,1是小新
+
   const [messageArr, setMessageArr] = useState([]);
 
   useEffect(() => {
@@ -44,9 +52,23 @@ const Index = () => {
     socket.onmessage = (event) => {
       console.log("接收到消息:", event.data);
       setMessage(event.data); // 更新消息状态
+      if (event.data.includes("【聊天msg】")) {
+        if (event.data?.includes("11")) {
+          setStatus("1");
+          setTimeout(() => {
+            setStatus("0");
+          }, 1000); // 2秒后恢复
+        }
+        if (event.data?.includes("22")) {
+          setStatus("2");
+          setTimeout(() => {
+            setStatus("0");
+          }, 5000); // 2秒后恢复
+        }
+      }
       // TTS播放
-      // speak(event.data)
-      setMessageArr((messageArr) => [event.data,...messageArr]); // 更新消息数组
+      speak(event.data);
+      setMessageArr((messageArr) => [event.data, ...messageArr]); // 更新消息数组
     };
 
     // WebSocket 关闭时触发
@@ -108,17 +130,30 @@ const Index = () => {
 
   return (
     <View className="index">
+      <View>扣 <span style={{color:'green'}}>11</span> 变小新</View>
+      <View>扣 <span style={{color:'green'}}>22</span> 娜娜子</View>
+
       <View className="messageArr">
-      {messageArr.map((item, index) => (
-        <View key={index} className={index===0?"message_item_first":"message_item"}>
-          {item}
-        </View>
-      ))}
+        {messageArr?.slice(0, 15)?.map((item, index) => (
+          <View
+            key={index}
+            className={index === 0 ? "message_item_first" : "message_item"}
+          >
+            {item}
+          </View>
+        ))}
       </View>
 
       {/* 添加doro的gif组合场景 */}
 
-      
+      <View className="gifImg">
+        <Image
+          className="index_gif"
+          mode={"scaleToFill"}
+          src={status === "1" ? gif11 :status === "2" ?gif22:doro11}
+        />
+      </View>
+
       {/* <View className="index_backImg">
         <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
       </View> */}

src/pages/index/index.scss

@@ -4,7 +4,7 @@
   // overflow: hidden; // 防止溢出
   display: flex;
   flex-direction: column;
-  // align-items: center;
+  align-items: center;
   // justify-content: center;
   // background-image: url('../../images/iphone.jpg');
   // background-size: cover;        // 拉伸铺满容器
@@ -70,13 +70,15 @@
     transform-origin: top left;
     display: flex;
     flex-direction: column;
-    // align-items: center;
+    align-items: center;
     // justify-content: center;
-    background-image: url('../../images/iphone.jpg');
-    background-size: cover; // 拉伸铺满容器
-    background-position: center; // 居中
-    background-repeat: no-repeat; // 不重复
-    color: white;
+
+    // background-image: url('../../images/iphone.jpg');
+    // background-size: cover; // 拉伸铺满容器
+    // background-position: center; // 居中
+    // background-repeat: no-repeat; // 不重复
+    // color: white;
+    // background-color: black;
 
     .messageArr {
       // padding: 40px;