From 1022fa40774b69035e6c1f2fd1ee150353671f81 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Tue, 16 Dec 2025 15:03:50 +0800 Subject: [PATCH] =?UTF-8?q?refactor(KLineModule):=20=E9=BB=91=E9=87=91?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=20+=20=E7=B2=BE=E7=AE=80=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - KLineModule 应用黑金主题（渐变背景、金色按钮、金色图标） - 删除 TradeTable、MinuteStats、TradeAnalysis 组件 - 删除 atoms 目录，EmptyState 内联到 KLineModule - 更新 types.ts 移除 TradeTableProps - 更新导出文件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../panels/TradeDataPanel/KLineModule.tsx | 149 ++++++++++++------ .../panels/TradeDataPanel/TradeTable.tsx | 87 ---------- .../TradeDataPanel/atoms/EmptyState.tsx | 40 ----- .../TradeDataPanel/atoms/MinuteStats.tsx | 97 ------------ .../TradeDataPanel/atoms/TradeAnalysis.tsx | 76 --------- .../panels/TradeDataPanel/atoms/index.ts | 10 -- .../panels/TradeDataPanel/index.tsx | 28 ++-- .../MarketDataView/components/panels/index.ts | 4 +- .../components/MarketDataView/types.ts | 8 - 9 files changed, 111 insertions(+), 388 deletions(-) delete mode 100644 src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/TradeTable.tsx delete mode 100644 src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/EmptyState.tsx delete mode 100644 src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/MinuteStats.tsx delete mode 100644 src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/TradeAnalysis.tsx delete mode 100644 src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/index.ts 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 a04f9889..b899048b 100644 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx @@ -1,5 +1,5 @@ // src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx -// K线模块 - 日K线/分钟K线切换展示 +// K线模块 - 日K线/分钟K线切换展示（黑金主题） import React, { useState } from 'react'; import { @@ -12,19 +12,29 @@ import { Badge, Center, Spinner, - CardBody, - CardHeader, - Heading, + Icon, } from '@chakra-ui/react'; -import { RepeatIcon } from '@chakra-ui/icons'; -import { BarChart2, Clock } from 'lucide-react'; +import { RepeatIcon, InfoIcon } from '@chakra-ui/icons'; +import { BarChart2, Clock, TrendingUp } from 'lucide-react'; import ReactECharts from 'echarts-for-react'; -import ThemedCard from '../../ThemedCard'; +import { darkGoldTheme } from '../../../constants'; import { getKLineOption, getMinuteKLineOption } from '../../../utils/chartOptions'; -import { MinuteStats, TradeAnalysis, EmptyState } from './atoms'; import type { KLineModuleProps } from '../../../types'; +// 空状态组件（内联） +const EmptyState: React.FC<{ title: string; description: string }> = ({ title, description }) => ( +
+ + + + {title} + {description} + + +
+); + // 重新导出类型供外部使用 export type { KLineModuleProps } from '../../../types'; @@ -50,16 +60,68 @@ const KLineModule: React.FC = ({ } }; + // 黑金主题按钮样式 + const activeButtonStyle = { + bg: `linear-gradient(135deg, ${darkGoldTheme.gold} 0%, ${darkGoldTheme.orange} 100%)`, + color: '#1a1a2e', + borderColor: darkGoldTheme.gold, + _hover: { + bg: `linear-gradient(135deg, ${darkGoldTheme.goldLight} 0%, ${darkGoldTheme.gold} 100%)`, + }, + }; + + const inactiveButtonStyle = { + bg: 'transparent', + color: darkGoldTheme.textMuted, + borderColor: darkGoldTheme.border, + _hover: { + bg: 'rgba(212, 175, 55, 0.1)', + borderColor: darkGoldTheme.gold, + color: darkGoldTheme.gold, + }, + }; + return ( - - + + {/* 卡片头部 */} + - + + + + {mode === 'daily' ? '日K线图' : '分钟K线图'} - + {mode === 'minute' && minuteData?.trade_date && ( - + {minuteData.trade_date} )} @@ -72,39 +134,38 @@ const KLineModule: React.FC = ({ leftIcon={} size="sm" variant="outline" - colorScheme="blue" onClick={onLoadMinuteData} isLoading={minuteLoading} loadingText="获取中" + {...inactiveButtonStyle} > 刷新 )} {/* 模式切换按钮组 */} - + - + - + {/* 卡片内容 */} + {mode === 'daily' ? ( // 日K线图 tradeData.length > 0 ? ( @@ -112,16 +173,12 @@ const KLineModule: React.FC = ({ ) : ( - + ) ) : ( // 分钟K线图 @@ -131,37 +188,29 @@ const KLineModule: React.FC = ({ - + 加载分钟频数据中... ) : hasMinuteData ? ( - - - - - - - + + + ) : ( - + ) )} - - + + ); }; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/TradeTable.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/TradeTable.tsx deleted file mode 100644 index c3ccef81..00000000 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/TradeTable.tsx +++ /dev/null @@ -1,87 +0,0 @@ -// src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/TradeTable.tsx -// 交易明细表格组件 - -import React from 'react'; -import { - Table, - Thead, - Tbody, - Tr, - Th, - Td, - TableContainer, - CardBody, - CardHeader, - Heading, -} from '@chakra-ui/react'; - -import ThemedCard from '../../ThemedCard'; -import { formatNumber, formatPercent } from '../../../utils/formatUtils'; -import type { Theme, TradeDayData } from '../../../types'; - -export interface TradeTableProps { - theme: Theme; - tradeData: TradeDayData[]; -} - -const TradeTable: React.FC = ({ theme, tradeData }) => { - return ( - - - - 交易明细 - - - - - - - - - - - - - - - - - - - {tradeData - .slice(-10) - .reverse() - .map((item, idx) => ( - - - - - - - - - - - ))} - -
日期开盘最高最低收盘涨跌幅成交量成交额
{item.date}{item.open}{item.high}{item.low} - {item.close} - = 0 ? theme.success : theme.danger} - fontWeight="bold" - > - {item.change_percent >= 0 ? '+' : ''} - {formatPercent(item.change_percent)} - - {formatNumber(item.volume, 0)} - - {formatNumber(item.amount)} -
- - - - ); -}; - -export default TradeTable; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/EmptyState.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/EmptyState.tsx deleted file mode 100644 index 279b3a33..00000000 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/EmptyState.tsx +++ /dev/null @@ -1,40 +0,0 @@ -// src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/EmptyState.tsx -// 空状态组件 - -import React from 'react'; -import { Center, VStack, Text, Icon } from '@chakra-ui/react'; -import { InfoIcon } from '@chakra-ui/icons'; - -import type { Theme } from '../../../../types'; - -export interface EmptyStateProps { - theme: Theme; - title?: string; - description?: string; - height?: string; -} - -const EmptyState: React.FC = ({ - theme, - title = '暂无分钟频数据', - description = '点击"获取分钟数据"按钮加载最新的交易日分钟频数据', - height = '300px', -}) => { - return ( -
- - - - - {title} - - - {description} - - - -
- ); -}; - -export default EmptyState; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/MinuteStats.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/MinuteStats.tsx deleted file mode 100644 index 94a203fd..00000000 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/MinuteStats.tsx +++ /dev/null @@ -1,97 +0,0 @@ -// src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/MinuteStats.tsx -// 分钟数据统计组件 - -import React from 'react'; -import { - SimpleGrid, - Stat, - StatLabel, - StatNumber, - StatHelpText, - StatArrow, - HStack, - Text, - Icon, -} from '@chakra-ui/react'; -import { - ChevronDownIcon, - ChevronUpIcon, - ArrowUpIcon, - ArrowDownIcon, -} from '@chakra-ui/icons'; - -import type { Theme, MinuteDataPoint } from '../../../../types'; - -export interface MinuteStatsProps { - theme: Theme; - data: MinuteDataPoint[]; -} - -const MinuteStats: React.FC = ({ theme, data }) => { - if (data.length === 0) return null; - - const firstOpen = data[0]?.open || 0; - const lastClose = data[data.length - 1]?.close || 0; - const highPrice = Math.max(...data.map((item) => item.high).filter(Boolean)); - const lowPrice = Math.min(...data.map((item) => item.low).filter(Boolean)); - const isUp = lastClose >= firstOpen; - const changePercent = firstOpen ? Math.abs(((lastClose - firstOpen) / firstOpen) * 100) : 0; - - return ( - - - - - - 开盘价 - - - - {firstOpen?.toFixed(2) || '-'} - - - - - - - - 当前价 - - - - {lastClose?.toFixed(2) || '-'} - - - - {changePercent.toFixed(2)}% - - - - - - - - 最高价 - - - - {highPrice.toFixed(2)} - - - - - - - - 最低价 - - - - {lowPrice.toFixed(2)} - - - - ); -}; - -export default MinuteStats; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/TradeAnalysis.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/TradeAnalysis.tsx deleted file mode 100644 index c5e0bf9b..00000000 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/TradeAnalysis.tsx +++ /dev/null @@ -1,76 +0,0 @@ -// src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/TradeAnalysis.tsx -// 成交数据分析组件 - -import React from 'react'; -import { Box, Text, HStack, Badge, Grid } from '@chakra-ui/react'; - -import { formatNumber } from '../../../../utils/formatUtils'; -import type { Theme, MinuteDataPoint } from '../../../../types'; - -export interface TradeAnalysisProps { - theme: Theme; - data: MinuteDataPoint[]; -} - -const TradeAnalysis: React.FC = ({ theme, data }) => { - if (data.length === 0) return null; - - const totalVolume = data.reduce((sum, item) => sum + item.volume, 0); - const totalAmount = data.reduce((sum, item) => sum + item.amount, 0); - const avgPrice = data.reduce((sum, item) => sum + item.close, 0) / data.length; - const maxVolume = Math.max(...data.map((item) => item.volume)); - const activeTime = data.find((item) => item.volume === maxVolume); - - return ( - - - - 成交数据分析 - - - - 总成交量: {formatNumber(totalVolume, 0)} - - - 总成交额: {formatNumber(totalAmount)} - - - - - - - - 活跃时段 - - - {activeTime ? `${activeTime.time} (${formatNumber(maxVolume, 0)})` : '-'} - - - - - 平均价格 - - - {avgPrice.toFixed(2)} - - - - - 数据点数 - - - {data.length} 个分钟 - - - - - ); -}; - -export default TradeAnalysis; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/index.ts b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/index.ts deleted file mode 100644 index 0ae41f51..00000000 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -// src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/atoms/index.ts -// 原子组件统一导出 - -export { default as MinuteStats } from './MinuteStats'; -export { default as TradeAnalysis } from './TradeAnalysis'; -export { default as EmptyState } from './EmptyState'; - -export type { MinuteStatsProps } from './MinuteStats'; -export type { TradeAnalysisProps } from './TradeAnalysis'; -export type { EmptyStateProps } from './EmptyState'; diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/index.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/index.tsx index 7e8e3fbc..0e088f68 100644 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/index.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/index.tsx @@ -1,11 +1,9 @@ // src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/index.tsx -// 交易数据面板 - K线模块（日K/分钟切换）、交易明细表格 +// 交易数据面板 - K线模块（日K/分钟切换） import React from 'react'; -import { VStack } from '@chakra-ui/react'; import KLineModule from './KLineModule'; -import TradeTable from './TradeTable'; import type { Theme, TradeDayData, MinuteData, RiseAnalysis } from '../../../types'; export interface TradeDataPanelProps { @@ -28,19 +26,15 @@ const TradeDataPanel: React.FC = ({ onChartClick, }) => { return ( - - - - - + ); }; @@ -48,6 +42,4 @@ export default TradeDataPanel; // 导出子组件供外部按需使用 export { default as KLineModule } from './KLineModule'; -export { default as TradeTable } from './TradeTable'; export type { KLineModuleProps } from './KLineModule'; -export type { TradeTableProps } from './TradeTable'; diff --git a/src/views/Company/components/MarketDataView/components/panels/index.ts b/src/views/Company/components/MarketDataView/components/panels/index.ts index dce5f1be..988901c4 100644 --- a/src/views/Company/components/MarketDataView/components/panels/index.ts +++ b/src/views/Company/components/MarketDataView/components/panels/index.ts @@ -15,5 +15,5 @@ export type { UnusualPanelProps } from './UnusualPanel'; export type { PledgePanelProps } from './PledgePanel'; // 导出 TradeDataPanel 子组件 -export { KLineModule, TradeTable } from './TradeDataPanel'; -export type { KLineModuleProps, TradeTableProps } from './TradeDataPanel'; +export { KLineModule } from './TradeDataPanel'; +export type { KLineModuleProps } from './TradeDataPanel'; diff --git a/src/views/Company/components/MarketDataView/types.ts b/src/views/Company/components/MarketDataView/types.ts index cae6d6af..acc90026 100644 --- a/src/views/Company/components/MarketDataView/types.ts +++ b/src/views/Company/components/MarketDataView/types.ts @@ -299,14 +299,6 @@ export interface KLineModuleProps { onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void; } -/** - * TradeTable 组件 Props - */ -export interface TradeTableProps { - theme: Theme; - tradeData: TradeDayData[]; -} - /** * FundingTab 组件 Props */