feat: 完成代码编写

apps/user/components/subscribe/purchase.tsx

@@ -1,16 +1,19 @@
 'use client';
 
-import CloseSvg from '@/components/CustomIcon/icons/close.svg';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, purchase } from '@/services/user/order';
 import { useQuery } from '@tanstack/react-query';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/airo-ui/components/dialog';
 import { Button } from '@workspace/ui/components/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@workspace/ui/components/dialog';
 import { Separator } from '@workspace/ui/components/separator';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { LoaderCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import {
   forwardRef,
@@ -114,16 +117,12 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent
-        className='rounded-0 flex h-full w-full max-w-full flex-col gap-0 overflow-hidden border-none px-[120px] py-8 sm:h-auto sm:w-[675px] sm:!rounded-[32px] sm:py-12'
-        closeIcon={<Image src={CloseSvg} alt='close' />}
-        closeClassName='right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
-      >
+      <DialogContent className='px-4 sm:h-auto sm:w-[675px] sm:py-12'>
         <DialogHeader className='p-6 pb-0'>
           <DialogTitle className='sr-only'>{t('buySubscription')}</DialogTitle>
         </DialogHeader>
         <div>
-          <div className='text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:text-center sm:text-4xl'>
+          <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
             购买套餐
           </div>
           <div>
@@ -156,7 +155,7 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
               </TabsList>
             </Tabs>
           </div>
-          <div>
+          <div className={'px-4 sm:px-0'}>
             <SubscribeDetail
               subscribe={{
                 ...subscribe,