更新样式匹配新设计方案

src/components/composites/extract/index.tsx

@@ -131,10 +131,6 @@ export default function Extract(props: ExtractProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // ======================
-  // form 中间变量
-  // ======================
-
   // ======================
   // render
   // ======================

src/components/composites/purchase/index.tsx

@@ -6,20 +6,20 @@ export default async function Purchase(props: PurchaseProps) {
 
   return (
     <div className="flex flex-col gap-4">
-      <ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>
-        <li role={`tab`}>
-          <button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
-        </li>
-        <li role={`tab`}>
-          <button className={`h-14 px-8 text-lg`}>长效静态套餐</button>
-        </li>
-        <li role={`tab`}>
-          <button className={`h-14 px-8 text-lg`}>固定套餐</button>
-        </li>
-        <li role={`tab`}>
-          <button className={`h-14 px-8 text-lg`}>定制套餐</button>
-        </li>
-      </ul>
+      {/*<ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>*/}
+      {/*  <li role={`tab`}>*/}
+      {/*    <button className={`h-14 px-8 text-lg`}>短效动态套餐</button>*/}
+      {/*  </li>*/}
+      {/*  <li role={`tab`}>*/}
+      {/*    <button className={`h-14 px-8 text-lg`}>长效静态套餐</button>*/}
+      {/*  </li>*/}
+      {/*  <li role={`tab`}>*/}
+      {/*    <button className={`h-14 px-8 text-lg`}>固定套餐</button>*/}
+      {/*  </li>*/}
+      {/*  <li role={`tab`}>*/}
+      {/*    <button className={`h-14 px-8 text-lg`}>定制套餐</button>*/}
+      {/*  </li>*/}
+      {/*</ul>*/}
       <PurchaseForm/>
     </div>
   )

src/components/data-table.tsx

@@ -35,7 +35,7 @@ export default function DataTable<T extends Record<string, unknown>>(props: Data
 
   return (<>
     {/* 数据表*/}
-    <div className={`border rounded-md relative`}>
+    <div className={`border rounded-md relative bg-card`}>
       <TableRoot>
         <TableHeader>
           {table.getHeaderGroups().map(group => (
@@ -61,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'} className={merge(props.classNames?.dataRow)}>
+            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className={merge('h-14', props.classNames?.dataRow)}>
               {row.getVisibleCells().map(cell => (
                 <TableCell key={cell.id}>
                   {flexRender(

src/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         destructive:
           "bg-fail text-fail-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-secondary hover:text-secondary-foreground",
+          "border border-input shadow-sm hover:bg-secondary hover:text-secondary-foreground bg-card",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-secondary hover:text-secondary-foreground",

src/components/ui/input.tsx

@@ -8,11 +8,11 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={merge(
-        `transition-[color,box-shadow] duration-200 ease-in-out`,
+        `transition-[color] duration-200 ease-in-out`,
         `h-10 min-w-0 w-full`,
         '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',
+        'flex rounded-md border bg-card px-3 py-1 text-base',
         'outline-none focus-visible:ring-4 ring-ring/50',
         'disabled:cursor-not-allowed disabled:opacity-50',
         'aria-invalid:ring-fail/20 aria-invalid:border-fail dark:aria-invalid:ring-fail/40 dark:bg-input/30',

src/components/ui/pagination.tsx

@@ -217,6 +217,7 @@ function PaginationLink({
       data-active={isActive}
       className={merge(
         'inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 w-9 rounded-md border border-input hover:bg-secondary hover:text-secondary-foreground',
+        `bg-card`,
         isActive && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
         className,
       )}

src/components/ui/select.tsx

@@ -42,6 +42,7 @@ function SelectTrigger({
         'aria-invalid:border-fail dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 ',
         'rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color] ',
         'outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 ',
+        'bg-card',
         {
           sm: 'h-9',
           default: 'h-10',