vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 渲染优化: 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
1 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/StrategyAnalysisCard.tsx
View File

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