refactor(执行结果): 重构代码执行结果组件

- 使用 CSS 变量适配亮暗主题
- 添加结果折叠/展开功能
- 添加输出复制功能
- 优化成功/错误状态显示样式
- 显示执行时间和引擎信息

src/components/features/CodeExecutionResult.tsx

@@ -2,6 +2,16 @@
 
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { Check, X, Copy, ChevronDown, ChevronUp, Loader2, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ExecutionResult, EngineType } from '@/lib/code-runner/types';
+
+// 引擎名称映射
+const engineLabels: Record<EngineType, string> = {
+  sandbox: 'JavaScript',
+  pyodide: 'Python',
+  remote: '云端',
+};
 
 interface CodeExecutionResultProps {
   /** 执行输出文本 */
@@ -13,7 +23,7 @@ interface CodeExecutionResultProps {
   /** 执行语言 */
   language?: string;
   /** 执行引擎 */
-  engine?: 'pyodide' | 'piston';
+  engine?: EngineType | 'piston';
   /** 执行时间 (ms) */
   executionTime?: number;
   /** 是否执行成功 */
@@ -34,6 +44,8 @@ export function CodeExecutionResult({
   success = true,
 }: CodeExecutionResultProps) {
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [copied, setCopied] = useState(false);
 
   const hasOutput = output && output.trim().length > 0;
   const hasError = error && error.trim().length > 0;
@@ -44,36 +56,121 @@ export function CodeExecutionResult({
     return null;
   }
 
+  // 复制输出
+  const handleCopy = async () => {
+    const textToCopy = success ? output : error || '';
+    try {
+      await navigator.clipboard.writeText(textToCopy || '');
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // 获取引擎显示名称
+  const getEngineLabel = () => {
+    if (!engine) return '';
+    if (engine === 'piston') return '云端';
+    return engineLabels[engine] || engine;
+  };
+
   return (
-    <div className="code-execution-result mt-3 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden bg-gray-50 dark:bg-gray-800">
+    <div
+      className={cn(
+        'code-execution-result mt-3 rounded border overflow-hidden',
+        success
+          ? 'border-green-500/30'
+          : 'border-red-500/30'
+      )}
+      style={{
+        backgroundColor: 'var(--color-code-bg)',
+        borderColor: success ? 'rgba(34, 197, 94, 0.3)' : 'rgba(239, 68, 68, 0.3)',
+      }}
+    >
       {/* 头部信息 */}
-      <div className="flex items-center justify-between px-3 py-2 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+      <div
+        className="flex items-center justify-between px-4 py-2.5 cursor-pointer"
+        style={{
+          backgroundColor: 'var(--color-code-toolbar-bg)',
+          borderBottom: '1px solid var(--color-code-border)',
+        }}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
         <div className="flex items-center gap-2">
-          <span className={`w-2 h-2 rounded-full ${success ? 'bg-green-500' : 'bg-red-500'}`} />
-          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            {success ? '执行成功' : '执行失败'}
+          {/* 状态图标 */}
+          {success ? (
+            <Check size={16} className="text-green-500" />
+          ) : (
+            <X size={16} className="text-red-500" />
+          )}
+          {/* 状态文本 */}
+          <span
+            className={cn(
+              'text-sm font-medium',
+              success ? 'text-green-500' : 'text-red-500'
+            )}
+          >
+            {success ? '输出' : '错误'}
           </span>
+          {/* 语言 */}
           {language && (
-            <span className="text-xs text-gray-500 dark:text-gray-400">
+            <span className="text-xs" style={{ color: 'var(--color-code-toolbar-text)' }}>
               {language}
             </span>
           )}
-        </div>
-        <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
-          {engine && (
-            <span className="px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-600">
-              {engine === 'pyodide' ? 'Pyodide' : 'Piston'}
+          {/* 执行时间 */}
+          {executionTime !== undefined && (
+            <span className="flex items-center gap-1 text-xs" style={{ color: 'var(--color-code-toolbar-text)' }}>
+              <Clock size={12} />
+              {executionTime}ms
             </span>
           )}
-          {executionTime && (
-            <span>{executionTime}ms</span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* 引擎标签 */}
+          {engine && (
+            <span className="text-xs hidden sm:inline" style={{ color: 'var(--color-code-toolbar-text)' }}>
+              {getEngineLabel()}
+            </span>
           )}
+          {/* 复制按钮 */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCopy();
+            }}
+            className="p-1 rounded transition-colors hover:bg-white/10"
+            style={{ color: 'var(--color-code-toolbar-text)' }}
+            title={copied ? '已复制' : '复制输出'}
+          >
+            {copied ? (
+              <Check size={14} className="text-green-500" />
+            ) : (
+              <Copy size={14} />
+            )}
+          </button>
+          {/* 展开/收起按钮 */}
+          <button
+            className="p-1 rounded transition-colors"
+            style={{ color: 'var(--color-code-toolbar-text)' }}
+          >
+            {isExpanded ? (
+              <ChevronUp size={14} />
+            ) : (
+              <ChevronDown size={14} />
+            )}
+          </button>
         </div>
       </div>
 
+      {/* 内容区域（可折叠） */}
+      {isExpanded && (
+        <>
           {/* 图片输出 */}
           {hasImages && (
-        <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="p-3" style={{ borderBottom: '1px solid var(--color-code-border)' }}>
               <div className="flex flex-wrap gap-3">
                 {images.map((img, index) => (
                   <div
@@ -82,7 +179,7 @@ export function CodeExecutionResult({
                     onClick={() => setSelectedImage(img)}
                   >
                     <Image
-                  src={`data:image/png;base64,${img}`}
+                      src={img.startsWith('data:') ? img : `data:image/png;base64,${img}`}
                       alt={`Chart ${index + 1}`}
                       width={400}
                       height={300}
@@ -100,9 +197,11 @@ export function CodeExecutionResult({
 
           {/* 文本输出 */}
           {hasOutput && (
-        <div className="p-3">
-          <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">输出</div>
-          <pre className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap font-mono bg-white dark:bg-gray-900 p-2 rounded border border-gray-200 dark:border-gray-700 max-h-60 overflow-auto">
+            <div className="p-4">
+              <pre
+                className="text-sm whitespace-pre-wrap font-mono max-h-60 overflow-auto"
+                style={{ color: 'var(--color-code-text)' }}
+              >
                 {output}
               </pre>
             </div>
@@ -110,13 +209,14 @@ export function CodeExecutionResult({
 
           {/* 错误信息 */}
           {hasError && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20">
-          <div className="text-xs text-red-600 dark:text-red-400 mb-1">错误</div>
-          <pre className="text-sm text-red-700 dark:text-red-300 whitespace-pre-wrap font-mono">
+            <div className="p-4" style={{ backgroundColor: 'rgba(239, 68, 68, 0.05)' }}>
+              <pre className="text-sm text-red-500 whitespace-pre-wrap font-mono max-h-60 overflow-auto">
                 {error}
               </pre>
             </div>
           )}
+        </>
+      )}
 
       {/* 图片放大模态框 */}
       {selectedImage && (