From 69b9694cfeeb4df3267cdc55e8870780ca51e2c2 Mon Sep 17 00:00:00 2001
From: hhs <386998068@qq.com>
Date: Mon, 22 Jun 2026 13:02:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E2=80=9C=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E2=80=9D=E4=BE=A7=E6=A0=8F=E5=8F=8C=E9=87=8D=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          | 27 ++++++++----
 frontend/src/App.tsx                          | 41 +++++++++----------
 frontend/src/components/ConfigPanel/index.tsx | 12 +++++-
 3 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 64316d5..9c57be2 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1086,7 +1086,15 @@ body {
   background: rgba(10, 10, 15, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
-  animation: fadeIn 0.25s var(--transition-smooth);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s var(--transition-smooth);
+}
+
+.drawer-overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .drawer {
@@ -1099,8 +1107,18 @@ body {
   border-left: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
-  animation: slideInRight 0.35s var(--transition-smooth);
   box-shadow: -8px 0 40px rgba(10, 10, 15, 0.5);
+  transition: transform 0.35s var(--transition-smooth);
+}
+
+.drawer--collapsed {
+  transform: translateX(100%);
+  pointer-events: none;
+}
+
+.drawer--open {
+  transform: translateX(0);
+  pointer-events: auto;
 }
 
 .drawer__header {
@@ -1371,11 +1389,6 @@ body {
   to { opacity: 1; }
 }
 
-@keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-
 /* ---- Scrollbar ---- */
 
 ::-webkit-scrollbar {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0fcc6c4..198792e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -323,27 +323,26 @@ function AppContent() {
         onRenameSession={renameSession}
       />
 
-      {showConfig && (
-        <ConfigPanel
-          config={config}
-          theme={theme}
-          username={user?.username}
-          allScenarios={allScenarios}
-          onUpdate={updateConfig}
-          onThemeChange={handleThemeChange}
-          onLogout={logout}
-          onClose={() => setShowConfig(false)}
-          onCreateScenario={() => {
-            setShowConfig(false);
-            setShowCreateScenario(true);
-          }}
-          onEditScenario={(scenario) => {
-            setShowConfig(false);
-            setEditingScenario(scenario);
-          }}
-          onDeleteScenario={deleteScenario}
-        />
-      )}
+      <ConfigPanel
+        config={config}
+        theme={theme}
+        username={user?.username}
+        allScenarios={allScenarios}
+        open={showConfig}
+        onUpdate={updateConfig}
+        onThemeChange={handleThemeChange}
+        onLogout={logout}
+        onClose={() => setShowConfig(false)}
+        onCreateScenario={() => {
+          setShowConfig(false);
+          setShowCreateScenario(true);
+        }}
+        onEditScenario={(scenario) => {
+          setShowConfig(false);
+          setEditingScenario(scenario);
+        }}
+        onDeleteScenario={deleteScenario}
+      />
 
       {/* 创建情景 Modal */}
       {showCreateScenario && (
diff --git a/frontend/src/components/ConfigPanel/index.tsx b/frontend/src/components/ConfigPanel/index.tsx
index f7b84ca..15d75f1 100644
--- a/frontend/src/components/ConfigPanel/index.tsx
+++ b/frontend/src/components/ConfigPanel/index.tsx
@@ -14,6 +14,7 @@ interface ConfigPanelProps {
   theme: Theme;
   username?: string;
   allScenarios: ExtendedScenario[];
+  open: boolean;
   onUpdate: (partial: Partial<SessionConfig>) => void;
   onThemeChange: (theme: Theme) => void;
   onLogout?: () => void;
@@ -28,6 +29,7 @@ export function ConfigPanel({
   theme,
   username,
   allScenarios,
+  open,
   onUpdate,
   onThemeChange,
   onLogout,
@@ -59,8 +61,14 @@ export function ConfigPanel({
   };
 
   return (
-    <div className="drawer-overlay" onClick={onClose}>
-      <div className="drawer" onClick={(e) => e.stopPropagation()}>
+    <div
+      className={`drawer-overlay ${open ? 'drawer-overlay--visible' : ''}`}
+      onClick={onClose}
+    >
+      <div
+        className={`drawer ${open ? 'drawer--open' : 'drawer--collapsed'}`}
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="drawer__header">
           <span className="drawer__title">{t("settings.title")}</span>
           <button className="drawer__close" onClick={onClose}>