From 58d288637adc23ef918618c3e4fa351243d1040a Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Fri, 19 Dec 2025 20:20:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=89=A7=E8=A1=8C=E7=BB=93=E6=9E=9C=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 CodeExecutionResult 组件展示代码执行输出和图形
- 支持 Base64 图片渲染和点击放大查看
- 显示执行引擎（Pyodide/Piston）和执行时间
- 新增 PyodideLoading 组件显示 Python 环境加载进度
- 支持暗色主题
---
 .../features/CodeExecutionResult.tsx          | 206 ++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 src/components/features/CodeExecutionResult.tsx

diff --git a/src/components/features/CodeExecutionResult.tsx b/src/components/features/CodeExecutionResult.tsx
new file mode 100644
index 0000000..2f7a5bf
--- /dev/null
+++ b/src/components/features/CodeExecutionResult.tsx
@@ -0,0 +1,206 @@
+'use client';
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface CodeExecutionResultProps {
+  /** 执行输出文本 */
+  output?: string;
+  /** 错误信息 */
+  error?: string;
+  /** Base64 编码的图片数组 */
+  images?: string[];
+  /** 执行语言 */
+  language?: string;
+  /** 执行引擎 */
+  engine?: 'pyodide' | 'piston';
+  /** 执行时间 (ms) */
+  executionTime?: number;
+  /** 是否执行成功 */
+  success?: boolean;
+}
+
+/**
+ * 代码执行结果组件
+ * 支持显示文本输出和图形输出
+ */
+export function CodeExecutionResult({
+  output,
+  error,
+  images,
+  language,
+  engine,
+  executionTime,
+  success = true,
+}: CodeExecutionResultProps) {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const hasOutput = output && output.trim().length > 0;
+  const hasError = error && error.trim().length > 0;
+  const hasImages = images && images.length > 0;
+
+  // 如果没有任何内容，不渲染
+  if (!hasOutput && !hasError && !hasImages) {
+    return null;
+  }
+
+  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="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 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 ? '执行成功' : '执行失败'}
+          </span>
+          {language && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              {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'}
+            </span>
+          )}
+          {executionTime && (
+            <span>{executionTime}ms</span>
+          )}
+        </div>
+      </div>
+
+      {/* 图片输出 */}
+      {hasImages && (
+        <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex flex-wrap gap-3">
+            {images.map((img, index) => (
+              <div
+                key={index}
+                className="relative cursor-pointer hover:opacity-90 transition-opacity"
+                onClick={() => setSelectedImage(img)}
+              >
+                <Image
+                  src={`data:image/png;base64,${img}`}
+                  alt={`Chart ${index + 1}`}
+                  width={400}
+                  height={300}
+                  className="rounded-lg shadow-md max-w-full h-auto"
+                  style={{ maxHeight: '300px', objectFit: 'contain' }}
+                />
+                <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>
+      )}
+
+      {/* 文本输出 */}
+      {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">
+            {output}
+          </pre>
+        </div>
+      )}
+
+      {/* 错误信息 */}
+      {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">
+            {error}
+          </pre>
+        </div>
+      )}
+
+      {/* 图片放大模态框 */}
+      {selectedImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+          onClick={() => setSelectedImage(null)}
+        >
+          <div className="relative max-w-[90vw] max-h-[90vh]">
+            <Image
+              src={`data:image/png;base64,${selectedImage}`}
+              alt="Chart enlarged"
+              width={1200}
+              height={900}
+              className="rounded-lg shadow-2xl"
+              style={{ maxWidth: '100%', maxHeight: '90vh', objectFit: 'contain' }}
+            />
+            <button
+              className="absolute top-2 right-2 w-8 h-8 flex items-center justify-center bg-white/90 dark:bg-gray-800/90 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedImage(null);
+              }}
+            >
+              <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Pyodide 加载状态组件
+ */
+interface PyodideLoadingProps {
+  stage: 'loading' | 'ready' | 'error';
+  message: string;
+  progress?: number;
+}
+
+export function PyodideLoading({ stage, message, progress }: PyodideLoadingProps) {
+  if (stage === 'ready') {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+      {stage === 'loading' && (
+        <>
+          <div className="relative w-5 h-5">
+            <div className="absolute inset-0 border-2 border-blue-200 dark:border-blue-700 rounded-full" />
+            <div
+              className="absolute inset-0 border-2 border-blue-500 rounded-full animate-spin"
+              style={{ borderTopColor: 'transparent', borderRightColor: 'transparent' }}
+            />
+          </div>
+          <div className="flex-1">
+            <div className="text-sm text-blue-700 dark:text-blue-300">{message}</div>
+            {progress !== undefined && (
+              <div className="mt-1 h-1.5 bg-blue-200 dark:bg-blue-800 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-blue-500 transition-all duration-300"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+      {stage === 'error' && (
+        <>
+          <div className="w-5 h-5 text-red-500">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div className="text-sm text-red-700 dark:text-red-300">{message}</div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default CodeExecutionResult;