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
*/}
+
+
+ {/* */}
+
+ {/* */}
+