refactor(creater): optimize problem-creater

-为 edit-description-panel 和 edit-solution-panel 组件添加 Card 组件包装，提升视觉效果
- 用 CoreEditor 组件替换原有的 Textarea，增强编辑功能
- 优化组件结构，提高可维护性和可扩展性

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,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
+              <div className="relative h-[600px]">
-            id="description"
+                <CoreEditor
                   value={content}
-            onChange={(e) => setContent(e.target.value)}
+                  onChange={setContent}
-            placeholder="输入题目详细描述..."
+                  language="markdown"
-            className="min-h-[300px]"
+                  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>
   );
 };

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,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
+              <div className="relative h-[600px]">
-            id="solution-content"
+                <CoreEditor
                   value={content}
-            onChange={(e) => setContent(e.target.value)}
+                  onChange={setContent}
-            placeholder="输入详细题解内容..."
+                  language="markdown"
-            className="min-h-[300px]"
+                  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>
   );
 };