完善账单页面，抽取公共页面组件

src/components/composites/purchase/_client/center.tsx

@@ -4,11 +4,11 @@ import {RadioGroup} from '@/components/ui/radio-group'
 import {Input} from '@/components/ui/input'
 import {Button} from '@/components/ui/button'
 import {Minus, Plus} from 'lucide-react'
-import {PurchaseFormContext, Schema} from '@/components/composites/_client/form'
+import {PurchaseFormContext, Schema} from '@/components/composites/purchase/_client/form'
 import {useContext} from 'react'
-import FormOption from '@/components/composites/_client/option'
+import FormOption from '@/components/composites/purchase/_client/option'
 import Image from 'next/image'
-import check from '../_assets/check.svg'
+import check from '@/components/composites/purchase/_assets/check.svg'
 
 export default function Center() {
 

src/components/composites/purchase/_client/form.tsx

@@ -1,9 +1,9 @@
 'use client'
 import {createContext, useContext} from 'react'
 import {useForm, UseFormReturn} from 'react-hook-form'
-import Center from '@/components/composites/_client/center'
-import Right from '@/components/composites/_client/right'
-import Left from '@/components/composites/_client/left'
+import Center from '@/components/composites/purchase/_client/center'
+import Right from '@/components/composites/purchase/_client/right'
+import Left from '@/components/composites/purchase/_client/left'
 import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'

src/components/composites/purchase/_client/left.tsx

@@ -1,7 +1,7 @@
 'use client'
 import {useState} from 'react'
 import Image from 'next/image'
-import banner from '@/components/composites/_assets/banner.webp'
+import banner from '@/components/composites/purchase/_assets/banner.webp'
 
 export type LeftProps = {
 }

src/components/composites/purchase/_client/recharge.tsx

@@ -10,11 +10,11 @@ import {Button} from '@/components/ui/button'
 import {Form, FormField} from '@/components/ui/form'
 import {useForm} from 'react-hook-form'
 import zod from 'zod'
-import FormOption from '@/components/composites/_client/option'
+import FormOption from '@/components/composites/purchase/_client/option'
 import {RadioGroup} from '@/components/ui/radio-group'
 import Image from 'next/image'
-import wechat from '../_assets/wechat.svg'
-import alipay from '../_assets/alipay.svg'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {tradeRecharge} from '@/actions/trade'
 import {toast} from 'sonner'

src/components/composites/purchase/_client/right.tsx

@@ -1,16 +1,16 @@
 'use client'
 import {useContext} from 'react'
-import {PurchaseFormContext} from '@/components/composites/_client/form'
+import {PurchaseFormContext} from '@/components/composites/purchase/_client/form'
 import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
-import FormOption from '@/components/composites/_client/option'
+import FormOption from '@/components/composites/purchase/_client/option'
 import Image from 'next/image'
-import alipay from '../_assets/alipay.svg'
-import wechat from '../_assets/wechat.svg'
-import balance from '../_assets/balance.svg'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import balance from '@/components/composites/purchase/_assets/balance.svg'
 import {Button} from '@/components/ui/button'
 import {AuthContext} from '@/components/providers/AuthProvider'
-import RechargeModal from '@/components/composites/_client/recharge'
+import RechargeModal from '@/components/composites/purchase/_client/recharge'
 
 export type RightProps = {}
 

src/components/composites/purchase/purchase.tsx

@@ -1,4 +1,4 @@
-import PurchaseForm from '@/components/composites/_client/form'
+import PurchaseForm from '@/components/composites/purchase/_client/form'
 
 export type PurchaseProps = {}
 

src/components/data-table.tsx

@@ -3,12 +3,17 @@ import {Table as TableRoot, TableBody, TableCell, TableHead, TableHeader, TableR
 import {ColumnDef, flexRender, getCoreRowModel, useReactTable} from '@tanstack/react-table'
 import {Pagination, PaginationProps} from '@/components/ui/pagination'
 import {Loader} from 'lucide-react'
+import {merge} from '@/lib/utils'
 
 export type DataTableProps<T> = {
   data: T[]
   status: 'load' | 'done' | 'fail'
   columns: ColumnDef<T>[]
   pagination: PaginationProps
+  classNames?: {
+    headRow?: string
+    dataRow?: string
+  }
 }
 
 export default function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>) {
@@ -30,7 +35,7 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
 
   return (<>
     {/* 数据表*/}
-    <div className={`border rounded-md overflow-hidden relative`}>
+    <div className={`border rounded-md relative`}>
       <TableRoot>
         <TableHeader>
           {table.getHeaderGroups().map(group => (
@@ -56,7 +61,7 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
               <TableCell colSpan={props.columns.length} className={`text-center`}>暂无数据</TableCell>
             </TableRow>
           ) : table.getRowModel().rows.map(row => (
-            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className={merge(props.classNames?.dataRow)}>
               {row.getVisibleCells().map(cell => (
                 <TableCell key={cell.id}>
                   {flexRender(

src/components/page.tsx

@@ -0,0 +1,21 @@
+import {ComponentProps, ReactNode} from 'react'
+import {merge} from '@/lib/utils'
+
+export type PageProps = {
+  mode?: 'full' | 'blank'
+}
+
+export default function Page(props: ComponentProps<'main'> & PageProps) {
+  return (
+    <main {...props} className={merge(
+      `flex-auto flex gap-4`,
+      {
+        full: `bg-white rounded-tl-xl p-4 flex-col overflow-auto`,
+        blank: `items-stretch pb-4 pr-4 overflow-hidden`,
+      }[props.mode ?? 'full'],
+      props.className,
+    )}>
+      {props.children}
+    </main>
+  )
+}

src/components/ui/input.tsx

@@ -10,7 +10,7 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
       className={merge(
         `transition-[color,box-shadow] duration-200 ease-in-out`,
         `h-10 min-w-0 w-full`,
-        ' placeholder:text-muted-foreground',
+        'placeholder:text-muted-foreground',
         'selection:bg-primary selection:text-primary-foreground',
         'flex rounded-md border bg-transparent px-3 py-1 text-base shadow-xs',
         'outline-none focus-visible:ring-4 ring-ring/50',