From be79d09a07d29426dfbb7c75acd9c9b7ef6e7405 Mon Sep 17 00:00:00 2001
From: DrSmoothl <1787882683@qq.com>
Date: Sat, 2 May 2026 11:42:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0Sidebar=E5=92=8CDialo?=
 =?UTF-8?q?g=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?ScrollArea=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 dashboard/src/components/layout/Sidebar.tsx |  8 +++++---
 dashboard/src/components/ui/dialog.tsx      | 12 ++++++++----
 dashboard/src/components/ui/scroll-area.tsx |  5 ++++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
index 55392b13..df28de66 100644
--- a/dashboard/src/components/layout/Sidebar.tsx
+++ b/dashboard/src/components/layout/Sidebar.tsx
@@ -29,7 +29,7 @@ export function Sidebar({
   return (
     <aside
       className={cn(
-        'fixed inset-y-0 left-0 z-50 isolate flex flex-col border-r transition-all duration-300 lg:relative lg:z-0',
+        'fixed inset-y-0 left-0 z-50 isolate flex flex-col border-r transition-all duration-300 lg:relative lg:z-0 lg:h-full',
         inheritsPageBackground ? 'bg-transparent' : 'bg-card',
         // 移动端始终显示完整宽度，桌面端根据 sidebarOpen 切换
         'w-64 lg:w-auto',
@@ -46,9 +46,11 @@ export function Sidebar({
 
       <ScrollArea className={cn(
         'relative z-10',
-        "flex-1 overflow-x-hidden",
+        "min-h-0 flex-1 overflow-x-hidden",
         !sidebarOpen && "lg:w-16"
-      )}>
+      )}
+      viewportClassName="[&>div]:!block"
+      >
         <nav
           aria-label={t('a11y.sidebarNav')}
           className={cn(
diff --git a/dashboard/src/components/ui/dialog.tsx b/dashboard/src/components/ui/dialog.tsx
index 8509d085..c140e12f 100644
--- a/dashboard/src/components/ui/dialog.tsx
+++ b/dashboard/src/components/ui/dialog.tsx
@@ -54,7 +54,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[min(calc(100vw-2rem),var(--dialog-width,32rem))] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 flex w-[min(calc(100vw-2rem),var(--dialog-width,32rem))] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col gap-4 overflow-hidden border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       onPointerDownOutside={preventOutsideClose ? (e) => e.preventDefault() : undefined}
@@ -94,13 +94,17 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
-  ({ className, children, allowHorizontalScroll = false, contentClassName, scrollbars, viewportClassName, ...props }, ref) => (
+  ({ className, children, allowHorizontalScroll = false, contentClassName, scrollbars, viewportClassName, type, ...props }, ref) => (
+    // 关键：在 flex-col 的 DialogContent 中，DialogBody 既要在内容多时撑到 max-h 上限并滚动，
+    // 又要在内容少时让 dialog 自然收缩。直接在 ScrollArea Root 上 flex-1 + min-h-0 即可：
+    // Radix Viewport 内部 wrapper 默认 display:table 会撑开自然高度，所以需要强制 block。
     <ScrollArea
       ref={ref as never}
-      className={cn("min-h-0 flex-1", className)}
+      className={cn("min-h-0 flex-1 flex flex-col", className)}
       contentClassName={cn(allowHorizontalScroll && "min-w-full w-max", contentClassName)}
       scrollbars={scrollbars ?? (allowHorizontalScroll ? "both" : "vertical")}
-      viewportClassName={cn("pr-4", viewportClassName)}
+      viewportClassName={cn("min-h-0 flex-1 pr-4 [&>div]:!block", viewportClassName)}
+      type={type ?? "always"}
       {...props}
     >
       {children}
diff --git a/dashboard/src/components/ui/scroll-area.tsx b/dashboard/src/components/ui/scroll-area.tsx
index 34f463eb..056cccae 100644
--- a/dashboard/src/components/ui/scroll-area.tsx
+++ b/dashboard/src/components/ui/scroll-area.tsx
@@ -19,7 +19,10 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport ref={viewportRef} className={cn("h-full w-full rounded-[inherit]", viewportClassName)}>
+    <ScrollAreaPrimitive.Viewport
+      ref={viewportRef}
+      className={cn("h-full w-full rounded-[inherit]", viewportClassName)}
+    >
       <div className={contentClassName}>{children}</div>
     </ScrollAreaPrimitive.Viewport>
     {scrollbars !== "horizontal" && <ScrollBar />}