Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin

src/layouts/MixLayout.vue

@@ -74,10 +74,10 @@
 import type { LocationQueryRaw, RouteRecordRaw } from "vue-router";
 import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "./useLayout";
-import { useAppStore, usePermissionStore, useSettingsStore } from "@/store";
+import { useAppStore, usePermissionStore, useSettingsStore } from "@/stores";
 import { isExternal } from "@/utils/index";
 import { translateRouteTitle } from "@/lang/utils";
-import { SidebarColor } from "@/enums/settings";
+import { SidebarColor, ThemeMode } from "@/enums/settings";
 import { ElIcon } from "element-plus";
 import BaseLayout from "./BaseLayout.vue";
 import LayoutLogo from "./components/LayoutLogo.vue";
@@ -127,7 +127,8 @@ const isLogoCollapsed = computed(() => width.value < 768);
 // 是否使用深色菜单配色（暗色主题或经典蓝侧边栏）
 const useMenuColors = computed(
   () =>
-    settingsStore.theme === "dark" || settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+    settingsStore.resolvedTheme === ThemeMode.DARK ||
+    settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
 );
 
 // 顶部菜单项（处理单子菜单显示优化）

src/layouts/TopLayout.vue

@@ -26,7 +26,7 @@
 <script setup lang="ts">
 import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "./useLayout";
-import { usePermissionStore } from "@/store";
+import { usePermissionStore } from "@/stores";
 import BaseLayout from "./BaseLayout.vue";
 import LayoutLogo from "./components/LayoutLogo.vue";
 import LayoutSidebar from "./components/LayoutSidebar.vue";

src/layouts/components/LayoutMain.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { type RouteLocationNormalized } from "vue-router";
-import { useSettingsStore, useTagsViewStore } from "@/store";
+import { useSettingsStore, useTagsViewStore } from "@/stores";
 import variables from "@/styles/variables.module.scss";
 import Error404 from "@/views/error/404.vue";
 

src/layouts/components/LayoutNavbar.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from "@/store";
+import { useAppStore } from "@/stores";
 import Hamburger from "@/components/Hamburger/index.vue";
 import Breadcrumb from "@/components/Breadcrumb/index.vue";
 

src/layouts/components/LayoutSettings.vue

@@ -11,13 +11,17 @@
         <el-divider>{{ t("settings.theme") }}</el-divider>
 
         <div class="flex-center">
-          <el-switch
-            v-model="isDark"
-            active-icon="Moon"
-            inactive-icon="Sunny"
-            class="theme-switch"
-            @change="handleThemeChange"
-          />
+          <el-radio-group v-model="themeMode" class="theme-mode-group">
+            <el-radio-button :value="ThemeMode.LIGHT">
+              {{ t("login.light") }}
+            </el-radio-button>
+            <el-radio-button :value="ThemeMode.DARK">
+              {{ t("login.dark") }}
+            </el-radio-button>
+            <el-radio-button :value="ThemeMode.AUTO">
+              {{ t("login.auto") }}
+            </el-radio-button>
+          </el-radio-group>
         </div>
       </section>
 
@@ -71,7 +75,10 @@
           <el-switch v-model="settingsStore.colorWeak" />
         </div>
 
-        <div v-if="!isDark" class="config-item flex-x-between">
+        <div
+          v-if="settingsStore.resolvedTheme !== ThemeMode.DARK"
+          class="config-item flex-x-between"
+        >
           <span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
           <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
             <el-radio :value="SidebarColor.CLASSIC_BLUE">
@@ -167,7 +174,7 @@ import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
 
 const { t } = useI18n();
 import { LayoutMode, PageSwitchingAnimationOptions, SidebarColor, ThemeMode } from "@/enums";
-import { useSettingsStore } from "@/store";
+import { useSettingsStore } from "@/stores";
 import { themeColorPresets } from "@/settings";
 
 // 页面切换动画选项
@@ -199,8 +206,13 @@ const colorPresets = [...themeColorPresets];
 
 const settingsStore = useSettingsStore();
 
-const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
 const sidebarColor = ref(settingsStore.sidebarColorScheme);
