From a8b11c2b06297bba15dee039bb48cc6c9a4935f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E6=A3=AE?= <wangzhangsen@lanxiongwangluo.com>
Date: Wed, 5 Nov 2025 17:11:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/business/bizcard.tsx   | 48 +++++++++++++++++++++++++++
 app/components/business/button.tsx    |  7 ++++
 app/components/business/grids.tsx     |  7 ++++
 app/components/business/image.tsx     | 16 +++++++++
 app/components/business/index.ts      |  9 +++++
 app/components/business/list.tsx      |  7 ++++
 app/components/business/meida.tsx     |  7 ++++
 app/components/business/noticebar.tsx | 35 +++++++++++++++++++
 app/components/business/swiper.tsx    | 12 +++++++
 app/components/business/video.tsx     |  7 ++++
 app/components/layout/Layout.tsx      |  7 ++--
 app/pages/index/index.tsx             | 24 ++++++++------
 app/styles/tailwind.basic.css         |  8 ++++-
 types/types.d.ts                      |  6 ++++
 14 files changed, 185 insertions(+), 15 deletions(-)
 create mode 100644 app/components/business/bizcard.tsx
 create mode 100644 app/components/business/button.tsx
 create mode 100644 app/components/business/grids.tsx
 create mode 100644 app/components/business/image.tsx
 create mode 100644 app/components/business/index.ts
 create mode 100644 app/components/business/list.tsx
 create mode 100644 app/components/business/meida.tsx
 create mode 100644 app/components/business/noticebar.tsx
 create mode 100644 app/components/business/swiper.tsx
 create mode 100644 app/components/business/video.tsx
 create mode 100644 types/types.d.ts

diff --git a/app/components/business/bizcard.tsx b/app/components/business/bizcard.tsx
new file mode 100644
index 0000000..4367eea
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/app/components/business/button.tsx b/app/components/business/button.tsx
new file mode 100644
index 0000000..adf9629
--- /dev/null
+++ b/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>;
+});
diff --git a/app/components/business/grids.tsx b/app/components/business/grids.tsx
new file mode 100644
index 0000000..35100ce
--- /dev/null
+++ b/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>;
+});
diff --git a/app/components/business/image.tsx b/app/components/business/image.tsx
new file mode 100644
index 0000000..efed1c7
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/app/components/business/index.ts b/app/components/business/index.ts
new file mode 100644
index 0000000..451e5f2
--- /dev/null
+++ b/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";
diff --git a/app/components/business/list.tsx b/app/components/business/list.tsx
new file mode 100644
index 0000000..092be21
--- /dev/null
+++ b/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>;
+});
diff --git a/app/components/business/meida.tsx b/app/components/business/meida.tsx
new file mode 100644
index 0000000..0bc97eb
--- /dev/null
+++ b/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>;
+});
diff --git a/app/components/business/noticebar.tsx b/app/components/business/noticebar.tsx
new file mode 100644
index 0000000..ed0885e
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/app/components/business/swiper.tsx b/app/components/business/swiper.tsx
new file mode 100644
index 0000000..29ddc9e
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/app/components/business/video.tsx b/app/components/business/video.tsx
new file mode 100644
index 0000000..2a1ea2d
--- /dev/null
+++ b/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" />;
+});
diff --git a/app/components/layout/Layout.tsx b/app/components/layout/Layout.tsx
index 7b4b447..a4e8bfe 100644
--- a/app/components/layout/Layout.tsx
+++ b/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">
-      {children}
+    <View className=" bg-green-500 text-white">
+      <View>{children}</View>
+      <View className="min-h-6 safe_bottom bg-amber-400"></View>
     </View>
   );
 });
diff --git a/app/pages/index/index.tsx b/app/pages/index/index.tsx
index 1d9e609..fabc442 100644
--- a/app/pages/index/index.tsx
+++ b/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">
-          {Array.from({ length: 10 }).map((_, index) => (
-            <View
-              key={index}
-              className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl"
-            >
-              <Text className="">{pageContent}</Text>
-            </View>
-          ))}
-        </View>
+        <Suspense fallback={<View className="space-y-4 p-3">加载中</View>}>
+          <View className="space-y-4 p-3">
+            <BizCardTpl02 />
+          </View>
+        </Suspense>
       </Layout.Container>
       <Layout.Footer>测试页脚</Layout.Footer>
     </Layout>
diff --git a/app/styles/tailwind.basic.css b/app/styles/tailwind.basic.css
index 1aeafef..50d2f0c 100644
--- a/app/styles/tailwind.basic.css
+++ b/app/styles/tailwind.basic.css
@@ -1 +1,7 @@
-@import "weapp-tailwindcss";
\ No newline at end of file
+@import "weapp-tailwindcss";
+
+@layer utilities {
+  .safe_bottom {
+    height: env(safe-area-inset-bottom);
+  }
+}
diff --git a/types/types.d.ts b/types/types.d.ts
new file mode 100644
index 0000000..f848723
--- /dev/null
+++ b/types/types.d.ts
@@ -0,0 +1,6 @@
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  age: number;
+}