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

style(FinancialPanorama): 优化 UI 布局

Browse Source 
- Tab 组件：移除重复的标题区域（Tab 栏已有标题）
- Table 组件：眼睛图标改为"趋势"按钮，更明确的交互提示

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 15:05:15 +08:00
parent 2c1acb41b4
commit e71f42b608
6 changed files with 33 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx
View File

@@ -3,7 +3,7 @@
*/
import React, { memo } from 'react';
import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react';
import { Box, Spinner, Center } from '@chakra-ui/react';
import { BalanceSheetTable } from '../components';
import type { BalanceSheetData } from '../types';
@@ -51,22 +51,6 @@ const BalanceSheetTabInner: React.FC<BalanceSheetTabProps> = ({
return (
<Box>
<VStack align="stretch" spacing={2} mb={4}>
<HStack justify="space-between">
<Heading size="md" color="#D4AF37">资产负债表</Heading>
<HStack spacing={2}>
<Badge bg="rgba(212, 175, 55, 0.2)" color="#D4AF37">
显示最近{Math.min(balanceSheet.length, 8)}期
</Badge>
<Text fontSize="sm" color="gray.400">
红涨绿跌 | 同比变化
</Text>
</HStack>
</HStack>
<Text fontSize="xs" color="gray.500">
提示：表格可横向滚动查看更多数据，点击行查看历史趋势
</Text>
</VStack>
<BalanceSheetTable data={balanceSheet} {...tableProps} />
</Box>
);

18
src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx
View File

@@ -3,7 +3,7 @@
*/
import React, { memo } from 'react';
import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react';
import { Box, Spinner, Center } from '@chakra-ui/react';
import { CashflowTable } from '../components';
import type { CashflowData } from '../types';
@@ -51,22 +51,6 @@ const CashflowTabInner: React.FC<CashflowTabProps> = ({
return (
<Box>
<VStack align="stretch" spacing={2} mb={4}>
<HStack justify="space-between">
<Heading size="md" color="#D4AF37">现金流量表</Heading>
<HStack spacing={2}>
<Badge bg="rgba(212, 175, 55, 0.2)" color="#D4AF37">
显示最近{Math.min(cashflow.length, 8)}期
</Badge>
<Text fontSize="sm" color="gray.400">
红涨绿跌 | 同比变化
</Text>
</HStack>
</HStack>
<Text fontSize="xs" color="gray.500">
提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出
</Text>
</VStack>
<CashflowTable data={cashflow} {...tableProps} />
</Box>
);

18
src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx
View File

@@ -3,7 +3,7 @@
*/
import React, { memo } from 'react';
import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react';
import { Box, Spinner, Center } from '@chakra-ui/react';
import { IncomeStatementTable } from '../components';
import type { IncomeStatementData } from '../types';
@@ -51,22 +51,6 @@ const IncomeStatementTabInner: React.FC<IncomeStatementTabProps> = ({
return (
<Box>
<VStack align="stretch" spacing={2} mb={4}>
<HStack justify="space-between">
<Heading size="md" color="#D4AF37">利润表</Heading>
<HStack spacing={2}>
<Badge bg="rgba(212, 175, 55, 0.2)" color="#D4AF37">
显示最近{Math.min(incomeStatement.length, 8)}期
</Badge>
<Text fontSize="sm" color="gray.400">
红涨绿跌 | 同比变化
</Text>
</HStack>
</HStack>
<Text fontSize="xs" color="gray.500">
提示：Q1、中报、Q3、年报数据为累计值，同比显示与去年同期对比
</Text>
</VStack>
<IncomeStatementTable data={incomeStatement} {...tableProps} />
</Box>
);