fix(projects): 修复主题相关，自适应操作系统暗黑模式

src/AppProvider.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import {
   NConfigProvider,
   darkTheme,
@@ -31,18 +31,29 @@ import {
   NNotificationProvider,
   NMessageProvider
 } from 'naive-ui';
+import { useDark } from '@vueuse/core';
 import { AppProviderContent } from '@/components';
 import { useThemeStore } from '@/store';
 import { addColorAlpha } from '@/utils';
 
+const osDark = useDark();
 const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
+
+/** 系统暗黑模式 */
 const dark = computed(() => (theme.darkMode ? darkTheme : undefined));
 
+// 主题颜色
 const primary = computed(() => theme.themeColor);
 const primaryWithAlpha = computed(() => {
   const alpha = theme.darkMode ? 0.15 : 0.1;
   return addColorAlpha(primary.value, alpha);
 });
+
+// 操作系统的暗黑模式
+watch(osDark, newValue => {
+  handleDarkMode(newValue);
+});
 </script>
 <style>
 /* 全局与主题颜色相关 */

src/components/custom/ShadowCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light dark:bg-dark rounded-16px">
+  <div class="bg-light dark:bg-dark rounded-16px shadow-sm">
     <slot></slot>
   </div>
 </template>

src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue

@@ -0,0 +1,26 @@
+<template>
+  <hover-container class="px-12px" :show-tooltip="false">
+    <n-switch :value="theme.darkMode" @update:value="handleDarkMode">
+      <template #checked>
+        <icon-mdi-white-balance-sunny class="text-14px g_text-primary" />
+      </template>
+      <template #unchecked>
+        <icon-mdi-moon-waning-crescent class="text-14px g_text-primary" />
+      </template>
+    </n-switch>
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { NSwitch } from 'naive-ui';
+import { HoverContainer } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
+</script>
+<style scoped>
+:deep(.n-switch__rail) {
+  background-color: #000e1c !important;
+}
+</style>

src/layouts/BasicLayout/components/GlobalHeader/components/index.ts

@@ -1,8 +1,9 @@
 import GlobalBreadcrumb from './GlobalBreadcrumb.vue';
 import UserAvatar from './UserAvatar.vue';
 import MenuCollapse from './MenuCollapse.vue';
+import ThemeMode from './ThemeMode.vue';
 import FullScreen from './FullScreen.vue';
 import SettingDrawerButton from './SettingDrawerButton.vue';
 import GihubSite from './GihubSite.vue';
 
-export { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite };
+export { GlobalBreadcrumb, UserAvatar, MenuCollapse, ThemeMode, FullScreen, SettingDrawerButton, GihubSite };

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -19,6 +19,7 @@
       <div class="flex justify-end h-full">
         <gihub-site />
         <full-screen />
+        <theme-mode />
         <user-avatar />
         <setting-drawer-button v-if="showSettingButton" />
       </div>
@@ -30,7 +31,15 @@
 import { computed } from 'vue';
 import { NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
-import { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, GihubSite, SettingDrawerButton } from './components';
+import {
+  GlobalBreadcrumb,
+  UserAvatar,
+  MenuCollapse,
+  ThemeMode,
+  FullScreen,
+  GihubSite,
+  SettingDrawerButton
+} from './components';
 import { GlobalLogo } from '../common';
 import HeaderMenu from './components/HeaderMenu.vue';
 

src/router/modules/document.ts

@@ -29,7 +29,8 @@ const DOCUMENT: CustomRoute = {
       meta: {
         requiresAuth: true,
         title: EnumRouteTitle.document_vue,
-        fullPage: true
+        fullPage: true,
+        keepAlive: true
       }
     },
     {

src/views/system/login/components/PwdLogin/index.vue

@@ -9,7 +9,13 @@
       </n-form-item>
       <n-form-item path="isCaptcha">
         <div class="w-full">
-          <mi-captcha :theme-color="theme.themeColor" :logo="logo" @success="handleCaptcha" />
+          <mi-captcha
+            :theme-color="theme.themeColor"
+            :bg-color="themeVars.inputColor"
+            :text-color="themeVars.textColorBase"
+            :logo="logo"
+            @success="handleCaptcha"
+          />
         </div>
       </n-form-item>
       <n-space :vertical="true" size="large">
@@ -17,7 +23,9 @@
           <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
           <span class="g_text-primary cursor-pointer" @click="toCurrentLogin('reset-pwd')">忘记密码？</span>
         </div>
-        <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
+        <n-button type="primary" size="large" :block="true" :round="true" :loading="loading" @click="handleSubmit">
+          确定
+        </n-button>
         <div class="flex-y-center justify-between">
           <n-button class="flex-1" :block="true" @click="toCurrentLogin('code-login')">
             {{ EnumLoginModule['code-login'] }}
@@ -35,11 +43,11 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useNotification } from 'naive-ui';
+import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useNotification, useThemeVars } from 'naive-ui';
 import type { FormInst, FormRules } from 'naive-ui';
 import { EnumLoginModule } from '@/enum';
 import { useThemeStore } from '@/store';
-import { useRouterChange, useRouteQuery } from '@/hooks';
+import { useRouterChange, useRouteQuery, useLoading } from '@/hooks';
 import { setToken } from '@/utils';
 import { OtherLogin } from './components';
 import logo from '@/assets/img/common/logo.png';
@@ -47,7 +55,9 @@ import logo from '@/assets/img/common/logo.png';
 const theme = useThemeStore();
 const { toHome, toCurrentLogin, toLoginRedirectUrl } = useRouterChange();
 const { loginRedirectUrl } = useRouteQuery();
+const { loading, startLoading, endLoading } = useLoading();
 const notification = useNotification();
+const themeVars = useThemeVars();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);
 const model = reactive({
@@ -86,18 +96,21 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      setToken('temp-token');
-      if (loginRedirectUrl.value) {
-        toLoginRedirectUrl(loginRedirectUrl.value);
-      } else {
-        toHome();
-      }
-
-      notification.success({
-        title: '登录成功！',
-        content: '欢迎回来，Soybean!',
-        duration: 5000
-      });
+      startLoading();
+      setTimeout(() => {
+        endLoading();
+        setToken('temp-token');
+        if (loginRedirectUrl.value) {
+          toLoginRedirectUrl(loginRedirectUrl.value);
+        } else {
+          toHome();
+        }
+        notification.success({
+          title: '登录成功！',
+          content: '欢迎回来，Soybean!',
+          duration: 3000
+        });
+      }, 1000);
     }
   });
 }

