feat: 10.28beta版本

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

@@ -1,10 +1,5 @@
 import MainLayout from "@/layout/main/mainLayout";
 import styles from "./index.module.less";
-import archivesAvatarPng from "@/assets/translate/archives-avatar.png";
-import catDogPng from "@/assets/translate/cat-dog.png";
-import archivesVarietyPng from "@/assets/translate/archives-variety.png";
-import archivesWeightPng from "@/assets/translate/archives-weight.png";
-import archivesDatePng from "@/assets/translate/archives-date.png";
 import { useState } from "react";
 import { Image, Button, Popup, Space } from "antd-mobile";
 import { CloseOutline } from "antd-mobile-icons";
@@ -67,6 +62,12 @@ function MyPopup(props: DefinedProps) {
 }
 
 function Add() {
+  const archivesAvatarPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-avatar.png";
+  const catDogPng = "http://qiniu.bydj.tashowz.com/assets/translate/cat-dog.png";
+  const archivesVarietyPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-variety.png";
+  const archivesDatePng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-date.png";
+  const archivesWeightPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-weight.png";
+
   const [visibleVariety, setVisibleVariety] = useState<boolean>(false);
   const [visibleWeight, setVisibleWeight] = useState<boolean>(false);
   const [visibleDate, setVisibleDate] = useState<boolean>(false);
@@ -74,8 +75,8 @@ function Add() {
   const flag = searchParams.get("flag");
 
   const right = (
-    <div style={{ fontSize: 16 }}>
-      <Space style={{ "--gap": "16px" }}>
+    <div style={{ fontSize: 20 }}>
+      <Space style={{ "--gap": "20px" }}>
         <Delete fill="#FF4D4F" />
       </Space>
     </div>

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

@@ -11,6 +11,10 @@ function App() {
     axios: axiosInstance,
   });
   const i18nStore = useI18nStore();
+  // 持久化一个messageList的本地化数据
+  console.log("degfmessageList");
+
+  localStorage.setItem("messageList", JSON.stringify([]));
   return (
     <>
       <ConfigProvider locale={i18nStore.lang === "en_US" ? enUS : zhCN}>

projects/translate-h5/src/view/archives/index.module.less

@@ -12,10 +12,26 @@
   }
 }
 
+.homeHeader {
+  display: flex;
+  padding: 12px;
+  position: sticky;
+  top: 0px;
+  background: #f5f5f5;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 99;
+  h3 {
+    font-size: 20px;
+    font-size: 20px;
+  }
+}
+
 .bottom {
   position: fixed;
-  bottom: 0;
+  bottom: 60px;
   opacity: 0.98;
+  z-index: 99;
 }
 
 .archivesAvatar {

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

@@ -0,0 +1,97 @@
+// 档案
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+// import archivesPicturePng from "@/assets/translate/archives-picture.png";
+// import archivesDataPng from "@/assets/translate/archives-data.png";
+// import archivesEquipmentPng from "@/assets/translate/archives-equipment.png";
+// import archivesSwPng from "@/assets/translate/archives-sw.png";
+// import archivesFunctionPng from "@/assets/translate/archives-function.png";
+// import archivesBottomPng from "@/assets/translate/archives-bottom.png";
+// import archivesCardPng from "@/assets/translate/archives-card.png";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Outlet } from "react-router-dom"; // 添加这行
+
+import { Image, Space } from "antd-mobile";
+import { ListView, More, AddOne, AlignHorizontalCenterTwo } from "@icon-park/react";
+function Index() {
+  const archivesPicturePng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-picture.png";
+  const archivesDataPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-data.png";
+  const archivesEquipmentPng =
+    "http://qiniu.bydj.tashowz.com/assets/translate/archives-equipment.png";
+  const archivesSwPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-sw.png";
+  const archivesFunctionPng =
+    "http://qiniu.bydj.tashowz.com/assets/translate/archives-function.png";
+  const archivesBottomPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-bottom.png";
+  const archivesCardPng = "http://qiniu.bydj.tashowz.com/assets/translate/archives-card.png";
+
+  const [listShow, setListShow] = useState(false);
+
+  const navigate = useNavigate();
+
+  const onLink = (link: string) => {
+    navigate(link);
+  };
+
+  // const right = (
+  //   <div style={{ fontSize: 16 }}>
+  //     <Space style={{ "--gap": "16px" }}>
+  //       {listShow ? (
+  //         <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
+  //       ) : (
+  //         <ListView onClick={() => setListShow(true)} fill="#333" />
+  //       )}
+
+  //       <AddOne onClick={() => onLink("/translate/addArchives?flag=add")} fill="#333" />
+  //       <More fill="#333" />
+  //     </Space>
+  //   </div>
+  // );
+
+  return (
+    <MainLayout>
+      <div className={styles.homeHeader}>
+        <h3>我的宠物</h3>
+        <Space style={{ fontSize: "20px", "--gap": "16px" }}>
+          {listShow ? (
+            <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
+          ) : (
+            <ListView onClick={() => setListShow(true)} fill="#333" />
+          )}
+
+          <AddOne onClick={() => onLink("/addArchives?flag=add")} fill="#333" />
+          <More fill="#333" />
+        </Space>
+      </div>
+      {listShow ? (
+        <div className={styles.archives}>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+          <Image className={styles.img} src={archivesCardPng}></Image>
+        </div>
+      ) : (
+        <>
+          <div className={styles.bottom}>
+            <Image src={archivesBottomPng}></Image>
+          </div>
+          <div className={styles.archives}>
+            <Image src={archivesPicturePng}></Image>
+            <Image
+              onClick={() => onLink("/addArchives?flag=edit")}
+              className={styles.img}
+              src={archivesDataPng}
+            ></Image>
+            <Image className={styles.img} src={archivesEquipmentPng}></Image>
+            <Image className={styles.img} src={archivesSwPng}></Image>
+            <Image className={styles.img} src={archivesFunctionPng}></Image>
+            <div className={styles["placeholder-bottom"]}></div>
+          </div>
+        </>
+      )}
+      <Outlet /> {/* 添加这行 */}
+    </MainLayout>
+  );
+}
+
+export default Index;

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

@@ -1,75 +0,0 @@
-// 档案
-import MainLayout from "@/layout/main/mainLayout";
-import styles from "./index.module.less";
-import archivesPicturePng from "@/assets/translate/archives-picture.png";
-import archivesDataPng from "@/assets/translate/archives-data.png";
-import archivesEquipmentPng from "@/assets/translate/archives-equipment.png";
-import archivesSwPng from "@/assets/translate/archives-sw.png";
-import archivesFunctionPng from "@/assets/translate/archives-function.png";
-import archivesBottomPng from "@/assets/translate/archives-bottom.png";
-import archivesCardPng from "@/assets/translate/archives-card.png";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Outlet } from "react-router-dom"; // 添加这行
-
-import { Image, Space } from "antd-mobile";
-import { ListView, More, AddOne, AlignHorizontalCenterTwo } from "@icon-park/react";
-function Index() {
-  const [listShow, setListShow] = useState(false);
-
-  const navigate = useNavigate();
-
-  const onLink = (link: string) => {
-    // safeNavigate(link);
-    navigate(link);
-  };
-
-  const right = (
-    <div style={{ fontSize: 16 }}>
-      <Space style={{ "--gap": "16px" }}>
-        {listShow ? (
-          <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
-        ) : (
-          <ListView onClick={() => setListShow(true)} fill="#333" />
-        )}
-
-        <AddOne onClick={() => onLink("/translate/addArchives?flag=add")} fill="#333" />
-        <More fill="#333" />
-      </Space>
-    </div>
-  );
-
-  return (
-    <MainLayout navBarRight={right} isShowNavBar={true} title="宠物档案">
-      {listShow ? (
-        <div className={styles.archives}>
-          <Image className={styles.img} src={archivesCardPng}></Image>
-          <Image className={styles.img} src={archivesCardPng}></Image>
-          <Image className={styles.img} src={archivesCardPng}></Image>
-          <Image className={styles.img} src={archivesCardPng}></Image>
-        </div>
-      ) : (
-        <>
-          <div className={styles.bottom}>
-            <Image src={archivesBottomPng}></Image>
-          </div>
-          <div className={styles.archives}>
-            <Image src={archivesPicturePng}></Image>
-            <Image
-              onClick={() => onLink("/translate/addArchives?flag=edit")}
-              className={styles.img}
-              src={archivesDataPng}
-            ></Image>
-            <Image className={styles.img} src={archivesEquipmentPng}></Image>
-            <Image className={styles.img} src={archivesSwPng}></Image>
-            <Image className={styles.img} src={archivesFunctionPng}></Image>
-            <div className={styles["placeholder-bottom"]}></div>
-          </div>
-        </>
-      )}
-      <Outlet /> {/* 添加这行 */}
-    </MainLayout>
-  );
-}
-
-export default Index;

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

@@ -2,25 +2,21 @@ import MainLayout from "@/layout/main/mainLayout";
 import { useState } from "react";
 import { Divider, Space } from "antd-mobile";
 import Translate from "./translate/index";
-import { Electrocardiogram, Filter, GithubOne, HamburgerButton } from "@icon-park/react";
-import { useNavigate } from "react-router-dom";
+import { Filter, HamburgerButton } from "@icon-park/react";
+
 // import { useSafeNavigate } from "@workspace/hooks";
 import "./index.less";
 
 function Index() {
   const [visible, setVisible] = useState<boolean>(false);
   // const safeNavigate = useSafeNavigate();
-  const navigate = useNavigate();
 
-  const onLink = (link: string) => {
-    // safeNavigate(link);
-    navigate(link);
-  };
   return (
     <MainLayout>
       <div className="home">
         <div className="home-header">
           <h3>宠物翻译</h3>
+
           <Space style={{ fontSize: "20px", "--gap": "16px" }}>
             <Filter
               theme="outline"
@@ -30,7 +26,7 @@ function Index() {
               onClick={() => setVisible(!visible)}
             />
             <Divider direction="vertical" />
-            <Electrocardiogram
+            {/* <Electrocardiogram
               theme="outline"
               fill="#333"
               strokeWidth={3}
@@ -43,7 +39,7 @@ function Index() {
               strokeWidth={3}
               strokeLinecap="butt"
               onClick={() => onLink("/translate/archives")}
-            />
+            /> */}
             <HamburgerButton
               theme="outline"
               size="24"

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

@@ -2,6 +2,12 @@
   flex: 1 auto;
   overflow-y: auto;
   padding: 12px;
+  .message-title {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 8px;
+  }
   .item {
     color: rgba(0, 0, 0, 0.45);
     font-size: 12px;
@@ -24,6 +30,7 @@
     border-radius: 8px;
     margin-top: 8px;
     padding-right: 12px;
+    width: 100px;
     .time {
       color: rgba(0, 0, 0, 0.88);
     }
@@ -35,12 +42,23 @@
     }
   }
   .translate {
+    position: relative;
     display: flex;
     gap: 12px;
     padding: 12px;
     align-items: center;
     background: rgba(0, 0, 0, 0.02);
+    color: #000000e0;
     border-radius: 8px;
     margin-top: 12px;
+    max-width: 100%;
+    font-size: 14px;
+    // 超出换行
+    white-space: normal;
+    .expression {
+      position: absolute;
+      right: -25px;
+      top: -30px;
+    }
   }
 }

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

@@ -1,10 +1,20 @@
 import { useEffect, useRef, useState } from "react";
-import { Avatar, Divider, Space, SpinLoading, Toast } from "antd-mobile";
+import { Avatar, Divider, Space, SpinLoading, Toast, Image } from "antd-mobile";
 import { VoiceIcon } from "@workspace/shared";
 import { Message } from "../../../types";
 import "./index.less";
-import { Refresh } from "@icon-park/react";
+import { DigitalWatches, Refresh } from "@icon-park/react";
 import DefAvatar from "@/assets/translate/def-avatar.png";
+import Emotion1Png from "@/assets/translate/emotion/emotion-1.png";
+import Emotion2Png from "@/assets/translate/emotion/emotion-2.png";
+import Emotion3Png from "@/assets/translate/emotion/emotion-3.png";
+import Emotion4Png from "@/assets/translate/emotion/emotion-4.png";
+import Emotion5Png from "@/assets/translate/emotion/emotion-5.png";
+import Emotion6Png from "@/assets/translate/emotion/emotion-6.png";
+import Emotion7Png from "@/assets/translate/emotion/emotion-7.png";
+import Emotion8Png from "@/assets/translate/emotion/emotion-8.png";
+import Emotion9Png from "@/assets/translate/emotion/emotion-9.png";
+import React from "react";
 
 interface DefinedProps {
   data: Message[];
@@ -16,6 +26,17 @@ function Index(props: DefinedProps) {
   const { data, isRecording } = props;
   const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({});
   const [currentPlayingId, setCurrentPlayingId] = useState<number>();
+  const emotionList = [
+    Emotion1Png,
+    Emotion4Png,
+    Emotion7Png,
+    Emotion2Png,
+    Emotion5Png,
+    Emotion8Png,
+    Emotion3Png,
+    Emotion6Png,
+    Emotion9Png,
+  ];
 
   useEffect(() => {
     if (isRecording && currentPlayingId) {
@@ -25,7 +46,7 @@ function Index(props: DefinedProps) {
     }
   }, [isRecording, currentPlayingId]);
 
-  const playAudio = (id: number, audioUrl: string) => {
+  const playAudio = async (id: number, audioUrl: string) => {
     if (isRecording) {
       Toast.show("录音中，无法播放音频");
       return;
@@ -35,7 +56,28 @@ function Index(props: DefinedProps) {
       audioRefs.current[currentPlayingId].currentTime = 0;
     }
     if (currentPlayingId !== id) {
+      console.log(id);
+
       setCurrentPlayingId(id);
+      // console.log(audioUrl, "audioUrl");
+
+      // const response = await fetch(audioUrl);
+      // console.log("response", response);
+
+      // const arrayBuffer = await response.arrayBuffer();
+      // console.log("arrayBuffer", arrayBuffer);
+
+      // // 创建ID3Writer实例并移除ID3标签
+      // const writer = new ID3Writer(new Uint8Array(arrayBuffer));
+      // writer.removeTag(); // 移除 ID3 标签
+
+      // writer.addTag(); // 必须调用 addTag 才能生成带标签的音频数据
+      // const blob = writer.getBlob(); // 使用 getBlob 获取正确的 Blob 数据
+
+      // const url = URL.createObjectURL(blob);
+
+      // console.log("url", url);
+
       audioRefs.current[id] = new Audio(audioUrl);
       audioRefs.current[id].play();
       audioRefs.current[id].onended = () => {
@@ -49,14 +91,28 @@ function Index(props: DefinedProps) {
   };
 
   const renderAvatar = (item: Message) => {
-    return <Avatar src={item.petAvatar || DefAvatar} style={{ "--border-radius": "32px" }} />;
+    return (
+      <Avatar
+        src={item.petAvatar || DefAvatar}
+        style={{ "--border-radius": "32px", flexShrink: "0" }}
+      />
+    );
   };
 
-  const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
+  const refreshMessage = async (item: Message, e: React.MouseEvent) => {
     e.stopPropagation();
+    console.log("item", item);
+
+    if (!item.file || !item.dialogId || !item.contentText) {
+      Toast.show("文件不存在，无法重新翻译");
+      return;
+    }
     const formData = new FormData();
-    formData.append("msgId", messageId.toString());
-    props.onRefresh(formData, messageId);
+    formData.append("file", item.file);
+    formData.append("dialogId", String(item.dialogId));
+    formData.append("contentDuration", String(item.contentDuration));
+
+    props.onRefresh(formData, item.id);
   };
 
   const renderTranslateResult = (item: Message) => {
@@ -70,28 +126,36 @@ function Index(props: DefinedProps) {
     } else {
       if (item.transStatus === 1) {
         return item.transResult?.length ? (
-          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+          <div className="translate" style={{ verticalAlign: "middle", width: "240px" }}>
             <span>{item.transResult}</span>
-          </Space>
+            <div className="expression">
+              {item.emotion !== undefined &&
+                item.emotion > 0 &&
+                item.emotion <= emotionList.length && (
+                  <Image width={"40px"} height={"40px"} src={emotionList[item.emotion - 1]} />
+                )}
+            </div>
+          </div>
         ) : (
           <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
             <span>未知语句</span>
-            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+            <Refresh onClick={(e) => refreshMessage(item, e)} size="12" fill="#333" />
           </Space>
         );
       } else {
+        console.log("item.transResult", item);
+
         return (
-          <Space
-            justify={"between"}
+          <div
             className="translate"
             style={{ verticalAlign: "middle" }}
             onClick={(e) => {
               e.stopPropagation();
             }}
           >
-            <span>翻译失败，请重试</span>
-            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
-          </Space>
+            <span>{item.transResult}</span>
+            <Refresh onClick={(e) => refreshMessage(item, e)} size="12" fill="#333" />
+          </div>
         );
       }
     }
@@ -100,33 +164,46 @@ function Index(props: DefinedProps) {
   return (
     <div className="message">
       {data.map((item, index) => (
-        <div className="item" key={index}>
-          {renderAvatar(item)}
-
-          <div className="rig">
-            <div>
-              <span className="name">
-                {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
-              </span>
-
-              {!(item.isTranslating && !item.isRefresh) && (
-                <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-              )}
-              <span className="">{item.createTime}</span>
+        <React.Fragment key={index}>
+          {!(item.isTranslating && !item.isRefresh) && (
+            <div className="message-title">
+              <Space
+                style={{
+                  fontSize: "10px",
+                  color: "#BFBFBF",
+                  "--gap": "8px",
+                }}
+              >
+                <div>{item.createTime}</div>
+                <Divider style={{ margin: "0px" }} direction="vertical" />
+                <DigitalWatches />
+                <div>{item.terminal ?? "来自App"}</div>
+              </Space>
             </div>
-            <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
-              <VoiceIcon
-                // onChange={onVoiceChange}
-                isPlaying={currentPlayingId === item.id}
-              />
-              <div className="time">{item.contentDuration}''</div>
+          )}
+
+          <div className="item" key={index}>
+            {renderAvatar(item)}
+            <div className="rig">
+              <div>
+                <span className="name">
+                  {item.isTranslating && !item.isRefresh ? "" : item.petName ?? ""}
+                </span>
+              </div>
+              <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
+                <VoiceIcon
+                  // onChange={onVoiceChange}
+                  isPlaying={currentPlayingId === item.id}
+                />
+                <div className="time">{item.contentDuration}''</div>
+              </div>
+              {renderTranslateResult(item)}
             </div>
-            {renderTranslateResult(item)}
           </div>
-        </div>
+        </React.Fragment>
       ))}
-
       <div style={{ height: "130px", width: "100%" }}></div>
+      ....
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 .voice-record {
   position: fixed;
-  bottom: 0;
+  bottom: 60px;
   width: 100%;
   background: #fff;
   display: flex;
@@ -8,7 +8,7 @@
   justify-content: center;
   flex-direction: column;
   padding: 12px 0px;
-  box-shadow: 1px 2px 4px 3px #eee;
+  // box-shadow: 1px 2px 4px 3px #eee;
   // 不被挤压
   flex-shrink: 0;
   min-height: 100px; /* 添加 min-height 防止被压缩 */

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

@@ -62,18 +62,30 @@ function Index(props: DefinedProps) {
   // 添加初始化数据的逻辑
   const fetchInitialMessages = async () => {
     try {
+      const messages = JSON.parse(localStorage.getItem("messageList") ?? "[]");
+      console.log("messages", messages);
+
       // 这里替换为实际的API调用
       // const response = await fetch('/api/messages');
-      const response = await getDialog();
-      const initialMessages: Message[] = response.data?.data?.messages || [];
+      const response = await getDialog({
+        pageNo: 1,
+        pageSize: 99,
+      });
+      const initialMessages: Message[] = response.data?.data?.messages.list || [];
 
       setDialogId(response.data?.data?.dialogId);
+      if (messages.length > 0) {
+        setMessages(messages);
+        return;
+      }
       setMessages(initialMessages);
+      localStorage.setItem("messageList", JSON.stringify(initialMessages));
     } catch (error) {
       console.error("获取初始化数据失败:", error);
       Toast.show("获取消息失败");
       // 失败时设置为空数组
       setMessages([]);
+      localStorage.setItem("messageList", JSON.stringify([]));
     }
   };
 
@@ -88,20 +100,26 @@ function Index(props: DefinedProps) {
 
   //完成录音
   const onRecordingComplete = useCallback(
-    (audioUrl: string, actualDuration: number, formData: FormData) => {
+    async (audioUrl: string, actualDuration: number, formData: FormData) => {
       console.log(audioUrl, "audioUrl");
       const newMessage: Message = {
         id: Date.now(),
         contentText: audioUrl,
         contentDuration: actualDuration,
         isTranslating: true,
+        terminal: "",
+        file: formData.get("file") as Blob,
       };
 
       setMessages((prev) => [...prev, newMessage]);
-      setTimeout(() => {
-        onTranslateAudio(formData, newMessage.id);
-      }, 500);
 
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+      await onTranslateAudio(formData, newMessage.id);
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
       Toast.show("语音已发送");
     },
     [messages]
@@ -115,51 +133,57 @@ function Index(props: DefinedProps) {
         const translatedData = response.data;
 
         if (translatedData.data.transStatus) {
-          setMessages((prev) =>
-            prev.map((msg) =>
+          setMessages((prev) => {
+            const newMessages = prev.map((msg) =>
               msg.id === id
                 ? {
                     ...msg,
                     ...translatedData.data,
+                    id: id,
                     isTranslating: false,
                     isRefresh: false,
                   }
                 : msg
-            )
-          );
+            );
+            localStorage.setItem("messageList", JSON.stringify(newMessages));
+            return newMessages;
+          });
         } else {
-          setMessages((prev) =>
-            prev.map((msg) =>
+          console.log(translatedData);
+
+          setMessages((prev) => {
+            const newMessages = prev.map((msg) =>
               msg.id === id
                 ? {
                     ...msg,
-                    id: translatedData.data.id,
-                    petName: "未知宠物",
-                    transStatus: translatedData.data.transStatus,
-                    createTime: translatedData.data.createTime,
+                    ...translatedData.data,
+                    id: id,
                     isTranslating: false,
                     isRefresh: false,
                   }
                 : msg
-            )
-          );
+            );
+            localStorage.setItem("messageList", JSON.stringify(newMessages));
+            return newMessages;
+          });
         }
       } catch (error) {
         console.error("翻译失败:", error);
         Toast.show("翻译失败，请重试");
-
-        setMessages((prev) =>
-          prev.map((msg) =>
+        setMessages((prev) => {
+          const newMessages = prev.map((msg) =>
             msg.id === id
               ? {
                   ...msg,
+                  id: id,
                   isTranslating: false,
                   isRefresh: false,
-                  translatedText: "翻译失败，请重试",
                 }
               : msg
-          )
-        );
+          );
+          localStorage.setItem("messageList", JSON.stringify(newMessages));
+          return newMessages;
+        });
       }
     },
     [messages]
@@ -200,34 +224,12 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
-      {/* <div onClick={() => scrollToBottom()}>111</div> */}
-
       <MessageCom
         data={messages}
         isRecording={isRecording}
         onRefresh={refreshMessages}
       ></MessageCom>
 
-      {/* <div
-        className="message-container"
-        style={{
-          flex: 1,
-          overflowY: "auto",
-          minHeight: 0,
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        <MessageCom
-          data={messages}
-          isRecording={isRecording}
-          onRefresh={refreshMessages}
-        ></MessageCom>
-        <div ref={messagesEndRef} style={{ float: "left", clear: "both", height: "1px" }} />
-      </div> */}
-
-      {/* <div className="he" ref={messagesEndRef} /> */}
-
       <VoiceRecord
         dialogId={dialogId}
         onRecordingComplete={onRecordingComplete}

projects/translate-h5/src/view/home/types.ts

@@ -12,4 +12,8 @@ export interface Message {
   messageStatus?: 0 | 1;
   transStatus?: 0 | 1;
   isRefresh?: boolean;
+  emotion?: number;
+  terminal: string;
+  file?: Blob;
+  dialogId?: number;
 }

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

@@ -1,4 +1,7 @@
 .mood {
+  overflow-x: hidden; // 阻止横向滚动
+  max-width: 100%;
+  box-sizing: border-box;
   .mood-title {
     padding: 18px;
     display: flex;
@@ -21,3 +24,18 @@
     left: 6%;
   }
 }
+
+.homeHeader {
+  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;
+  }
+}

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

@@ -1,28 +1,32 @@
 import MainLayout from "@/layout/main/mainLayout";
 import styles from "./index.module.less";
-import moodFilterPng from "@/assets/translate/mood-filter.png";
-import moodChartPng from "@/assets/translate/mood-chart.png";
-import moodAbstractPng from "@/assets/translate/mood-abstract.png";
-import moodPopupPng from "@/assets/translate/mood-popup.png";
+// import moodFilterPng from "@/assets/translate/mood-filter.png";
+// import moodChartPng from "@/assets/translate/mood-chart.png";
+// import moodAbstractPng from "@/assets/translate/mood-abstract.png";
+// import moodPopupPng from "@/assets/translate/mood-popup.png";
 import { Image, Space } from "antd-mobile";
 import { Switch, Filter, More } from "@icon-park/react";
 import { useState } from "react";
 import { XPopup } from "@workspace/shared";
 
 const Moods = () => {
+  const moodFilterPng = "http://qiniu.bydj.tashowz.com/assets/translate/mood-filter.png";
+  const moodChartPng = "http://qiniu.bydj.tashowz.com/assets/translate/mood-chart.png";
+  const moodAbstractPng = "http://qiniu.bydj.tashowz.com/assets/translate/mood-abstract.png";
+  const moodPopupPng = "http://qiniu.bydj.tashowz.com/assets/translate/mood-popup.png";
+
   const [visible, setVisible] = useState(false);
 
-  const right = (
-    <div style={{ fontSize: 16 }}>
-      <Space style={{ "--gap": "16px" }}>
-        <Filter fill="#333" />
-        <More fill="#333" />
-      </Space>
-    </div>
-  );
-
   return (
-    <MainLayout isShowNavBar={true} title="情绪" navBarRight={right}>
+    <MainLayout>
+      <div className={styles.homeHeader}>
+        <h3>情绪监控</h3>
+        <Space style={{ fontSize: "20px", "--gap": "16px" }}>
+          <Filter fill="#333" />
+          <More fill="#333" />
+        </Space>
+      </div>
+
       <div className={styles.mood}>
         <div className={styles["mood-filter"]}>
           <div onClick={() => setVisible(true)} className={styles["mood-mask-1"]}></div>

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

@@ -0,0 +1,32 @@
+.order {
+  background-color: #f5f5f5;
+  padding: 0;
+  box-sizing: border-box;
+  min-height: 100%;
+  .tab-box {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    // 隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    // 对于 antd-mobile 的 Image 组件包装器
+    .adm-image {
+      display: inline-block;
+      vertical-align: top;
+
+      // 图片自适应高度
+      img {
+        height: auto;
+        width: auto;
+        max-width: none; // 允许图片超过容器宽度
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image } from "antd-mobile";
+// import tabsSvg from "@/assets/order/tabs.svg";
+// import contant from "@/assets/order/contant.svg";
+import { useNavigate } from "react-router-dom";
+
+function Order() {
+  const tabsSvg = "http://qiniu.bydj.tashowz.com/assets/order/tabs.svg";
+  const contant = "http://qiniu.bydj.tashowz.com/assets/order/contant.svg";
+
+  const navigate = useNavigate();
+  return (
+    <MainLayout isShowNavBar={true} title="我的订单">
+      <div className="order">
+        <div className="tab-box">
+          <Image alt="tabs" draggable={false} src={tabsSvg}></Image>
+        </div>
+        <Image onClick={() => navigate("/order/detail")} src={contant}></Image>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default Order;

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

@@ -0,0 +1,14 @@
+.order-detail {
+  background-color: #f5f5f5;
+  padding: 0;
+  box-sizing: border-box;
+  min-height: 100%;
+  .order-contant {
+    padding-bottom: 90px;
+  }
+  .order-bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,29 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image } from "antd-mobile";
+// import gdSvg from "@/assets/order/gd.svg";
+// import gdPng from "@/assets/order/gd.png";
+// import bottomSvg from "@/assets/order/bottom.svg";
+
+function OrderDetail() {
+  const gdSvg = "http://qiniu.bydj.tashowz.com/assets/order/gd.svg";
+  const gdPng = "http://qiniu.bydj.tashowz.com/assets/order/gd.png";
+  const bottomSvg = "http://qiniu.bydj.tashowz.com/assets/order/bottom.svg";
+
+  return (
+    <MainLayout isShowNavBar={true} title="订单详情">
+      <div className="order-detail">
+        <div className="order-contant">
+          <Image src={gdPng}></Image>
+          <Image src={gdSvg}></Image>
+        </div>
+
+        <div className="order-bottom">
+          <Image src={bottomSvg}></Image>
+        </div>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default OrderDetail;

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

@@ -0,0 +1,64 @@
+.payment {
+  background-color: #f5f5f5;
+  padding: 0;
+  box-sizing: border-box;
+  min-height: 100%;
+  .payment-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  .payment-content {
+    padding: 12px;
+    padding-bottom: 160px;
+    .payment-cart {
+      position: relative;
+      margin-bottom: 10px;
+      .mask {
+        position: absolute;
+        z-index: 99;
+        width: 100%;
+        height: 45.5%;
+        top: 21%;
+      }
+    }
+  }
+  .payment-bottom {
+    position: fixed;
+    bottom: 0;
+  }
+}
+
+.popup-content {
+  max-height: 60vh;
+  overflow: auto;
+}
+
+.popup-header {
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.popup-bottom {
+  display: flex;
+  padding: 16px;
+  // 设置中间间隔
+  .popup-button {
+    flex: 1;
+    &:last-child {
+      margin-right: 0;
+    }
+    .cancel-button {
+      --background-color: #fff;
+      --border-color: #e9e9e9;
+      --text-color: #000000;
+    }
+    .confirm-button {
+      --background-color: #f5222d;
+      --border-color: #f5222d;
+      --text-color: #fff;
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Button, Image, Popup } from "antd-mobile";
+// import HeaderSvg from "@/assets/payment/header.svg";
+// import Cart1Svg from "@/assets/payment/cart-1.svg";
+// import Cart2Svg from "@/assets/payment/cart-2.svg";
+// import Cart3Png from "@/assets/payment/cart-3.png";
+// import BottomPng from "@/assets/payment/bottom.png";
+// import PopupPng from "@/assets/payment/popup.png";
+import { CloseOutline } from "antd-mobile-icons";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface DefinedProps {
+  visible: boolean;
+  title: string;
+  children: React.ReactNode;
+  showBottom?: boolean;
+  onClose: () => void;
+}
+function MyPopup(props: DefinedProps) {
+  const { visible, title, children, onClose, showBottom = false } = props;
+  return (
+    <Popup visible={visible} closeOnMaskClick={true} className="xpopup" onMaskClick={onClose}>
+      <div className="popup-header">
+        <h3>{title}</h3>
+        <span onClick={onClose}>
+          <CloseOutline style={{ fontSize: "16px" }} />
+        </span>
+      </div>
+      <div className="popup-content">{children}</div>
+
+      {showBottom && (
+        <div className="popup-bottom">
+          <div className="popup-button">
+            <Button onClick={onClose} block size="large" shape="rounded" className="confirm-button">
+              确 定
+            </Button>
+          </div>
+        </div>
+      )}
+    </Popup>
+  );
+}
+
+function Payment() {
+  const HeaderSvg = "http://qiniu.bydj.tashowz.com/assets/payment/header.svg";
+  const Cart1Svg = "http://qiniu.bydj.tashowz.com/assets/payment/cart-1.svg";
+  const Cart2Svg = "http://qiniu.bydj.tashowz.com/assets/payment/cart-2.svg";
+  const Cart3Png = "http://qiniu.bydj.tashowz.com/assets/payment/cart-3.png";
+  const BottomPng = "http://qiniu.bydj.tashowz.com/assets/payment/bottom.png";
+  const PopupPng = "http://qiniu.bydj.tashowz.com/assets/payment/popup.png";
+
+  const [visible, setVisible] = useState(false);
+
+  const navigate = useNavigate();
+
+  const onLink = (link: string) => {
+    navigate(link);
+  };
+
+  return (
+    <MainLayout isShowNavBar={true} title="选择服务">
+      <div className="payment">
+        <div className="payment-header">
+          <Image src={HeaderSvg} />
+        </div>
+        <div className="payment-content">
+          <div
+            onClick={() => {
+              setVisible(true);
+            }}
+            className="payment-cart"
+          >
+            <div className="mask"></div>
+            <Image src={Cart1Svg}></Image>
+          </div>
+          <div className="payment-cart">
+            <Image src={Cart2Svg}></Image>
+          </div>
+          <div className="payment-cart">
+            <Image src={Cart3Png}></Image>
+          </div>
+        </div>
+        <div className="payment-bottom">
+          <Image onClick={() => onLink("/result")} src={BottomPng}></Image>
+        </div>
+
+        <MyPopup
+          title="选择品种"
+          visible={visible}
+          onClose={() => {
+            setVisible(false);
+          }}
+          showBottom={true}
+        >
+          <div className="popup-content">
+            <Image src={PopupPng}></Image>
+          </div>
+        </MyPopup>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default Payment;

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

@@ -0,0 +1,13 @@
+.result {
+  min-height: 100%;
+  padding: 0 24px;
+  padding-top: 92px;
+
+  .bottom {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+  }
+}

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

@@ -0,0 +1,34 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image } from "antd-mobile";
+
+// import TitlePng from "@/assets/result/title.png";
+// import ContentSvg from "@/assets/result/content.svg";
+// import BottomSvg from "@/assets/result/bottom.svg";
+import { useNavigate } from "react-router-dom";
+
+function Result() {
+  const TitlePng = "http://qiniu.bydj.tashowz.com/assets/result/title.png";
+  const ContentSvg = "http://qiniu.bydj.tashowz.com/assets/result/content.svg";
+  const BottomSvg = "http://qiniu.bydj.tashowz.com/assets/result/bottom.svg";
+
+  const navigate = useNavigate();
+
+  const onLink = (link: string) => {
+    navigate(link);
+  };
+
+  return (
+    <MainLayout>
+      <div className="result">
+        <Image src={TitlePng} className="title" />
+        <Image style={{ marginTop: "30px" }} src={ContentSvg} className="content" />
+        <div className="bottom">
+          <Image onClick={() => onLink("/service")} src={BottomSvg} />
+        </div>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default Result;

projects/translate-h5/src/view/service/index.module.less

@@ -0,0 +1,29 @@
+.service {
+  background-color: #f5f5f5;
+  padding: 12px 0;
+  box-sizing: border-box;
+  min-height: 100%;
+}
+
+.homeHeader {
+  display: flex;
+  padding: 12px;
+  position: sticky;
+  top: 0px;
+  background: #f5f5f5;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 99;
+  h3 {
+    font-size: 20px;
+    font-size: 20px;
+  }
+  .headerItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    p {
+      font-size: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+import { Space, Image } from "antd-mobile";
+import { HeadsetOne, TextMessage, TransactionOrder } from "@icon-park/react";
+import { useNavigate } from "react-router-dom";
+
+function Service() {
+  const navigate = useNavigate();
+
+  const content = "http://qiniu.bydj.tashowz.com/assets/service/content.png";
+
+  const onLink = (link: string) => {
+    navigate(link);
+  };
+
+  return (
+    <MainLayout>
+      <div className={styles.homeHeader}>
+        <h3>宠物服务</h3>
+        <Space style={{ fontSize: "20px", "--gap": "16px" }}>
+          <div className={styles.headerItem}>
+            <HeadsetOne fill="#333" />
+            <p>客服</p>
+          </div>
+
+          <div className={styles.headerItem}>
+            <TextMessage fill="#333" />
+            <p>消息</p>
+          </div>
+
+          <div onClick={() => onLink("/order")} className={styles.headerItem}>
+            <TransactionOrder fill="#333" />
+            <p>订单</p>
+          </div>
+        </Space>
+      </div>
+      <div className={styles.service}>
+        <Image onClick={() => onLink("/service/detail")} src={content}></Image>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default Service;

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

@@ -0,0 +1,64 @@
+.service-detail {
+  background-color: #f5f5f5;
+  padding: 0;
+  box-sizing: border-box;
+  min-height: 100%;
+  .swipers {
+    padding-top: 20px;
+    box-sizing: border-box;
+    .swiper-item {
+      margin: 0 10px;
+    }
+  }
+
+  .content {
+    padding: 8px;
+
+    padding-bottom: 92px;
+    .service-item {
+      background-color: #fff;
+      border-radius: 16px;
+      margin-top: 12px;
+      &:first-child {
+        padding: 16px;
+        .tabs {
+          margin: 12px 0;
+          width: 100%;
+          overflow-x: auto;
+          overflow-y: hidden;
+          white-space: nowrap;
+          // 隐藏滚动条
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          // 对于 antd-mobile 的 Image 组件包装器
+          .adm-image {
+            display: inline-block;
+            vertical-align: top;
+
+            // 图片自适应高度
+            img {
+              height: auto;
+              width: auto;
+              max-width: none; // 允许图片超过容器宽度
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .bottom {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 16px;
+    padding-top: 16px;
+    padding-bottom: 36px;
+  }
+}

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

@@ -0,0 +1,93 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image, Swiper } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+
+function ServiceDetail() {
+  const Swiper1Png = "http://qiniu.bydj.tashowz.com/assets/service/swiper-1.png";
+  const Swiper2Png = "http://qiniu.bydj.tashowz.com/assets/service/swiper-2.png";
+  const Swiper3Png = "http://qiniu.bydj.tashowz.com/assets/service/swiper-3.png";
+  const DetailPricePng = "http://qiniu.bydj.tashowz.com/assets/service/detail-price.png";
+  const DetailTapsSvg = "http://qiniu.bydj.tashowz.com/assets/service/detail-taps.svg";
+  const DetailTitlePng = "http://qiniu.bydj.tashowz.com/assets/service/detail-title.png";
+  const SzzPng = "http://qiniu.bydj.tashowz.com/assets/service/szz.png";
+  const SzSvg = "http://qiniu.bydj.tashowz.com/assets/service/sz.svg";
+  const NoBoxSvg = "http://qiniu.bydj.tashowz.com/assets/service/noBox.svg";
+  const BottomLSvg = "http://qiniu.bydj.tashowz.com/assets/service/bottom-l.svg";
+  const BottomRSvg = "http://qiniu.bydj.tashowz.com/assets/service/bottom-r.svg";
+
+  // 批量导入
+  // const images = import.meta.glob("@/assets/service/detail/*.png", { eager: true, as: "url" });
+
+  const images = Array.from({ length: 19 }, (_, index) => {
+    const num = index + 1;
+    return `http://qiniu.bydj.tashowz.com/assets/service/detail/${num}.png`;
+  });
+
+  const navigate = useNavigate();
+
+  const onLink = (link: string) => {
+    navigate(link);
+  };
+
+  const swipers = [{ src: Swiper1Png }, { src: Swiper2Png }, { src: Swiper3Png }];
+
+  return (
+    <MainLayout isShowNavBar={true} title="服务详情">
+      <div className="service-detail">
+        <div className="swipers">
+          <Swiper
+            trackOffset={5}
+            stuckAtBoundary={false}
+            slideSize={90}
+            total={3}
+            style={{
+              "--border-radius": "8px",
+            }}
+            defaultIndex={1}
+          >
+            {swipers.map((item, index) => {
+              return (
+                <Swiper.Item key={index}>
+                  <div className="swiper-item">
+                    <Image src={item.src} />
+                  </div>
+                </Swiper.Item>
+              );
+            })}
+          </Swiper>
+        </div>
+        <div className="content">
+          <div className="service-item">
+            <Image src={DetailPricePng}></Image>
+            <div className="tabs">
+              <Image src={DetailTapsSvg}></Image>
+            </div>
+            <Image src={DetailTitlePng}></Image>
+          </div>
+
+          <div className="service-item">
+            <Image src={SzSvg}></Image>
+          </div>
+
+          <div className="service-item">
+            <Image src={SzzPng}></Image>
+          </div>
+
+          <div className="service-item">
+            {images.map((src, index) => {
+              return <Image key={index} src={src} />;
+            })}
+          </div>
+          <Image src={NoBoxSvg}></Image>
+        </div>
+        <div className="bottom">
+          <Image src={BottomLSvg}></Image>
+          <Image onClick={() => onLink("/payment")} src={BottomRSvg}></Image>
+        </div>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default ServiceDetail;

projects/translate-h5/src/view/user/index.module.less

@@ -0,0 +1,30 @@
+.user {
+  background-color: #f5f5f5;
+  padding: 0;
+  box-sizing: border-box;
+  min-height: 100%;
+}
+
+.homeHeader {
+  display: flex;
+  padding: 12px;
+  padding-left: 0;
+  position: sticky;
+  top: 0px;
+  background: #f5f5f5;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 99;
+  h3 {
+    font-size: 20px;
+    font-size: 20px;
+  }
+  .headerItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    p {
+      font-size: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+import { Space, Image } from "antd-mobile";
+import { HeadsetOne, Config, TextMessage } from "@icon-park/react";
+import { useNavigate } from "react-router-dom";
+
+function User() {
+  const headerSvg = "http://qiniu.bydj.tashowz.com/assets/user/header.svg";
+  const cartPng = "http://qiniu.bydj.tashowz.com/assets/user/cart.png";
+  const toolPng = "http://qiniu.bydj.tashowz.com/assets/user/tool.png";
+
+  const navigate = useNavigate();
+  const onLink = (link: string) => {
+    // safeNavigate(link);
+    navigate(link);
+  };
+
+  return (
+    <MainLayout>
+      <div className={styles.user}>
+        <div className={styles.homeHeader}>
+          <Image src={headerSvg}></Image>
+          <Space style={{ fontSize: "20px", "--gap": "16px" }}>
+            <div className={styles.headerItem}>
+              <HeadsetOne fill="#333" />
+              <p>客服</p>
+            </div>
+
+            <div className={styles.headerItem}>
+              <TextMessage fill="#333" />
+              <p>消息</p>
+            </div>
+
+            <div className={styles.headerItem}>
+              <Config fill="#333" />
+              <p>设置</p>
+            </div>
+          </Space>
+        </div>
+        <Image onClick={() => onLink("/order")} src={cartPng}></Image>
+        <Image src={toolPng}></Image>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default User;

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

@@ -0,0 +1,12 @@
+.wx {
+  width: 100%;
+  height: 100%;
+  background: #00000080;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #ffffffdd;
+  font-size: 16px;
+  gap: 10px;
+}

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

@@ -0,0 +1,15 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+
+function WXIndex() {
+  return (
+    <MainLayout>
+      <div className="wx">
+        <div>1.点击右上角</div>
+        <div>2.点击使用浏览器打开</div>
+      </div>
+    </MainLayout>
+  );
+}
+
+export default WXIndex;