框架重构

src/components/Application/src/AppDarkModeToggle.vue

@@ -1,38 +1,71 @@
+<!--
+ * @Desc: 
+ * @Author: lijj
+ * @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(
-    const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
+    () => themeValue.value,
-    setDarkMode(darkMode)
+    (v) => {
-    updateDarkTheme(darkMode)
+      if (v == 'black') {
-    updateHeaderBgColor()
+        baseHandler(11, '#121826')
-    updateSidebarBgColor()
+        baseHandler(18, '#2A303C')
+        baseHandler(1, '#FF6600')
+      } else if (v == 'blue') {
+        baseHandler(11, '#1247B3')
+        baseHandler(18, '#275ECC')
+        baseHandler(1, '#275ECC')
+      } else {
+        baseHandler(11, '#FFFFFF')
+        baseHandler(18, '#FFFFFF')
+        baseHandler(1, '#275ECC')
+      }
+      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/components/SimpleMenu/src/components/MenuItem.vue

@@ -8,7 +8,6 @@
         <slot></slot>
       </div>
     </Tooltip>
-
     <template v-else>
       <slot></slot>
       <slot name="title"></slot>

src/components/SimpleMenu/src/components/menu.less

@@ -6,16 +6,16 @@
 @menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7);
 
 .light-border {
-  &::after {
+  // &::after {
-    position: absolute;
+  //   position: absolute;
-    top: 0;
+  //   top: 0;
-    right: 0;
+  //   right: 0;
-    bottom: 0;
+  //   bottom: 0;
-    display: block;
+  //   display: block;
-    width: 2px;
+  //   width: 2px;
-    content: '';
+  //   content: '';
-    background-color: @primary-color;
+  //   background-color: @primary-color;
-  }
+  // }
 }
 
 .@{menu-prefix-cls}-menu-popover {
@@ -186,7 +186,7 @@
       .light-border();
       font-weight: 700;
       color: @primary-color;
-      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%);
+      // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%);
     }
     &-vertical .@{menu-prefix-cls} {
       padding-left: 46px;
@@ -282,14 +282,17 @@
 
     &-dark&-vertical &-item,
     &-dark&-vertical &-submenu-title {
+      margin: 3px 10px;
+      height: 40px;
+      line-height: 14px;
       color: @menu-dark-subsidiary-color;
       &-active:not(.@{menu-prefix-cls}-submenu) {
         color: #fff !important;
-        background-color: @primary-color !important;
+        // background-color: @primary-color !important;
       }
 
       &:hover {
-        color: #fff;
+        color: @primary-color !important;
       }
     }
 

src/components/SimpleMenu/src/index.less

@@ -13,9 +13,10 @@
   }
   &-dark&-vertical .@{simple-prefix-cls}__children,
   &-dark&-popup .@{simple-prefix-cls}__children {
-    background-color: @sider-dark-lighten-bg-color;
+    height: 30px;
+    // background-color: @sider-dark-lighten-bg-color;
     > .@{prefix-cls}-submenu-title {
-      background-color: @sider-dark-lighten-bg-color;
+      // background-color: @sider-dark-lighten-bg-color;
     }
   }
 

src/layouts/default/setting/SettingDrawer.tsx

