feat: init

projects/translate-h5/src/view/app/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { RenderRoutes } from "@/route/render-routes.tsx";
 import { axiosInstance } from "@/http/axios-instance.ts";
 import { configure } from "axios-hooks";

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

@@ -0,0 +1,13 @@
+// 档案
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+
+function Index() {
+  return (
+    <MainLayout isShowNavBar={true}>
+      <div className="archives"></div>
+    </MainLayout>
+  );
+}
+
+export default Index;

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

@@ -1,6 +1,23 @@
 .home {
   height: 100%;
+  width: 100%;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .home-header {
+    display: flex;
+    padding: 12px;
+    position: sticky;
+    top: 0px;
+    background: #fff;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 99;
+    h3 {
+      font-size: 20px;
+      font-size: 20px;
+    }
+  }
   // .adm-tabs {
   //   display: flex;
   //   flex-direction: column;
@@ -21,7 +38,7 @@
 
   // .adm-tabs-tab {
   //   font-size: 20px;
-  //   color: rgba(0, 0, 0, 0.25);
+  //   font-size: 20px;
   //   font-weight: 600;
   //   &.adm-tabs-tab-active {
   //     color: #000;
@@ -36,6 +53,7 @@
     flex-direction: column;
     height: 100%;
     .header {
+      padding: 0px 16px;
     }
   }
 }

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

@@ -1,32 +1,37 @@
 import MainLayout from "@/layout/main/mainLayout";
