fix: 修改分页及AI表格样式

src/components/ai/MarkdownViewer.tsx

@@ -4,6 +4,7 @@ import rehypeRaw from "rehype-raw";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { useState } from "react";
+import "./index.less";
 
 interface MarkdownViewerProps {
   content: string;
@@ -38,55 +39,56 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ content }) => {
     setCopiedIndex(index);
     setTimeout(() => setCopiedIndex(null), 2000);
   };
-  console.log(content);
 
   return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw]}
-      components={{
-        code({ node, className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || "");
-          const code = String(children).replace(/\n$/, "");
-          const language = match ? match[1] : "";
-          if (match) {
-            return (
-              <div className="rounded-md overflow-hidden mb-4">
-                <CodeHeader
-                  language={language}
-                  onCopy={() =>
-                    handleCopy(code, node?.position?.start.line ?? 0)
-                  }
-                  copied={copiedIndex === node?.position?.start.line}
-                />
-                <div className="max-w-full overflow-x-auto">
-                  <SyntaxHighlighter
-                    style={vscDarkPlus}
+    <div className="markdown-body">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          code({ node, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            const code = String(children).replace(/\n$/, "");
+            const language = match ? match[1] : "";
+            if (match) {
+              return (
+                <div className="rounded-md overflow-hidden mb-4">
+                  <CodeHeader
                     language={language}
-                    PreTag="div"
-                    {...props}
-                    customStyle={{
-                      margin: 0,
-                      borderTopLeftRadius: 0,
-                      borderTopRightRadius: 0,
-                    }}
-                  >
-                    {code}
-                  </SyntaxHighlighter>
+                    onCopy={() =>
+                      handleCopy(code, node?.position?.start.line ?? 0)
+                    }
+                    copied={copiedIndex === node?.position?.start.line}
+                  />
+                  <div className="max-w-full overflow-x-auto">
+                    <SyntaxHighlighter
+                      style={vscDarkPlus}
+                      language={language}
+                      PreTag="div"
+                      {...props}
+                      customStyle={{
+                        margin: 0,
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
+                      }}
+                    >
+                      {code}
+                    </SyntaxHighlighter>
+                  </div>
                 </div>
-              </div>
+              );
+            }
+            return (
+              <code className={className} {...props}>
+                {children}
+              </code>
             );
-          }
-          return (
-            <code className={className} {...props}>
-              {children}
-            </code>
-          );
-        },
-      }}
-    >
-      {content}
-    </ReactMarkdown>
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
   );
 };
 

src/components/ai/index.less

@@ -0,0 +1,37 @@
+.markdown-body {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 20px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333;
+    border: solid 1px #ddd;
+    th {
+      padding: 8px;
+      line-height: 1.42857143;
+      vertical-align: top;
+      border-top: 1px solid #ddd;
+      border-right: 1px solid #ddd;
+      word-break: break-all;
+    }
+    td {
+      padding: 8px;
+      line-height: 1.42857143;
+      vertical-align: top;
+      border-top: 1px solid #ddd;
+      border-right: 1px solid #ddd;
+      word-break: break-all;
+    }
+    th {
+      text-align: left;
+    }
+    th {
+      background-color: #f9f9f9;
+    }
+    tr:nth-child(2n) {
+      // background-color: #f9f9f9;
+    }
+  }
+}

src/components/ai/mermaid.less

@@ -1,10 +0,0 @@
-.mermaid-container {
-  width: 100%;
-  height: 100%;
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    margin: 0 auto;
-    display: block;
-  }
-}

src/pages/application/index.tsx

@@ -146,6 +146,7 @@ export default function Home() {
             align="center"
             hideOnSinglePage
             current={currentPage}
+            pageSize={20}
             total={data?.result?.totalCount || 0}
             onChange={handleChangePage}
           />

src/pages/template/index.tsx

@@ -152,6 +152,7 @@ export default function Template() {
             className="mt-6"
             align="center"
             hideOnSinglePage
+            pageSize={20}
             current={currentPage}
             total={data?.result?.totalCount || 0}
             onChange={handleChangePage}