pref: 权限校验中 - 显示占位骨架，不显示登录按钮或用户菜单，/home页面添加骨架屏逻辑

src/views/Home/components/HomePageSkeleton.tsx

@@ -1,8 +1,6 @@
 /**
  * 首页骨架屏组件
- * 模拟首页的 6 个功能卡片布局，减少白屏感知时间
- *
- * 使用 Chakra UI 的 Skeleton 组件
+ * 匹配首页深色科技风格，减少白屏感知时间
  *
  * @module views/Home/components/HomePageSkeleton
  */
@@ -15,8 +13,6 @@ import {
   Skeleton,
   SkeletonText,
   VStack,
-  HStack,
-  useColorModeValue,
 } from '@chakra-ui/react';
 
 // ============================================================
@@ -24,163 +20,152 @@ import {
 // ============================================================
 
 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');
-
+const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean; speed?: number }> = ({
+  isFeatured = false,
+  speed = 0.8,
+}) => {
   return (
     <Box
-      bg={bg}
-      borderRadius="xl"
+      bg="rgba(255, 255, 255, 0.03)"
+      borderRadius="2xl"
       borderWidth="1px"
-      borderColor={borderColor}
-      p={isFeatured ? 8 : 6}
-      h={isFeatured ? '350px' : '280px'}
-      boxShadow={isFeatured ? 'xl' : 'md'}
-      position="relative"
+      borderColor="whiteAlpha.100"
+      p={{ base: 5, md: isFeatured ? 8 : 6 }}
+      h={isFeatured ? { base: '280px', md: '320px' } : { base: '200px', md: '240px' }}
+      backdropFilter="blur(10px)"
     >
       <VStack align="start" spacing={4} h="full">
         {/* 图标骨架 */}
         <Skeleton
-          height={isFeatured ? '60px' : '48px'}
-          width={isFeatured ? '60px' : '48px'}
-          borderRadius="lg"
-          startColor={isFeatured ? 'blue.100' : 'gray.100'}
-          endColor={isFeatured ? 'blue.200' : 'gray.200'}
+          height={isFeatured ? '56px' : '44px'}
+          width={isFeatured ? '56px' : '44px'}
+          borderRadius="xl"
+          startColor="whiteAlpha.100"
+          endColor="whiteAlpha.200"
+          speed={speed}
         />
 
         {/* 标题骨架 */}
-        <Skeleton height="28px" width="70%" borderRadius="md" />
+        <Skeleton
+          height="24px"
+          width="60%"
+          borderRadius="md"
+          startColor="whiteAlpha.100"
+          endColor="whiteAlpha.200"
+          speed={speed}
+        />
 
         {/* 描述骨架 */}
         <SkeletonText
           mt="2"
-          noOfLines={isFeatured ? 4 : 3}
+          noOfLines={isFeatured ? 3 : 2}
           spacing="3"
-          skeletonHeight="2"
-          width="100%"
-        />
-
-        {/* 按钮骨架 */}
-        <Skeleton
-          height="40px"
-          width={isFeatured ? '140px' : '100px'}
-          borderRadius="md"
-          mt="auto"
+          skeletonHeight="3"
+          width="90%"
+          startColor="whiteAlpha.50"
+          endColor="whiteAlpha.100"
+          speed={speed}
         />
       </VStack>
-
-      {/* Featured 徽章骨架 */}
-      {isFeatured && (
-        <Skeleton
-          position="absolute"
-          top="4"
-          right="4"
-          height="24px"
-          width="80px"
-          borderRadius="full"
-        />
-      )}
     </Box>
   );
 };
 
