修复手机端菜单展开遮罩没有关闭的问题；修复并增强 alert 组件展示效果

src/components/composites/extract/index.tsx

@@ -70,7 +70,7 @@ export default function Extract(props: ExtractProps) {
       )}
     >
       <CardSection>
-        <Alert variant="warn" >
+        <Alert variant="warn">
           <CircleAlert/>
           <AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
         </Alert>

src/components/composites/purchase/pay.tsx

@@ -7,7 +7,7 @@ import balance from './_assets/balance.svg'
 import Image from 'next/image'
 import {useEffect, useRef, useState} from 'react'
 import {useProfileStore} from '@/components/providers/StoreProvider'
-import {Alert, AlertDescription} from '@/components/ui/alert'
+import {Alert, AlertTitle} from '@/components/ui/alert'
 import {ApiResponse, ExtraResp, ExtraReq} from '@/lib/api'
 import {toast} from 'sonner'
 import {Loader} from 'lucide-react'
@@ -172,16 +172,16 @@ export default function Pay(props: PayProps) {
               </div>
 
               {balanceEnough ? (
-                <Alert>
-                  <AlertDescription>
+                <Alert variant="done">
+                  <AlertTitle>
                     检查无误后，点击确认支付按钮完成支付
-                  </AlertDescription>
+                  </AlertTitle>
                 </Alert>
               ) : (
                 <Alert variant="fail">
-                  <AlertDescription>
+                  <AlertTitle>
                     余额不足，请先充值或选择其他支付方式
-                  </AlertDescription>
+                  </AlertTitle>
                 </Alert>
               )}
             </div>

src/components/ui/alert.tsx

@@ -8,11 +8,10 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-card text-card-foreground',
-        primary: '',
-        done: '',
-        warn: 'text-warn bg-warn/10',
-        fail: 'text-fail bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-fail/90',
+        default: 'text-primary bg-primary/10 *:data-[slot=alert-description]:text-primary/90',
+        done: 'text-done bg-done/10 *:data-[slot=alert-description]:text-done/90',
+        warn: 'text-warn bg-warn/10 *:data-[slot=alert-description]:text-warn/90',
+        fail: 'text-fail bg-fail/10 *:data-[slot=alert-description]:text-fail/90',
       },
     },
     defaultVariants: {
@@ -30,7 +29,7 @@ function Alert({
     <div
       data-slot="alert"
       role="alert"
-      className={merge(alertVariants({variant}), className, 'py-0')}
+      className={merge(alertVariants({variant}), className)}
       {...props}
     />
   )
@@ -41,7 +40,7 @@ function AlertTitle({className, ...props}: React.ComponentProps<'div'>) {
     <div
       data-slot="alert-title"
       className={merge(
-        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        'col-start-2 line-clamp-1 min-h-4 tracking-tight',
         className,
       )}
       {...props}