diff --git a/.env.development b/.env.development
index bbcf73c6f0b65929be28eaffa1040cfe4766c9b0..053a7e391875df47812f428f8833f73cde9630f9 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
 # 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
 # TARO_APP_ID="开发环境下的小程序appid"
 
-TARO_APP_ID="wxc0e4cfce130fe788"
\ No newline at end of file
+TARO_APP_ID="wx43d3e4316396041c"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 3e24617bb659c0d5bab11431966d71caa31c97a6..517127640ecc9b825f8a0275a63bd21c242d4a38 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
 # TARO_APP_ID="生产环境下的小程序appid"
 
-TARO_APP_ID="wxc0e4cfce130fe788"
\ No newline at end of file
+TARO_APP_ID="wx43d3e4316396041c"
\ No newline at end of file
diff --git a/.env.test b/.env.test
index 0fcf1e5a29a86bf3c4df0cad1827d2b5d664bfcd..87ef691f2043d7d9563158ba641f34b559e2c2a8 100644
--- a/.env.test
+++ b/.env.test
@@ -1,3 +1,3 @@
 # TARO_APP_ID="测试环境下的小程序appid"
 
-TARO_APP_ID="wxc0e4cfce130fe788"
\ No newline at end of file
+TARO_APP_ID="wx43d3e4316396041c"
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index d54a01baa5a2c67526281f6d0fff6f7fedd9690c..1a571adc2be5cd047ca5d060c14a9c5a1f4b9b17 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,9 +2,34 @@
 // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
 module.exports = {
   presets: [
-    ['taro', {
-      framework: 'react',
-      ts: false
-    }]
-  ]
-}
+    [
+      "taro",
+      {
+        framework: "react",
+        ts: false,
+      },
+    ],
+  ],
+
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "@taroify/core",
+        libraryDirectory: "",
+        style: true,
+      },
+      "@taroify/core",
+    ],
+    [
+      "import",
+      {
+        libraryName: "@taroify/icons",
+        libraryDirectory: "",
+        camel2DashComponentName: false,
+        style: () => "@taroify/icons/style",
+      },
+      "@taroify/icons",
+    ],
+  ],
+};
diff --git a/config/index.js b/config/index.js
index 05280c2619ab34e9b33715b85d2ba10709dfc6f6..c0eb0f209cfbcbaba4f6624b57aa50ffba91a90a 100644
--- a/config/index.js
+++ b/config/index.js
@@ -6,7 +6,7 @@ import prodConfig from "./prod";
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
 export default defineConfig(async (merge, { command, mode }) => {
   const baseConfig = {
-    projectName: "approve-pass-managemnt-miniApp",
+    projectName: "approve-pass-management-miniApp",
     date: "2024-7-12",
     designWidth: 1125,
     deviceRatio: {
@@ -50,6 +50,9 @@ export default defineConfig(async (merge, { command, mode }) => {
         },
       },
     },
+    sass: {
+      data: "$hd: 3;",
+    },
     h5: {
       publicPath: "/",
       staticDirectory: "static",
@@ -62,6 +65,7 @@ export default defineConfig(async (merge, { command, mode }) => {
         filename: "css/[name].[hash].css",
         chunkFilename: "css/[name].[chunkhash].css",
       },
+      esnextModules: ["@taroify"],
       postcss: {
         autoprefixer: {
           enable: true,
diff --git a/package.json b/package.json
index 07b469c093b63f8cbb88d3e984d3fac357d36870..0ab43b844600ca4b6dd8d8b809811ae9acc5f77d 100644
--- a/package.json
+++ b/package.json
@@ -40,47 +40,52 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.21.5",
+    "@taroify/core": "^0.3.1-alpha.0",
     "@tarojs/components": "3.6.33",
     "@tarojs/helper": "3.6.33",
-    "@tarojs/plugin-platform-weapp": "3.6.33",
+    "@tarojs/plugin-framework-react": "3.6.33",
     "@tarojs/plugin-platform-alipay": "3.6.33",
-    "@tarojs/plugin-platform-tt": "3.6.33",
-    "@tarojs/plugin-platform-swan": "3.6.33",
-    "@tarojs/plugin-platform-jd": "3.6.33",
-    "@tarojs/plugin-platform-qq": "3.6.33",
     "@tarojs/plugin-platform-h5": "3.6.33",
     "@tarojs/plugin-platform-harmony-hybrid": "3.6.33",
+    "@tarojs/plugin-platform-jd": "3.6.33",
+    "@tarojs/plugin-platform-qq": "3.6.33",
+    "@tarojs/plugin-platform-swan": "3.6.33",
+    "@tarojs/plugin-platform-tt": "3.6.33",
+    "@tarojs/plugin-platform-weapp": "3.6.33",
+    "@tarojs/react": "3.6.33",
     "@tarojs/runtime": "3.6.33",
     "@tarojs/shared": "3.6.33",
     "@tarojs/taro": "3.6.33",
-    "@tarojs/plugin-framework-react": "3.6.33",
-    "@tarojs/react": "3.6.33",
+    "classnames": "^2.5.1",
+    "lodash": "^4.17.21",
+    "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react": "^18.0.0"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "3.6.33",
-    "@types/webpack-env": "^1.13.6",
-    "@tarojs/test-utils-react": "^0.1.1",
-    "@types/react": "^18.0.0",
-    "webpack": "5.78.0",
     "@tarojs/taro-loader": "3.6.33",
+    "@tarojs/test-utils-react": "^0.1.1",
     "@tarojs/webpack5-runner": "3.6.33",
+    "@types/jest": "^29.3.1",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "babel-plugin-import": "^1.13.8",
     "babel-preset-taro": "3.6.33",
-    "eslint-config-taro": "3.6.33",
     "eslint": "^8.12.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.6.33",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "stylelint": "^14.4.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.18",
+    "react-refresh": "^0.11.0",
+    "stylelint": "^14.4.0",
     "ts-node": "^10.9.1",
-    "@types/node": "^18.15.11",
-    "@types/jest": "^29.3.1",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.5.0"
+    "webpack": "5.78.0"
   }
 }
diff --git a/project.config.json b/project.config.json
index 08b3326079d8cd7c696e51a83e9d5e3bfe14eeb8..bba4057f3e4b36b00fe91d52ae3bea6e40c27c83 100644
--- a/project.config.json
+++ b/project.config.json
@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "approve-pass-managemnt-miniApp",
   "description": "",
-  "appid": "wxc0e4cfce130fe788",
+  "appid": "wx43d3e4316396041c",
   "setting": {
     "urlCheck": true,
     "es6": false,
diff --git a/project.private.config.json b/project.private.config.json
index 51e2631708cd053300ef1644595888a3b7c3bb37..a1a2ceba6bbc3d0f315522d5b15066a74a97be3a 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -2,6 +2,34 @@
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "approve-pass-managemnt-miniApp",
   "setting": {
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "urlCheck": false
+  },
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/manage/index",
+          "pathName": "pages/manage/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/detail/index",
+          "pathName": "pages/detail/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/list/index",
+          "pathName": "pages/list/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
   }
 }
\ No newline at end of file
diff --git a/src/app.config.js b/src/app.config.js
index 15c683b2964dc5190fe59aa5007731bb8788f8d7..a39ee2401ca3af10b0b7e377cbfd34ecc3290410 100644
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -1,11 +1,14 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index'
+    "pages/index/index",
+    "pages/list/index",
+    "pages/detail/index",
+    "pages/manage/index",
   ],
   window: {
-    backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
-  }
-})
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "WeChat",
+    navigationBarTextStyle: "black",
+  },
+});
diff --git a/src/app.css b/src/app.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9570bb13ce030afce13212538558290e29dfef55 100644
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,42 @@
+page {
+  width: 100%;
+  height: 100%;
+  background-color: #eff2f6;
+  position: relative;
+}
+
+.actionWrapper {
+  position: absolute;
+  bottom: 0;
+  /* height: 368px; */
+  background-color: #fff;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  gap: 24px;
+  padding: 60px;
+  padding-bottom: 80px;
+  box-sizing: border-box;
+}
+
+.okBtn {
+  width: 357px;
+  height: 119px;
+  border-radius: 10px;
+  background-color: #edf1f7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(46, 108, 255, 1);
+}
+
+.cancelBtn {
+  width: 357px;
+  height: 119px;
+  border-radius: 10px;
+  background-color: #edf1f7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(252, 74, 99, 1);
+}
diff --git a/src/app.js b/src/app.js
index ae024b6afc79c25c3dba48972dd4fe06aad36847..f14a9e22b3e510bab4cfca33202a21f709bc0a08 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,15 +1,13 @@
-
-import { useLaunch } from '@tarojs/taro'
-import './app.css'
+import { useLaunch } from "@tarojs/taro";
+import "./app.css";
 
 function App({ children }) {
-
   useLaunch(() => {
-    console.log('App launched.')
-  })
+    console.log("App launched.");
+  });
 
   // children 是将要会渲染的页面
