diff --git a/projects/translate-h5/src/assets/translate/archives-bottom.png b/projects/translate-h5/src/assets/translate/archives-bottom.png index 4ddddf8..b08e53c 100644 Binary files a/projects/translate-h5/src/assets/translate/archives-bottom.png and b/projects/translate-h5/src/assets/translate/archives-bottom.png differ diff --git a/projects/translate-h5/src/assets/translate/archives-equipment.png b/projects/translate-h5/src/assets/translate/archives-equipment.png index 2372ba6..8b1afea 100644 Binary files a/projects/translate-h5/src/assets/translate/archives-equipment.png and b/projects/translate-h5/src/assets/translate/archives-equipment.png differ diff --git a/projects/translate-h5/src/view/home/translate/component/message/index.tsx b/projects/translate-h5/src/view/home/translate/component/message/index.tsx index 16e5780..b10ae53 100644 --- a/projects/translate-h5/src/view/home/translate/component/message/index.tsx +++ b/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) {
- {item.petName} + + {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"} + {item.createTime}
@@ -204,7 +204,7 @@ function Index(props: DefinedProps) {
))} -
+
); } diff --git a/projects/translate-h5/src/view/home/translate/index.tsx b/projects/translate-h5/src/view/home/translate/index.tsx index e8a3f0b..1dbc3d3 100644 --- a/projects/translate-h5/src/view/home/translate/index.tsx +++ b/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([]); const [isRecording, setIsRecording] = useState(false); //是否录音中 - const [currentLanguage, setCurrentLanguage] = useState(); + const [_currentLanguage, setCurrentLanguage] = useState(); const [visible, setVisible] = useState(false); const [dialogId, setDialogId] = useState(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 (
@@ -169,11 +191,34 @@ function Index(props: DefinedProps) {
)} + {/*
scrollToBottom()}>111
*/} + + + {/*
+ +
+
*/} + + {/*
*/} +