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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user