markdown1

frontend/src/components/activity/activity.module.less

@@ -342,3 +342,70 @@
     box-shadow: none;
   }
 }
+
+/* Markdown Table Styles */
+.richText table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  background-color: #2d2d2d;
+  border-radius: 4px;
+  overflow: hidden;
+  font-size: 14px;
+}
+
+.richText th,
+.richText td {
+  padding: 12px 16px;
+  border: 1px solid #434343;
+  color: #e0e0e0;
+}
+
+.richText th {
+  background-color: #1f1f1f;
+  font-weight: 600;
+  text-align: left;
+}
+
+.richText tr:nth-child(even) {
+  background-color: #333;
+}
+
+.richText tr:hover {
+  background-color: #3a3a3a;
+}
+
+/* Code Block Styles */
+.codeBlockWrapper {
+  position: relative;
+  margin: 16px 0;
+  border-radius: 6px;
+  overflow: hidden;
+  
+  &:hover .copyButton {
+    opacity: 1;
+  }
+}
+
+.copyButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  padding: 4px 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  opacity: 0; /* Hidden by default, shown on hover */
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}

frontend/src/pages/activity/Detail.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { motion, useScroll, useTransform } from 'framer-motion';
-import { ArrowLeftOutlined, ShareAltOutlined, CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined, UserOutlined, UploadOutlined, PayCircleOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined, ShareAltOutlined, CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined, UserOutlined, UploadOutlined, PayCircleOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
 import confetti from 'canvas-confetti';
 import { message, Spin, Button, Result, Modal, Form, Input, Select, Radio, Checkbox, Upload } from 'antd';
 import { getActivityDetail, signUpActivity, queryOrderStatus } from '../../api';
@@ -18,6 +18,43 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { QRCodeSVG } from 'qrcode.react';
 
+const CodeBlock = ({ inline, className, children, ...props }) => {
+  const [copied, setCopied] = useState(false);
+  const match = /language-(\w+)/.exec(className || '');
+  const codeString = String(children).replace(/\n$/, '');
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(codeString);
+    setCopied(true);
+    message.success('代码已复制');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return !inline && match ? (
+    <div className={styles.codeBlockWrapper}>
+      <div 
+        className={styles.copyButton} 
+        onClick={handleCopy}
+      >
+        {copied ? <CheckOutlined /> : <CopyOutlined />}
+        <span style={{ marginLeft: 4 }}>{copied ? '已复制' : '复制'}</span>
+      </div>
+      <SyntaxHighlighter
+        style={vscDarkPlus}
+        language={match[1]}
+        PreTag="div"
+        {...props}
+      >
+        {codeString}
+      </SyntaxHighlighter>
+    </div>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};
+
 const ActivityDetail = () => {
   const { id } = useParams();
   const navigate = useNavigate();
@@ -410,23 +447,7 @@ const ActivityDetail = () => {
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeRaw]}
                 components={{
-                  code({inline, className, children, ...props}) {
-                    const match = /language-(\w+)/.exec(className || '')
-                    return !inline && match ? (
-                      <SyntaxHighlighter
-                        style={vscDarkPlus}
-                        language={match[1]}
-                        PreTag="div"
-                        {...props}
-                      >
-                        {String(children).replace(/\n$/, '')}
-                      </SyntaxHighlighter>
-                    ) : (
-                      <code className={className} {...props}>
-                        {children}
-                      </code>
-                    )
-                  }
+                  code: CodeBlock
                 }}
               >
                 {activity.description || activity.content || '暂无详情描述'}