feat: into

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

@@ -16,7 +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"));
+const TranslateArchivesAdd = lazy(() => import("@/view/home/addArchives"));
 export const routes: AppRoute[] = [
   {
     path: "/",
@@ -52,7 +52,7 @@ export const routes: AppRoute[] = [
     },
   },
   {
-    path: "/translate/archives/add",
+    path: "/translate/addArchives",
     element: <TranslateArchivesAdd />,
     auth: false,
     meta: {

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

@@ -0,0 +1,94 @@
+.archives {
+  background-color: #f5f5f5;
+  padding: 12px;
+  box-sizing: border-box;
+  min-height: 100%;
+
+  .archivesInfo {
+    border-radius: 16px;
+    // 超出隐藏
+    overflow: hidden;
+    background-color: #fff;
+    .archivesFrom {
+      padding: 16px;
+      padding-top: 0;
+      .archivesFromItem {
+        height: 56px;
+        line-height: 56px;
+        font-size: 14px;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 0.5px solid #f5f5f5;
+
+        .archivesFromInput {
+          display: flex;
+          align-items: center;
+          color: #9c9c9c;
+          .archivesTag {
+            height: 24px;
+            line-height: 24px;
+            font-size: 12px;
+            border-radius: 12px;
+            padding: 0 10px;
+            background-color: #f5f5f5;
+            color: #1f1f1f;
+            margin-left: 8px;
+            &.active {
+              background-color: #000;
+              color: #fff;
+            }
+          }
+          &.editInput {
+            color: #000;
+          }
+        }
+
+        .saveButton {
+          --background-color: #000;
+          --border-color: #000;
+          --text-color: #fff;
+          height: 40px;
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+
+.archivesAvatar {
+  width: 100%;
+  height: 128px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popupHeader {
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.popupBottom {
+  display: flex;
+  padding: 16px;
+  // 设置中间间隔
+  .popupButton {
+    flex: 1;
+    margin-right: 22px;
+    &:last-child {
+      margin-right: 0;
+    }
+    .cancelButton {
+      --background-color: #fff;
+      --border-color: #e9e9e9;
+      --text-color: #000000;
+    }
+    .confirmButton {
+      --background-color: #1c1c1c;
+      --border-color: #1c1c1c;
+      --text-color: #fff;
+    }
+  }
+}

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

@@ -0,0 +1,188 @@
+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";
+import { useSearchParams } from "react-router-dom";
+import { Delete } from "@icon-park/react";
+
+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={styles.xpopup}
+      onMaskClick={onClose}
+    >
+      <div className={styles.popupHeader}>
+        <h3>{title}</h3>
+        <span onClick={onClose}>
+          <CloseOutline style={{ fontSize: "16px" }} />
+        </span>
+      </div>
+      <div>{children}</div>
+
+      {showBottom && (
+        <div className={styles.popupBottom}>
+          <div className={styles.popupButton}>
+            <Button
+              onClick={onClose}
+              block
+              size="large"
+              shape="rounded"
+              className={styles.cancelButton}
+            >
+              取 消
+            </Button>
+          </div>
+          <div className={styles.popupButton}>
+            <Button
+              onClick={onClose}
+              block
+              size="large"
+              shape="rounded"
+              className={styles.confirmButton}
+            >
+              确 定
+            </Button>
+          </div>
+        </div>
+      )}
+    </Popup>
+  );
+}
+
+function Add() {
+  const [visibleVariety, setVisibleVariety] = useState<boolean>(false);
+  const [visibleWeight, setVisibleWeight] = useState<boolean>(false);
+  const [visibleDate, setVisibleDate] = useState<boolean>(false);
+  const [searchParams] = useSearchParams();
+  const flag = searchParams.get("flag");
+
+  const right = (
+    <div style={{ fontSize: 16 }}>
+      <Space style={{ "--gap": "16px" }}>
+        <Delete fill="#FF4D4F" />
+      </Space>
+    </div>
+  );
+
+  return (
+    <MainLayout
+      navBarRight={right}
+      isShowNavBar={true}
+      title={flag === "add" ? "添加档案" : "编辑档案"}
+    >
+      <div className={styles.archives}>
+        <div className={styles.archivesAvatar}>
+          <Image src={archivesAvatarPng} width={80} height={80} />
+        </div>
+        <div className={styles.archivesInfo}>
+          {flag === "add" && <Image src={catDogPng} />}
+
+          <div className={styles.archivesFrom}>
+            <div className={styles.archivesFromItem}>
+              <div>昵称*</div>
+              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
+                {flag === "add" ? "请输入昵称" : "钱多多"}
+              </div>
+            </div>
+            <div onClick={() => setVisibleVariety(true)} className={styles.archivesFromItem}>
+              <div>品种*</div>
+              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
+                {flag === "add" ? "请选择" : "布偶猫"}
+                {">"}
+              </div>
+            </div>
+            <div onClick={() => setVisibleWeight(true)} className={styles.archivesFromItem}>
+              <div>体重*</div>
+              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
+                {flag === "add" ? "请选择" : "45kg"}
+                {">"}
+              </div>
+            </div>
+            <div className={styles.archivesFromItem}>
+              <div>性别*</div>
+              <div className={styles.archivesFromInput}>
+                <div className={styles.archivesTag}>未知</div>
+                <div className={styles.archivesTag}>弟弟</div>
+                <div className={`${styles.archivesTag} ${flag === "edit" && styles.active}`}>
+                  妹妹
+                </div>
+              </div>
+            </div>
+            <div onClick={() => setVisibleDate(true)} className={styles.archivesFromItem}>
+              <div>出生日期*</div>
+              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
+                {flag === "add" ? "请选择" : "2018-12-01"}
+                {">"}
+              </div>
+            </div>
+            <div className={styles.archivesFromItem}>
+              <div>绝育情况*</div>
+              <div className={styles.archivesFromInput}>
+                <div className={styles.archivesTag}>未知</div>
+                <div className={styles.archivesTag}>已绝育</div>
+                <div className={`${styles.archivesTag} ${flag === "edit" && styles.active}`}>
+                  未绝育
+                </div>
+              </div>
+            </div>
+            <div className={styles.archivesFromItem}>
+              <Button block shape="rounded" className={styles.saveButton}>
+                保存
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <MyPopup
+        title="选择品种"
+        visible={visibleVariety}
+        onClose={() => {
+          setVisibleVariety(false);
+        }}
+      >
+        <Image src={archivesVarietyPng}></Image>
+      </MyPopup>
+
+      <MyPopup
+        title="您宝贝的体重是？"
+        visible={visibleWeight}
+        onClose={() => {
+          setVisibleWeight(false);
+        }}
+        showBottom={true}
+      >
+        <Image src={archivesWeightPng}></Image>
+      </MyPopup>
+      <MyPopup
+        title="选择日期"
+        visible={visibleDate}
+        onClose={() => {
+          setVisibleDate(false);
+        }}
+        showBottom={true}
+      >
+        <Image src={archivesDatePng}></Image>
+      </MyPopup>
+    </MainLayout>
+  );
+}
+
+export default Add;

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

@@ -1,23 +0,0 @@
-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.tsx

@@ -10,6 +10,7 @@ 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";
@@ -24,7 +25,7 @@ function Index() {
   };
 
   const right = (
-    <div style={{ fontSize: 24 }}>
+    <div style={{ fontSize: 16 }}>
       <Space style={{ "--gap": "16px" }}>
         {listShow ? (
           <AlignHorizontalCenterTwo onClick={() => setListShow(false)} fill="#333" />
@@ -32,7 +33,7 @@ function Index() {
           <ListView onClick={() => setListShow(true)} fill="#333" />
         )}
 
-        <AddOne onClick={() => onLink("/translate/archives/add")} fill="#333" />
+        <AddOne onClick={() => onLink("/translate/addArchives?flag=add")} fill="#333" />
         <More fill="#333" />
       </Space>
     </div>
@@ -54,7 +55,11 @@ function Index() {
           </div>
           <div className={styles.archives}>
             <Image src={archivesPicturePng}></Image>
-            <Image className={styles.img} src={archivesDataPng}></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>
@@ -62,6 +67,7 @@ function Index() {
           </div>
         </>
       )}
+      <Outlet /> {/* 添加这行 */}
     </MainLayout>
   );
 }

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

@@ -11,13 +11,6 @@ function Index() {
   const [visible, setVisible] = useState<boolean>(false);
   const safeNavigate = useSafeNavigate();
   const navigate = useNavigate();
-  useEffect(() => {
-    if (window.history) {
-      //     // 往历史记录里面添加一条新的当前页面的url
-      //     // 给 popstate 绑定一个方法监听页面返回
-      window.addEventListener("popstate", () => onLink(""), false); //false阻止默认事件
-    }
-  }, []);
 
   const onLink = (link: string) => {
     // safeNavigate(link);

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

@@ -13,7 +13,7 @@ const Moods = () => {
   const [visible, setVisible] = useState(false);
 
   const right = (
-    <div style={{ fontSize: 24 }}>
+    <div style={{ fontSize: 16 }}>
       <Space style={{ "--gap": "16px" }}>
         <Filter fill="#333" />
         <More fill="#333" />