feat(store): 重构应用状态管理，移除旧的 app-store 并引入 app-store-auto-imports

src/stores/app-store-auto-imports.ts

@@ -0,0 +1,42 @@
+import { useLocalStorage, useMediaQuery } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { computed } from 'vue';
+
+// >>>>>
+// https://vueuse.org/core/useColorMode/#advanced-usage
+const { system, store: themeMode } = useColorMode({
+  modes: { light: '', dark: 'app-dark', auto: '' },
+  disableTransition: false,
+});
+const { state, next: cycleTheme } = useCycleList(['light', 'dark', 'auto'] as const, {
+  initialValue: themeMode,
+});
+watchEffect(() => (themeMode.value = state.value));
+export type AppThemeMode = typeof themeMode.value;
+// <<<<<
+
+export const useAppStore = defineStore('app', () => {
+  // 侧边栏展开/收起状态
+  const sidebarCollapsed = useLocalStorage<boolean>('app-sidebar-collapsed', false);
+  const toggleSidebar = useToggle(sidebarCollapsed);
+
+  // 主题模式
+  const actualTheme = computed(() => (themeMode.value === 'auto' ? system.value : themeMode.value));
+  const isDark = computed(() => actualTheme.value === 'dark');
+
+  // 是否是移动端
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  return {
+    themeMode,
+    isDark,
+    isMobile,
+    cycleTheme,
+    sidebarCollapsed,
+    toggleSidebar,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot));
+}