From c0a82400082934a2e0401a522d7f86089f4811bb Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 20:29:09 +0800
Subject: [PATCH] feat(playground): add syntax highlighting to output display
 and update UI components for localization

---
 package.json                                             | 2 ++
 src/actions/docker/run.ts                                | 8 +++++++-
 src/app/playground/components/banner.tsx                 | 2 +-
 src/app/playground/components/button/run.tsx             | 2 +-
 src/app/playground/components/chat.tsx                   | 2 +-
 src/app/playground/components/nav.tsx                    | 2 +-
 src/app/playground/components/terminal.tsx               | 6 +++---
 .../playground/layout/terminal/components/message.tsx    | 2 +-
 src/app/playground/layout/terminal/result.tsx            | 9 +++++++--
 9 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 5d5ccd9..bc42897 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-resizable-panels": "^2.1.7",
+    "react-syntax-highlighter": "^15.6.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "vscode-languageclient": "~8.1.0",
@@ -50,6 +51,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
     "postcss": "^8",
diff --git a/src/actions/docker/run.ts b/src/actions/docker/run.ts
index 2ea52f9..2a4ece0 100644
--- a/src/actions/docker/run.ts
+++ b/src/actions/docker/run.ts
@@ -58,10 +58,15 @@ async function getOutputAndResultType(
 ): Promise<RunCodeResult> {
   return new Promise((resolve, reject) => {
     let output = "";
+
     stream.on("data", (chunk) => {
+      console.debug("Chunk received:", Buffer.from(chunk).toString("hex"));
       output += chunk.toString("utf8");
     });
+
     stream.on("end", () => {
+      console.debug("Final output:", output);
+
       const isSuccessful = !output.includes("error:");
       const message = isSuccessful
         ? "运行成功：编译成功"
@@ -69,11 +74,12 @@ async function getOutputAndResultType(
 
       resolve({
         success: isSuccessful,
-        output,
+        output: output.replace(/[^\x20-\x7E\n\r]/g, ""), // 移除非打印字符
         message,
         type: isSuccessful ? ResultType.Success : ResultType.CompilationError,
       });
     });
+
     stream.on("error", (err) => {
       reject(err);
     });
diff --git a/src/app/playground/components/banner.tsx b/src/app/playground/components/banner.tsx
index 29ff797..545cca7 100644
--- a/src/app/playground/components/banner.tsx
+++ b/src/app/playground/components/banner.tsx
@@ -6,7 +6,7 @@ export default function Banner() {
       <p className="flex justify-center text-sm">
         <a href="https://github.com/NGC2207/judge4c" className="group">
           <span className="me-1 text-base leading-none">✨</span>
-          Introducing to Judge4c
+          了解更多关于 Judge4c 的信息
           <ArrowRight
             className="-mt-0.5 ms-2 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
             size={16}
diff --git a/src/app/playground/components/button/run.tsx b/src/app/playground/components/button/run.tsx
index 9d28fd5..d1e4952 100644
--- a/src/app/playground/components/button/run.tsx
+++ b/src/app/playground/components/button/run.tsx
@@ -32,7 +32,7 @@ export default function Run() {
           strokeWidth={2}
           aria-hidden="true"
         />
-        Run
+        运行
       </Button>
     </div>
   );
diff --git a/src/app/playground/components/chat.tsx b/src/app/playground/components/chat.tsx
index 2381efb..d308c6d 100644
--- a/src/app/playground/components/chat.tsx
+++ b/src/app/playground/components/chat.tsx
@@ -21,7 +21,7 @@ export default function Chat() {
   return (
     <div className="h-full w-full flex flex-col border sm:rounded-lg shadow-md overflow-hidden transition-all duration-200 ease-out">
       <ExpandableChatHeader className="flex-col text-center justify-center border-[#3e4452] py-3">
-        <h1 className="text-xl font-semibold">Chat with AI Assistant ✨</h1>
+        <h1 className="text-xl font-semibold">与 AI 助教交谈 ✨</h1>
       </ExpandableChatHeader>
       <ExpandableChatBody>
         <ChatMessageList>
diff --git a/src/app/playground/components/nav.tsx b/src/app/playground/components/nav.tsx
index ac730b5..161ed0a 100644
--- a/src/app/playground/components/nav.tsx
+++ b/src/app/playground/components/nav.tsx
@@ -20,7 +20,7 @@ export default function Nav() {
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbPage>Playground</BreadcrumbPage>
+          <BreadcrumbPage>训练场</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
diff --git a/src/app/playground/components/terminal.tsx b/src/app/playground/components/terminal.tsx
index 77c66ff..1f33337 100644
--- a/src/app/playground/components/terminal.tsx
+++ b/src/app/playground/components/terminal.tsx
@@ -20,7 +20,7 @@ export default function Terminal() {
             strokeWidth={2}
             aria-hidden="true"
           />
-          Terminal
+          终端
         </TabsTrigger>
         <TabsTrigger
           value="comment"
@@ -32,7 +32,7 @@ export default function Terminal() {
             strokeWidth={2}
             aria-hidden="true"
           />
-          Comment
+          评分
         </TabsTrigger>
         <TabsTrigger
           value="case"
@@ -44,7 +44,7 @@ export default function Terminal() {
             strokeWidth={2}
             aria-hidden="true"
           />
-          Testcase
+          测试用例
         </TabsTrigger>
       </TabsList>
       <div className="grow rounded-lg border border-border text-start bg-[#3e4452]">
diff --git a/src/app/playground/layout/terminal/components/message.tsx b/src/app/playground/layout/terminal/components/message.tsx
index 0ab6972..aea4d88 100644
--- a/src/app/playground/layout/terminal/components/message.tsx
+++ b/src/app/playground/layout/terminal/components/message.tsx
@@ -41,7 +41,7 @@ export function Message({ type, message }: MessageProps) {
   const { icon: Icon, colorClass } = messageTypeIconMap[type];
 
   return (
-    <div className="px-4 py-1">
+    <div className="px-4 py-1 bg-[#3e4452] pb-2">
       <p className="grow text-sm">
         <Icon
           className={`-mt-0.5 me-3 inline-flex ${colorClass}`}
diff --git a/src/app/playground/layout/terminal/result.tsx b/src/app/playground/layout/terminal/result.tsx
index c28e661..dbc890b 100644
--- a/src/app/playground/layout/terminal/result.tsx
+++ b/src/app/playground/layout/terminal/result.tsx
@@ -3,16 +3,21 @@
 import { Message } from "./components/message";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useTerminalStore } from "@/store/useTerminalStore";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 export default function ResultPage() {
   const { type, message, output } = useTerminalStore();
+
   return (
     <>
       {type && message && (
-        <ScrollArea className="h-full bg-[#3e4452]">
+        <ScrollArea className="h-full bg-[#272B33]">
           <Message type={type} message={message} />
           {output && (
-            <pre className="flex-grow px-4 text-sm text-white">{output}</pre>
+            <SyntaxHighlighter language="bash" style={oneDark}>
+              {output}
+            </SyntaxHighlighter>
           )}
         </ScrollArea>
       )}