feat: init

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

@@ -0,0 +1,136 @@
+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 type { Message } from "../types";
+
+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";
+import { MoreTwo } from "@icon-park/react";
+import SearchCom from "./component/search";
+interface DefinedProps {
+  searchVisible: boolean;
+}
+const menuItems: FloatMenuItemConfig[] = [
+  { icon: <Image src={dogSvg} />, type: "dog" },
+  { icon: <Image src={catSvg} />, type: "cat" },
+  { icon: <Image src={pigSvg} />, type: "pig" },
+  {
+    icon: <MoreTwo theme="outline" size="24" fill="#666" strokeWidth={3} strokeLinecap="butt" />,
+    type: "add",
+  },
+];
+function Index(props: DefinedProps) {
+  const { searchVisible } = props;
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isRecording, setIsRecording] = useState(false); //是否录音中
+  const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
+  const [visible, setVisible] = useState<boolean>(false);
+  useEffect(() => {
+    setCurrentLanguage(menuItems[0]);
+  }, []);
+
+  //完成录音
+  const onRecordingComplete = useCallback(
+    (audioUrl: string, actualDuration: number) => {
+      const newMessage: Message = {
+        id: Date.now(),
+        type: "dog",
+        audioUrl,
+        name: "生无可恋喵",
+        duration: actualDuration,
+        timestamp: Date.now(),
+        isTranslating: true,
+      };
+
+      setMessages((prev) => [...prev, newMessage]);
+      setTimeout(() => {
+        onTranslateAudio(newMessage.id);
+      }, 1000);
+
+      Toast.show("语音已发送");
+    },
+    [messages]
+  );
+
+  //翻译
+  const onTranslateAudio = useCallback(
+    async (messageId: number) => {
+      try {
+        const translatedText = await mockTranslateAudio();
+
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === messageId ? { ...msg, translatedText, isTranslating: false } : msg
+          )
+        );
+      } catch (error) {
+        console.error("翻译失败:", error);
+        Toast.show("翻译失败，请重试");
+
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === messageId
+              ? {
+                  ...msg,
+                  isTranslating: false,
+                  translatedText: "翻译失败，请重试",
+                }
+              : msg
+          )
+        );
+      }
+    },
+    [messages]
+  );
+
+  const onSetIsRecording = (flag: boolean) => {
+    setIsRecording(flag);
+  };
+
+  const onLanguage = (item: FloatMenuItemConfig) => {
+    if (item.type === "add") {
+      setVisible(true);
+    } else {
+      setCurrentLanguage(item);
+    }
+  };
+
+  return (
+    <div className="translate-container">
+      {searchVisible && (
+        <div className="header">
+          <SearchCom handleAllAni={() => {}} />
+        </div>
+      )}
+
+      <MessageCom data={messages} isRecording={isRecording}></MessageCom>
+      <VoiceRecord
+        onRecordingComplete={onRecordingComplete}
+        isRecording={isRecording}
+        onSetIsRecording={onSetIsRecording}
+      />
+      <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} />
+      <XPopup
+        title="选择翻译语种"
+        visible={visible}
+        onClose={() => {
+          setVisible(false);
+        }}
+      >
+        <div className="card">
+          <span>快捷选项</span>
+          <div></div>
+        </div>
+        <div className="card">
+          <span>宠物语种</span>
+        </div>
+      </XPopup>
+    </div>
+  );
+}
+
+export default Index;