feat: 更新Sidebar和Dialog组件，优化样式和布局，增强ScrollArea功能

Co-authored-by: Copilot <copilot@github.com>

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(

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}

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 />}