feat: 完成代码编写

packages/airo-ui/src/components/dialog.tsx

@@ -32,20 +32,17 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 // 扩展 DialogContentProps 接口
 interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  closeIcon?: React.ReactNode;
-  closeClassName?: string;
-}
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {}
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, closeClassName, closeIcon, children, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background 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%] rounded-0 !container fixed left-[50%] top-[50%] z-50 grid h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 gap-4 border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:rounded-lg sm:px-12 sm:py-12',
+        'bg-background 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%] rounded-0 container fixed left-[50%] top-[50%] z-50 h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-auto border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12',
         className,
       )}
       {...props}
@@ -54,7 +51,6 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Close
         className={cn(
           'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-6 top-6 rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
-          closeClassName,
         )}
       >
         <Image src={CloseSvg} alt={'close'} />

packages/airo-ui/src/components/sidebar.tsx

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { Button } from '@workspace/airo-ui/components/button';
 import { Input } from '@workspace/airo-ui/components/input';
 import { Separator } from '@workspace/airo-ui/components/separator';
-import { Sheet, SheetContent } from '@workspace/airo-ui/components/sheet';
+import { Sheet, SheetContent, SheetTitle } from '@workspace/airo-ui/components/sheet';
 import { Skeleton } from '@workspace/airo-ui/components/skeleton';
 import {
   Tooltip,
@@ -22,8 +22,8 @@ import { cn } from '@workspace/airo-ui/lib/utils';
 const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_MOBILE = '14rem';
+const SIDEBAR_WIDTH_ICON = '2rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 type SidebarContext = {
@@ -91,8 +91,8 @@ const SidebarProvider = React.forwardRef<
 
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+      return setOpenMobile((open) => !open);
+    }, [isMobile, setOpenMobile]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
@@ -190,10 +190,14 @@ const Sidebar = React.forwardRef<
     if (isMobile) {
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetTitle className={'sr-only'}>Logo</SheetTitle>
           <SheetContent
             data-sidebar='sidebar'
             data-mobile='true'
-            className='bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden'
+            className={cn(
+              'bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden',
+              className,
+            )}
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,

packages/airo-ui/src/custom-components/pro-list/column-filter.tsx

@@ -48,7 +48,7 @@ export function ColumnFilter<TData>({ table, params, filters }: ColumnFilterProp
         return (
           <Input
             key={param.key}
-            className='w-64 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
+            className='w-16 rounded-[20px] text-xs shadow-[inset_0_0_7.6px_0_#00000040] sm:w-64 sm:text-xl'
             placeholder={param.placeholder || 'Search...'}
             value={filters[param.key] || ''}
             onChange={(event) => updateFilter(param.key, event.target.value)}

packages/airo-ui/src/custom-components/pro-list/pro-list.tsx

@@ -132,7 +132,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
   const selectedCount = selectedRows.length;
 
   return (
-    <div className='flex max-w-full flex-col gap-4'>
+    <div className='flex max-w-full flex-col gap-2 sm:gap-4'>
       <div className='flex flex-wrap-reverse items-center justify-between gap-4'>
         <div>
           {params ? (
@@ -171,7 +171,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
           'rounded-xl border': data.length === 0,
         })}
       >
-        <div className='grid grid-cols-1 gap-4'>
+        <div className='grid grid-cols-1 gap-2 sm:gap-4'>
           {data.length ? (
             data.map((item, index) => {
               const isSelected = !!rowSelection[index];