fix: 布局组件升级调整

src/layouts/components/RightContent.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import svgLight from '@/assets/svg/light.svg';
+import svgDark from '@/assets/svg/dark.svg';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { viewTransitionTheme } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useFullscreen } from '@vueuse/core';
+import { hasPermissions } from '@/plugins/auth-user';
 import useI18n from '@/hooks/useI18n';
+import useLayoutStore from '@/store/modules/layout';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useAlarmStore from '@/store/modules/alarm';
 import useMaskStore from '@/store/modules/mask';
-import { hasPermissions } from '@/plugins/auth-user';
-import { ref } from 'vue';
 const { isFullscreen, toggle } = useFullscreen();
 const { t, changeLocale, optionsLocale } = useI18n();
+const layoutStore = useLayoutStore();
 const maskStore = useMaskStore();
 const userStore = useUserStore();
 const appStore = useAppStore();
@@ -57,6 +63,13 @@ function fnClickAlarm() {
   router.push({ name: 'ActiveAlarm_2088' });
 }
 
+/**改变主题色 */
+function fnClickTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
+}
+
 /**改变多语言 */
 function fnChangeLocale(e: any) {
   changeLocale(e.key);
@@ -65,7 +78,7 @@ function fnChangeLocale(e: any) {
 
 <template>
   <a-space :size="12" align="center">
-    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottomRight">
       <template #title>{{ t('loayouts.rightContent.alarm') }}</template>
       <a-button type="text" style="color: inherit" @click="fnClickAlarm">
         <template #icon>
@@ -83,7 +96,7 @@ function fnChangeLocale(e: any) {
 
     <!-- 锁屏操作 -->
     <span v-perms:has="['system:setting:lock']">
-      <a-tooltip placement="bottom">
+      <a-tooltip placement="bottomRight">
         <template #title>{{ t('loayouts.rightContent.lock') }}</template>
         <a-button type="text" style="color: inherit" @click="fnClickLock()">
           <template #icon>
@@ -92,10 +105,11 @@ function fnChangeLocale(e: any) {
         </a-button>
         <ProModal
           :drag="true"
+          :center-y="true"
           :width="400"
           :minHeight="200"
           :mask-closable="false"
-          v-model:visible="lockConfirm"
+          v-model:open="lockConfirm"
           :title="t('loayouts.rightContent.lockTip')"
           @ok="fnClickLockToPage()"
         >
@@ -119,7 +133,7 @@ function fnChangeLocale(e: any) {
       </a-tooltip>
     </span>
 
-    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottomRight">
       <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
       <a-button type="text" style="color: inherit" @click="toggle">
         <template #icon>
@@ -129,14 +143,27 @@ function fnChangeLocale(e: any) {
       </a-button>
     </a-tooltip>
 
+    <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-dropdown
-      placement="bottom"
+      placement="bottomRight"
       trigger="click"
       v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
     >
-      <a-button size="small" type="default">
-        {{ t('i18n') }}
-        <DownOutlined />
+      <a-button type="text" style="color: inherit">
+        <template #icon> <TranslationOutlined /> </template>
       </a-button>
       <template #overlay>
         <a-menu @click="fnChangeLocale">
@@ -204,4 +231,11 @@ function fnChangeLocale(e: any) {
     overflow: hidden;
   }
 }
+
+.theme-icon {
+  width: 18px;
+  height: 18px;
+  margin-bottom: 4px;
+  color: inherit;
+}
 </style>