菜单样式修改

applications/architecture-dee/src/layout/components/Sidebar/SidebarItem.vue

@@ -13,11 +13,9 @@
           class="user-m-icon"
           :icon-class="item.iconPath"
         />
-        <span
-          slot="title"
-        ><div class="silder-menu-item-text">
+        <div class="silder-menu-item-text">
           {{ item.name || "" }}
-        </div></span>
+        </div>
         <i v-if="item.children&&item.children.length>0" class="el-icon-arrow-down arrow" />
       </el-menu-item>
     </template>
@@ -30,11 +28,9 @@
           class="user-m-icon"
           :icon-class="item.iconPath"
         />
-        <span
-          slot="title"
-        ><div class="silder-menu-item-text">
+        <div class="silder-menu-item-text">
           {{ item.name || "" }}
-        </div></span>
+        </div>
         <!-- </div> -->
       </template>
       <sidebar-item

applications/architecture-dee/src/layout/components/Sidebar/index.vue

@@ -123,11 +123,11 @@ export default {
     border-radius: 2px;
   }
   .user-m-icon {
-    font-size: 24px !important;
+    font-size: 18px !important;
     // margin: 0 !important;
   }
   .menu-m-icon {
-    width: 24px;
+    width: 18px;
     // height: 24px;
   }
 }

applications/architecture-dee/src/layout/components/Sidebar_ori/FixiOSBug.js

+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}

applications/architecture-dee/src/layout/components/Sidebar_ori/Link.vue

+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+// import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SidebarLink',
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      // if (isExternal(url)) {
+      //   return {
+      //     is: 'dataPackageInfo',
+      //     href: url,
+      //     target: '_blank',
+      //     rel: 'noopener'
+      //   }
+      // }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>

applications/architecture-dee/src/layout/components/Sidebar_ori/SidebarItem.vue

+<template>
+  <div v-if="!item.hidden" class="menu-wrapper">
+    <template v-if="hasOneShowingChild(item.children || [], item)">
+      <el-menu-item
+        :index="index"
+        :class="{ 'submenu-title-noDropdown': !isNest ,}"
+        @click.native="toPage(item)"
+      >
+        <img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath">
+
+        <svg-icon
+          v-else-if="showSvg(item)"
+          class="user-m-icon"
+          :icon-class="item.iconPath"
+        />
+        <span
+          slot="title"
+        ><div class="silder-menu-item-text">
+          {{ item.name || "" }}
+        </div></span>
+        <i v-if="item.children&&item.children.length>0" class="el-icon-arrow-down arrow" />
+      </el-menu-item>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="index" popper-append-to-body>
+      <template slot="title">
+        <img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath">
+        <svg-icon
+          v-else-if="showSvg(item)"
+          class="user-m-icon"
+          :icon-class="item.iconPath"
+        />
+        <span
+          slot="title"
+        ><div class="silder-menu-item-text">
+          {{ item.name || "" }}
+        </div></span>
+        <!-- </div> -->
+      </template>
+      <sidebar-item
+        v-for="(child, childIndex) in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :index="index + '-' + childIndex"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import FixiOSBug from './FixiOSBug'
+
+export default {
+  name: 'SidebarItem',
+  mixins: [FixiOSBug],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: [String, Number],
+      default: ''
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    toPage(data, basePath) {
+      if (data.menuSource === '1') {
+        const page = {
+          path: `/iframePage/${encodeURIComponent(data.menuUrl)}`,
+          query: {}
+        }
+        if (data.name) {
+          page.query = { title: data.name }
+        }
+        if (data.menuRootAppId) {
+          page.query.menuRootAppId = data.menuRootAppId
+        }
+        this.$router.push(page)
+      } else {
+        const item = data.dxApplicationPage
+        if (!item) {
+          this.$message.warning('当前菜单下未挂载页面，请联系管理员进行分配')
+          return
+        }
+        let page
+        if (item.type === '1') {
+          page = {
+            path: `/page/${item.pageKey}`,
+            query: {}
+          }
+        } else if (item.type === '2') {
+          page = {
+            path: item.route,
+            query: {}
+          }
+        }
+        if (item.name) {
+          page.query = { title: item.name }
+        }
+        if (data.menuRootAppId) {
+          page.query.menuRootAppId = data.menuRootAppId
+        }
+        this.$router.push(page)
+      }
+    },
+    showIcon(meta) {
+      return meta && !!meta.iconPath && meta.iconPath.indexOf('.') > -1
+    },
+    showSvg(meta) {
+      return meta && !!meta.iconPath
+    },
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter((item) => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return false
+      }
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.menu-wrapper {
+  margin-top: 6px;
+
+  .el-submenu__title,
+  .el-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: rgb(236, 242, 251);
+  }
+
+  .el-submenu__title::after {
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    border-bottom: 4px solid #757F8B;
+    border-left: 4px solid transparent;
+  }
+
+  .el-menu-item:hover {
+    .arrow {
+      transform: rotate(90deg);
+      transition: .3s;
+    }
+
+    .menu-m-icon {
+      filter: brightness(100);
+    }
+  }
+
+  .arrow {
+    position: absolute;
+    right: 1px;
+    font-size: 12px;
+  }
+
+  .el-submenu:hover {
+    .el-submenu__title::after {
+      border-bottom: 4px solid white;
+    }
+
+    .menu-m-icon {
+      filter: brightness(100);
+    }
+  }
+}
+</style>

