feat(playground): extend runCode function to include output in message props and update terminal components for output display

src/actions/docker/run.ts

@@ -107,7 +107,7 @@ function mapResultTypeToMessageType(type: ResultType): MessageType {
 export async function runCode(
   language: string,
   code: string
-): Promise<MessageProps> {
+): Promise<MessageProps & { output: string }> {
   const docker = new Dockerode({ socketPath: "/var/run/docker.sock" });
   const imageGCC = "gcc:latest";
   let container: Dockerode.Container | undefined;
@@ -126,6 +126,7 @@ export async function runCode(
       return {
         type: mapResultTypeToMessageType(result.type),
         message: result.message,
+        output: result.output,
       };
     } else {
       throw new Error(`不支持的语言: ${language}`);
@@ -135,6 +136,7 @@ export async function runCode(
     return {
       type: "error",
       message: error instanceof Error ? error.message : "未知错误",
+      output: "",
     };
   } finally {
     if (container) {

src/app/playground/components/button/run.tsx

@@ -8,7 +8,7 @@ import { useTerminalStore } from "@/store/useTerminalStore";
 
 export default function Run() {
   const { language, code } = useEditorStore();
-  const { setType, setMessage } = useTerminalStore();
+  const { setType, setMessage, setOutput } = useTerminalStore();
 
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
@@ -20,6 +20,7 @@ export default function Run() {
             const result = runCode(language, code);
             setType((await result).type);
             setMessage((await result).message);
+            setOutput((await result).output);
           } else {
             console.error("Language or code is null");
           }

src/app/playground/components/terminal.tsx

@@ -48,15 +48,15 @@ export default function Terminal() {
         </TabsTrigger>
       </TabsList>
       <div className="grow rounded-lg border border-border text-start bg-[#3e4452]">
-        <TabsContent value="terminal">
+        <TabsContent value="terminal" className="h-full">
           <Result />
         </TabsContent>
-        <TabsContent value="comment">
+        <TabsContent value="comment" className="h-full">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">
             Content for Tab 2
           </p>
         </TabsContent>
-        <TabsContent value="case">
+        <TabsContent value="case" className="h-full">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">
             Content for Tab 3
           </p>

src/app/playground/layout/terminal/result.tsx

@@ -1,9 +1,21 @@
 "use client";
 
 import { Message } from "./components/message";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { useTerminalStore } from "@/store/useTerminalStore";
 
 export default function ResultPage() {
-  const { type, message } = useTerminalStore();
+  const { type, message, output } = useTerminalStore();
-  return <>{type && message && <Message type={type} message={message} />}</>;
+  return (
+    <>
+      {type && message && (
+        <ScrollArea className="h-full bg-[#3e4452]">
+          <Message type={type} message={message} />
+          {output && (
+            <pre className="flex-grow px-4 text-sm text-white">{output}</pre>
+          )}
+        </ScrollArea>
+      )}
+    </>
+  );
 }

src/store/useTerminalStore.ts

@@ -4,6 +4,8 @@ import { TerminalState } from "@/types/terminal";
 export const useTerminalStore = create<TerminalState>((set) => ({
   type: null,
   message: null,
+  output: null,
   setType: (type) => set({ type }),
   setMessage: (message) => set({ message }),
+  setOutput: (output) => set({ output }),
 }));

src/types/terminal.ts

@@ -3,6 +3,8 @@ import { MessageType } from "@/app/playground/layout/terminal/components/message
 export interface TerminalState {
   type: MessageType | null;
   message: string | null;
+  output: string | null;
   setType: (type: MessageType) => void;
   setMessage: (message: string) => void;
+  setOutput: (output: string) => void;
 }