feat: homets 化创建类型定义文件

创建常量配置文件创建自定义 Hook 创建组件目录创建 HeroHeader 组件创建 FeaturedFeatureCard 组件创建 FeatureCard 组件创建新的 HomePage.tsx
2025-11-25 14:44:46 +08:00
parent c771f7cae6
commit 03f1331202
9 changed files with 640 additions and 379 deletions
--- a/src/views/Home/HomePage.tsx
+++ b/src/views/Home/HomePage.tsx
@@ -0,0 +1,139 @@
+// src/views/Home/HomePage.tsx
+// 首页 - 专业投资分析平台
+
+import React, { useEffect, useCallback, useState } from 'react';
+import { Box, Container, VStack, SimpleGrid } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { usePostHogTrack } from '@/hooks/usePostHogRedux';
+import { useHomeResponsive } from '@/hooks/useHomeResponsive';
+import { ACQUISITION_EVENTS } from '@/lib/constants';
+import { CORE_FEATURES } from '@/constants/homeFeatures';
+import type { Feature } from '@/types/home';
+import { HeroBackground } from './components/HeroBackground';
+import { HeroHeader } from './components/HeroHeader';
+import { FeaturedFeatureCard } from './components/FeaturedFeatureCard';
+import { FeatureCard } from './components/FeatureCard';
+import '@/styles/home-animations.css';
+
+/**
+ * 首页组件
+ * 展示平台核心功能,引导用户探索各个功能模块
+ */
+const HomePage: React.FC = () => {
+  const { user, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+  const { track } = usePostHogTrack();
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  // 响应式配置
+  const {
+    heroHeight,
+    headingSize,
+    headingLetterSpacing,
+    heroTextSize,
+    containerPx,
+    showDecorations
+  } = useHomeResponsive();
+
+  // PostHog 追踪:页面浏览
+  useEffect(() => {
+    track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
+      timestamp: new Date().toISOString(),
+      is_authenticated: isAuthenticated,
+      user_id: user?.id || null,
+    });
+  }, [track, isAuthenticated, user?.id]);
+
+  // 功能卡片点击处理
+  const handleFeatureClick = useCallback((feature: Feature) => {
+    // PostHog 追踪:功能卡片点击
+    track(ACQUISITION_EVENTS.FEATURE_CARD_VIEWED, {
+      feature_id: feature.id,
+      feature_title: feature.title,
+      feature_url: feature.url,
+      is_featured: feature.featured || false,
+      link_type: feature.url.startsWith('http') ? 'external' : 'internal',
+    });
+
+    // 导航处理
+    if (feature.url.startsWith('http')) {
+      window.open(feature.url, '_blank');
+    } else {
+      navigate(feature.url);
+    }
+  }, [track, navigate]);
+
+  // 背景图片加载完成回调
+  const handleImageLoad = useCallback(() => {
+    setImageLoaded(true);
+  }, []);
+
+  // 特色功能(第一个)
+  const featuredFeature = CORE_FEATURES[0];
+  // 其他功能
+  const regularFeatures = CORE_FEATURES.slice(1);
+
+  return (
+    <Box>
+      {/* Hero Section - 深色科技风格 */}
+      <Box
+        position="relative"
+        minH={heroHeight}
+        bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
+        overflow="hidden"
+      >
+        {/* 背景装饰 */}
+        <HeroBackground
+          imageLoaded={imageLoaded}
+          onImageLoad={handleImageLoad}
+          showDecorations={showDecorations}
+        />
+
+        <Container maxW="7xl" position="relative" zIndex={30} px={containerPx}>
+          <VStack
+            spacing={{ base: 8, md: 12, lg: 16 }}
+            align="stretch"
+            minH={heroHeight}
+            justify="center"
+          >
+            {/* 主标题区域 */}
+            <HeroHeader
+              headingSize={headingSize}
+              headingLetterSpacing={headingLetterSpacing}
+              heroTextSize={heroTextSize}
+            />
+
+            {/* 核心功能面板 */}
+            <Box pb={{ base: 8, md: 12 }}>
+              <VStack spacing={{ base: 6, md: 8 }}>
+                {/* 特色功能卡片 - 新闻中心 */}
+                <FeaturedFeatureCard
+                  feature={featuredFeature}
+                  onClick={handleFeatureClick}
+                />
+
+                {/* 其他功能卡片 */}
+                <SimpleGrid
+                  columns={{ base: 1, md: 2, lg: 3 }}
+                  spacing={{ base: 4, md: 5, lg: 6 }}
+                  w="100%"
+                >
+                  {regularFeatures.map((feature) => (
+                    <FeatureCard
+                      key={feature.id}
+                      feature={feature}
+                      onClick={handleFeatureClick}
+                    />
+                  ))}
+                </SimpleGrid>
+              </VStack>
+            </Box>
+          </VStack>
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default HomePage;