diff --git a/src/views/Company/components/MarketDataView/components/panels/BigDealPanel.tsx b/src/views/Company/components/MarketDataView/components/panels/BigDealPanel.tsx index f7bd8b6c..8cfa52b8 100644 --- a/src/views/Company/components/MarketDataView/components/panels/BigDealPanel.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/BigDealPanel.tsx @@ -1,5 +1,5 @@ // src/views/Company/components/MarketDataView/components/panels/BigDealPanel.tsx -// 大宗交易面板 - 大宗交易记录表格 +// 大宗交易面板 - 黑金主题 import React from 'react'; import { @@ -12,18 +12,15 @@ import { Th, Td, TableContainer, - CardBody, - CardHeader, Center, - Badge, VStack, HStack, Tooltip, Heading, } from '@chakra-ui/react'; -import ThemedCard from '../ThemedCard'; import { formatNumber } from '../../utils/formatUtils'; +import { darkGoldTheme } from '../../constants'; import type { Theme, BigDealData } from '../../types'; export interface BigDealPanelProps { @@ -31,69 +28,116 @@ export interface BigDealPanelProps { bigDealData: BigDealData; } -const BigDealPanel: React.FC = ({ theme, bigDealData }) => { +// 黑金卡片样式 +const darkGoldCardStyle = { + bg: darkGoldTheme.bgCard, + border: '1px solid', + borderColor: darkGoldTheme.border, + borderRadius: 'xl', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)', + transition: 'all 0.3s ease', + _hover: { + borderColor: darkGoldTheme.borderHover, + boxShadow: '0 8px 30px rgba(212, 175, 55, 0.15)', + }, +}; + +// 黑金徽章样式 +const DarkGoldBadge: React.FC<{ children: React.ReactNode; variant?: 'gold' | 'orange' | 'green' | 'purple' }> = ({ + children, + variant = 'gold', +}) => { + const colors = { + gold: { bg: 'rgba(212, 175, 55, 0.15)', color: darkGoldTheme.gold }, + orange: { bg: 'rgba(255, 149, 0, 0.15)', color: darkGoldTheme.orange }, + green: { bg: 'rgba(0, 200, 81, 0.15)', color: darkGoldTheme.green }, + purple: { bg: 'rgba(160, 120, 220, 0.15)', color: '#A078DC' }, + }; + const style = colors[variant]; + return ( - - - + + {children} + + ); +}; + +const BigDealPanel: React.FC = ({ bigDealData }) => { + return ( + + + 大宗交易记录 - - + + {bigDealData?.daily_stats && bigDealData.daily_stats.length > 0 ? ( - + {bigDealData.daily_stats.map((dayStats, idx) => ( - - + + {dayStats.date} - - + + 交易笔数: {dayStats.count} - - + + 成交量: {formatNumber(dayStats.total_volume)}万股 - - + + 成交额: {formatNumber(dayStats.total_amount)}万元 - - + + 均价: {dayStats.avg_price?.toFixed(2) || '-'}元 - + {dayStats.deals && dayStats.deals.length > 0 && ( - +
- - - - + + + - - {dayStats.deals.map((deal, i) => ( - + - - - @@ -132,11 +176,11 @@ const BigDealPanel: React.FC = ({ theme, bigDealData }) => { ) : (
- 暂无大宗交易数据 + 暂无大宗交易数据
)} - - + + ); }; diff --git a/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx b/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx index 13f85d5e..9e189e10 100644 --- a/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx @@ -1,5 +1,5 @@ // src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx -// 股权质押面板 - 质押图表和表格 +// 股权质押面板 - 黑金主题 import React from 'react'; import { @@ -12,16 +12,14 @@ import { Th, Td, TableContainer, - CardBody, - CardHeader, VStack, Heading, } from '@chakra-ui/react'; import ReactECharts from 'echarts-for-react'; -import ThemedCard from '../ThemedCard'; import { formatNumber, formatPercent } from '../../utils/formatUtils'; -import { getPledgeOption } from '../../utils/chartOptions'; +import { getPledgeDarkGoldOption } from '../../utils/chartOptions'; +import { darkGoldTheme } from '../../constants'; import type { Theme, PledgeData } from '../../types'; export interface PledgePanelProps { @@ -29,51 +27,65 @@ export interface PledgePanelProps { pledgeData: PledgeData[]; } -const PledgePanel: React.FC = ({ theme, pledgeData }) => { +// 黑金卡片样式 +const darkGoldCardStyle = { + bg: darkGoldTheme.bgCard, + border: '1px solid', + borderColor: darkGoldTheme.border, + borderRadius: 'xl', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)', + transition: 'all 0.3s ease', + _hover: { + borderColor: darkGoldTheme.borderHover, + boxShadow: '0 8px 30px rgba(212, 175, 55, 0.15)', + }, +}; + +const PledgePanel: React.FC = ({ pledgeData }) => { return ( - - - {pledgeData.length > 0 && ( - - - - )} - - + {/* 图表卡片 */} + + {pledgeData.length > 0 && ( + + + + )} + - - - + {/* 质押明细表格 */} + + + 质押明细 - - + + -
买方营业部卖方营业部 +
买方营业部卖方营业部 成交价 + 成交量(万股) + 成交额(万元)
= ({ theme, bigDealData }) => { = ({ theme, bigDealData }) => { {deal.seller_dept || '-'} + {deal.price?.toFixed(2) || '-'} + {deal.volume?.toFixed(2) || '-'} + {deal.amount?.toFixed(2) || '-'}
+
- - - + + - - - - - @@ -81,24 +93,29 @@ const PledgePanel: React.FC = ({ theme, pledgeData }) => { {pledgeData.length > 0 ? ( pledgeData.map((item, idx) => ( - - - + + - - - - - @@ -106,7 +123,7 @@ const PledgePanel: React.FC = ({ theme, pledgeData }) => { ) : ( @@ -115,8 +132,8 @@ const PledgePanel: React.FC = ({ theme, pledgeData }) => {
日期 +
日期 无限售质押(万股) + 限售质押(万股) + 质押总量(万股) + 总股本(万股) + 质押比例 + 质押笔数
{item.end_date} +
{item.end_date} {formatNumber(item.unrestricted_pledge, 0)} + {formatNumber(item.restricted_pledge, 0)} + {formatNumber(item.total_pledge, 0)} + {formatNumber(item.total_shares, 0)} + {formatPercent(item.pledge_ratio)} + {item.pledge_count}
- + 暂无数据
-
-
+ + ); }; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx index 38582a10..781236dd 100644 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx @@ -20,7 +20,7 @@ import { BarChart2, Clock, TrendingUp, Calendar } from 'lucide-react'; import ReactECharts from 'echarts-for-react'; import { darkGoldTheme, PERIOD_OPTIONS } from '../../../constants'; -import { getKLineOption, getMinuteKLineOption } from '../../../utils/chartOptions'; +import { getKLineDarkGoldOption, getMinuteKLineDarkGoldOption } from '../../../utils/chartOptions'; import type { KLineModuleProps } from '../../../types'; // 空状态组件(内联) @@ -204,7 +204,7 @@ const KLineModule: React.FC = ({ tradeData.length > 0 ? ( = ({ ) : hasMinuteData ? ( diff --git a/src/views/Company/components/MarketDataView/components/panels/UnusualPanel.tsx b/src/views/Company/components/MarketDataView/components/panels/UnusualPanel.tsx index 6cc1c3b2..4a0afe76 100644 --- a/src/views/Company/components/MarketDataView/components/panels/UnusualPanel.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/UnusualPanel.tsx @@ -1,22 +1,19 @@ // src/views/Company/components/MarketDataView/components/panels/UnusualPanel.tsx -// 龙虎榜面板 - 龙虎榜数据展示 +// 龙虎榜面板 - 黑金主题 import React from 'react'; import { Box, Text, - CardBody, - CardHeader, Center, - Badge, VStack, HStack, Grid, Heading, } from '@chakra-ui/react'; -import ThemedCard from '../ThemedCard'; import { formatNumber } from '../../utils/formatUtils'; +import { darkGoldTheme } from '../../constants'; import type { Theme, UnusualData } from '../../types'; export interface UnusualPanelProps { @@ -24,49 +21,87 @@ export interface UnusualPanelProps { unusualData: UnusualData; } -const UnusualPanel: React.FC = ({ theme, unusualData }) => { +// 黑金卡片样式 +const darkGoldCardStyle = { + bg: darkGoldTheme.bgCard, + border: '1px solid', + borderColor: darkGoldTheme.border, + borderRadius: 'xl', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)', + transition: 'all 0.3s ease', + _hover: { + borderColor: darkGoldTheme.borderHover, + boxShadow: '0 8px 30px rgba(212, 175, 55, 0.15)', + }, +}; + +// 黑金徽章样式 +const DarkGoldBadge: React.FC<{ children: React.ReactNode; variant?: 'red' | 'green' | 'gold' }> = ({ + children, + variant = 'gold', +}) => { + const colors = { + red: { bg: 'rgba(255, 68, 68, 0.15)', color: darkGoldTheme.red }, + green: { bg: 'rgba(0, 200, 81, 0.15)', color: darkGoldTheme.green }, + gold: { bg: 'rgba(212, 175, 55, 0.15)', color: darkGoldTheme.gold }, + }; + const style = colors[variant]; + return ( - - - + + {children} + + ); +}; + +const UnusualPanel: React.FC = ({ unusualData }) => { + return ( + + + 龙虎榜数据 - - + + {unusualData?.grouped_data && unusualData.grouped_data.length > 0 ? ( - + {unusualData.grouped_data.map((dayData, idx) => ( - - + + {dayData.date} - - + + 买入: {formatNumber(dayData.total_buy)} - - + + 卖出: {formatNumber(dayData.total_sell)} - - 0 ? 'red' : 'green'} - fontSize="md" - > + + 0 ? 'red' : 'green'}> 净额: {formatNumber(dayData.net_amount)} - + - + 买入前五 @@ -76,24 +111,31 @@ const UnusualPanel: React.FC = ({ theme, unusualData }) => { key={i} justify="space-between" p={2} - bg="rgba(255, 68, 68, 0.05)" + bg="rgba(255, 68, 68, 0.08)" borderRadius="md" + border="1px solid" + borderColor="rgba(255, 68, 68, 0.15)" + transition="all 0.2s" + _hover={{ + bg: 'rgba(255, 68, 68, 0.12)', + borderColor: 'rgba(255, 68, 68, 0.3)', + }} > {buyer.dept_name} - + {formatNumber(buyer.buy_amount)} )) ) : ( - + 暂无数据 )} @@ -101,7 +143,7 @@ const UnusualPanel: React.FC = ({ theme, unusualData }) => { - + 卖出前五 @@ -111,24 +153,31 @@ const UnusualPanel: React.FC = ({ theme, unusualData }) => { key={i} justify="space-between" p={2} - bg="rgba(0, 200, 81, 0.05)" + bg="rgba(0, 200, 81, 0.08)" borderRadius="md" + border="1px solid" + borderColor="rgba(0, 200, 81, 0.15)" + transition="all 0.2s" + _hover={{ + bg: 'rgba(0, 200, 81, 0.12)', + borderColor: 'rgba(0, 200, 81, 0.3)', + }} > {seller.dept_name} - + {formatNumber(seller.sell_amount)} )) ) : ( - + 暂无数据 )} @@ -137,14 +186,22 @@ const UnusualPanel: React.FC = ({ theme, unusualData }) => { {/* 信息类型标签 */} - - + + 类型: {dayData.info_types?.map((type, i) => ( - + {type} - + ))} @@ -152,11 +209,11 @@ const UnusualPanel: React.FC = ({ theme, unusualData }) => { ) : (
- 暂无龙虎榜数据 + 暂无龙虎榜数据
)} - - +
+ ); };