框架重构

src/components/Application/src/AppDarkModeToggle.vue

@@ -4,41 +4,65 @@
  * @Date: 2024-05-13 09:06:51
 -->
 <template>
-  <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
+  <!-- <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
     <div :class="`${prefixCls}-inner`"></div>
     <SvgIcon size="14" name="sun" />
     <SvgIcon size="14" name="moon" />
+  </div> -->
+  <div>
+    <a-radio-group v-model:value="themeValue" button-style="solid">
+      <a-radio-button value="black">主题1</a-radio-button>
+      <a-radio-button value="blue">主题2</a-radio-button>
+      <a-radio-button value="white">主题3</a-radio-button>
+    </a-radio-group>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, unref } from 'vue'
+  import { ref, watch } from 'vue'
-  import { SvgIcon } from '/@/components/Icon'
+  // import { SvgIcon } from '/@/components/Icon'
-  import { useDesign } from '/@/hooks/web/useDesign'
+  // import { useDesign } from '/@/hooks/web/useDesign'
   import { useRootSetting } from '/@/hooks/setting/useRootSetting'
-  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground'
+  // import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground'
-  import { updateDarkTheme } from '/@/logics/theme/dark'
+  // import { updateDarkTheme } from '/@/logics/theme/dark'
-  import { ThemeEnum } from '/@/enums/appEnum'
+  import { baseHandler } from '/@/layouts/default/setting/handler'
+  // import { ThemeEnum } from '/@/enums/appEnum'
 
-  const { prefixCls } = useDesign('dark-switch')
+  // const { prefixCls } = useDesign('dark-switch')
-  const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting()
+  // console.log(prefixCls)
-
+  const { getDarkMode, setDarkMode } = useRootSetting()
-  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK)
+  // 当前主题颜色
-
+  const themeValue = ref(getDarkMode.value)
-  const getClass = computed(() => [
+  // const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK)
-    prefixCls,
+  // const getClass = computed(() => [
-    {
+  //   prefixCls,
-      [`${prefixCls}--dark`]: unref(isDark),
+  //   {
-    },
+  //     [`${prefixCls}--dark`]: unref(isDark),
-  ])
+  //   },
-
+  // ])
-  function toggleDarkMode() {
+  watch(
-    console.log(getDarkMode)
+    () => themeValue.value,
-    const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
+    (v) => {
-    setDarkMode(darkMode)
+      if (v == 'black') {
-    updateDarkTheme(darkMode)
+        baseHandler(11, '#121826')
-    updateHeaderBgColor()
+        baseHandler(18, '#121826')
-    updateSidebarBgColor()
+      } else if (v == 'blue') {
+        baseHandler(11, '#275ECC')
+        baseHandler(18, '#275ECC')
+      } else {
+        baseHandler(11, '#FFFFFF')
+        baseHandler(18, '#FFFFFF')
+      }
+      setDarkMode(v)
     }
+  )
+  // function toggleDarkMode() {
+  //   console.log(getDarkMode)
+  //   const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
+  //   setDarkMode(darkMode)
+  //   updateDarkTheme(darkMode)
+  //   updateHeaderBgColor()
+  //   updateSidebarBgColor()
+  // }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-dark-switch';

src/layouts/default/setting/SettingDrawer.tsx

@@ -379,9 +379,9 @@ export default defineComponent({
         class="setting-drawer"
       >
         {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.sysTheme')}</Divider>}
-        {/* {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />} */}
+        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
         {/* <Divider>{() => t('layout.setting.sysTheme')}</Divider> */}
-        {renderMainTheme()}
+        {/* {renderMainTheme()} */}
         {/* <Divider>{() => t('layout.setting.headerTheme')}</Divider>
         {renderHeaderTheme()}
         <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>

src/logics/initAppConfig.ts

@@ -1,3 +1,8 @@
+/*
+ * @Desc: 
+ * @Author: lijj
+ * @Date: 2024-05-13 09:06:51
+ */
 /**
  * Application configuration
  */
@@ -51,13 +56,23 @@ export function initAppConfigStore() {
 
   // init dark mode
   updateDarkTheme(darkMode)
-  if (darkMode === ThemeEnum.DARK) {
+  if (darkMode === 'black') {
-    updateHeaderBgColor()
+    updateHeaderBgColor('#121826')
-    updateSidebarBgColor()
+    updateSidebarBgColor('#121826')
+  } else if (darkMode === 'blue') {
+    updateHeaderBgColor('#275ECC')
+    updateSidebarBgColor('#275ECC')
   } else {
-    headerBgColor && updateHeaderBgColor(headerBgColor)
+    updateHeaderBgColor('#ffffff')
-    bgColor && updateSidebarBgColor(bgColor)
+    updateSidebarBgColor('#ffffff')
   }
+  // if (darkMode === ThemeEnum.DARK) {
+  //   updateHeaderBgColor()
+  //   updateSidebarBgColor()
+  // } else {
+  //   headerBgColor && updateHeaderBgColor(headerBgColor)
+  //   bgColor && updateSidebarBgColor(bgColor)
+  // }
   // init store
   localeStore.initLocale()