fix: 修复主题按钮和折叠侧栏版本显示

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` 登录流程。

frontend/src/AppShell.vue

@@ -22,8 +22,11 @@
         @update:value="handleMenuChange"
       />
       <div class="sider-footer">
-        <span>版本：v2.0.2</span>
+        <span class="sider-version">
-        <span>Power by：NIXEVOL</span>
+          <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">
+          <button class="theme-toggle" type="button" :title="themeToggleTitle" @click="toggleTheme">
-            <n-icon><MoonOutline /></n-icon>
+            <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 });

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;
 }