♻️ refactor(view): System and Auth Control

packages/ui/src/custom-components/pro-table/pro-table.tsx

@@ -47,6 +47,7 @@ export interface ProTableProps<TData, TValue> {
   header?: {
     title?: React.ReactNode;
     toolbar?: React.ReactNode | React.ReactNode[];
+    hidden?: boolean;
   };
   actions?: {
     render?: (row: TData) => React.ReactNode[];
@@ -97,7 +98,7 @@ export function ProTable<
   const [rowCount, setRowCount] = useState<number>(0);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: 50,
+    pageSize: 10,
   });
   const [loading, setLoading] = useState(false);
 
@@ -208,29 +209,31 @@ export function ProTable<
 
   return (
     <div className='flex flex-col gap-4' ref={ref}>
-      <div className='flex flex-wrap-reverse items-center justify-between gap-4'>
-        <div>
-          {params ? (
-            <ColumnFilter
-              table={table}
-              params={params}
-              filters={Object.fromEntries(columnFilters.map((item) => [item.id, item.value]))}
-            />
-          ) : (
-            header?.title
-          )}
+      {!header?.hidden && (
+        <div className='flex flex-wrap-reverse items-center justify-between gap-4'>
+          <div>
+            {params ? (
+              <ColumnFilter
+                table={table}
+                params={params}
+                filters={Object.fromEntries(columnFilters.map((item) => [item.id, item.value]))}
+              />
+            ) : (
+              header?.title
+            )}
+          </div>
+          <div className='flex flex-1 items-center justify-end gap-2'>
+            <Button variant='outline' size='icon' onClick={fetchData}>
+              <RefreshCcw />
+            </Button>
+            <ColumnToggle table={table} />
+            <Button variant='outline' size='icon' onClick={reset}>
+              <ListRestart />
+            </Button>
+            {header?.toolbar}
+          </div>
         </div>
-        <div className='flex flex-1 items-center justify-end gap-2'>
-          <Button variant='outline' size='icon' onClick={fetchData}>
-            <RefreshCcw />
-          </Button>
-          <ColumnToggle table={table} />
-          <Button variant='outline' size='icon' onClick={reset}>
-            <ListRestart />
-          </Button>
-          {header?.toolbar}
-        </div>
-      </div>
+      )}
 
       {selectedCount > 0 && actions?.batchRender && (
         <Alert className='flex items-center justify-between'>