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,78 +56,166 @@ 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">
+          {executionTime !== undefined && (
-          {engine && (
+            <span className="flex items-center gap-1 text-xs" style={{ color: 'var(--color-code-toolbar-text)' }}>
-            <span className="px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-600">
+              <Clock size={12} />
-              {engine === 'pyodide' ? 'Pyodide' : 'Piston'}
+              {executionTime}ms
             </span>
           )}
-          {executionTime && (
+        </div>
-            <span>{executionTime}ms</span>
+
+        <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>
 
-      {/* 图片输出 */}
+      {/* 内容区域（可折叠） */}
-      {hasImages && (
+      {isExpanded && (
-        <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+        <>
-          <div className="flex flex-wrap gap-3">
+          {/* 图片输出 */}
-            {images.map((img, index) => (
+          {hasImages && (
-              <div
+            <div className="p-3" style={{ borderBottom: '1px solid var(--color-code-border)' }}>
-                key={index}
+              <div className="flex flex-wrap gap-3">
-                className="relative cursor-pointer hover:opacity-90 transition-opacity"
+                {images.map((img, index) => (
-                onClick={() => setSelectedImage(img)}
+                  <div
-              >
+                    key={index}
-                <Image
+                    className="relative cursor-pointer hover:opacity-90 transition-opacity"
-                  src={`data:image/png;base64,${img}`}
+                    onClick={() => setSelectedImage(img)}
-                  alt={`Chart ${index + 1}`}
+                  >
-                  width={400}
+                    <Image
-                  height={300}
+                      src={img.startsWith('data:') ? img : `data:image/png;base64,${img}`}
-                  className="rounded-lg shadow-md max-w-full h-auto"
+                      alt={`Chart ${index + 1}`}
-                  style={{ maxHeight: '300px', objectFit: 'contain' }}
+                      width={400}
-                />
+                      height={300}
-                <div className="absolute bottom-2 right-2 px-2 py-1 bg-black/50 text-white text-xs rounded">
+                      className="rounded-lg shadow-md max-w-full h-auto"
-                  图表 {index + 1}
+                      style={{ maxHeight: '300px', objectFit: 'contain' }}
-                </div>
+                    />
+                    <div className="absolute bottom-2 right-2 px-2 py-1 bg-black/50 text-white text-xs rounded">
+                      图表 {index + 1}
+                    </div>
+                  </div>
+                ))}
               </div>
-            ))}
+            </div>
-          </div>
+          )}
-        </div>
-      )}
 
-      {/* 文本输出 */}
+          {/* 文本输出 */}
-      {hasOutput && (
+          {hasOutput && (
-        <div className="p-3">
+            <div className="p-4">
-          <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">输出</div>
+              <pre
-          <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">
+                className="text-sm whitespace-pre-wrap font-mono max-h-60 overflow-auto"
-            {output}
+                style={{ color: 'var(--color-code-text)' }}
-          </pre>
+              >
-        </div>
+                {output}
-      )}
+              </pre>
+            </div>
+          )}
 
-      {/* 错误信息 */}
+          {/* 错误信息 */}
-      {hasError && (
+          {hasError && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20">
+            <div className="p-4" style={{ backgroundColor: 'rgba(239, 68, 68, 0.05)' }}>
-          <div className="text-xs text-red-600 dark:text-red-400 mb-1">错误</div>
+              <pre className="text-sm text-red-500 whitespace-pre-wrap font-mono max-h-60 overflow-auto">
-          <pre className="text-sm text-red-700 dark:text-red-300 whitespace-pre-wrap font-mono">
+                {error}
-            {error}
+              </pre>
-          </pre>
+            </div>
-        </div>
+          )}
+        </>
       )}
 
       {/* 图片放大模态框 */}