refactor(creater): wrap Panel with PanelLayout and ScrollArea

2025-07-04 01:10:53 +00:00 · 2025-06-20 23:36:44 +08:00 · 2025-06-20 23:36:44 +08:00 · 9b231cc5e5
commit 9b231cc5e5
parent f4b6b43c16
7 changed files with 480 additions and 434 deletions
--- 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,9 +69,14 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
  };

  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>代码模板</CardTitle>
+    <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>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
@ -102,10 +109,10 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
                  />
                </div>
              </div>
-
-          <Button onClick={handleSave}>保存代码模板</Button>
            </div>
          </CardContent>
        </Card>
+      </ScrollArea>
+    </PanelLayout>
  );
 }
--- 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,7 +104,9 @@ export default function EditDescriptionPanel({
  };

  return (
-    <Card className="w-full">
+    <PanelLayout>
+      <ScrollArea className="h-full">
+        <Card className="w-full rounded-none border-none bg-background">
          <CardHeader>
            <CardTitle>题目描述</CardTitle>
          </CardHeader>
@ -145,7 +149,8 @@ export default function EditDescriptionPanel({
            </div>

            {/* 编辑/预览切换 */}
-        <div className="flex space-x-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
                <Button
                  type="button"
                  variant={viewMode === "edit" ? "default" : "outline"}
@ -170,6 +175,10 @@ export default function EditDescriptionPanel({
                  对比
                </Button>
              </div>
+              <div className="flex items-center">
+                <Button onClick={handleSave}>保存更改</Button>
+              </div>
+            </div>

            {/* 编辑/预览区域 */}
            <div
@ -200,9 +209,9 @@ export default function EditDescriptionPanel({
                </div>
              )}
            </div>
-
-        <Button onClick={handleSave}>保存更改</Button>
          </CardContent>
        </Card>
+      </ScrollArea>
+    </PanelLayout>
  );
 }
--- 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,9 +79,16 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
  };

  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>题目详情</CardTitle>
+    <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>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
@ -132,6 +141,7 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
                </div>
              </div>

+              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <input
                    id="is-published"
@ -149,12 +159,11 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
                    是否发布
                  </Label>
                </div>
-
-          <Button type="button" onClick={handleSave}>
-            保存更改
-          </Button>
+              </div>
            </div>
          </CardContent>
        </Card>
+      </ScrollArea>
+    </PanelLayout>
  );
 }
--- 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,7 +95,9 @@ export default function EditSolutionPanel({
  };

  return (
-    <Card className="w-full">
+    <PanelLayout>
+      <ScrollArea className="h-full">
+        <Card className="w-full rounded-none border-none bg-background">
          <CardHeader>
            <CardTitle>题目解析</CardTitle>
          </CardHeader>
@ -200,5 +204,7 @@ export default function EditSolutionPanel({
            </Button>
          </CardContent>
        </Card>
+      </ScrollArea>
+    </PanelLayout>
  );
 }
--- 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,18 +184,22 @@ export default function EditTestcasePanel({
  };

  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>测试用例</CardTitle>
+    <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={handleAddTestcase}>添加测试用例</Button>
                <Button onClick={handleAITestcase} disabled={isGenerating}>
-            {isGenerating ? "生成中..." : "使用AI生成测试用例"}
+                  {isGenerating ? "生成中..." : "AI生成"}
                </Button>
+                <Button onClick={handleAddTestcase}>添加</Button>
                <Button variant="secondary" onClick={handleSaveAll}>
-            保存测试用例
+                  保存
                </Button>
              </div>
+            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            {testcases.map((tc, idx) => (
@ -220,7 +226,9 @@ export default function EditTestcasePanel({
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <Label>输入参数</Label>
-                <Button onClick={() => handleAddInput(idx)}>添加输入</Button>
+                    <Button onClick={() => handleAddInput(idx)}>
+                      添加输入
+                    </Button>
                  </div>
                  {tc.inputs.map((inp, iIdx) => (
                    <div key={iIdx} className="grid grid-cols-2 gap-4">
@ -239,7 +247,12 @@ export default function EditTestcasePanel({
                        <Input
                          value={inp.value}
                          onChange={(e) =>
-                        handleInputChange(idx, iIdx, "value", e.target.value)
+                            handleInputChange(
+                              idx,
+                              iIdx,
+                              "value",
+                              e.target.value
+                            )
                          }
                          placeholder="参数值"
                        />
@ -259,5 +272,7 @@ export default function EditTestcasePanel({
            ))}
          </CardContent>
        </Card>
+      </ScrollArea>
+    </PanelLayout>
  );
 }
--- 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} />,
  };
--- 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,
-          },
        ],
      },
      {