refactor(Center): 重构 FeatureEntryPanel 组件
- 将 FeatureEntryPanel 重构为目录结构,提取 FeatureCardItem 子组件 - 使用 GlassCard 容器,标题栏样式与投资仪表盘保持一致 - 调整组件顺序:核心功能入口移至价值论坛下方 - 功能卡片采用水平布局,圆形渐变图标 + 标题描述 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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<string, string> = {
|
||||
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<FeatureCardItemProps> = ({ feature, onClick }) => {
|
||||
return (
|
||||
<Flex
|
||||
bg="whiteAlpha.50"
|
||||
borderRadius="xl"
|
||||
p={4}
|
||||
cursor="pointer"
|
||||
onClick={() => 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"
|
||||
>
|
||||
{/* 左侧图标 */}
|
||||
<Box
|
||||
w="48px"
|
||||
h="48px"
|
||||
minW="48px"
|
||||
borderRadius="full"
|
||||
background={getIconBgGradient(feature.color)}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
boxShadow="md"
|
||||
>
|
||||
<Text fontSize="xl">{feature.icon}</Text>
|
||||
</Box>
|
||||
|
||||
{/* 右侧文字 */}
|
||||
<VStack align="start" spacing={0.5} flex={1}>
|
||||
<Text fontWeight="bold" color="white" fontSize="sm">
|
||||
{feature.title}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="whiteAlpha.700"
|
||||
noOfLines={2}
|
||||
lineHeight="1.4"
|
||||
>
|
||||
{feature.description}
|
||||
</Text>
|
||||
</VStack>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureCardItem;
|
||||
73
src/views/Center/components/FeatureEntryPanel/index.tsx
Normal file
73
src/views/Center/components/FeatureEntryPanel/index.tsx
Normal file
@@ -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 (
|
||||
<GlassCard
|
||||
variant="transparent"
|
||||
rounded="2xl"
|
||||
padding="md"
|
||||
hoverable={false}
|
||||
cornerDecor
|
||||
>
|
||||
{/* 标题栏 - 参考投资仪表盘样式 */}
|
||||
<HStack mb={4} spacing={2}>
|
||||
<Icon
|
||||
as={CheckCircleIcon}
|
||||
boxSize={5}
|
||||
color="rgba(72, 187, 120, 0.9)"
|
||||
/>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
color="rgba(255, 255, 255, 0.95)"
|
||||
letterSpacing="wide"
|
||||
>
|
||||
核心功能入口
|
||||
</Text>
|
||||
<Box
|
||||
h="1px"
|
||||
flex={1}
|
||||
bgGradient="linear(to-r, rgba(72, 187, 120, 0.4), transparent)"
|
||||
ml={2}
|
||||
/>
|
||||
</HStack>
|
||||
|
||||
{/* 功能卡片网格 */}
|
||||
<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={3}>
|
||||
{CORE_FEATURES.map((feature) => (
|
||||
<FeatureCardItem
|
||||
key={feature.id}
|
||||
feature={feature}
|
||||
onClick={handleFeatureClick}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</GlassCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureEntryPanel;
|
||||
@@ -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 = () => {
|
||||
<ForumCenter />
|
||||
</Box>
|
||||
|
||||
{/* 功能入口面板 */}
|
||||
<Box mb={4}>
|
||||
<FeatureEntryPanel />
|
||||
</Box>
|
||||
|
||||
{/* 投资规划中心(整合了日历、计划、复盘,应用 FUI 毛玻璃风格) */}
|
||||
<Box>
|
||||
<InvestmentPlanningCenter />
|
||||
|
||||
Reference in New Issue
Block a user