feat: 10.28beta版本

pnpm-lock.yaml

@@ -148,7 +148,11 @@ importers:
 
   packages/utils: {}
 
-  projects/translate-h5: {}
+  projects/translate-h5:
+    dependencies:
+      browser-id3-writer:
+        specifier: ^6.3.1
+        version: 6.3.1
 
 packages:
 
@@ -1075,6 +1079,9 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  browser-id3-writer@6.3.1:
+    resolution: {integrity: sha512-sRA4Uq9Q3NsmXiVpLvIDxzomtgCdbw6SY85A6fw7dUQGRVoOBg1/buFv6spPhYiSo6FlVtN5OJQTvvhbmfx9rQ==}
+
   browserslist@4.25.4:
     resolution: {integrity: sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -1635,6 +1642,7 @@ packages:
 
   intersection-observer@0.12.2:
     resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
+    deprecated: The Intersection Observer polyfill is no longer needed and can safely be removed. Intersection Observer has been Baseline since 2019.
 
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
@@ -3532,6 +3540,8 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  browser-id3-writer@6.3.1: {}
+
   browserslist@4.25.4:
     dependencies:
       caniuse-lite: 1.0.30001739

projects/translate-h5/package.json

@@ -7,5 +7,8 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
+  },
+  "dependencies": {
+    "browser-id3-writer": "^6.3.1"
   }
 }

projects/translate-h5/src/api/getDialog.ts

