Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-07-04 15:50:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(creater): optimize problem-creater

Browse Source 
-为 edit-description-panel 和 edit-solution-panel 组件添加 Card 组件包装，提升视觉效果
- 用 CoreEditor 组件替换原有的 Textarea，增强编辑功能
- 优化组件结构，提高可维护性和可扩展性
This commit is contained in:
fly6516 2025-06-16 22:41:48 +08:00 committed by cfngc4594
parent 4141f0c017
commit 20f4cc01da
2 changed files with 122 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/creater/edit-description-panel.tsx
View File

@ -3,9 +3,10 @@
import { useState } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import MdxPreview from "@/components/mdx-preview";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {CoreEditor} from "@/components/core-editor";
interface EditDescriptionPanelProps {
problemId: string;
@ -19,6 +20,11 @@ export const EditDescriptionPanel = ({
const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
return (
<Card className="w-full">
<CardHeader>
<CardTitle>题目描述</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="space-y-2">
<Label htmlFor="title">题目标题</Label>
@ -55,14 +61,15 @@ export const EditDescriptionPanel = ({
<div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
<div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
<Textarea
id="description"
<div className="relative h-[600px]">
<CoreEditor
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="输入题目详细描述..."
className="min-h-[300px]"
onChange={setContent}
language="markdown"
className="absolute inset-0 rounded-md border border-input"
/>
</div>
</div>
<div className={viewMode === 'preview' || viewMode === 'compare' ? "block" : "hidden"}>
<MdxPreview source={content} />
@ -71,5 +78,7 @@ export const EditDescriptionPanel = ({
<Button>保存更改</Button>
</div>
</CardContent>
</Card>
);
};

21
src/components/creater/edit-solution-panel.tsx
View File

@ -3,9 +3,10 @@
import { useState } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import MdxPreview from "@/components/mdx-preview";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {CoreEditor} from "@/components/core-editor";
interface EditSolutionPanelProps {
problemId: string;
@ -19,6 +20,11 @@ export const EditSolutionPanel = ({
const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
return (
<Card className="w-full">
<CardHeader>
<CardTitle>题目解析</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="space-y-2">
<Label htmlFor="solution-title">题解标题</Label>
@ -55,14 +61,15 @@ export const EditSolutionPanel = ({
<div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
<div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
<Textarea
id="solution-content"
<div className="relative h-[600px]">
<CoreEditor
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="输入详细题解内容..."
className="min-h-[300px]"
onChange={setContent}
language="markdown"
className="absolute inset-0 rounded-md border border-input"
/>
</div>
</div>
<div className={viewMode === 'preview' || viewMode === 'compare' ? "block" : "hidden"}>
<MdxPreview source={content} />
@ -71,5 +78,7 @@ export const EditSolutionPanel = ({
<Button>保存题解</Button>
</div>
</CardContent>
</Card>
);
};