[Feat 0000] 切换主题按钮

src/layouts/default/header/components/user-dropdown/ThemeSelect.vue

@@ -0,0 +1,66 @@
+<template>
+  <BasicModal v-bind="config" title="切换主题" v-model:visible="visible" wrapClassName="themeSelectModal">
+    <a-radio-group v-model:value="themeSelected" name="radioGroup" @change="change">
+      <a-radio v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
+    </a-radio-group>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  // 更换主题后的逻辑参考 /@/components/Application 的主题切换组件
+  import { ref } from 'vue';
+  import { BasicModal } from '/@/components/Modal';
+  import { ThemeEnum } from '@/enums/appEnum';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { updateDarkTheme } from '/@/logics/theme/dark';
+  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+
+  const visible = ref(false);
+  const config = {
+    maskClosable: false,
+    canFullscreen: false,
+    width: '300px',
+    minHeight: 20,
+    maxHeight: 20,
+    showCancelBtn: false,
+    showOkBtn: false,
+  };
+  // const layout = {
+  //   labelCol: { span: 6 },
+  //   wrapperCol: { span: 16 },
+  // };
+  const options = [
+    {
+      value: ThemeEnum.DARK,
+      label: '深色',
+    },
+    {
+      value: ThemeEnum.LIGHT,
+      label: '浅色',
+    },
+    {
+      value: ThemeEnum.VENT1,
+      label: '默认',
+    },
+  ];
+
+  const { getDarkMode, setDarkMode } = useRootSetting();
+
+  const themeSelected = ref<ThemeEnum>(getDarkMode.value as ThemeEnum);
+
+  function show() {
+    visible.value = true;
+  }
+  // function close() {
+  //   visible.value = false;
+  // }
+  function change() {
+    setDarkMode(themeSelected.value);
+    updateDarkTheme(themeSelected.value);
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  }
+  defineExpose({
+    show,
+  });
+</script>
+<style lang="less" scoped></style>

src/layouts/default/header/components/user-dropdown/index.vue

@@ -18,6 +18,7 @@
         <MenuItem key="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
         <MenuItem key="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
         <MenuItem key="modalCache" :text="t('layout.header.dropdownItemSwitchModal')" icon="ion:sync-outline" />
+        <MenuItem key="switchTheme" :text="t('layout.header.dropdownItemSwitchTheme')" icon="ion:color-palette" />
         <!-- <MenuItem
             v-if="getUseLockPage"
             key="lock"
@@ -30,6 +31,7 @@
   </Dropdown>
   <LockAction v-if="lockActionVisible" ref="lockActionRef" @register="register" />
   <DepartSelect ref="loginSelectRef" />
+  <ThemeSelect ref="themeSelectRef" />
   <UpdatePassword v-if="passwordVisible" ref="updatePasswordRef" />
 </template>
 <script lang="ts">
@@ -59,7 +61,7 @@
   import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
   import { getRefPromise } from '/@/utils/index';
 
-  type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart' | 'modalCache';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart' | 'modalCache' | 'switchTheme';
   const { createMessage } = useMessage();
   export default defineComponent({
     name: 'UserDropdown',
@@ -70,6 +72,7 @@
       MenuDivider: Menu.Divider,
       LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
       DepartSelect: createAsyncComponent(() => import('./DepartSelect.vue')),
+      ThemeSelect: createAsyncComponent(() => import('./ThemeSelect.vue')),
       UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
     },
     props: {
@@ -175,6 +178,9 @@
           case 'depart':
             updateCurrentDepart();
             break;
+          case 'switchTheme':
+            updateTheme();
+            break;
           case 'password':
             updatePassword();
             break;
@@ -186,6 +192,14 @@
         }
       }
 
+      /**
+       * 切换主题弹窗
+       */
+      const themeSelectRef = ref();
+      function updateTheme() {
+        themeSelectRef.value.show();
+      }
+
       return {
         prefixCls,
         t,
@@ -196,6 +210,7 @@
         register,
         getUseLockPage,
         loginSelectRef,
+        themeSelectRef,
         updatePasswordRef,
         passwordVisible,
         lockActionVisible,

src/locales/lang/en/layout.ts

@@ -8,7 +8,8 @@ export default {
     dropdownItemSwitchDepart: 'Switch Department',
     dropdownItemRefreshCache: 'Clean cache',
     dropdownItemSwitchAccount: 'Account Setting',
-    
+    dropdownItemSwitchTheme: 'Switch Theme',
+
     tooltipErrorLog: 'Error log',
     tooltipLock: 'Lock screen',
     tooltipNotify: 'Notification',

src/locales/lang/zh-CN/layout.ts

@@ -10,6 +10,7 @@ export default {
     dropdownItemRefreshCache: '刷新缓存',
     dropdownItemSwitchAccount: '账户设置',
     dropdownItemSwitchModal: '刷新模型缓存',
+    dropdownItemSwitchTheme: '切换主题',
 
     // tooltip
     tooltipErrorLog: '错误日志',