CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2026-05-31 19:02:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(testcase): improve empty state layout and i18n

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
messages/en.json
View File

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

3
messages/zh.json
View File

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

2
src/features/problems/testcase/panel.tsx
View File

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

79
src/features/problems/testcase/table.tsx
View File

@ -2,7 +2,7 @@ import prisma from "@/lib/prisma";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { getTranslations } from "next-intl/server"; 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"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
interface TestcaseTableProps { interface TestcaseTableProps {
@ -19,48 +19,49 @@ export const TestcaseTable = async ({ problemId }: TestcaseTableProps) => {
if (testcases.length === 0) { if (testcases.length === 0) {
return ( return (
<Card> <div className="flex h-full w-full items-center justify-center p-4 text-center text-muted-foreground">
<CardContent className="p-4 text-center"> {t("Empty")}
No testcases found for this problem. </div>
</CardContent>
</Card>
); );
} }
return ( return (
<Tabs defaultValue={testcases[0].id} className="items-center px-5 py-4"> <ScrollArea className="h-full">
<TabsList className="bg-transparent p-0"> <Tabs defaultValue={testcases[0].id} className="items-center px-5 py-4">
{testcases.map((testcase, index) => ( <TabsList className="bg-transparent p-0">
<TabsTrigger {testcases.map((testcase, index) => (
key={testcase.id} <TabsTrigger
value={testcase.id} key={testcase.id}
className="data-[state=active]:bg-muted data-[state=active]:shadow-none" value={testcase.id}
> className="data-[state=active]:bg-muted data-[state=active]:shadow-none"
{t("Case")} {index + 1} >
</TabsTrigger> {t("Case")} {index + 1}
))} </TabsTrigger>
</TabsList> ))}
</TabsList>
{testcases.map((testcase) => ( {testcases.map((testcase) => (
<TabsContent key={testcase.id} value={testcase.id}> <TabsContent key={testcase.id} value={testcase.id}>
<div className="space-y-4"> <div className="space-y-4">
{testcase.inputs {testcase.inputs
.sort((a, b) => a.index - b.index) .sort((a, b) => a.index - b.index)
.map((input) => ( .map((input) => (
<div key={input.id} className="space-y-2"> <div key={input.id} className="space-y-2">
<Label>{input.name} =</Label> <Label>{input.name} =</Label>
<Input <Input
type="text" type="text"
placeholder={`Enter ${input.name}`} placeholder={`Enter ${input.name}`}
readOnly readOnly
className="bg-muted border-transparent shadow-none rounded-lg h-10" className="bg-muted border-transparent shadow-none rounded-lg h-10"
value={input.value} value={input.value}
/> />
</div> </div>
))} ))}
</div> </div>
</TabsContent> </TabsContent>
))} ))}
</Tabs> </Tabs>
<ScrollBar orientation="horizontal" />
</ScrollArea>
); );
}; };