diff --git a/src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx b/src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx new file mode 100644 index 00000000..a72603bc --- /dev/null +++ b/src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx @@ -0,0 +1,81 @@ +/** + * FeatureCardItem - 功能卡片项组件 + * 用于展示单个功能入口,包含图标、标题和描述 + */ +import React from 'react'; +import { Box, Flex, VStack, Text } from '@chakra-ui/react'; +import type { Feature } from '@/types/home'; + +/** 获取图标背景渐变色 */ +const getIconBgGradient = (color: string): string => { + const gradients: Record = { + yellow: 'linear-gradient(135deg, #F6AD55 0%, #ED8936 100%)', + purple: 'linear-gradient(135deg, #B794F4 0%, #805AD5 100%)', + blue: 'linear-gradient(135deg, #63B3ED 0%, #3182CE 100%)', + green: 'linear-gradient(135deg, #68D391 0%, #38A169 100%)', + orange: 'linear-gradient(135deg, #FBD38D 0%, #DD6B20 100%)', + teal: 'linear-gradient(135deg, #4FD1C5 0%, #319795 100%)', + cyan: 'linear-gradient(135deg, #76E4F7 0%, #00B5D8 100%)', + red: 'linear-gradient(135deg, #FC8181 0%, #E53E3E 100%)' + }; + return gradients[color] || gradients.blue; +}; + +export interface FeatureCardItemProps { + feature: Feature; + onClick: (feature: Feature) => void; +} + +const FeatureCardItem: React.FC = ({ feature, onClick }) => { + return ( + onClick(feature)} + _hover={{ + bg: 'whiteAlpha.100', + transform: 'translateY(-2px)', + boxShadow: 'lg' + }} + transition="all 0.2s ease" + align="center" + gap={3} + border="1px solid" + borderColor="whiteAlpha.100" + > + {/* 左侧图标 */} + + {feature.icon} + + + {/* 右侧文字 */} + + + {feature.title} + + + {feature.description} + + + + ); +}; + +export default FeatureCardItem; diff --git a/src/views/Center/components/FeatureEntryPanel/index.tsx b/src/views/Center/components/FeatureEntryPanel/index.tsx new file mode 100644 index 00000000..e11321ee --- /dev/null +++ b/src/views/Center/components/FeatureEntryPanel/index.tsx @@ -0,0 +1,73 @@ +/** + * FeatureEntryPanel - 功能入口面板 + * 黑金色主题,展示平台核心功能快捷入口 + */ +import React, { useCallback } from 'react'; +import { Box, SimpleGrid, HStack, Text, Icon } from '@chakra-ui/react'; +import { CheckCircleIcon } from '@chakra-ui/icons'; +import { useNavigate } from 'react-router-dom'; +import GlassCard from '@components/GlassCard'; +import { CORE_FEATURES } from '@/constants/homeFeatures'; +import type { Feature } from '@/types/home'; +import FeatureCardItem from './FeatureCardItem'; + +const FeatureEntryPanel: React.FC = () => { + const navigate = useNavigate(); + + const handleFeatureClick = useCallback( + (feature: Feature) => { + if (feature.url.startsWith('http')) { + window.open(feature.url, '_blank'); + } else { + navigate(feature.url); + } + }, + [navigate] + ); + + return ( + + {/* 标题栏 - 参考投资仪表盘样式 */} + + + + 核心功能入口 + + + + + {/* 功能卡片网格 */} + + {CORE_FEATURES.map((feature) => ( + + ))} + + + ); +}; + +export default FeatureEntryPanel; diff --git a/src/views/Center/index.tsx b/src/views/Center/index.tsx index d5809feb..459b4756 100644 --- a/src/views/Center/index.tsx +++ b/src/views/Center/index.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { Box } from '@chakra-ui/react'; +import FeatureEntryPanel from './components/FeatureEntryPanel'; import InvestmentPlanningCenter from './components/InvestmentPlanningCenter'; import MarketDashboard from '@views/Profile/components/MarketDashboard'; import ForumCenter from '@views/Profile/components/ForumCenter'; @@ -33,6 +34,11 @@ const Center: React.FC = () => { + {/* 功能入口面板 */} + + + + {/* 投资规划中心(整合了日历、计划、复盘,应用 FUI 毛玻璃风格) */}