From 4471055273951c493d8b2be40f0ffd9446ff8693 Mon Sep 17 00:00:00 2001
From: "WLT\\Eric.hu" <Eric.hu@zerofinance.com>
Date: Mon, 14 Apr 2025 15:49:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.jsx  | 29 ++++++++++++++++++++---------
 src/pages/index/index.scss | 33 +++++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 451a40c..cf234a9 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -27,31 +27,34 @@ import testmpkv from "../../images/test.mp4";
 
 const Index = () => {
   // ws://（或者 wss:// 对于 HTTPS 环境
-  const [message, setMessage] = useState('11');
+  const [message, setMessage] = useState("");
+  const [messageArr, setMessageArr] = useState([]);
+
   useEffect(() => {
     // 创建 WebSocket 连接
-    const socket = new WebSocket('ws://127.0.0.1:8888'); // 注意使用 ws://
+    const socket = new WebSocket("ws://127.0.0.1:8888"); // 注意使用 ws://
 
     // WebSocket 打开时触发
     socket.onopen = () => {
-      console.log('WebSocket 连接已建立');
-      socket.send('Hello from the client!');
+      console.log("WebSocket 连接已建立");
+      // socket.send('Hello from the client!');
     };
 
     // WebSocket 接收到消息时触发
     socket.onmessage = (event) => {
-      console.log('接收到消息:', event.data);
+      console.log("接收到消息:", event.data);
       setMessage(event.data); // 更新消息状态
+      setMessageArr((messageArr) => [event.data,...messageArr]); // 更新消息数组
     };
 
     // WebSocket 关闭时触发
     socket.onclose = () => {
-      console.log('WebSocket 连接已关闭');
+      console.log("WebSocket 连接已关闭");
     };
 
     // WebSocket 错误时触发
     socket.onerror = (error) => {
-      console.error('WebSocket 错误:', error);
+      console.error("WebSocket 错误:", error);
     };
 
     // 清理 WebSocket 连接
@@ -59,7 +62,6 @@ const Index = () => {
       socket.close();
     };
   }, []);
-  
 
   // TTS播放语言
   const speak = (text) => {
@@ -99,9 +101,18 @@ const Index = () => {
     // speak("欢迎使用"); // 语音播报
   }, []);
 
+  // 在线测试地址
+  // http://wstool.jackxiang.com/
+
   return (
     <View className="index">
-    <View>{message}</View>
+      <View className="messageArr">
+      {messageArr.map((item, index) => (
+        <View key={index} className="message_item">
+          {item}
+        </View>
+      ))}
+      </View>
       {/* <View className="index_backImg">
         <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
       </View> */}
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 89fd423..4be63ca 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -4,13 +4,24 @@
   // overflow: hidden; // 防止溢出
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  // align-items: center;
+  // justify-content: center;
   // background-image: url('../../images/iphone.jpg');
   // background-size: cover;        // 拉伸铺满容器
   // background-position: center;   // 居中
   // background-repeat: no-repeat;  // 不重复
 
+  .messageArr{
+    padding: 40px;
+    font-size: 30px;
+      display: flex;
+  flex-direction: column;
+    .message_item{
+   
+    }
+  }
+ 
+
   .index_backImg {
     width: 100%;
     height: 100%;
@@ -55,12 +66,26 @@
     transform-origin: top left;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: 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;
+
+    .messageArr{
+      // padding: 40px;
+      font-size: 40px;
+      display: flex;
+      flex-direction: column;
+          align-items: center;
+    justify-content: center;
+      .message_item{
+     
+      }
+    }
+   
 
     .index_backImg {
       width: 100%;