diff --git a/src/components/Navbars/components/NavbarActions/index.js b/src/components/Navbars/components/NavbarActions/index.js index 8610708f..60fb1242 100644 --- a/src/components/Navbars/components/NavbarActions/index.js +++ b/src/components/Navbars/components/NavbarActions/index.js @@ -3,7 +3,6 @@ import React, { memo } from 'react'; import { HStack, Spinner } from '@chakra-ui/react'; -import ThemeToggleButton from '../ThemeToggleButton'; import LoginButton from '../LoginButton'; import CalendarButton from '../CalendarButton'; import { WatchlistMenu, FollowingEventsMenu } from '../FeatureMenus'; @@ -34,9 +33,6 @@ const NavbarActions = memo(({ }) => { return ( - {/* 主题切换按钮 */} - - {/* 显示加载状态 */} {isLoading ? ( diff --git a/src/components/Navbars/components/ThemeToggleButton.js b/src/components/Navbars/components/ThemeToggleButton.js deleted file mode 100644 index 16e61580..00000000 --- a/src/components/Navbars/components/ThemeToggleButton.js +++ /dev/null @@ -1,51 +0,0 @@ -// src/components/Navbars/components/ThemeToggleButton.js -// 主题切换按钮组件 - Phase 7 优化：添加导航埋点支持 - -import React, { memo } from 'react'; -import { IconButton, useColorMode } from '@chakra-ui/react'; -import { SunIcon, MoonIcon } from '@chakra-ui/icons'; -import { useNavigationEvents } from '../../../hooks/useNavigationEvents'; - -/** - * 主题切换按钮组件 - * 支持在亮色和暗色主题之间切换，包含导航埋点 - * - * 性能优化： - * - 使用 memo 避免父组件重新渲染时的不必要更新 - * - 只依赖 colorMode，当主题切换时才重新渲染 - * - * @param {Object} props - * @param {string} props.size - 按钮大小，默认 'sm' - * @param {string} props.variant - 按钮样式，默认 'ghost' - * @returns {JSX.Element} - */ -const ThemeToggleButton = memo(({ size = 'sm', variant = 'ghost' }) => { - const { colorMode, toggleColorMode } = useColorMode(); - const navEvents = useNavigationEvents({ component: 'theme_toggle' }); - - const handleToggle = () => { - // 追踪主题切换 - const fromTheme = colorMode; - const toTheme = colorMode === 'light' ? 'dark' : 'light'; - navEvents.trackThemeChanged(fromTheme, toTheme); - - // 切换主题 - toggleColorMode(); - }; - - return ( - : } - onClick={handleToggle} - variant={variant} - size={size} - minW={{ base: '36px', md: '40px' }} - minH={{ base: '36px', md: '40px' }} - /> - ); -}); - -ThemeToggleButton.displayName = 'ThemeToggleButton'; - -export default ThemeToggleButton; diff --git a/src/components/StockChart/config/klineTheme.ts b/src/components/StockChart/config/klineTheme.ts index 669446ae..814f6c68 100644 --- a/src/components/StockChart/config/klineTheme.ts +++ b/src/components/StockChart/config/klineTheme.ts @@ -1,16 +1,22 @@ /** - * KLineChart 主题配置 + * KLineChart 主题配置（仅浅色主题） * * 适配 klinecharts@10.0.0-beta1 * 参考: https://github.com/klinecharts/KLineChart/blob/main/docs/en-US/guide/styles.md + * + * ⚠️ 重要说明： + * - 本项目已移除深色模式支持（2025-01） + * - 应用通过 colorModeManager 强制使用浅色主题 + * - 已删除 darkTheme 和 timelineThemeDark 配置 */ /* eslint-disable @typescript-eslint/no-explicit-any */ // ⚠️ 使用 any 类型绕过 KLineChart 类型定义的限制（beta 版本类型不完整） -import type { DeepPartial, Styles } from 'klinecharts'; +// import type { DeepPartial, Styles } from 'klinecharts'; // ⚠️ 未使用（保留以便将来扩展） /** - * 图表主题颜色配置 + * 图表主题颜色配置（浅色主题） + * ⚠️ 已移除深色模式相关颜色常量 */ export const CHART_COLORS = { // 涨跌颜色（中国市场习惯：红涨绿跌） @@ -22,20 +28,16 @@ export const CHART_COLORS = { primary: '#1b3bbb', // Navy 500 secondary: '#728fea', // Navy 300 background: '#ffffff', - backgroundDark: '#1B254B', // 文本颜色 text: '#333333', textSecondary: '#888888', - textDark: '#ffffff', // 网格颜色 grid: '#e0e0e0', - gridDark: '#2d3748', // 边框颜色 border: '#e0e0e0', - borderDark: '#2d3748', // 事件标记颜色 eventMarker: '#ff9800', @@ -152,7 +154,7 @@ export const lightTheme: any = { }, text: { show: true, - color: CHART_COLORS.textDark, + color: '#ffffff', // 白色文字（十字线标签背景是深蓝色） size: 12, family: 'Helvetica, Arial, sans-serif', weight: 'normal', @@ -170,7 +172,7 @@ export const lightTheme: any = { }, text: { show: true, - color: CHART_COLORS.textDark, + color: '#ffffff', // 白色文字（十字线标签背景是深蓝色） size: 12, family: 'Helvetica, Arial, sans-serif', weight: 'normal', @@ -217,80 +219,7 @@ export const lightTheme: any = { }, }; -/** - * 深色主题配置 - */ -export const darkTheme: any = { - ...lightTheme, - candle: { - ...lightTheme.candle, - tooltip: { - ...lightTheme.candle?.tooltip, - text: { - ...lightTheme.candle?.tooltip?.text, - color: CHART_COLORS.textDark, - }, - }, - }, - indicator: { - ...lightTheme.indicator, - tooltip: { - ...lightTheme.indicator?.tooltip, - text: { - ...lightTheme.indicator?.tooltip?.text, - color: CHART_COLORS.textDark, - }, - }, - }, - xAxis: { - ...lightTheme.xAxis, - axisLine: { - show: true, - color: CHART_COLORS.borderDark, - }, - tickLine: { - show: true, - length: 3, - color: CHART_COLORS.borderDark, - }, - tickText: { - ...lightTheme.xAxis?.tickText, - color: CHART_COLORS.textDark, - }, - }, - yAxis: { - ...lightTheme.yAxis, - axisLine: { - show: true, - color: CHART_COLORS.borderDark, - }, - tickLine: { - show: true, - length: 3, - color: CHART_COLORS.borderDark, - }, - tickText: { - ...lightTheme.yAxis?.tickText, - color: CHART_COLORS.textDark, - }, - }, - grid: { - show: true, - horizontal: { - show: true, - size: 1, - color: CHART_COLORS.gridDark, - style: 'dashed', - }, - vertical: { - show: false, - }, - }, - separator: { - size: 1, - color: CHART_COLORS.borderDark, - }, -}; +// ❌ 已删除 darkTheme 配置（不再支持深色模式） /** * 分时图专用主题配置 @@ -389,43 +318,26 @@ export const timelineTheme: any = { }, }; +// ❌ 已删除 timelineThemeDark 配置（不再支持深色模式） + /** - * 分时图深色主题 + * 获取主题配置（固定返回浅色主题） + * ⚠️ 已移除深色模式支持 + * @deprecated colorMode 参数已废弃，始终返回浅色主题 */ -export const timelineThemeDark: any = { - ...timelineTheme, - ...darkTheme, - candle: { - ...timelineTheme.candle, - tooltip: { - ...timelineTheme.candle?.tooltip, - text: { - ...timelineTheme.candle?.tooltip?.text, - color: CHART_COLORS.textDark, - }, - }, - }, - grid: { - ...timelineTheme.grid, - horizontal: { - ...timelineTheme.grid?.horizontal, - color: CHART_COLORS.gridDark, - }, - }, +export const getTheme = (_colorMode?: 'light' | 'dark'): any => { + // ✅ 始终返回浅色主题 + return lightTheme; }; /** - * 获取主题配置（根据 Chakra UI colorMode） + * 获取分时图主题配置（固定返回浅色主题） + * ⚠️ 已移除深色模式支持 + * @deprecated colorMode 参数已废弃，始终返回浅色主题 */ -export const getTheme = (colorMode: 'light' | 'dark' = 'light'): any => { - return colorMode === 'dark' ? darkTheme : lightTheme; -}; - -/** - * 获取分时图主题配置 - */ -export const getTimelineTheme = (colorMode: 'light' | 'dark' = 'light'): any => { - const baseTheme = colorMode === 'dark' ? timelineThemeDark : timelineTheme; +export const getTimelineTheme = (_colorMode?: 'light' | 'dark'): any => { + // ✅ 始终使用浅色主题 + const baseTheme = timelineTheme; // ✅ 添加成交量指标样式（蓝色渐变柱状图）+ 成交量单位格式化 return { diff --git a/src/components/StockChart/hooks/useKLineChart.ts b/src/components/StockChart/hooks/useKLineChart.ts index 601fc7a4..ffa82e0b 100644 --- a/src/components/StockChart/hooks/useKLineChart.ts +++ b/src/components/StockChart/hooks/useKLineChart.ts @@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from 'react'; import { init, dispose, registerIndicator } from 'klinecharts'; import type { Chart } from 'klinecharts'; -import { useColorMode } from '@chakra-ui/react'; +// import { useColorMode } from '@chakra-ui/react'; // ❌ 已移除深色模式支持 import { getTheme, getTimelineTheme } from '../config/klineTheme'; import { CHART_INIT_OPTIONS } from '../config'; import { logger } from '@utils/logger'; @@ -59,7 +59,8 @@ export const useKLineChart = ( const [isInitialized, setIsInitialized] = useState(false); const [error, setError] = useState(null); - const { colorMode } = useColorMode(); + // ✅ 固定使用浅色主题（已移除 useColorMode） + const colorMode = 'light'; // 全局注册自定义均价线指标（只执行一次） useEffect(() => { diff --git a/src/providers/AppProviders.js b/src/providers/AppProviders.js index 976f53c4..e1962243 100644 --- a/src/providers/AppProviders.js +++ b/src/providers/AppProviders.js @@ -40,6 +40,13 @@ export function AppProviders({ children }) { 'light', // 始终返回 'light' + set: () => {}, // 禁止设置（忽略切换操作） + }} toastOptions={{ defaultOptions: { position: 'top',