adspecs 0.1.12

package/references/front-demo/src/views/layout/components/Sidebar/index.vue

@@ -0,0 +1,464 @@
+<template>
+  <section :class="['sidebar-container-wrap', { 'shrink-sidebar': !sidebar.opened }, { 'close-sidebar': !routes.length }]">
+    <!--    搜索框-->
+    <div v-if="routes.length" :class="['menu-search', { 'no-padding': !sidebar.opened }]">
+      <menu-search v-if="sidebar.opened" />
+      <el-popover v-else placement="right" trigger="click">
+        <menu-search />
+        <template #reference>
+          <el-button style="width: 28px; height: 28px" circle>
+              <el-icon :size="12">
+                <Search />
+              </el-icon>
+          </el-button>
+        </template>
+      </el-popover>
+    </div>
+    <el-scrollbar
+        ref="scrollBar"
+        :class="['sidebar-container', { 'shrink-sidebar': !sidebar.opened }, { 'close-sidebar': !routes.length }]"
+        wrapClass="scrollbar-wrapper"
+    >
+      <!--    菜单-->
+      <a-menu
+          :class="menuStyle"
+          :selected-keys="[$route.path]"
+          v-model:open-keys="openKeys"
+          :mode="menuMode"
+          :inlineIndent="20"
+          trigger-sub-menu-action="hover"
+          v-bind:[menuInlineCollapsed]="!sidebar.opened && menuMode === 'inline'"
+          @mouseenter="mouseenterHandler"
+      >
+        <template v-for="route in routes" >
+          <template v-if="!route.hidden && route.meta && !isCustomMenu">
+            <sub-menu v-if="(!route.noChild && route.children) || route.meta.isFetch" :route="route" :key="route.path" />
+            <menu-item v-else :route="route" :key="route.path"/>
+          </template>
+          <!--自定义菜单风格-->
+          <template v-if="isCustomMenu || false">
+            <custom-slider-menu
+                :key="route.path"
+                :routes="route"
+                v-if="route.children && route.children.length"></custom-slider-menu>
+            <menu-item class="custom-two-style" v-else :route="route" :key="route.path" />
+          </template>
+        </template>
+      </a-menu>
+    </el-scrollbar>
+
+    <!--    折叠按钮-->
+    <toggle-sidebar v-if="routes.length" class="toggle-sidebar-btn" />
+  </section>
+</template>
+
+<script>
+import SubMenu from './components/SubMenu.js'
+import MenuItem from './components/MenuItem'
+import MenuSearch from './components/MenuSearch'
+import ToggleSidebar from './components/ToggleSidebar'
+import CustomSliderMenu from "./components/CustomSliderMenu.vue";
+
+import { Menu } from 'ant-design-vue'
+import 'ant-design-vue/lib/menu/style'
+import { Search } from '@element-plus/icons-vue'
+
+export default {
+  name: 'SideBar',
+  components: {
+    'a-menu': Menu,
+    SubMenu,
+    MenuItem,
+    MenuSearch,
+    ToggleSidebar,
+    CustomSliderMenu
+  },
+  data() {
+    return {
+      Search,
+      openKeys: [],
+      activeNames: ['1'],
+      menuMode: "vertical"
+    }
+  },
+  computed: {
+    antMenuStyle() {
+      const isOpened = this.$store.getters.sidebar.opened
+      return isOpened ? {paddingInline: '16px'} : {paddingInline: '10px'}
+    },
+    isCustomMenu() {
+      return this.$store.getters.layoutMenuConfig === "custom"
+    },
+    sidebar() {
+      return this.$store.getters.sidebar
+    },
+    routes() {
+      const routes = this.$store.state.permission.routers
+      if (this.$store.getters.layoutConfig === 'compact') {
+        const activeMenu = routes.find(route => route.meta.menuId === this.$store.getters.activeTopMenuId)
+        return activeMenu?.children ?? []
+      }
+      return routes
+    },
+    // 检查是否含有目录类型的菜单
+    hasFolderMenuItem() {
+      return this.routes.some(route => route.meta.isFetch)
+    },
+    // 菜单风格设置
+    menuStyle() {
+      return this.$store.getters.layoutMenuConfig
+    },
+  
+    // 菜单只有在 inline 模式下才需要绑定该属性
+    menuInlineCollapsed() {
+      return !this.sidebar.opened && this.menuMode === 'inline' ? 'inline-collapsed' : ''
+    }
+  },
+  watch: {
+    openKeys: {
+      handler() {
+        if (this.menuMode === 'inline') {
+          // 实现滚动条实时计算出来
+          clearTimeout(this.timer)
+          this.timer = setTimeout(() => {
+            this.$refs.scrollBar.update()
+          }, 350)
+        }
+      }
+    },
+    // 根据菜单风格的变化进行相关处理。
+    menuStyle: {
+      handler() {
+        this.openKeys = []
+        this.$nextTick(() => {
+          const isCustom = this.menuStyle === 'custom'
+          if (isCustom) {
+            // 如果是自定义应该吧模式切换成垂直，解决箭头在切换了inline模式后箭头没有切回向右
+            this.menuMode = 'vertical'
+            return "vertical"
+          }
+          this.menuMode = this.hasFolderMenuItem ? 'inline' : (this.menuStyle || 'vertical')
+        })
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    setOpenKeys(key) {
+      this.openKeys = Array.from(new Set([...this.openKeys, key]))
+    },
+    mouseenterHandler: _.debounce(function () {
+      this.$store.dispatch('getMenuCornersNumData')
+    }, 1000)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$sidebar-width: 200px;
+$sidebar-hide-width: 50px;
+
+.sidebar-container-wrap {
+  position: relative;
+  flex: 0 0 $sidebar-width;
+  height: 100%;
+  font-size: 0;
+  box-shadow: 0 4px 10px 0 rgba(62, 72, 128, 0.22);
+  transition: all 0.28s;
+
+  &.close-sidebar {
+    flex: 0 0 0;
+  }
+
+  &.shrink-sidebar {
+    flex: 0 0 $sidebar-hide-width;
+  }
+
+  &:hover {
+    .toggle-sidebar-btn {
+      transform: scaleX(1);
+    }
+  }
+
+  .toggle-sidebar-btn {
+    transform-origin: left;
+    transform: scaleX(0);
+    transition: all 0.3s;
+  }
+}
+
+.sidebar-container {
+  width: $sidebar-width;
+  height: calc(100% - 48px);
+
+  &.close-sidebar {
+    width: 0;
+  }
+
+  &.shrink-sidebar {
+    width: $sidebar-hide-width;
+
+    ::v-deep .ant-menu-vertical,
+    ::v-deep .ant-menu-inline-collapsed {
+      .amenu-title {
+        margin: 0 !important;
+
+        .menu-title {
+          padding-left: 20px;
+        }
+      }
+
+      & > .ant-menu-item {
+        span.menu-title {
+          display: none;
+        }
+      }
+
+      .ant-menu-submenu {
+        .ant-menu-submenu-title {
+          // padding: 0;
+          border-radius: 0;
+          margin: 4px 0;
+          text-align: center;
+          .svg-icon {
+            font-size: 18px;
+            margin-right: 0;
+          }
+          .ant-menu-submenu-arrow {
+            display: none;
+          }
+          span.menu-title {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  //reset element-ui css
+  .horizontal-collapse-transition {
+    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+  }
+
+  ::v-deep .scrollbar-wrapper {
+    overflow-x: hidden !important;
+
+    .el-scrollbar__view {
+      height: 100%;
+      box-sizing: border-box;
+
+      &::before {
+        content: '';
+        display: table;
+        height: 0;
+        visibility: hidden;
+      }
+    }
+
+    // ::v-deep .el-scrollbar__bar.is-vertical {
+    //   right: 0;
+    // }
+
+    .ant-menu-vertical {
+      border-right: none;
+      overflow-x: hidden;
+
+      .ant-menu-item {
+        .amenu-title {
+          margin: 0 5px;
+        }
+      }
+
+      .ant-menu-submenu {
+        .ant-menu-submenu-title {
+          // margin-left: 5px;
+          // margin-right: 5px;
+          // margin: 4px 5px;
+          //border-radius: 20px;
+        }
+      }
+    }
+
+    .ant-menu-inline-collapsed {
+      .ant-menu-submenu {
+        .ant-menu-submenu-title {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    .ant-menu-item {
+      .svg-icon {
+        margin-right: 14px;
+      }
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 14px;
+      font-size: 16px;
+    }
+    .iconfont {
+      margin-right: 16px;
+      font-size: 16px;
+    }
+
+    .is-active > .el-submenu__title {
+      color: #f4f4f5 !important;
+    }
+  }
+}
+
+.menu-search {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0;
+  padding: 0 16px;
+
+  &.no-padding {
+    padding: 0;
+  }
+}
+
+.item-title {
+  margin-left: 10px;
+}
+
+::v-deep .el-popper {
+  opacity: 0;
+}
+
+::v-deep .ant-menu-vertical .ant-menu-item,
+.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-vertical-right .ant-menu-item,
+.ant-menu-inline .ant-menu-item,
+.ant-menu-vertical .ant-menu-submenu-title,
+.ant-menu-vertical-left .ant-menu-submenu-title,
+.ant-menu-vertical-right .ant-menu-submenu-title,
+.ant-menu-inline .ant-menu-submenu-title {
+  text-overflow: clip;
+  overflow: visible;
+}
+// 折叠菜单当没有子菜单的时候缩进应该要减去伪元素宽度
+::v-deep .ant-menu-submenu-inline > .ant-menu-inline .ant-menu-item-only-child {
+  .ant-menu-title-content {
+    padding-left: 4px;
+  }
+}
+::v-deep .ant-menu-submenu-inline .ant-menu-submenu-title {
+  margin-block: 0 4px;
+}
+</style>
+
+<style lang="scss">
+$menu_icon-size: 30px; // 统一菜单图标大小
+.menu-icon-size{
+  width: $menu_icon-size;
+  text-align: left;
+}
+
+.sub-menu-badge{
+  width: calc(100% - $menu_icon-size);
+  display: flex;
+  height: 41px;
+  float: right;
+  align-items: center;
+}
+
+.menu-title {
+  // max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  float: left;
+}
+
+.ant-menu-vertical.ant-menu-sub.ant-menu-submenu-content {
+  background-color: #30373d;
+}
+
+ul.ant-menu-vertical {
+  overflow-y: auto;
+}
+
+.has-children > ul.ant-menu-sub.ant-menu-submenu-content {
+  max-width: 200px !important;
+}
+
+.ant-menu-submenu-popup {
+  z-index: 9999 !important;
+  .ant-menu-vertical.ant-menu-sub {
+    min-width: 175px;
+  }
+  .ant-menu-vertical.ant-menu-sub:not(:has(.ant-menu-submenu-arrow)) {
+    max-width: 555px;
+    .ant-menu-item {
+      float: left;
+      width: 175px !important;
+      //border-radius: 20px;
+    }
+  }
+  &.len-gt-6 {
+    .ant-menu-vertical.ant-menu-sub.ant-menu-submenu-content {
+      max-width: 550px;
+      .ant-menu-item {
+        float: left;
+        width: 180px;
+        //border-radius: 20px;
+      }
+    }
+  }
+}
+
+// inline mode
+.ant-menu-inline-collapsed {
+  width: 50px;
+
+  .ant-menu-item {
+    padding: 0 16px !important;
+  }
+
+  .ant-menu-submenu {
+    .ant-menu-submenu-title {
+      padding: 0 16px !important;
+    }
+  }
+}
+
+.withoutAnimation {
+  .main-container,
+  .sidebar-container {
+    transition: none;
+  }
+}
+
+ul.ant-menu-vertical::-webkit-scrollbar {
+  width: 6px;
+  /* 对垂直流动条有效 */
+  height: 10px;
+  /* 对水平流动条有效 */
+}
+ul.ant-menu-vertical::-webkit-scrollbar-thumb {
+  border-radius: 7px;
+}
+/*定义滚动条的轨道颜色、内阴影及圆角*/
+ul.ant-menu-vertical::-webkit-scrollbar-track {
+  background-color: #fff;
+}
+/*定义滑块颜色、内阴影及圆角*/
+ul.ant-menu-vertical::-webkit-scrollbar-thumb {
+  background-color: #eef0f6;
+}
+.custom-two-style {
+  //margin: 0 !important;
+}
+</style>