From dbfcc8dfce84fe738a8b6194c0cff287196b3970 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 20:00:16 +0800
Subject: [PATCH] feat(playground): extend runCode function to include output
 in message props and update terminal components for output display

---
 src/actions/docker/run.ts                     |  4 +++-
 src/app/playground/components/button/run.tsx  |  3 ++-
 src/app/playground/components/terminal.tsx    |  6 +++---
 src/app/playground/layout/terminal/result.tsx | 16 ++++++++++++++--
 src/store/useTerminalStore.ts                 |  2 ++
 src/types/terminal.ts                         |  2 ++
 6 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/actions/docker/run.ts b/src/actions/docker/run.ts
index 4316ce7..2ea52f9 100644
--- a/src/actions/docker/run.ts
+++ b/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) {
diff --git a/src/app/playground/components/button/run.tsx b/src/app/playground/components/button/run.tsx
index 15d465a..9d28fd5 100644
--- a/src/app/playground/components/button/run.tsx
+++ b/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");
           }
diff --git a/src/app/playground/components/terminal.tsx b/src/app/playground/components/terminal.tsx
index 701e00e..77c66ff 100644
--- a/src/app/playground/components/terminal.tsx
+++ b/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>
diff --git a/src/app/playground/layout/terminal/result.tsx b/src/app/playground/layout/terminal/result.tsx
index c95af08..c28e661 100644
--- a/src/app/playground/layout/terminal/result.tsx
+++ b/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();
-  return <>{type && message && <Message type={type} message={message} />}</>;
+  const { type, message, output } = useTerminalStore();
+  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>
+      )}
+    </>
+  );
 }
diff --git a/src/store/useTerminalStore.ts b/src/store/useTerminalStore.ts
index 71d872b..f3b49a1 100644
--- a/src/store/useTerminalStore.ts
+++ b/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 }),
 }));
diff --git a/src/types/terminal.ts b/src/types/terminal.ts
index 2043084..02ab1ab 100644
--- a/src/types/terminal.ts
+++ b/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;
 }