+// ============================================================
+// Hero 区域骨架
+// ============================================================
+
+const HeroSkeleton: React.FC<{ speed?: number }> = ({ speed = 0.8 }) => {
+  return (
+    <VStack spacing={{ base: 4, md: 6 }} align="center" py={{ base: 8, md: 12 }}>
+      {/* 主标题骨架 */}
+      <Skeleton
+        height={{ base: '48px', md: '72px' }}
+        width={{ base: '280px', md: '400px' }}
+        borderRadius="lg"
+        startColor="whiteAlpha.100"
+        endColor="whiteAlpha.200"
+        speed={speed}
+      />
+
+      {/* 副标题骨架 */}
+      <Skeleton
+        height={{ base: '20px', md: '24px' }}
+        width={{ base: '200px', md: '300px' }}
+        borderRadius="md"
+        startColor="whiteAlpha.50"
+        endColor="whiteAlpha.100"
+        speed={speed}
+      />
+    </VStack>
+  );
+};
+
 // ============================================================
 // 主骨架组件
 // ============================================================
 
 export const HomePageSkeleton: React.FC<HomePageSkeletonProps> = ({
-  isAnimated = true,
   speed = 0.8,
 }) => {
-  const containerBg = useColorModeValue('gray.50', 'gray.900');
-
   return (
     <Box
       w="full"
       minH="100vh"
-      bg={containerBg}
-      pt={{ base: '120px', md: '140px' }}
-      pb={{ base: '60px', md: '80px' }}
+      bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
+      position="relative"
+      overflow="hidden"
     >
-      <Container maxW="container.xl">
-        <VStack spacing={{ base: 8, md: 12 }} align="stretch">
-          {/* 顶部标题区域骨架 */}
-          <VStack spacing={4} textAlign="center">
-            {/* 主标题 */}
-            <Skeleton
-              height={{ base: '40px', md: '56px' }}
-              width={{ base: '80%', md: '500px' }}
-              borderRadius="md"
-              speed={speed}
-            />
+      {/* 背景装饰 - 模拟光晕效果 */}
+      <Box
+        position="absolute"
+        top="-20%"
+        left="50%"
+        transform="translateX(-50%)"
+        w="800px"
+        h="800px"
+        bg="radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%)"
+        pointerEvents="none"
+      />
 
-            {/* 副标题 */}
-            <Skeleton
-              height={{ base: '20px', md: '24px' }}
-              width={{ base: '90%', md: '600px' }}
-              borderRadius="md"
-              speed={speed}
-            />
+      <Container maxW="7xl" position="relative" zIndex={10} px={{ base: 4, md: 6 }}>
+        <VStack
+          spacing={{ base: 8, md: 12, lg: 16 }}
+          align="stretch"
+          minH="100vh"
+          justify="center"
+        >
+          {/* Hero 区域骨架 */}
+          <HeroSkeleton speed={speed} />
 
-            {/* CTA 按钮 */}
-            <HStack spacing={4} mt={4}>
-              <Skeleton
-                height="48px"
-                width="140px"
-                borderRadius="lg"
-                speed={speed}
-              />
-              <Skeleton
-                height="48px"
-                width="140px"
-                borderRadius="lg"
-                speed={speed}
-              />
-            </HStack>
-          </VStack>
+          {/* 功能卡片区域骨架 */}
+          <Box pb={{ base: 8, md: 12 }}>
+            <VStack spacing={{ base: 6, md: 8 }}>
+              {/* 特色功能卡片骨架 */}
+              <Box w="100%">
+                <FeatureCardSkeleton isFeatured speed={speed} />
+              </Box>
 
-          {/* 功能卡片网格骨架 */}
-          <SimpleGrid
-            columns={{ base: 1, md: 2, lg: 3 }}
-            spacing={{ base: 6, md: 8 }}
-            mt={8}
-          >
-            {/* 第一张卡片 - Featured (新闻中心) */}
-            <Box gridColumn={{ base: 'span 1', lg: 'span 2' }}>
-              <FeatureCardSkeleton isFeatured />
-            </Box>
-
-            {/* 其余 5 张卡片 */}
-            {[1, 2, 3, 4, 5].map((index) => (
-              <FeatureCardSkeleton key={index} />
-            ))}
-          </SimpleGrid>
-
-          {/* 底部装饰元素骨架 */}
-          <HStack justify="center" spacing={8} mt={12}>
-            {[1, 2, 3].map((index) => (
-              <VStack key={index} spacing={2} align="center">
-                <Skeleton
-                  height="40px"
-                  width="40px"
-                  borderRadius="full"
-                  speed={speed}
-                />
-                <Skeleton height="16px" width="60px" borderRadius="md" speed={speed} />
-              </VStack>
-            ))}
-          </HStack>
+              {/* 其他功能卡片骨架 */}
+              <SimpleGrid
+                columns={{ base: 1, md: 2, lg: 3 }}
+                spacing={{ base: 4, md: 5, lg: 6 }}
+                w="100%"
+              >
+                {[1, 2, 3, 4, 5].map((index) => (
+                  <FeatureCardSkeleton key={index} speed={speed} />
+                ))}
+              </SimpleGrid>
+            </VStack>
+          </Box>
         </VStack>
       </Container>
     </Box>

src/views/Home/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 首页入口组件
+ * 使用专用骨架屏作为 Suspense fallback，优化加载体验
+ *
+ * @module views/Home
+ */
+
+import React, { Suspense, lazy } from 'react';
+import { HomePageSkeleton } from './components/HomePageSkeleton';
+
+// 懒加载实际首页组件
+const HomePage = lazy(() => import('./HomePage'));
+
+/**
+ * 首页入口 - 带骨架屏的懒加载包装
+ * 使用深色风格骨架屏，与首页视觉风格一致
+ */
+const HomePageEntry: React.FC = () => {
+  return (
+    <Suspense fallback={<HomePageSkeleton />}>
+      <HomePage />
+    </Suspense>
+  );
+};
+
+export default HomePageEntry;