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

@@ -27,8 +27,9 @@ export const useGetDialog = () => {
     { manual: true } // 手动触发
   );
 
-  const getDialog = () => {
+  const getDialog = (params: { pageNo: number; pageSize: number }) => {
     return execute({
+      params,
       headers: {
         "Content-Type": "application/json",
       },

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

@@ -51,4 +51,5 @@ console.log(import.meta.env.VITE_BASE_URL, "import.meta.env.VITE_BASE_URL");
 //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/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 = [
-  //   {
-  //     key: "/",
-  //     title: "宠物翻译",
-  //     icon: <CattleZodiac />,
-  //   },
-  //   {
-  //     key: "/set",
-  //     title: "待办",
-  //     icon: <User />,
-  //   },
-  //   {
-  //     key: "/message",
-  //     title: "消息",
-  //     icon: <User />,
-  //   },
-  //   {
-  //     key: "/me",
-  //     title: "我的",
+      icon: <User />,
+    },
+  ];
 
-  //     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="footer layout-tab">
-        {/* <TabBar
-          activeKey={pathname}
-          onChange={(value) => setRouteActive(value)}
-          safeArea={true}
-        >
+      <div className={styles["layout-content"]}>{children}</div>
+      {showTabBarRoutes.includes(location.pathname) && (
+        <div className={styles["layout-tab"]}>
+          <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)} safeArea={true}>
             {tabs.map((item) => (
               <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
             ))}
-        </TabBar> */}
+          </TabBar>
         </div>
+      )}
     </div>
   );
 };

projects/translate-h5/src/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 TranslateArchives = lazy(() => import("@/view/home/archives"));
-const TranslateArchivesAdd = lazy(() => import("@/view/home/addArchives"));
+const TranslateMood = lazy(() => import("@/view/mood"));
+const TranslateArchives = lazy(() => import("@/view/archives"));
+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/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,9 +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[];
@@ -14,8 +25,18 @@ interface DefinedProps {
 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 && 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 || ""} 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,16 +164,31 @@ function Index(props: DefinedProps) {
   return (
     <div className="message">
       {data.map((item, index) => (
+        <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="item" key={index}>
             {renderAvatar(item)}
-
             <div className="rig">
               <div>
                 <span className="name">
-                {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
+                  {item.isTranslating && !item.isRefresh ? "" : item.petName ?? ""}
                 </span>
-              <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-              <span className="">{item.createTime}</span>
               </div>
               <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
                 <VoiceIcon
@@ -121,9 +200,10 @@ function Index(props: DefinedProps) {
               {renderTranslateResult(item)}
             </div>
           </div>
+        </React.Fragment>
       ))}
-
-      <div style={{ height: "80px", width: "100%" }}></div>
+      <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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Image, Toast } from "antd-mobile";
 import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
@@ -35,6 +35,15 @@ function Index(props: DefinedProps) {
   const [visible, setVisible] = useState<boolean>(false);
   const [dialogId, setDialogId] = useState<number>(0);
 
+  // 创建稳定化的消息字符串（排除 isTranslating 字段变化的影响）
+  const stableMessagesString = useMemo(() => {
+    const stableMessages = messages.map((msg) => {
+      const { isTranslating, isRefresh, ...rest } = msg;
+      return rest;
+    });
+    return JSON.stringify(stableMessages);
+  }, [messages]);
+
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
     fetchInitialMessages();
@@ -53,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([]));
     }
   };
 
@@ -75,24 +96,30 @@ function Index(props: DefinedProps) {
         scrollToBottom();
       });
     }
-  }, [messages, scrollToBottom]);
+  }, [stableMessagesString, scrollToBottom]);
 
   //完成录音
   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]
@@ -106,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]
@@ -191,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" }}>
+  return (
+    <MainLayout>
+      <div className={styles.homeHeader}>
+        <h3>情绪监控</h3>
+        <Space style={{ fontSize: "20px", "--gap": "16px" }}>
           <Filter fill="#333" />
           <More fill="#333" />
         </Space>
       </div>
-  );
 
-  return (
-    <MainLayout isShowNavBar={true} title="情绪" navBarRight={right}>
       <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

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