perf(StrategyAnalysisCard): 渲染优化与黑金 UI

- 渲染优化: React.memo, useMemo, 样式常量提取
- 子组件拆分: EmptyState, ContentItem
- 黑金 UI: 金色标题、白色内容文字、空状态金色虚线边框

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-11 18:49:03 +08:00
parent 2c0b06e6a0
commit eb093a5189

View File

@@ -25,8 +25,6 @@ import type { Strategy } from '../types';
// 样式常量 - 避免每次渲染创建新对象
const CARD_STYLES = {
bg: 'transparent',
border: '1px solid',
borderColor: 'yellow.600',
shadow: 'md',
} as const;
@@ -48,6 +46,7 @@ const GRID_RESPONSIVE_COLSPAN = { base: 2, md: 1 } as const;
interface StrategyAnalysisCardProps {
strategy: Strategy;
cardBg?: string;
}
// 空状态组件 - 独立 memo 避免重复渲染
@@ -74,15 +73,13 @@ interface ContentItemProps {
}
const ContentItem = memo<ContentItemProps>(({ title, content }) => (
<VStack align="stretch" spacing={3}>
<VStack align="stretch" spacing={2}>
<Text fontWeight="bold" fontSize="sm" color="yellow.500">
{title}
</Text>
<Box {...CONTENT_BOX_STYLES}>
<Text fontSize="sm" color="white">
{content}
</Text>
</Box>
</VStack>
));
@@ -101,13 +98,14 @@ const StrategyAnalysisCard: React.FC<StrategyAnalysisCardProps> = memo(
<CardHeader>
<HStack>
<Icon as={FaRocket} color="yellow.500" />
<Heading size="sm"></Heading>
<Heading size="sm" color="yellow.500"></Heading>
</HStack>
</CardHeader>
<CardBody>
{!hasData ? (
<EmptyState />
) : (
<Box {...CONTENT_BOX_STYLES}>
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
<GridItem colSpan={GRID_RESPONSIVE_COLSPAN}>
<ContentItem
@@ -122,6 +120,7 @@ const StrategyAnalysisCard: React.FC<StrategyAnalysisCardProps> = memo(
/>
</GridItem>
</Grid>
</Box>
)}
</CardBody>
</Card>