feat: into

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

@@ -1,17 +1,24 @@
 import React from "react";
 import { NavBar, SafeArea, Toast } from "antd-mobile";
 import { useNavigate, useLocation } from "react-router-dom";
-import { User, CattleZodiac } from "@icon-park/react";
+import { User, CattleZodiac, Right } from "@icon-park/react";
 import "./index.less";
 
 interface MainLayoutProps {
   children: React.ReactNode;
   isShowNavBar?: boolean;
   title?: string;
+  navBarRight?: React.ReactNode;
   onLink?: () => void;
 }
 
-const MainLayout: React.FC<MainLayoutProps> = ({ isShowNavBar, children, onLink, title }) => {
+const MainLayout: React.FC<MainLayoutProps> = ({
+  isShowNavBar,
+  children,
+  onLink,
+  title,
+  navBarRight,
+}) => {
   const navigate = useNavigate();
   // const location = useLocation();
 
@@ -40,6 +47,10 @@ const MainLayout: React.FC<MainLayoutProps> = ({ isShowNavBar, children, onLink,
   // ];
 
   const goBack = () => {
+    // 打印路由栈
+
+
+    // debugger;
     if (onLink) {
       onLink?.();
     } else {
@@ -49,7 +60,13 @@ const MainLayout: React.FC<MainLayoutProps> = ({ isShowNavBar, children, onLink,
   return (
     <div className="main-layout">
       <SafeArea position="top" />
-      {isShowNavBar ? <NavBar onBack={goBack}>{title}</NavBar> : ""}
+      {isShowNavBar ? (
+        <NavBar onBack={goBack} right={navBarRight}>
+          {title}
+        </NavBar>
+      ) : (
+        ""
+      )}
       <div className="layout-content">{children}</div>
 
       <div className="footer layout-tab">

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

@@ -16,6 +16,7 @@ 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/archives/add"));
 export const routes: AppRoute[] = [
   {
     path: "/",
@@ -50,5 +51,13 @@ export const routes: AppRoute[] = [
       title: "宠物档案",
     },
   },
+  {
+    path: "/translate/archives/add",
+    element: <TranslateArchivesAdd />,
+    auth: false,
+    meta: {
+      title: "新建档案",
+    },
+  },
   { path: "*", element: <Page404 />, auth: false },
 ];

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

@@ -0,0 +1,23 @@
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+import archivesAvatarPng from "@/assets/translate/archives-avatar.png";
+import archivesAddPng from "@/assets/translate/archives-add.png";
+import archivesEditPng from "@/assets/translate/archives-edit.png";
+import { useState } from "react";
+import { Image } from "antd-mobile";
+
+function Add() {
+  const [flag, setFlag] = useState<"add" | "edit">("add");
+  return (
+    <MainLayout isShowNavBar={true} title="宠物档案">
+      <div className={styles.archives}>
+        <div className={styles.archivesAvatar}>
+          <Image src={archivesAvatarPng} width={80} height={80} />
+        </div>
+        {flag === "add" ? <Image src={archivesAddPng} /> : <Image src={archivesEditPng} />}
+      </div>
+    </MainLayout>
+  );
+}
+
+export default Add;

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

@@ -1,3 +1,27 @@
 .archives {
+  background-color: #f5f5f5;
   padding: 12px;
+  box-sizing: border-box;
+  min-height: 100%;
+  .img {
+    margin-bottom: 16px;
+  }
+  .placeholder-bottom {
+    height: 100px;
+    width: 100%;
+  }
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0;
+  opacity: 0.98;
+}
+
+.archivesAvatar {
+  width: 100%;
+  height: 128px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

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

@@ -1,11 +1,67 @@
 // 档案
 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 { 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: 24 }}>
+      <Space style={{ "--gap": "16px" }}>
+        {listShow ? (
+          <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
+        ) : (
+          <ListView onClick={() => setListShow(true)} fill="#333" />
+        )}
+
+        <AddOne onClick={() => onLink("/translate/archives/add")} fill="#333" />
+        <More fill="#333" />
+      </Space>
+    </div>
+  );
+
   return (
-    <MainLayout isShowNavBar={true} title="宠物档案">
-      <div className={styles.archives}>档案</div>
+    <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 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>
+        </>
+      )}
     </MainLayout>
   );
 }

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

@@ -1,3 +1,23 @@
 .mood {
-  padding: 12px;
+  .mood-title {
+    padding: 18px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .mood-abstract-button {
+      color: #1677ff;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .mood-filter {
+    position: relative;
+  }
+  .mood-mask-1 {
+    position: absolute;
+    height: 54%;
+    width: 30%;
+    top: 10%;
+    left: 6%;
+  }
 }

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

@@ -1,9 +1,58 @@
 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 { 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 [visible, setVisible] = useState(false);
+
+  const right = (
+    <div style={{ fontSize: 24 }}>
+      <Space style={{ "--gap": "16px" }}>
+        <Filter fill="#333" />
+        <More fill="#333" />
+      </Space>
+    </div>
+  );
+
   return (
-    <MainLayout isShowNavBar={true} title="情绪">
-      <div className={styles.mood}>心情</div>
+    <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>
+          <Image src={moodFilterPng}></Image>
+        </div>
+        <Image src={moodChartPng}></Image>
+        <div className={styles["mood-title"]}>
+          <h2>情绪摘要</h2>
+          <div className={styles["mood-abstract-button"]}>
+            <Switch theme="outline" fill="#1677FF" />
+            <span style={{ marginLeft: "4px" }}>饼状视图</span>
+          </div>
+        </div>
+        <Image src={moodAbstractPng}></Image>
+        <div
+          style={{
+            height: "20px",
+            width: "100%",
+          }}
+        ></div>
+      </div>
+      <XPopup
+        title="宠物筛选"
+        visible={visible}
+        onClose={() => {
+          setVisible(false);
+        }}
+      >
+        <Image src={moodPopupPng}></Image>
+      </XPopup>
     </MainLayout>
   );
 };