From 9b231cc5e548dcb9d4bbd0a1cd853112a95e874c Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 20 Jun 2025 23:36:44 +0800
Subject: [PATCH] refactor(creater): wrap Panel with PanelLayout and ScrollArea

---
 src/components/creater/edit-code-panel.tsx    |  99 ++++----
 .../creater/edit-description-panel.tsx        | 225 +++++++++---------
 src/components/creater/edit-detail-panel.tsx  | 171 ++++++-------
 .../creater/edit-solution-panel.tsx           | 224 ++++++++---------
 .../creater/edit-testcase-panel.tsx           | 179 +++++++-------
 .../admin/ui/views/problem-edit-view.tsx      |   2 +-
 src/stores/flexlayout.ts                      |  14 +-
 7 files changed, 480 insertions(+), 434 deletions(-)

diff --git a/src/components/creater/edit-code-panel.tsx b/src/components/creater/edit-code-panel.tsx
index b151d54..581a497 100644
--- a/src/components/creater/edit-code-panel.tsx
+++ b/src/components/creater/edit-code-panel.tsx
@@ -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>
   );
 }
diff --git a/src/components/creater/edit-description-panel.tsx b/src/components/creater/edit-description-panel.tsx
index 1ff7456..94a93ad 100644
--- a/src/components/creater/edit-description-panel.tsx
+++ b/src/components/creater/edit-description-panel.tsx
@@ -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>
   );
 }
diff --git a/src/components/creater/edit-detail-panel.tsx b/src/components/creater/edit-detail-panel.tsx
index b044d28..1021364 100644
--- a/src/components/creater/edit-detail-panel.tsx
+++ b/src/components/creater/edit-detail-panel.tsx
@@ -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>
   );
 }
diff --git a/src/components/creater/edit-solution-panel.tsx b/src/components/creater/edit-solution-panel.tsx
index 4d92f00..1236e74 100644
--- a/src/components/creater/edit-solution-panel.tsx
+++ b/src/components/creater/edit-solution-panel.tsx
@@ -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>
   );
 }
diff --git a/src/components/creater/edit-testcase-panel.tsx b/src/components/creater/edit-testcase-panel.tsx
index 24f75d1..a534260 100644
--- a/src/components/creater/edit-testcase-panel.tsx
+++ b/src/components/creater/edit-testcase-panel.tsx
@@ -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>
   );
 }
diff --git a/src/features/admin/ui/views/problem-edit-view.tsx b/src/features/admin/ui/views/problem-edit-view.tsx
index add476f..57e17a3 100644
--- a/src/features/admin/ui/views/problem-edit-view.tsx
+++ b/src/features/admin/ui/views/problem-edit-view.tsx
@@ -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} />,
   };
diff --git a/src/stores/flexlayout.ts b/src/stores/flexlayout.ts
index 439013f..35c360e 100644
--- a/src/stores/flexlayout.ts
+++ b/src/stores/flexlayout.ts
@@ -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,
-          },
         ],
       },
       {