@@ -378,8 +378,8 @@ export default defineComponent({
         width={330}
         class="setting-drawer"
       >
-        {/* {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
+        {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()}
         <Divider>{() => t('layout.setting.headerTheme')}</Divider>

src/layouts/default/setting/components/SettingFooter.vue

@@ -1,6 +1,11 @@
+<!--
+ * @Desc: 
+ * @Author: lijj
+ * @Date: 2024-07-17 08:39:50
+-->
 <template>
   <div :class="prefixCls">
-    <a-button type="primary" block @click="handleCopy">
+    <!-- <a-button type="primary" block @click="handleCopy">
       <CopyOutlined class="mr-2" />
       {{ t('layout.setting.copyBtn') }}
     </a-button>
@@ -8,8 +13,7 @@
     <a-button color="warning" block class="my-3" @click="handleResetSetting">
       <RedoOutlined class="mr-2" />
       {{ t('common.resetText') }}
-    </a-button>
+    </a-button> -->
-
     <a-button color="error" block @click="handleClearAndRedo">
       <RedoOutlined class="mr-2" />
       {{ t('layout.setting.clearBtn') }}

src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -44,6 +44,7 @@
       const { prefixCls } = useDesign('setting-theme-picker')
 
       function handleClick(color: string) {
+        console.log(props.event)
         props.event && baseHandler(props.event, color)
       }
       return {

src/layouts/default/sider/LayoutSider.vue

@@ -44,7 +44,7 @@
   import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider'
   import { useAppInject } from '/@/hooks/web/useAppInject'
   import { useDesign } from '/@/hooks/web/useDesign'
-
+  import { useAppStore } from '/@/store/modules/app'
   import DragBar from './DragBar.vue'
   export default defineComponent({
     name: 'LayoutSideBar',
@@ -52,7 +52,8 @@
     setup() {
       const dragBarRef = ref<ElRef>(null)
       const sideRef = ref<ElRef>(null)
-
+      const appStore = useAppStore()
+      const darkMode = appStore.getDarkMode
       const {
         getCollapsed,
         getMenuWidth,
@@ -97,6 +98,7 @@
           {
             [`${prefixCls}--fixed`]: unref(getMenuFixed),
             [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+            [`${prefixCls}--white`]: darkMode === 'white',
           },
         ]
       })
@@ -147,7 +149,7 @@
 
   .@{prefix-cls} {
     z-index: @layout-sider-fixed-z-index;
-    border-right: 1px solid #CED5D9;
+    // border-right: 1px solid #CED5D9;
     .ds-fold-btn {
       position: absolute;
       bottom: 150px;
@@ -155,6 +157,9 @@
       background: #ffffff;
       z-index: 11;
     }
+    &--white {
+      box-shadow: 2px 0px 6px #dfdfdf;
+    }
     &--fixed {
       position: fixed;
       top: 0;

src/logics/initAppConfig.ts

@@ -1,3 +1,8 @@
+/*
+ * @Desc: 
+ * @Author: lijj
+ * @Date: 2024-05-13 09:06:51
+ */
 /**
  * Application configuration
  */
@@ -20,6 +25,7 @@ import { getCommonStoragePrefix, getStorageShortName } from '/@/utils/env'
 import { primaryColor } from '../../build/config/themeConfig'
 import { Persistent } from '/@/utils/cache/persistent'
 import { deepMerge } from '/@/utils'
+import { baseHandler } from '/@/layouts/default/setting/handler'
 import { ThemeEnum } from '/@/enums/appEnum'
 
 // Initial project configuration
@@ -51,13 +57,26 @@ export function initAppConfigStore() {
 
   // init dark mode
   updateDarkTheme(darkMode)
-  if (darkMode === ThemeEnum.DARK) {
+  if (darkMode === 'black') {
-    updateHeaderBgColor()
+    updateHeaderBgColor('#2A303C')
-    updateSidebarBgColor()
+    updateSidebarBgColor('#121826')
+    baseHandler(1, '#FF6600')
+  } else if (darkMode === 'blue') {
+    updateHeaderBgColor('#275ECC')
+    updateSidebarBgColor('#1247B3')
+    baseHandler(1, '#275ECC')
   } else {
-    headerBgColor && updateHeaderBgColor(headerBgColor)
+    updateHeaderBgColor('#ffffff')
-    bgColor && updateSidebarBgColor(bgColor)
+    updateSidebarBgColor('#ffffff')
+    baseHandler(1, '#275ECC')
   }
+  // if (darkMode === ThemeEnum.DARK) {
+  //   updateHeaderBgColor()
+  //   updateSidebarBgColor()
+  // } else {
+  //   headerBgColor && updateHeaderBgColor(headerBgColor)
+  //   bgColor && updateSidebarBgColor(bgColor)
+  // }
   // init store
   localeStore.initLocale()