improve: 菜单样式调整

template/admin/src/components/main/components/fullscreen/fullscreen.vue

@@ -85,6 +85,8 @@ export default {
 }
 .full-screen-btn-con .ivu-tooltip-rel i {
   font-size: 20px !important;
+  color: rgba(0, 0, 0, 0.65);
+
 }
 .full-screen-btn-con .ivu-tooltip-rel {
   height: 50px;

template/admin/src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="custom-bread-crumb">
     <Breadcrumb :style="{ fontSize: `${fontSize}px` }">
-      <BreadcrumbItem v-for="item in list" :key="`${item.path}`" v-if="listLast[0].path !== homePath">
+      <BreadcrumbItem v-for="item in list" :key="`${item.path}`" :to="item.path" v-if="listLast[0].path !== homePath">
         <common-icon style="margin-right: 4px" :type="item.icon || ''" />
         {{ item.title }}
       </BreadcrumbItem>
-      <BreadcrumbItem v-if="listLast[0].path === homePath">
+      <BreadcrumbItem :to="listLast[0].path" v-if="listLast[0].path === homePath">
         <common-icon style="margin-right: 4px" :type="listLast[0].icon || ''" />
         {{ listLast[0].title }}
       </BreadcrumbItem>
-      <BreadcrumbItem v-else>
+      <BreadcrumbItem v-else :to="listLast[0].path">
         <common-icon style="margin-right: 4px" :type="listLast[0].icon || ''" />
         {{ listLast[0].title }}
       </BreadcrumbItem>
@@ -19,7 +19,7 @@
 <script>
 import { showTitle } from '@/libs/util';
 import CommonIcon from '_c/common-icon';
-import settings  from '@/setting'
+import settings from '@/setting';
 import './custom-bread-crumb.less';
 export default {
   name: 'customBreadCrumb',
@@ -45,7 +45,7 @@ export default {
       default: false,
     },
   },
-  data(){
+  data() {
     return {
       homePath: settings.routePre + '/home',
     };
@@ -64,7 +64,9 @@ export default {
 };
 </script>
 <style lang="less">
-.custom-bread-crumb {
-  margin-left: 46px !important;
+.ivu-breadcrumb-item-link {
+  .ivu-icon {
+    line-height: 14px;
+  }
 }
 </style>

template/admin/src/components/main/components/header-bar/header-bar.less

@@ -3,6 +3,13 @@
   height: 100%;
   position: relative;
   color: #fff !important;
+  display: flex;
+  justify-content: space-between;
+
+  .header-l{
+    display: flex;
+    align-items: center;
+  }
   .custom-content-con {
     float: right;
     height: auto;

template/admin/src/components/main/components/header-bar/header-bar.vue

@@ -1,26 +1,25 @@
 <template>
   <div class="header-bar">
-    <!-- <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger> -->
-    <!-- <span class="i-layout-header-trigger" @click="handleReload">
+    <div class="header-l">
+      <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
+      <!-- <span class="i-layout-header-trigger" @click="handleReload">
       <Icon type="ios-refresh" color='#fff' />
     </span> -->
-    <!-- <custom-bread-crumb
-      show-icon
-      style="margin-left: 30px"
-      :list="breadCrumbList"
-      :listLast="crumbPast"
-      :collapsed="collapsed"
-    ></custom-bread-crumb> -->
+      <custom-bread-crumb
+        show-icon
+        :list="breadCrumbList"
+        :listLast="crumbPast"
+        :collapsed="collapsed"
+      ></custom-bread-crumb>
+    </div>
+
     <div class="custom-content-con">
       <slot></slot>
     </div>
   </div>
 </template>
 <style scoped lang="less">
-.ivu-icon-ios-refresh {
-  font-size: 23px;
-  width: 20px;
-}
+
 .i-layout-header-trigger {
   position: absolute;
   margin: 0 10px;
@@ -61,6 +60,7 @@ export default {
           });
         });
       }
+      console.log('selectMenu',openMenus)
       return selectMenu;
       // return this.$store.state.app.breadCrumbList
     },

template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less

@@ -3,7 +3,6 @@
 }
 @size: 40px;
 .sider-trigger-a {
-  padding: 6px;
   display: inline-block;
   text-align: center;
   // color: #fff;

template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue

@@ -28,21 +28,18 @@ export default {
 </script>
 <style lang="less" scoped>
 .sider-menu {
-  position: absolute;
-  width: 100%;
-  max-width: 90px;
-  left: 0;
-  bottom: 0;
-  height: 40px;
+  height: 50px;
+  // border-top: 1px solid #f2f2f2;
+  color: #515a6e;
+  padding: 0 16px;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: 1px solid #f2f2f2;
-  color: #515a6e;
 }
 @import './sider-trigger.less';
 .sider-trigger-a {
-  padding: 14px 6px;
+  height: 50px;
+  color: rgba(0, 0, 0, 0.65);
 }
 .iconcaidanshouqi {
   font-size: 16px;

template/admin/src/components/main/components/header-notice/index.vue

@@ -3,7 +3,7 @@
     <Dropdown @on-click="jumpUrl" :transfer="true">
       <div>
         <Badge dot :count="needList.length ? needList.length : 0">
-          <Icon type="ios-notifications-outline" size="23"></Icon>
+          <Icon class="icon" type="md-notifications-outline" size="20"></Icon>
         </Badge>
       </div>
       <DropdownMenu slot="list" v-show="needList.length">
@@ -21,6 +21,9 @@
   display: flex;
   align-items: center;
 }
+.icon {
+  color: rgba(0, 0, 0, 0.65);
+}
 .ivu-dropdown-item .iconImg {
   margin-right: 10px;
 }
@@ -44,7 +47,7 @@
   height: 32px;
   line-height: 32px;
   border-radius: 50%;
-  color: #fff;
+  color: rgba(0, 0, 0, 0.65);
   font-size: 18px;
   padding-right: 10px;
   vertical-align: middle;

template/admin/src/components/main/components/header-search/index.vue

@@ -25,9 +25,15 @@
 .search /deep/ .ivu-select-selection {
   margin-right: 20px;
   border-radius: 30px;
+  border: none !important;
 }
 .search /deep/ .ivu-select-visible .ivu-select-selection {
   box-shadow: unset !important;
+  border: none !important;
+}
+.search /deep/ .ivu-select-selection:hover,
+.search /deep/ .ivu-select-selection:active {
+  border: none;
 }
 .search /deep/ li.ivu-select-item {
   text-align: left;
@@ -36,7 +42,7 @@
 .search /deep/ .select .ivu-select-item {
   font-size: 13px !important;
 }
-.search /deep/ .ivu-select-input{
+.search /deep/ .ivu-select-input {
   padding-left: 19px;
   border-radius: 30px;
   background-color: #f0faff;

template/admin/src/components/main/components/reload/reload.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="refresh-btn-con" @click="handleReload">
     <Tooltip content="刷新" placement="bottom">
-      <Icon class="icon" type="ios-refresh" color="rgba(255,255,255,.8)" />
+      <Icon class="icon" type="ios-refresh" />
     </Tooltip>
   </div>
 </template>
@@ -24,7 +24,12 @@ export default {
   margin-right: 17px !important;
   cursor: pointer;
   font-size: 28px;
-  color: #f2f2f2;
+  color: rgba(0, 0, 0, 0.65);
+}
+.icon {
+  font-size: 24px;
+  width: 20px;
+  color: rgba(0, 0, 0, 0.65);
 }
 // .icon:hover{
 //   animation: rotate 6s linear infinite;

template/admin/src/components/main/components/side-menu/collapsed-menu.vue

@@ -12,7 +12,8 @@
       :class="{ on: parentItem.path == activeMenuPath }"
       @mouseover="handleMousemove($event, children)"
       :style="{ textAlign: !hideTitle ? 'left' : '' }"
-      ><common-icon :color="textColor" :type="parentItem.icon" /><Icon
+      @click="handClick(parentItem.path)"
+      ><common-icon :type="parentItem.icon" /><Icon
         style="float: right"
         v-if="!hideTitle"
         type="ios-arrow-forward"
@@ -20,7 +21,7 @@
       />
       <span class="title">{{ parentItem.title }}</span></a
     >
-    <DropdownMenu ref="dropdown" slot="list">
+    <DropdownMenu ref="dropdown" slot="list" v-if="children">
       <div v-for="child in children">
         <template v-if="child.auth === undefined">
           <collapsed-menu
@@ -66,6 +67,10 @@ export default {
   },
   methods: {
     handleClick(name) {
+      console.log(name, '1');
+      this.$emit('on-click', name, this.activeMenuPath);
+    },
+    handClick(name) {
       this.$emit('on-click', name, this.activeMenuPath);
     },
     handleMousemove(event, children) {
@@ -81,22 +86,21 @@ export default {
   },
 };
 </script>
-<style lang="stylus" scoped>
->>> .menu-title {
-  // width: 100px !important;
-}
-.collased-menu-dropdown{
-  width 100%
+<style lang="less" scoped>
+@import './side-menu.less';
+
+.collased-menu-dropdown {
+  width: 100%;
 }
-.child-menu{
-  display flex
-  justify-content space-between
-  width 100%
+.child-menu {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 /deep/ .ivu-dropdown-rel {
-  width: 75px !important;
+  width: @side-width !important;
 }
 .drop-menu-a /deep/ .ivu-dropdown-rel {
-  width: 75px !important;
+  width: @side-width !important;
 }
 </style>

template/admin/src/components/main/components/side-menu/side-menu-item.vue

@@ -1,7 +1,6 @@
 <template>
   <Submenu :name="parentItem.path">
     <template slot="title">
-      <common-icon :type="parentItem.icon || ''" />
       <span>{{ parentItem.title }}</span>
     </template>
     <template v-for="item in children">
@@ -9,13 +8,13 @@
         <template v-if="item.children && item.children.length === 1">
           <side-menu-item v-if="showChildren(item)" :key="`menu${item.path}`" :parent-item="item"></side-menu-item>
           <menu-item v-else :name="item.path" :key="`menu${item.children[0].path}`"
-            ><common-icon :type="item.children[0].icon || ''" /><span class="title">{{ item.children[0].title }}</span></menu-item
+            ><span class="title">{{ item.children[0].title }}</span></menu-item
           >
         </template>
         <template v-else>
           <side-menu-item v-if="showChildren(item)" :key="`menu${item.path}`" :parent-item="item"></side-menu-item>
           <menu-item v-else :name="item.path" :key="`menu${item.path}`"
-            ><common-icon :type="item.icon || ''" /><span class="title">{{ item.title }}</span></menu-item
+            ><span class="title">{{ item.title }}</span></menu-item
           >
         </template>
       </template>

template/admin/src/components/main/components/side-menu/side-menu.less

@@ -1,17 +1,24 @@
+@side-width: 80px;
+@side-height: 50px;
+@side-child-width: 160px;
+@child-menu-height: 50px;
+@side-dark-theme: #282c34;
+@side-dark-theme-font-color: #fff;
 .side-menu-wrapper {
   user-select: none;
+  height: 100%;
   .menu-collapsed {
-    padding-top: 8px;
+    height: 100%;
+    background-color: @side-dark-theme;
+    color: #fff !important;
     .ivu-dropdown {
       width: 100%;
-      margin-bottom: 4px;
       .ivu-dropdown-rel a {
         width: 100%;
       }
     }
     .ivu-tooltip {
       width: 100%;
-      margin-bottom: 4px;
 
       .ivu-tooltip-rel {
         width: 100%;
@@ -28,11 +35,14 @@
     }
   }
   a.drop-menu-a {
-    display: inline-block;
-    padding: 10px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: @side-height;
+    line-height: @side-height;
     width: 100%;
     text-align: center;
-    color: #495060;
+    color: @side-dark-theme-font-color;
   }
 }
 

template/admin/src/components/main/components/side-menu/side-menu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="side-menu-wrapper">
-    <slot></slot>
-    <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
+    <!-- <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger> -->
     <div class="side-menu-box" v-show="!collapsed">
       <div class="parent-menu">
+        <slot></slot>
         <Menu
           ref="menu"
+          class="parent-menus"
           :active-name="headerName"
           :open-names="openedNames"
           :accordion="accordion"
           :theme="theme"
-          width="75px"
           @on-open-change="openNameData"
           @on-select="handleSelect"
         >
@@ -31,7 +31,7 @@
           :open-names="openNames"
           :accordion="accordion"
           :theme="theme"
-          width="145px"
+          class="child-menus"
           @on-open-change="openChildNameData"
           @on-select="handleChildSelect"
         >
@@ -44,7 +44,7 @@
                   :parent-item="item"
                 ></side-menu-item>
                 <menu-item v-else :name="item.path" :key="`menu${item.path}`"
-                  ><common-icon :type="item.children[0].icon || ''" /><span class="title">{{
+                  ><span class="title">{{
                     item.children[0].title
                   }}</span></menu-item
                 >
@@ -56,7 +56,7 @@
                   :parent-item="item"
                 ></side-menu-item>
                 <menu-item v-else :name="item.path" :key="`menu${item.path}`"
-                  ><common-icon :type="item.icon || ''" /><span class="title">{{ item.title }}</span></menu-item
+                  ><span class="title">{{ item.title }}</span></menu-item
                 >
               </template>
             </template>
@@ -66,9 +66,9 @@
     </div>
 
     <div class="menu-collapsed" v-show="collapsed">
+      <slot></slot>
       <template v-for="item in menusName">
         <collapsed-menu
-          v-if="item.children && item.children.length > 0"
           @on-click="collHandleSelect"
           :hide-title="true"
           :activeMenuPath="headerName"
@@ -78,16 +78,16 @@
           :parent-item="item"
           :key="`drop-menu-${item.path}`"
         ></collapsed-menu>
-        <Tooltip transfer v-else :content="item.title" placement="right" :key="`drop-menu-${item.path}`">
+        <!-- <Tooltip transfer v-else :content="item.title" placement="right" :key="`drop-menu-${item.path}`">
           <a
             @click="collHandleSelect(item)"
             class="drop-menu-a"
             :class="{ on: item.path == headerName }"
             :style="{ textAlign: 'center' }"
-            ><common-icon :color="textColor" :type="item.icon || (item.children && item.children[0].icon)" />
+            ><common-icon :type="item.icon || (item.children && item.children[0].icon)" />
             <span class="title">{{ item.title }}</span>
           </a>
-        </Tooltip>
+        </Tooltip> -->
       </template>
     </div>
   </div>
@@ -222,9 +222,17 @@ export default {
   },
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/deep/ .ivu-menu-vertical .ivu-menu-submenu-title-icon {
+  right: 8px;
+}
+
+</style>
 <style lang="less">
 @import './side-menu.less';
+.ivu-layout-sider{
+  overflow: unset !important;
+}
 .ivu-menu {
   .side-menu-wrapper {
     position: relative;
@@ -284,12 +292,6 @@ export default {
     color: #fff !important;
   }
 }
-.side-menu-wrapper a.drop-menu-a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 75px !important;
-}
 
 .side-menu-box {
   display: flex;
@@ -298,8 +300,6 @@ export default {
     line-height: 14px;
     display: flex;
     align-items: center;
-    padding: 10px 10px;
-    margin-bottom: 4px;
     .ivu-icon {
       font-size: 14px;
       margin-right: 8px;
@@ -307,19 +307,26 @@ export default {
   }
   .parent-menu {
     z-index: 9;
-    padding: 0 8px;
-    box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.06);
-    height: calc(~'100vh - 50px');
+    width: @side-width;
+    background-color: @side-dark-theme !important;
+    height: 100vh;
+    .parent-menus {
+      width: @side-width !important;
+    }
+    .ivu-menu {
+      color: #fff !important;
+    }
+    .ivu-menu-light {
+      background-color: unset;
+    }
     .ivu-menu-item-selected {
       background-color: #1890ff !important;
       color: #fff !important;
-      border-radius: 4px;
     }
 
     .ivu-menu-vertical .ivu-menu-item:hover {
       color: #1890ff !important;
       background-color: rgba(24, 144, 255, 0.1) !important;
-      border-radius: 4px;
       .ivu-icon {
         color: #1890ff !important;
       }
@@ -327,61 +334,72 @@ export default {
     .ivu-menu-item.ivu-menu-item-active:hover {
       background-color: #1890ff !important;
       color: #fff !important;
-      border-radius: 4px;
       .ivu-icon {
         color: #fff !important;
       }
     }
     .ivu-menu-vertical .ivu-menu-item {
-      padding: 10px 10px;
-      margin-bottom: 8px;
+      padding: 18px 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       .title {
-        font-size: 13px;
-        line-height: 13px;
+        font-size: 14px;
+        line-height: 14px;
       }
     }
     .ivu-menu-vertical .ivu-menu-item:first-child {
-      margin-top: 8px;
+      // margin-top: 8px;
     }
   }
   .child-menu {
     z-index: 8;
+    box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.06);
+    .child-menus {
+      width: @side-child-width !important;
+    }
+    .ivu-divider {
+      height: 50px;
+      line-height: 50px;
+      margin: 0;
+      width: @side-child-width !important;
+    }
     .ivu-menu-vertical .ivu-menu-item {
-      padding: 13px 10px;
+      height: @child-menu-height;
       display: flex;
       align-items: center;
       .title {
-        font-size: 13px;
-        line-height: 13px;
+        font-size: 14px;
+        line-height: 14px;
       }
     }
-    .ivu-menu-submenu {
-      .ivu-menu-item {
-        padding-left: 23px !important;
-      }
-      .ivu-menu-submenu {
-        .ivu-menu-submenu-title {
-          padding-left: 23px !important;
-        }
-        .ivu-menu-item {
-          padding-left: 35px !important;
-        }
-      }
-    }
-    .ivu-menu-vertical .ivu-menu-submenu-title {
-      font-size: 13px;
-      padding: 12px 10px;
-      line-height: 16px;
-    }
+    // .ivu-menu-submenu {
+    //   .ivu-menu-item {
+    //     padding-left: 23px !important;
+    //   }
+    //   .ivu-menu-submenu {
+    //     .ivu-menu-submenu-title {
+    //       padding-left: 23px !important;
+    //     }
+    //     .ivu-menu-item {
+    //       padding-left: 35px !important;
+    //     }
+    //   }
+    // }
+    // .ivu-menu-vertical .ivu-menu-submenu-title {
+    //   font-size: 14px;
+    //   padding: 12px 10px;
+    //   line-height: 16px;
+    // }
     .cat-name {
+      width: 100%;
       font-size: 14px;
+      height: 50px;
       line-height: 16px;
       font-weight: 600;
       color: #303133;
       padding: 15px;
+      text-align: center;
       border-bottom: 1px solid #f2f2f2;
     }
   }
@@ -400,11 +418,16 @@ export default {
   left: 95px !important;
 }
 .menu-collapsed {
-  padding: 0 8px;
+  .side-menu-wrapper a.drop-menu-a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @side-dark-theme-font-color;
+    width: @side-width !important;
+  }
   .drop-menu-a:hover {
-    color: #1890ff;
+    color: #1890ff !important;
     background-color: rgba(24, 144, 255, 0.1) !important;
-    border-radius: 4px;
     .ivu-icon {
       color: #1890ff !important;
     }
@@ -412,7 +435,6 @@ export default {
   .drop-menu-a.on:hover {
     background-color: #1890ff !important;
     color: #fff !important;
-    border-radius: 4px;
     .ivu-icon {
       color: #fff !important;
     }
@@ -420,7 +442,6 @@ export default {
   .drop-menu-a.on {
     background-color: #1890ff !important;
     color: #fff !important;
-    border-radius: 4px;
     .ivu-icon {
       color: #fff !important;
     }
@@ -429,17 +450,17 @@ export default {
     font-size: 14px;
     line-height: 14px;
     display: flex;
+    padding: 18px 0;
     align-items: center;
-    padding: 10px 11px;
-    margin-bottom: 4px;
+    width: @side-width;
     flex-wrap: nowrap;
     .ivu-icon {
       font-size: 14px;
       margin-right: 8px;
     }
     .title {
-      font-size: 13px;
-      line-height: 13px;
+      font-size: 14px;
+      line-height: 14px;
       white-space: nowrap;
     }
   }

template/admin/src/components/main/components/user/user.vue

@@ -5,7 +5,7 @@
       <!--<Avatar :src="avatars"/>-->
       <!--</Badge>-->
       <!--<Icon :size="18" type="md-arrow-dropdown"></Icon>-->
-      <span>{{ info.account }}</span>
+      <span class="account">{{ info.account }}</span>
       <DropdownMenu slot="list">
         <!--<DropdownItem name="message">-->
         <!--消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>-->
@@ -23,6 +23,9 @@
   margin-right: 6px;
   margin-bottom: 2px;
 }
+.account {
+  color: rgba(0, 0, 0, 0.65);
+}
 .user-avatar-dropdown .ivu-dropdown-item ~ .ivu-dropdown-item {
   border-top: 1px solid #e8eaec;
 }

template/admin/src/components/main/main.less

@@ -1,7 +1,8 @@
+@bar-height: 50px;
+
 .main {
   .logo-con {
-    height: 50px;
-    margin-left: 10px;
+    height: @bar-height;
     img {
       height: 44px;
       width: auto;
@@ -15,8 +16,8 @@
     width: 100%;
   }
   .ivu-layout-header {
-    height: 50px;
-    line-height: 50px;
+    height: @bar-height;
+    line-height: @bar-height;
   }
   .main-layout-con {
     height: calc(~"100vh - 60px");

template/admin/src/components/main/main.vue

@@ -1,46 +1,44 @@
 <template>
   <Layout style="height: 100%" class="main">
-    <Header class="header-con" v-if="!headMenuNoShow">
-      <div class="logo-con">
-        <img :src="maxLogo" key="max-logo" />
-        <!-- <img v-show="collapsed" :src="minLogo" key="min-logo" /> -->
-      </div>
-      <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
-        <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
-        <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
-        <header-notice></header-notice>
-        <Reload @on-reload="handleReload"></Reload>
-
-        <fullscreen v-model="isFullscreen" style="margin-right: 10px" />
-        <error-store
-          v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
-          :has-read="hasReadErrorPage"
-          :count="errorCount"
-        ></error-store>
-        <header-search></header-search>
-      </header-bar>
-    </Header>
-    <Layout>
-      <Sider
-        hide-trigger
-        collapsible
-        :width="sider.length ? 220 : 90"
-        :collapsed-width="isMobile ? 0 : 90"
-        v-model="collapsed"
-        :style="{ overflow: 'hidden' }"
-        v-if="!headMenuNoShow"
+    <Sider
+      hide-trigger
+      collapsible
+      :width="sider.length ? 240 : 80"
+      :collapsed-width="isMobile ? 0 : 80"
+      v-model="collapsed"
+      :style="{ overflow: 'hidden' }"
+      v-if="!headMenuNoShow"
+    >
+      <side-menu
+        accordion
+        ref="sideMenu"
+        @on-coll-change="handleCollapsedChange"
+        :active-name="$route.path"
+        :collapsed="collapsed"
+        @on-select="turnToPage"
       >
-        <side-menu
-          accordion
-          ref="sideMenu"
-          @on-coll-change="handleCollapsedChange"
-          :active-name="$route.path"
-          :collapsed="collapsed"
-          @on-select="turnToPage"
-        >
-          <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
-        </side-menu>
-      </Sider>
+        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
+        <div class="logo-con">
+          <img :src="minLogo" key="min-logo" />
+        </div>
+      </side-menu>
+    </Sider>
+    <Layout>
+      <Header class="header-con" v-if="!headMenuNoShow">
+        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
+          <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
+          <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
+          <header-notice></header-notice>
+          <Reload @on-reload="handleReload"></Reload>
+          <fullscreen v-model="isFullscreen" style="margin-right: 10px" />
+          <error-store
+            v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
+            :has-read="hasReadErrorPage"
+            :count="errorCount"
+          ></error-store>
+          <header-search></header-search>
+        </header-bar>
+      </Header>
       <Content class="main-content-con" :class="{ 'all-desk': headMenuNoShow }">
         <Layout class="main-layout-con">
           <div class="tag-nav-wrapper" v-if="!headMenuNoShow">
@@ -282,7 +280,8 @@ export default {
 .main .header-con {
   padding: 0 0px 0 0px;
   display: flex;
-  background: linear-gradient(270deg, #1570ef 0%, #1570ef 100%);
+  background: #fff;
+  box-shadow: 1px 1px 4px rgba(49, 103, 154, 0.08);
 }
 .main .logo-con img {
   height: 50px;
@@ -291,7 +290,7 @@ export default {
 .main .tag-nav-wrapper {
   // height: 10px;
   background: unset;
-  padding: 0 15px;
+  padding: 0 15px 0 17px;
 }
 .open-image {
   display: flex;

template/admin/src/main.js

@@ -68,6 +68,7 @@ import scroll from '@/libs/loading';
 import * as tools from '@/libs/tools';
 import VueTreeList from 'vue-tree-list';
 import { getHeaderName, getHeaderSider, getMenuSider, getSiderSubmenu } from '@/libs/system';
+import { getMenuopen } from '@/libs/util';
 
 // 复制到粘贴板插件
 import VueClipboard from 'vue-clipboard2';
@@ -201,6 +202,9 @@ new Vue({
       const headerName = getHeaderName(to, menuSider);
       if (headerName !== null) {
         this.$store.commit('menu/setActivePath', path);
+        let openNameList = getMenuopen(to, menuSider);
+        this.$store.commit('menus/setopenMenus', openNameList);
+        console.log(openNameList, 'openNameList');
         const openNames = getSiderSubmenu(to, menuSider);
         this.$store.commit('menu/setOpenNames', openNames);
         // 设置顶栏菜单 后台添加一个接口，设置顶部菜单