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

17
src/views/Company/components/FinancialPanorama/components/BalanceSheetTable.tsx
View File

@@ -3,10 +3,9 @@
*/ */
import React, { useMemo, memo } from 'react'; import React, { useMemo, memo } from 'react';
import { Box, Text, HStack, Badge as ChakraBadge } from '@chakra-ui/react'; import { Box, Text, HStack, Badge as ChakraBadge, Button } from '@chakra-ui/react';
import { Table, ConfigProvider, Tooltip } from 'antd'; import { Table, ConfigProvider, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table'; import type { ColumnsType } from 'antd/es/table';
import { Eye } from 'lucide-react';
import { formatUtils } from '@services/financialService'; import { formatUtils } from '@services/financialService';
import { import {
CURRENT_ASSETS_METRICS, CURRENT_ASSETS_METRICS,
@@ -187,20 +186,24 @@ const BalanceSheetTableInner: React.FC<BalanceSheetTableProps> = ({
{ {
title: '', title: '',
key: 'action', key: 'action',
width: 40, width: 80,
fixed: 'right', fixed: 'right',
render: (_: unknown, record: TableRowData) => { render: (_: unknown, record: TableRowData) => {
if (record.isSection) return null; if (record.isSection) return null;
return ( return (
<Eye <Button
size={14} size="xs"
variant="outline"
color="#D4AF37" color="#D4AF37"
style={{ cursor: 'pointer', opacity: 0.7 }} borderColor="#D4AF37"
_hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
showMetricChart(record.name, record.key, data, record.path); showMetricChart(record.name, record.key, data, record.path);
}} }}
/> >
趋势
</Button>
); );
}, },
}, },

17
src/views/Company/components/FinancialPanorama/components/CashflowTable.tsx
View File

@@ -3,10 +3,9 @@
*/ */
import React, { useMemo, memo } from 'react'; import React, { useMemo, memo } from 'react';
import { Box, Text, HStack, Badge as ChakraBadge } from '@chakra-ui/react'; import { Box, Text, HStack, Badge as ChakraBadge, Button } from '@chakra-ui/react';
import { Table, ConfigProvider, Tooltip } from 'antd'; import { Table, ConfigProvider, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table'; import type { ColumnsType } from 'antd/es/table';
import { Eye } from 'lucide-react';
import { formatUtils } from '@services/financialService'; import { formatUtils } from '@services/financialService';
import { CASHFLOW_METRICS } from '../constants'; import { CASHFLOW_METRICS } from '../constants';
import { getValueByPath, BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY } from '../utils'; import { getValueByPath, BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY } from '../utils';
@@ -150,18 +149,22 @@ const CashflowTableInner: React.FC<CashflowTableProps> = ({
{ {
title: '', title: '',
key: 'action', key: 'action',
width: 40, width: 80,
fixed: 'right', fixed: 'right',
render: (_: unknown, record: TableRowData) => ( render: (_: unknown, record: TableRowData) => (
<Eye <Button
size={14} size="xs"
variant="outline"
color="#D4AF37" color="#D4AF37"
style={{ cursor: 'pointer', opacity: 0.7 }} borderColor="#D4AF37"
_hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
showMetricChart(record.name, record.key, data, record.path); showMetricChart(record.name, record.key, data, record.path);
}} }}
/> >
趋势
</Button>
), ),
}, },
]; ];

17
src/views/Company/components/FinancialPanorama/components/IncomeStatementTable.tsx
View File

@@ -3,10 +3,9 @@
*/ */
import React, { useMemo, memo } from 'react'; import React, { useMemo, memo } from 'react';
import { Box, Text, HStack, Badge as ChakraBadge } from '@chakra-ui/react'; import { Box, Text, HStack, Badge as ChakraBadge, Button } from '@chakra-ui/react';
import { Table, ConfigProvider, Tooltip } from 'antd'; import { Table, ConfigProvider, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table'; import type { ColumnsType } from 'antd/es/table';
import { Eye } from 'lucide-react';
import { formatUtils } from '@services/financialService'; import { formatUtils } from '@services/financialService';
import { INCOME_STATEMENT_SECTIONS } from '../constants'; import { INCOME_STATEMENT_SECTIONS } from '../constants';
import { getValueByPath, isNegativeIndicator, BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY } from '../utils'; import { getValueByPath, isNegativeIndicator, BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY } from '../utils';
@@ -187,20 +186,24 @@ const IncomeStatementTableInner: React.FC<IncomeStatementTableProps> = ({
{ {
title: '', title: '',
key: 'action', key: 'action',
width: 40, width: 80,
fixed: 'right', fixed: 'right',
render: (_: unknown, record: TableRowData) => { render: (_: unknown, record: TableRowData) => {
if (record.isSection) return null; if (record.isSection) return null;
return ( return (
<Eye <Button
size={14} size="xs"
variant="outline"
color="#D4AF37" color="#D4AF37"
style={{ cursor: 'pointer', opacity: 0.7 }} borderColor="#D4AF37"
_hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
showMetricChart(record.name, record.key, data, record.path); showMetricChart(record.name, record.key, data, record.path);
}} }}
/> >
趋势
</Button>
); );
}, },
}, },

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

@@ -3,7 +3,7 @@
*/ */
import React, { memo } from 'react'; 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 { BalanceSheetTable } from '../components';
import type { BalanceSheetData } from '../types'; import type { BalanceSheetData } from '../types';
@@ -51,22 +51,6 @@ const BalanceSheetTabInner: React.FC<BalanceSheetTabProps> = ({
return ( return (
<Box> <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} /> <BalanceSheetTable data={balanceSheet} {...tableProps} />
</Box> </Box>
); );

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

@@ -3,7 +3,7 @@
*/ */
import React, { memo } from 'react'; 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 { CashflowTable } from '../components';
import type { CashflowData } from '../types'; import type { CashflowData } from '../types';
@@ -51,22 +51,6 @@ const CashflowTabInner: React.FC<CashflowTabProps> = ({
return ( return (
<Box> <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} /> <CashflowTable data={cashflow} {...tableProps} />
</Box> </Box>
); );

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

@@ -3,7 +3,7 @@
*/ */
import React, { memo } from 'react'; 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 { IncomeStatementTable } from '../components';
import type { IncomeStatementData } from '../types'; import type { IncomeStatementData } from '../types';
@@ -51,22 +51,6 @@ const IncomeStatementTabInner: React.FC<IncomeStatementTabProps> = ({
return ( return (
<Box> <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} /> <IncomeStatementTable data={incomeStatement} {...tableProps} />
</Box> </Box>
); );