完善支付页面响应式设计

README.md

@@ -1,5 +1,7 @@
 ## TODO
 
+手机端支付页面样式调整为类似电商的底部支付栏
+
 MDX code 块语法高亮
 
 全部替换封装时间范围组件，检查结束时间字段手机端适配问题（需要尾部对齐）

src/app/admin/(dashboard)/_client/charts.tsx

@@ -83,7 +83,7 @@ export default function Charts() {
     <Card className="col-start-1 row-start-3 col-span-3 row-span-2">
       <CardContent className="overflow-hidden">
         <Tabs defaultValue="dynamic" className="h-full gap-4">
-          <TabsList>
+          <TabsList className="h-9">
             <TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
               {/* <Image src={mask} alt={`Mask group`} width={35} height={35} priority /> */}
               动态 IP 套餐

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>
   )
 }