From 18f8f75116104ded6c56bacdc98a778cb549c855 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Fri, 28 Nov 2025 14:09:47 +0800
Subject: [PATCH] update pay function

---
 src/components/ChatBot/EChartsRenderer.js     | 15 ++++++++----
 src/components/ChatBot/MarkdownWithCharts.js  | 24 +++++++++++++------
 .../ChatArea/ExecutionStepsDisplay.js         |  2 +-
 .../components/ChatArea/MessageRenderer.js    |  2 +-
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/ChatBot/EChartsRenderer.js b/src/components/ChatBot/EChartsRenderer.js
index e0bf3feb..735a44dd 100644
--- a/src/components/ChatBot/EChartsRenderer.js
+++ b/src/components/ChatBot/EChartsRenderer.js
@@ -9,12 +9,19 @@ import * as echarts from 'echarts';
  * ECharts 图表渲染组件
  * @param {Object} option - ECharts 配置对象
  * @param {number} height - 图表高度（默认 400px）
+ * @param {string} variant - 主题变体: 'light' | 'dark' | 'auto' (默认 auto)
  */
-export const EChartsRenderer = ({ option, height = 400 }) => {
+export const EChartsRenderer = ({ option, height = 400, variant = 'auto' }) => {
   const chartRef = useRef(null);
   const chartInstance = useRef(null);
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const isDarkMode = useColorModeValue(false, true);
+
+  // 系统颜色模式
+  const systemBgColor = useColorModeValue('white', 'transparent');
+  const systemIsDark = useColorModeValue(false, true);
+
+  // 根据 variant 决定实际使用的模式
+  const isDarkMode = variant === 'dark' ? true : variant === 'light' ? false : systemIsDark;
+  const bgColor = variant === 'dark' ? 'transparent' : variant === 'light' ? 'white' : systemBgColor;
 
   useEffect(() => {
     if (!chartRef.current || !option) return;
@@ -62,7 +69,7 @@ export const EChartsRenderer = ({ option, height = 400 }) => {
       window.removeEventListener('resize', handleResize);
       // chartInstance.current?.dispose(); // 不要销毁，避免重新渲染时闪烁
     };
-  }, [option, isDarkMode]);
+  }, [option, isDarkMode, variant]);
 
   // 组件卸载时销毁图表
   useEffect(() => {
diff --git a/src/components/ChatBot/MarkdownWithCharts.js b/src/components/ChatBot/MarkdownWithCharts.js
index 44b4a9b0..e322f437 100644
--- a/src/components/ChatBot/MarkdownWithCharts.js
+++ b/src/components/ChatBot/MarkdownWithCharts.js
@@ -55,15 +55,25 @@ const parseMarkdownWithCharts = (markdown) => {
 /**
  * 支持 ECharts 图表的 Markdown 渲染组件
  * @param {string} content - Markdown 文本
+ * @param {string} variant - 主题变体: 'light' | 'dark' | 'auto' (默认 auto，跟随系统)
  */
-export const MarkdownWithCharts = ({ content }) => {
+export const MarkdownWithCharts = ({ content, variant = 'auto' }) => {
   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)');
+  // 系统颜色模式
+  const systemTextColor = useColorModeValue('gray.700', 'gray.100');
+  const systemHeadingColor = useColorModeValue('gray.800', 'gray.50');
+  const systemBlockquoteColor = useColorModeValue('gray.600', 'gray.300');
+  const systemCodeBg = useColorModeValue('gray.100', 'rgba(255, 255, 255, 0.1)');
+
+  // 根据 variant 选择颜色
+  const isDark = variant === 'dark';
+  const isLight = variant === 'light';
+
+  const textColor = isDark ? 'gray.100' : isLight ? 'gray.700' : systemTextColor;
+  const headingColor = isDark ? 'gray.50' : isLight ? 'gray.800' : systemHeadingColor;
+  const blockquoteColor = isDark ? 'gray.300' : isLight ? 'gray.600' : systemBlockquoteColor;
+  const codeBg = isDark ? 'rgba(255, 255, 255, 0.1)' : isLight ? 'gray.100' : systemCodeBg;
 
   return (
     <VStack align="stretch" spacing={4}>
@@ -157,7 +167,7 @@ export const MarkdownWithCharts = ({ content }) => {
 
             return (
               <Box key={index}>
-                <EChartsRenderer option={chartOption} height={350} />
+                <EChartsRenderer option={chartOption} height={350} variant={variant} />
               </Box>
             );
           } catch (error) {
diff --git a/src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js b/src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js
index 30c9678d..9eea2537 100644
--- a/src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js
+++ b/src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js
@@ -147,7 +147,7 @@ ${JSON.stringify(echartsConfig)}
 
       return (
         <Box mt={3}>
-          <MarkdownWithCharts content={markdownContent} />
+          <MarkdownWithCharts content={markdownContent} variant="dark" />
 
           {/* 板块详情 */}
           {data.data?.sector_data && (
diff --git a/src/views/AgentChat/components/ChatArea/MessageRenderer.js b/src/views/AgentChat/components/ChatArea/MessageRenderer.js
index 10d3afce..aae36850 100644
--- a/src/views/AgentChat/components/ChatArea/MessageRenderer.js
+++ b/src/views/AgentChat/components/ChatArea/MessageRenderer.js
@@ -153,7 +153,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
                       '& blockquote': { borderLeftColor: 'purple.400', color: 'gray.300' },
                     }}
                   >
-                    <MarkdownWithCharts content={message.content} />
+                    <MarkdownWithCharts content={message.content} variant="dark" />
                   </Box>
 
                   {message.stepResults && message.stepResults.length > 0 && (