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>
   );