From 227a96b23230c2d93beead40e0b9425bf7b6cd6a Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Thu, 18 Dec 2025 11:29:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(markdown):=20=E6=B7=BB=E5=8A=A0=20Markdown?=
 =?UTF-8?q?=20=E6=B8=B2=E6=9F=93=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 MarkdownRenderer 组件支持 GFM 语法渲染
- 添加 CodeBlock 组件支持代码块语法高亮
- 集成 Prism.js 实现多语言语法高亮
- 支持代码复制功能
---
 src/components/markdown/CodeBlock.tsx        | 135 +++++++++++
 src/components/markdown/MarkdownRenderer.tsx | 222 +++++++++++++++++++
 2 files changed, 357 insertions(+)
 create mode 100644 src/components/markdown/CodeBlock.tsx
 create mode 100644 src/components/markdown/MarkdownRenderer.tsx

diff --git a/src/components/markdown/CodeBlock.tsx b/src/components/markdown/CodeBlock.tsx
new file mode 100644
index 0000000..53911ef
--- /dev/null
+++ b/src/components/markdown/CodeBlock.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useRef, useState, useMemo } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markup';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  showLineNumbers?: boolean;
+  className?: string;
+}
+
+// 语言别名映射
+const languageAliases: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  py: 'python',
+  rb: 'ruby',
+  sh: 'bash',
+  shell: 'bash',
+  yml: 'yaml',
+  html: 'markup',
+  xml: 'markup',
+  svg: 'markup',
+};
+
+export function CodeBlock({
+  code,
+  language = 'text',
+  showLineNumbers = true,
+  className,
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  // 规范化语言名称
+  const normalizedLanguage = languageAliases[language.toLowerCase()] || language.toLowerCase();
+
+  // 使用 useMemo 缓存高亮后的 HTML，避免频繁重新高亮
+  const highlightedCode = useMemo(() => {
+    const grammar = Prism.languages[normalizedLanguage];
+    if (grammar) {
+      return Prism.highlight(code, grammar, normalizedLanguage);
+    }
+    return code;
+  }, [code, normalizedLanguage]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy code:', error);
+    }
+  };
+
+  const lines = code.split('\n');
+
+  return (
+    <div className={cn('relative group rounded-lg overflow-hidden my-4', className)}>
+      {/* 顶部工具栏 */}
+      <div className="flex items-center justify-between px-4 py-2 bg-[#2d2d2d] text-gray-400 text-sm">
+        <span className="font-mono">{language || 'code'}</span>
+        <button
+          onClick={handleCopy}
+          className="inline-flex items-center gap-1.5 px-2 py-1 rounded hover:bg-white/10 transition-colors"
+          title="Copy code"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="text-green-400" />
+              <span className="text-green-400">Copied!</span>
+            </>
+          ) : (
+            <>
+              <Copy size={14} />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* 代码区域 */}
+      <div className="relative overflow-x-auto bg-[#1e1e1e]">
+        {showLineNumbers && (
+          <div className="absolute left-0 top-0 bottom-0 w-12 bg-[#1e1e1e] border-r border-gray-700 select-none">
+            <div className="py-4 px-2 text-right">
+              {lines.map((_, index) => (
+                <div
+                  key={index}
+                  className="text-gray-500 text-sm font-mono leading-6"
+                >
+                  {index + 1}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        <pre
+          className={cn(
+            'p-4 overflow-x-auto',
+            showLineNumbers && 'pl-16'
+          )}
+          style={{ margin: 0, background: 'transparent' }}
+        >
+          <code
+            className={`language-${normalizedLanguage} text-sm leading-6`}
+            dangerouslySetInnerHTML={{ __html: highlightedCode }}
+          />
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/markdown/MarkdownRenderer.tsx b/src/components/markdown/MarkdownRenderer.tsx
new file mode 100644
index 0000000..6d12969
--- /dev/null
+++ b/src/components/markdown/MarkdownRenderer.tsx
@@ -0,0 +1,222 @@
+'use client';
+
+import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CodeBlock } from './CodeBlock';
+import { cn } from '@/lib/utils';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+// 将 components 配置提取到组件外部，避免每次渲染时创建新对象
+const markdownComponents = {
+  // 代码块
+  code({ className, children, ...props }: { className?: string; children?: React.ReactNode }) {
+    const match = /language-(\w+)/.exec(className || '');
+    const isInline = !match && !className;
+
+    if (isInline) {
+      // 行内代码
+      return (
+        <code
+          className="bg-red-50 text-red-700 px-1.5 py-0.5 rounded text-sm font-mono"
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+
+    // 代码块
+    return (
+      <CodeBlock
+        code={String(children).replace(/\n$/, '')}
+        language={match ? match[1] : 'text'}
+      />
+    );
+  },
+
+  // 段落
+  p({ children }: { children?: React.ReactNode }) {
+    return (
+      <p className="mb-3 last:mb-0 leading-[1.7]">
+        {children}
+      </p>
+    );
+  },
+
+  // 标题
+  h1({ children }: { children?: React.ReactNode }) {
+    return (
+      <h1 className="text-lg font-bold mt-5 mb-3 text-[var(--color-text-primary)]">
+        {children}
+      </h1>
+    );
+  },
+  h2({ children }: { children?: React.ReactNode }) {
+    return (
+      <h2 className="text-base font-bold mt-4 mb-2 text-[var(--color-text-primary)]">
+        {children}
+      </h2>
+    );
+  },
+  h3({ children }: { children?: React.ReactNode }) {
+    return (
+      <h3 className="text-sm font-semibold mt-3 mb-2 text-[var(--color-text-primary)]">
+        {children}
+      </h3>
+    );
+  },
+  h4({ children }: { children?: React.ReactNode }) {
+    return (
+      <h4 className="text-sm font-semibold mt-2 mb-1 text-[var(--color-text-primary)]">
+        {children}
+      </h4>
+    );
+  },
+
+  // 列表
+  ul({ children }: { children?: React.ReactNode }) {
+    return (
+      <ul className="list-disc pl-5 my-2 space-y-1">
+        {children}
+      </ul>
+    );
+  },
+  ol({ children }: { children?: React.ReactNode }) {
+    return (
+      <ol className="list-decimal pl-5 my-2 space-y-1">
+        {children}
+      </ol>
+    );
+  },
+  li({ children }: { children?: React.ReactNode }) {
+    return (
+      <li className="leading-relaxed text-sm">
+        {children}
+      </li>
+    );
+  },
+
+  // 链接
+  a({ href, children }: { href?: string; children?: React.ReactNode }) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-[var(--color-primary)] hover:underline"
+      >
+        {children}
+      </a>
+    );
+  },
+
+  // 粗体
+  strong({ children }: { children?: React.ReactNode }) {
+    return (
+      <strong className="font-semibold">
+        {children}
+      </strong>
+    );
+  },
+
+  // 斜体
+  em({ children }: { children?: React.ReactNode }) {
+    return (
+      <em className="italic">
+        {children}
+      </em>
+    );
+  },
+
+  // 引用
+  blockquote({ children }: { children?: React.ReactNode }) {
+    return (
+      <blockquote className="border-l-3 border-[var(--color-primary)] pl-3 my-3 italic text-sm text-[var(--color-text-secondary)]">
+        {children}
+      </blockquote>
+    );
+  },
+
+  // 分割线
+  hr() {
+    return (
+      <hr className="my-4 border-[var(--color-border)]" />
+    );
+  },
+
+  // 表格
+  table({ children }: { children?: React.ReactNode }) {
+    return (
+      <div className="overflow-x-auto my-3">
+        <table className="min-w-full border border-[var(--color-border)] rounded-lg overflow-hidden text-sm">
+          {children}
+        </table>
+      </div>
+    );
+  },
+  thead({ children }: { children?: React.ReactNode }) {
+    return (
+      <thead className="bg-[var(--color-bg-tertiary)]">
+        {children}
+      </thead>
+    );
+  },
+  tbody({ children }: { children?: React.ReactNode }) {
+    return (
+      <tbody className="divide-y divide-[var(--color-border)]">
+        {children}
+      </tbody>
+    );
+  },
+  tr({ children }: { children?: React.ReactNode }) {
+    return (
+      <tr className="hover:bg-[var(--color-bg-hover)] transition-colors">
+        {children}
+      </tr>
+    );
+  },
+  th({ children }: { children?: React.ReactNode }) {
+    return (
+      <th className="px-3 py-1.5 text-left text-xs font-semibold text-[var(--color-text-primary)]">
+        {children}
+      </th>
+    );
+  },
+  td({ children }: { children?: React.ReactNode }) {
+    return (
+      <td className="px-3 py-1.5 text-xs text-[var(--color-text-secondary)]">
+        {children}
+      </td>
+    );
+  },
+
+  // 图片
+  img({ src, alt }: { src?: string; alt?: string }) {
+    return (
+      <img
+        src={src}
+        alt={alt || ''}
+        className="max-w-full h-auto rounded-lg my-3"
+      />
+    );
+  },
+};
+
+// 使用 memo 包裹组件，避免不必要的重渲染
+export const MarkdownRenderer = memo(function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
+  return (
+    <div className={cn('markdown-content', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={markdownComponents}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+});