feat: 更新业务组件

app/components/business/bizcard.tsx

@@ -0,0 +1,48 @@
+/**
+ * 电子名片组件
+ * =========================================
+ * 1. 纯卡片风格
+ * 2. 卡片+图片风格
+ * 3. 纯图片风格
+ * 4. 图片背景风格
+ * =========================================
+ **/
+import { View, Text } from "@tarojs/components";
+import { memo } from "react";
+
+interface BizCardProps {
+  title: string;
+  userInfo: User;
+}
+
+export const BizCardTpl_01 = memo(({ userInfo }: BizCardProps) => {
+  return (
+    <View>
+      <Text>{userInfo.name}</Text>
+    </View>
+  );
+});
+
+export const BizCardTpl_02 = memo(() => {
+  return (
+    <View className="bg-white p-3 h-30 rounded-sm shadow">
+      <Text>Card Title</Text>
+    </View>
+  );
+});
+
+export const BizCardTpl_03 = memo(() => {
+  return (
+    <View>
+      <Text>Card Title</Text>
+    </View>
+  );
+});
+
+export const BizCardTpl_04 = memo(() => {
+  return (
+    <View>
+      <Text>Card Title</Text>
+    </View>
+  );
+});

app/components/business/button.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+import { memo } from "react";
+
+// 按钮组件
+export const ButtonTpl = memo(() => {
+  return <View></View>;
+});

app/components/business/grids.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+import { memo } from "react";
+
+// 宫格组件
+export const GridsTpl = memo(() => {
+  return <View></View>;
+});

app/components/business/image.tsx

@@ -0,0 +1,16 @@
+import { View, Image } from "@tarojs/components";
+import { memo } from "react";
+
+interface Props {
+  src: string;
+  size: "small" | "medium" | "large" | "raw";
+}
+
+export const ImageTpl = memo(({ src, size }: Props) => {
+  console.log(size);
+  return (
+    <View>
+      <Image src={src} mode="widthFix" />
+    </View>
+  );
+});

app/components/business/index.ts

@@ -0,0 +1,9 @@
+export * from "./bizcard";
+export * from "./noticebar";
+export * from "./swiper";
+export * from "./image";
+export * from "./button";
+export * from "./meida";
+export * from "./grids";
+export * from "./list";
+export * from "./video";

app/components/business/list.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+import { memo } from "react";
+
+// 列表组件
+export const ListTpl = memo(() => {
+  return <View></View>;
+});

app/components/business/meida.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+import { memo } from "react";
+
+// 图文组件
+export const MeidaImageTpl = memo(() => {
+  return <View></View>;
+});

app/components/business/noticebar.tsx

@@ -0,0 +1,35 @@
+/**
+ * 公告组件
+ * =========================================
+ * 1. 横向单行文本
+ * 2. 横向滚动文本
+ * 3. 竖向滚动多行文本
+ * =========================================
+ **/
+
+import { View, Text } from "@tarojs/components";
+import { memo } from "react";
+
+export const NoticeBarTpl_01 = memo(() => {
+  return (
+    <View>
+      <Text>公告内容</Text>
+    </View>
+  );
+});
+
+export const NoticeBarTpl_02 = memo(() => {
+  return (
+    <View>
+      <Text>公告内容</Text>
+    </View>
+  );
+});
+
+export const NoticeBarTpl_03 = memo(() => {
+  return (
+    <View>
+      <Text>公告内容</Text>
+    </View>
+  );
+});

app/components/business/swiper.tsx

@@ -0,0 +1,12 @@
+import { Swiper, SwiperItem, View } from "@tarojs/components";
+import { memo } from "react";
+
+export const SwiperTpl = memo(() => {
+  return (
+    <Swiper>
+      <SwiperItem>
+        <View className="swiper-item">1</View>
+      </SwiperItem>
+    </Swiper>
+  );
+});

app/components/business/video.tsx

@@ -0,0 +1,7 @@
+import { Video } from "@tarojs/components";
+import { memo } from "react";
+
+// 视频组件
+export const VideoTpl = memo(() => {
+  return <Video src="https://example.com/video.mp4" />;
+});

app/components/layout/Layout.tsx

@@ -109,11 +109,12 @@ const LayoutContainer = memo(
   },
 );
 
-// 自定义页脚
+// 自定义页脚 底部安全区，暂时未适配 Android
 const LayoutFooter = memo(({ children }: PropsWithChildren) => {
   return (
-    <View className="h-[150px] bg-green-500 text-white flex items-center justify-center">
+    <View className=" bg-green-500 text-white">
-      {children}
+      <View>{children}</View>
+      <View className="min-h-6 safe_bottom bg-amber-400"></View>
     </View>
   );
 });

app/pages/index/index.tsx

@@ -1,9 +1,16 @@
 import Layout from "@/components/layout/Layout";
-import { View, Text } from "@tarojs/components";
+import { View } from "@tarojs/components";
 import { useDidShow } from "@tarojs/taro";
 import { useRefresherConfig } from "@/components/layout";
+import React, { Suspense } from "react";
 import { usePageContent } from "./hooks";
 
+const BizCardTpl02 = React.lazy(() =>
+  import("@/components/business").then((module) => ({
+    default: module.BizCardTpl_02,
+  })),
+);
+
 export default function Index() {
   const { pageLoading, pageContent, loadPageContent } = usePageContent();
 
@@ -30,16 +37,11 @@ export default function Index() {
         className="bg-red-400"
         refresherConfig={refresherConfig}
       >
-        <View className="space-y-4">
+        <Suspense fallback={<View className="space-y-4 p-3">加载中</View>}>
-          {Array.from({ length: 10 }).map((_, index) => (
+          <View className="space-y-4 p-3">
-            <View
+            <BizCardTpl02 />
-              key={index}
+          </View>
-              className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl"
+        </Suspense>
-            >
-              <Text className="">{pageContent}</Text>
-            </View>
-          ))}
-        </View>
       </Layout.Container>
       <Layout.Footer>测试页脚</Layout.Footer>
     </Layout>

app/styles/tailwind.basic.css

@@ -1 +1,7 @@
 @import "weapp-tailwindcss";
+
+@layer utilities {
+  .safe_bottom {
+    height: env(safe-area-inset-bottom);
+  }
+}

types/types.d.ts

@@ -0,0 +1,6 @@
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  age: number;
+}