frontend/src/App.css

@@ -217,7 +217,15 @@ body {
   background: rgba(10, 10, 15, 0.45);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
-  animation: fadeIn 0.2s ease;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s var(--transition-smooth);
+}
+
+.sidebar-backdrop--visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .sidebar {
@@ -232,13 +240,18 @@ body {
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   overflow: hidden;
-  animation: slideInLeft 0.3s var(--transition-smooth);
   box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4);
+  transition: transform 0.3s var(--transition-smooth);
 }
 
-@keyframes slideInLeft {
+.sidebar--collapsed {
-  from { transform: translateX(-100%); }
+  transform: translateX(-100%);
-  to { transform: translateX(0); }
+  pointer-events: none;
+}
+
+.sidebar--open {
+  transform: translateX(0);
+  pointer-events: auto;
 }
 
 .sidebar--collapsed {

frontend/src/components/SessionSidebar/index.tsx

@@ -118,8 +118,6 @@ export function SessionSidebar({
     return groups;
   }, [sessions, searchQuery]);
 
-  if (!open) return null;
-
   const groupLabels: Record<TimeGroup, string> = {
     today: t("sidebar.today"),
     yesterday: t("sidebar.yesterday"),
@@ -128,8 +126,11 @@ export function SessionSidebar({
 
   return (
     <>
-      <div className="sidebar-backdrop" onClick={onClose} />
+      <div
-      <div className="sidebar">
+        className={`sidebar-backdrop ${open ? 'sidebar-backdrop--visible' : ''}`}
+        onClick={onClose}
+      />
+      <div className={`sidebar ${open ? 'sidebar--open' : 'sidebar--collapsed'}`}>
         {/* 头部：新建 + 收起 */}
         <div className="sidebar__header">
           <button className="sidebar__new-btn" onClick={onNewSession}>