diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index 7f82ef1..5e72909 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -2,7 +2,7 @@
definePage({
meta: {
title: '首页',
- hidden: false,
+ hideInMenu: false,
},
});
diff --git a/src/pages/demos/index.page.vue b/src/pages/demos/index.page.vue
index 369e437..e44f913 100644
--- a/src/pages/demos/index.page.vue
+++ b/src/pages/demos/index.page.vue
@@ -1,4 +1,4 @@
此页面文件仅用于在侧边栏菜单中显示示例演示分组标题
diff --git a/src/plugins/router-plugin.ts b/src/plugins/router-plugin.ts
index fc33c32..bd3df87 100644
--- a/src/plugins/router-plugin.ts
+++ b/src/plugins/router-plugin.ts
@@ -41,7 +41,7 @@ declare module 'vue-router' {
/**
* @description 是否在菜单中隐藏
*/
- hidden?: boolean;
+ hideInMenu?: boolean;
/**
* @description 菜单标题
*/
@@ -51,6 +51,13 @@ declare module 'vue-router' {
* @description 使用的布局，设置为 false 则表示不使用布局
*/
layout?: string | false;
+
+ /**
+ * @description 菜单项是否渲染为可点击链接，默认为 true
+ * - true: 使用 RouterLink 包装，可点击跳转
+ * - false: 仅渲染纯文本标签，不可点击（适用于分组标题）
+ */
+ link?: boolean;
}
}
diff --git a/src/stores/app-store.ts b/src/stores/app-store.ts
index 4ee5851..a9ed353 100644
--- a/src/stores/app-store.ts
+++ b/src/stores/app-store.ts
@@ -1,4 +1,4 @@
-import { useMediaQuery, usePreferredColorScheme } from '@vueuse/core';
+import { useLocalStorage, useMediaQuery, usePreferredColorScheme } from '@vueuse/core';
import { defineStore } from 'pinia';
import { computed, watch } from 'vue';
@@ -11,6 +11,9 @@ export const useAppStore = defineStore('app', () => {
const themeMode = useLocalStorage
('app-theme-mode', 'system');
const preferredColor = usePreferredColorScheme();
+ // 侧边栏展开/收起状态
+ const sidebarCollapsed = useLocalStorage('app-sidebar-collapsed', false);
+
// 计算实际使用的主题
const actualTheme = computed(() =>
themeMode.value === 'system'
@@ -31,16 +34,16 @@ export const useAppStore = defineStore('app', () => {
document.documentElement.classList.toggle(DARK_CLASS, isDark.value);
}
- // 设置主题
- function setTheme(mode: AppThemeMode) {
- themeMode.value = mode;
- }
-
// 循环切换主题
function cycleTheme() {
const currentIndex = APP_THEME_MODES.indexOf(themeMode.value);
const nextIndex = (currentIndex + 1) % APP_THEME_MODES.length;
- setTheme(APP_THEME_MODES[nextIndex]!);
+ themeMode.value = APP_THEME_MODES[nextIndex]!;
+ }
+
+ // 切换侧边栏展开/收起
+ function toggleSidebar() {
+ sidebarCollapsed.value = !sidebarCollapsed.value;
}
// 监听主题变化，更新 DOM
@@ -48,11 +51,11 @@ export const useAppStore = defineStore('app', () => {
return {
themeMode,
- actualTheme,
isDark,
isMobile,
- setTheme,
cycleTheme,
+ sidebarCollapsed,
+ toggleSidebar,
};
});