feat: 添加tabber

projects/translate-h5/src/layout/main/index.less

@@ -1,11 +1,14 @@
 .main-layout {
   height: 100%;
   .layout-content {
+    --bottom: 0;
+    --bottom: constant(safe-area-inset-bottom);
+    --bottom: env(safe-area-inset-bottom);
     height: 100%;
     overflow-y: auto;
-    // padding-bottom: 150px;
+    // padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
-    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
+    // padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
-    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
+    padding-bottom: calc(var(--bottom) + 44px);
   }
 
   .layout-tab {

projects/translate-h5/src/layout/main/mainLayout.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { NavBar, SafeArea } from "antd-mobile";
+import { NavBar, SafeArea, TabBar } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import "./index.less";
+import { Translate, Electrocardiogram, GithubOne, Blossom, User } from "@icon-park/react";
 
 interface MainLayoutProps {
   children: React.ReactNode;
@@ -20,30 +21,42 @@ const MainLayout: React.FC<MainLayoutProps> = ({
 }) => {
   const navigate = useNavigate();
   // const location = useLocation();
+  const [pathname, setPathname] = React.useState(location.pathname);
+  const tabs = [
+    {
+      key: "/translate",
+      title: "宠物翻译",
+      icon: <Translate />,
+    },
+    {
+      key: "/translate/archives",
+      title: "情绪监控",
+      icon: <Electrocardiogram />,
+    },
+    {
+      key: "/translate/mood",
+      title: "我的宠物",
+      icon: <GithubOne />,
+    },
+    // {
+    //   key: "/translate/mood",
+    //   title: "宠物服务",
+    //   icon: <Blossom />,
+    // },
+    // {
+    //   key: "/translate/mood",
+    //   title: "个人中心",
 
-  // const tabs = [
+    //   icon: <User />,
-  //   {
+    // },
-  //     key: "/",
+  ];
-  //     title: "宠物翻译",
-  //     icon: <CattleZodiac />,
-  //   },
-  //   {
-  //     key: "/set",
-  //     title: "待办",
-  //     icon: <User />,
-  //   },
-  //   {
-  //     key: "/message",
-  //     title: "消息",
-  //     icon: <User />,
-  //   },
-  //   {
-  //     key: "/me",
-  //     title: "我的",
 
-  //     icon: <User size="24" />,
+  const setRouteActive = (value: string) => {
-  //   },
+    console.log(value);
-  // ];
+
+    setPathname(value);
+    navigate(value);
+  };
 
   const goBack = () => {
     // 打印路由栈
@@ -68,15 +81,11 @@ const MainLayout: React.FC<MainLayoutProps> = ({
       <div className="layout-content">{children}</div>
 
       <div className="footer layout-tab">
-        {/* <TabBar
+        <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)} safeArea={true}>
-          activeKey={pathname}
-          onChange={(value) => setRouteActive(value)}
-          safeArea={true}
-        >
           {tabs.map((item) => (
             <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
           ))}
-        </TabBar> */}
+        </TabBar>
       </div>
     </div>
   );

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

@@ -1,9 +1,10 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Avatar, Divider, Space, SpinLoading, Toast } from "antd-mobile";
 import { VoiceIcon } from "@workspace/shared";
 import { Message } from "../../../types";
 import "./index.less";
 import { Refresh } from "@icon-park/react";
+import DefAvatar from "@/assets/translate/def-avatar.png";
 
 interface DefinedProps {
   data: Message[];
@@ -48,7 +49,7 @@ function Index(props: DefinedProps) {
   };
 
   const renderAvatar = (item: Message) => {
-    return <Avatar src={item.petAvatar || ""} style={{ "--border-radius": "32px" }} />;
+    return <Avatar src={item.petAvatar || DefAvatar} style={{ "--border-radius": "32px" }} />;
   };
 
   const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
@@ -107,7 +108,10 @@ function Index(props: DefinedProps) {
               <span className="name">
                 {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
               </span>
-              <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+
+              {!(item.isTranslating && !item.isRefresh) && (
+                <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+              )}
               <span className="">{item.createTime}</span>
             </div>
             <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
@@ -122,7 +126,7 @@ function Index(props: DefinedProps) {
         </div>
       ))}
 
-      <div style={{ height: "80px", width: "100%" }}></div>
+      <div style={{ height: "130px", width: "100%" }}></div>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Image, Toast } from "antd-mobile";
 import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
@@ -35,6 +35,15 @@ function Index(props: DefinedProps) {
   const [visible, setVisible] = useState<boolean>(false);
   const [dialogId, setDialogId] = useState<number>(0);
 
+  // 创建稳定化的消息字符串（排除 isTranslating 字段变化的影响）
+  const stableMessagesString = useMemo(() => {
+    const stableMessages = messages.map((msg) => {
+      const { isTranslating, isRefresh, ...rest } = msg;
+      return rest;
+    });
+    return JSON.stringify(stableMessages);
+  }, [messages]);
+
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
     fetchInitialMessages();
@@ -75,7 +84,7 @@ function Index(props: DefinedProps) {
         scrollToBottom();
       });
     }
-  }, [messages, scrollToBottom]);
+  }, [stableMessagesString, scrollToBottom]);
 
   //完成录音
   const onRecordingComplete = useCallback(

projects/translate-h5/vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   // basicSsl()
   // target: "https://petshy.tashowz.com",
   // http://192.168.1.231:48080
-  plugins: [react(), basicSsl()],
+  plugins: [react()],
   server: {
     port: 3000,
     host: "0.0.0.0",