feat: translate

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

@@ -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

@@ -47,5 +47,5 @@ class AxiosInstance {
   }
 }
 
-const baseURL = import.meta.env.VITE_BASE_URL || "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/types/http.d.ts

@@ -1,14 +1,14 @@
 interface Page<T> {
-    total: number;
-    size: number;
-    current: number;
-    pages: number;
-    records: T[];
+  total: number;
+  size: number;
+  current: number;
+  pages: number;
+  records: T[];
 }
 
 export interface Result<T> {
-    success: boolean;
-    code: number;
-    message: string;
-    data: T;
+  success: boolean;
+  code: number;
+  message: string;
+  data: T;
 }

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

@@ -6,10 +6,12 @@ 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) {
@@ -26,16 +28,16 @@ function Index(props: DefinedProps) {
   const onVoiceChange = () => {
     setIsPlating(!isPlaying);
   };
-  const playAudio = (messageId: number, audioUrl: string) => {
+  const playAudio = (id: number, audioUrl: string) => {
     if (isRecording) {
       Toast.show("录音中，无法播放音频");
       return;
     }
 
-    if (currentPlayingId === messageId) {
-      if (audioRefs.current[messageId]) {
-        audioRefs.current[messageId].pause();
-        audioRefs.current[messageId].currentTime = 0;
+    if (currentPlayingId === id && audioRefs.current[id]) {
+      if (audioRefs.current[id]) {
+        audioRefs.current[id].pause();
+        audioRefs.current[id].currentTime = 0;
       }
       setCurrentPlayingId(undefined);
       setIsPlating(false);
@@ -43,11 +45,11 @@ function Index(props: DefinedProps) {
     }
 
     stopAllAudio();
-    if (!audioRefs.current[messageId]) {
-      audioRefs.current[messageId] = new Audio(audioUrl);
+    if (!audioRefs.current[id]) {
+      audioRefs.current[id] = new Audio(audioUrl);
     }
 
-    const audio = audioRefs.current[messageId];
+    const audio = audioRefs.current[id];
     audio.currentTime = 0;
 
     audio.onended = () => {
@@ -55,8 +57,24 @@ function Index(props: DefinedProps) {
       setIsPlating(false);
     };
 
-    audio.onerror = (error) => {
-      console.error("音频播放错误:", error);
+    audio.onerror = () => {
+      const error = audio.error;
+      switch (error?.code) {
+        case MediaError.MEDIA_ERR_ABORTED:
+          console.warn("音频播放被用户中断");
+          break;
+        case MediaError.MEDIA_ERR_NETWORK:
+          console.warn("网络错误，无法加载音频");
+          break;
+        case MediaError.MEDIA_ERR_DECODE:
+          console.warn("解码失败，可能是格式不支持");
+          break;
+        case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+          console.warn("浏览器不支持该音频格式");
+          break;
+        default:
+          console.warn("未知错误");
+      };
       Toast.show("音频播放失败");
       setIsPlating(false);
     };
@@ -64,7 +82,7 @@ function Index(props: DefinedProps) {
     audio
       .play()
       .then(() => {
-        setCurrentPlayingId(messageId);
+        setCurrentPlayingId(id);
         setIsPlating(true);
       })
       .catch((error) => {
@@ -87,7 +105,7 @@ function Index(props: DefinedProps) {
       }
     });
   };
-  const renderAvatar = (type?: "pig" | "cat" | "dog") => {
+  const renderAvatar = (type?: "pig" | "cat" | "dog" | "") => {
     if (type === "pig") {
       <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
     }
@@ -97,31 +115,43 @@ function Index(props: DefinedProps) {
     return <Image src={dogSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
   };
 
+  const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const formData = new FormData();
+    formData.append("msgId", messageId.toString());
+    props.onRefresh(formData, messageId);
+  };
+
   return (
     <div className="message">
       {data.map((item, index) => (
-        <div className="item" key={index} onClick={() => playAudio(item.id, item.audioUrl)}>
-          {renderAvatar(item.type)}
+        <div className="item" key={index} onClick={() => playAudio(item.id, item.contentText)}>
+          {renderAvatar(item.petType)}
           <div className="rig">
             <div>
-              <span className="name">{item.name}</span>
+              <span className="name">{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">
               <VoiceIcon
                 onChange={onVoiceChange}
                 isPlaying={isPlaying && currentPlayingId === item.id}
               />
-              <div className="time">{item.duration}''</div>
+              <div className="time">{item.contentDuration}''</div>
             </div>
             {item.isTranslating ? (
               <div className="translate">
                 <SpinLoading color="default" style={{ "--size": "12px" }} />
                 <span>翻译中...</span>
               </div>
+            ) : item.transStatus === 1 ? (
+              <div className="translate">{item.transResult ?? "暂无翻译结果"}</div>
             ) : (
-              <div className="translate">{item.translatedText}</div>
+              <div className="translate">
+                <span> 翻译失败，请重试</span>
+                <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+              </div>
             )}
           </div>
         </div>
@@ -141,6 +171,8 @@ function Index(props: DefinedProps) {
           </div>
         </div>
       </div>
+
+      <div style={{ height: "130px", width: "100%" }}></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

@@ -5,16 +5,16 @@ 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";
+
 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 { loading: _uploadLoading, error: _uploadError, uploadAudio } = useUploadAudio();
+  const { isRecording, dialogId } = props;
   const [hasPermission, setHasPermission] = useState<boolean>(false); //是否有权限
   const [isPermissioning, setIsPermissioning] = useState<boolean>(true); //获取权限中
   const [recordingDuration, setRecordingDuration] = useState<number>(0); //录音时长进度
@@ -67,17 +67,6 @@ function Index(props: DefinedProps) {
       console.error("音效初始化失败:", error);
     }
   };
-  const handleUploadAudio = async (formData: FormData) => {
-    // 打印FormData内容
-
-    console.log(formData);
-    try {
-      const response = await uploadAudio(formData);
-      console.log("上传成功:", response.data);
-    } catch (error) {
-      console.error("上传失败:", error);
-    }
-  };
   const renderBtn = useCallback(() => {
     if (!hasPermission) {
       //没有权限
@@ -239,10 +228,24 @@ function Index(props: DefinedProps) {
 
         return;
       }
-      const formData = new FormData();
-      formData.append("file", blob);
+      const formData: FormData = new FormData();
+      formData.append(
+        "file",
+        blob,
+        new Date().getTime() + "." + blob.type.split("/").pop()?.split(";")[0]
+      );
 
-      await handleUploadAudio(formData);
+      // 把demoWAV替换成blob
+
+      // const response = await fetch(demoWAV);
+      // const arrayBuffer = await response.arrayBuffer();
+      // const demoWAVBlob = new Blob([arrayBuffer], { type: "audio/wav" });
+
+      // formData.append("file", demoWAVBlob);
+      formData.append("dialogId", `${dialogId}`);
+
+      // await handleUploadAudio(formData);
+      // const audioUrl = URL.createObjectURL(demoWAVBlob);
       const audioUrl = URL.createObjectURL(blob);
       const audio = new Audio();
       audio.src = audioUrl;
@@ -255,7 +258,9 @@ function Index(props: DefinedProps) {
         }
         // alert(audio.duration);
         playSound(sendSoundRef);
-        props.onRecordingComplete?.(audioUrl, Math.floor(audio.duration));
+        const contentDuration = Math.floor(audio.duration);
+        formData.append("contentDuration", `${contentDuration}`);
+        props.onRecordingComplete?.(audioUrl, contentDuration, formData);
       });
     },
     [isCancelledRef, isRecording, sendSoundRef]

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}

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

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

projects/translate-h5/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
     open: true,
     proxy: {
       "/app-api": {
-        target: "http://192.168.1.231:48080",
+        target: "https://petshy.tashowz.com",
         changeOrigin: true,
       },
     },