feat(panel-layout): add scrollable content support with isScroll prop

- Add ScrollArea and ScrollBar components from ui/scroll-area - Introduce optional isScroll prop (defaults to true) to control scrolling - Maintain backward compatibility with existing usage
2025-07-03 15:20:50 +00:00 · 2025-06-21 13:26:27 +08:00 · 2025-06-21 13:26:27 +08:00 · b34acf37b9
commit b34acf37b9
parent d437485b22
13 changed files with 419 additions and 449 deletions
--- a/src/components/creater/edit-code-panel.tsx
+++ b/src/components/creater/edit-code-panel.tsx
@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import React, { useEffect, useState } from "react";
 import { CoreEditor } from "@/components/core-editor";
 import { getProblemData } from "@/app/actions/getProblem";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { updateProblemTemplate } from "@/components/creater/problem-maintain";
@ -70,7 +69,6 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {

  return (
    <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">
@ -112,8 +110,6 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
          </div>
        </CardContent>
      </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
    </PanelLayout>
  );
 }
--- a/src/components/creater/edit-description-panel.tsx
+++ b/src/components/creater/edit-description-panel.tsx
@ -16,7 +16,6 @@ import { CoreEditor } from "@/components/core-editor";
 import { getProblemData } from "@/app/actions/getProblem";
 import { VideoEmbed } from "@/components/content/video-embed";
 import { getProblemLocales } from "@/app/actions/getProblemLocales";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

