From 7f021dcfa0939ad4ad4caa180c741fdb52eab916 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 21 Nov 2025 18:13:33 +0800
Subject: [PATCH] =?UTF-8?q?feat;=20=E5=88=9B=E5=BB=BA=E9=A6=96=E5=B1=8F?=
=?UTF-8?q?=E6=8C=87=E6=A0=87=E6=94=B6=E9=9B=86=20Hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Home/components/HomePageSkeleton.tsx | 194 ++++++++++++++++++
1 file changed, 194 insertions(+)
create mode 100644 src/views/Home/components/HomePageSkeleton.tsx
diff --git a/src/views/Home/components/HomePageSkeleton.tsx b/src/views/Home/components/HomePageSkeleton.tsx
new file mode 100644
index 00000000..cc90852a
--- /dev/null
+++ b/src/views/Home/components/HomePageSkeleton.tsx
@@ -0,0 +1,194 @@
+/**
+ * 首页骨架屏组件
+ * 模拟首页的 6 个功能卡片布局，减少白屏感知时间
+ *
+ * 使用 Chakra UI 的 Skeleton 组件
+ *
+ * @module views/Home/components/HomePageSkeleton
+ */
+
+import React from 'react';
+import {
+ Box,
+ Container,
+ SimpleGrid,
+ Skeleton,
+ SkeletonText,
+ VStack,
+ HStack,
+ useColorModeValue,
+} from '@chakra-ui/react';
+
+// ============================================================
+// 类型定义
+// ============================================================
+
+interface HomePageSkeletonProps {
+ /** 是否显示动画效果 */
+ isAnimated?: boolean;
+ /** 骨架屏速度（秒） */
+ speed?: number;
+}
+
+// ============================================================
+// 单个卡片骨架
+// ============================================================
+
+const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean }> = ({ isFeatured = false }) => {
+ const bg = useColorModeValue('white', 'gray.800');
+ const borderColor = useColorModeValue('gray.200', 'gray.700');
+
+ return (
+
+
+ {/* 图标骨架 */}
+
+
+ {/* 标题骨架 */}
+
+
+ {/* 描述骨架 */}
+
+
+ {/* 按钮骨架 */}
+
+
+
+ {/* Featured 徽章骨架 */}
+ {isFeatured && (
+
+ )}
+
+ );
+};
+
+// ============================================================
+// 主骨架组件
+// ============================================================
+
+export const HomePageSkeleton: React.FC = ({
+ isAnimated = true,
+ speed = 0.8,
+}) => {
+ const containerBg = useColorModeValue('gray.50', 'gray.900');
+
+ return (
+
+
+
+ {/* 顶部标题区域骨架 */}
+
+ {/* 主标题 */}
+
+
+ {/* 副标题 */}
+
+
+ {/* CTA 按钮 */}
+
+
+
+
+
+
+ {/* 功能卡片网格骨架 */}
+
+ {/* 第一张卡片 - Featured (新闻中心) */}
+
+
+
+
+ {/* 其余 5 张卡片 */}
+ {[1, 2, 3, 4, 5].map((index) => (
+
+ ))}
+
+
+ {/* 底部装饰元素骨架 */}
+
+ {[1, 2, 3].map((index) => (
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+// ============================================================
+// 默认导出
+// ============================================================
+
+export default HomePageSkeleton;