+const themeMode = computed({
+  get: () => settingsStore.theme,
+  set: (value: ThemeMode) => {
+    settingsStore.theme = value;
+  },
+});
 
 const selectedThemeColor = computed({
   get: () => settingsStore.themeColor,
@@ -214,15 +226,6 @@ const drawerVisible = computed({
   set: (value) => (settingsStore.settingsVisible = value),
 });
 
-/**
- * 处理主题切换
- *
- * @param isDark 是否启用暗黑模式
- */
-const handleThemeChange = (isDark: string | number | boolean) => {
-  settingsStore.theme = isDark ? ThemeMode.DARK : ThemeMode.LIGHT;
-};
-
 /**
  * 更改侧边栏颜色
  *
@@ -277,8 +280,6 @@ const handleResetSettings = async () => {
   try {
     settingsStore.resetSettings();
 
-    // 同步更新本地状态"
-    isDark.value = settingsStore.theme === ThemeMode.DARK;
     sidebarColor.value = settingsStore.sidebarColorScheme;
 
     ElMessage.success(t("settings.resetSuccess"));

src/layouts/components/LayoutSidebar.vue

@@ -29,8 +29,8 @@ import { useRoute } from "vue-router";
 import path from "path-browserify";
 import type { MenuInstance } from "element-plus";
 import type { RouteRecordRaw } from "vue-router";
-import { SidebarColor } from "@/enums/settings";
-import { useSettingsStore, useAppStore } from "@/store";
+import { SidebarColor, ThemeMode } from "@/enums/settings";
+import { useSettingsStore, useAppStore } from "@/stores";
 import { isExternal } from "@/utils/index";
 import LayoutSidebarItem from "./LayoutSidebarItem.vue";
 import variables from "@/styles/variables.module.scss";
@@ -61,7 +61,7 @@ const currentRoute = useRoute();
 const expandedMenuIndexes = ref<string[]>([]);
 
 // 获取主题
-const theme = computed(() => settingsStore.theme);
+const theme = computed(() => settingsStore.resolvedTheme);
 
 // 获取浅色主题下的侧边栏配色方案
 const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
@@ -69,7 +69,7 @@ const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
 // 菜单主题属性
 const menuThemeProps = computed(() => {
   const isDarkOrClassicBlue =
-    theme.value === "dark" || sidebarColorScheme.value === SidebarColor.CLASSIC_BLUE;
+    theme.value === ThemeMode.DARK || sidebarColorScheme.value === SidebarColor.CLASSIC_BLUE;
 
   return {
     backgroundColor: isDarkOrClassicBlue ? variables["menu-background"] : undefined,

src/layouts/components/LayoutTagsView.vue

@@ -71,7 +71,7 @@
 import { useRoute, useRouter, type RouteRecordRaw } from "vue-router";
 import { resolve } from "path-browserify";
 import { translateRouteTitle } from "@/lang/utils";
-import { usePermissionStore, useTagsViewStore } from "@/store";
+import { usePermissionStore, useTagsViewStore } from "@/stores";
 
 interface ContextMenu {
   visible: boolean;

src/layouts/components/LayoutToolbar.vue

@@ -71,7 +71,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { defaults } from "@/settings";
 import { DeviceEnum, SidebarColor, ThemeMode, LayoutMode } from "@/enums/settings";
-import { useAppStore, useSettingsStore, useUserStore } from "@/store";
+import { useAppStore, useSettingsStore, useUserStore } from "@/stores";
 
 // 导入子组件
 import CommandPalette from "@/components/CommandPalette/index.vue";
@@ -80,7 +80,7 @@ import SizeSelect from "@/components/SizeSelect/index.vue";
 import LangSelect from "@/components/LangSelect/index.vue";
 import NoticeDropdown from "@/components/NoticeDropdown/index.vue";
 import TenantSwitcher from "@/components/TenantSwitcher/index.vue";
-import { useTenantStoreHook } from "@/store/modules/tenant";
+import { useTenantStoreHook } from "@/stores/tenant";
 
 const { t } = useI18n();
 const appStore = useAppStore();
@@ -125,15 +125,15 @@ function handleProfileClick() {
 
 // 根据主题和侧边栏配色方案选择样式类
 const navbarActionsClass = computed(() => {
-  const { theme, sidebarColorScheme, layout } = settingStore;
+  const { resolvedTheme, sidebarColorScheme, layout } = settingStore;
 
   // 暗黑主题下，所有布局都使用白色文字
-  if (theme === ThemeMode.DARK) {
+  if (resolvedTheme === ThemeMode.DARK) {
     return "navbar-actions--white-text";
   }
 
   // 明亮主题下
-  if (theme === ThemeMode.LIGHT) {
+  if (resolvedTheme === ThemeMode.LIGHT) {
     // 顶部布局和混合布局的顶部区域：
     // - 如果侧边栏是经典蓝色，使用白色文字
     // - 如果侧边栏是极简白色，使用深色文字

src/layouts/useLayout.ts

@@ -5,7 +5,7 @@
  */
 import { useRoute } from "vue-router";
 import { useWindowSize } from "@vueuse/core";
-import { useAppStore, usePermissionStore, useSettingsStore } from "@/store";
+import { useAppStore, usePermissionStore, useSettingsStore } from "@/stores";
 import { DeviceEnum } from "@/enums/settings";
 import { defaults } from "@/settings";