feat: new menu and top bar color selection color matching

src/components/Menu/src/BasicMenu.tsx

@@ -1,7 +1,7 @@
 import type { MenuState } from './types';
 import type { Menu as MenuType } from '/@/router/types';
 
-import { computed, defineComponent, unref, reactive, toRef, watch, onMounted, ref } from 'vue';
+import { computed, defineComponent, unref, reactive, watch, onMounted, ref, toRefs } from 'vue';
 import { Menu } from 'ant-design-vue';
 import SearchInput from './SearchInput.vue';
 import MenuContent from './MenuContent';
@@ -40,8 +40,10 @@ export default defineComponent({
     });
     const { currentRoute } = useRouter();
 
+    const { items, flatItems, isAppMenu, mode, accordion } = toRefs(props);
+
     const { handleInputChange, handleInputClick } = useSearchInput({
-      flatMenusRef: toRef(props, 'flatItems'),
+      flatMenusRef: flatItems,
       emit: emit,
       menuState,
       handleMenuChange,
@@ -49,11 +51,11 @@ export default defineComponent({
 
     const { handleOpenChange, resetKeys, setOpenKeys } = useOpenKeys(
       menuState,
-      toRef(props, 'items'),
-      toRef(props, 'flatItems'),
-      toRef(props, 'isAppMenu'),
-      toRef(props, 'mode'),
-      toRef(props, 'accordion')
+      items,
+      flatItems,
+      isAppMenu,
+      mode,
+      accordion
     );
 
     const getOpenKeys = computed(() => {
@@ -98,6 +100,8 @@ export default defineComponent({
       return cls;
     });
 
+    const showTitle = computed(() => props.collapsedShowTitle && menuStore.getCollapsedState);
+
     watch(
       () => currentRoute.value.name,
       (name: string) => {
@@ -130,9 +134,7 @@ export default defineComponent({
       const { beforeClickFn } = props;
       if (beforeClickFn && isFunction(beforeClickFn)) {
         const flag = await beforeClickFn(menu);
-        if (!flag) {
-          return;
-        }
+        if (!flag) return;
       }
       const { path } = menu;
       menuState.selectedKeys = [path];
@@ -141,9 +143,7 @@ export default defineComponent({
 
     function handleMenuChange() {
       const { flatItems } = props;
-      if (!unref(flatItems) || flatItems.length === 0) {
-        return;
-      }
+      if (!unref(flatItems) || flatItems.length === 0) return;
       const findMenu = flatItems.find((menu) => menu.path === unref(currentRoute).path);
       if (findMenu) {
         if (menuState.mode !== MenuModeEnum.HORIZONTAL) {
@@ -155,10 +155,6 @@ export default defineComponent({
       }
     }
 
-    const showTitle = computed(() => {
-      return props.collapsedShowTitle && menuStore.getCollapsedState;
-    });
-
     // render menu item
     function renderMenuItem(menuList?: MenuType[], index = 1) {
       if (!menuList) return;
@@ -183,6 +179,7 @@ export default defineComponent({
                 <MenuContent
                   item={menu}
                   level={index}
+                  isTop={props.isTop}
                   showTitle={unref(showTitle)}
                   searchValue={menuState.searchValue}
                 />,
@@ -198,6 +195,7 @@ export default defineComponent({
                   showTitle={unref(showTitle)}
                   item={menu}
                   level={index}
+                  isTop={props.isTop}
                   searchValue={menuState.searchValue}
                 />,
               ],

src/components/Menu/src/MenuContent.tsx

@@ -26,6 +26,10 @@ export default defineComponent({
       type: Number as PropType<number>,
       default: 0,
     },
+    isTop: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
   },
   setup(props) {
     /**
@@ -56,14 +60,16 @@ export default defineComponent({
       if (!props.item) {
         return null;
       }
-      const { showTitle } = props;
+      const { showTitle, isTop } = props;
       const { name, icon } = props.item;
       const searchValue = props.searchValue || '';
       const index = name.indexOf(searchValue);
 
       const beforeStr = name.substr(0, index);
       const afterStr = name.substr(index + searchValue.length);
-      const cls = showTitle ? 'show-title' : 'basic-menu__name';
+      let cls = showTitle ? ['show-title'] : ['basic-menu__name'];
+
+      isTop && !showTitle && (cls = []);
       return (
         <>
           {renderIcon(icon!)}

src/components/Menu/src/SearchInput.vue

@@ -102,7 +102,7 @@
 
   .set-bg() {
     color: #fff;
-    background: @input-dark-bg-color;
+    background: @sider-dark-lighten-1-bg-color;
     border: 0;
     outline: none;
   }

src/components/Menu/src/index.less

@@ -52,10 +52,11 @@
   // collapsed show title end
   .ant-menu-submenu-title {
     > .basic-menu__name {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-      align-items: center;
+      .basic-menu__tag {
+        float: right;
+        margin-top: @app-menu-item-height / 2;
+        transform: translate(0%, -50%);
+      }
     }
   }
 
@@ -254,7 +255,7 @@
   // 层级样式
   &.ant-menu-dark:not(.basic-menu__sidebar-hor) {
     overflow-x: hidden;
-    background: @menu-item-dark-bg-color;
+    background: @sider-dark-bg-color;
     .active-menu-style();
 
     .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
@@ -263,21 +264,20 @@
     }
 
     .basic-menu-item__level1 {
-      background-color: @menu-item-dark-bg-color;
+      background-color: @sider-dark-bg-color;
 
       > .ant-menu-sub > li {
-        background-color: lighten(@menu-item-dark-bg-color, 6%);
+        background-color: @sider-dark-lighten-1-bg-color;
       }
     }
 
     .basic-menu-item__level2:not(.ant-menu-item-selected),
     .ant-menu-sub {
-      background-color: lighten(@menu-item-dark-bg-color, 6%);
-      // background-color: @sub-menu-item-dark-bg-color;
+      background-color: @sider-dark-lighten-1-bg-color;
     }
 
     .basic-menu-item__level3:not(.ant-menu-item-selected) {
-      background-color: lighten(@menu-item-dark-bg-color, 10%);
+      background-color: @sider-dark-lighten-2-bg-color;
     }
 
     .ant-menu-submenu-title {
@@ -290,7 +290,7 @@
     &.ant-menu-inline-collapsed {
       .ant-menu-submenu-selected,
       .ant-menu-item-selected {
-        background: darken(@menu-item-dark-bg-color, 6%) !important;
+        background: @sider-dark-darken-bg-color !important;
       }
     }
   }
@@ -359,7 +359,7 @@
 .ant-menu-dark {
   &.ant-menu-submenu-popup {
     > ul {
-      background: @menu-item-dark-bg-color;
+      background: @sider-dark-bg-color;
     }
 
     .active-menu-style();