mirror of
https://github.com/cfngc4594/monaco-editor-lsp-next.git
synced 2025-07-04 09:20:53 +00:00
refactor(creater): optimize problem-creater
-为 edit-description-panel 和 edit-solution-panel 组件添加 Card 组件包装，提升视觉效果 - 用 CoreEditor 组件替换原有的 Textarea，增强编辑功能 - 优化组件结构，提高可维护性和可扩展性
This commit is contained in:
parent
c74446d492
commit
05c6eec53a
@ -3,9 +3,10 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import MdxPreview from "@/components/mdx-preview";
|
import MdxPreview from "@/components/mdx-preview";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import {CoreEditor} from "@/components/core-editor";
|
||||||
|
|
||||||
interface EditDescriptionPanelProps {
|
interface EditDescriptionPanelProps {
|
||||||
problemId: string;
|
problemId: string;
|
||||||
@ -19,57 +20,65 @@ export const EditDescriptionPanel = ({
|
|||||||
const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
|
const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<Card className="w-full">
|
||||||
<div className="space-y-2">
|
<CardHeader>
|
||||||
<Label htmlFor="title">题目标题</Label>
|
<CardTitle>题目描述</CardTitle>
|
||||||
<Input
|
</CardHeader>
|
||||||
id="title"
|
<CardContent>
|
||||||
value={title}
|
<div className="space-y-6">
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
<div className="space-y-2">
|
||||||
placeholder="输入题目标题"
|
<Label htmlFor="title">题目标题</Label>
|
||||||
/>
|
<Input
|
||||||
</div>
|
id="title"
|
||||||
<div className="flex space-x-2">
|
value={title}
|
||||||
<Button
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
type="button"
|
placeholder="输入题目标题"
|
||||||
variant={viewMode === 'edit' ? 'default' : 'outline'}
|
/>
|
||||||
onClick={() => setViewMode('edit')}
|
</div>
|
||||||
>
|
<div className="flex space-x-2">
|
||||||
编辑
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
<Button
|
variant={viewMode === 'edit' ? 'default' : 'outline'}
|
||||||
type="button"
|
onClick={() => setViewMode('edit')}
|
||||||
variant={viewMode === 'preview' ? 'default' : 'outline'}
|
>
|
||||||
onClick={() => setViewMode(viewMode === 'preview' ? 'edit' : 'preview')}
|
编辑
|
||||||
>
|
</Button>
|
||||||
{viewMode === 'preview' ? '取消' : '预览'}
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
<Button
|
variant={viewMode === 'preview' ? 'default' : 'outline'}
|
||||||
type="button"
|
onClick={() => setViewMode(viewMode === 'preview' ? 'edit' : 'preview')}
|
||||||
variant={viewMode === 'compare' ? 'default' : 'outline'}
|
>
|
||||||
onClick={() => setViewMode('compare')}
|
{viewMode === 'preview' ? '取消' : '预览'}
|
||||||
>
|
</Button>
|
||||||
对比
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
</div>
|
variant={viewMode === 'compare' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setViewMode('compare')}
|
||||||
<div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
|
>
|
||||||
<div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
|
对比
|
||||||
<Textarea
|
</Button>
|
||||||
id="description"
|
</div>
|
||||||
value={content}
|
|
||||||
onChange={(e) => setContent(e.target.value)}
|
<div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
|
||||||
placeholder="输入题目详细描述..."
|
<div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
|
||||||
className="min-h-[300px]"
|
<div className="relative h-[600px]">
|
||||||
/>
|
<CoreEditor
|
||||||
|
value={content}
|
||||||
|
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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button>保存更改</Button>
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
<div className={viewMode === 'preview' || viewMode === 'compare' ? "block" : "hidden"}>
|
</Card>
|
||||||
<MdxPreview source={content} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button>保存更改</Button>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@ -3,9 +3,10 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import MdxPreview from "@/components/mdx-preview";
|
import MdxPreview from "@/components/mdx-preview";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import {CoreEditor} from "@/components/core-editor";
|
||||||
|
|
||||||
interface EditSolutionPanelProps {
|
interface EditSolutionPanelProps {
|
||||||
problemId: string;
|
problemId: string;
|
||||||
@ -19,57 +20,65 @@ export const EditSolutionPanel = ({
|
|||||||
const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
|
const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<Card className="w-full">
|
||||||
<div className="space-y-2">
|
<CardHeader>
|
||||||
<Label htmlFor="solution-title">题解标题</Label>
|
<CardTitle>题目解析</CardTitle>
|
||||||
<Input
|
</CardHeader>
|
||||||
id="solution-title"
|
<CardContent>
|
||||||
value={title}
|
<div className="space-y-6">
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
<div className="space-y-2">
|
||||||
placeholder="输入题解标题"
|
<Label htmlFor="solution-title">题解标题</Label>
|
||||||
/>
|
<Input
|
||||||
</div>
|
id="solution-title"
|
||||||
<div className="flex space-x-2">
|
value={title}
|
||||||
<Button
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
type="button"
|
placeholder="输入题解标题"
|
||||||
variant={viewMode === 'edit' ? 'default' : 'outline'}
|
/>
|
||||||
onClick={() => setViewMode('edit')}
|
</div>
|
||||||
>
|
<div className="flex space-x-2">
|
||||||
编辑
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
<Button
|
variant={viewMode === 'edit' ? 'default' : 'outline'}
|
||||||
type="button"
|
onClick={() => setViewMode('edit')}
|
||||||
variant={viewMode === 'preview' ? 'default' : 'outline'}
|
>
|
||||||
onClick={() => setViewMode(viewMode === 'preview' ? 'edit' : 'preview')}
|
编辑
|
||||||
>
|
</Button>
|
||||||
{viewMode === 'preview' ? '取消' : '预览'}
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
<Button
|
variant={viewMode === 'preview' ? 'default' : 'outline'}
|
||||||
type="button"
|
onClick={() => setViewMode(viewMode === 'preview' ? 'edit' : 'preview')}
|
||||||
variant={viewMode === 'compare' ? 'default' : 'outline'}
|
>
|
||||||
onClick={() => setViewMode('compare')}
|
{viewMode === 'preview' ? '取消' : '预览'}
|
||||||
>
|
</Button>
|
||||||
对比
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
</div>
|
variant={viewMode === 'compare' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setViewMode('compare')}
|
||||||
<div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
|
>
|
||||||
<div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
|
对比
|
||||||
<Textarea
|
</Button>
|
||||||
id="solution-content"
|
</div>
|
||||||
value={content}
|
|
||||||
onChange={(e) => setContent(e.target.value)}
|
<div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
|
||||||
placeholder="输入详细题解内容..."
|
<div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
|
||||||
className="min-h-[300px]"
|
<div className="relative h-[600px]">
|
||||||
/>
|
<CoreEditor
|
||||||
|
value={content}
|
||||||
|
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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button>保存题解</Button>
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
<div className={viewMode === 'preview' || viewMode === 'compare' ? "block" : "hidden"}>
|
</Card>
|
||||||
<MdxPreview source={content} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button>保存题解</Button>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue
Block a user