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

README.md

@@ -1,6 +1,10 @@
 ## TODO
 
-window.matchMedia 问题，需要其他方式在布局绘制前得到屏幕宽度
+后台首页 ：
+- banner 拉伸问题
+- 图表组件高度和查询按钮越界问题
+- 磁贴组件手机视图竖排，删除“套餐”，“数量”
+- 公告查看更多跳转实现
 
 手机端支付页面样式调整为类似电商的底部支付栏
 
@@ -11,7 +15,7 @@ MDX code 块语法高亮
 全局修改断点命名
 
 页头链接完善跳转地址
-W
+
 树组件优化
 
 sse 向客户端推送通知与支付结果等事件

src/app/admin/_client/layout.tsx

@@ -55,8 +55,8 @@ export default function Layout(props: AdminLayoutProps) {
             `md:hidden`,
             `transition-opacity duration-300 ease-in-out`,
             `col-start-1 row-start-1 col-span-2 row-span-2 bg-black/50 z-10`,
-            `max-md:data-[expand=true]:opacity-100 data-[expand=false]:opacity-0`,
+            `data-[expand=true]:opacity-100 data-[expand=false]:opacity-0`,
-            `max-md:data-[expand=true]:pointer-events-auto data-[expand=false]:pointer-events-none`,
+            `data-[expand=true]:pointer-events-auto data-[expand=false]:pointer-events-none`,
           )}
           onClick={() => setNevBar(false)}
         >

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>
+                <Alert variant="done">
-                  <AlertDescription>
+                  <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',
+        default: 'text-primary bg-primary/10 *:data-[slot=alert-description]:text-primary/90',
-        primary: '',
+        done: 'text-done bg-done/10 *:data-[slot=alert-description]:text-done/90',
-        done: '',
+        warn: 'text-warn bg-warn/10 *:data-[slot=alert-description]:text-warn/90',
-        warn: 'text-warn bg-warn/10',
+        fail: 'text-fail bg-fail/10 *:data-[slot=alert-description]:text-fail/90',
-        fail: 'text-fail bg-card [&>svg]:text-current *: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}