feat: P3a 代码语法高亮 (highlight.js + CodeBlock组件)

frontend/package-lock.json

@@ -27,6 +27,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.38.0",
+        "highlight.js": "^11.11.1",
         "lucide-react": "^1.14.0",
         "next": "^14.2.35",
         "next-themes": "^0.4.6",
@@ -3769,6 +3770,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",

frontend/package.json

@@ -43,6 +43,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
+    "highlight.js": "^11.11.1",
     "lucide-react": "^1.14.0",
     "next": "^14.2.35",
     "next-themes": "^0.4.6",

frontend/src/app/globals.css

@@ -4,6 +4,9 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
 
+/* highlight.js for code syntax highlighting */
+@import 'highlight.js/styles/atom-one-dark.css';
+
 @layer base {
   :root {
     --background: 0 0% 100%;

frontend/src/app/sandbox/page.tsx

@@ -8,6 +8,7 @@ import { getToken, apiFetch } from '@/lib/auth';
 import { DEFAULT_MODEL } from '@/lib/models';
 import { ModelSelector } from '@/components/ui/model-selector';
 import { useT } from '@/i18n';
+import { CodeBlock } from '@/components/ui/code-block';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1';
 
@@ -412,7 +413,18 @@ function SandboxPage() {
                         <div className="w-8 h-8 bg-brand-600 rounded-xl flex items-center justify-center text-white text-sm font-bold shrink-0">Y</div>
                       )}
                       <div className={`max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${msg.role === 'user' ? 'bg-brand-600 text-white rounded-tr-none' : 'bg-muted text-foreground rounded-tl-none'}`}>
-                        {msg.content}
+                        {(() => {
+                          const parts = msg.content.split(/(```(?:\w+)?\n[\s\S]*?```)/g)
+                          return parts.map((part, pi) => {
+                            const match = part.match(/^```(\w*)\n([\s\S]*)```$/)
+                            if (match) {
+                              const [, lang, code] = match
+                              return <CodeBlock key={pi} code={code.trim()} language={lang || undefined} />
+                            }
+                            if (pi > 0 && parts[pi-1].startsWith('```')) return null
+                            return <span key={pi} className="whitespace-pre-wrap">{part}</span>
+                          })
+                        })()}
                       </div>
                       {msg.role === 'user' && (
                         <div className="w-8 h-8 bg-muted-foreground/20 rounded-xl flex items-center justify-center text-xs font-bold shrink-0">我</div>

frontend/src/components/ui/code-block.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import hljs from 'highlight.js/lib/core'
+import javascript from 'highlight.js/lib/languages/javascript'
+import python from 'highlight.js/lib/languages/python'
+import typescript from 'highlight.js/lib/languages/typescript'
+import xml from 'highlight.js/lib/languages/xml'
+import css from 'highlight.js/lib/languages/css'
+import bash from 'highlight.js/lib/languages/bash'
+import json from 'highlight.js/lib/languages/json'
+
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('py', python)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('ts', typescript)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('css', css)
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('sh', bash)
+hljs.registerLanguage('json', json)
+
+interface CodeBlockProps {
+  code: string
+  language?: string
+}
+
+export function CodeBlock({ code, language }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+  const codeRef = useRef<HTMLElement>(null)
+
+  let highlighted = ''
+  try {
+    if (language && hljs.getLanguage(language)) {
+      highlighted = hljs.highlight(code, { language }).value
+    } else {
+      highlighted = hljs.highlightAuto(code).value
+    }
+  } catch {
+    highlighted = code
+  }
+
+  async function copyCode() {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {}
+  }
+
+  return (
+    <div className="relative group my-2 rounded-xl overflow-hidden border border-border">
+      <div className="flex items-center justify-between px-4 py-1.5 bg-muted/80 border-b border-border">
+        <span className="text-xs text-muted-foreground">{language || 'code'}</span>
+        <button onClick={copyCode}
+          className="text-xs px-2 py-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
+          {copied ? '已复制' : '复制'}
+        </button>
+      </div>
+      <pre className="overflow-x-auto p-4 text-sm leading-relaxed bg-[#1e1e1e]">
+        <code ref={codeRef} className={`language-${language || ''}`} dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+    </div>
+  )
+}