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 {

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 && (

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}>