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,12 +323,12 @@ function AppContent() {
         onRenameSession={renameSession}
       />
 
-      {showConfig && (
       <ConfigPanel
         config={config}
         theme={theme}
         username={user?.username}
         allScenarios={allScenarios}
+        open={showConfig}
         onUpdate={updateConfig}
         onThemeChange={handleThemeChange}
         onLogout={logout}
@@ -343,7 +343,6 @@ function AppContent() {
         }}
         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}>