From e3f7b08c694282a3147dc8813ff041c436d43d70 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 28 Oct 2024 14:52:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=92=8C=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login.vue | 37 +++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index b0bb2241..c5cd596c 100644
--- a/src/views/login.vue
+++ b/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">