feat(menu): Restore side bar settings and added menu mouse move in mo…

…de light style (#3295) * feat(menu): Added menu mouse move in style * feat: 恢复菜单主题设置 * type(setting): change the function name to a more appropriate one --------- Co-authored-by: invalid w <[email protected]>
vbenjs · Nov 18, 2023 · 003a951 · 003a951
1 parent 3575106
commit 003a951
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
@@ -161,9 +161,9 @@
       white-space: nowrap;
       cursor: pointer;
 
-      &:hover {
-        color: @primary-color;
-      }
+      // &:hover {
+      //   color: @primary-color;
+      // }
 
       .@{menu-prefix-cls}-tooltip {
         width: calc(100% - 0px);
@@ -226,6 +226,16 @@
       &-active.@{menu-prefix-cls}-submenu {
         color: @primary-color;
       }
+
+      &:not(&-selected):hover {
+        background-color: rgb(0 0 0 / 6%);
+      }
+    }
+
+    &-light&-vertical &-submenu-title {
+      &:not(&-selected):hover {
+        background-color: rgb(0 0 0 / 6%);
+      }
     }
 
     &-light&-vertical&-collapse {

diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
@@ -3,7 +3,7 @@ import { BasicDrawer } from '/@/components/Drawer/index';
 import { Divider } from 'ant-design-vue';
 import {
   TypePicker,
-  // ThemeColorPicker,
+  ThemeColorPicker,
   SettingFooter,
   SwitchItem,
   SelectItem,
@@ -38,6 +38,7 @@ import {
 //   SIDE_BAR_BG_COLOR_LIST,
 //   APP_PRESET_COLOR_LIST,
 // } from '/@/settings/designSetting';
+import { SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
 
 const { t } = useI18n();
 
@@ -73,7 +74,7 @@ export default defineComponent({
       getTopMenuAlign,
       getAccordion,
       getMenuWidth,
-      // getMenuBgColor,
+      getMenuBgColor,
       getIsTopMenu,
       getSplit,
       getIsMixSidebar,
@@ -124,15 +125,15 @@ export default defineComponent({
     //   );
     // }
 
-    // function renderSiderTheme() {
-    //   return (
-    //     <ThemeColorPicker
-    //       colorList={SIDE_BAR_BG_COLOR_LIST}
-    //       def={unref(getMenuBgColor)}
-    //       event={HandlerEnum.MENU_THEME}
-    //     />
-    //   );
-    // }
+    function renderSideBarTheme() {
+      return (
+        <ThemeColorPicker
+          colorList={SIDE_BAR_BG_COLOR_LIST}
+          def={unref(getMenuBgColor)}
+          event={HandlerEnum.MENU_THEME}
+        />
+      );
+    }
 
     // function renderMainTheme() {
     //   return (
@@ -417,9 +418,9 @@ export default defineComponent({
         {/* <Divider>{() => t('layout.setting.sysTheme')}</Divider>
         {renderMainTheme()}
         <Divider>{() => t('layout.setting.headerTheme')}</Divider>
-        {renderHeaderTheme()}
+        {renderHeaderTheme()} */}
         <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
-        {renderSiderTheme()} */}
+        {renderSideBarTheme()}
         <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
         {renderFeatures()}
         <Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>

diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
@@ -402,6 +402,10 @@
             background-color: unset;
             color: @primary-color;
           }
+
+          &:not(&--active):hover {
+            background-color: rgb(0 0 0 / 6%);
+          }
         }
       }
       .@{prefix-cls}-menu-list {
@@ -424,9 +428,9 @@
 
     &.dark {
       &.open {
-        .@{prefix-cls}-logo {
-          // border-bottom: 1px solid @border-color;
-        }
+        // .@{prefix-cls}-logo {
+        //   border-bottom: 1px solid @border-color;
+        // }
 
         > .scrollbar {
           border-right: 1px solid @border-color;