style(FinancialPanorama): 优化 UI 布局

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

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

Co-Authored-By: Claude <noreply@anthropic.com>

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<BalanceSheetTableProps> = ({
       {
         title: '',
         key: 'action',
-        width: 40,
+        width: 80,
         fixed: 'right',
         render: (_: unknown, record: TableRowData) => {
           if (record.isSection) return null;
           return (
-            <Eye
-              size={14}
+            <Button
+              size="xs"
+              variant="outline"
               color="#D4AF37"
-              style={{ cursor: 'pointer', opacity: 0.7 }}
+              borderColor="#D4AF37"
+              _hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
               onClick={(e) => {
                 e.stopPropagation();
                 showMetricChart(record.name, record.key, data, record.path);
               }}
-            />
+            >
+              趋势
+            </Button>
           );
         },
       },

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<CashflowTableProps> = ({
       {
         title: '',
         key: 'action',
-        width: 40,
+        width: 80,
         fixed: 'right',
         render: (_: unknown, record: TableRowData) => (
-          <Eye
-            size={14}
+          <Button
+            size="xs"
+            variant="outline"
             color="#D4AF37"
-            style={{ cursor: 'pointer', opacity: 0.7 }}
+            borderColor="#D4AF37"
+            _hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
             onClick={(e) => {
               e.stopPropagation();
               showMetricChart(record.name, record.key, data, record.path);
             }}
-          />
+          >
+            趋势
+          </Button>
         ),
       },
     ];

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<IncomeStatementTableProps> = ({
       {
         title: '',
         key: 'action',
-        width: 40,
+        width: 80,
         fixed: 'right',
         render: (_: unknown, record: TableRowData) => {
           if (record.isSection) return null;
           return (
-            <Eye
-              size={14}
+            <Button
+              size="xs"
+              variant="outline"
               color="#D4AF37"
-              style={{ cursor: 'pointer', opacity: 0.7 }}
+              borderColor="#D4AF37"
+              _hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
               onClick={(e) => {
                 e.stopPropagation();
                 showMetricChart(record.name, record.key, data, record.path);
               }}
-            />
+            >
+              趋势
+            </Button>
           );
         },
       },

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<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>
   );

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<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>
   );

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<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>
   );