fix(testcase): improve empty state layout and i18n

This commit is contained in:
cfngc4594 2026-05-29 13:08:54 +08:00
parent 65edacea8c
commit a13e9a92e1
4 changed files with 45 additions and 42 deletions

View File

@ -213,7 +213,8 @@
},
"Testcase": {
"Table": {
"Case": "Case"
"Case": "Case",
"Empty": "No test cases found for this problem."
}
},
"WorkspaceEditorHeader": {

View File

@ -213,7 +213,8 @@
},
"Testcase": {
"Table": {
"Case": "样例"
"Case": "样例",
"Empty": "该题目暂无测试用例。"
}
},
"WorkspaceEditorHeader": {

View File

@ -11,7 +11,7 @@ interface TestcasePanelProps {
export const TestcasePanel = ({ problemId }: TestcasePanelProps) => {
return (
<PanelLayout>
<PanelLayout isScroll={false}>
<Suspense fallback={<TestcaseContentSkeleton />}>
<TestcaseContent problemId={problemId} />
</Suspense>

View File

@ -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>
);
};