update pay function

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>