feat: 添加tabber

projects/translate-h5/src/view/home/translate/component/message/index.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Avatar, Divider, Space, SpinLoading, Toast } from "antd-mobile";
 import { VoiceIcon } from "@workspace/shared";
 import { Message } from "../../../types";
 import "./index.less";
 import { Refresh } from "@icon-park/react";
+import DefAvatar from "@/assets/translate/def-avatar.png";
 
 interface DefinedProps {
   data: Message[];
@@ -48,7 +49,7 @@ function Index(props: DefinedProps) {
   };
 
   const renderAvatar = (item: Message) => {
-    return <Avatar src={item.petAvatar || ""} style={{ "--border-radius": "32px" }} />;
+    return <Avatar src={item.petAvatar || DefAvatar} style={{ "--border-radius": "32px" }} />;
   };
 
   const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
@@ -107,7 +108,10 @@ function Index(props: DefinedProps) {
               <span className="name">
                 {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
               </span>
-              <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+
+              {!(item.isTranslating && !item.isRefresh) && (
+                <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+              )}
               <span className="">{item.createTime}</span>
             </div>
             <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
@@ -122,7 +126,7 @@ function Index(props: DefinedProps) {
         </div>
       ))}
 
-      <div style={{ height: "80px", width: "100%" }}></div>
+      <div style={{ height: "130px", width: "100%" }}></div>
     </div>
   );
 }

projects/translate-h5/src/view/home/translate/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Image, Toast } from "antd-mobile";
 import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
@@ -35,6 +35,15 @@ function Index(props: DefinedProps) {
   const [visible, setVisible] = useState<boolean>(false);
   const [dialogId, setDialogId] = useState<number>(0);
 
+  // 创建稳定化的消息字符串（排除 isTranslating 字段变化的影响）
+  const stableMessagesString = useMemo(() => {
+    const stableMessages = messages.map((msg) => {
+      const { isTranslating, isRefresh, ...rest } = msg;
+      return rest;
+    });
+    return JSON.stringify(stableMessages);
+  }, [messages]);
+
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
     fetchInitialMessages();
@@ -75,7 +84,7 @@ function Index(props: DefinedProps) {
         scrollToBottom();
       });
     }
-  }, [messages, scrollToBottom]);
+  }, [stableMessagesString, scrollToBottom]);
 
   //完成录音
   const onRecordingComplete = useCallback(