表格与页面样式调整

src/app/(root)/cust/page.tsx

@@ -9,6 +9,7 @@ import { z } from "zod"
 import { getPageCusts } from "@/actions/cust"
 import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -86,14 +87,7 @@ type FormValues = z.infer<typeof filterSchema>
 
 export default function CustPage() {
   const [filters, setFilters] = useState<FilterValues>({})
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
-  const [currentEditUser, setCurrentEditUser] = useState<User | null>(null)
-  const [depositDialog, setDepositDialog] = useState(false)
-  const [deposit, setDeposit] = useState<User | null>(null)
   const router = useRouter()
-  const [deductionDialog, setDeductionDialog] = useState(false)
-  const [deduction, setDeduction] = useState<User | null>(null)
   const { control, handleSubmit, reset } = useForm<FormValues>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
@@ -130,8 +124,8 @@ export default function CustPage() {
   }, [table])
 
   return (
-    <div className="space-y-3">
-      <form onSubmit={onFilter} className="bg-white p-4">
+    <Page>
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
             name="account"
@@ -204,6 +198,7 @@ export default function CustPage() {
               </Field>
             )}
           />
+
           <Controller
             name="created_at_start"
             control={control}
@@ -237,9 +232,7 @@ export default function CustPage() {
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
           <Auth scope={ScopeUserWrite}>
-            <Button type="button" onClick={() => setIsAddDialogOpen(true)}>
-              添加用户
-            </Button>
+            <AddUserDialog onSuccess={refreshTable} />
           </Auth>
           <Button
             type="button"
@@ -259,6 +252,7 @@ export default function CustPage() {
       <Suspense>
         <DataTable<User>
           {...table}
+          classNames={{ root: "flex-auto overflow-hidden" }}
           columns={[
             { header: "手机", accessorKey: "phone" },
             {
@@ -371,39 +365,24 @@ export default function CustPage() {
                 return (
                   <div className="flex gap-2">
                     <Auth scope={ScopeUserWriteBalanceInc}>
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          setDeposit(user)
-                          setDepositDialog(true)
-                        }}
-                      >
-                        充值
-                      </Button>
+                      <DepositDialog
+                        user={row.original}
+                        onSuccess={refreshTable}
+                      />
                     </Auth>
 
                     <Auth scope={ScopeUserWriteBalanceDec}>
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          setDeduction(user)
-                          setDeductionDialog(true)
-                        }}
-                      >
-                        扣款
-                      </Button>
+                      <DeductionDialog
+                        user={row.original}
+                        onSuccess={refreshTable}
+                      />
                     </Auth>
 
                     <Auth scope={ScopeUserWriteBalance}>
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          setCurrentEditUser(user)
-                          setIsEditDialogOpen(true)
-                        }}
-                      >
-                        修改
-                      </Button>
+                      <UpdateDialog
+                        user={row.original}
+                        onSuccess={refreshTable}
+                      />
                     </Auth>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
@@ -492,32 +471,6 @@ export default function CustPage() {
           ]}
         />
       </Suspense>
-
-      <AddUserDialog
-        open={isAddDialogOpen}
-        onOpenChange={setIsAddDialogOpen}
-        onSuccess={refreshTable}
-      />
-
-      <UpdateDialog
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        currentUser={currentEditUser}
-        onSuccess={refreshTable}
-      />
-
-      <DepositDialog
-        open={depositDialog}
-        onOpenChange={setDepositDialog}
-        currentUser={deposit}
-        onSuccess={refreshTable}
-      />
-      <DeductionDialog
-        open={deductionDialog}
-        onOpenChange={setDeductionDialog}
-        currentUser={deduction}
-        onSuccess={refreshTable}
-      />
-    </div>
+    </Page>
   )
 }