diff --git a/.eslintrc b/.eslintrc
index 7809e66..19071ce 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,7 @@
 {
   "extends": ["taro/react"],
   "rules": {
+    "jsx-quotes": ["error", "prefer-double"],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
   }
diff --git a/.zed/debug.json b/.zed/debug.json
new file mode 100644
index 0000000..5dff798
--- /dev/null
+++ b/.zed/debug.json
@@ -0,0 +1,13 @@
+[
+  {
+    "type": "node",
+    "label": "Taro微信小程序调试",
+    "adapter": "JavaScript",
+    "request": "launch",
+    "console": "internalConsole",
+    "build": {
+      "command": "npm",
+      "args": ["run", "dev:weapp"]
+    }
+  }
+]
diff --git a/app/app.config.ts b/app/app.config.ts
index 0e1fc0b..9353656 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,12 +1,10 @@
 export default defineAppConfig({
-  pages: [
-    'pages/index/index'
-  ],
+  pages: ["pages/index/index"],
   window: {
-    backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black',
-    navigationStyle: 'custom',
-  }
-})
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "积客名片",
+    navigationBarTextStyle: "white",
+    navigationStyle: "custom",
+  },
+});
diff --git a/app/app.tsx b/app/app.tsx
index eec80e6..a1f6bd8 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -1,28 +1,23 @@
-import { PropsWithChildren } from 'react'
-import { useLaunch } from '@tarojs/taro'
-import { RecoilRoot } from 'recoil'
-
-import './styles/tailwind.basic.css'
-import { getGlobalConfig } from './apis'
+import { PropsWithChildren } from "react";
+import { useLaunch } from "@tarojs/taro";
+import { RecoilRoot } from "recoil";
+import { getGlobalConfig } from "@/apis";
 
+import "@/styles/tailwind.basic.css";
 
 function App({ children }: PropsWithChildren<any>) {
   useLaunch(() => {
-    // 初始化全局配置
-    loadGlobalConfig()
-    console.log('App launched.')
-  })
+    loadGlobalConfig();
+    console.log("App launched.");
+  });
 
+  // 初始化全局配置
   const loadGlobalConfig = async () => {
-    const res = await getGlobalConfig()
-    console.log(res)
-  }
+    const res = await getGlobalConfig();
+    console.log(res);
+  };
 
-  return (
-    <RecoilRoot>
-      {children}
-    </RecoilRoot>
-  )
+  return <RecoilRoot>{children}</RecoilRoot>;
 }
 
-export default App
+export default App;
diff --git a/app/components/layout/Layout.tsx b/app/components/layout/Layout.tsx
index 5d0f659..3ef39de 100644
--- a/app/components/layout/Layout.tsx
+++ b/app/components/layout/Layout.tsx
@@ -1,38 +1,38 @@
-import { View, Text } from "@tarojs/components"
-import { FC, memo, PropsWithChildren } from "react"
-
+import { View, Text } from "@tarojs/components";
+import { FC, memo, PropsWithChildren } from "react";
 
 const PageLoader = memo(() => {
-    return (
-        <View className='h-screen w-screen flex items-center justify-center bg-red-500 text-white text-2xl'>
-            <Text>Loading...</Text>
-        </View>
-    )
-})
+  return (
+    <View className="h-screen w-screen flex items-center justify-center bg-red-500 text-white text-2xl">
+      <Text>Loading...</Text>
+    </View>
+  );
+});
 
 interface LayoutProps {
-    loadding?: boolean
+  loadding: boolean;
 }
 
 interface LayoutComponent extends FC<PropsWithChildren<LayoutProps>> {
-    Header: FC<PropsWithChildren>,
-    Footer: FC<PropsWithChildren>,
-    Container: FC<PropsWithChildren>,
+  Header: FC<PropsWithChildren>;
+  Footer: FC<PropsWithChildren>;
+  Container: FC<PropsWithChildren>;
 }
 
-const LayoutBase = ({ children, loadding = true }: PropsWithChildren<LayoutProps>) => {
-    if (loadding){
-        return (
-            <PageLoader></PageLoader>
-        );
-    }
+const LayoutBase = ({
+  children,
+  loadding = true,
+}: PropsWithChildren<LayoutProps>) => {
+  if (loadding) {
+    return <PageLoader></PageLoader>;
+  }
   return (
-    <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
+    <View className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl">
       {children}
     </View>
-  )
-}
+  );
+};
 
-const Layout = LayoutBase as unknown as LayoutComponent
+const Layout = LayoutBase as unknown as LayoutComponent;
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/app/pages/index/hooks.ts b/app/pages/index/hooks.ts
new file mode 100644
index 0000000..55374b0
--- /dev/null
+++ b/app/pages/index/hooks.ts
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+// 页面请求hooks
+export const usePageContent = () => {
+  const [pageContent, setPageContent] = useState("");
+  const [pageLoading, setPageLoading] = useState<boolean>(true);
+
+  const loadPageContent = async (code: string) => {
+    try {
+      console.log("Page content loaded:", code);
+      setPageContent("请求结果");
+      setTimeout(() => {
+        setPageLoading(false);
+      }, 5000);
+    } catch (error) {
+      console.error("Error loading page content:", error);
+      setPageLoading(false);
+    }
+  };
+
+  return { pageLoading, pageContent, loadPageContent };
+};
diff --git a/app/pages/index/index.tsx b/app/pages/index/index.tsx
index 7bf43f4..3af7908 100644
--- a/app/pages/index/index.tsx
+++ b/app/pages/index/index.tsx
@@ -1,17 +1,21 @@
-import Layout from '@/components/layout/Layout'
-import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import Layout from "@/components/layout/Layout";
+import { View, Text } from "@tarojs/components";
+import { useDidShow } from "@tarojs/taro";
+import { usePageContent } from "./hooks";
+
+export default function Index() {
+  const { pageLoading, pageContent, loadPageContent } = usePageContent();
+
+  useDidShow(async () => {
+    await loadPageContent("测试身份编码");
+    console.log("Page shown.");
+  });
 
-export default function Index () {
-  useLoad(() => {
-    console.log('Page loaded.')
-  })
-  
   return (
-    <Layout loadding>
-        <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
-          <Text>Hello world!</Text>
-        </View>
+    <Layout loadding={pageLoading}>
+      <View className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl">
+        <Text className="">{pageContent}</Text>
+      </View>
     </Layout>
-  )
+  );
 }
diff --git a/app/utils/comm/index.ts b/app/utils/comm/index.ts
new file mode 100644
index 0000000..9feba70
--- /dev/null
+++ b/app/utils/comm/index.ts
@@ -0,0 +1,7 @@
+import { useState } from "react";
+
+// 页面加载状态
+export const usePageLoading = () => {
+  const [pageLoading, setPageLoading] = useState(false);
+  return [pageLoading, setPageLoading] as const;
+};