feat: 修改代码结构

apps/user/app/(main)/(content)/(user)/Header.tsx

@@ -18,7 +18,7 @@ export function Header() {
   const pathname = usePathname();
   const items = useMemo(() => findNavByUrl(pathname), [pathname]);
   return (
-    <header className='flex h-[84px] w-full items-center justify-between gap-2 md:hidden'>
+    <header className='box-content flex h-[84px] items-center justify-between gap-2 px-4 pt-4 md:hidden'>
       <SidebarTrigger />
       <Breadcrumb>
         <BreadcrumbList className={'text-[36px] font-semibold'}>

apps/user/app/(main)/(content)/(user)/layout.tsx

@@ -13,8 +13,8 @@ export default async function DashboardLayout({ children }: { children: React.Re
       <SidebarLeft className='w-[288px] border-r-0 bg-transparent lg:flex' />
       <SidebarInset className='relative flex-grow overflow-hidden'>
         {/*<LanguageSwitch />*/}
-        <div className='h-[calc(100vh-56px)] flex-grow gap-4 overflow-auto p-4'>
-          <Header />
+        <Header />
+        <div className='h-[calc(100vh-84px)] flex-grow gap-4 overflow-auto p-4 pt-0 sm:pt-9'>
           {children}
         </div>
       </SidebarInset>

apps/user/app/(main)/(content)/(user)/order/page.tsx

@@ -31,13 +31,13 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-3 pr-3 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)] sm:pl-16'>
+            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-5 pr-4 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)] sm:pl-16'>
               <div className={'flex justify-between'}>
                 <div>
                   <div className={'text-[#666]'}>{t('orderNo')}</div>
                   <p className='text-xs text-[#4D4D4D]'>{item.order_no}</p>
                 </div>
-                <div>
+                <div className={'hidden sm:block'}>
                   {item.status === 1 ? (
                     <>
                       <AiroButton
@@ -64,8 +64,20 @@ export default function Page() {
                     </AiroButton>
                   )}
                 </div>
+                <div className={'sm:hidden'}>
+                  <AiroButton
+                    variant={'dangerLink'}
+                    className={'min-w-0 px-0'}
+                    onClick={async () => {
+                      await closeOrder({ orderNo: item.order_no });
+                      ref.current?.refresh();
+                    }}
+                  >
+                    {t('cancelOrder')}
+                  </AiroButton>
+                </div>
               </div>
-              <CardContent className='px-0 py-3 text-sm'>
+              <CardContent className='px-0 py-3 pb-0 text-sm sm:pb-6'>
                 <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
                   <li>
                     <span className='text-[#225BA9]'>{t('name')}</span>
@@ -88,6 +100,24 @@ export default function Page() {
                     <time>{formatDate(item.created_at)}</time>
                   </li>
                 </ul>
+                <div className={'mt-2 flex justify-center sm:hidden'}>
+                  {item.status === 1 ? (
+                    <>
+                      <AiroButton variant={'primary'} className={'ml-2'} asChild>
+                        <Link key='payment' href={`/payment?order_no=${item.order_no}`}>
+                          {t('payment')}
+                        </Link>
+                      </AiroButton>
+                    </>
+                  ) : (
+                    <AiroButton
+                      variant={'default'}
+                      onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
+                    >
+                      {t('detail')}
+                    </AiroButton>
+                  )}
+                </div>
               </CardContent>
             </Card>
           );

apps/user/app/(main)/(content)/(user)/subscribe/page.tsx

@@ -38,7 +38,7 @@ export default function Page() {
         </div>
         <div
           className={
-            '-mt-5 text-right text-lg font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
+            'mt-0 text-right text-lg font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
           }
         >
           {t('description')}

apps/user/app/(main)/(content)/(user)/ticket/page.tsx

@@ -158,8 +158,8 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='overflow-hidden rounded-[32px] sm:pl-16'>
-              <CardHeader className='flex flex-row items-center justify-between gap-2 space-y-0 bg-transparent p-3 pb-0 sm:pb-3'>
+            <Card className='overflow-hidden rounded-[20px] pl-5 sm:rounded-[32px] sm:pl-16'>
+              <CardHeader className='flex flex-row items-center justify-between gap-2 space-y-0 bg-transparent p-3 pb-0 pl-0 sm:pb-3'>
                 <CardTitle>
                   <span
                     className={cn(
@@ -220,7 +220,7 @@ export default function Page() {
                 </CardDescription>
               </CardHeader>
 
-              <CardContent className='p-3 text-[10px] sm:text-sm'>
+              <CardContent className='p-3 pl-0 text-[10px] sm:text-sm'>
                 <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-3'>
                   <li>
                     <span className='font-normal text-[#225BA9]'>{t('title')}</span>

apps/user/app/auth/email/login-form.tsx

@@ -87,7 +87,7 @@ export default function LoginForm({
                     className={
                       'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
                     }
-                    placeholder='password'
+                    placeholder='Password'
                     type='password'
                     {...field}
                   />

apps/user/app/layout.tsx

@@ -108,7 +108,7 @@ export default async function RootLayout({
       <body
         suppressHydrationWarning
         // ${fontSans.variable} ${fontMono.variable}
-        className={`size-full min-h-[calc(100dvh-env(safe-area-inset-top))] font-sans ${inter.className} antialiased`}
+        className={`size-full min-h-[calc(100dvh-env(safe-area-inset-top))] ${inter.className} antialiased`}
       >
         <NextIntlClientProvider messages={messages}>
           <NextTopLoader showSpinner={false} />