feat: 更新业务组件

app/app.config.ts

@@ -1,5 +1,26 @@
 export default defineAppConfig({
-  pages: ["pages/index/index"],
+  pages: [
+    "pages/index/index",
+    "pages/user/index",
+    "pages/cpage/index"
+  ],
+  tabBar: {
+    custom: true,
+    list: [
+      {
+        pagePath: "pages/index/index",
+        text: "首页",
+      },
+      {
+        pagePath: "pages/cpage/index",
+        text: "自定义页面",
+      },
+      {
+        pagePath: "pages/user/index",
+        text: "我的",
+      },
+    ],
+  },
   window: {
     backgroundTextStyle: "light",
     navigationBarBackgroundColor: "#fff",

app/components/business/bizcard.tsx

@@ -7,6 +7,7 @@
  * 4. 图片背景风格
  * =========================================
  **/
+
 import { View, Text } from "@tarojs/components";
 import { memo } from "react";
 
@@ -23,17 +24,17 @@ export const BizCardTpl_01 = memo(({ userInfo }: BizCardProps) => {
   );
 });
 
-export const BizCardTpl_02 = memo(() => {
+export const BizCardTpl02 = memo(() => {
   return (
     <View className="bg-white p-3 h-30 rounded-sm shadow">
-      <Text>Card Title</Text>
+      <Text>Card Title2</Text>
     </View>
   );
 });
 
 export const BizCardTpl_03 = memo(() => {
   return (
-    <View>
+    <View className="flex-1 p-3 bg-red-400">
       <Text>Card Title</Text>
     </View>
   );

app/components/layout/Layout.tsx

@@ -109,12 +109,16 @@ const LayoutContainer = memo(
   },
 );
 
+interface LayoutFooterProps {
+  className?: string;
+}
+
 // 自定义页脚 底部安全区，暂时未适配 Android
-const LayoutFooter = memo(({ children }: PropsWithChildren) => {
+const LayoutFooter = memo(({ className, children }: PropsWithChildren<LayoutFooterProps>) => {
   return (
-    <View className=" bg-green-500 text-white">
+    <View className={clsx("", className)}>
-      <View>{children}</View>
+      {children}
-      <View className="min-h-6 safe_bottom bg-amber-400"></View>
+      <View className="min-h-6 safe_bottom"></View>
     </View>
   );
 });

app/custom-tab-bar/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  "component": true
+}

app/custom-tab-bar/index.css

@@ -0,0 +1,25 @@
+.footer_bg{
+    background-color: #fff;
+}
+
+.footer_box{
+    display: flex;
+    padding-top: 24px;
+    align-items: center;
+   
+}
+.footer_box .item{
+    flex: 1 1 auto;
+    text-align: center;
+}
+
+.active_text{
+    color: #03c160;
+}
+.text{
+    color: #1e2028;
+}
+.safe_bottom{
+    height: env(safe-area-inset-bottom);
+    height: constant(safe-area-inset-bottom);
+}

app/custom-tab-bar/index.tsx

@@ -0,0 +1,63 @@
+import { CoverView } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import {clsx} from "clsx";
+import { useRecoilState, useSetRecoilState } from "recoil";
+import { tabbarModel, tabbarParamModel } from "@/model/tabbar.model";
+import { throttle } from "@tarojs/runtime";
+
+import './index.css';
+
+const CustomTabBar = () => {
+  const [active, setActive] = useRecoilState(tabbarModel);
+
+  const setParam = useSetRecoilState(tabbarParamModel);
+  const handlerClick = throttle((index: number) => {
+    if (active == index) return;
+    console.log(index, "触发次数");
+    setActive(index);
+    switch (index) {
+      case 1:
+        Taro.switchTab({
+          url: '/pages/index/index',
+        })
+        break;
+      case 2:
+        setParam("自定义页面产品")
+        Taro.switchTab({
+          url: '/pages/cpage/index',
+        })
+        break;
+      case 3:
+        setParam("自定义页面案例")
+        Taro.switchTab({
+          url: '/pages/cpage/index',
+        })
+        break;
+      case 4:
+        Taro.switchTab({
+          url: '/pages/user/index',
+        })
+        break;
+      default:
+        break;
+    }
+  }, 1000)
+
+  return (
+    <CoverView className="footer_bg">
+        <CoverView className="footer_box">
+            <CoverView className={clsx('item', active == 1 ? 'active_text': 'text')} onClick={() => handlerClick(1)}>首页</CoverView>
+            <CoverView className={clsx('item', active == 2 ? 'active_text': 'text')} onClick={() => handlerClick(2)}>产品</CoverView>
+            <CoverView className={clsx('item', active == 3 ? 'active_text': 'text')} onClick={() => handlerClick(3)}>案例</CoverView>
+            <CoverView className={clsx('item', active == 4 ? 'active_text': 'text')} onClick={() => handlerClick(4)}>我的</CoverView>
+        </CoverView>
+        <CoverView className="safe_bottom"></CoverView>
+    </CoverView>
+  );
+}
+
+CustomTabBar.options = {
+  addGlobalClass: true,
+}
+
+export default CustomTabBar;

app/model/tabbar.model.ts

@@ -0,0 +1,13 @@
+import { atom } from "recoil";
+
+
+// 自定义tabbar状态
+export const tabbarModel = atom({
+    key:"tabbarModel",
+    default:1
+})
+// 自定义tabbar携带参数
+export const tabbarParamModel = atom({
+    key:"tabbarParamModel",
+    default:""
+})

app/pages/cpage/index.config.ts

@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: "首页",
+  disableScroll: true,
+  navigationBarTextStyle: "white",
+  usingComponents:{}
+});

app/pages/cpage/index.tsx

@@ -0,0 +1,15 @@
+import { tabbarParamModel } from "@/model/tabbar.model";
+import { View, Text } from "@tarojs/components";
+import { useRecoilValue } from "recoil";
+
+
+export default function CPageIndex() {
+
+  const param = useRecoilValue(tabbarParamModel);
+
+  return (
+    <View className="h-screen w-screen flex items-center justify-center bg-red-500 text-white">
+      <Text>{param}</Text>
+    </View>
+  );
+}

app/pages/index/hooks.ts

@@ -1,3 +1,4 @@
+import { useRefresherConfig } from "@/components/layout";
 import Taro from "@tarojs/taro";
 import { useState } from "react";
 
@@ -5,7 +6,7 @@ import { useState } from "react";
 export const usePageContent = () => {
   const [pageContent, setPageContent] = useState("");
   const [pageLoading, setPageLoading] = useState<boolean>(true);
-
+  console.log("执行次数")
   const loadPageContent = async (code: string) => {
     try {
       console.log("Page content loaded:", code);
@@ -23,5 +24,16 @@ export const usePageContent = () => {
     }
   };
 
-  return { pageLoading, pageContent, loadPageContent };
+  // 下拉刷新
+  const refresherConfig = useRefresherConfig({
+    refresherEnabled: true,
+    refresherBackground: "#000",
+    refresherDefaultStyle: "white",
+    refresherThreshold: 50,
+    onRefresherRefresh: (event) => {
+      console.log("触发下拉刷新", event);
+    },
+  });
+
+  return { pageLoading, pageContent, refresherConfig, loadPageContent };
 };

app/pages/index/index.config.ts

@@ -2,4 +2,5 @@ export default definePageConfig({
   navigationBarTitleText: "首页",
   disableScroll: true,
   navigationBarTextStyle: "white",
+  usingComponents:{}
 });

app/pages/index/index.tsx

@@ -1,49 +1,44 @@
 import Layout from "@/components/layout/Layout";
 import { View } from "@tarojs/components";
-import { useDidShow } from "@tarojs/taro";
+import Taro, { useDidShow } from "@tarojs/taro";
-import { useRefresherConfig } from "@/components/layout";
+import React from "react";
-import React, { Suspense } from "react";
 import { usePageContent } from "./hooks";
 
 const BizCardTpl02 = React.lazy(() =>
   import("@/components/business").then((module) => ({
-    default: module.BizCardTpl_02,
+    default: module.BizCardTpl02,
   })),
 );
 
 export default function Index() {
-  const { pageLoading, pageContent, loadPageContent } = usePageContent();
+  const { pageLoading, pageContent, refresherConfig, loadPageContent } = usePageContent();
-
-  // 下拉刷新
-  const refresherConfig = useRefresherConfig({
-    refresherEnabled: true,
-    refresherBackground: "#000",
-    refresherDefaultStyle: "white",
-    refresherThreshold: 50,
-    onRefresherRefresh: (event) => {
-      console.log("触发下拉刷新", event);
-    },
-  });
 
   useDidShow(async () => {
     await loadPageContent("测试身份编码");
+    Taro.switchTab({ url: "/pages/index/index" });
     console.log("Page shown.");
   });
-
+  
   return (
     <Layout loadding={pageLoading}>
-      <Layout.Header hideBack={false}>测试导航栏</Layout.Header>
+      <Layout.Header hideBack={false}>{pageContent}</Layout.Header>
       <Layout.Container
-        className="bg-red-400"
+        className="bg-bg-gray"
         refresherConfig={refresherConfig}
       >
-        <Suspense fallback={<View className="space-y-4 p-3">加载中</View>}>
+        <View className="space-y-4 p-3">
-          <View className="space-y-4 p-3">
             <BizCardTpl02 />
-          </View>
+            <BizCardTpl02 />
-        </Suspense>
+        </View>
       </Layout.Container>
-      <Layout.Footer>测试页脚</Layout.Footer>
+      {/* <Layout.Footer>
+        <View className="flex items-center text-title pt-3">
+           <View className="flex-1 text-center border-r border-gray-300 text-primary">首页</View>
+           <View className="flex-1 text-center border-r border-gray-300">产品</View>
+           <View className="flex-1 text-center border-r border-gray-300">案例</View>
+           <View className="flex-1 text-center">我的</View>
+        </View>
+      </Layout.Footer> */}
     </Layout>
   );
 }

app/pages/user/index.config.ts

@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: "首页",
+  disableScroll: true,
+  navigationBarTextStyle: "white",
+  usingComponents:{}
+});

app/pages/user/index.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from "@tarojs/components";
+
+
+export default function UserIndex() {
+  return (
+    <View className="h-screen w-screen flex items-center justify-center bg-red-500 text-white">
+      <Text>UserIndex</Text>
+    </View>
+  );
+}

app/styles/tailwind.basic.css

@@ -1,5 +1,14 @@
 @import "weapp-tailwindcss";
 
+
+@theme inline {
+  --color-primary: #03c160; /* 主要颜色 */
+  --color-bg-white: #ffffff; /* 白色背景 */
+  --color-bg-gray: #F8F9FA; /* 背景颜色 */
+  --color-title: #1e2028; /* 标题颜色 */
+  --color-text: #6e7382; /* 文本颜色 */
+}
+
 @layer utilities {
   .safe_bottom {
     height: env(safe-area-inset-bottom);