applications/architecture-dee/src/layout/components/Sidebar_ori/index.vue

+<template>
+  <div class="aside">
+    <el-scrollbar v-show="isCollapse && !$route.query.showMenu" wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="true"
+        background-color="inherit"
+        :text-color="variables.menuText"
+        :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <template v-for="(item, topMenuIndex) in menus">
+          <sidebar-item
+            :key="topMenuIndex"
+            :item="item"
+            :index="topMenuIndex + ''"
+          />
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+// import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+import _cloneDeep from 'lodash.clonedeep'
+
+export default {
+  name: 'Sidebar',
+  components: { SidebarItem },
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'routes', 'menus']),
+    // routes() {
+    //   return this.$router.options.routes
+    // },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return this.sidebar.opened
+    }
+  },
+  watch: {
+    // $route: {
+    //   handler: function(val) {
+    //   },
+    //   immediate: true
+    // }
+  },
+  created() {
+    // if (this.menus.length === 0) {
+    //   let menus = localStorage.getItem('menu')
+    //   menus = JSON.parse(menus)
+    //   if (menus) {
+    //     this.$store.dispatch('menu/updateMenu', menus)
+    //   }
+    // }
+  },
+  mounted() {},
+  methods: {
+    sortMenuFun(value) {
+      return _cloneDeep(value).sort((a, b) => {
+        return a.sort - b.sort
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../../styles/variables";
+
+.aside {
+  width: $asideBarWidth !important;
+  overflow: hidden;
+  height: 100%;
+  background-color: #FFFFFF;
+  .el-scrollbar__view {
+    border: 1px solid #D3DBE1;
+    box-sizing: border-box;
+  }
+
+  /deep/ .el-menu-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 !important;
+  }
+
+  /deep/ .el-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  /deep/ .el-menu-item:focus {
+    background-color: transparent !important;
+
+    .icon {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  .icon {
+    width: 30px;
+    height: 30px;
+    padding: 8px;
+    border-radius: 2px;
+  }
+  .user-m-icon {
+    font-size: 24px !important;
+    // margin: 0 !important;
+  }
+  .menu-m-icon {
+    width: 24px;
+    // height: 24px;
+  }
+}
+</style>

applications/architecture-dee/src/layout/components/TagsView/index.vue

@@ -543,7 +543,7 @@ export default {
     position: absolute;
     left: 0;
     top: $navBarHeight;
-    width: 50px;
+    width: $asideBarWidth;
     z-index: 1002;
     height: 34px;
     display: flex;

applications/architecture-dee/src/styles/sidebar.scss

@@ -76,8 +76,8 @@
 
         .el-menu-item,
         .el-submenu__title {
-          height: 40px;
-          line-height: 40px;
+          height: 34px;
+          line-height: 34px;
 
         }
 
@@ -86,12 +86,14 @@
         }
       }
     }
-
+    .menu-wrapper>.submenu-title-noDropdown{
+     padding-left: 0px!important;
+    }
     // menu hover
     .submenu-title-noDropdown,
 
     .is-active > .el-submenu__title {
-      color: $subMenuActiveText !important;
+      // color: $subMenuActiveText !important;
     }
 
     & .nest-menu .el-submenu > .el-submenu__title,
@@ -116,7 +118,9 @@
       width: $asideBarWidth;
 
       .menu-m-icon {
-        margin: 0 auto;
+        // margin: 0 auto;
+        margin-right: 6px;
+        margin-left: 4px;
       }
     }
 

applications/architecture-dee/src/styles/variables.scss

@@ -7,7 +7,7 @@ $titleHeight: 50px;
 $navBarHeight: 35px;
 $tabBarHeight: 38px;
 $asideBarHeight: 48px;
-$asideBarWidth: 50px;
+$asideBarWidth:180px;
 $asideBarHideWidth: 0;
 $asideBarActiveWidth: 220px;
 $margin: 10px;
@@ -16,7 +16,7 @@ $icon-size: 16px;
 $link-color: #2363AF;
 $sideBarWidth: 210px;
 // sidebar
-$menuText:#3590BE;
+$menuText:#212121;
 $menuActiveText:#FFF;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951