src/views/system/login/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative flex-center w-full h-full" :style="{ backgroundColor: bgColor }">
-    <div class="w-400px p-40px bg-white rounded-20px z-10">
+  <div class="login-bg relative flex-center w-full h-full">
+    <shadow-card class="w-400px p-40px !rounded-20px z-10">
       <header class="flex-y-center justify-between">
         <div class="w-70px h-70px rounded-35px overflow-hidden">
           <system-logo class="w-full h-full" :fill="true" :color="theme.themeColor" />
@@ -13,7 +13,7 @@
           <component :is="item.component" />
         </div>
       </main>
-    </div>
+    </shadow-card>
     <login-bg :theme-color="theme.themeColor" />
   </div>
 </template>
@@ -22,7 +22,7 @@
 import { computed } from 'vue';
 import type { Component, PropType } from 'vue';
 import { NGradientText } from 'naive-ui';
-import { SystemLogo, LoginBg } from '@/components';
+import { ShadowCard, SystemLogo, LoginBg } from '@/components';
 import { useAppTitle } from '@/hooks';
 import { EnumLoginModule } from '@/enum';
 import { addColorAlpha } from '@/utils';
@@ -56,4 +56,8 @@ const modules: LoginModule[] = [
 
 const bgColor = computed(() => addColorAlpha(theme.themeColor, 0.1));
 </script>
-<style scoped></style>
+<style scoped>
+.login-bg {
+  background-color: v-bind(bgColor);
+}
+</style>