-  return children
+  return children;
 }
 
-export default App
+export default App;
diff --git a/src/assets/file.png b/src/assets/file.png
new file mode 100644
index 0000000000000000000000000000000000000000..b06aece61ea2de76cc785626d6205be47b939358
Binary files /dev/null and b/src/assets/file.png differ
diff --git a/src/assets/image.png b/src/assets/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ce0b5454d39374ad10e39f70fffc7445b64f521
Binary files /dev/null and b/src/assets/image.png differ
diff --git a/src/assets/pdf.png b/src/assets/pdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a7ae8c35e47ef75da0dd153029b7dbd05567c08
Binary files /dev/null and b/src/assets/pdf.png differ
diff --git a/src/components/FormCheckbox/index.jsx b/src/components/FormCheckbox/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b970332ef370afff19b39500a524201c4af2d3ed
--- /dev/null
+++ b/src/components/FormCheckbox/index.jsx
@@ -0,0 +1,53 @@
+import { View, Textarea } from "@tarojs/components";
+import { isEqual } from "lodash";
+import { Checkbox } from "@taroify/core";
+import { useState, useEffect } from "react";
+const FormCheckbox = (props) => {
+  const { value, onChange, options } = props;
+
+  const [selected, setSelected] = useState([]);
+
+  useEffect(() => {
+    if (typeof value === "object" && !isEqual(value, selected)) {
+      setSelected(value);
+    }
+  }, [value]);
+
+  if (!options || options.length === 0) {
+    return (
+      <Checkbox
+        shape="square"
+        checked={value}
+        onChange={(e) => onChange(e.target.value)}
+      ></Checkbox>
+    );
+  }
+
+  let optionTemp = [...options];
+  optionTemp = optionTemp.map((v) => {
+    if (typeof v === "string") return { label: v, value: v };
+    return v;
+  });
+  // console.log(value);
+  return (
+    <View style={{ width: "100%" }}>
+      <Checkbox.Group
+        value={selected}
+        onChange={(e) => {
+          setSelected(e);
+          onChange(e.join(","));
+        }}
+      >
+        {optionTemp.map((item) => {
+          return (
+            <Checkbox name={item.value} shape="square">
+              {item.label}
+            </Checkbox>
+          );
+        })}
+      </Checkbox.Group>
+    </View>
+  );
+};
+
+export default FormCheckbox;
diff --git a/src/components/FormComponentRender/index.css b/src/components/FormComponentRender/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/FormComponentRender/index.jsx b/src/components/FormComponentRender/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9550118f0263ccfc7682dbc124dad9d12147c64c
--- /dev/null
+++ b/src/components/FormComponentRender/index.jsx
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import FormInput from "../FormInput/index";
+import FormDatePicker from "../FormDatePicker/index";
+import FormTextarea from "../FormTextarea/index";
+import FormRadio from "../FormRadio/index";
+import FormCheckbox from "../FormCheckbox/index";
+import FormImgUpload from "../FormImgUpload/index";
+import FormFileUpload from "../FormFileUpload/index";
+import Radio from "@taroify/core/radio/radio";
+
+const RenderComponent = (props) => {
+  const { config, componentType, ...newProps } = props;
+
+  const componentsRegister = useMemo(() => {
+    const composeProps = { ...newProps, ...config };
+
+    switch (componentType) {
+      case "TextInput":
+        return <FormInput {...composeProps} />;
+      case "NumberInput":
+        return <FormInput {...composeProps}></FormInput>;
+      case "DatePicker":
+        return <FormDatePicker {...composeProps}></FormDatePicker>;
+      case "TextAreaInput":
+        return <FormTextarea {...composeProps}></FormTextarea>;
+      case "Radio":
+        return <FormRadio {...composeProps}></FormRadio>;
+      case "Checkbox":
+        return <FormCheckbox {...composeProps}></FormCheckbox>;
+      case "FileUpload":
+        return <FormFileUpload {...composeProps}></FormFileUpload>;
+      case "ImgUpload":
+        return <FormImgUpload {...composeProps}></FormImgUpload>;
+      case "PhoneInput":
+        return <FormInput {...composeProps} />;
+      default:
+        return "";
+    }
+  }, [props]);
+
+  return componentsRegister;
+};
+
+export default RenderComponent;
diff --git a/src/components/FormDatePicker/index.css b/src/components/FormDatePicker/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..99131d61cb0e3569cd27fbfb92b9e23bd8d1d304
--- /dev/null
+++ b/src/components/FormDatePicker/index.css
@@ -0,0 +1,4 @@
+.date_container {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/FormDatePicker/index.jsx b/src/components/FormDatePicker/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2e5edc74f3d2e48e32ff53658a5b78170e9f7a62
--- /dev/null
+++ b/src/components/FormDatePicker/index.jsx
@@ -0,0 +1,98 @@
+import { View } from "@tarojs/components";
+import { Popup, DatetimePicker } from "@taroify/core";
+import { useEffect, useMemo, useState } from "react";
+import "./index.css";
+const FormDatePicker = (props) => {
+  const { isRange, value, onChange, picker = "month" } = props;
+  const [show, setShow] = useState(false);
+  const [date, setDate] = useState(new Date());
+
+  const info = useMemo(() => {
+    if (picker === "time") {
+      let dateDesc = undefined;
+      if (value instanceof Date) {
+        const hour = value.getHours();
+        const min = value.getMinutes();
+        const second = value.getSeconds();
+        dateDesc = `${hour}:${min}:${second}`;
+      }
+      return {
+        type: "time",
+        title: "选择时间",
+        value: dateDesc,
+      };
+    }
+    if (picker === "date") {
+      let dateDesc = undefined;
+      if (value instanceof Date) {
+        const year = value.getFullYear();
+        const month = value.getMonth() + 1;
+        const day = value.getDate();
+        dateDesc = `${year}-${month > 9 ? month : "0" + month}-${day}`;
+      }
+      return {
+        type: "date",
+        title: "选择日期",
+        value: dateDesc,
+      };
+    }
+    if (picker === "month") {
+      let dateDesc = undefined;
+      if (value instanceof Date) {
+        const year = value.getFullYear();
+        const month = value.getMonth() + 1;
+        dateDesc = `${year}-${month > 9 ? month : "0" + month}`;
+      }
+      return {
+        type: "year-month",
+        title: "选择月份",
+        value: dateDesc,
+      };
+    }
+  }, [picker, value]);
+
+  useEffect(() => {
+    if (value instanceof Date) {
+      setDate(value);
+    }
+  }, [value]);
+
+  const openModal = () => {
+    setShow(true);
+  };
+  return (
+    <>
+      <View className="date_container" onClick={openModal}>
+        {info.value ? (
+          info.value
+        ) : (
+          <View style={{ color: "GrayText" }}>请选择时间</View>
+        )}
+      </View>
+      <Popup open={show} placement="bottom" style={{ height: "40%" }}>
+        <DatetimePicker
+          type={info.type}
+          value={date}
+          onChange={(e) => {
+            setDate(e);
+          }}
+          onCancel={() => {
+            setShow(false);
+          }}
+          onConfirm={() => {
+            onChange(date);
+            setShow(false);
+          }}
+        >
+          <DatetimePicker.Toolbar>
+            <DatetimePicker.Button>取消</DatetimePicker.Button>
+            <DatetimePicker.Title>{info.title}</DatetimePicker.Title>
+            <DatetimePicker.Button>确认</DatetimePicker.Button>
+          </DatetimePicker.Toolbar>
+        </DatetimePicker>
+      </Popup>
+    </>
+  );
+};
+
+export default FormDatePicker;
diff --git a/src/components/FormFileUpload/index.css b/src/components/FormFileUpload/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e3f42f3653b0150a39033344e4e3af8ca722d110
--- /dev/null
+++ b/src/components/FormFileUpload/index.css
@@ -0,0 +1,9 @@
+.fileUpload {
+  /* width: 90px; */
+  height: 90px;
+  background-color: #f7f8fa;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  color: #646566;
+}
diff --git a/src/components/FormFileUpload/index.jsx b/src/components/FormFileUpload/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2dd5724451e1cd4b6b36836152a2fced55ff584
--- /dev/null
+++ b/src/components/FormFileUpload/index.jsx
@@ -0,0 +1,47 @@
+import { Uploader } from "@taroify/core";
+import Taro from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import { head } from "lodash";
+import { useState } from "react";
+import "./index.css";
+import { BackTop } from "@taroify/icons";
+const FormFileUpload = (props) => {
+  const [file, setFile] = useState();
+  const { value, onChange } = props;
+
+  function onUpload() {
+    Taro.chooseMessageFile({
+      count: 1,
+      type: "file",
+    }).then(({ tempFiles }) => {
+      setFile({
+        url: tempFiles[0].path,
+        type: tempFiles[0].type,
+        name: tempFiles[0]?.name,
+      });
+      Taro.uploadFile({
+        url: "http://192.168.2.21:21610/oss/upload?bucketName=cgtf",
+        name: "file",
+        filePath: tempFiles[0].path,
+        success: (res) => {
+          const resData = JSON.parse(res.data);
+          if (resData.code === 200) {
+            onChange(resData.data);
+          }
+        },
+      });
+    });
+  }
+
+  return (
+    <View>
+      <View className="fileUpload" onClick={onUpload}>
+        <BackTop />
+        上传文件
+      </View>
+      <View>{file?.name}</View>
+    </View>
+  );
+};
+
+export default FormFileUpload;
diff --git a/src/components/FormImgUpload/index.jsx b/src/components/FormImgUpload/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1816ec18298254b995e525f36e6945485c8f6ec2
--- /dev/null
+++ b/src/components/FormImgUpload/index.jsx
@@ -0,0 +1,35 @@
+import { Uploader } from "@taroify/core";
+import Taro from "@tarojs/taro";
+import { useState } from "react";
+const FormImgUpload = (props) => {
+  const [file, setFile] = useState();
+  const { value, onChange } = props;
+  function onUpload() {
+    Taro.chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFile({
+        url: tempFiles[0].path,
+        type: tempFiles[0].type,
+        name: tempFiles[0].originalFileObj?.name,
+      });
+      Taro.uploadFile({
+        url: "http://192.168.2.21:21610/oss/upload?bucketName=cgtf",
+        name: "file",
+        filePath: tempFiles[0].path,
+        success: (res) => {
+          const resData = JSON.parse(res.data);
+          if (resData.code === 200) {
+            onChange(resData.data);
+          }
+        },
+      });
+    });
+  }
+
+  return <Uploader value={file} onUpload={onUpload} onChange={setFile} />;
+};
+
+export default FormImgUpload;
diff --git a/src/components/FormInput/index.jsx b/src/components/FormInput/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d80d8344a3376620e5f988fba4f64f5e62f5f37
--- /dev/null
+++ b/src/components/FormInput/index.jsx
@@ -0,0 +1,25 @@
+import { View } from "@tarojs/components";
+import { Flex, Input } from "@taroify/core";
+
+const FormInput = (props) => {
+  const { placeholder, type, value, onChange, prefix, suffix } = props;
+  return (
+    <Flex align="center" gutter={12}>
+      <View>{prefix}</View>
+      <Input
+        placeholder={placeholder ?? "请输入"}
+        value={value}
+        type={type}
+        onChange={(e) => {
+          const value = e.detail.value;
+          if (onChange) {
+            onChange(value);
+          }
+        }}
+      />
+      <View>{suffix}</View>
+    </Flex>
+  );
+};
+
+export default FormInput;
diff --git a/src/components/FormRadio/index.jsx b/src/components/FormRadio/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..93e1f0651f33495bb4bd5e4654d3becf5b049fe9
--- /dev/null
+++ b/src/components/FormRadio/index.jsx
@@ -0,0 +1,24 @@
+import { View, Textarea } from "@tarojs/components";
+import { Radio } from "@taroify/core";
+
+const FormRadio = (props) => {
+  const { value, onChange, option } = props;
+
+  let optionTemp = [...option];
+  optionTemp = optionTemp.map((v) => {
+    if (typeof v === "string") return { label: v, value: v };
+    return v;
+  });
+
+  return (
+    <View style={{ width: "100%" }}>
+      <Radio.Group onChange={(e) => onChange(e)} value={value}>
+        {optionTemp.map((item) => {
+          return <Radio name={item.value}>{item.label}</Radio>;
+        })}
+      </Radio.Group>
+    </View>
+  );
+};
+
+export default FormRadio;
diff --git a/src/components/FormTextarea/index.jsx b/src/components/FormTextarea/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..61581df4ae4848f0455a05ad783ad332daeab36f
--- /dev/null
+++ b/src/components/FormTextarea/index.jsx
@@ -0,0 +1,25 @@
+import { View, Textarea } from "@tarojs/components";
+// import { Textarea } from "@taroify/core";
+
+const FormTextarea = (props) => {
+  const { placeholder, value, onChange } = props;
+  return (
+    <View style={{ width: "100%" }}>
+      <Textarea
+        autoHeight
+        style={{ width: "100%" }}
+        value={value}
+        placeholder={placeholder ?? "请输入"}
+        onInput={(e) => {
+          const value = e.detail.value;
+          console.log("value", e.detail.value);
+          if (onChange) {
+            onChange(value);
+          }
+        }}
+      />
+    </View>
+  );
+};
+
+export default FormTextarea;
diff --git a/src/pages/detail/components/attachment.jsx b/src/pages/detail/components/attachment.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b737ee84cb188ed3672a696aae79e13c6770daf
--- /dev/null
+++ b/src/pages/detail/components/attachment.jsx
@@ -0,0 +1,127 @@
+import "./attachment.module.css";
+import { useMemo } from "react";
+import { composeImgUrl } from "../../../utils/index";
+import { Flex, Empty, Toast } from "@taroify/core";
+import { View, Image } from "@tarojs/components";
+import DecoratePoint from "./decoratePoint";
+import file from "../../../assets/file.png";
+import imageIcon from "../../../assets/image.png";
+import Taro from "@tarojs/taro";
+import { EyeOutlined, InfoOutlined } from "@taroify/icons";
+
+const Title = ({ children }) => {
+  return (
+    <Flex align="center" style={{ marginBottom: 24 }}>
+      <DecoratePoint />
+      <View className="cardTitle">{children}</View>
+    </Flex>
+  );
+};
+const Item = ({ label, value, fileType }) => {
+  const previewFile = (url) => {
+    Taro.downloadFile({
+      url: url,
+      success: function (res) {
+        var filePath = res.tempFilePath;
+        Taro.openDocument({
+          filePath: filePath,
+          success: function (res) {
+            console.log("打开文档成功");
+          },
+        });
+      },
+    });
+  };
+
+  return (
+    <View className="attachmentItem">
+      <Flex align="center" justify="space-between">
+        <View className="itemTitle">
+          <Image
+            style={{ width: 32, height: 32 }}
+            src={fileType === "FileUpload" ? file : imageIcon}
+          ></Image>
+          {label}
+        </View>
+        {value && value?.length > 0 ? (
+          <>
+            {fileType === "FileUpload" && (
+              <View
+                className="fileView"
+                onClick={() => {
+                  previewFile(composeImgUrl(value));
+                }}
+              >
+                <EyeOutlined></EyeOutlined>
+              </View>
+            )}
+            {fileType === "ImgUpload" && (
+              <Image
+                onClick={() => {
+                  Taro.previewImage({
+                    current: composeImgUrl(value),
+                    urls: [composeImgUrl(value)],
+                  });
+                }}
+                style={{ borderRadius: 4, width: 32, height: 32 }}
+                src={composeImgUrl(value)}
+              ></Image>
+            )}
+          </>
+        ) : (
+          <View
+            className="fileView"
+            onClick={() => {
+              Toast.open("无文件");
+            }}
+          >
+            <InfoOutlined />
+          </View>
+        )}
+      </Flex>
+    </View>
+  );
+};
+
+/** 附件列表 */
+const Attachment = (props) => {
+  const { configSource, data } = props;
+
+  const hasAttachmentConfig = useMemo(() => {
+    return (
+      configSource?.matterContentList?.filter((v) => {
+        return (
+          v.componentType == "ImgUpload" || v.componentType == "FileUpload"
+        );
+      }) ?? []
+    );
+  }, [configSource]);
+
+  const findValue = (key) => {
+    const reportContents = data?.reportContents ?? [];
+    return reportContents.find((v) => v.contentId === key)?.content;
+  };
+
+  return (
+    <View className="group">
+      <Title>附件</Title>
+      <Toast id="toast"></Toast>
+      {hasAttachmentConfig.length === 0 && (
+        <Empty>
+          <Empty.Description>无附件</Empty.Description>
+        </Empty>
+      )}
+      {hasAttachmentConfig.map((item) => {
+        return (
+          <Item
+            fileType={item.componentType}
+            label={item.label}
+            value={findValue(item.fieldKey)}
+          ></Item>
+        );
+      })}
+    </View>
+  );
+};
+
+export default Attachment;
diff --git a/src/pages/detail/components/attachment.module.css b/src/pages/detail/components/attachment.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..070b6f0868e35529af1382ae6be73ce9497fc7fb
--- /dev/null
+++ b/src/pages/detail/components/attachment.module.css
@@ -0,0 +1,44 @@
+.itemWrapper {
+  border-radius: 10px;
+  padding: 16px 18px;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+  background-color: #e7f3fb;
+}
+
+.noItem {
+  border-radius: 10px;
+  background-color: #f0f5fb !important;
+}
+
+.noValueStatus {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background-color: rgba(4, 4, 4, 0.2);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  justify-content: center;
+}
+
+.attachmentItem {
+  margin-bottom: 24px;
+}
+
+.fileView {
+  width: 96px;
+  height: 96px;
+  background-color: #f7f8fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.itemTitle {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
diff --git a/src/pages/detail/components/content.jsx b/src/pages/detail/components/content.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..159c1cbfa69437fb13ff34e11103e0810383f97e
--- /dev/null
+++ b/src/pages/detail/components/content.jsx
@@ -0,0 +1,98 @@
+import React, { PropsWithChildren, useMemo } from "react";
+import DecoratePoint from "./decoratePoint";
+import LabelText from "./labelText";
+import { buildListByGroupId } from "../../../utils/index";
+import { Flex } from "@taroify/core";
+import { View } from "@tarojs/components";
+const Title = ({ children }) => {
+  return (
+    <Flex align="center" style={{ marginBottom: 24 }}>
+      <DecoratePoint />
+      <View className="cardTitle">{children}</View>
+    </Flex>
+  );
+};
+
+const Card = ({ children }) => {
+  return <View className="card">{children}</View>;
+};
+
+const Content = (props) => {
+  const { configSource, data } = props;
+
+  const config = useMemo(() => {
+    const matterContentList = configSource?.matterContentList;
+    let groupList = [];
+    let configList = [];
+    if (matterContentList) {
+      const temp = matterContentList
+        .sort((pre, cur) => pre.sort - cur.sort)
+        .map((item) => {
+          return {
+            ...item,
+            componentOption: item.otherSet ? JSON.parse(item.otherSet) : {},
+            key: item.fieldKey,
+          };
+        });
+      temp.forEach((item) => {
+        if (item.componentType === "Branch") {
+          groupList.push(item);
+        } else {
+          if (
+            item.componentType !== "ImgUpload" &&
+            item.componentType !== "FileUpload"
+          ) {
+            configList.push(item);
+          }
+        }
+      });
+      return {
+        groupList: groupList,
+        configList: buildListByGroupId(configList),
+      };
+    } else
+      return {
+        groupList: [],
+        configList: [],
+      };
+  }, [configSource]);
+
+  const findValue = (key) => {
+    const reportContents = data?.reportContents ?? [];
+    return reportContents.find((v) => v.contentId === key)?.content;
+  };
+  const getGroupName = (key) => {
+    return config.groupList.find((v) => v.key === key)?.label ?? "";
+  };
+  console.log("config", config);
+  return (
+    <View>
+      {config.configList.map((item) => {
+        return (
+          <View className="group">
+            {item.title && item.title.length > 0 ? (
+              <Title>{getGroupName(item.title)}</Title>
+            ) : (
+              <Title>基础内容</Title>
+            )}
+            <Card>
+              {item.list.map((subItem) => {
+                return (
+                  <LabelText
+                    label={subItem.label}
+                    wrap
+                    text={findValue(subItem.fieldKey) ?? "等待后续补充"}
+                    labelColor="#000"
+                    textColor={findValue(subItem.fieldKey) ? "#000" : "gray"}
+                  ></LabelText>
+                );
+              })}
+            </Card>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export default Content;
diff --git a/src/pages/detail/components/decoratePoint.css b/src/pages/detail/components/decoratePoint.css
new file mode 100644
index 0000000000000000000000000000000000000000..5a223bb49fd2c7645a8aaa2b9f01ceda5ac6620d
--- /dev/null
+++ b/src/pages/detail/components/decoratePoint.css
@@ -0,0 +1,37 @@
+.container {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(46, 108, 255, 0.2);
+  /* border: 1px solid #2e6cff; */
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container > View {
+  width: 14px;
+  height: 14px;
+  background-color: #034df8;
+  border-radius: 7px;
+}
+
+.grayContainer {
+  width: 15px;
+  height: 15px;
+  top: 484px;
+  left: 1344px;
+  background-color: rgba(167, 176, 192, 0.2);
+  /* border: 1px solid #2e6cff; */
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.grayContainer > View {
+  width: 14px;
+  height: 14px;
+  background-color: #a7b0c0;
+  border-radius: 7px;
+}
diff --git a/src/pages/detail/components/decoratePoint.jsx b/src/pages/detail/components/decoratePoint.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..31d1c3bee415c0fe47d633ba3a9c98cb5649b903
--- /dev/null
+++ b/src/pages/detail/components/decoratePoint.jsx
@@ -0,0 +1,21 @@
+import { View } from "@tarojs/components";
+import "./decoratePoint.css";
+
+const DecoratePoint = (props) => {
+  const { type = 2 } = props;
+
+  if (type == 1) {
+    return (
+      <View className="grayContainer">
+        <View></View>
+      </View>
+    );
+  }
+  return (
+    <View className="container">
+      <View></View>
+    </View>
+  );
+};
+
+export default DecoratePoint;
diff --git a/src/pages/detail/components/labelText.jsx b/src/pages/detail/components/labelText.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f6dd8d70a59e14ba15e26f067104d4ca6ffe96a
--- /dev/null
+++ b/src/pages/detail/components/labelText.jsx
@@ -0,0 +1,15 @@
+import { View } from "@tarojs/components";
+const LabelText = ({ label, text, wrap = false, textColor, labelColor }) => {
+  return (
+    <View className="labelTextWrapper">
+      <View className="label" style={{ color: labelColor }}>
+        {label}：
+      </View>
+      <View className="labelTextNowrap" style={{ color: textColor }}>
+        {text}
+      </View>
+    </View>
+  );
+};
+
+export default LabelText;
diff --git a/src/pages/detail/components/timeLine.jsx b/src/pages/detail/components/timeLine.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f210c5fde6f4c1737b2f78d519ac81b13338796f
--- /dev/null
+++ b/src/pages/detail/components/timeLine.jsx
@@ -0,0 +1,135 @@
+import { View } from "@tarojs/components";
+import DecoratePoint from "./decoratePoint";
+import "./timeLine.module.css";
+import { useEffect, useMemo, useState } from "react";
+import { composeImgUrl } from "../../../utils/index";
+import { Timeline, Image, Flex } from "@taroify/core";
+import service from "../../../service";
+
+const Title = ({ children }) => {
+  return (
+    <Flex align="center" style={{ marginBottom: 24 }}>
+      <DecoratePoint />
+      <View className="cardTitle">{children}</View>
+    </Flex>
+  );
+};
+const ProcessTimeLine = (props) => {
+  const { detail } = props;
+
+  const [dataSource, setDataSource] = useState([]);
+
+  const getData = () => {
+    if (detail?.id) {
+      service.getExamineHistory(detail.id).then((res) => {
+        if (res.code === 200) {
+          setDataSource(res.data);
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, [detail]);
+
+  console.log(dataSource);
+  return (
+    <View className="group">
+      <Title>审批流程</Title>
+      <Timeline position="right">
+        {dataSource.map((v) => {
+          let status = false;
+
+          if (v.current) {
+            status = true;
+          }
+          if (v.approveTime) {
+            status = true;
+          }
+          const attachments = v.attachments;
+          return (
+            <Timeline.Item>
+              <Timeline.Separator>
+                <Timeline.Dot variant="outlined" color="primary">
+                  <DecoratePoint />
+                </Timeline.Dot>
+                <Timeline.Connector />
+              </Timeline.Separator>
+              <Timeline.Content direction="column" align="start">
+                <View style={{ width: "100%" }}>
+                  <View className="title">
+                    {v.nodeName + " " + (v?.approveUserName ?? "")}
+                  </View>
+                  <View className="time">{v.approveTime}</View>
+                  {v.current && (
+                    <Flex
+                      className="remake"
+                      align="center"
+                      justify="space-between"
+                    >
+                      <View style={{ color: "rgba(1, 179, 110, 1)" }}>
+                        审批中...
+                      </View>
+                    </Flex>
+                  )}
+                  {v?.approveComment && v.approveComment?.length > 0 && (
+                    <Flex
+                      className="remake"
+                      align="center"
+                      justify="space-between"
+                    >
+                      <View>{v.approveComment}</View>
+                      <Flex>
+                        {attachments?.map((attachment) => {
+                          let fileType = "none";
+                          if (attachment && attachment.length > 0) {
+                            const extra = attachment.split(".")[1];
+
+                            if (extra === "pdf") {
+                              fileType = "pdf";
+                            } else if (
+                              extra === "jpg" ||
+                              extra === "png" ||
+                              extra === "jpeg"
+                            ) {
+                              fileType = "img";
+                            }
+                          }
+                          return (
+                            <>
+                              {fileType === "pdf" && (
+                                <View
+                                  className="noValueStatus"
+                                  onClick={() => {
+                                    window.open(composeImgUrl(attachment));
+                                  }}
+                                >
+                                  pdf
+                                </View>
+                              )}
+                              {fileType === "img" && (
+                                <Image
+                                  width={40}
+                                  height={40}
+                                  style={{ borderRadius: 4 }}
+                                  src={composeImgUrl(attachment)}
+                                ></Image>
+                              )}
+                            </>
+                          );
+                        })}
+                      </Flex>
+                    </Flex>
+                  )}
+                </View>
+              </Timeline.Content>
+            </Timeline.Item>
+          );
+        })}
+      </Timeline>
+    </View>
+  );
+};
+
+export default ProcessTimeLine;
diff --git a/src/pages/detail/components/timeLine.module.css b/src/pages/detail/components/timeLine.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..3929f7d7b64d2d3099e8887716b45b8f095cd208
--- /dev/null
+++ b/src/pages/detail/components/timeLine.module.css
@@ -0,0 +1,60 @@
+.title {
+  font-family: Adobe Heiti Std;
+  color: #38414c;
+  font-weight: bold;
+  font-size: 36px;
+}
+
+.time {
+  color: #8b929f;
+  font-weight: 400;
+  font-size: 24px;
+}
+
+.remake {
+  padding: 18px 21px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-size: 24px;
+  background-color: #f0f5fb;
+}
+
+.subItem {
+  margin: 18px 0;
+}
+
+.subTime {
+  color: #8b929f;
+  font-weight: 400;
+  margin-left: 20px;
+
+  font-size: 14px;
+}
+
+.subRemake {
+  margin-left: 20px;
+
+  padding: 18px 21px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #f0f5fb;
+}
+
+.noPassTitle {
+  font-family: Adobe Heiti Std;
+  color: #848e9f;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.noValueStatus {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background-color: rgba(4, 4, 4, 0.2);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
+}
diff --git a/src/pages/detail/index.config.js b/src/pages/detail/index.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ac7ad403a2a7f7f0f4845133c9b06b8e905b4c5
--- /dev/null
+++ b/src/pages/detail/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  enablePageMeta: true,
+});
diff --git a/src/pages/detail/index.css b/src/pages/detail/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..005fc8ac02f6f0a5a18bcb8d69b13fd4d7bfeb3a
--- /dev/null
+++ b/src/pages/detail/index.css
@@ -0,0 +1,59 @@
+.scrollArea {
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.topCard {
+  /* height: 555px; */
+  padding: 60px;
+  box-sizing: border-box;
+
+  border-radius: 20px;
+  background: linear-gradient(
+    90deg,
+    rgba(124, 153, 252, 1) 0%,
+    rgba(68, 97, 254, 1) 100%
+  );
+}
+
+.labelText {
+  flex: 1;
+  color: rgba(212, 222, 243, 1);
+  font-size: 40px;
+}
+
+.label {
+  color: rgba(212, 222, 243, 1);
+  font-size: 40px;
+}
+
+.labelTextWrapper {
+  display: flex;
+  /* width: 380px; */
+  margin-top: 24px;
+}
+
+.labelTextNowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: rgba(238, 243, 254, 1);
+  font-size: 40px;
+}
+
+.group {
+  /* height: 520px; */
+  padding: 60px;
+  box-sizing: border-box;
+  border-radius: 20px;
+  background-color: #ffffff;
+  margin-top: 32px;
+}
+
+.cardTitle {
+  font-family: Adobe Heiti Std;
+  color: #38414c;
+  font-weight: bold;
+  font-size: 40px;
+  margin-left: 16px;
+}
diff --git a/src/pages/detail/index.jsx b/src/pages/detail/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c9e9514f4ae992029631061cf249e5777fcc08a
--- /dev/null
+++ b/src/pages/detail/index.jsx
@@ -0,0 +1,111 @@
+import {
+  PageMeta,
+  View,
+  NavigationBar,
+  ScrollView,
+  Text,
+} from "@tarojs/components";
+import "./index.css";
+
+import LabelText from "./components/labelText";
+import { useEffect, useState } from "react";
+import Taro from "@tarojs/taro";
+
+import { Flex, Tag } from "@taroify/core";
+import Content from "./components/content";
+import useGlobalStore from "../../store/useUserStore";
+import service from "../../service";
+import Attachment from "./components/attachment";
+import ProcessTimeLine from "./components/timeLine";
+
+const Detail = () => {
+  const { actionObj, updateConfigSource } = useGlobalStore();
+
+  const [configSource, setConfigSource] = useState({});
+  const [detail, setDetail] = useState({});
+  const routerParams = Taro.getCurrentInstance().router.params;
+
+  console.log(routerParams);
+  // console.log(detail, configSource);
+  const init = () => {
+    service.getApplicationFormDetail(actionObj.id).then((res) => {
+      if (res.code === 200) {
+        setDetail(res.data);
+      }
+    });
+
+    service.getTemplateConfig(actionObj.thingId).then((res) => {
+      if (res.code === 200) {
+        setConfigSource(res.data);
+      }
+    });
+  };
+
+  useEffect(() => {
+    init();
+  }, [actionObj]);
+
+  const goManage = () => {
+    updateConfigSource(configSource);
+    Taro.navigateTo({
+      url: "/pages/manage/index",
+    });
+  };
+  return (
+    <View>
+      <PageMeta>
+        <NavigationBar
+          title="办理详情"
+          backgroundColor="#2E6CFF"
+          frontColor={"#fff"}
+          style={{ fontSize: 33 }}
+        ></NavigationBar>
+      </PageMeta>
+      <ScrollView
+        scrollY
+        className="scrollArea"
+        style={{
+          height:
+            Number(routerParams?.activeTab) != 1
+              ? "calc(100vh - 100px)"
+              : "calc(100vh - 30px)",
+        }}
+      >
+        <View className="topCard">
+          <Flex align="center">
+            <Text style={{ color: "#fff" }}>成都市倔强干洗店的审批</Text>
+            <Tag color="success">审批中</Tag>
+          </Flex>
+          <LabelText
+            label="组织机构代码"
+            text="902012000MA40K1DX9Q"
+          ></LabelText>
+          <LabelText
+            label="单位登记地址"
+            text="成都市新都区崇义桥街468号"
+          ></LabelText>
+          <LabelText label="联系人" text="李政生"></LabelText>
+          <LabelText label="联系电话" text="138902265863"></LabelText>
+        </View>
+        <View>
+          <Content configSource={configSource} data={detail}></Content>
+        </View>
+        <View>
+          <Attachment configSource={configSource} data={detail}></Attachment>
+        </View>
+        <View>
+          <ProcessTimeLine detail={detail} />
+        </View>
+      </ScrollView>
+      {Number(routerParams?.activeTab) != 1 ? (
+        <View className="actionWrapper">
+          <View className="okBtn" onClick={goManage}>
+            去处置
+          </View>
+        </View>
+      ) : undefined}
+    </View>
+  );
+};
+
+export default Detail;
diff --git a/src/pages/index/index.config.js b/src/pages/index/index.config.js
index 12abc5f6112f483c5273b94f7264951b30bf899c..ff18575fdf10c7d1a1f38ef475476004fd42339a 100644
--- a/src/pages/index/index.config.js
+++ b/src/pages/index/index.config.js
@@ -1,3 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
-})
+  // navigationBarTitleText: '首页'
+  // enablePageMeta: true,
+  navigationStyle: "custom",
+});
diff --git a/src/pages/index/index.css b/src/pages/index/index.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7123aaa655e39a70fbfa8e31c1eade8360b53d33 100644
--- a/src/pages/index/index.css
+++ b/src/pages/index/index.css
@@ -0,0 +1,15 @@
+.index {
+  width: 100%;
+  height: 100%;
+}
+
+.loginBox {
+  margin-top: 300px;
+  text-align: center;
+}
+
+.title {
+  font-size: 48px;
+  margin-bottom: 64px;
+  font-weight: bold;
+}
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 154b44b5451737b70a9acd2251dfaea8b1e4988d..616c8cefb90115f83b051becde00ddeef168e27a 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -1,16 +1,65 @@
-import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
-import './index.css'
-
+import { View } from "@tarojs/components";
+import { Button, Input, Form, Field, Cell } from "@taroify/core";
+import Taro, { useLoad } from "@tarojs/taro";
+import "./index.css";
+import service from "../../service";
 export default function Index() {
-
   useLoad(() => {
-    console.log('Page loaded.')
-  })
+    console.log("Page loaded.");
+  });
+
+  const onSubmit = (event) => {
+    console.log(value);
+    const value = event.detail.value;
+
+    service.login(value.password, value.username).then((res) => {
+      if (res.code === 200) {
+        Taro.setStorageSync("token", res.data.access_token);
+        Taro.reLaunch({
+          url: "/pages/list/index",
+        });
+      }
+    });
+  };
 
   return (
-    <View className='index'>
-      <Text>Hello world!</Text>
+    <View className="index">
+      <View className="loginBox">
+        <View className="title">审批通登录</View>
+        <Form
+          onSubmit={onSubmit}
+          defaultValues={{
+            username: "12400000106",
+            password: "zhrc@123",
+          }}
+        >
+          <Cell.Group inset>
+            <Form.Item
+              name="username"
+              rules={[{ required: true, message: "请填写手机号" }]}
+            >
+              <Form.Label>手机号</Form.Label>
+              <Form.Control>
+                <Input placeholder="手机号" />
+              </Form.Control>
+            </Form.Item>
+            <Form.Item
+              name="password"
+              rules={[{ required: true, message: "请填写密码" }]}
+            >
+              <Form.Label>密码</Form.Label>
+              <Form.Control>
+                <Input password placeholder="密码" />
+              </Form.Control>
+            </Form.Item>
+          </Cell.Group>
+          <View style={{ margin: "16px" }}>
+            <Button shape="round" block color="primary" formType="submit">
+              提交
+            </Button>
+          </View>
+        </Form>
+      </View>
     </View>
-  )
+  );
 }
diff --git a/src/pages/list/index.config.js b/src/pages/list/index.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ac7ad403a2a7f7f0f4845133c9b06b8e905b4c5
--- /dev/null
+++ b/src/pages/list/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  enablePageMeta: true,
+});
diff --git a/src/pages/list/index.css b/src/pages/list/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..9749048f8e2965d24d5bdf4b6a2d036a86b2d0cd
--- /dev/null
+++ b/src/pages/list/index.css
@@ -0,0 +1,88 @@
+.content {
+  padding: 40px;
+}
+
+.search-box {
+  display: flex;
+  gap: 36px;
+}
+
+.search-wrapper {
+  background-color: #fff;
+  border-radius: 24px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  -ms-flex: 1;
+  gap: 16px;
+  height: 118px;
+  padding: 0 40px;
+}
+
+.btn {
+  width: 306px;
+  height: 118px;
+  border-radius: 20px;
+  background-color: #dce6ff;
+  border: 1px solid #2e6cff;
+  font-family: Adobe Heiti Std;
+  color: #2e6cff;
+  font-weight: 400;
+  font-size: 40px;
+  text-align: center;
+  line-height: 118px;
+  box-sizing: border-box;
+}
+
+.btn:active {
+  background-color: #c5cde2;
+}
+
+.input {
+  font-family: Adobe Heiti Std;
+  color: #a4adbd;
+  /* 搜索申请单位、事项名称 */
+  font-size: 40px;
+  flex: 1;
+  -ms-flex: 1;
+}
+
+.taroify-tabs__wrap__scroll--line {
+  background-color: transparent !important;
+}
+
+.card {
+  /* height: 279px; */
+  padding: 64px;
+  border-radius: 20px;
+  background-color: #ffffff;
+  margin-bottom: 24px;
+}
+
+.card-wrapper {
+  height: calc(100vh - 400px);
+}
+.tabContent {
+  padding-top: 24px;
+}
+
+.cardTitle {
+  font-family: Adobe Heiti Std;
+  color: #2a2d31;
+  font-weight: bold;
+  /* 成都市倔强干洗店户外招牌设置申请 */
+  font-size: 40px;
+}
+
+.time {
+  font-family: Adobe Heiti Std;
+  color: #666666;
+  margin-top: 24px;
+  /* 2024.05.29 09:00:00 */
+  color: #333333;
+  font-size: 36px;
+}
+
+.titleContent {
+  gap: 24px;
+}
diff --git a/src/pages/list/index.jsx b/src/pages/list/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..047e4bee3c0973a48acf02ee3455544722f9cddd
--- /dev/null
+++ b/src/pages/list/index.jsx
@@ -0,0 +1,180 @@
+import {
+  PageMeta,
+  View,
+  NavigationBar,
+  Button,
+  Input,
+  Icon,
+  ScrollView,
+} from "@tarojs/components";
+import { ConfigProvider, Flex, Tabs, Tag } from "@taroify/core";
+import { useEffect, useState } from "react";
+import "./index.css";
+import Taro from "@tarojs/taro";
+import service from "../../service";
+import useGlobalStore from "../../store/useUserStore";
+import { set } from "lodash";
+
+const List = () => {
+  const [inputStr, setInputStr] = useState("");
+  const [activeTab, setActiveTab] = useState(0);
+  const [paginationInfo, setPaginationInfo] = useState();
+  const [backlogDataSource, setBacklogDataSource] = useState([]);
+  const { updateActionObj } = useGlobalStore();
+  const [historyPaginationInfo, setHistoryPaginationInfo] = useState();
+  const [historyDataSource, setHistoryDataSource] = useState([]);
+
+  const getData = (pageNum) => {
+    const params = {
+      name: inputStr,
+      pageNum: pageNum,
+      pageSize: 10,
+    };
+    service.getBacklog(params).then((res) => {
+      if (res.code === 200) {
+        if (pageNum === 1) {
+          setBacklogDataSource([...res.data?.list]);
+        } else {
+          setBacklogDataSource([...backlogDataSource, ...res.data?.list]);
+        }
+        setPaginationInfo(res.data);
+      }
+    });
+  };
+
+  const getHistory = (pageNum) => {
+    const params = {
+      name: inputStr,
+      pageNum: pageNum,
+      pageSize: 10,
+    };
+    service
+      .getBacklogHistory(params)
+      .then((res) => {
+        if (res.code === 200) {
+          if (pageNum === 1) {
+            setHistoryDataSource([...res.data?.list]);
+          } else {
+            setHistoryDataSource([...historyDataSource, ...res.data?.list]);
+          }
+
+          setHistoryPaginationInfo(res.data);
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+  // console.log(historyDataSource);
+
+  useEffect(() => {
+    getData(1);
+    getHistory(1);
+  }, [inputStr]);
+  const onScrollToLower = () => {
+    if (paginationInfo.hasNextPage) {
+      getData(paginationInfo.pageNum + 1);
+    }
+  };
+
+  const onScrollToLowerInHistory = () => {
+    if (historyPaginationInfo.hasNextPage) {
+      getHistory(historyPaginationInfo.pageNum + 1);
+    }
+  };
+
+  const onClick = (params) => {
+    updateActionObj(params);
+
+    Taro.navigateTo({
+      url: "/pages/detail/index?activeTab=" + activeTab,
+    });
+  };
+
+  return (
+    <View>
+      <PageMeta>
+        <NavigationBar
+          title="审批通"
+          backgroundColor="#2E6CFF"
+          frontColor={"#fff"}
+          style={{ fontSize: 33 }}
+        ></NavigationBar>
+      </PageMeta>
+      <View className="content">
+        <View className="search-box">
+          <View className="search-wrapper">
+            <Icon type="search" size={14}></Icon>
+            <Input
+              placeholder="搜索申请单位、事项名称"
+              className="input"
+              onInput={(e) => setInputStr(e.detail.value)}
+            />
+          </View>
+        </View>
+        <View>
+          <ConfigProvider theme={{ tabsNavBackgroundColor: "transparent" }}>
+            <Tabs value={activeTab} onChange={setActiveTab} className="tabs">
+              <Tabs.TabPane title="待办理">
+                <View className="tabContent">
+                  <ScrollView
+                    className="card-wrapper"
+                    scrollY
+                    onScrollToLower={onScrollToLower}
+                  >
+                    {backlogDataSource.map((item) => {
+                      return (
+                        <View
+                          key={item.id}
+                          className="card"
+                          onClick={onClick.bind(this, item)}
+                        >
+                          <Flex align="center" className="titleContent">
+                            <View className="cardTitle">{item?.name}</View>
+                            <Tag color="primary">{item?.caseStatus.name}</Tag>
+                          </Flex>
+                          <View className="time">
+                            申请时间：{item?.createAt}
+                          </View>
+                        </View>
+                      );
+                    })}
+                  </ScrollView>
+                </View>
+              </Tabs.TabPane>
+              <Tabs.TabPane title="已处理">
+                <View className="tabContent">
+                  <ScrollView
+                    className="card-wrapper"
+                    scrollY
+                    onScrollToLower={onScrollToLowerInHistory}
+                  >
+                    {historyDataSource.map((item) => {
+                      return (
+                        <View
+                          key={item.id}
+                          className="card"
+                          onClick={onClick.bind(this, item)}
+                        >
+                          <Flex align="center" className="titleContent">
+                            <View className="cardTitle">{item?.name}</View>
+                            <Tag color="primary">{item?.caseStatus.name}</Tag>
+                          </Flex>
+                          <View className="time">
+                            申请时间：{item?.createAt}
+                          </View>
+                        </View>
+                      );
+                    })}
+                  </ScrollView>
+                </View>
+              </Tabs.TabPane>
+            </Tabs>
+          </ConfigProvider>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default List;
diff --git a/src/pages/manage/index.config.js b/src/pages/manage/index.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ac7ad403a2a7f7f0f4845133c9b06b8e905b4c5
--- /dev/null
+++ b/src/pages/manage/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  enablePageMeta: true,
+});
diff --git a/src/pages/manage/index.css b/src/pages/manage/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..745462ab478d91755f3b1be7dceff35ffd52f37f
--- /dev/null
+++ b/src/pages/manage/index.css
@@ -0,0 +1,30 @@
+.examineWrapper {
+  background-color: #fff;
+  margin: 46px;
+  border-radius: 16px;
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.examineWrapper_area {
+  width: 100%;
+  height: 180px;
+}
+
+.manage_container {
+  height: calc(100vh -200px);
+}
+
+.attachment_upload {
+  width: 120px;
+  height: 120px;
+  background-color: #f7f8fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.attachmentList {
+  display: flex;
+  gap: 24px;
+}
diff --git a/src/pages/manage/index.jsx b/src/pages/manage/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e1ff9599bf54cb352c2b9b83ac3be3476af961c
--- /dev/null
+++ b/src/pages/manage/index.jsx
@@ -0,0 +1,258 @@
+import {
+  ScrollView,
+  Textarea,
+  View,
+  PageMeta,
+  NavigationBar,
+  Image,
+} from "@tarojs/components";
+import "./index.css";
+import { Cell, Form, Field, Input, Flex, Button, Toast } from "@taroify/core";
+import RenderComponent from "../../components/FormComponentRender/index";
+import { Plus } from "@taroify/icons";
+import useGlobalStore from "../../store/useUserStore";
+import service from "../../service";
+import Taro from "@tarojs/taro";
+import { useEffect, useState, useMemo } from "react";
+import { composeImgUrl } from "../../utils";
+import {
+  buildListByGroupId,
+  inversionSerializationRule,
+} from "../../utils/index";
+
+const Manage = () => {
+  const { actionObj, configSource } = useGlobalStore();
+  const forwardAndReverseName =
+    actionObj?.forwardAndReverseName?.split(",") ?? [];
+
+  const [inputStr, setInputStr] = useState("");
+  const [fileList, setFileList] = useState([]);
+
+  const formConfig = useMemo(() => {
+    let matterContentList = configSource?.matterContentList;
+
+    if (actionObj?.examineKeys !== "all") {
+      const examineKeys = actionObj?.examineKeys?.split(",") ?? [];
+      matterContentList = configSource?.matterContentList?.filter((v) =>
+        examineKeys.includes(v.fieldKey)
+      );
+    } else {
+      matterContentList = [];
+    }
+
+    let groupList = [];
+    let configList = [];
+    if (matterContentList) {
+      let temp = matterContentList
+        .sort((pre, cur) => pre.sort - cur.sort)
+        .map((item) => {
+          return {
+            ...item,
+            componentOption: item.otherSet ? JSON.parse(item.otherSet) : {},
+            key: item.fieldKey,
+            validationRules: inversionSerializationRule(item.validationRules),
+          };
+        });
+
+      temp.forEach((item) => {
+        if (item.componentType === "Branch") {
+          groupList.push(item);
+        } else {
+          configList.push(item);
+        }
+      });
+      return {
+        groupList: groupList,
+        configList: buildListByGroupId(configList),
+      };
+    }
+    return {
+      groupList: [],
+      configList: [],
+    };
+  }, [configSource, actionObj]);
+
+  const submitReverse = () => {
+    const formData = {
+      taskId: actionObj?.taskId,
+      approveComment: inputStr,
+      attachmentList: fileList.join(","),
+      approvePass: false,
+    };
+    service.completeExamine(formData).then((res) => {
+      console.log(res);
+      if (res.code === 200) {
+        Toast.success("处置成功");
+        Taro.reLaunch({ url: "/pages/list/index" });
+      }
+    });
+  };
+
+  const onSubmit = (event) => {
+    const values = event.detail.value;
+
+    const params = [];
+    for (const key in values) {
+      const itemConfig = configSource?.matterContentList?.find(
+        (v) => v.fieldKey === key
+      );
+
+      params.push({
+        contentId: key,
+        content: values[key],
+        applicantRecordId: actionObj.id,
+        downFlag:
+          itemConfig.componentType === "FileUpload" ||
+          itemConfig.componentType === "ImgUpload"
+            ? true
+            : false,
+      });
+    }
+    try {
+      // console.log(values, params);
+      service.submitForm({
+        thingId: actionObj.thingId,
+        reportContents: params,
+      });
+
+      let formData = {
+        taskId: actionObj?.taskId,
+        approveComment: inputStr,
+        attachmentList: fileList.join(","),
+      };
+      if (actionObj.nodeName === "审批节点") {
+        formData = { ...formData, approvePass: true };
+      }
+
+      service.completeExamine(formData).then((res) => {
+        console.log(res);
+
+        if (res.code === 200) {
+          Toast.success("处置成功");
+          Taro.reLaunch({ url: "/pages/list/index" });
+        }
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const uploadFile = () => {
+    Taro.chooseMessageFile({
+      count: 1,
+      type: "all",
+      success: ({ tempFiles }) => {
+        Taro.uploadFile({
+          url: "http://192.168.2.21:21610/oss/upload?bucketName=cgtf",
+          name: "file",
+          filePath: tempFiles[0].path,
+          success: (res) => {
+            const resData = JSON.parse(res.data);
+            if (resData.code === 200) {
+              setFileList((prev) => [...prev, resData.data]);
+            }
+          },
+        });
+      },
+    });
+  };
+
+  return (
+    <View>
+      <PageMeta>
+        <NavigationBar
+          title="办理"
+          backgroundColor="#2E6CFF"
+          frontColor={"#fff"}
+          style={{ fontSize: 33 }}
+        ></NavigationBar>
+      </PageMeta>
+      <ScrollView scrollY className="manage_container">
+        <View style={{ height: 24 }}></View>
+        <Toast id="toast" />
+        <Form onSubmit={onSubmit}>
+          {formConfig.configList.map((item) => {
+            return (
+              <Cell.Group inset>
+                {item.list.map((formItem) => {
+                  return (
+                    <Form.Item
+                      name={formItem.key}
+                      rules={[
+                        {
+                          required: formItem.componentOption?.require,
+                          message: `请填写${formItem?.label}`,
+                        },
+                        ...formItem.validationRules,
+                      ]}
+                    >
+                      <Form.Label>{formItem.label}</Form.Label>
+
+                      <Form.Control>
+                        {(controller) => (
+                          <RenderComponent
+                            config={formItem.componentOption}
+                            componentType={formItem.componentType}
+                            {...controller}
+                          ></RenderComponent>
+                        )}
+                      </Form.Control>
+                    </Form.Item>
+                  );
+                })}
+              </Cell.Group>
+            );
+          })}
+
+          <View className="examineWrapper">
+            <Textarea
+              className="examineWrapper_area"
+              placeholder="请输入审批意见"
+              onInput={(e) => {
+                setInputStr(e.detail.value);
+              }}
+            ></Textarea>
+            <View className="attachmentList">
+              {fileList?.map((item) => {
+                return (
+                  <View className="attachment_upload" onClick={uploadFile}>
+                    <View></View>
+                    <Image
+                      src={composeImgUrl(item)}
+                      onClick={() => {
+                        Taro.previewImage({
+                          current: composeImgUrl(item),
+                          urls: [composeImgUrl(item)],
+                        });
+                      }}
+                      style={{ width: "100%", height: "100%" }}
+                    ></Image>
+                  </View>
+                );
+              })}
+              <View className="attachment_upload" onClick={uploadFile}>
+                <Plus />
+              </View>
+            </View>
+          </View>
+          <Flex style={{ margin: "16px" }}>
+            {actionObj.nodeName === "审批节点" && (
+              <Button
+                shape="round"
+                block
+                color="danger"
+                onClick={submitReverse}
+              >
+                {forwardAndReverseName?.[1]}
+              </Button>
+            )}
+            <Button shape="round" block color="primary" formType="submit">
+              {forwardAndReverseName?.[0] ?? "通过"}
+            </Button>
+          </Flex>
+        </Form>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default Manage;
diff --git a/src/service/index.js b/src/service/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..90f0fe78eb7be83e9ea6a032ae4bfdbe59c2eee5
--- /dev/null
+++ b/src/service/index.js
@@ -0,0 +1,131 @@
+import Taro from "@tarojs/taro";
+
+const dev = "http://192.168.2.21:21610";
+const loginDev = "http://192.168.2.21:21590";
+/** 对象转参数 */
+function objectToQuery(obj) {
+  return Object.keys(obj)
+    .map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(obj[k]))
+    .join("&");
+}
+
+/** 简单封装 */
+const request = {
+  post: (url, option = {}) => {
+    const params = option.params;
+    let newUrl = dev + url;
+    if (params) {
+      newUrl += "?" + objectToQuery(params);
+    }
+    return new Promise((resolve, reject) => {
+      Taro.request({
+        url: newUrl,
+        method: "POST",
+        ...option,
+        header: {
+          Authorization: "Bearer " + Taro.getStorageSync("token"),
+          ...(option?.header ?? {}),
+        },
+        success: (res) => {
+          resolve(res.data);
+        },
+        fail: (err) => {
+          reject(err);
+        },
+      });
+    });
+  },
+  get: (url, option = {}) => {
+    let newUrl = dev + url;
+    return new Promise((resolve, reject) => {
+      Taro.request({
+        url: newUrl,
+        method: "GET",
+        header: {
+          Authorization: "Bearer" + Taro.getStorageSync("token"),
+        },
+        ...option,
+        success: (res) => {
+          resolve(res.data);
+        },
+        fail: (err) => {
+          reject(err);
+        },
+      });
+    });
+  },
+};
+
+/** 获取模版配置 */
+async function getTemplateConfig(id) {
+  return request.post("/hncy/matterInfo/getInfo", {
+    params: {
+      id,
+    },
+  });
+}
+
+/** 获取申请内容 */
+async function getApplicationFormDetail(id) {
+  return request.post("/hncy/record/getDetails", {
+    params: { id },
+  });
+}
+/** 登录 */
+async function login(password, username) {
+  const params = {
+    username: username,
+    password: password,
+    grant_type: "password",
+    client_id: "cgtf",
+    client_secret: "cgtf",
+  };
+  return request.post("", {
+    url: loginDev + "/auth/oauth/token" + "?" + objectToQuery(params),
+    header: {},
+  });
+}
+/** 获取全部待办 */
+async function getBacklog(params) {
+  return request.post("/hncy/record/list", {
+    params: params,
+  });
+}
+
+async function getBacklogHistory(params) {
+  return request.post("/hncy/record/list", {
+    params: { ...params, done: true },
+  });
+}
+
+async function getExamineHistory(id) {
+  return request.get("/hncy/flow/approve-history-list", {
+    data: {
+      businessId: id,
+    },
+  });
+}
+export function completeExamine(data) {
+  return request.post("/hncy/flow/complete", {
+    header: {
+      "content-type": "application/x-www-form-urlencoded",
+    },
+    data,
+  });
+}
+export function submitForm(data) {
+  return request.post("/hncy/record/approveEditReportContent", {
+    data,
+  });
+}
+
+export default {
+  login,
+  getBacklog,
+  getTemplateConfig,
+  getApplicationFormDetail,
+  getExamineHistory,
+  completeExamine,
+  submitForm,
+  getBacklogHistory,
+};
diff --git a/src/store/useUserStore.js b/src/store/useUserStore.js
new file mode 100644
index 0000000000000000000000000000000000000000..8a6daefc60b883e40127e0f8edb09a1ec3e1e643
--- /dev/null
+++ b/src/store/useUserStore.js
@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+/** 全局状态管理 */
+const useGlobalStore = create()((set) => ({
+  actionObj: undefined,
+  configSource: undefined,
+  /** 更新 */
+  updateActionObj: (obj) => {
+    set({ actionObj: obj });
+  },
+  updateConfigSource: (obj) => {
+    set({ configSource: obj });
+  },
+}));
+
+export default useGlobalStore;
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..708cbff59302831973ebb25b04f3d8aa05bbc0a2
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,39 @@
+export function buildListByGroupId(target) {
+  const groupList = [];
+
+  const groupMap = {};
+
+  target.forEach((formConfig) => {
+    if (!groupMap[formConfig?.groupId]) {
+      groupMap[formConfig?.groupId] = [];
+    }
+    groupMap[formConfig?.groupId].push(formConfig);
+  });
+
+  for (const groupTitle in groupMap) {
+    if (groupMap.hasOwnProperty(groupTitle)) {
+      groupList.push({
+        title: groupTitle,
+        list: groupMap[groupTitle],
+      });
+    }
+  }
+
+  return groupList;
+}
+
+export function composeImgUrl(imgStr) {
+  return `http://192.168.2.24:9000${imgStr}`;
+}
+
+export function inversionSerializationRule(inputStr) {
+  let value = JSON.parse(inputStr);
+
+  if (Array.isArray(value) && value.length > 0) {
+    //
+    const regexString = value[0].pattern.slice(1, -1);
+    value[0].pattern = new RegExp(regexString);
+  }
+
+  return value;
+}
diff --git a/yarn.lock b/yarn.lock
index d06fa90d7f307f28bc9c58ce9cd90e7355eeaaa8..7432a5e31e15a655c3c1989a290892c9185dd441 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -154,7 +154,7 @@
     "@babel/traverse" "^7.24.8"
     "@babel/types" "^7.24.8"
 
-"@babel/helper-module-imports@^7.24.7":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
   integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
@@ -1158,7 +1158,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.14.5", "@babel/runtime@^7.21.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.14.5", "@babel/runtime@^7.21.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
   integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
@@ -1901,6 +1901,34 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@taroify/core@^0.3.1-alpha.0":
+  version "0.3.1-alpha.0"
+  resolved "https://registry.yarnpkg.com/@taroify/core/-/core-0.3.1-alpha.0.tgz#f1618f1cc4a7e3b9a226059d1494e2d55fd6568d"
+  integrity sha512-V8tRQ5ZeX1uIrjp84grD2UR1WiDMIr9A5aQIu40r2c8zx/YsSRqx0J/FLkhO0Zvo9sX3A7y+BP+fz06EW0xegw==
+  dependencies:
+    "@taroify/hooks" "^0.3.1-alpha.0"
+    "@taroify/icons" "^0.3.1-alpha.0"
+    classnames "^2.2.6"
+    lodash "^4.17.21"
+    promise "^8.1.0"
+    raf "^3.4.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.1"
+
+"@taroify/hooks@^0.3.1-alpha.0":
+  version "0.3.1-alpha.0"
+  resolved "https://registry.yarnpkg.com/@taroify/hooks/-/hooks-0.3.1-alpha.0.tgz#b4d7b9cac278405f7da55a0b169b21d01db2213f"
+  integrity sha512-Ag8iYIgAeBW3etBDTZl6VxgaqXTYmww7g2IknAGa4U8oxjXaI6U3ukiINGXrY0VMLxoTkoRakDb0YeKj4laS4w==
+  dependencies:
+    "@vant/area-data" "^1.2.1"
+
+"@taroify/icons@^0.3.1-alpha.0":
+  version "0.3.1-alpha.0"
+  resolved "https://registry.yarnpkg.com/@taroify/icons/-/icons-0.3.1-alpha.0.tgz#9709fd7eb0c056da8cbb88b30415730d693f5baf"
+  integrity sha512-NDysyREjLb0UZOTKx4pOSyUcWs+ZJ7IofQgkckX6OF0TbsNA+1YlSiI0HKB0kWUNi4oL/71jvt21U3qdrsbpEg==
+  dependencies:
+    classnames "^2.2.6"
+
 "@tarojs/api@3.6.33":
   version "3.6.33"
   resolved "https://registry.yarnpkg.com/@tarojs/api/-/api-3.6.33.tgz#e787c7d2c28d89cb99896adca5af781c094e875d"
@@ -2874,6 +2902,11 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vant/area-data@^1.2.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@vant/area-data/-/area-data-1.5.1.tgz#bdd943b9b569476cb04133a8323bd04aa35be2c2"
+  integrity sha512-gR5TPEzTbxN1cTK1aDhCoyikSCLX7DAacxyXoKyI4SAsYYTZrDl/nLgQFIm9vLsvWzlPIda8xV8/U3x7M9k6ww==
+
 "@vue/compiler-core@3.4.31":
   version "3.4.31"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.31.tgz#b51a76f1b30e9b5eba0553264dff0f171aedb7c6"
@@ -3409,6 +3442,11 @@ arrify@^2.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
   integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
+asap@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
 asn1@~0.2.3:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
@@ -3521,6 +3559,13 @@ babel-plugin-dynamic-import-node@2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.13.8:
+  version "1.13.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.13.8.tgz#782c517f6bbf2de3b1f75aaafd6d20a491c4878c"
+  integrity sha512-36babpjra5m3gca44V6tSTomeBlPA7cHUynrE2WiQIm3rEGD9xy28MKsx5IdO45EbnpJY7Jrgd00C6Dwt/l/2Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+
 babel-plugin-istanbul@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
@@ -4055,7 +4100,7 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz#c485341ae8fd999ca4ee5af2d7a1c9ae01e0099c"
   integrity sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -5002,6 +5047,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -9856,6 +9909,13 @@ promise-polyfill@^7.1.0:
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.2.tgz#ab05301d8c28536301622d69227632269a70ca3b"
   integrity sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ==
 
+promise@^8.1.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
+  integrity sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==
+  dependencies:
+    asap "~2.0.6"
+
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -9864,7 +9924,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9982,6 +10042,13 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -10042,7 +10109,7 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
@@ -10065,6 +10132,16 @@ react-refresh@^0.4.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
   integrity sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==
 
+react-transition-group@^4.4.1:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.0.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -11801,6 +11878,11 @@ url-to-options@^1.0.1:
   resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
   integrity sha512-0kQLIzG4fdk/G5NONku64rSH/x32NOA39LVQqlK8Le6lvTF6GGRJpqaQFGgU+CLwySIqBSMdwYM0sYcW9f6P4A==
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -12390,3 +12472,10 @@ yup@^1.2.0:
     tiny-case "^1.0.3"
     toposort "^2.0.2"
     type-fest "^2.19.0"
+
+zustand@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05"
+  integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==
+  dependencies:
+    use-sync-external-store "1.2.0"