完善支付页面响应式设计

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

@@ -9,13 +9,14 @@ import Image from 'next/image'
 import check from '@/components/composites/purchase/_assets/check.svg'
 import {Schema} from '@/components/composites/purchase/long/form'
 import {useFormContext} from 'react-hook-form'
+import {Card} from '@/components/ui/card'
 
 export default function Center() {
   const form = useFormContext<Schema>()
   const type = form.watch('type')
 
   return (
-    <div className="flex-auto p-8 flex flex-col gap-8 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
 
       {/* 计费方式 */}
       <FormField
@@ -27,7 +28,7 @@ export default function Center() {
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className="flex gap-4">
+            className="flex gap-4 max-md:flex-col">
 
             <FormOption
               id={`${id}-2`}
@@ -166,7 +167,7 @@ export default function Center() {
       {/* 产品特性 */}
       <div className="space-y-6">
         <h3>产品特性</h3>
-        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
+        <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 gap-y-6">
           <p className="flex gap-2 items-center">
             <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
             <span className="text-sm text-gray-500">支持高并发提取</span>
@@ -205,6 +206,6 @@ export default function Center() {
           </p>
         </div>
       </div>
-    </div>
+    </Card>
   )
 }

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

@@ -41,7 +41,7 @@ export default function LongForm() {
   })
 
   return (
-    <Form form={form} className="bg-white rounded-lg flex flex-row">
+    <Form form={form} className="flex flex-col lg:flex-row gap-4">
       <LongFormContext.Provider value={{form}}>
         <Center/>
         <Right/>

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

@@ -16,6 +16,7 @@ import Link from 'next/link'
 import {merge} from '@/lib/utils'
 import {useFormContext} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/long/form'
+import {Card} from '@/components/ui/card'
 
 export default function Right() {
   const profile = useProfileStore(store => store.profile)
@@ -44,9 +45,8 @@ export default function Right() {
   }, [dailyLimit, expire, live, quota, mode])
 
   return (
-    <div className={merge(
+    <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
-      `after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
     )}>
       <h3>订单详情</h3>
       <ul className="flex flex-col gap-3">
@@ -166,6 +166,6 @@ export default function Right() {
           登录后支付
         </Link>
       )}
-    </div>
+    </Card>
   )
 }

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

@@ -9,13 +9,14 @@ import Image from 'next/image'
 import check from '@/components/composites/purchase/_assets/check.svg'
 import {useFormContext} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/short/form'
+import {Card} from '@/components/ui/card'
 
 export default function Center() {
   const form = useFormContext<Schema>()
   const type = form.watch('type')
 
   return (
-    <div className="flex-auto p-8 flex flex-col gap-8 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
 
       {/* 计费方式 */}
       <FormField<Schema, 'type'>
@@ -27,7 +28,7 @@ export default function Center() {
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className="flex gap-4">
+            className="flex gap-4 max-md:flex-col">
 
             <FormOption
               id={`${id}-2`}
@@ -166,7 +167,7 @@ export default function Center() {
       {/* 产品特性 */}
       <div className="space-y-6">
         <h3>产品特性</h3>
-        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
+        <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 md:gap-y-6">
           <p className="flex gap-2 items-center">
             <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
             <span className="text-sm text-gray-500">支持高并发提取</span>
@@ -205,6 +206,6 @@ export default function Center() {
           </p>
         </div>
       </div>
-    </div>
+    </Card>
   )
 }

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

@@ -43,7 +43,7 @@ export default function PurchaseForm(props: PurchaseFormProps) {
   })
 
   return (
-    <Form form={form} className="bg-white rounded-lg flex flex-row">
+    <Form form={form} className="flex flex-col lg:flex-row gap-4">
       <Center/>
       <Right/>
     </Form>

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

@@ -15,6 +15,7 @@ import Link from 'next/link'
 import {merge} from '@/lib/utils'
 import Pay from '@/components/composites/purchase/pay'
 import {useFormContext} from 'react-hook-form'
+import {Card} from '@/components/ui/card'
 
 export default function Right() {
   const profile = useProfileStore(store => store.profile)
@@ -55,9 +56,8 @@ export default function Right() {
   }, [dailyLimit, expire, live, quota, mode])
 
   return (
-    <div className={merge(
+    <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
-      `after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
     )}>
       <h3>订单详情</h3>
       <ul className="flex flex-col gap-3">
@@ -177,6 +177,6 @@ export default function Right() {
           登录后支付
         </Link>
       )}
-    </div>
+    </Card>
   )
 }