update pay function

src/components/ChatBot/MarkdownWithCharts.js

@@ -2,8 +2,9 @@
 // 支持 ECharts 图表的 Markdown 渲染组件
 
 import React from 'react';
-import { Box, Alert, AlertIcon, Text, VStack, Code, useColorModeValue } from '@chakra-ui/react';
+import { Box, Alert, AlertIcon, Text, VStack, Code, useColorModeValue, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { EChartsRenderer } from './EChartsRenderer';
 import { logger } from '@utils/logger';
 
@@ -83,6 +84,7 @@ export const MarkdownWithCharts = ({ content, variant = 'auto' }) => {
           return (
             <Box key={index}>
               <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
                 components={{
                   // 自定义渲染样式
                   p: ({ children }) => (
@@ -142,6 +144,55 @@ export const MarkdownWithCharts = ({ content, variant = 'auto' }) => {
                       {children}
                     </Box>
                   ),
+                  // 表格渲染
+                  table: ({ children }) => (
+                    <TableContainer
+                      mb={4}
+                      borderRadius="md"
+                      border="1px solid"
+                      borderColor={isDark ? 'rgba(255, 255, 255, 0.1)' : 'gray.200'}
+                      overflowX="auto"
+                    >
+                      <Table size="sm" variant="simple">
+                        {children}
+                      </Table>
+                    </TableContainer>
+                  ),
+                  thead: ({ children }) => (
+                    <Thead bg={isDark ? 'rgba(255, 255, 255, 0.05)' : 'gray.50'}>
+                      {children}
+                    </Thead>
+                  ),
+                  tbody: ({ children }) => <Tbody>{children}</Tbody>,
+                  tr: ({ children }) => (
+                    <Tr
+                      _hover={{
+                        bg: isDark ? 'rgba(255, 255, 255, 0.03)' : 'gray.50'
+                      }}
+                    >
+                      {children}
+                    </Tr>
+                  ),
+                  th: ({ children }) => (
+                    <Th
+                      fontSize="xs"
+                      color={headingColor}
+                      borderColor={isDark ? 'rgba(255, 255, 255, 0.1)' : 'gray.200'}
+                      py={2}
+                    >
+                      {children}
+                    </Th>
+                  ),
+                  td: ({ children }) => (
+                    <Td
+                      fontSize="sm"
+                      color={textColor}
+                      borderColor={isDark ? 'rgba(255, 255, 255, 0.1)' : 'gray.200'}
+                      py={2}
+                    >
+                      {children}
+                    </Td>
+                  ),
                 }}
               >
                 {part.content}