feat: 更新组件库

app/app.config.ts

@@ -6,6 +6,7 @@ export default defineAppConfig({
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
+    navigationBarTextStyle: 'black',
+    navigationStyle: 'custom',
   }
 })

app/components/layout/Layout.tsx

@@ -0,0 +1,38 @@
+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>
+    )
+})
+
+interface LayoutProps {
+    loadding?: boolean
+}
+
+interface LayoutComponent extends FC<PropsWithChildren<LayoutProps>> {
+    Header: FC<PropsWithChildren>,
+    Footer: FC<PropsWithChildren>,
+    Container: FC<PropsWithChildren>,
+}
+
+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'>
+      {children}
+    </View>
+  )
+}
+
+const Layout = LayoutBase as unknown as LayoutComponent
+
+export default Layout;

app/components/layout/index.ts

@@ -0,0 +1,2 @@
+
+export * from './Layout';

app/pages/index/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '首页',
+  disableScroll: true,
 })

app/pages/index/index.tsx

@@ -1,3 +1,4 @@
+import Layout from '@/components/layout/Layout'
 import { View, Text } from '@tarojs/components'
 import { useLoad } from '@tarojs/taro'
 
@@ -7,10 +8,10 @@ export default function Index () {
   })
   
   return (
-    <View className=''>
-      <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
-        <Text>Hello world!</Text>
-      </View>
-    </View>
+    <Layout loadding>
+        <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
+          <Text>Hello world!</Text>
+        </View>
+    </Layout>
   )
 }

mock/index.ts

@@ -1,25 +1,35 @@
-import Mock from 'mockjs'
-
+import Mock from "mockjs";
 
 export default {
-    "GET /api/hello": (req:any, res:any) => {
-        const result = Mock.mock({
-            "code": 0,
-            "msg": "success",
-            "data": {
-                "name|1": ["张三", "李四", "王五"]
-            }
-        })
-        return res.send(result);
-    },
-    "GET /api/globalConfig": (req:any, res:any) => {
-        const result = Mock.mock({
-            "code": 0,
-            "msg": "success",
-            "data": {
-                "appId": "123456",
-            }
-        })
-        return res.send(result);
-    }
-}
+  "GET /api/hello": (req: any, res: any) => {
+    const result = Mock.mock({
+      code: 0,
+      msg: "success",
+      data: {
+        "name|1": ["张三", "李四", "王五"],
+      },
+    });
+    return res.send(result);
+  },
+  "GET /api/globalConfig": (req: any, res: any) => {
+    const result = Mock.mock({
+      code: 0,
+      msg: "success",
+      data: {
+        appId: "123456",
+      },
+    });
+    return res.send(result);
+  },
+  // 通过员工身份编码，获取该员工关联企业的页面内容数据，员工身份等
+  "GET /api/content": (req: any, res: any) => {
+    console.log("员工身份编码:", req.query.employeeCode);
+    // 返回数据类型
+    const result = Mock.mock({
+      code: 0,
+      msg: "success",
+      data: [],
+    });
+    return res.send(result);
+  },
+};

test/demo.http

@@ -0,0 +1,8 @@
+@host=http://127.0.0.1:9527
+
+### 测试请求接口
+GET {{host}}/api/hello HTTP/1.1
+
+
+### 通过员工编码获取员工信息及关联企业信息
+GET {{host}}/api/content?employeeCode=31213 HTTP/1.1