From 31dd4782401c75a3009573551f40af0c85461f72 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 18 May 2026 16:45:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=8E=9F=E7=94=9F=E6=94=B6=E7=BC=A9=E8=A7=A6=E5=8F=91?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md   |  7 +++++++
 frontend/src/AppShell.vue | 11 ++++-------
 frontend/src/styles.css   | 25 -------------------------
 3 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 2056e53..5a5d03d 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,12 @@
 # 项目上下文记录
 
+## 2026-05-18：恢复侧边栏原生收缩触发器
+
+- `frontend/src/AppShell.vue` 移除顶部标题栏里的自定义汉堡收缩按钮，改用 Naive UI `n-layout-sider` 的 `show-trigger="bar"` 原生触发器。
+- 侧边栏收缩状态仍写入 `localStorage.sidebarCollapsed`，刷新页面后保持用户上次的展开/收缩状态。
+- `frontend/src/styles.css` 清理自定义 `.sidebar-toggle` 样式，避免顶部标题栏出现额外按钮。
+- 已执行 `npm run build`，构建通过；未启动浏览器或 headless Chrome。
+
 ## 2026-05-18：修正折叠侧边栏菜单图标居中
 
 - `frontend/src/styles.css` 的折叠侧边栏菜单项强制改为 flex 居中布局，避免 Naive Menu 折叠时透明文本列继续占据 grid 空间导致图标偏左。
diff --git a/frontend/src/AppShell.vue b/frontend/src/AppShell.vue
index 254fad2..16bf383 100644
--- a/frontend/src/AppShell.vue
+++ b/frontend/src/AppShell.vue
@@ -7,7 +7,8 @@
       :collapsed="sidebarCollapsed"
       :collapsed-width="64"
       :width="220"
-      @update:collapsed="sidebarCollapsed = $event"
+      show-trigger="bar"
+      @update:collapsed="handleSidebarCollapsed"
     >
       <div class="brand">
         <div class="brand-mark">📊</div>
@@ -32,9 +33,6 @@
 
     <n-layout>
       <n-layout-header bordered class="topbar page-header">
-        <button class="sidebar-toggle" type="button" title="展开/收起侧边栏" @click="toggleSidebar">
-          <n-icon><MenuOutline /></n-icon>
-        </button>
         <div class="page-header-content">
           <h1>{{ currentTitle }}</h1>
           <span v-if="pageSubtitle" class="page-subtitle" :title="pageSubtitle">{{ pageSubtitle }}</span>
@@ -92,7 +90,6 @@ import {
   ConstructOutline,
   FileTrayFullOutline,
   LogOutOutline,
-  MenuOutline,
   MoonOutline,
   PowerOutline,
   ServerOutline,
@@ -173,8 +170,8 @@ function logout() {
   token.value = '';
 }
 
-function toggleSidebar() {
-  sidebarCollapsed.value = !sidebarCollapsed.value;
+function handleSidebarCollapsed(value: boolean) {
+  sidebarCollapsed.value = value;
   localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value ? 'true' : 'false');
 }
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a57b124..235e928 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -308,30 +308,6 @@ select {
   border-bottom: 1px solid var(--td-border-color-light);
 }
 
-.sidebar-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  margin-top: 2px;
-  padding: 0;
-  color: var(--td-text-color-secondary);
-  font-size: 18px;
-  line-height: 1;
-  background: none;
-  border: none;
-  border-radius: var(--td-radius-default);
-  cursor: pointer;
-  transition: all var(--td-transition);
-}
-
-.sidebar-toggle:hover {
-  color: var(--td-text-color-primary);
-  background: var(--td-bg-color-container-hover);
-}
-
 .page-header-content {
   display: flex;
   flex: 1;
@@ -397,7 +373,6 @@ select {
   background: var(--td-error-color-light);
 }
 
-.sidebar-toggle svg,
 .theme-toggle svg,
 .restart-btn svg {
   display: block;