feat: 修改bug

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

@@ -1,9 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Avatar, Divider, Image, Space, SpinLoading, Toast } from "antd-mobile";
+import { Avatar, Divider, Space, SpinLoading, Toast } from "antd-mobile";
 import { VoiceIcon } from "@workspace/shared";
-import dogSvg from "@/assets/translate/dog.svg";
-import catSvg from "@/assets/translate/cat.svg";
-import pigSvg from "@/assets/translate/pig.svg";
 import { Message } from "../../../types";
 import "./index.less";
 import { Refresh } from "@icon-park/react";
@@ -75,10 +72,10 @@ function Index(props: DefinedProps) {
         default:
           console.warn("未知错误");
       }
-      Toast.show("音频播放失败");
+      Toast.show("音频播放失败1111");
       setIsPlating(false);
     };
-
+    console.log("audio play", id);
     audio
       .play()
       .then(() => {
@@ -96,6 +93,7 @@ function Index(props: DefinedProps) {
       audioRefs.current[currentPlayingId].currentTime = 0;
       setIsPlating(false);
       setCurrentPlayingId(undefined);
+      return;
     }
 
     Object.values(audioRefs.current).forEach((audio) => {
@@ -162,7 +160,9 @@ function Index(props: DefinedProps) {
 
           <div className="rig">
             <div>
-              <span className="name">{item.petName}</span>
+              <span className="name">
+                {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
+              </span>
               <Divider direction="vertical" style={{ margin: "0px 8px" }} />
               <span className="">{item.createTime}</span>
             </div>
@@ -204,7 +204,7 @@ function Index(props: DefinedProps) {
         </div>
       ))}
 
-      <div style={{ height: "130px", width: "100%" }}></div>
+      <div style={{ height: "80px", width: "100%" }}></div>
     </div>
   );
 }

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Image, Toast } from "antd-mobile";
 import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
-import { XPopup, FloatingMenu, type FloatMenuItemConfig } from "@workspace/shared";
+import { XPopup, type FloatMenuItemConfig } from "@workspace/shared";
 import type { Message } from "../types";
 import { useGetDialog } from "@/api/getDialog";
 import { useUploadAudio } from "@/api/translate";
@@ -10,7 +10,7 @@ import { useUploadAudio } from "@/api/translate";
 import dogSvg from "@/assets/translate/dog.svg";
 import catSvg from "@/assets/translate/cat.svg";
 import pigSvg from "@/assets/translate/pig.svg";
-import { MoreTwo, Petrol } from "@icon-park/react";
+import { MoreTwo } from "@icon-park/react";
 import SearchCom from "./component/search";
 interface DefinedProps {
   searchVisible: boolean;
@@ -31,16 +31,25 @@ function Index(props: DefinedProps) {
   const { loading: _audioLoading, error: _audioError, uploadAudio } = useUploadAudio();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isRecording, setIsRecording] = useState(false); //是否录音中
-  const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
+  const [_currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
   const [visible, setVisible] = useState<boolean>(false);
   const [dialogId, setDialogId] = useState<number>(0);
 
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
-
     fetchInitialMessages();
   }, []);
 
+  // 滚动到底部
+  const scrollToBottom = useCallback(() => {
+    const container = document.querySelector(".message");
+
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+      console.log("container", container.scrollHeight);
+    }
+  }, []);
+
   // 添加初始化数据的逻辑
   const fetchInitialMessages = async () => {
     try {
@@ -59,6 +68,15 @@ function Index(props: DefinedProps) {
     }
   };
 
+  // 监听消息变化，自动滚动到底部
+  useEffect(() => {
+    if (messages.length > 0) {
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+    }
+  }, [messages, scrollToBottom]);
+
   //完成录音
   const onRecordingComplete = useCallback(
     (audioUrl: string, actualDuration: number, formData: FormData) => {
@@ -95,6 +113,7 @@ function Index(props: DefinedProps) {
                     ...msg,
                     ...translatedData.data,
                     isTranslating: false,
+                    isRefresh: false,
                   }
                 : msg
             )
@@ -110,6 +129,7 @@ function Index(props: DefinedProps) {
                     transStatus: translatedData.data.transStatus,
                     createTime: translatedData.data.createTime,
                     isTranslating: false,
+                    isRefresh: false,
                   }
                 : msg
             )
@@ -125,6 +145,7 @@ function Index(props: DefinedProps) {
               ? {
                   ...msg,
                   isTranslating: false,
+                  isRefresh: false,
                   translatedText: "翻译失败，请重试",
                 }
               : msg
@@ -142,6 +163,7 @@ function Index(props: DefinedProps) {
           ? {
               ...msg,
               isTranslating: true,
+              isRefresh: true,
             }
           : msg
       )
@@ -153,13 +175,13 @@ function Index(props: DefinedProps) {
     setIsRecording(flag);
   };
 
-  const onLanguage = (item: FloatMenuItemConfig) => {
-    if (item.type === "add") {
-      setVisible(true);
-    } else {
-      setCurrentLanguage(item);
-    }
-  };
+  // const onLanguage = (item: FloatMenuItemConfig) => {
+  //   if (item.type === "add") {
+  //     setVisible(true);
+  //   } else {
+  //     setCurrentLanguage(item);
+  //   }
+  // };
 
   return (
     <div className="translate-container">
@@ -169,11 +191,34 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
+      {/* <div onClick={() => scrollToBottom()}>111</div> */}
+
       <MessageCom
         data={messages}
         isRecording={isRecording}
         onRefresh={refreshMessages}
       ></MessageCom>
+
+      {/* <div
+        className="message-container"
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <MessageCom
+          data={messages}
+          isRecording={isRecording}
+          onRefresh={refreshMessages}
+        ></MessageCom>
+        <div ref={messagesEndRef} style={{ float: "left", clear: "both", height: "1px" }} />
+      </div> */}
+
+      {/* <div className="he" ref={messagesEndRef} /> */}
+
       <VoiceRecord
         dialogId={dialogId}
         onRecordingComplete={onRecordingComplete}

projects/translate-h5/src/view/home/types.ts

@@ -11,4 +11,5 @@ export interface Message {
   isPlaying?: boolean;
   messageStatus?: 0 | 1;
   transStatus?: 0 | 1;
+  isRefresh?: boolean;
 }