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 (
+
+ {userInfo.name}
+
+ );
+});
+
+export const BizCardTpl_02 = memo(() => {
+ return (
+
+ Card Title
+
+ );
+});
+
+export const BizCardTpl_03 = memo(() => {
+ return (
+
+ Card Title
+
+ );
+});
+
+export const BizCardTpl_04 = memo(() => {
+ return (
+
+ Card Title
+
+ );
+});
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 ;
+});
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 ;
+});
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 (
+
+
+
+ );
+});
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 ;
+});
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 ;
+});
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 (
+
+ 公告内容
+
+ );
+});
+
+export const NoticeBarTpl_02 = memo(() => {
+ return (
+
+ 公告内容
+
+ );
+});
+
+export const NoticeBarTpl_03 = memo(() => {
+ return (
+
+ 公告内容
+
+ );
+});
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 (
+
+
+ 1
+
+
+ );
+});
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 ;
+});
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 (
-
- {children}
+
+ {children}
+
);
});
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}
>
-
- {Array.from({ length: 10 }).map((_, index) => (
-
- {pageContent}
-
- ))}
-
+ 加载中}>
+
+
+
+
测试页脚
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;
+}