@ -105,7 +104,6 @@ export default function EditDescriptionPanel({

  return (
    <PanelLayout>
-      <ScrollArea className="h-full">
      <Card className="w-full rounded-none border-none bg-background">
        <CardHeader>
          <CardTitle>题目描述</CardTitle>
@ -211,8 +209,6 @@ export default function EditDescriptionPanel({
          </div>
        </CardContent>
      </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
    </PanelLayout>
  );
 }
--- a/src/components/creater/edit-detail-panel.tsx
+++ b/src/components/creater/edit-detail-panel.tsx
@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { Difficulty } from "@/generated/client";
 import React, { useState, useEffect } from "react";
 import { getProblemData } from "@/app/actions/getProblem";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { updateProblemDetail } from "@/components/creater/problem-maintain";
@ -80,7 +79,6 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {

  return (
    <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">
@ -163,8 +161,6 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
          </div>
        </CardContent>
      </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
    </PanelLayout>
  );
 }
--- a/src/components/creater/edit-solution-panel.tsx
+++ b/src/components/creater/edit-solution-panel.tsx
@ -12,7 +12,6 @@ import { CoreEditor } from "@/components/core-editor";
 import { getProblemData } from "@/app/actions/getProblem";
 import { VideoEmbed } from "@/components/content/video-embed";
 import { getProblemLocales } from "@/app/actions/getProblemLocales";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { updateProblemSolution } from "@/components/creater/problem-maintain";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@ -96,7 +95,6 @@ export default function EditSolutionPanel({

  return (
    <PanelLayout>
-      <ScrollArea className="h-full">
      <Card className="w-full rounded-none border-none bg-background">
        <CardHeader>
          <CardTitle>题目解析</CardTitle>
@ -204,8 +202,6 @@ export default function EditSolutionPanel({
          </Button>
        </CardContent>
      </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
    </PanelLayout>
  );
 }
--- a/src/components/creater/edit-testcase-panel.tsx
+++ b/src/components/creater/edit-testcase-panel.tsx
@ -12,7 +12,6 @@ import { Button } from "@/components/ui/button";
 import React, { useState, useEffect } from "react";
 import { getProblemData } from "@/app/actions/getProblem";
 import { generateAITestcase } from "@/app/actions/ai-testcase";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";

@ -185,7 +184,6 @@ export default function EditTestcasePanel({

  return (
    <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">
@ -226,9 +224,7 @@ 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">
@ -247,12 +243,7 @@ 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="参数值"
                      />
@ -272,8 +263,6 @@ export default function EditTestcasePanel({
          ))}
        </CardContent>
      </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
    </PanelLayout>
  );
 }
--- a/src/features/problems/bot/components/panel.tsx
+++ b/src/features/problems/bot/components/panel.tsx
@ -11,7 +11,7 @@ interface BotPanelProps {

 export const BotPanel = ({ problemId }: BotPanelProps) => {
  return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
      <Suspense fallback={<BotContentSkeleton />}>
        <BotContent problemId={problemId} />
      </Suspense>
--- a/src/features/problems/code/components/panel.tsx
+++ b/src/features/problems/code/components/panel.tsx
@ -13,7 +13,7 @@ interface CodePanelProps {

 export const CodePanel = ({ problemId }: CodePanelProps) => {
  return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
      <div className="h-full flex flex-col">
        <CodeToolbar className="border-b" />
        <Suspense fallback={<CodeContentSkeleton />}>
--- a/src/features/problems/description/components/content.tsx
+++ b/src/features/problems/description/components/content.tsx
@ -2,7 +2,6 @@ import prisma from "@/lib/prisma";
 import { getLocale } from "next-intl/server";
 import { Skeleton } from "@/components/ui/skeleton";
 import { MdxRenderer } from "@/components/content/mdx-renderer";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import type { Locale, ProblemLocalization } from "@/generated/client";

 const getLocalizedDescription = (
@ -40,12 +39,7 @@ export const DescriptionContent = async ({

  const description = getLocalizedDescription(descriptions, locale as Locale);

-  return (
-    <ScrollArea className="h-full">
-      <MdxRenderer source={description} className="p-4 md:p-6" />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+  return <MdxRenderer source={description} className="p-4 md:p-6" />;
 };

 export const DescriptionContentSkeleton = () => {
--- a/src/features/problems/detail/components/panel.tsx
+++ b/src/features/problems/detail/components/panel.tsx
@ -16,7 +16,7 @@ export const DetailPanel = ({ submissionId }: DetailPanelProps) => {
  }

  return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
      <DetailHeader />
      <Suspense fallback={<DetailContentSkeleton />}>
        <DetailContent submissionId={submissionId} />
--- a/src/features/problems/layouts/panel-layout.tsx
+++ b/src/features/problems/layouts/panel-layout.tsx
@ -1,12 +1,27 @@
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
 interface PanelLayoutProps {
+  isScroll?: boolean;
  children: React.ReactNode;
 }

-export const PanelLayout = ({ children }: PanelLayoutProps) => {
+export const PanelLayout = ({
+  isScroll = true,
+  children,
+}: PanelLayoutProps) => {
  return (
    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
      <div className="relative flex-1">
-        <div className="absolute h-full w-full">{children}</div>
+        <div className="absolute h-full w-full">
+          {isScroll ? (
+            <ScrollArea className="h-full">
+              {children}
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          ) : (
+            children
+          )}
+        </div>
      </div>
    </div>
  );
--- a/src/features/problems/solution/components/content.tsx
+++ b/src/features/problems/solution/components/content.tsx
@ -2,7 +2,6 @@ import prisma from "@/lib/prisma";
 import { getLocale } from "next-intl/server";
 import { Skeleton } from "@/components/ui/skeleton";
 import { MdxRenderer } from "@/components/content/mdx-renderer";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import type { Locale, ProblemLocalization } from "@/generated/client";

 const getLocalizedSolution = (
@ -38,12 +37,7 @@ export const SolutionContent = async ({ problemId }: SolutionContentProps) => {

  const solution = getLocalizedSolution(solutions, locale as Locale);

-  return (
-    <ScrollArea className="h-full">
-      <MdxRenderer source={solution} className="p-4 md:p-6" />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+  return <MdxRenderer source={solution} className="p-4 md:p-6" />;
 };

 export const SolutionContentSkeleton = () => {
--- a/src/features/problems/submission/components/content.tsx
+++ b/src/features/problems/submission/components/content.tsx
@ -3,7 +3,6 @@ import { CodeXmlIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { SubmissionTable } from "@/features/problems/submission/components/table";

 interface SubmissionContentProps {
@ -45,11 +44,12 @@ export const SubmissionContent = async ({
  const session = await auth();
  const userId = session?.user?.id;

-  return (
-    <ScrollArea className="h-full px-3">
-      {userId ? <SubmissionTable problemId={problemId} /> : <LoginPromptCard />}
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
+  return userId ? (
+    <div className="px-3">
+      <SubmissionTable problemId={problemId} />
+    </div>
+  ) : (
+    <LoginPromptCard />
  );
 };

--- a/src/features/problems/testcase/content.tsx
+++ b/src/features/problems/testcase/content.tsx
@ -1,18 +1,12 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { TestcaseTable } from "@/features/problems/testcase/table";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

 interface TestcaseContentProps {
  problemId: string;
 }

 export const TestcaseContent = ({ problemId }: TestcaseContentProps) => {
-  return (
-    <ScrollArea className="h-full">
-      <TestcaseTable problemId={problemId} />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+  return <TestcaseTable problemId={problemId} />;
 };

 export const TestcaseContentSkeleton = () => {