From a13e9a92e18feed5c494038626c65fe92686373b Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 29 May 2026 13:08:54 +0800
Subject: [PATCH] fix(testcase): improve empty state layout and i18n

---
 messages/en.json                         |  3 +-
 messages/zh.json                         |  3 +-
 src/features/problems/testcase/panel.tsx |  2 +-
 src/features/problems/testcase/table.tsx | 79 ++++++++++++------------
 4 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 13523fe..3880736 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -213,7 +213,8 @@
   },
   "Testcase": {
     "Table": {
-      "Case": "Case"
+      "Case": "Case",
+      "Empty": "No test cases found for this problem."
     }
   },
   "WorkspaceEditorHeader": {
diff --git a/messages/zh.json b/messages/zh.json
index a7a02e4..c90d349 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -213,7 +213,8 @@
   },
   "Testcase": {
     "Table": {
-      "Case": "样例"
+      "Case": "样例",
+      "Empty": "该题目暂无测试用例。"
     }
   },
   "WorkspaceEditorHeader": {
diff --git a/src/features/problems/testcase/panel.tsx b/src/features/problems/testcase/panel.tsx
index 07bf19b..7da43d3 100644
--- a/src/features/problems/testcase/panel.tsx
+++ b/src/features/problems/testcase/panel.tsx
@@ -11,7 +11,7 @@ interface TestcasePanelProps {
 
 export const TestcasePanel = ({ problemId }: TestcasePanelProps) => {
   return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
       <Suspense fallback={<TestcaseContentSkeleton />}>
         <TestcaseContent problemId={problemId} />
       </Suspense>
diff --git a/src/features/problems/testcase/table.tsx b/src/features/problems/testcase/table.tsx
index fa66288..4c34861 100644
--- a/src/features/problems/testcase/table.tsx
+++ b/src/features/problems/testcase/table.tsx
@@ -2,7 +2,7 @@ import prisma from "@/lib/prisma";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { getTranslations } from "next-intl/server";
-import { Card, CardContent } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface TestcaseTableProps {
@@ -19,48 +19,49 @@ export const TestcaseTable = async ({ problemId }: TestcaseTableProps) => {
 
   if (testcases.length === 0) {
     return (
-      <Card>
-        <CardContent className="p-4 text-center">
-          No testcases found for this problem.
-        </CardContent>
-      </Card>
+      <div className="flex h-full w-full items-center justify-center p-4 text-center text-muted-foreground">
+        {t("Empty")}
+      </div>
     );
   }
 
   return (
-    <Tabs defaultValue={testcases[0].id} className="items-center px-5 py-4">
-      <TabsList className="bg-transparent p-0">
-        {testcases.map((testcase, index) => (
-          <TabsTrigger
-            key={testcase.id}
-            value={testcase.id}
-            className="data-[state=active]:bg-muted data-[state=active]:shadow-none"
-          >
-            {t("Case")} {index + 1}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+    <ScrollArea className="h-full">
+      <Tabs defaultValue={testcases[0].id} className="items-center px-5 py-4">
+        <TabsList className="bg-transparent p-0">
+          {testcases.map((testcase, index) => (
+            <TabsTrigger
+              key={testcase.id}
+              value={testcase.id}
+              className="data-[state=active]:bg-muted data-[state=active]:shadow-none"
+            >
+              {t("Case")} {index + 1}
+            </TabsTrigger>
+          ))}
+        </TabsList>
 
-      {testcases.map((testcase) => (
-        <TabsContent key={testcase.id} value={testcase.id}>
-          <div className="space-y-4">
-            {testcase.inputs
-              .sort((a, b) => a.index - b.index)
-              .map((input) => (
-                <div key={input.id} className="space-y-2">
-                  <Label>{input.name} =</Label>
-                  <Input
-                    type="text"
-                    placeholder={`Enter ${input.name}`}
-                    readOnly
-                    className="bg-muted border-transparent shadow-none rounded-lg h-10"
-                    value={input.value}
-                  />
-                </div>
-              ))}
-          </div>
-        </TabsContent>
-      ))}
-    </Tabs>
+        {testcases.map((testcase) => (
+          <TabsContent key={testcase.id} value={testcase.id}>
+            <div className="space-y-4">
+              {testcase.inputs
+                .sort((a, b) => a.index - b.index)
+                .map((input) => (
+                  <div key={input.id} className="space-y-2">
+                    <Label>{input.name} =</Label>
+                    <Input
+                      type="text"
+                      placeholder={`Enter ${input.name}`}
+                      readOnly
+                      className="bg-muted border-transparent shadow-none rounded-lg h-10"
+                      value={input.value}
+                    />
+                  </div>
+                ))}
+            </div>
+          </TabsContent>
+        ))}
+      </Tabs>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   );
 };