-import { Button, Tabs } from "antd-mobile";
-import Translate from "./translate";
+import { useState } from "react";
+import { Divider, Space } from "antd-mobile";
+import Translate from "./translate/index";
+import { Electrocardiogram, Filter, GithubOne } from "@icon-park/react";
+import { useNavigate } from "react-router-dom";
 import "./index.less";
 
 function Index() {
-  const handleRecordComplete = (audioData: AudioData): void => {
-    console.log("录音完成:", audioData);
-  };
+  const [visible, setVisible] = useState<boolean>(false);
+  const navigate = useNavigate();
 
-  const handleError = (error: Error): void => {
-    console.error("录音错误:", error);
+  const onLink = () => {
+    navigate("/translate/mood");
   };
-
   return (
     <MainLayout>
       <div className="home">
-        <div className="header">
+        <div className="home-header">
           <h3>宠物翻译</h3>
-          <div></div>
+          <Space style={{ fontSize: "20px", "--gap": "16px" }}>
+            <Filter theme="outline" fill="#333" strokeWidth={3} strokeLinecap="butt" />
+            <Divider direction="vertical" />
+            <Electrocardiogram
+              theme="outline"
+              fill="#333"
+              strokeWidth={3}
+              strokeLinecap="butt"
+              onClick={onLink}
+            />
+            <GithubOne theme="outline" fill="#333" strokeWidth={3} strokeLinecap="butt" />
+          </Space>
         </div>
-        {/* <Tabs stretch={false}>
-          <Tabs.Tab title="宠物翻译" key="1">
-            <Translate />
-          </Tabs.Tab>
-          <Tabs.Tab title="宠物档案" key="2">
-            2
-          </Tabs.Tab>
-        </Tabs> */}
+        <Translate searchVisible={visible} />
       </div>
     </MainLayout>
   );

projects/translate-h5/src/view/home/mood/index.module.less

@@ -0,0 +1,3 @@
+.mood {
+  padding: 12px;
+}

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

@@ -0,0 +1,11 @@
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+const Moods = () => {
+  return (
+    <MainLayout isShowNavBar={true} title="情绪">
+      <div className={styles.mood}>心情</div>
+    </MainLayout>
+  );
+};
+
+export default Moods;

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

@@ -4,7 +4,7 @@ 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 { Message } from "../../../types";
 import "./index.less";
 
 interface DefinedProps {
@@ -89,44 +89,18 @@ function Index(props: DefinedProps) {
   };
   const renderAvatar = (type?: "pig" | "cat" | "dog") => {
     if (type === "pig") {
-      <Image
-        src={pigSvg}
-        width={40}
-        height={40}
-        fit="cover"
-        style={{ borderRadius: 32 }}
-      />;
+      <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
     }
     if (type === "cat") {
-      return (
-        <Image
-          src={catSvg}
-          width={40}
-          height={40}
-          fit="cover"
-          style={{ borderRadius: 32 }}
-        />
-      );
+      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 <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} onClick={() => playAudio(item.id, item.audioUrl)}>
           {renderAvatar(item.type)}
           <div className="rig">
             <div>
@@ -163,9 +137,7 @@ function Index(props: DefinedProps) {
           </div>
           <div className="voice-container">
             <VoiceIcon isPlaying={false} />
-            <div className="tips">
-              {isRecording ? "录制中..." : "轻点麦克风录制"}
-            </div>
+            <div className="tips">{isRecording ? "录制中..." : "轻点麦克风录制"}</div>
           </div>
         </div>
       </div>

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

@@ -1,21 +1,14 @@
-import { DownOne } from "@icon-park/react";
-import {
-  ActionSheet,
-  Dropdown,
-  type DropdownRef,
-  Popup,
-  Radio,
-  SearchBar,
-  Space,
-} from "antd-mobile";
+import { Dropdown, type DropdownRef, Radio, SearchBar, Space } from "antd-mobile";
 import { RadioValue } from "antd-mobile/es/components/radio";
 import { useRef, useState } from "react";
 
 interface PropsConfig {
   handleAllAni: () => void;
+  value?: string;
 }
 const allAni = ["全部宠物", "丑丑", "胖胖", "可可"];
 function SearchCom(props: PropsConfig) {
+  const { value } = props;
   const [aniName, setAniName] = useState<string>("全部宠物");
   const animenuRef = useRef<DropdownRef>(null);
   const handleAniSelect = (val: RadioValue) => {
@@ -32,6 +25,7 @@ function SearchCom(props: PropsConfig) {
           "--height": "32px",
           "--padding-left": "12px",
         }}
+        defaultValue={value}
       />
       <Dropdown className="all" ref={animenuRef}>
         <Dropdown.Item key="ani" title={aniName}>

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

@@ -5,8 +5,6 @@ import microphoneSvg from "@/assets/translate/microphone.svg";
 import microphoneDisabledSvg from "@/assets/translate/microphoneDisabledSvg.svg";
 import { createStartRecordSound, createSendSound } from "@/utils/voice";
 import "./index.less";
-import { Message } from "../../types";
-import { CloseCircleOutline } from "antd-mobile-icons";
 
 interface DefinedProps {
   onRecordingComplete: (url: string, finalDuration: number) => void;
@@ -80,10 +78,7 @@ function Index(props: DefinedProps) {
       //正在录音中
       return (
         <div onClick={onStopRecording} className="isRecording">
-          <ProgressCircle
-            percent={recordingDuration}
-            style={{ "--size": "80px" }}
-          >
+          <ProgressCircle percent={recordingDuration} style={{ "--size": "80px" }}>
             <div className="recording-dot">
               <span className="circle"></span>
             </div>
@@ -95,14 +90,7 @@ function Index(props: DefinedProps) {
       );
     } else {
       //麦克风状态
-      return (
-        <Image
-          height={80}
-          width={80}
-          src={microphoneSvg}
-          onClick={onStartRecording}
-        />
-      );
+      return <Image height={80} width={80} src={microphoneSvg} onClick={onStartRecording} />;
     }
   }, [hasPermission, isRecording, recordingDuration]);
   const checkMicrophonePermission = useCallback(async () => {

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

@@ -3,7 +3,7 @@ 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 type { Message } from "../types";
 
 import { mockTranslateAudio } from "@/utils/voice";
 import dogSvg from "@/assets/translate/dog.svg";
@@ -11,7 +11,9 @@ 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 {}
+interface DefinedProps {
+  searchVisible: boolean;
+}
 const menuItems: FloatMenuItemConfig[] = [
   { icon: <Image src={dogSvg} />, type: "dog" },
   { icon: <Image src={catSvg} />, type: "cat" },
@@ -22,23 +24,11 @@ const menuItems: FloatMenuItemConfig[] = [
   },
 ];
 function Index(props: DefinedProps) {
-  // const data: Message[] = [
-  //   {
-  //     id: 1,
-  //     audioUrl: "",
-  //     duration: 0,
-  //     translatedText: "",
-  //     isTranslating: true,
-  //     isPlaying: false,
-  //     timestamp: 0,
-  //   },
-  // ];
-  const [currentPlayingId, setCurrentPlayingId] = useState<string | null>(null); //当前播放id
+  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]);
   }, []);
@@ -111,9 +101,11 @@ function Index(props: DefinedProps) {
 
   return (
     <div className="translate-container">
-      <div className="header">
-        <SearchCom handleAllAni={() => {}} />
-      </div>
+      {searchVisible && (
+        <div className="header">
+          <SearchCom handleAllAni={() => {}} />
+        </div>
+      )}
 
       <MessageCom data={messages} isRecording={isRecording}></MessageCom>
       <VoiceRecord