qdt-admin-layout 1.0.0

package/src/component/NavMenu/style.scss

@@ -0,0 +1,159 @@
+.el-menu {
+  width: 100%;
+  border: none !important;
+
+  // 菜单图标
+  .menu-icon {
+    color: inherit;
+    font-size: 38px;
+
+    // 与菜单内容的间隔
+    & + * {
+      margin-left: $menu-icon-text-gap;
+    }
+  }
+
+  // 子级菜单激活时，父级同样高亮
+  .el-menu-item.is-active,
+  .is-active > .el-submenu__title {
+    color: #f5714a !important;
+    background-color: #fff2e9;
+  }
+
+  // 弹出菜单
+  &--popup {
+    max-height: 88vh;
+    min-width: 160px;
+    padding: 0;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    overflow-y: auto;
+
+    // 弹出菜单的父级
+    .popover-menu__title {
+      height: 56px;
+      line-height: 56px;
+      padding: 0 $menu-padding;
+      font-size: $--menu-item-font-size;
+      cursor: auto;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+  }
+
+  // 桌面端不显示滚动条
+  @media (min-width: $max-mobile-width) {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+//菜单hover时，左侧图标放大（弹出菜单的父级不放大）
+.el-menu-item:not(.popover-menu__title),
+.el-submenu__title {
+  > .menu-icon,
+  > .el-tooltip > .menu-icon {
+    transition: transform 0.1s;
+  }
+
+  &:hover {
+    > .menu-icon,
+    > .el-tooltip > .menu-icon {
+      transform: scale(1.2);
+    }
+  }
+}
+
+.el-menu-item,
+.el-submenu__title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  // 让文字不会超出右侧的展开折叠图标
+  padding-left: $menu-padding;
+  padding-right: 20px + 12px; // element-ui默认padding:20px以及图标font-size:12px
+
+  // 移除菜单hover、focus时的默认背景色，等同于修改$--menu-item-hover-fill
+  &:hover,
+  &:focus {
+    background-color: transparent;
+  }
+
+  // 图标与字体同色
+  i {
+    color: inherit;
+  }
+}
+
+//原先右侧展开箭头偏上
+.el-submenu__icon-arrow {
+  margin-top: -4px;
+}
+
+//侧边栏垂直菜单
+.el-menu--vertical {
+  &.el-menu {
+    overflow-y: auto;
+  }
+
+  // 折叠时
+  &.el-menu--collapse {
+    .el-submenu__title {
+      padding-right: $menu-padding;
+    }
+
+    // 使用过渡动画会用span标签包裹，导致原始使用'>'选择器失效
+    .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
+      display: none;
+    }
+  }
+}
+
+//顶部水平菜单
+.el-menu--horizontal {
+  // 顶部菜单的顶级节点
+  &.el-menu {
+    // 不显示折叠展开按钮
+    &.hide-collapse-icon
+      > .el-submenu
+      > .el-submenu__title
+      > .el-submenu__icon-arrow {
+      display: none;
+    }
+
+    // 顶级节点的高度以及hover时的下边框
+    > .el-menu-item,
+    > .el-submenu > .el-submenu__title {
+      height: $header-height;
+      line-height: $header-height;
+
+      &:hover {
+        border-bottom: 2px solid $--color-primary;
+      }
+    }
+  }
+
+  &.el-menu,
+  .el-menu {
+    // 菜单的文字以及hover颜色
+    .el-menu-item,
+    .el-submenu__title {
+      > span {
+        max-width: 100px;
+      }
+    }
+  }
+
+  // 移除背景色
+  > .el-menu-item:not(.is-disabled):hover,
+  > .el-menu-item:not(.is-disabled):focus,
+  > .el-submenu .el-submenu__title:hover,
+  .el-menu .el-menu-item,
+  .el-menu .el-submenu__title {
+    background-color: transparent !important;
+  }
+}
+
+@import "./theme-light";
+@import "./theme-dark";

package/src/component/NavMenu/theme-dark.scss

@@ -0,0 +1,59 @@
+.el-menu--dark {
+  // 侧边栏垂直菜单
+  &.el-menu--vertical {
+    // 背景色
+    &.el-menu,
+    > .el-menu {
+      background-color: $menu-background-dark;
+    }
+
+    // 菜单的文字以及hover颜色
+    .el-menu-item,
+    .el-submenu__title {
+      color: $menu-text-color-dark;
+
+      &:hover {
+        color: $menu-text-hover-color-dark;
+      }
+    }
+
+    // 设置了显示弹出菜单的父级
+    .el-menu--popup .popover-menu__title {
+      color: $menu-text-hover-color-dark;
+      border-bottom-color: $--border-color-dark;
+    }
+
+    // 子级菜单的背景颜色和内阴影
+    .el-menu--inline {
+      background-color: $sub-menu-background-dark;
+      box-shadow: inset 0 2px 8px darken($sub-menu-background-dark, 10%)
+    }
+  }
+
+  // 顶部水平菜单
+  &.el-menu--horizontal {
+    // 背景色
+    &.el-menu,
+    > .el-menu {
+      background-color: $header-background-dark;
+    }
+
+    // 菜单的文字以及hover颜色
+    .el-menu-item,
+    .el-submenu__title {
+      color: $menu-text-color-dark;
+
+      &:hover {
+        color: $menu-text-hover-color-dark;
+      }
+    }
+
+    // hover时不显示下边框
+    &.el-menu {
+      > .el-menu-item,
+      > .el-submenu > .el-submenu__title {
+        border-bottom: none !important;
+      }
+    }
+  }
+}

package/src/component/NavMenu/theme-light.scss

@@ -0,0 +1,81 @@
+.collapse {
+  .el-submenu__title {
+    height: 100%;
+    padding-top: 15px;
+    padding-left: 25px;
+    padding-right: 23px;
+  }
+}
+
+.el-menu--light {
+  // 侧边栏垂直菜单
+  &.el-menu--vertical {
+    // 菜单的文字以及hover颜色
+    .el-menu-item,
+    .el-submenu__title {
+      color: $menu-text-color-light;
+      &:hover {
+        color: #f56d45;
+      }
+    }
+
+    // 设置了显示弹出菜单的父级
+    .el-menu--popup .popover-menu__title {
+      color: $menu-text-color-light;
+      border-bottom-color: $--border-color-light;
+    }
+
+    // 模仿ant-design的亮色菜单
+    &:not(.el-menu--collapse) {
+      .el-menu-item {
+        // 小竖条
+        &::after {
+          position: absolute;
+          top: 10%;
+          right: 0;
+          height: 80%;
+          border-right: 3px solid $--color-primary;
+          opacity: 0;
+          transform: scaleY(0);
+          transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+          content: "";
+        }
+
+        &.is-active {
+          // 背景色
+          &::before {
+            position: absolute;
+            top: 10%;
+            left: 0;
+            height: 80%;
+            width: 100%;
+            content: "";
+          }
+
+          &::after {
+            opacity: 1;
+            transform: scaleY(1);
+          }
+        }
+      }
+
+      // 弹出菜单激活时不显示右边框
+      .el-menu--popup .el-menu-item::after {
+        display: none;
+      }
+    }
+  }
+
+  // 顶部水平菜单
+  &.el-menu--horizontal {
+    // 菜单的文字以及hover颜色
+    .el-menu-item,
+    .el-submenu__title {
+      color: $menu-text-color-light;
+
+      &:hover {
+        color: $menu-text-hover-color-light;
+      }
+    }
+  }
+}

package/src/component/Page/content.vue

@@ -0,0 +1,58 @@
+<script>
+import CachedRouterView from '../../component/CachedRouterView'
+import Breadcrumb from '../../component/Breadcrumb'
+import { pageGetters } from '../../store'
+
+const PageHeader = {
+  name: 'PageFooter',
+
+  render(h) {
+    return h('div', { staticClass: 'page-header' }, this.$slots.default)
+  }
+}
+const PageFooter = {
+  name: 'PageFooter',
+
+  render(h) {
+    return h('footer', { staticClass: 'page-footer' }, this.$slots.default)
+  }
+}
+
+export default {
+  name: 'PageContent',
+
+  computed: {
+    showHeader() {
+      return pageGetters.showHeader && this.$route.meta.pageHeader !== false
+    },
+    showFooter() {
+      return pageGetters.showFooter && this.$route.meta.pageFooter !== false
+    }
+  },
+
+  render(h) {
+    const { headerSlot, footerSlot } = pageGetters
+    const showFooter = this.showFooter && footerSlot
+
+    const className = {
+      'page-content': true,
+      'has-page-header': this.showHeader,
+      'has-page-footer': showFooter
+    }
+
+    return (
+      <div class={className}>
+        {this.showHeader && (
+          <PageHeader>
+            {headerSlot ? headerSlot(h) : <Breadcrumb/>}
+          </PageHeader>
+        )}
+
+        <CachedRouterView class="page-view"/>
+
+        {showFooter && <PageFooter>{footerSlot(h)}</PageFooter>}
+      </div>
+    )
+  }
+}
+</script>

package/src/component/Page/iframe.vue

@@ -0,0 +1,63 @@
+<template>
+  <div v-show="showIframe" class="page-iframe">
+    <iframe
+      v-for="src in iframeList"
+      v-show="src === currentIframe"
+      :id="src"
+      :key="src"
+      :src="src"
+      frameborder="0"
+      height="100%"
+      width="100%"
+    />
+  </div>
+</template>
+
+<script>
+import { pageGetters, pageMutations, tagsViewGetters } from '../../store'
+import { getRouterKey } from '../../config/logic'
+import { isEmpty } from '../../util'
+
+export default {
+  name: 'PageIframe',
+
+  computed: {
+    showIframe() {
+      return pageGetters.showIframe
+    },
+    iframeList() {
+      return pageGetters.iframeList
+    },
+    currentIframe() {
+      return pageGetters.currentIframe
+    }
+  },
+
+  watch: {
+    $route: {
+      handler(to, from) {
+        this.iframeCtrl(to, from)
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    // 路由跳转时控制iframe的显隐
+    iframeCtrl(to, from) {
+      // 从iframe页面离开时，判断是否需要删除iframe
+      if (from && from.meta.iframe) {
+        const key = getRouterKey(from)
+        const del = isEmpty(key) || !tagsViewGetters.cachedViews.includes(key)
+
+        pageMutations.closeIframe(from.meta.iframe, del)
+      }
+
+      // 跳转至iframe页面时，打开iframe
+      if (to.meta.iframe) {
+        pageMutations.openIframe(to.meta.iframe)
+      }
+    }
+  }
+}
+</script>

package/src/component/Page/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <main class="page-main">
+    <page-content/>
+
+    <page-iframe/>
+  </main>
+</template>
+
+<script>
+/**
+ * 页面，拆成content、iframe、view等好几部分是为了避免额外渲染
+ */
+
+import PageIframe from './iframe'
+import PageContent from './content'
+
+export default {
+  name: 'Page',
+
+  components: { PageContent, PageIframe }
+}
+</script>

package/src/component/Page/style.scss

@@ -0,0 +1,48 @@
+.page-main {
+  position: relative;
+  overflow: hidden;
+  background-color: $page-background-color;
+}
+
+.page-iframe {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: $page-background-color; // iframe加载时遮住原始路由页面
+}
+
+.page-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+}
+
+.page-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: $page-header-height;
+  padding: $page-header-padding $page-view-margin $page-header-padding $page-view-margin;
+  box-sizing: border-box;
+
+  // 页头渲染时页面顶部margin为0
+  & + .page-view {
+    margin-top: 0 !important;
+  }
+}
+
+.page-footer {
+  height: $page-footer-height;
+  padding: $page-view-margin;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.page-view {
+  margin: $page-view-margin;
+  flex: 1;
+}

package/src/component/Redirect/index.vue

@@ -0,0 +1,19 @@
+<script>
+/**
+ * 用于刷新路由的工具组件
+ */
+
+import { Const } from '../../config'
+
+export default {
+  mounted() {
+    const { fullPath } = this.$route
+    const to = fullPath.replace(new RegExp(Const.redirectPath, 'gm'), '')
+
+    // 如果路由没有component选项时（比如iframe路由），必须使用$nextTick模拟路由组件加载
+    this.$nextTick(() => this.$router.replace(to))
+  },
+
+  render: () => undefined
+}
+</script>