fix: 录音中 暂停语音播放

projects/translate-h5/src/api/getDialog.ts

@@ -0,0 +1,39 @@
+import useAxios from "axios-hooks";
+import { Result } from "@/types/http";
+
+export interface MockResult {
+  id: number;
+}
+
+export interface MockPage {
+  id: number;
+}
+
+/**
+ * fetch the data
+ * 详细使用可以查看 useAxios 的文档
+ */
+export const useGetDialog = () => {
+  const url = `/app-api/ai/dialog/getDialog`;
+
+  const [{ data, loading, error }, execute] = useAxios<Result<any>>(
+    {
+      url,
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+    { manual: true } // 手动触发
+  );
+
+  const getDialog = () => {
+    return execute({
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  };
+
+  return { data, loading, error, getDialog };
+};

projects/translate-h5/src/api/translate.ts

@@ -1,5 +1,5 @@
 import useAxios from "axios-hooks";
-import { Page, Result } from "@/types/http";
+import { Result } from "@/types/http";
 
 export interface MockResult {
   id: number;
@@ -14,7 +14,7 @@ export interface MockPage {
  * 详细使用可以查看 useAxios 的文档
  */
 export const useUploadAudio = () => {
-  const url = `/app-api/ai/sample/translate`;
+  const url = `/app-api/ai/dialog/translate`;
 
   const [{ data, loading, error }, execute] = useAxios<Result<any>>(
     {

projects/translate-h5/src/http/axios-instance.ts

@@ -46,6 +46,9 @@ class AxiosInstance {
     return this.instance;
   }
 }
-
+console.log(import.meta.env.VITE_BASE_URL, "import.meta.env.VITE_BASE_URL");
-const baseURL = import.meta.env.VITE_BASE_URL || "http://192.168.1.231:48080";
+// https://petshy.tashowz.com
+//192.168.1.231:48080
+// || "http://192.168.1.231:48080"
+const baseURL = import.meta.env.VITE_BASE_URL || "https://petshy.tashowz.com";
 export const axiosInstance = new AxiosInstance(baseURL).getInstance();

projects/translate-h5/src/index.css

@@ -91,12 +91,13 @@ img {
 
     --adm-font-size-main: var(--adm-font-size-5); */
 
-  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue",
+  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial,
-    helvetica, segoe ui, arial, roboto, "PingFang SC", "miui",
+    roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
-    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
 }
 .i-icon {
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 svg {
   height: 100%;

projects/translate-h5/src/layout/main/mainLayout.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { NavBar, SafeArea, Toast } from "antd-mobile";
+import { NavBar, SafeArea } from "antd-mobile";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
-import { User, CattleZodiac, Right } from "@icon-park/react";
 import "./index.less";
 
 interface MainLayoutProps {
@@ -49,7 +48,6 @@ const MainLayout: React.FC<MainLayoutProps> = ({
   const goBack = () => {
     // 打印路由栈
 
-
     // debugger;
     if (onLink) {
       onLink?.();

projects/translate-h5/src/main.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "@/view/app/App.tsx";

projects/translate-h5/src/route/render-routes.tsx

@@ -1,4 +1,4 @@
-import { Route, RouterProvider, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import { routes, AppRoute } from "./routes";
 import AuthRoute from "./auth.tsx";
 import { Suspense } from "react";

projects/translate-h5/src/route/routes.tsx

@@ -1,6 +1,5 @@
-import { createBrowserRouter, Navigate } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { lazy } from "react";
-import { type Router } from "react-router-dom";
 
 export interface AppRoute {
   path: string;

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

@@ -1,15 +1,15 @@
 import MainLayout from "@/layout/main/mainLayout";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Divider, Space } from "antd-mobile";
 import Translate from "./translate/index";
 import { Electrocardiogram, Filter, GithubOne, HamburgerButton } from "@icon-park/react";
 import { useNavigate } from "react-router-dom";
-import { useSafeNavigate } from "@workspace/hooks";
+// import { useSafeNavigate } from "@workspace/hooks";
 import "./index.less";
 
 function Index() {
   const [visible, setVisible] = useState<boolean>(false);
-  const safeNavigate = useSafeNavigate();
+  // const safeNavigate = useSafeNavigate();
   const navigate = useNavigate();
 
   const onLink = (link: string) => {

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

@@ -1,15 +1,14 @@
 import { useEffect, useRef, useState } from "react";
-import { Divider, Image, 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";
 
 interface DefinedProps {
   data: Message[];
   isRecording: boolean;
+  onRefresh: (formData: FormData, messageId: number) => void;
 }
 
 function Index(props: DefinedProps) {
@@ -19,128 +18,112 @@ function Index(props: DefinedProps) {
   const [currentPlayingId, setCurrentPlayingId] = useState<number>();
 
   useEffect(() => {
-    if (isRecording) {
+    if (isRecording && currentPlayingId) {
-      stopAllAudio();
+      audioRefs.current[currentPlayingId].pause();
+      audioRefs.current[currentPlayingId].currentTime = 0;
+      setCurrentPlayingId(undefined);
     }
-  }, [isRecording]);
+  }, [isRecording, currentPlayingId]);
-  const onVoiceChange = () => {
+
-    setIsPlating(!isPlaying);
+  const playAudio = (id: number, audioUrl: string) => {
-  };
-  const playAudio = (messageId: number, audioUrl: string) => {
     if (isRecording) {
       Toast.show("录音中，无法播放音频");
       return;
     }
-
-    if (currentPlayingId === messageId) {
-      if (audioRefs.current[messageId]) {
-        audioRefs.current[messageId].pause();
-        audioRefs.current[messageId].currentTime = 0;
-      }
-      setCurrentPlayingId(undefined);
-      setIsPlating(false);
-      return;
-    }
-
-    stopAllAudio();
-    if (!audioRefs.current[messageId]) {
-      audioRefs.current[messageId] = new Audio(audioUrl);
-    }
-
-    const audio = audioRefs.current[messageId];
-    audio.currentTime = 0;
-
-    audio.onended = () => {
-      setCurrentPlayingId(undefined);
-      setIsPlating(false);
-    };
-
-    audio.onerror = (error) => {
-      console.error("音频播放错误:", error);
-      Toast.show("音频播放失败");
-      setIsPlating(false);
-    };
-
-    audio
-      .play()
-      .then(() => {
-        setCurrentPlayingId(messageId);
-        setIsPlating(true);
-      })
-      .catch((error) => {
-        console.error("音频播放失败:", error);
-        Toast.show("音频播放失败");
-      });
-  };
-  const stopAllAudio = () => {
     if (currentPlayingId && audioRefs.current[currentPlayingId]) {
       audioRefs.current[currentPlayingId].pause();
       audioRefs.current[currentPlayingId].currentTime = 0;
-      setIsPlating(false);
+    }
+    if (currentPlayingId !== id) {
+      setCurrentPlayingId(id);
+      audioRefs.current[id] = new Audio(audioUrl);
+      audioRefs.current[id].play();
+      audioRefs.current[id].onended = () => {
+        setCurrentPlayingId(undefined);
+      };
+    } else {
+      audioRefs.current[id].pause();
+      audioRefs.current[id].currentTime = 0;
       setCurrentPlayingId(undefined);
     }
-
-    Object.values(audioRefs.current).forEach((audio) => {
-      if (!audio.paused) {
-        audio.pause();
-        audio.currentTime = 0;
-      }
-    });
   };
-  const renderAvatar = (type?: "pig" | "cat" | "dog") => {
+
-    if (type === "pig") {
+  const renderAvatar = (item: Message) => {
-      <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
+    return <Avatar src={item.petAvatar || ""} style={{ "--border-radius": "32px" }} />;
+  };
+
+  const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const formData = new FormData();
+    formData.append("msgId", messageId.toString());
+    props.onRefresh(formData, messageId);
+  };
+
+  const renderTranslateResult = (item: Message) => {
+    if (item.isTranslating) {
+      return (
+        <div className="translate">
+          <SpinLoading color="default" style={{ "--size": "12px" }} />
+          <span>翻译中...</span>
+        </div>
+      );
+    } else {
+      if (item.transStatus === 1) {
+        return item.transResult?.length ? (
+          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+            <span>{item.transResult}</span>
+          </Space>
+        ) : (
+          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+            <span>未知语句</span>
+            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+          </Space>
+        );
+      } else {
+        return (
+          <Space
+            justify={"between"}
+            className="translate"
+            style={{ verticalAlign: "middle" }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <span>翻译失败，请重试</span>
+            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+          </Space>
+        );
       }
-    if (type === "cat") {
-      return <Image src={catSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
     }
-    return <Image src={dogSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
   };
 
   return (
     <div className="message">
       {data.map((item, index) => (
-        <div className="item" key={index} onClick={() => playAudio(item.id, item.audioUrl)}>
+        <div className="item" key={index}>
-          {renderAvatar(item.type)}
+          {renderAvatar(item)}
+
           <div className="rig">
             <div>
-              <span className="name">{item.name}</span>
+              <span className="name">
+                {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
+              </span>
               <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-              <span className="">{item.timestamp}</span>
+              <span className="">{item.createTime}</span>
             </div>
-            <div className="voice-container">
+            <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
               <VoiceIcon
-                onChange={onVoiceChange}
+                // onChange={onVoiceChange}
-                isPlaying={isPlaying && currentPlayingId === item.id}
+                isPlaying={currentPlayingId === item.id}
               />
-              <div className="time">{item.duration}''</div>
+              <div className="time">{item.contentDuration}''</div>
             </div>
-            {item.isTranslating ? (
+            {renderTranslateResult(item)}
-              <div className="translate">
-                <SpinLoading color="default" style={{ "--size": "12px" }} />
-                <span>翻译中...</span>
-              </div>
-            ) : (
-              <div className="translate">{item.translatedText}</div>
-            )}
           </div>
         </div>
       ))}
 
-      <div className="item">
+      <div style={{ height: "80px", width: "100%" }}></div>
-        <div className="avatar"></div>
-        <div className="rig">
-          <div>
-            <span className="name">生无可恋喵</span>
-            <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-            <span className="">15:00</span>
-          </div>
-          <div className="voice-container">
-            <VoiceIcon isPlaying={false} />
-            <div className="tips">{isRecording ? "录制中..." : "轻点麦克风录制"}</div>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }

projects/translate-h5/src/view/home/translate/component/voice/index.less

@@ -1,11 +1,19 @@
 .voice-record {
-  position: relative;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 12px 0px;
   box-shadow: 1px 2px 4px 3px #eee;
+  // 不被挤压
+  flex-shrink: 0;
+  min-height: 100px; /* 添加 min-height 防止被压缩 */
+  height: 100px; /* 保持原始高度 */
+  flex-basis: 100px; /* 明确指定基础大小，防止 flex 缩放影响 */
   .adm-progress-circle-info {
     height: 32px;
   }

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

@@ -1,20 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
 import { Button, Dialog, Image, ProgressCircle, Toast } from "antd-mobile";
 import microphoneSvg from "@/assets/translate/microphone.svg";
 import microphoneDisabledSvg from "@/assets/translate/microphoneDisabledSvg.svg";
 import { createStartRecordSound, createSendSound } from "@/utils/voice";
-import "./index.less";
-import { useUploadAudio } from "@/api/translate";
 import VConsole from "vconsole";
+import "./index.less";
 interface DefinedProps {
-  onRecordingComplete: (url: string, finalDuration: number) => void;
+  onRecordingComplete: (url: string, finalDuration: number, formData: FormData) => void;
   isRecording: boolean;
   onSetIsRecording: (flag: boolean) => void;
+  dialogId: number;
 }
 function Index(props: DefinedProps) {
-  const { isRecording } = props;
+  const { isRecording, dialogId } = props;
-  const { loading: uploadLoading, error: uploadError, uploadAudio } = useUploadAudio();
   const [hasPermission, setHasPermission] = useState<boolean>(false); //是否有权限
   const [isPermissioning, setIsPermissioning] = useState<boolean>(true); //获取权限中
   const [recordingDuration, setRecordingDuration] = useState<number>(0); //录音时长进度
@@ -36,12 +35,12 @@ function Index(props: DefinedProps) {
     checkMicrophonePermission();
   }, [hasPermission]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (isRecording) {
+  //   if (isRecording) {
-      recorderControls.startRecording();
+  //     recorderControls.startRecording();
-    } else {
+  //   } else {
-    }
+  //   }
-  }, [isRecording]);
+  // }, [isRecording]);
 
   //重置状态
   const onResetRecordingState = () => {
@@ -67,18 +66,35 @@ function Index(props: DefinedProps) {
       console.error("音效初始化失败:", error);
     }
   };
-  const handleUploadAudio = async (formData: FormData) => {
+  //开始录音
-    // 打印FormData内容
+  const onStartRecording = () => {
-
+    isCancelledRef.current = false;
-    console.log(formData);
+    if (recordingTimerRef.current) {
-    try {
+      clearInterval(recordingTimerRef.current);
-      const response = await uploadAudio(formData);
+      recordingTimerRef.current = undefined;
-      console.log("上传成功:", response.data);
-    } catch (error) {
-      console.error("上传失败:", error);
     }
+    props.onSetIsRecording(true);
+    recorderControls.startRecording();
+    recordingStartTimeRef.current = Date.now();
+    // 立即开始计时
+    recordingTimerRef.current = setInterval(() => {
+      setRecordingDuration((prev) => prev + 1);
+    }, 1000);
   };
-  const renderBtn = useCallback(() => {
+  // 使用 useMemo 缓存 Image 组件
+  const MicrophoneImage = useMemo(
+    () => (
+      <Image
+        height={80}
+        width={80}
+        src={microphoneSvg}
+        onClick={onStartRecording}
+        placeholder={<div style={{ width: 80, height: 80 }} />} // 添加占位符
+      />
+    ),
+    [microphoneSvg, onStartRecording]
+  );
+  const renderBtn = () => {
     if (!hasPermission) {
       //没有权限
       return (
@@ -107,10 +123,9 @@ function Index(props: DefinedProps) {
         </div>
       );
     } else {
-      //麦克风状态
+      return MicrophoneImage;
-      return <Image height={80} width={80} src={microphoneSvg} onClick={onStartRecording} />;
     }
-  }, [hasPermission, isRecording, recordingDuration]);
+  };
   const checkMicrophonePermission = useCallback(async () => {
     try {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -206,25 +221,79 @@ function Index(props: DefinedProps) {
     }
   };
 
-  //开始录音
+  // 添加音频转换函数
-  const onStartRecording = () => {
+  const convertToWav = async (blob: Blob): Promise<Blob> => {
-    isCancelledRef.current = false;
+    const arrayBuffer = await blob.arrayBuffer();
-    if (recordingTimerRef.current) {
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-      clearInterval(recordingTimerRef.current);
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      recordingTimerRef.current = undefined;
+
-    }
+    // 转换为 WAV 格式
-    props.onSetIsRecording(true);
+    const wavBuffer = audioBufferToWav(audioBuffer);
-    // recorderControls.startRecording();
+    return new Blob([wavBuffer], { type: "audio/wav" });
-    recordingStartTimeRef.current = Date.now();
-    // 立即开始计时
-    recordingTimerRef.current = setInterval(() => {
-      setRecordingDuration((prev) => prev + 1);
-    }, 1000);
   };
+
+  // WAV 转换辅助函数
+  const audioBufferToWav = (buffer: AudioBuffer): ArrayBuffer => {
+    const length = buffer.length;
+    const numberOfChannels = buffer.numberOfChannels;
+    const sampleRate = buffer.sampleRate;
+    const bitsPerSample = 16;
+    const byteRate = (sampleRate * numberOfChannels * bitsPerSample) / 8;
+    const blockAlign = (numberOfChannels * bitsPerSample) / 8;
+    const dataSize = length * numberOfChannels * (bitsPerSample / 8);
+    const bufferLength = 44 + dataSize;
+    const arrayBuffer = new ArrayBuffer(bufferLength);
+    const view = new DataView(arrayBuffer);
+    // RIFF identifier
+    writeString(view, 0, "RIFF");
+    // file length
+    view.setUint32(4, 36 + dataSize, true);
+    // RIFF type
+    writeString(view, 8, "WAVE");
+    // format chunk identifier
+    writeString(view, 12, "fmt ");
+    // format chunk length
+    view.setUint32(16, 16, true);
+    // sample format (raw)
+    view.setUint16(20, 1, true);
+    // channel count
+    view.setUint16(22, numberOfChannels, true);
+    // sample rate
+    view.setUint32(24, sampleRate, true);
+    // byte rate (sample rate * block align)
+    view.setUint32(28, byteRate, true);
+    // block align (channel count * bytes per sample)
+    view.setUint16(32, blockAlign, true);
+    // bits per sample
+    view.setUint16(34, bitsPerSample, true);
+    // data chunk identifier
+    writeString(view, 36, "data");
+    // data chunk length
+    view.setUint32(40, dataSize, true);
+
+    // write the PCM samples
+    let offset = 44;
+    for (let i = 0; i < length; i++) {
+      for (let channel = 0; channel < numberOfChannels; channel++) {
+        const sample = Math.max(-1, Math.min(1, buffer.getChannelData(channel)[i]));
+        view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
+        offset += 2;
+      }
+    }
+    return arrayBuffer;
+  };
+
+  const writeString = (view: DataView, offset: number, string: string) => {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  };
+
   const onStopRecording = useCallback(() => {
     recorderControls.stopRecording();
     onResetRecordingState();
   }, [recorderControls, recordingDuration]);
+
   //录音完成
   // 在发送时检查录音时长
   const onRecordingComplete = useCallback(
@@ -233,30 +302,32 @@ function Index(props: DefinedProps) {
         Toast.show("已取消");
         return;
       }
+
       // 检查blob有效性
       if (!blob || blob.size === 0) {
         Toast.show("录音数据无效，请重新录音");
-
         return;
       }
-      const formData = new FormData();
+      const arrayBuffer = await blob.arrayBuffer();
-      formData.append("file", blob);
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      await handleUploadAudio(formData);
+      const accurateDuration = audioBuffer.duration;
-      const audioUrl = URL.createObjectURL(blob);
+      if (accurateDuration < 1) {
-      const audio = new Audio();
-      audio.src = audioUrl;
-      // 计算实际录音时长
-
-      audio.addEventListener("loadedmetadata", () => {
-        if (audio.duration < 1) {
         Toast.show("录音时间太短，请重新录音");
         return;
       }
-        // alert(audio.duration);
+      // 转换为 WAV 格式以获得最佳兼容性
+      const wavBlob = await convertToWav(blob);
+      const formData: FormData = new FormData();
+      formData.append("file", wavBlob, new Date().getTime() + ".wav");
+      formData.append("dialogId", `${dialogId}`);
+      const audioUrl = URL.createObjectURL(blob);
+      const audio = new Audio();
+      audio.src = audioUrl;
       playSound(sendSoundRef);
-        props.onRecordingComplete?.(audioUrl, Math.floor(audio.duration));
+      const contentDuration = Math.round(accurateDuration);
-      });
+      formData.append("contentDuration", `${contentDuration}`);
+      props.onRecordingComplete?.(audioUrl, contentDuration, formData);
     },
     [isCancelledRef, isRecording, sendSoundRef]
   );

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

@@ -2,10 +2,11 @@ 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";
 
-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,31 +27,71 @@ 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 [_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 {
+      // 这里替换为实际的API调用
+      // const response = await fetch('/api/messages');
+      const response = await getDialog();
+      const initialMessages: Message[] = response.data?.data?.messages || [];
+
+      setDialogId(response.data?.data?.dialogId);
+      setMessages(initialMessages);
+    } catch (error) {
+      console.error("获取初始化数据失败:", error);
+      Toast.show("获取消息失败");
+      // 失败时设置为空数组
+      setMessages([]);
+    }
+  };
+
+  // 监听消息变化，自动滚动到底部
+  useEffect(() => {
+    if (messages.length > 0) {
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+    }
+  }, [messages, scrollToBottom]);
+
   //完成录音
   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",
+        contentText: audioUrl,
-        audioUrl,
+        contentDuration: actualDuration,
-        name: "生无可恋喵",
-        duration: actualDuration,
-        timestamp: Date.now(),
         isTranslating: true,
       };
 
       setMessages((prev) => [...prev, newMessage]);
       setTimeout(() => {
-        onTranslateAudio(newMessage.id);
+        onTranslateAudio(formData, newMessage.id);
-      }, 1000);
+      }, 500);
 
       Toast.show("语音已发送");
     },
@@ -58,25 +100,52 @@ 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;
 
+        if (translatedData.data.transStatus) {
           setMessages((prev) =>
             prev.map((msg) =>
-            msg.id === messageId ? { ...msg, translatedText, isTranslating: false } : msg
+              msg.id === id
+                ? {
+                    ...msg,
+                    ...translatedData.data,
+                    isTranslating: false,
+                    isRefresh: false,
+                  }
+                : msg
             )
           );
+        } else {
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === id
+                ? {
+                    ...msg,
+                    id: translatedData.data.id,
+                    petName: "未知宠物",
+                    transStatus: translatedData.data.transStatus,
+                    createTime: translatedData.data.createTime,
+                    isTranslating: false,
+                    isRefresh: false,
+                  }
+                : msg
+            )
+          );
+        }
       } catch (error) {
         console.error("翻译失败:", error);
         Toast.show("翻译失败，请重试");
 
         setMessages((prev) =>
           prev.map((msg) =>
-            msg.id === messageId
+            msg.id === id
               ? {
                   ...msg,
                   isTranslating: false,
+                  isRefresh: false,
                   translatedText: "翻译失败，请重试",
                 }
               : msg
@@ -87,17 +156,32 @@ function Index(props: DefinedProps) {
     [messages]
   );
 
+  const refreshMessages = (formData: FormData, messageId: number) => {
+    setMessages((prev) =>
+      prev.map((msg) =>
+        msg.id === messageId
+          ? {
+              ...msg,
+              isTranslating: true,
+              isRefresh: true,
+            }
+          : msg
+      )
+    );
+    onTranslateAudio(formData, messageId);
+  };
+
   const onSetIsRecording = (flag: boolean) => {
     setIsRecording(flag);
   };
 
-  const onLanguage = (item: FloatMenuItemConfig) => {
+  // const onLanguage = (item: FloatMenuItemConfig) => {
-    if (item.type === "add") {
+  //   if (item.type === "add") {
-      setVisible(true);
+  //     setVisible(true);
-    } else {
+  //   } else {
-      setCurrentLanguage(item);
+  //     setCurrentLanguage(item);
-    }
+  //   }
-  };
+  // };
 
   return (
     <div className="translate-container">
@@ -107,13 +191,41 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
-      <MessageCom data={messages} isRecording={isRecording}></MessageCom>
+      {/* <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}
         isRecording={isRecording}
         onSetIsRecording={onSetIsRecording}
       />
-      <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} />
+      {/* <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} /> */}
       <XPopup
         title="选择翻译语种"
         visible={visible}

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

@@ -1,12 +1,15 @@
 export interface Message {
   id: number;
-  type?: "dog" | "cat" | "pig";
+  petType?: "dog" | "cat" | "pig" | "";
-  audioUrl: string;
+  contentText: string;
-  name: string; //名字
+  petName?: string; //名字
-  duration: number; //时长
+  contentDuration: number; //时长
-  timestamp: number; //时间
+  createTime?: number; //时间
-  translatedText?: string;
+  transResult?: string;
   isTranslating?: boolean;
-  avatar?: string;
+  petAvatar?: string;
   isPlaying?: boolean;
+  messageStatus?: 0 | 1;
+  transStatus?: 0 | 1;
+  isRefresh?: boolean;
 }

projects/translate-h5/vite.config.ts

@@ -5,14 +5,16 @@ import { inspectorServer } from "@react-dev-inspector/vite-plugin";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 export default defineConfig({
   // basicSsl()
-  plugins: [react()],
+  // target: "https://petshy.tashowz.com",
+  // http://192.168.1.231:48080
+  plugins: [react(), basicSsl()],
   server: {
     port: 3000,
     host: "0.0.0.0",
     open: true,
     proxy: {
       "/app-api": {
-        target: "http://192.168.1.231:48080",
+        target: "https://petshy.tashowz.com",
         changeOrigin: true,
       },
     },