From 20f4cc01da4158282d0779506fd5f588b3da74fb Mon Sep 17 00:00:00 2001
From: fly6516 <fly6516@outlook.com>
Date: Mon, 16 Jun 2025 22:41:48 +0800
Subject: [PATCH] refactor(creater): optimize problem-creater
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-为 edit-description-panel 和 edit-solution-panel 组件添加 Card 组件包装，提升视觉效果
- 用 CoreEditor 组件替换原有的 Textarea，增强编辑功能
- 优化组件结构，提高可维护性和可扩展性
---
 .../creater/edit-description-panel.tsx        | 113 ++++++++++--------
 .../creater/edit-solution-panel.tsx           | 113 ++++++++++--------
 2 files changed, 122 insertions(+), 104 deletions(-)

diff --git a/src/components/creater/edit-description-panel.tsx b/src/components/creater/edit-description-panel.tsx
index ef0cbcc..d34c781 100644
--- a/src/components/creater/edit-description-panel.tsx
+++ b/src/components/creater/edit-description-panel.tsx
@@ -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,57 +20,65 @@ export const EditDescriptionPanel = ({
   const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
 
   return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <Label htmlFor="title">题目标题</Label>
-        <Input
-          id="title"
-          value={title}
-          onChange={(e) => setTitle(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"}>
-        <div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
-          <Textarea
-            id="description"
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            placeholder="输入题目详细描述..."
-            className="min-h-[300px]"
-          />
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>题目描述</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="title">题目标题</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(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"}>
+            <div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
+              <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 className={viewMode === 'preview' || viewMode === 'compare' ? "block" : "hidden"}>
-          <MdxPreview source={content} />
-        </div>
-      </div>
-      
-      <Button>保存更改</Button>
-    </div>
+      </CardContent>
+    </Card>
   );
 };
\ No newline at end of file
diff --git a/src/components/creater/edit-solution-panel.tsx b/src/components/creater/edit-solution-panel.tsx
index 6f15503..bf1eb03 100644
--- a/src/components/creater/edit-solution-panel.tsx
+++ b/src/components/creater/edit-solution-panel.tsx
@@ -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,57 +20,65 @@ export const EditSolutionPanel = ({
   const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
 
   return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <Label htmlFor="solution-title">题解标题</Label>
-        <Input
-          id="solution-title"
-          value={title}
-          onChange={(e) => setTitle(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"}>
-        <div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
-          <Textarea
-            id="solution-content"
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            placeholder="输入详细题解内容..."
-            className="min-h-[300px]"
-          />
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>题目解析</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="solution-title">题解标题</Label>
+            <Input
+              id="solution-title"
+              value={title}
+              onChange={(e) => setTitle(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"}>
+            <div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
+              <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 className={viewMode === 'preview' || viewMode === 'compare' ? "block" : "hidden"}>
-          <MdxPreview source={content} />
-        </div>
-      </div>
-      
-      <Button>保存题解</Button>
-    </div>
+      </CardContent>
+    </Card>
   );
 };
\ No newline at end of file