From ea70c20f8eade6d9a8ad8989484df9bb606d28d4 Mon Sep 17 00:00:00 2001
From: Seefs <i@seefs.me>
Date: Mon, 8 Dec 2025 21:25:21 +0800
Subject: [PATCH 1/2] fix: sidebar color overlap

---
 web/src/components/layout/SiderBar.jsx | 2 +-
 web/src/index.css                      | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/components/layout/SiderBar.jsx b/web/src/components/layout/SiderBar.jsx
index 39d6d4489..1b6fc6924 100644
--- a/web/src/components/layout/SiderBar.jsx
+++ b/web/src/components/layout/SiderBar.jsx
@@ -377,7 +377,7 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       className='sidebar-container'
       style={{
         width: 'var(--sidebar-current-width)',
-        background: 'var(--semi-color-bg-0)',
+        background: 'var(--semi-color-bg-1)',
       }}
     >
       <SkeletonWrapper
diff --git a/web/src/index.css b/web/src/index.css
index 251bf79c6..8f0ae91dc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -108,12 +108,14 @@ code {
   display: flex;
   flex-direction: column;
   transition: width 0.3s ease;
+  background: var(--semi-color-bg-1);
+  border-right: 1px solid var(--semi-color-border);
 }
 
 .sidebar-nav {
   flex: 1;
   width: 100%;
-  background: var(--semi-color-bg-0);
+  background: var(--semi-color-bg-1);
   height: 100%;
   overflow: hidden;
   border-right: none;
@@ -191,11 +193,11 @@ code {
   padding: 12px;
   margin-top: auto;
   cursor: pointer;
-  background-color: var(--semi-color-bg-0);
+  background-color: var(--semi-color-bg-1);
   position: sticky;
   bottom: 0;
   z-index: 10;
-  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
+  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
   backdrop-filter: blur(4px);
   border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
 }

From 2e33948842b83d933fab08820568603c75bb35f7 Mon Sep 17 00:00:00 2001
From: Seefs <i@seefs.me>
Date: Tue, 9 Dec 2025 10:46:16 +0800
Subject: [PATCH 2/2] fix: Add styles only on mobile

---
 web/src/components/layout/SiderBar.jsx |  1 -
 web/src/index.css                      | 25 ++++++++++++++++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/web/src/components/layout/SiderBar.jsx b/web/src/components/layout/SiderBar.jsx
index 1b6fc6924..096ea08cc 100644
--- a/web/src/components/layout/SiderBar.jsx
+++ b/web/src/components/layout/SiderBar.jsx
@@ -377,7 +377,6 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       className='sidebar-container'
       style={{
         width: 'var(--sidebar-current-width)',
-        background: 'var(--semi-color-bg-1)',
       }}
     >
       <SkeletonWrapper
diff --git a/web/src/index.css b/web/src/index.css
index 8f0ae91dc..dff5360b9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -108,14 +108,13 @@ code {
   display: flex;
   flex-direction: column;
   transition: width 0.3s ease;
-  background: var(--semi-color-bg-1);
-  border-right: 1px solid var(--semi-color-border);
+  background: var(--semi-color-bg-0);
 }
 
 .sidebar-nav {
   flex: 1;
   width: 100%;
-  background: var(--semi-color-bg-1);
+  background: var(--semi-color-bg-0);
   height: 100%;
   overflow: hidden;
   border-right: none;
@@ -193,11 +192,11 @@ code {
   padding: 12px;
   margin-top: auto;
   cursor: pointer;
-  background-color: var(--semi-color-bg-1);
+  background-color: var(--semi-color-bg-0);
   position: sticky;
   bottom: 0;
   z-index: 10;
-  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
+  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
   backdrop-filter: blur(4px);
   border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
 }
@@ -223,6 +222,22 @@ code {
   padding-top: 12px;
 }
 
+@media (max-width: 767px) {
+  .sidebar-container {
+    background: var(--semi-color-bg-1);
+    border-right: 1px solid var(--semi-color-border);
+  }
+
+  .sidebar-nav {
+    background: var(--semi-color-bg-1);
+  }
+
+  .sidebar-collapse-button {
+    background-color: var(--semi-color-bg-1);
+    box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
+  }
+}
+
 /* ==================== 聊天界面样式 ==================== */
 .semi-chat {
   padding-top: 0 !important;