pref:移除黑夜模式
This commit is contained in:
@@ -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 (
|
||||
<HStack spacing={{ base: 2, md: 4 }}>
|
||||
{/* 主题切换按钮 */}
|
||||
<ThemeToggleButton />
|
||||
|
||||
{/* 显示加载状态 */}
|
||||
{isLoading ? (
|
||||
<Spinner size="sm" color="blue.500" />
|
||||
|
||||
@@ -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 (
|
||||
<IconButton
|
||||
aria-label="切换主题"
|
||||
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
onClick={handleToggle}
|
||||
variant={variant}
|
||||
size={size}
|
||||
minW={{ base: '36px', md: '40px' }}
|
||||
minH={{ base: '36px', md: '40px' }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
ThemeToggleButton.displayName = 'ThemeToggleButton';
|
||||
|
||||
export default ThemeToggleButton;
|
||||
@@ -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 {
|
||||
|
||||
@@ -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<Error | null>(null);
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
// ✅ 固定使用浅色主题(已移除 useColorMode)
|
||||
const colorMode = 'light';
|
||||
|
||||
// 全局注册自定义均价线指标(只执行一次)
|
||||
useEffect(() => {
|
||||
|
||||
@@ -40,6 +40,13 @@ export function AppProviders({ children }) {
|
||||
<ReduxProvider store={store}>
|
||||
<ChakraProvider
|
||||
theme={theme}
|
||||
// ✅ 强制使用浅色主题(禁用深色模式)
|
||||
colorModeManager={{
|
||||
type: 'cookie',
|
||||
ssr: false,
|
||||
get: () => 'light', // 始终返回 'light'
|
||||
set: () => {}, // 禁止设置(忽略切换操作)
|
||||
}}
|
||||
toastOptions={{
|
||||
defaultOptions: {
|
||||
position: 'top',
|
||||
|
||||
Reference in New Issue
Block a user