@@ -0,0 +1,40 @@
+import useAxios from "axios-hooks";
+import { Result } from "@/types/http";
+
+export interface MockResult {
+  id: number;
+}
+
+export interface MockPage {
+  id: number;
+}
+
+/**
+ * fetch the data
+ * 详细使用可以查看 useAxios 的文档
+ */
+export const useGetDialog = () => {
+  const url = `/app-api/ai/dialog/getDialog`;
+
+  const [{ data, loading, error }, execute] = useAxios<Result<any>>(
+    {
+      url,
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+    { manual: true } // 手动触发
+  );
+
+  const getDialog = (params: { pageNo: number; pageSize: number }) => {
+    return execute({
+      params,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  };
+
+  return { data, loading, error, getDialog };
+};

projects/translate-h5/src/api/translate.ts

@@ -14,7 +14,7 @@ export interface MockPage {
  * 详细使用可以查看 useAxios 的文档
  */
 export const useUploadAudio = () => {
-  const url = `/app-api/ai/sample/translate`;
+  const url = `/app-api/ai/dialog/translate`;
 
   const [{ data, loading, error }, execute] = useAxios<Result<any>>(
     {

projects/translate-h5/src/http/axios-instance.ts

@@ -46,6 +46,10 @@ class AxiosInstance {
     return this.instance;
   }
 }
-
+console.log(import.meta.env.VITE_BASE_URL, "import.meta.env.VITE_BASE_URL");
-const baseURL = import.meta.env.VITE_BASE_URL || "http://192.168.1.231:48080";
+// https://petshy.tashowz.com
+//192.168.1.231:48080
+// || "http://192.168.1.231:48080"
+const baseURL = import.meta.env.VITE_BASE_URL || "https://petshy.tashowz.com";
+// const baseURL = import.meta.env.VITE_BASE_URL || "http://192.168.1.231:48080";
 export const axiosInstance = new AxiosInstance(baseURL).getInstance();

projects/translate-h5/src/index.css

@@ -91,12 +91,13 @@ img {
 
     --adm-font-size-main: var(--adm-font-size-5); */
 
-  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue",
+  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial,
-    helvetica, segoe ui, arial, roboto, "PingFang SC", "miui",
+    roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
-    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
 }
 .i-icon {
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 svg {
   height: 100%;

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

@@ -1,20 +0,0 @@
-.main-layout {
-  height: 100%;
-  .layout-content {
-    height: 100%;
-    overflow-y: auto;
-    // padding-bottom: 150px;
-    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
-    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
-  }
-
-  .layout-tab {
-    flex: 0 0 auto;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    z-index: 1000;
-    background-color: #fff;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-  }
-}

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

@@ -0,0 +1,43 @@
+.main-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .layout-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
+    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
+  }
+
+  .layout-tab {
+    flex: 0 0 auto;
+    width: 100%;
+    z-index: 1000;
+    background-color: #fff;
+    :global {
+      .adm-tab-bar {
+        // 去除默认阴影
+        box-shadow: none;
+        background-color: #fff;
+        padding: 8px 16px;
+
+        .adm-tab-bar-item-active {
+          // 添加选中时的背景圆角
+          &:before {
+            content: "";
+            position: absolute;
+
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #0000000a;
+            border-radius: 100px;
+            z-index: 99;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,7 +1,10 @@
 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 "./index.less";
+import styles from "./index.module.less";
+
+import { Translate, Electrocardiogram, GithubOne, Blossom, User } from "@icon-park/react";
 
 interface MainLayoutProps {
   children: React.ReactNode;
@@ -20,30 +23,44 @@ 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: "/mood",
+      title: "情绪监控",
+      icon: <Electrocardiogram />,
+    },
+    {
+      key: "/archives",
+      title: "我的宠物",
+      icon: <GithubOne />,
+    },
+    {
+      key: "/service",
+      title: "宠物服务",
+      icon: <Blossom />,
+    },
+    {
+      key: "/user",
+      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 showTabBarRoutes = tabs.map((tab) => tab.key);
-  //   },
+
-  // ];
+  const setRouteActive = (value: string) => {
+    console.log(value);
+
+    setPathname(value);
+    navigate(value);
+  };
 
   const goBack = () => {
     // 打印路由栈
@@ -56,28 +73,25 @@ const MainLayout: React.FC<MainLayoutProps> = ({
     }
   };
   return (
-    <div className="main-layout">
+    <div className={styles["main-layout"]}>
       <SafeArea position="top" />
       {isShowNavBar ? (
-        <NavBar onBack={goBack} right={navBarRight}>
+        <NavBar onBack={goBack} style={{ backgroundColor: "#f5f5f5" }} right={navBarRight}>
           {title}
         </NavBar>
       ) : (
         ""
       )}
-      <div className="layout-content">{children}</div>
+      <div className={styles["layout-content"]}>{children}</div>
-
+      {showTabBarRoutes.includes(location.pathname) && (
-      <div className="footer layout-tab">
+        <div className={styles["layout-tab"]}>
-        {/* <TabBar
+          <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)} safeArea={true}>
-          activeKey={pathname}
+            {tabs.map((item) => (
-          onChange={(value) => setRouteActive(value)}
+              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
-          safeArea={true}
+            ))}
-        >
+          </TabBar>
-          {tabs.map((item) => (
+        </div>
-            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+      )}
-          ))}
-        </TabBar> */}
-      </div>
     </div>
   );
 };

projects/translate-h5/src/route/auth.tsx

@@ -27,6 +27,18 @@ const AuthRoute: React.FC<AuthRouteProps> = ({ children, auth, meta }) => {
     }
   }, [meta]);
   useEffect(() => {
+    // 识别微信浏览器
+    const userAgent = navigator.userAgent.toLowerCase();
+    console.log(userAgent.includes("micromessenger"));
+    if (userAgent.includes("micromessenger")) {
+      navigate("/wxIndex");
+    } else {
+      // 如果是'/wxIndex'跳转到首页
+      if (location.pathname === "/wxIndex") {
+        navigate("/");
+      }
+    }
+
     // 检查角色权限
     if (auth && !isAuthenticated) {
       navigate("/login"); // 如果未认证且路由需要认证，则重定向到登录

projects/translate-h5/src/route/routes.tsx

@@ -13,9 +13,18 @@ export interface AppRoute {
 const Home = lazy(() => import("@/view/home"));
 const Page404 = lazy(() => import("@/view/error/page404"));
 const TranslateDetail = lazy(() => import("@/view/home/detail"));
-const TranslateMood = lazy(() => import("@/view/home/mood"));
+const TranslateMood = lazy(() => import("@/view/mood"));
-const TranslateArchives = lazy(() => import("@/view/home/archives"));
+const TranslateArchives = lazy(() => import("@/view/archives"));
-const TranslateArchivesAdd = lazy(() => import("@/view/home/addArchives"));
+const TranslateArchivesAdd = lazy(() => import("@/view/addArchives"));
+const Service = lazy(() => import("@/view/service"));
+const ServiceDetail = lazy(() => import("@/view/serviceDetail"));
+const User = lazy(() => import("@/view/user"));
+const Order = lazy(() => import("@/view/order"));
+const OrderDetail = lazy(() => import("@/view/orderDetail"));
+const Payment = lazy(() => import("@/view/payment"));
+const Result = lazy(() => import("@/view/result"));
+const WXIndex = lazy(() => import("@/view/wxIndex/index"));
+
 export const routes: AppRoute[] = [
   {
     path: "/",
@@ -25,6 +34,14 @@ export const routes: AppRoute[] = [
       title: "宠物翻译",
     },
   },
+  {
+    path: "/wxIndex",
+    element: <WXIndex />,
+    auth: false,
+    meta: {
+      title: "微信跳转",
+    },
+  },
   {
     path: "/translate",
     element: <Home />,
@@ -35,7 +52,7 @@ export const routes: AppRoute[] = [
   },
   { path: "/translate/detail", element: <TranslateDetail />, auth: false },
   {
-    path: "/translate/mood",
+    path: "/mood",
     element: <TranslateMood />,
     auth: false,
     meta: {
@@ -43,7 +60,7 @@ export const routes: AppRoute[] = [
     },
   },
   {
-    path: "/translate/archives",
+    path: "/archives",
     element: <TranslateArchives />,
     auth: false,
     meta: {
@@ -51,12 +68,55 @@ export const routes: AppRoute[] = [
     },
   },
   {
-    path: "/translate/addArchives",
+    path: "/addArchives",
     element: <TranslateArchivesAdd />,
     auth: false,
     meta: {
       title: "新建档案",
     },
   },
+  {
+    path: "/service",
+    element: <Service />,
+    auth: false,
+    meta: {
+      title: "宠物服务",
+    },
+  },
+  {
+    path: "/service/detail",
+    element: <ServiceDetail />,
+    auth: false,
+    meta: {
+      title: "服务详情",
+    },
+  },
+  {
+    path: "/user",
+    element: <User />,
+    auth: false,
+    meta: {
+      title: "个人中心",
+    },
+  },
+  {
+    path: "/order",
+    element: <Order />,
+    auth: false,
+    meta: {
+      title: "我的订单",
+    },
+  },
+
+  { path: "/order/detail", element: <OrderDetail />, auth: false, meta: { title: "订单详情" } },
+  {
+    path: "/payment",
+    element: <Payment />,
+    auth: false,
+    meta: {
+      title: "选择服务",
+    },
+  },
+  { path: "/result", element: <Result />, auth: false, meta: { title: "支付结果" } },
   { path: "*", element: <Page404 />, auth: false },
 ];

projects/translate-h5/src/types/http.d.ts

@@ -1,14 +1,14 @@
 interface Page<T> {
-    total: number;
+  total: number;
-    size: number;
+  size: number;
-    current: number;
+  current: number;
-    pages: number;
+  pages: number;
-    records: T[];
+  records: T[];
 }
 
 export interface Result<T> {
-    success: boolean;
+  success: boolean;
-    code: number;
+  code: number;
-    message: string;
+  message: string;
-    data: T;
+  data: T;
-}
+}

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 }}>
+    <div style={{ fontSize: 20 }}>
-      <Space style={{ "--gap": "16px" }}>
+      <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 { Filter, HamburgerButton } from "@icon-park/react";
-import { useNavigate } from "react-router-dom";
+
 // 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,146 +1,209 @@
 import { useEffect, useRef, useState } from "react";
-import { Divider, Image, SpinLoading, Toast } from "antd-mobile";
+import { Avatar, Divider, Space, SpinLoading, Toast, Image } 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 { 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[];
   isRecording: boolean;
+  onRefresh: (formData: FormData, messageId: number) => void;
 }
 
 function Index(props: DefinedProps) {
   const { data, isRecording } = props;
   const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({});
-  const [isPlaying, setIsPlating] = useState(false);
   const [currentPlayingId, setCurrentPlayingId] = useState<number>();
+  const emotionList = [
+    Emotion1Png,
+    Emotion4Png,
+    Emotion7Png,
+    Emotion2Png,
+    Emotion5Png,
+    Emotion8Png,
+    Emotion3Png,
+    Emotion6Png,
+    Emotion9Png,
+  ];
 
   useEffect(() => {
-    if (isRecording) {
+    if (isRecording && currentPlayingId) {
-      stopAllAudio();
+      audioRefs.current[currentPlayingId].pause();
+      audioRefs.current[currentPlayingId].currentTime = 0;
+      setCurrentPlayingId(undefined);
     }
-  }, [isRecording]);
+  }, [isRecording, currentPlayingId]);
-  const onVoiceChange = () => {
+
-    setIsPlating(!isPlaying);
+  const playAudio = async (id: number, audioUrl: string) => {
-  };
-  const playAudio = (messageId: number, audioUrl: string) => {
     if (isRecording) {
       Toast.show("录音中，无法播放音频");
       return;
     }
-
-    if (currentPlayingId === messageId) {
-      if (audioRefs.current[messageId]) {
-        audioRefs.current[messageId].pause();
-        audioRefs.current[messageId].currentTime = 0;
-      }
-      setCurrentPlayingId(undefined);
-      setIsPlating(false);
-      return;
-    }
-
-    stopAllAudio();
-    if (!audioRefs.current[messageId]) {
-      audioRefs.current[messageId] = new Audio(audioUrl);
-    }
-
-    const audio = audioRefs.current[messageId];
-    audio.currentTime = 0;
-
-    audio.onended = () => {
-      setCurrentPlayingId(undefined);
-      setIsPlating(false);
-    };
-
-    audio.onerror = (error) => {
-      console.error("音频播放错误:", error);
-      Toast.show("音频播放失败");
-      setIsPlating(false);
-    };
-
-    audio
-      .play()
-      .then(() => {
-        setCurrentPlayingId(messageId);
-        setIsPlating(true);
-      })
-      .catch((error) => {
-        console.error("音频播放失败:", error);
-        Toast.show("音频播放失败");
-      });
-  };
-  const stopAllAudio = () => {
     if (currentPlayingId && audioRefs.current[currentPlayingId]) {
       audioRefs.current[currentPlayingId].pause();
       audioRefs.current[currentPlayingId].currentTime = 0;
-      setIsPlating(false);
+    }
+    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 = () => {
+        setCurrentPlayingId(undefined);
+      };
+    } else {
+      audioRefs.current[id].pause();
+      audioRefs.current[id].currentTime = 0;
       setCurrentPlayingId(undefined);
     }
-
-    Object.values(audioRefs.current).forEach((audio) => {
-      if (!audio.paused) {
-        audio.pause();
-        audio.currentTime = 0;
-      }
-    });
   };
-  const renderAvatar = (type?: "pig" | "cat" | "dog") => {
+
-    if (type === "pig") {
+  const renderAvatar = (item: Message) => {
-      <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
+    return (
+      <Avatar
+        src={item.petAvatar || DefAvatar}
+        style={{ "--border-radius": "32px", flexShrink: "0" }}
+      />
+    );
+  };
+
+  const refreshMessage = async (item: Message, e: React.MouseEvent) => {
+    e.stopPropagation();
+    console.log("item", item);
+
+    if (!item.file || !item.dialogId || !item.contentText) {
+      Toast.show("文件不存在，无法重新翻译");
+      return;
     }
-    if (type === "cat") {
+    const formData = new FormData();
-      return <Image src={catSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
+    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) => {
+    if (item.isTranslating) {
+      return (
+        <div className="translate">
+          <SpinLoading color="default" style={{ "--size": "12px" }} />
+          <span>翻译中...</span>
+        </div>
+      );
+    } else {
+      if (item.transStatus === 1) {
+        return item.transResult?.length ? (
+          <div className="translate" style={{ verticalAlign: "middle", width: "240px" }}>
+            <span>{item.transResult}</span>
+            <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, e)} size="12" fill="#333" />
+          </Space>
+        );
+      } else {
+        console.log("item.transResult", item);
+
+        return (
+          <div
+            className="translate"
+            style={{ verticalAlign: "middle" }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <span>{item.transResult}</span>
+            <Refresh onClick={(e) => refreshMessage(item, e)} size="12" fill="#333" />
+          </div>
+        );
+      }
     }
-    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)}>
+        <React.Fragment key={index}>
-          {renderAvatar(item.type)}
+          {!(item.isTranslating && !item.isRefresh) && (
-          <div className="rig">
+            <div className="message-title">
-            <div>
+              <Space
-              <span className="name">{item.name}</span>
+                style={{
-              <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+                  fontSize: "10px",
-              <span className="">{item.timestamp}</span>
+                  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">
+          )}
-              <VoiceIcon
-                onChange={onVoiceChange}
-                isPlaying={isPlaying && currentPlayingId === item.id}
-              />
-              <div className="time">{item.duration}''</div>
-            </div>
-            {item.isTranslating ? (
-              <div className="translate">
-                <SpinLoading color="default" style={{ "--size": "12px" }} />
-                <span>翻译中...</span>
-              </div>
-            ) : (
-              <div className="translate">{item.translatedText}</div>
-            )}
-          </div>
-        </div>
-      ))}
 
-      <div className="item">
+          <div className="item" key={index}>
-        <div className="avatar"></div>
+            {renderAvatar(item)}
-        <div className="rig">
+            <div className="rig">
-          <div>
+              <div>
-            <span className="name">生无可恋喵</span>
+                <span className="name">
-            <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+                  {item.isTranslating && !item.isRefresh ? "" : item.petName ?? ""}
-            <span className="">15:00</span>
+                </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>
           </div>
-          <div className="voice-container">
+        </React.Fragment>
-            <VoiceIcon isPlaying={false} />
+      ))}
-            <div className="tips">{isRecording ? "录制中..." : "轻点麦克风录制"}</div>
+      <div style={{ height: "130px", width: "100%" }}></div>
-          </div>
+      ....
-        </div>
-      </div>
     </div>
   );
 }

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

@@ -1,11 +1,19 @@
 .voice-record {
-  position: relative;
+  position: fixed;
+  bottom: 60px;
+  width: 100%;
+  background: #fff;
   display: flex;
   align-items: center;
   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 防止被压缩 */
+  height: 100px; /* 保持原始高度 */
+  flex-basis: 100px; /* 明确指定基础大小，防止 flex 缩放影响 */
   .adm-progress-circle-info {
     height: 32px;
   }

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

@@ -1,20 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
 import { Button, Dialog, Image, ProgressCircle, Toast } from "antd-mobile";
 import microphoneSvg from "@/assets/translate/microphone.svg";
 import microphoneDisabledSvg from "@/assets/translate/microphoneDisabledSvg.svg";
 import { createStartRecordSound, createSendSound } from "@/utils/voice";
-import "./index.less";
-import { useUploadAudio } from "@/api/translate";
 import VConsole from "vconsole";
+import "./index.less";
 interface DefinedProps {
-  onRecordingComplete: (url: string, finalDuration: number) => void;
+  onRecordingComplete: (url: string, finalDuration: number, formData: FormData) => void;
   isRecording: boolean;
   onSetIsRecording: (flag: boolean) => void;
+  dialogId: number;
 }
 function Index(props: DefinedProps) {
-  const { isRecording } = props;
+  const { isRecording, dialogId } = props;
-  const { loading: _uploadLoading, error: _uploadError, uploadAudio } = useUploadAudio();
   const [hasPermission, setHasPermission] = useState<boolean>(false); //是否有权限
   const [isPermissioning, setIsPermissioning] = useState<boolean>(true); //获取权限中
   const [recordingDuration, setRecordingDuration] = useState<number>(0); //录音时长进度
@@ -36,12 +35,12 @@ function Index(props: DefinedProps) {
     checkMicrophonePermission();
   }, [hasPermission]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (isRecording) {
+  //   if (isRecording) {
-      recorderControls.startRecording();
+  //     recorderControls.startRecording();
-    } else {
+  //   } else {
-    }
+  //   }
-  }, [isRecording]);
+  // }, [isRecording]);
 
   //重置状态
   const onResetRecordingState = () => {
@@ -67,18 +66,35 @@ function Index(props: DefinedProps) {
       console.error("音效初始化失败:", error);
     }
   };
-  const handleUploadAudio = async (formData: FormData) => {
+  //开始录音
-    // 打印FormData内容
+  const onStartRecording = () => {
-
+    isCancelledRef.current = false;
-    console.log(formData);
+    if (recordingTimerRef.current) {
-    try {
+      clearInterval(recordingTimerRef.current);
-      const response = await uploadAudio(formData);
+      recordingTimerRef.current = undefined;
-      console.log("上传成功:", response.data);
-    } catch (error) {
-      console.error("上传失败:", error);
     }
+    props.onSetIsRecording(true);
+    recorderControls.startRecording();
+    recordingStartTimeRef.current = Date.now();
+    // 立即开始计时
+    recordingTimerRef.current = setInterval(() => {
+      setRecordingDuration((prev) => prev + 1);
+    }, 1000);
   };
-  const renderBtn = useCallback(() => {
+  // 使用 useMemo 缓存 Image 组件
+  const MicrophoneImage = useMemo(
+    () => (
+      <Image
+        height={80}
+        width={80}
+        src={microphoneSvg}
+        onClick={onStartRecording}
+        placeholder={<div style={{ width: 80, height: 80 }} />} // 添加占位符
+      />
+    ),
+    [microphoneSvg, onStartRecording]
+  );
+  const renderBtn = () => {
     if (!hasPermission) {
       //没有权限
       return (
@@ -107,10 +123,9 @@ function Index(props: DefinedProps) {
         </div>
       );
     } else {
-      //麦克风状态
+      return MicrophoneImage;
-      return <Image height={80} width={80} src={microphoneSvg} onClick={onStartRecording} />;
     }
-  }, [hasPermission, isRecording, recordingDuration]);
+  };
   const checkMicrophonePermission = useCallback(async () => {
     try {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -206,25 +221,79 @@ function Index(props: DefinedProps) {
     }
   };
 
-  //开始录音
+  // 添加音频转换函数
-  const onStartRecording = () => {
+  const convertToWav = async (blob: Blob): Promise<Blob> => {
-    isCancelledRef.current = false;
+    const arrayBuffer = await blob.arrayBuffer();
-    if (recordingTimerRef.current) {
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-      clearInterval(recordingTimerRef.current);
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      recordingTimerRef.current = undefined;
+
-    }
+    // 转换为 WAV 格式
-    props.onSetIsRecording(true);
+    const wavBuffer = audioBufferToWav(audioBuffer);
-    // recorderControls.startRecording();
+    return new Blob([wavBuffer], { type: "audio/wav" });
-    recordingStartTimeRef.current = Date.now();
-    // 立即开始计时
-    recordingTimerRef.current = setInterval(() => {
-      setRecordingDuration((prev) => prev + 1);
-    }, 1000);
   };
+
+  // WAV 转换辅助函数
+  const audioBufferToWav = (buffer: AudioBuffer): ArrayBuffer => {
+    const length = buffer.length;
+    const numberOfChannels = buffer.numberOfChannels;
+    const sampleRate = buffer.sampleRate;
+    const bitsPerSample = 16;
+    const byteRate = (sampleRate * numberOfChannels * bitsPerSample) / 8;
+    const blockAlign = (numberOfChannels * bitsPerSample) / 8;
+    const dataSize = length * numberOfChannels * (bitsPerSample / 8);
+    const bufferLength = 44 + dataSize;
+    const arrayBuffer = new ArrayBuffer(bufferLength);
+    const view = new DataView(arrayBuffer);
+    // RIFF identifier
+    writeString(view, 0, "RIFF");
+    // file length
+    view.setUint32(4, 36 + dataSize, true);
+    // RIFF type
+    writeString(view, 8, "WAVE");
+    // format chunk identifier
+    writeString(view, 12, "fmt ");
+    // format chunk length
+    view.setUint32(16, 16, true);
+    // sample format (raw)
+    view.setUint16(20, 1, true);
+    // channel count
+    view.setUint16(22, numberOfChannels, true);
+    // sample rate
+    view.setUint32(24, sampleRate, true);
+    // byte rate (sample rate * block align)
+    view.setUint32(28, byteRate, true);
+    // block align (channel count * bytes per sample)
+    view.setUint16(32, blockAlign, true);
+    // bits per sample
+    view.setUint16(34, bitsPerSample, true);
+    // data chunk identifier
+    writeString(view, 36, "data");
+    // data chunk length
+    view.setUint32(40, dataSize, true);
+
+    // write the PCM samples
+    let offset = 44;
+    for (let i = 0; i < length; i++) {
+      for (let channel = 0; channel < numberOfChannels; channel++) {
+        const sample = Math.max(-1, Math.min(1, buffer.getChannelData(channel)[i]));
+        view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
+        offset += 2;
+      }
+    }
+    return arrayBuffer;
+  };
+
+  const writeString = (view: DataView, offset: number, string: string) => {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  };
+
   const onStopRecording = useCallback(() => {
     recorderControls.stopRecording();
     onResetRecordingState();
   }, [recorderControls, recordingDuration]);
+
   //录音完成
   // 在发送时检查录音时长
   const onRecordingComplete = useCallback(
@@ -233,30 +302,32 @@ function Index(props: DefinedProps) {
         Toast.show("已取消");
         return;
       }
+
       // 检查blob有效性
       if (!blob || blob.size === 0) {
         Toast.show("录音数据无效，请重新录音");
-
         return;
       }
-      const formData = new FormData();
+      const arrayBuffer = await blob.arrayBuffer();
-      formData.append("file", blob);
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      await handleUploadAudio(formData);
+      const accurateDuration = audioBuffer.duration;
+      if (accurateDuration < 1) {
+        Toast.show("录音时间太短，请重新录音");
+        return;
+      }
+      // 转换为 WAV 格式以获得最佳兼容性
+      const wavBlob = await convertToWav(blob);
+      const formData: FormData = new FormData();
+      formData.append("file", wavBlob, new Date().getTime() + ".wav");
+      formData.append("dialogId", `${dialogId}`);
       const audioUrl = URL.createObjectURL(blob);
       const audio = new Audio();
       audio.src = audioUrl;
-      // 计算实际录音时长
+      playSound(sendSoundRef);
-
+      const contentDuration = Math.round(accurateDuration);
-      audio.addEventListener("loadedmetadata", () => {
+      formData.append("contentDuration", `${contentDuration}`);
-        if (audio.duration < 1) {
+      props.onRecordingComplete?.(audioUrl, contentDuration, formData);
-          Toast.show("录音时间太短，请重新录音");
-          return;
-        }
-        // alert(audio.duration);
-        playSound(sendSoundRef);
-        props.onRecordingComplete?.(audioUrl, Math.floor(audio.duration));
-      });
     },
     [isCancelledRef, isRecording, sendSoundRef]
   );

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

@@ -1,11 +1,12 @@
-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";
-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";
 
-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";
@@ -14,6 +15,7 @@ import SearchCom from "./component/search";
 interface DefinedProps {
   searchVisible: boolean;
 }
+
 const menuItems: FloatMenuItemConfig[] = [
   { icon: <Image src={dogSvg} />, type: "dog" },
   { icon: <Image src={catSvg} />, type: "cat" },
@@ -25,32 +27,99 @@ const menuItems: FloatMenuItemConfig[] = [
 ];
 function Index(props: DefinedProps) {
   const { searchVisible } = props;
+  const { loading: _uploadLoading, error: _uploadError, getDialog } = useGetDialog();
+  const { loading: _audioLoading, error: _audioError, uploadAudio } = useUploadAudio();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isRecording, setIsRecording] = useState(false); //是否录音中
-  const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
+  const [_currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
   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();
   }, []);
 
+  // 滚动到底部
+  const scrollToBottom = useCallback(() => {
+    const container = document.querySelector(".message");
+
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+      console.log("container", container.scrollHeight);
+    }
+  }, []);
+
+  // 添加初始化数据的逻辑
+  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({
+        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([]));
+    }
+  };
+
+  // 监听消息变化，自动滚动到底部
+  useEffect(() => {
+    if (messages.length > 0) {
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+    }
+  }, [stableMessagesString, scrollToBottom]);
+
   //完成录音
   const onRecordingComplete = useCallback(
-    (audioUrl: string, actualDuration: number) => {
+    async (audioUrl: string, actualDuration: number, formData: FormData) => {
+      console.log(audioUrl, "audioUrl");
       const newMessage: Message = {
         id: Date.now(),
-        type: "dog",
+        contentText: audioUrl,
-        audioUrl,
+        contentDuration: actualDuration,
-        name: "生无可恋喵",
-        duration: actualDuration,
-        timestamp: Date.now(),
         isTranslating: true,
+        terminal: "",
+        file: formData.get("file") as Blob,
       };
 
       setMessages((prev) => [...prev, newMessage]);
-      setTimeout(() => {
-        onTranslateAudio(newMessage.id);
-      }, 1000);
 
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+      await onTranslateAudio(formData, newMessage.id);
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
       Toast.show("语音已发送");
     },
     [messages]
@@ -58,46 +127,94 @@ function Index(props: DefinedProps) {
 
   //翻译
   const onTranslateAudio = useCallback(
-    async (messageId: number) => {
+    async (formData: FormData, id: number) => {
       try {
-        const translatedText = await mockTranslateAudio();
+        const response = await uploadAudio(formData);
+        const translatedData = response.data;
 
-        setMessages((prev) =>
+        if (translatedData.data.transStatus) {
-          prev.map((msg) =>
+          setMessages((prev) => {
-            msg.id === messageId ? { ...msg, translatedText, isTranslating: false } : msg
+            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 {
+          console.log(translatedData);
+
+          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;
+          });
+        }
       } catch (error) {
         console.error("翻译失败:", error);
         Toast.show("翻译失败，请重试");
-
+        setMessages((prev) => {
-        setMessages((prev) =>
+          const newMessages = prev.map((msg) =>
-          prev.map((msg) =>
+            msg.id === id
-            msg.id === messageId
               ? {
                   ...msg,
+                  id: id,
                   isTranslating: false,
-                  translatedText: "翻译失败，请重试",
+                  isRefresh: false,
                 }
               : msg
-          )
+          );
-        );
+          localStorage.setItem("messageList", JSON.stringify(newMessages));
+          return newMessages;
+        });
       }
     },
     [messages]
   );
 
+  const refreshMessages = (formData: FormData, messageId: number) => {
+    setMessages((prev) =>
+      prev.map((msg) =>
+        msg.id === messageId
+          ? {
+              ...msg,
+              isTranslating: true,
+              isRefresh: true,
+            }
+          : msg
+      )
+    );
+    onTranslateAudio(formData, messageId);
+  };
+
   const onSetIsRecording = (flag: boolean) => {
     setIsRecording(flag);
   };
 
-  const onLanguage = (item: FloatMenuItemConfig) => {
+  // const onLanguage = (item: FloatMenuItemConfig) => {
-    if (item.type === "add") {
+  //   if (item.type === "add") {
-      setVisible(true);
+  //     setVisible(true);
-    } else {
+  //   } else {
-      setCurrentLanguage(item);
+  //     setCurrentLanguage(item);
-    }
+  //   }
-  };
+  // };
 
   return (
     <div className="translate-container">
@@ -107,13 +224,19 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
-      <MessageCom data={messages} isRecording={isRecording}></MessageCom>
+      <MessageCom
+        data={messages}
+        isRecording={isRecording}
+        onRefresh={refreshMessages}
+      ></MessageCom>
+
       <VoiceRecord
+        dialogId={dialogId}
         onRecordingComplete={onRecordingComplete}
         isRecording={isRecording}
         onSetIsRecording={onSetIsRecording}
       />
-      <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} />
+      {/* <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} /> */}
       <XPopup
         title="选择翻译语种"
         visible={visible}

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

@@ -1,12 +1,19 @@
 export interface Message {
   id: number;
-  type?: "dog" | "cat" | "pig";
+  petType?: "dog" | "cat" | "pig" | "";
-  audioUrl: string;
+  contentText: string;
-  name: string; //名字
+  petName?: string; //名字
-  duration: number; //时长
+  contentDuration: number; //时长
-  timestamp: number; //时间
+  createTime?: number; //时间
-  translatedText?: string;
+  transResult?: string;
   isTranslating?: boolean;
-  avatar?: string;
+  petAvatar?: string;
   isPlaying?: boolean;
+  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 moodFilterPng from "@/assets/translate/mood-filter.png";
-import moodChartPng from "@/assets/translate/mood-chart.png";
+// import moodChartPng from "@/assets/translate/mood-chart.png";
-import moodAbstractPng from "@/assets/translate/mood-abstract.png";
+// import moodAbstractPng from "@/assets/translate/mood-abstract.png";
-import moodPopupPng from "@/assets/translate/mood-popup.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;

projects/translate-h5/vite.config.ts

@@ -5,6 +5,8 @@ import { inspectorServer } from "@react-dev-inspector/vite-plugin";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 export default defineConfig({
   // basicSsl()
+  // target: "https://petshy.tashowz.com",
+  // http://192.168.1.231:48080
   plugins: [react()],
   server: {
     port: 3000,
@@ -12,7 +14,8 @@ export default defineConfig({
     open: true,
     proxy: {
       "/app-api": {
-        target: "http://192.168.1.231:48080",
+        target: "https://petshy.tashowz.com",
+        // target: "http://192.168.1.231:48080",
         changeOrigin: true,
       },
     },