From d710b8701f38fbf9ab6291de59b74f56c57c1c8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Tue, 29 Jul 2025 22:54:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=BC=B9=E7=AA=97=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ui/FloatingGlassPanel.tsx | 73 ++++++++++++++++------------
 1 file changed, 41 insertions(+), 32 deletions(-)

diff --git a/components/ui/FloatingGlassPanel.tsx b/components/ui/FloatingGlassPanel.tsx
index 324c1fc..fcf8496 100644
--- a/components/ui/FloatingGlassPanel.tsx
+++ b/components/ui/FloatingGlassPanel.tsx
@@ -21,39 +21,48 @@ export default function FloatingGlassPanel({ open, onClose, children, width = '3
   return (
     <AnimatePresence>
       {open && (
-        <motion.div
-          key={r_key}
-          className="fixed top-1/2 left-1/2 z-50 cursor-grab active:cursor-grabbing"
-          style={{ transform: 'translate(-50%, -50%)', pointerEvents: 'auto' }}
-          drag
-          dragElastic={0.2}
-          dragMomentum={false}
-          initial={{ opacity: 0, scale: 0.95, rotate: 0 }}
-          animate={{
-            opacity: 1,
-            ...bounceAnimation,
-          }}
-          exit={{ opacity: 0, scale: 0.95, rotate: 0 }}
-          transition={{
-            duration: 0.6,
-            ease: [0.19, 1, 0.22, 1],
-            scale: {
-              duration: 0.4,
-              times: [0, 0.3, 0.6, 1]
-            },
-            rotate: {
-              duration: 0.4,
-              times: [0, 0.2, 0.4, 0.6, 1]
-            }
-          }}
-        >
-          <div
-            style={{ width }}
-            className="rounded-xl backdrop-blur-md bg-white/10 border border-white/20 shadow-xl text-white p-4"
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <motion.div
+            key={r_key}
+            className="cursor-grab active:cursor-grabbing"
+            drag
+            dragElastic={0.2}
+            dragMomentum={false}
+            initial={{ opacity: 0, scale: 0.95, rotate: 0 }}
+            animate={{
+              opacity: 1,
+              ...bounceAnimation,
+            }}
+            exit={{ opacity: 0, scale: 0.95, rotate: 0 }}
+            transition={{
+              duration: 0.6,
+              ease: [0.19, 1, 0.22, 1],
+              scale: {
+                duration: 0.4,
+                times: [0, 0.3, 0.6, 1]
+              },
+              rotate: {
+                duration: 0.4,
+                times: [0, 0.2, 0.4, 0.6, 1]
+              }
+            }}
           >
-            {children}
-          </div>
-        </motion.div>
+            <div
+              style={{ width }}
+              className="rounded-xl backdrop-blur-md bg-white/10 border border-white/20 shadow-xl text-white p-4"
+            >
+              {children}
+            </div>
+          </motion.div>
+          {/* 添加遮罩层，点击时关闭面板 */}
+          <motion.div
+            className="fixed inset-0 bg-black/20 backdrop-blur-sm -z-10"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+          />
+        </div>
       )}
     </AnimatePresence>
   );