mirror of
https://github.com/cfngc4594/monaco-editor-lsp-next.git
synced 2025-07-04 01:10:53 +00:00
refactor(creater): wrap Panel with PanelLayout and ScrollArea
This commit is contained in:
parent
ecaba8f48b
commit
7cda49116e
@ -1,14 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { updateProblemTemplate } from "@/components/creater/problem-maintain";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CoreEditor } from "@/components/core-editor";
|
||||
import { Language } from "@/generated/client";
|
||||
import { toast } from "sonner";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Language } from "@/generated/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { CoreEditor } from "@/components/core-editor";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
|
||||
import { updateProblemTemplate } from "@/components/creater/problem-maintain";
|
||||
|
||||
interface Template {
|
||||
language: string;
|
||||
@ -67,45 +69,50 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>代码模板</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="language-select">编程语言</Label>
|
||||
<select
|
||||
id="language-select"
|
||||
className="block w-full p-2 border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-700"
|
||||
value={codeTemplate.language}
|
||||
onChange={(e) => handleLanguageChange(e.target.value)}
|
||||
>
|
||||
{templates.map((t) => (
|
||||
<option key={t.language} value={t.language}>
|
||||
{t.language.toUpperCase()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="code-editor">代码模板内容</Label>
|
||||
<div className="border rounded-md h-[500px]">
|
||||
<CoreEditor
|
||||
language={codeTemplate.language}
|
||||
value={codeTemplate.content}
|
||||
path={`/${problemId}.${codeTemplate.language}`}
|
||||
onChange={(value) =>
|
||||
setCodeTemplate({ ...codeTemplate, content: value || "" })
|
||||
}
|
||||
/>
|
||||
<PanelLayout>
|
||||
<ScrollArea className="h-full">
|
||||
<Card className="w-full rounded-none border-none bg-background">
|
||||
<CardHeader className="px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>代码模板</span>
|
||||
<Button onClick={handleSave}>保存</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="language-select">编程语言</Label>
|
||||
<select
|
||||
id="language-select"
|
||||
className="block w-full p-2 border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-700"
|
||||
value={codeTemplate.language}
|
||||
onChange={(e) => handleLanguageChange(e.target.value)}
|
||||
>
|
||||
{templates.map((t) => (
|
||||
<option key={t.language} value={t.language}>
|
||||
{t.language.toUpperCase()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSave}>保存代码模板</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="code-editor">代码模板内容</Label>
|
||||
<div className="border rounded-md h-[500px]">
|
||||
<CoreEditor
|
||||
language={codeTemplate.language}
|
||||
value={codeTemplate.content}
|
||||
path={`/${problemId}.${codeTemplate.language}`}
|
||||
onChange={(value) =>
|
||||
setCodeTemplate({ ...codeTemplate, content: value || "" })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ScrollArea>
|
||||
</PanelLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Locale } from "@/generated/client";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CoreEditor } from "@/components/core-editor";
|
||||
import MdxPreview from "@/components/mdx-preview";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { getProblemLocales } from "@/app/actions/getProblemLocales";
|
||||
import { Accordion } from "@/components/ui/accordion";
|
||||
import { VideoEmbed } from "@/components/content/video-embed";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
updateProblemDescription,
|
||||
updateProblemTitle,
|
||||
} from "@/components/creater/problem-maintain";
|
||||
import { Locale } from "@/generated/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import MdxPreview from "@/components/mdx-preview";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Accordion } from "@/components/ui/accordion";
|
||||
import { CoreEditor } from "@/components/core-editor";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { VideoEmbed } from "@/components/content/video-embed";
|
||||
import { getProblemLocales } from "@/app/actions/getProblemLocales";
|
||||
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default function EditDescriptionPanel({
|
||||
problemId,
|
||||
@ -102,107 +104,114 @@ export default function EditDescriptionPanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>题目描述</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 语言切换 */}
|
||||
<div className="space-y-2">
|
||||
<Label>选择语言</Label>
|
||||
<div className="flex space-x-2">
|
||||
<select
|
||||
value={currentLocale}
|
||||
onChange={(e) => setCurrentLocale(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
{locales.map((locale) => (
|
||||
<option key={locale} value={locale}>
|
||||
{locale}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Input
|
||||
placeholder="添加新语言"
|
||||
value={customLocale}
|
||||
onChange={(e) => setCustomLocale(e.target.value)}
|
||||
/>
|
||||
<Button onClick={handleAddCustomLocale}>添加</Button>
|
||||
</div>
|
||||
</div>
|
||||
<PanelLayout>
|
||||
<ScrollArea className="h-full">
|
||||
<Card className="w-full rounded-none border-none bg-background">
|
||||
<CardHeader>
|
||||
<CardTitle>题目描述</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 语言切换 */}
|
||||
<div className="space-y-2">
|
||||
<Label>选择语言</Label>
|
||||
<div className="flex space-x-2">
|
||||
<select
|
||||
value={currentLocale}
|
||||
onChange={(e) => setCurrentLocale(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
{locales.map((locale) => (
|
||||
<option key={locale} value={locale}>
|
||||
{locale}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Input
|
||||
placeholder="添加新语言"
|
||||
value={customLocale}
|
||||
onChange={(e) => setCustomLocale(e.target.value)}
|
||||
/>
|
||||
<Button onClick={handleAddCustomLocale}>添加</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 标题输入 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description-title">标题</Label>
|
||||
<Input
|
||||
id="description-title"
|
||||
value={description.title}
|
||||
onChange={(e) =>
|
||||
setDescription({ ...description, title: e.target.value })
|
||||
}
|
||||
placeholder="输入题目标题"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 编辑/预览切换 */}
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "edit" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("edit")}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "preview" ? "default" : "outline"}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === "preview" ? "edit" : "preview")
|
||||
}
|
||||
>
|
||||
{viewMode === "preview" ? "取消" : "预览"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "compare" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("compare")}
|
||||
>
|
||||
对比
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 编辑/预览区域 */}
|
||||
<div
|
||||
className={
|
||||
viewMode === "compare"
|
||||
? "grid grid-cols-2 gap-6"
|
||||
: "flex flex-col gap-6"
|
||||
}
|
||||
>
|
||||
{(viewMode === "edit" || viewMode === "compare") && (
|
||||
<div className="relative h-[600px]">
|
||||
<CoreEditor
|
||||
value={description.content}
|
||||
onChange={(newVal) =>
|
||||
setDescription({ ...description, content: newVal || "" })
|
||||
{/* 标题输入 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description-title">标题</Label>
|
||||
<Input
|
||||
id="description-title"
|
||||
value={description.title}
|
||||
onChange={(e) =>
|
||||
setDescription({ ...description, title: e.target.value })
|
||||
}
|
||||
language="markdown"
|
||||
className="absolute inset-0 rounded-md border border-input"
|
||||
placeholder="输入题目标题"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{viewMode !== "edit" && (
|
||||
<div className="prose dark:prose-invert">
|
||||
<MdxPreview
|
||||
source={description.content}
|
||||
components={{ Accordion, VideoEmbed }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSave}>保存更改</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* 编辑/预览切换 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "edit" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("edit")}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "preview" ? "default" : "outline"}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === "preview" ? "edit" : "preview")
|
||||
}
|
||||
>
|
||||
{viewMode === "preview" ? "取消" : "预览"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "compare" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("compare")}
|
||||
>
|
||||
对比
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button onClick={handleSave}>保存更改</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 编辑/预览区域 */}
|
||||
<div
|
||||
className={
|
||||
viewMode === "compare"
|
||||
? "grid grid-cols-2 gap-6"
|
||||
: "flex flex-col gap-6"
|
||||
}
|
||||
>
|
||||
{(viewMode === "edit" || viewMode === "compare") && (
|
||||
<div className="relative h-[600px]">
|
||||
<CoreEditor
|
||||
value={description.content}
|
||||
onChange={(newVal) =>
|
||||
setDescription({ ...description, content: newVal || "" })
|
||||
}
|
||||
language="markdown"
|
||||
className="absolute inset-0 rounded-md border border-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{viewMode !== "edit" && (
|
||||
<div className="prose dark:prose-invert">
|
||||
<MdxPreview
|
||||
source={description.content}
|
||||
components={{ Accordion, VideoEmbed }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ScrollArea>
|
||||
</PanelLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { toast } from "sonner";
|
||||
import { updateProblemDetail } from "@/components/creater/problem-maintain";
|
||||
import { Difficulty } from "@/generated/client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
|
||||
import { updateProblemDetail } from "@/components/creater/problem-maintain";
|
||||
|
||||
export default function EditDetailPanel({ problemId }: { problemId: string }) {
|
||||
const [problemDetails, setProblemDetails] = useState({
|
||||
@ -77,84 +79,91 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>题目详情</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="display-id">显示ID</Label>
|
||||
<Input
|
||||
id="display-id"
|
||||
type="number"
|
||||
value={problemDetails.displayId}
|
||||
onChange={(e) => handleNumberInputChange(e, "displayId")}
|
||||
placeholder="输入显示ID"
|
||||
/>
|
||||
<PanelLayout>
|
||||
<ScrollArea className="h-full">
|
||||
<Card className="w-full rounded-none border-none bg-background">
|
||||
<CardHeader className="px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>题目详情</span>
|
||||
<Button type="button" onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="difficulty-select">难度等级</Label>
|
||||
<select
|
||||
id="difficulty-select"
|
||||
className="block w-full p-2 border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-700"
|
||||
value={problemDetails.difficulty}
|
||||
onChange={handleDifficultyChange}
|
||||
>
|
||||
<option value="EASY">简单</option>
|
||||
<option value="MEDIUM">中等</option>
|
||||
<option value="HARD">困难</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="display-id">显示ID</Label>
|
||||
<Input
|
||||
id="display-id"
|
||||
type="number"
|
||||
value={problemDetails.displayId}
|
||||
onChange={(e) => handleNumberInputChange(e, "displayId")}
|
||||
placeholder="输入显示ID"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="difficulty-select">难度等级</Label>
|
||||
<select
|
||||
id="difficulty-select"
|
||||
className="block w-full p-2 border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-700"
|
||||
value={problemDetails.difficulty}
|
||||
onChange={handleDifficultyChange}
|
||||
>
|
||||
<option value="EASY">简单</option>
|
||||
<option value="MEDIUM">中等</option>
|
||||
<option value="HARD">困难</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time-limit">时间限制 (ms)</Label>
|
||||
<Input
|
||||
id="time-limit"
|
||||
type="number"
|
||||
value={problemDetails.timeLimit}
|
||||
onChange={(e) => handleNumberInputChange(e, "timeLimit")}
|
||||
placeholder="输入时间限制"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memory-limit">内存限制 (字节)</Label>
|
||||
<Input
|
||||
id="memory-limit"
|
||||
type="number"
|
||||
value={problemDetails.memoryLimit}
|
||||
onChange={(e) => handleNumberInputChange(e, "memoryLimit")}
|
||||
placeholder="输入内存限制"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time-limit">时间限制 (ms)</Label>
|
||||
<Input
|
||||
id="time-limit"
|
||||
type="number"
|
||||
value={problemDetails.timeLimit}
|
||||
onChange={(e) => handleNumberInputChange(e, "timeLimit")}
|
||||
placeholder="输入时间限制"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memory-limit">内存限制 (字节)</Label>
|
||||
<Input
|
||||
id="memory-limit"
|
||||
type="number"
|
||||
value={problemDetails.memoryLimit}
|
||||
onChange={(e) => handleNumberInputChange(e, "memoryLimit")}
|
||||
placeholder="输入内存限制"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
id="is-published"
|
||||
type="checkbox"
|
||||
checked={problemDetails.isPublished}
|
||||
onChange={(e) =>
|
||||
setProblemDetails({
|
||||
...problemDetails,
|
||||
isPublished: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2"
|
||||
/>
|
||||
<Label htmlFor="is-published" className="text-sm font-medium">
|
||||
是否发布
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button type="button" onClick={handleSave}>
|
||||
保存更改
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
id="is-published"
|
||||
type="checkbox"
|
||||
checked={problemDetails.isPublished}
|
||||
onChange={(e) =>
|
||||
setProblemDetails({
|
||||
...problemDetails,
|
||||
isPublished: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2"
|
||||
/>
|
||||
<Label htmlFor="is-published" className="text-sm font-medium">
|
||||
是否发布
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ScrollArea>
|
||||
</PanelLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Locale } from "@/generated/client";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CoreEditor } from "@/components/core-editor";
|
||||
import MdxPreview from "@/components/mdx-preview";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { getProblemLocales } from "@/app/actions/getProblemLocales";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Accordion } from "@/components/ui/accordion";
|
||||
import { CoreEditor } from "@/components/core-editor";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { VideoEmbed } from "@/components/content/video-embed";
|
||||
import { toast } from "sonner";
|
||||
import { getProblemLocales } from "@/app/actions/getProblemLocales";
|
||||
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
|
||||
import { updateProblemSolution } from "@/components/creater/problem-maintain";
|
||||
import { Locale } from "@/generated/client";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default function EditSolutionPanel({
|
||||
problemId,
|
||||
@ -93,112 +95,116 @@ export default function EditSolutionPanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>题目解析</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 语言切换 */}
|
||||
<div className="space-y-2">
|
||||
<Label>选择语言</Label>
|
||||
<div className="flex space-x-2">
|
||||
<select
|
||||
value={currentLocale}
|
||||
onChange={(e) => setCurrentLocale(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
{locales.map((locale) => (
|
||||
<option key={locale} value={locale}>
|
||||
{locale}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Input
|
||||
placeholder="添加新语言"
|
||||
value={customLocale}
|
||||
onChange={(e) => setCustomLocale(e.target.value)}
|
||||
/>
|
||||
<Button type="button" onClick={handleAddCustomLocale}>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<PanelLayout>
|
||||
<ScrollArea className="h-full">
|
||||
<Card className="w-full rounded-none border-none bg-background">
|
||||
<CardHeader>
|
||||
<CardTitle>题目解析</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 语言切换 */}
|
||||
<div className="space-y-2">
|
||||
<Label>选择语言</Label>
|
||||
<div className="flex space-x-2">
|
||||
<select
|
||||
value={currentLocale}
|
||||
onChange={(e) => setCurrentLocale(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
{locales.map((locale) => (
|
||||
<option key={locale} value={locale}>
|
||||
{locale}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Input
|
||||
placeholder="添加新语言"
|
||||
value={customLocale}
|
||||
onChange={(e) => setCustomLocale(e.target.value)}
|
||||
/>
|
||||
<Button type="button" onClick={handleAddCustomLocale}>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 标题输入 (仅展示) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="solution-title">题解标题</Label>
|
||||
<Input
|
||||
id="solution-title"
|
||||
value={solution.title}
|
||||
onChange={(e) =>
|
||||
setSolution({ ...solution, title: e.target.value })
|
||||
}
|
||||
placeholder="输入题解标题"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 编辑/预览切换 */}
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "edit" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("edit")}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "preview" ? "default" : "outline"}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === "preview" ? "edit" : "preview")
|
||||
}
|
||||
>
|
||||
{viewMode === "preview" ? "取消" : "预览"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "compare" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("compare")}
|
||||
>
|
||||
对比
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 编辑/预览区域 */}
|
||||
<div
|
||||
className={
|
||||
viewMode === "compare"
|
||||
? "grid grid-cols-2 gap-6"
|
||||
: "flex flex-col gap-6"
|
||||
}
|
||||
>
|
||||
{(viewMode === "edit" || viewMode === "compare") && (
|
||||
<div className="relative h-[600px]">
|
||||
<CoreEditor
|
||||
value={solution.content}
|
||||
onChange={(val) =>
|
||||
setSolution({ ...solution, content: val || "" })
|
||||
{/* 标题输入 (仅展示) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="solution-title">题解标题</Label>
|
||||
<Input
|
||||
id="solution-title"
|
||||
value={solution.title}
|
||||
onChange={(e) =>
|
||||
setSolution({ ...solution, title: e.target.value })
|
||||
}
|
||||
language="markdown"
|
||||
className="absolute inset-0 rounded-md border border-input"
|
||||
placeholder="输入题解标题"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{viewMode !== "edit" && (
|
||||
<div className="prose dark:prose-invert">
|
||||
<MdxPreview
|
||||
source={solution.content}
|
||||
components={{ Accordion, VideoEmbed }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button type="button" onClick={handleSave}>
|
||||
保存更改
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* 编辑/预览切换 */}
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "edit" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("edit")}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "preview" ? "default" : "outline"}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === "preview" ? "edit" : "preview")
|
||||
}
|
||||
>
|
||||
{viewMode === "preview" ? "取消" : "预览"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={viewMode === "compare" ? "default" : "outline"}
|
||||
onClick={() => setViewMode("compare")}
|
||||
>
|
||||
对比
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 编辑/预览区域 */}
|
||||
<div
|
||||
className={
|
||||
viewMode === "compare"
|
||||
? "grid grid-cols-2 gap-6"
|
||||
: "flex flex-col gap-6"
|
||||
}
|
||||
>
|
||||
{(viewMode === "edit" || viewMode === "compare") && (
|
||||
<div className="relative h-[600px]">
|
||||
<CoreEditor
|
||||
value={solution.content}
|
||||
onChange={(val) =>
|
||||
setSolution({ ...solution, content: val || "" })
|
||||
}
|
||||
language="markdown"
|
||||
className="absolute inset-0 rounded-md border border-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{viewMode !== "edit" && (
|
||||
<div className="prose dark:prose-invert">
|
||||
<MdxPreview
|
||||
source={solution.content}
|
||||
components={{ Accordion, VideoEmbed }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button type="button" onClick={handleSave}>
|
||||
保存更改
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ScrollArea>
|
||||
</PanelLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { generateAITestcase } from "@/app/actions/ai-testcase";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { toast } from "sonner";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
addProblemTestcase,
|
||||
updateProblemTestcase,
|
||||
deleteProblemTestcase,
|
||||
} from "@/components/creater/problem-maintain";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { toast } from "sonner";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { getProblemData } from "@/app/actions/getProblem";
|
||||
import { generateAITestcase } from "@/app/actions/ai-testcase";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
|
||||
|
||||
interface Testcase {
|
||||
id: string;
|
||||
@ -182,82 +184,95 @@ export default function EditTestcasePanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>测试用例</CardTitle>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button onClick={handleAddTestcase}>添加测试用例</Button>
|
||||
<Button onClick={handleAITestcase} disabled={isGenerating}>
|
||||
{isGenerating ? "生成中..." : "使用AI生成测试用例"}
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={handleSaveAll}>
|
||||
保存测试用例
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{testcases.map((tc, idx) => (
|
||||
<div key={tc.id} className="border p-4 rounded space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="font-medium">测试用例 {idx + 1}</h3>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => handleRemoveTestcase(idx)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>预期输出</Label>
|
||||
<Input
|
||||
value={tc.expectedOutput}
|
||||
onChange={(e) =>
|
||||
handleExpectedOutputChange(idx, e.target.value)
|
||||
}
|
||||
placeholder="输入预期输出"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<Label>输入参数</Label>
|
||||
<Button onClick={() => handleAddInput(idx)}>添加输入</Button>
|
||||
<PanelLayout>
|
||||
<ScrollArea className="h-full">
|
||||
<Card className="w-full rounded-none border-none bg-background">
|
||||
<CardHeader className="px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>测试用例</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button onClick={handleAITestcase} disabled={isGenerating}>
|
||||
{isGenerating ? "生成中..." : "AI生成"}
|
||||
</Button>
|
||||
<Button onClick={handleAddTestcase}>添加</Button>
|
||||
<Button variant="secondary" onClick={handleSaveAll}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
{tc.inputs.map((inp, iIdx) => (
|
||||
<div key={iIdx} className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>名称</Label>
|
||||
<Input
|
||||
value={inp.name}
|
||||
onChange={(e) =>
|
||||
handleInputChange(idx, iIdx, "name", e.target.value)
|
||||
}
|
||||
placeholder="参数名称"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>值</Label>
|
||||
<Input
|
||||
value={inp.value}
|
||||
onChange={(e) =>
|
||||
handleInputChange(idx, iIdx, "value", e.target.value)
|
||||
}
|
||||
placeholder="参数值"
|
||||
/>
|
||||
</div>
|
||||
{iIdx > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleRemoveInput(idx, iIdx)}
|
||||
>
|
||||
删除输入
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{testcases.map((tc, idx) => (
|
||||
<div key={tc.id} className="border p-4 rounded space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="font-medium">测试用例 {idx + 1}</h3>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => handleRemoveTestcase(idx)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>预期输出</Label>
|
||||
<Input
|
||||
value={tc.expectedOutput}
|
||||
onChange={(e) =>
|
||||
handleExpectedOutputChange(idx, e.target.value)
|
||||
}
|
||||
placeholder="输入预期输出"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<Label>输入参数</Label>
|
||||
<Button onClick={() => handleAddInput(idx)}>
|
||||
添加输入
|
||||
</Button>
|
||||
</div>
|
||||
{tc.inputs.map((inp, iIdx) => (
|
||||
<div key={iIdx} className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>名称</Label>
|
||||
<Input
|
||||
value={inp.name}
|
||||
onChange={(e) =>
|
||||
handleInputChange(idx, iIdx, "name", e.target.value)
|
||||
}
|
||||
placeholder="参数名称"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>值</Label>
|
||||
<Input
|
||||
value={inp.value}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
idx,
|
||||
iIdx,
|
||||
"value",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
placeholder="参数值"
|
||||
/>
|
||||
</div>
|
||||
{iIdx > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleRemoveInput(idx, iIdx)}
|
||||
>
|
||||
删除输入
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ScrollArea>
|
||||
</PanelLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,9 +11,9 @@ interface ProblemEditViewProps {
|
||||
|
||||
export const ProblemEditView = ({ problemId }: ProblemEditViewProps) => {
|
||||
const components: Record<string, React.ReactNode> = {
|
||||
detail: <EditDetailPanel problemId={problemId} />,
|
||||
description: <EditDescriptionPanel problemId={problemId} />,
|
||||
solution: <EditSolutionPanel problemId={problemId} />,
|
||||
detail: <EditDetailPanel problemId={problemId} />,
|
||||
code: <EditCodePanel problemId={problemId} />,
|
||||
testcase: <EditTestcasePanel problemId={problemId} />,
|
||||
};
|
||||
|
||||
@ -144,6 +144,13 @@ const initialProblemEditFlexLayoutJsonModel: IJsonModel = {
|
||||
id: "1",
|
||||
weight: 50,
|
||||
children: [
|
||||
{
|
||||
type: "tab",
|
||||
id: "detail",
|
||||
name: "Details",
|
||||
component: "detail",
|
||||
enableClose: false,
|
||||
},
|
||||
{
|
||||
type: "tab",
|
||||
id: "description",
|
||||
@ -158,13 +165,6 @@ const initialProblemEditFlexLayoutJsonModel: IJsonModel = {
|
||||
component: "solution",
|
||||
enableClose: false,
|
||||
},
|
||||
{
|
||||
type: "tab",
|
||||
id: "detail",
|
||||
name: "Details",
|
||||
component: "detail",
|
||||
enableClose: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user