feat: new menu and top bar color selection color matching

vbenjs · Nov 11, 2020 · 7692ffb · 7692ffb
1 parent bda3e5d
commit 7692ffb
Show file tree

Hide file tree

Showing 22 changed files with 351 additions and 135 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -4,6 +4,7 @@
 
 - 表单项的`componentsProps`支持函数类型
 - 菜单新增 tag 显示
+- 新增菜单及顶栏颜色选择配色
 
 ### ⚡ Performance Improvements
 

diff --git a/index.html b/index.html
@@ -43,7 +43,7 @@
 
       .app-loading .g-loading {
         display: block;
-        width: 64px;
+        width: 48px;
         margin: 30px auto;
         -webkit-animation: load 1.2s linear infinite;
         animation: load 1.2s linear infinite;

diff --git a/src/components/Menu/src/BasicMenu.tsx b/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,20 +40,22 @@ 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,
     });
 
     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}
                 />,
               ],

diff --git a/src/components/Menu/src/MenuContent.tsx b/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!)}

diff --git a/src/components/Menu/src/SearchInput.vue b/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;
   }

diff --git a/src/components/Menu/src/index.less b/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();

diff --git a/src/design/color.less b/src/design/color.less
@@ -1,3 +1,17 @@
+:root {
+  // header
+  --header-bg-color: #394664;
+  --header-bg-hover-color: #273352;
+  --header-active-menu-bg-color: #273352;
+
+  // sider
+  --sider-dark-bg-color: #273352;
+  --sider-dark-darken-bg-color: #273352;
+  --sider-dark-lighten-1-bg-color: #273352;
+  --sider-dark-lighten-2-bg-color: #273352;
+  --sider-dark-lighten-3-bg-color: #273352;
+}
+
 @white: #fff;
 @info-color: @primary-color;
 
@@ -53,21 +67,24 @@
 // ==============Header=============
 // =================================
 
-@header-dark-bg-color: #394664;
-@header-dark-bg-hover-color: #273352;
+@header-dark-bg-color: var(--header-bg-color);
+@header-dark-bg-hover-color: var(--header-bg-hover-color);
 @header-light-bg-hover-color: #f6f6f6;
 @header-light-desc-color: #7c8087;
 @header-light-bottom-border-color: #eee;
+// top-menu
+@top-menu-active-bg-color: var(--header-active-menu-bg-color);
 
 // =================================
 // ==============Menu============
 // =================================
 
 // let -menu
-@menu-item-dark-bg-color: #273352;
-
-// top-menu
-@top-menu-active-bg-color: #273352;
+@sider-dark-bg-color: var(--sider-dark-bg-color);
+@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
+@sider-dark-lighten-1-bg-color: var(--sider-dark-lighten-1-bg-color);
+@sider-dark-lighten-2-bg-color: var(--sider-dark-lighten-2-bg-color);
+@sider-dark-lighten-3-bg-color: var(--sider-dark-lighten-3-bg-color);
 
 // trigger
 @trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);

diff --git a/src/layouts/default/header/LayoutHeader.tsx b/src/layouts/default/header/LayoutHeader.tsx
@@ -79,9 +79,8 @@ export default defineComponent({
     });
 
     const showHeaderTrigger = computed(() => {
-      const { show, trigger, hidden } = unref(getProjectConfigRef).menuSetting;
-
-      if (!show || !hidden) return false;
+      const { show, trigger, hidden, type } = unref(getProjectConfigRef).menuSetting;
+      if (type === MenuTypeEnum.TOP_MENU || !show || !hidden) return false;
       return trigger === TriggerEnum.HEADER;
     });
 

diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less
@@ -41,7 +41,7 @@
     background-size: 100% 100%;
 
     &.ant-layout-sider-dark {
-      background: @menu-item-dark-bg-color;
+      background: @sider-dark-bg-color;
     }
 
     &:not(.ant-layout-sider-dark) {