diff --git a/src/views/Company/components/MarketDataView/components/panels/FundingPanel.tsx b/src/views/Company/components/MarketDataView/components/panels/FundingPanel.tsx index 81352497..08a13de5 100644 --- a/src/views/Company/components/MarketDataView/components/panels/FundingPanel.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/FundingPanel.tsx @@ -1,12 +1,10 @@ // src/views/Company/components/MarketDataView/components/panels/FundingPanel.tsx -// 融资融券面板 - 融资融券数据图表和卡片 +// 融资融券面板 - 黑金主题 import React from 'react'; import { Box, Text, - CardBody, - CardHeader, VStack, HStack, Grid, @@ -14,9 +12,9 @@ import { } from '@chakra-ui/react'; import ReactECharts from 'echarts-for-react'; -import ThemedCard from '../ThemedCard'; import { formatNumber } from '../../utils/formatUtils'; -import { getFundingOption } from '../../utils/chartOptions'; +import { getFundingDarkGoldOption } from '../../utils/chartOptions'; +import { darkGoldTheme } from '../../constants'; import type { Theme, FundingDayData } from '../../types'; export interface FundingPanelProps { @@ -24,45 +22,73 @@ export interface FundingPanelProps { fundingData: FundingDayData[]; } -const FundingPanel: React.FC = ({ theme, fundingData }) => { +// 黑金卡片样式 +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)', + transform: 'translateY(-2px)', + }, +}; + +const FundingPanel: React.FC = ({ fundingData }) => { return ( - - - {fundingData.length > 0 && ( - - - - )} - - + {/* 图表卡片 */} + + {fundingData.length > 0 && ( + + + + )} + {/* 融资数据 */} - - - + + + 融资数据 - - + + {fundingData .slice(-5) .reverse() .map((item, idx) => ( - + - {item.date} + + {item.date} + - + {formatNumber(item.financing.balance)} - + 买入{formatNumber(item.financing.buy)} / 偿还 {formatNumber(item.financing.repay)} @@ -71,30 +97,44 @@ const FundingPanel: React.FC = ({ theme, fundingData }) => { ))} - - + + {/* 融券数据 */} - - - + + + 融券数据 - - + + {fundingData .slice(-5) .reverse() .map((item, idx) => ( - + - {item.date} + + {item.date} + - + {formatNumber(item.securities.balance)} - + 卖出{formatNumber(item.securities.sell)} / 偿还 {formatNumber(item.securities.repay)} @@ -103,8 +143,8 @@ const FundingPanel: React.FC = ({ theme, fundingData }) => { ))} - - + + ); diff --git a/src/views/Company/components/MarketDataView/utils/chartOptions.ts b/src/views/Company/components/MarketDataView/utils/chartOptions.ts index 0d6f7a6c..1e206c45 100644 --- a/src/views/Company/components/MarketDataView/utils/chartOptions.ts +++ b/src/views/Company/components/MarketDataView/utils/chartOptions.ts @@ -575,6 +575,154 @@ export const getFundingOption = (theme: Theme, fundingData: FundingDayData[]): E }; }; +/** + * 生成融资融券图表配置 - 黑金主题 + */ +export const getFundingDarkGoldOption = (fundingData: FundingDayData[]): EChartsOption => { + if (!fundingData || fundingData.length === 0) return {}; + + const dates = fundingData.map((item) => item.date.substring(5, 10)); + const financing = fundingData.map((item) => item.financing.balance / 100000000); + const securities = fundingData.map((item) => item.securities.balance_amount / 100000000); + + // 黑金主题色 + const gold = '#D4AF37'; + const goldLight = '#F4D03F'; + const textColor = 'rgba(255, 255, 255, 0.85)'; + const textMuted = 'rgba(255, 255, 255, 0.5)'; + const borderColor = 'rgba(212, 175, 55, 0.2)'; + + return { + backgroundColor: 'transparent', + title: { + text: '融资融券余额走势', + left: 'center', + textStyle: { + color: gold, + fontSize: 16, + fontWeight: 'bold', + }, + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(26, 26, 46, 0.95)', + borderColor: gold, + borderWidth: 1, + textStyle: { + color: textColor, + }, + formatter: (params: unknown) => { + const paramsArr = params as { name: string; marker: string; seriesName: string; value: number }[]; + let result = `${paramsArr[0].name}
`; + paramsArr.forEach((param) => { + result += `${param.marker} ${param.seriesName}: ${param.value.toFixed(2)}亿
`; + }); + return result; + }, + }, + legend: { + data: ['融资余额', '融券余额'], + bottom: 10, + textStyle: { + color: textColor, + }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '15%', + containLabel: true, + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: dates, + axisLine: { lineStyle: { color: borderColor } }, + axisLabel: { color: textMuted }, + splitLine: { show: false }, + }, + yAxis: { + type: 'value', + name: '金额(亿)', + nameTextStyle: { color: textMuted }, + splitLine: { + lineStyle: { + color: borderColor, + type: 'dashed', + }, + }, + axisLine: { lineStyle: { color: borderColor } }, + axisLabel: { color: textMuted }, + }, + series: [ + { + name: '融资余额', + type: 'line', + smooth: true, + symbol: 'circle', + symbolSize: 8, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(212, 175, 55, 0.4)' }, + { offset: 1, color: 'rgba(212, 175, 55, 0.05)' }, + ], + }, + }, + lineStyle: { + color: gold, + width: 2, + shadowBlur: 10, + shadowColor: 'rgba(212, 175, 55, 0.5)', + }, + itemStyle: { + color: gold, + borderColor: goldLight, + borderWidth: 2, + }, + data: financing, + }, + { + name: '融券余额', + type: 'line', + smooth: true, + symbol: 'diamond', + symbolSize: 8, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(255, 149, 0, 0.4)' }, + { offset: 1, color: 'rgba(255, 149, 0, 0.05)' }, + ], + }, + }, + lineStyle: { + color: '#FF9500', + width: 2, + shadowBlur: 10, + shadowColor: 'rgba(255, 149, 0, 0.5)', + }, + itemStyle: { + color: '#FF9500', + borderColor: '#FFB347', + borderWidth: 2, + }, + data: securities, + }, + ], + }; +}; + /** * 生成股权质押图表配置 */ @@ -694,5 +842,6 @@ export default { getKLineOption, getMinuteKLineOption, getFundingOption, + getFundingDarkGoldOption, getPledgeOption, };