feat: translate

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

@@ -4,8 +4,9 @@ import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
 import { XPopup, FloatingMenu, type FloatMenuItemConfig } from "@workspace/shared";
 import type { Message } from "../types";
+import { useGetDialog } from "@/api/getDialog";
+import { useUploadAudio } from "@/api/translate";
 
-import { mockTranslateAudio } from "@/utils/voice";
 import dogSvg from "@/assets/translate/dog.svg";
 import catSvg from "@/assets/translate/cat.svg";
 import pigSvg from "@/assets/translate/pig.svg";
@@ -14,6 +15,7 @@ import SearchCom from "./component/search";
 interface DefinedProps {
   searchVisible: boolean;
 }
+
 const menuItems: FloatMenuItemConfig[] = [
   { icon: <Image src={dogSvg} />, type: "dog" },
   { icon: <Image src={catSvg} />, type: "cat" },
@@ -25,30 +27,56 @@ const menuItems: FloatMenuItemConfig[] = [
 ];
 function Index(props: DefinedProps) {
   const { searchVisible } = props;
+  const { loading: _uploadLoading, error: _uploadError, getDialog } = useGetDialog();
+  const { loading: _audioLoading, error: _audioError, uploadAudio } = useUploadAudio();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isRecording, setIsRecording] = useState(false); //是否录音中
   const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
   const [visible, setVisible] = useState<boolean>(false);
+  const [dialogId, setDialogId] = useState<number>(0);
+
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
+
+    fetchInitialMessages();
   }, []);
 
+
+  // 添加初始化数据的逻辑
+  const fetchInitialMessages = async () => {
+    try {
+      // 这里替换为实际的API调用
+      // const response = await fetch('/api/messages');
+      const response = await getDialog();
+      // console.log(response);
+
+      const initialMessages: Message[] = response.data?.data?.messages || [];
+
+      setDialogId(response.data?.data?.dialogId);
+      setMessages(initialMessages);
+    } catch (error) {
+      console.error("获取初始化数据失败:", error);
+      Toast.show("获取消息失败");
+      // 失败时设置为空数组
+      setMessages([]);
+    }
+  };
+
   //完成录音
   const onRecordingComplete = useCallback(
-    (audioUrl: string, actualDuration: number) => {
+    (audioUrl: string, actualDuration: number, formData: FormData) => {
+      console.log(audioUrl, "audioUrl")
       const newMessage: Message = {
         id: Date.now(),
-        type: "dog",
-        audioUrl,
-        name: "生无可恋喵",
-        duration: actualDuration,
-        timestamp: Date.now(),
+        contentText: audioUrl,
+        petName: "匹配档案中。。。",
+        contentDuration: actualDuration,
         isTranslating: true,
       };
 
       setMessages((prev) => [...prev, newMessage]);
       setTimeout(() => {
-        onTranslateAudio(newMessage.id);
+        onTranslateAudio(formData, newMessage.id);
       }, 1000);
 
       Toast.show("语音已发送");
@@ -58,22 +86,45 @@ function Index(props: DefinedProps) {
 
   //翻译
   const onTranslateAudio = useCallback(
-    async (messageId: number) => {
+    async (formData: FormData, id: number) => {
       try {
-        const translatedText = await mockTranslateAudio();
+        const response = await uploadAudio(formData);
+        const translatedData = response.data;
+        console.log(translatedData, "translatedText");
 
-        setMessages((prev) =>
-          prev.map((msg) =>
-            msg.id === messageId ? { ...msg, translatedText, isTranslating: false } : msg
-          )
-        );
+        if (translatedData.data.transStatus) {
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === id
+                ? {
+                    ...msg,
+                    ...translatedData.data,
+                    isTranslating: false,
+                  }
+                : msg
+            )
+          );
+        } else {
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === id
+                ? {
+                    ...msg,
+                    id: translatedData.data.id,
+                    transStatus: translatedData.data.transStatus,
+                    isTranslating: false,
+                  }
+                : msg
+            )
+          );
+        }
       } catch (error) {
         console.error("翻译失败:", error);
         Toast.show("翻译失败，请重试");
 
         setMessages((prev) =>
           prev.map((msg) =>
-            msg.id === messageId
+            msg.id === id
               ? {
                   ...msg,
                   isTranslating: false,
@@ -87,6 +138,20 @@ function Index(props: DefinedProps) {
     [messages]
   );
 
+  const refreshMessages = (formData: FormData, messageId: number) => {
+    setMessages((prev) =>
+      prev.map((msg) =>
+        msg.id === messageId
+          ? {
+              ...msg,
+              isTranslating: true,
+            }
+          : msg
+      )
+    );
+    onTranslateAudio(formData, messageId);
+  };
+
   const onSetIsRecording = (flag: boolean) => {
     setIsRecording(flag);
   };
@@ -107,8 +172,13 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
-      <MessageCom data={messages} isRecording={isRecording}></MessageCom>
+      <MessageCom
+        data={messages}
+        isRecording={isRecording}
+        onRefresh={refreshMessages}
+      ></MessageCom>
       <VoiceRecord
+        dialogId={dialogId}
         onRecordingComplete={onRecordingComplete}
         isRecording={isRecording}
         onSetIsRecording={onSetIsRecording}