From 9dd4a75393a173a59b256ae905c001baf1f641a3 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 18 May 2026 16:14:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=92=8C=E6=8A=98=E5=8F=A0=E4=BE=A7=E6=A0=8F?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md   |  6 ++++++
 frontend/src/AppShell.vue | 18 ++++++++++++------
 frontend/src/styles.css   |  7 ++++++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index d69f80f..e831a40 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,11 @@
 # 项目上下文记录
 
+## 2026-05-18：修复主题按钮图标和折叠侧栏版本显示
+
+- `frontend/src/AppShell.vue` 的主题切换按钮现在根据 `themeName` 动态显示 `MoonOutline` 或 `SunnyOutline`，切换主题后图标和标题同步变化。
+- 侧边栏底部版本信息拆分为版本标签、版本号和 Power by 文案；折叠侧边栏时只保留纯版本号 `v2.0.2`，隐藏“版本：”和 Power by。
+- 已执行 `npm run build`，构建通过；未启动浏览器或 headless Chrome。
+
 ## 2026-05-18：修复登录页回车提交
 
 - `frontend/src/components/LoginView.vue` 的登录按钮改为原生 submit 类型，继续复用 `n-form` 的 `@submit.prevent` 登录流程。
diff --git a/frontend/src/AppShell.vue b/frontend/src/AppShell.vue
index 626fe3a..254fad2 100644
--- a/frontend/src/AppShell.vue
+++ b/frontend/src/AppShell.vue
@@ -22,8 +22,11 @@
         @update:value="handleMenuChange"
       />
       <div class="sider-footer">
-        <span>版本：v2.0.2</span>
-        <span>Power by：NIXEVOL</span>
+        <span class="sider-version">
+          <span class="sider-version-label">版本：</span>
+          <span class="sider-version-number">v2.0.2</span>
+        </span>
+        <span class="sider-powered">Power by：NIXEVOL</span>
       </div>
     </n-layout-sider>
 
@@ -59,8 +62,8 @@
             </n-button>
           </template>
 
-          <button class="theme-toggle" type="button" title="切换主题" @click="toggleTheme">
-            <n-icon><MoonOutline /></n-icon>
+          <button class="theme-toggle" type="button" :title="themeToggleTitle" @click="toggleTheme">
+            <n-icon><component :is="themeToggleIcon" /></n-icon>
           </button>
           <button class="restart-btn" type="button" title="重启服务" @click="restartService">
             <n-icon><PowerOutline /></n-icon>
@@ -93,14 +96,15 @@ import {
   MoonOutline,
   PowerOutline,
   ServerOutline,
-  SettingsOutline
+  SettingsOutline,
+  SunnyOutline
 } from '@vicons/ionicons5';
 
 import { apiPost, clearToken, getToken, setToken, setUnauthorizedHandler } from './api/client';
 import type { LoginResponse } from './types';
 import LoginView from './components/LoginView.vue';
 import { pageHeader, resetPageHeader, resolveHeaderValue, type PageHeaderAction } from './composables/pageHeader';
-import { toggleAppTheme } from './composables/theme';
+import { themeName, toggleAppTheme } from './composables/theme';
 
 const message = useMessage();
 const route = useRoute();
@@ -127,6 +131,8 @@ const currentTitle = computed(() => {
   return String(route.meta.title || menuOptions.find(item => item.key === activeMenu.value)?.label || '');
 });
 const pageSubtitle = computed(() => resolveHeaderValue(pageHeader.subtitle || '', ''));
+const themeToggleIcon = computed<Component>(() => (themeName.value === 'dark' ? SunnyOutline : MoonOutline));
+const themeToggleTitle = computed(() => (themeName.value === 'dark' ? '切换到浅色主题' : '切换到深色主题'));
 
 onMounted(() => {
   window.addEventListener('dragover', preventWindowFileDrop, { capture: true });
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index c099211..9c241a7 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -277,7 +277,12 @@ select {
   border-top: 1px solid var(--td-border-color-light);
 }
 
-.n-layout-sider--collapsed .sider-footer span:last-child {
+.n-layout-sider--collapsed .sider-footer {
+  padding: 10px 6px;
+}
+
+.n-layout-sider--collapsed .sider-version-label,
+.n-layout-sider--collapsed .sider-powered {
   display: none;
 }