修复聊天页面渲染逻辑

app/styles/components/chat-with-llm/sidebar.css

@@ -68,25 +68,85 @@
 
 /* ========== 响应式设计 ========== */
 
-/* 平板和手机端侧边栏 - 作用域：屏幕宽度小于768px时的侧边栏 */
-@media (max-width: 768px) {
+/* 大屏幕 - 1200px以上 */
+@media (min-width: 1200px) {
     .ant-layout-sider {
-        position: fixed !important;
-        /* 固定定位 */
-        left: 0;
-        /* 贴左边 */
-        top: 0;
-        /* 贴顶部 */
-        bottom: 0;
-        /* 贴底部 */
-        z-index: 1000;
-        /* 层级 */
+        position: relative !important;
+    }
+}
+
+/* 中等屏幕 - 992px到1199px */
+@media (max-width: 1199px) and (min-width: 992px) {
+    .ant-layout-sider {
+        width: 200px !important;
+        min-width: 200px !important;
+        max-width: 200px !important;
     }
 
-    /* 折叠状态的侧边栏 - 作用域：手机端折叠时隐藏侧边栏 */
     .ant-layout-sider.ant-layout-sider-collapsed {
-        left: -200px;
-        /* 向左移出屏幕 */
+        width: 60px !important;
+        min-width: 60px !important;
+        max-width: 60px !important;
+    }
+}
+
+/* 平板屏幕 - 768px到991px */
+@media (max-width: 991px) and (min-width: 768px) {
+    .ant-layout-sider {
+        position: fixed !important;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1000;
+        width: 240px !important;
+        min-width: 240px !important;
+        max-width: 240px !important;
+        transform: translateX(0);
+        transition: transform 0.3s ease;
+    }
+
+    .ant-layout-sider.ant-layout-sider-collapsed {
+        transform: translateX(-100%);
+    }
+}
+
+/* 手机端 - 768px以下 */
+@media (max-width: 767px) {
+    .ant-layout-sider {
+        position: fixed !important;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1000;
+        width: 280px !important;
+        min-width: 280px !important;
+        max-width: 280px !important;
+        transform: translateX(0);
+        transition: transform 0.3s ease;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .ant-layout-sider.ant-layout-sider-collapsed {
+        transform: translateX(-100%);
+    }
+
+    /* 手机端菜单项调整 */
+    .chat-sidebar-menu .ant-menu-item {
+        padding: 12px 16px;
+        margin: 6px 0;
+    }
+
+    .chat-sidebar-menu .ant-menu-item .ant-menu-title-content span {
+        font-size: 16px;
+    }
+}
+
+/* 小手机 - 480px以下 */
+@media (max-width: 479px) {
+    .ant-layout-sider {
+        width: 100vw !important;
+        min-width: 100vw !important;
+        max-width: 100vw !important;
     }
 }