From e71f42b6083c70fb8c36640ebde229c6353cfb1b Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 19 Dec 2025 15:05:15 +0800 Subject: [PATCH] =?UTF-8?q?style(FinancialPanorama):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20UI=20=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Tab 组件：移除重复的标题区域（Tab 栏已有标题） - Table 组件：眼睛图标改为"趋势"按钮，更明确的交互提示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/BalanceSheetTable.tsx | 17 ++++++++++------- .../components/CashflowTable.tsx | 17 ++++++++++------- .../components/IncomeStatementTable.tsx | 17 ++++++++++------- .../FinancialPanorama/tabs/BalanceSheetTab.tsx | 18 +----------------- .../FinancialPanorama/tabs/CashflowTab.tsx | 18 +----------------- .../tabs/IncomeStatementTab.tsx | 18 +----------------- 6 files changed, 33 insertions(+), 72 deletions(-) diff --git a/src/views/Company/components/FinancialPanorama/components/BalanceSheetTable.tsx b/src/views/Company/components/FinancialPanorama/components/BalanceSheetTable.tsx index 5864e70c..f9242506 100644 --- a/src/views/Company/components/FinancialPanorama/components/BalanceSheetTable.tsx +++ b/src/views/Company/components/FinancialPanorama/components/BalanceSheetTable.tsx @@ -3,10 +3,9 @@ */ 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 type { ColumnsType } from 'antd/es/table'; -import { Eye } from 'lucide-react'; import { formatUtils } from '@services/financialService'; import { CURRENT_ASSETS_METRICS, @@ -187,20 +186,24 @@ const BalanceSheetTableInner: React.FC = ({ { title: '', key: 'action', - width: 40, + width: 80, fixed: 'right', render: (_: unknown, record: TableRowData) => { if (record.isSection) return null; return ( - { e.stopPropagation(); showMetricChart(record.name, record.key, data, record.path); }} - /> + > + 趋势 + ); }, }, diff --git a/src/views/Company/components/FinancialPanorama/components/CashflowTable.tsx b/src/views/Company/components/FinancialPanorama/components/CashflowTable.tsx index e6a19a61..72240315 100644 --- a/src/views/Company/components/FinancialPanorama/components/CashflowTable.tsx +++ b/src/views/Company/components/FinancialPanorama/components/CashflowTable.tsx @@ -3,10 +3,9 @@ */ 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 type { ColumnsType } from 'antd/es/table'; -import { Eye } from 'lucide-react'; import { formatUtils } from '@services/financialService'; import { CASHFLOW_METRICS } from '../constants'; import { getValueByPath, BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY } from '../utils'; @@ -150,18 +149,22 @@ const CashflowTableInner: React.FC = ({ { title: '', key: 'action', - width: 40, + width: 80, fixed: 'right', render: (_: unknown, record: TableRowData) => ( - { e.stopPropagation(); showMetricChart(record.name, record.key, data, record.path); }} - /> + > + 趋势 + ), }, ]; diff --git a/src/views/Company/components/FinancialPanorama/components/IncomeStatementTable.tsx b/src/views/Company/components/FinancialPanorama/components/IncomeStatementTable.tsx index 606c3e48..3ddd406d 100644 --- a/src/views/Company/components/FinancialPanorama/components/IncomeStatementTable.tsx +++ b/src/views/Company/components/FinancialPanorama/components/IncomeStatementTable.tsx @@ -3,10 +3,9 @@ */ 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 type { ColumnsType } from 'antd/es/table'; -import { Eye } from 'lucide-react'; import { formatUtils } from '@services/financialService'; import { INCOME_STATEMENT_SECTIONS } from '../constants'; import { getValueByPath, isNegativeIndicator, BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY } from '../utils'; @@ -187,20 +186,24 @@ const IncomeStatementTableInner: React.FC = ({ { title: '', key: 'action', - width: 40, + width: 80, fixed: 'right', render: (_: unknown, record: TableRowData) => { if (record.isSection) return null; return ( - { e.stopPropagation(); showMetricChart(record.name, record.key, data, record.path); }} - /> + > + 趋势 + ); }, }, diff --git a/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx index 13edf666..07a9c9ac 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx @@ -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 = ({ return ( - - - 资产负债表 - - - 显示最近{Math.min(balanceSheet.length, 8)}期 - - - 红涨绿跌 | 同比变化 - - - - - 提示：表格可横向滚动查看更多数据，点击行查看历史趋势 - - ); diff --git a/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx index ae10a888..3895e311 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx @@ -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 = ({ return ( - - - 现金流量表 - - - 显示最近{Math.min(cashflow.length, 8)}期 - - - 红涨绿跌 | 同比变化 - - - - - 提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出 - - ); diff --git a/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx index ce52e775..45b8f3a0 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx @@ -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 = ({ return ( - - - 利润表 - - - 显示最近{Math.min(incomeStatement.length, 8)}期 - - - 红涨绿跌 | 同比变化 - - - - - 提示：Q1、中报、Q3、年报数据为累计值，同比显示与去年同期对比 - - );