update pay function

src/components/ChatBot/EChartsRenderer.js

@@ -14,15 +14,27 @@ export const EChartsRenderer = ({ option, height = 400 }) => {
   const chartRef = useRef(null);
   const chartInstance = useRef(null);
   const bgColor = useColorModeValue('white', 'gray.800');
+  const isDarkMode = useColorModeValue(false, true);
 
   useEffect(() => {
     if (!chartRef.current || !option) return;
 
-    // 初始化图表
+    // 初始化图表（支持深色模式）
     if (!chartInstance.current) {
-      chartInstance.current = echarts.init(chartRef.current);
+      chartInstance.current = echarts.init(chartRef.current, isDarkMode ? 'dark' : null);
     }
 
+    // 深色模式下的默认文字颜色
+    const darkModeTextStyle = isDarkMode
+      ? {
+          textStyle: { color: '#e5e7eb' },
+          title: { textStyle: { color: '#f3f4f6' }, ...option?.title },
+          legend: { textStyle: { color: '#d1d5db' }, ...option?.legend },
+          xAxis: { axisLabel: { color: '#9ca3af' }, axisLine: { lineStyle: { color: '#4b5563' } }, ...option?.xAxis },
+          yAxis: { axisLabel: { color: '#9ca3af' }, axisLine: { lineStyle: { color: '#4b5563' } }, splitLine: { lineStyle: { color: '#374151' } }, ...option?.yAxis },
+        }
+      : {};
+
     // 设置默认主题配置
     const defaultOption = {
       backgroundColor: 'transparent',
@@ -33,6 +45,7 @@ export const EChartsRenderer = ({ option, height = 400 }) => {
         containLabel: true,
       },
       ...option,
+      ...darkModeTextStyle,
     };
 
     // 设置图表配置
@@ -49,7 +62,7 @@ export const EChartsRenderer = ({ option, height = 400 }) => {
       window.removeEventListener('resize', handleResize);
       // chartInstance.current?.dispose(); // 不要销毁，避免重新渲染时闪烁
     };
-  }, [option]);
+  }, [option, isDarkMode]);
 
   // 组件卸载时销毁图表
   useEffect(() => {

src/components/ChatBot/MarkdownWithCharts.js

@@ -2,7 +2,7 @@
 // 支持 ECharts 图表的 Markdown 渲染组件
 
 import React from 'react';
-import { Box, Alert, AlertIcon, Text, VStack, Code } from '@chakra-ui/react';
+import { Box, Alert, AlertIcon, Text, VStack, Code, useColorModeValue } from '@chakra-ui/react';
 import ReactMarkdown from 'react-markdown';
 import { EChartsRenderer } from './EChartsRenderer';
 import { logger } from '@utils/logger';
@@ -59,6 +59,12 @@ const parseMarkdownWithCharts = (markdown) => {
 export const MarkdownWithCharts = ({ content }) => {
   const parts = parseMarkdownWithCharts(content);
 
+  // 深色/浅色模式颜色
+  const textColor = useColorModeValue('gray.700', 'inherit');
+  const headingColor = useColorModeValue('gray.800', 'inherit');
+  const blockquoteColor = useColorModeValue('gray.600', 'gray.300');
+  const codeBg = useColorModeValue('gray.100', 'rgba(255, 255, 255, 0.1)');
+
   return (
     <VStack align="stretch" spacing={4}>
       {parts.map((part, index) => {
@@ -70,22 +76,22 @@ export const MarkdownWithCharts = ({ content }) => {
                 components={{
                   // 自定义渲染样式
                   p: ({ children }) => (
-                    <Text mb={2} fontSize="sm">
+                    <Text mb={2} fontSize="sm" color={textColor}>
                       {children}
                     </Text>
                   ),
                   h1: ({ children }) => (
-                    <Text fontSize="xl" fontWeight="bold" mb={3}>
+                    <Text fontSize="xl" fontWeight="bold" mb={3} color={headingColor}>
                       {children}
                     </Text>
                   ),
                   h2: ({ children }) => (
-                    <Text fontSize="lg" fontWeight="bold" mb={2}>
+                    <Text fontSize="lg" fontWeight="bold" mb={2} color={headingColor}>
                       {children}
                     </Text>
                   ),
                   h3: ({ children }) => (
-                    <Text fontSize="md" fontWeight="bold" mb={2}>
+                    <Text fontSize="md" fontWeight="bold" mb={2} color={headingColor}>
                       {children}
                     </Text>
                   ),
@@ -100,17 +106,17 @@ export const MarkdownWithCharts = ({ content }) => {
                     </Box>
                   ),
                   li: ({ children }) => (
-                    <Box as="li" fontSize="sm" mb={1}>
+                    <Box as="li" fontSize="sm" mb={1} color={textColor}>
                       {children}
                     </Box>
                   ),
                   code: ({ inline, children }) =>
                     inline ? (
-                      <Code fontSize="sm" px={1}>
+                      <Code fontSize="sm" px={1} bg={codeBg}>
                         {children}
                       </Code>
                     ) : (
-                      <Code display="block" p={3} borderRadius="md" fontSize="sm" whiteSpace="pre-wrap">
+                      <Code display="block" p={3} borderRadius="md" fontSize="sm" whiteSpace="pre-wrap" bg={codeBg}>
                         {children}
                       </Code>
                     ),
@@ -121,7 +127,7 @@ export const MarkdownWithCharts = ({ content }) => {
                       pl={4}
                       py={2}
                       fontStyle="italic"
-                      color="gray.600"
+                      color={blockquoteColor}
                     >
                       {children}
                     </Box>