feat(组件): 添加代码执行结果展示组件
- 新增 CodeExecutionResult 组件展示代码执行输出和图形 - 支持 Base64 图片渲染和点击放大查看 - 显示执行引擎（Pyodide/Piston）和执行时间 - 新增 PyodideLoading 组件显示 Python 环境加载进度 - 支持暗色主题
This commit is contained in:
gaoziman
parent
5fe0552338
commit
58d288637a
206
src/components/features/CodeExecutionResult.tsx
Normal file
206
src/components/features/CodeExecutionResult.tsx
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user