's'

src/pages/index/index.jsx

@@ -2,7 +2,7 @@ import { Component } from "react";
 import Taro from "@tarojs/taro";
 import { View, Text, Image, Button, Audio } from "@tarojs/components";
 import "./index.scss";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
 import {
   AtList,
   AtListItem,
@@ -19,6 +19,7 @@ import doro11 from "../../images/doro11.gif";
 import baby from "../../images/baby.mp3";
 import confetti from "canvas-confetti";
 import { AtToast } from "taro-ui";
+import { userinfoArr } from "./userinfoArr";
 
 const Index = () => {
   // ws://（或者 wss:// 对于 HTTPS 环境
@@ -30,6 +31,9 @@ const Index = () => {
 
   const [messageArr, setMessageArr] = useState([]);
 
+  // 记录最后一次真实观众进场时间戳
+  const lastRealJoinTime = useRef(Date.now());
+
   // useEffect(() => {
   //   const intervalId = setInterval(() => {
   //     speak(`欢迎进入直播间`);
@@ -40,6 +44,44 @@ const Index = () => {
   //   };
   // }, []);
 
+  // 随机取一个观众
+  const getRandomUser = () => {
+    const randomIndex = Math.floor(Math.random() * userinfoArr.length);
+    return {
+      ...userinfoArr[randomIndex],
+      animate: true,
+      uid: Date.now() + Math.random(),
+    };
+  };
+
+  // 3秒检测一次是否无人，插入假观众
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = Date.now();
+      if (now - lastRealJoinTime.current > 10000) {
+        // 超过10秒无人进入
+        const fakeUser = getRandomUser();
+        console.log("⚠️ 3秒无人进入，插入假观众:", fakeUser.nick_name);
+
+        setuserInfoArr((prev) => [fakeUser, ...prev]);
+        speak(`欢迎${fakeUser.nick_name} 进入直播间`);
+
+        setTimeout(() => {
+          setuserInfoArr((prev) =>
+            prev.map((u) =>
+              u.uid === fakeUser.uid ? { ...u, animate: false } : u
+            )
+          );
+        }, 1000);
+
+        // 重置 lastRealJoinTime 防止一直插入假观众
+        lastRealJoinTime.current = Date.now();
+      }
+    }, 6000);
+
+    return () => clearInterval(interval);
+  }, []);
 
   const confettiSvg = () => {
     var scalar = 2;
@@ -143,7 +185,18 @@ const Index = () => {
             uid: Date.now() + Math.random(), // 确保唯一
           };
           console.log("✅ 新观众进场:", user);
-          setuserInfoArr((prev) => [user, ...prev]);
+          // 更新真实观众进场时间
+          lastRealJoinTime.current = Date.now();
+
+          // setuserInfoArr((prev) => [user, ...prev]);
+          // 更新 state
+          setuserInfoArr((prev) => {
+            const updated = [user, ...prev];
+
+            // 同步到 localStorage
+            localStorage.setItem("userInfoArr", JSON.stringify(updated));
+            return updated;
+          });
           setTimeout(() => {
             setuserInfoArr((prev) =>
               prev.map((u) =>
@@ -153,7 +206,7 @@ const Index = () => {
           }, 1000);
 
           // ✅ 举例使用
-          // speak(`欢迎${user?.nick_name} 进入直播间`);
+          speak(`欢迎${user?.nick_name} 进入直播间`);
         } else if (data.type === "like") {
           const user = data.data;
           // 粒子特效
@@ -163,7 +216,7 @@ const Index = () => {
           stars();
           const user = data.data;
           // console.log("✅ 送礼:", user);
-          // speak(`谢谢${user?.nick_name} 送小星星`);
+          speak(`谢谢${user?.nick_name} 送小星星`);
           //特殊特效
           setGiftUser(user);
           setGiftOpen(true);
@@ -307,7 +360,7 @@ const Index = () => {
     <View className="index">
       <View
         className="giftKey"
-        style={{ color: "white", marginBottom: "20px", marginTop: "100px" }}
+        style={{ color: "white", marginBottom: "20px", marginTop: "200px" }}
       >
         {/* <View>
           👍 <span style={{ fontSize: "10px" }}>{`点赞`} </span>&nbsp; ➖{" "}
@@ -322,21 +375,50 @@ const Index = () => {
       <View className="userInfoArr">
         {/* .slice(0, 5) */}
         {userInfoArr?.map((item, index) => (
+          // <View
+          //   key={index}
+          //   className={index === 0 ? "message_item_first" : "message_item"}
+          // >
+          //   <span style={{ color: "white", marginTop: "20px" }}>
+          //     {/* ${item?.gender === "1" ? "👨" : "👩"} */}
+          //     {`${item?.nick_name}`}
+          //   </span>
+          //   <View
+          //     className={`avatar_box ${
+          //       item.animate ? "animate__animated animate__tada" : ""
+          //     }`}
+          //   >
+          //     <Image
+          //       className="avatar_thumb"
+          //       style="width:200px;height:200px"
+          //       mode="scaleToFill"
+          //       src={item?.avatar_thumb.url_list_list?.[0]}
+          //     />
+          //   </View>
+          // </View>
           <View
             key={index}
             className={index === 0 ? "message_item_first" : "message_item"}
+            style={{ whiteSpace: "pre-wrap", textAlign: "center" }} // 允许文字换行，文字居中
+          >
+            <span
+              style={{ color: "white", marginTop: "20px", display: "block" }}
             >
-            <span style={{ color: "white", marginTop: "20px" }}>
-              {/* ${item?.gender === "1" ? "👨" : "👩"} */}
               {`${item?.nick_name}`}
             </span>
             <View
               className={`avatar_box ${
                 item.animate ? "animate__animated animate__tada" : ""
               }`}
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginTop: 10,
+              }} // 图片居中
             >
               <Image
                 className="avatar_thumb"
+                style={{ width: 200, height: 200 }}
                 mode="scaleToFill"
                 src={item?.avatar_thumb.url_list_list?.[0]}
               />
@@ -366,7 +448,7 @@ const Index = () => {
             送🩷🩷🩷🩷🩷
           </span>
           <Image
-            style="width:200px;height:200px"
+            style="width:300px;height:300px"
             src={giftUser?.avatar_thumb?.url_list_list?.[0]}
           />
         </div>

src/pages/index/index.scss

@@ -85,9 +85,11 @@
 
     // width: 100vw; // 使容器宽度始终填满视口
     // height: 100vh; // 使容器高度始终填满视口
-    transform: rotate(-90deg) translate(-100vh, 0);
 
+    // 旋转90度
+    transform: rotate(-90deg) translate(-100vh, 0);
     transform-origin: top left;
+
     display: flex;
     flex-direction: column;
     align-items: center;