feat: 登录页面切换主题和语言类型

src/views/login.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
+import svgLight from '@/assets/svg/light.svg';
+import svgDark from '@/assets/svg/dark.svg';
 import { message } from 'ant-design-vue/es';
-import { reactive, onMounted, computed } from 'vue';
+import { reactive, onMounted, computed, toRaw } from 'vue';
 import useUserStore from '@/store/modules/user';
 import useAppStore from '@/store/modules/app';
 import { getCaptchaImage } from '@/api/login';
 import { useRouter, useRoute } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
-import { toRaw } from 'vue';
+import useLayoutStore from '@/store/modules/layout';
+import { viewTransitionTheme } from 'antdv-pro-layout';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseUrlPath } from '@/plugins/file-static-url';
 const { t, changeLocale, optionsLocale, currentLocale } = useI18n();
+const layoutStore = useLayoutStore();
 const appStore = useAppStore();
 const router = useRouter();
 const route = useRoute();
@@ -125,6 +129,13 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
+/**改变主题色 */
+function fnClickTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
+}
+
 onMounted(() => {
   fnLocale();
   fnGetCaptcha();
@@ -279,11 +290,25 @@ function fnChangeLocale(e: any) {
           style="margin-top: 18px"
           v-if="appStore.i18nOpen"
         >
-          <a-col :offset="18" :span="6">
-            <a-dropdown trigger="click">
+          <a-col :offset="18" :span="3">
+            <a-tooltip placement="bottomRight">
+              <template #title>{{ t('loayouts.rightContent.theme') }}</template>
+              <a-button type="text" @click="fnClickTheme">
+                <template #icon>
+                  <img
+                    v-if="layoutStore.proConfig.theme === 'dark'"
+                    :src="svgDark"
+                    class="theme-icon"
+                  />
+                  <img v-else :src="svgLight" class="theme-icon" />
+                </template>
+              </a-button>
+            </a-tooltip>
+          </a-col>
+          <a-col :span="3">
+            <a-dropdown trigger="click" placement="bottomRight">
               <a-button size="small" type="default">
-                {{ t('i18n') }}
-                <DownOutlined />
+                <template #icon> <TranslationOutlined /> </template>
               </a-button>
               <template #overlay>
                 <a-menu @click="fnChangeLocale">