qdt-admin-layout 1.0.0

package/src/component/HorizontalScroller/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="horizontal-scroller" @wheel="handleScroll">
+    <slot/>
+  </div>
+</template>
+
+<script>
+/**
+ * 水平滚动区域，能够通过鼠标滚轮来进行水平滚动，用于页签栏
+ * 借鉴[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+ */
+
+export default {
+  name: 'HorizontalScroller',
+
+  props: {
+    // 元素之间的距离（px）
+    between: { type: Number, default: 4 }
+  },
+
+  methods: {
+    /**
+     * @param e {WheelEvent}
+     */
+    handleScroll(e) {
+      const eventDelta = e.deltaY
+      const { scrollLeft, scrollWidth, clientWidth } = this.$el
+
+      /**
+       * ①滚轮向上滚动并且是最左边
+       * ②滚轮向下滚动并且是最右边
+       */
+      if (eventDelta < 0 && scrollLeft === 0
+        || eventDelta > 0 && scrollWidth <= scrollLeft + clientWidth) {
+        return
+      }
+
+      this.$el.scrollLeft += eventDelta
+    },
+
+    /**
+     * 将指定元素以及其相邻元素移动至视窗内，外部调用
+     * @param target {Element}
+     */
+    moveToTarget(target) {
+      const nodes = Array.from(this.$el.children)
+      const { offsetWidth: containerWidth, scrollWidth, scrollLeft } = this.$el
+
+      if (containerWidth >= scrollWidth) return
+
+      let first = null
+      let last = null
+
+      // find first el and last el
+      if (nodes.length > 0) {
+        first = nodes[0]
+        last = nodes[nodes.length - 1]
+      }
+
+      if (first === target) {
+        return this.scrollLeft(0)
+      }
+      if (last === target) {
+        return this.scrollLeft(scrollWidth - containerWidth)
+      }
+
+      // find prev and next
+      const currentIndex = nodes.findIndex(item => item === target)
+      const prev = nodes[currentIndex - 1]
+      const next = nodes[currentIndex + 1]
+
+      // the el's offsetLeft after of next
+      const afterNextOffsetLeft = next.offsetLeft + next.offsetWidth + this.between
+
+      // the el's offsetLeft before of prev
+      const beforePrevOffsetLeft = prev.offsetLeft - this.between
+
+      if (afterNextOffsetLeft > scrollLeft + containerWidth) {
+        this.scrollLeft(afterNextOffsetLeft - containerWidth)
+      }
+      else if (beforePrevOffsetLeft < scrollLeft) {
+        this.scrollLeft(beforePrevOffsetLeft)
+      }
+    },
+
+    scrollLeft(val) {
+      this.$el.scrollTo({ left: val, behavior: 'smooth' })
+    }
+  }
+}
+</script>

package/src/component/HorizontalScroller/style.scss

@@ -0,0 +1,12 @@
+.horizontal-scroller {
+  display: flex;
+  position: relative;
+  height: 100%;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/component/Layout/index.vue

@@ -0,0 +1,153 @@
+<script>
+import { Const } from '../../config'
+import Aside from '../Aside'
+import Header from '../Header'
+import TagsView from '../TagsView'
+import Page from '../Page'
+import {
+  appGetters,
+  appMutations,
+  asideMutations,
+  headerMutations,
+  tagsViewGetters,
+  tagsViewMutations,
+  pageMutations
+} from '../../store'
+import { isMobile } from '../../helper'
+import { debounce } from '../../util'
+
+export default {
+  name: 'ElAdminLayout',
+
+  computed: {
+    isLeftRight() {
+      return appGetters.struct === 'left-right'
+    },
+    renderAside() {
+      return appGetters.isMobile || ['aside', 'mix'].includes(appGetters.navMode)
+    }
+  },
+
+  methods: {
+    // render时调用，根据插槽的变化修改store数据
+    mutateStoreSlot() {
+      const cache = this.$_cachedScopedSlots
+      const curr = this.$scopedSlots
+
+      // 减少的
+      Object.keys(cache).forEach(k => {
+        // 缓存中有，本次没有
+        if (!curr[k]) {
+          const f = this.getMutationBySlot(k)
+          f(undefined)
+        }
+      })
+
+      // 新增的
+      Object.keys(curr).forEach(k => {
+        // 本次有，缓存中没有
+        if (!cache[k]) {
+          const f = this.getMutationBySlot(k)
+          // scopedSlots: (props) => VNode
+          // render: (h, props) => VNode
+          f((h, props) => curr[k](props))
+        }
+      })
+
+      this.$_cachedScopedSlots = curr
+    },
+    getMutations(prefix) {
+      switch (prefix) {
+        case 'aside':
+          return asideMutations
+        case 'header':
+          return headerMutations
+        case 'page':
+          return pageMutations
+      }
+    },
+    getMutationBySlot(slot) {
+      const cache = this.$_slotMutationsMap
+
+      if (cache[slot]) return cache[slot]
+
+      // 不规则的
+      if (slot === 'logo') {
+        cache[slot] = appMutations.logoSlot
+        return cache[slot]
+      }
+      if (slot === 'tags-view-item') {
+        cache[slot] = tagsViewMutations.itemSlot
+        return cache[slot]
+      }
+
+      // aside -> asideMutations.defaultSlot
+      // aside-header -> asideMutations.headerSlot
+      // aside-menu-icon -> asideMutations.menuIconSlot
+      const arr = slot.split('-')
+      const mutations = this.getMutations(arr[0])
+
+      if (arr.length === 1) {
+        cache[slot] = mutations.defaultSlot
+      }
+      else {
+        let method = arr[1]
+
+        for (let i = 2, len = arr.length; i < len; i++) {
+          method += arr[i][0].toUpperCase() + [...arr[i].slice(1)].join('')
+        }
+
+        cache[slot] = mutations[method += 'Slot']
+      }
+
+      return cache[slot]
+    }
+  },
+
+  beforeCreate() {
+    // 缓存当前的插槽
+    this.$_cachedScopedSlots = Object.create(null)
+
+    // 用于加速根据插槽名查找store mutation的缓存map
+    this.$_slotMutationsMap = Object.create(null)
+  },
+
+  mounted() {
+    this.$_resize = debounce(() => {
+      !document.hidden && appMutations.isMobile(isMobile())
+    })
+    window.addEventListener('resize', this.$_resize)
+  },
+
+  beforeDestroy() {
+    if (this.$_resize) {
+      window.removeEventListener('resize', this.$_resize)
+      delete this.$_resize
+    }
+
+    delete this.$_cachedScopedSlots
+    delete this.$_slotMutationsMap
+  },
+
+  render() {
+    Const.enableLayoutSlot && this.mutateStoreSlot()
+
+    return (
+      <div class={{
+        'el-admin-layout': true,
+        'has-header': true,
+        'has-tags-view': tagsViewGetters.enabled,
+        'left-right': this.isLeftRight
+      }}>
+        <Header ref="header"/>
+
+        {tagsViewGetters.enabled && <TagsView ref="tags-view"/>}
+
+        {this.renderAside && <Aside ref="aside"/>}
+
+        <Page ref="page"/>
+      </div>
+    )
+  }
+}
+</script>

package/src/component/Layout/style.scss

@@ -0,0 +1,42 @@
+.el-admin-layout {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: min-content min-content 1fr;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  > header {
+    grid-column-start: 1;
+    grid-column-end: 3;
+  }
+
+  > nav {
+    grid-column: 2 / 3;
+  }
+
+  > aside {
+    display: flex;
+    grid-row-start: 2;
+    grid-row-end: 4;
+  }
+
+  > main {
+    grid-area: 3 / 2 / 4 / 3;
+  }
+
+  // 左右结构
+  &.left-right {
+    > header {
+      grid-column-start: 2;
+    }
+
+    > aside {
+      grid-row-start: 1;
+
+      // 左右结构时，侧边栏z-index需大于顶栏
+      // 上下结构时，侧边栏z-index需小于顶栏
+      z-index: $header-z-index + 1;
+    }
+  }
+}

package/src/component/LoadingSpinner/index.vue

@@ -0,0 +1,17 @@
+<template v-once>
+  <div class="el-loading-spinner">
+    <svg class="circular" viewBox="25 25 50 50">
+      <circle class="path" cx="50" cy="50" r="20" fill="none"/>
+    </svg>
+  </div>
+</template>
+
+<script>
+/**
+ * 加载圈，用于侧边栏菜单、顶栏菜单的加载状态
+ */
+
+export default {
+  name: 'LoadingSpinner'
+}
+</script>

package/src/component/Logo/index.vue

@@ -0,0 +1,41 @@
+<script>
+import { appGetters } from '../../store'
+import { isEmpty } from '../../util'
+
+export default {
+  name: 'Logo',
+
+  props: { showTitle: Boolean },
+
+  methods: {
+    onClick(e) {
+      const { onLogoClick } = appGetters
+      if (onLogoClick) return onLogoClick(e)
+
+      const to = appGetters.logoRoute
+      const method = typeof to === 'object' && to.replace ? 'replace' : 'push'
+
+      this.$router[method](to, () => undefined)
+    }
+  },
+
+  render(h) {
+    const { logo: src, title: txt, logoSlot } = appGetters
+
+    const img = src && <img src={src}/>
+    const title = !isEmpty(txt) && this.showTitle && <h1>{txt}</h1>
+
+    const children = logoSlot ? logoSlot(h, { img, title, props: this.$props }) : [img, title]
+
+    if (!children || Array.isArray(children) && children.filter(Boolean).length === 0) {
+      return
+    }
+
+    return (
+      <div class="logo-container" on-click={this.onClick}>
+        {children}
+      </div>
+    )
+  }
+}
+</script>

package/src/component/Logo/style.scss

@@ -0,0 +1,26 @@
+.logo-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $header-height;
+  cursor: pointer;
+  padding: 0 $menu-padding;
+  box-sizing: border-box;
+
+  img {
+    height: $logo-size;
+
+    & + h1 {
+      margin-left: 12px;
+    }
+  }
+
+  h1 {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 18px;
+    font-weight: $--font-weight-primary;
+  }
+}

package/src/component/NavMenu/index.vue

@@ -0,0 +1,206 @@
+<script>
+/**
+ * 基于el-menu封装的无限级菜单
+ * 自带亮色、暗色两种主题
+ */
+
+import MenuItem from "../../component/ElMenu/item";
+import SubMenu from "../../component/ElMenu/sub";
+import { isEmpty } from "../../util";
+
+/**
+ * 判断菜单是否没有子级，没有则返回true，否则false
+ *
+ * @param menu {MenuItem}
+ * @returns {boolean}
+ */
+function isSingleMenu(menu) {
+  return !Array.isArray(menu.children) || menu.children.length === 0;
+}
+
+export default {
+  name: "NavMenu",
+
+  props: {
+    // 路由配置项组成的树形数组
+    menus: { type: Array, default: () => [] },
+
+    // 主题，light 或 dark
+    theme: { type: String, default: "light" },
+
+    // 垂直模式下子菜单的单位缩进距离
+    inlineIndent: Number,
+
+    // 水平模式下是否显示展开折叠图标
+    showCollapseIcon: Boolean,
+
+    // 折叠时的展开菜单是否显示父级
+    showParentOnCollapse: Boolean,
+
+    // menus变化时的过渡动画名称
+    switchTransitionName: String,
+
+    // 自定义渲染菜单图标，(h, {menu, depth}) => VNode
+    menuIconSlot: Function,
+
+    // 自定义渲染菜单内容，(h, {menu, depth}) => VNode
+    menuContentSlot: Function,
+
+    /*--------------el-menu原有props开始-------------*/
+    /*https://element.eleme.cn/#/zh-CN/component/menu*/
+
+    mode: { type: String, default: "vertical" }, // 在el-menu原效果上加了样式名
+    collapse: Boolean,
+    defaultActive: String,
+    defaultOpeneds: Array,
+    uniqueOpened: Boolean,
+  },
+
+  computed: {
+    children() {
+      const h = this.$createElement;
+      let children = this.renderMenus(h, this.menus);
+
+      const { switchTransitionName: name } = this;
+      if (!isEmpty(name)) {
+        children = h("transition-group", { props: { name } }, children);
+      }
+
+      return children;
+    },
+
+    themeClass() {
+      return `el-menu--${this.theme}`;
+    },
+    menuClass() {
+      return [
+        `el-menu--${this.mode}`,
+        this.themeClass,
+        !this.showCollapseIcon && "hide-collapse-icon",
+      ];
+    },
+  },
+
+  methods: {
+    // 将el-menu的select事件传递给外部
+    onSelect(...args) {
+      this.$emit("select", ...args);
+    },
+
+    // 渲染菜单图标
+    renderMenuIcon(h, menu, depth) {
+      const slot = this.menuIconSlot;
+
+      if (slot) return slot(h, { menu, depth });
+
+      const icon = menu.meta.icon;
+      return icon && <i style="margin-top:-18px" class={`menu-icon ${icon}`} />;
+    },
+    // 渲染菜单内容
+    renderMenuContent(h, menu, depth) {
+      const slot = this.menuContentSlot;
+      return slot ? slot(h, { menu, depth }) : <span>{menu.meta.title}</span>;
+    },
+    // 渲染无子级的菜单
+    renderSingleMenu(h, menu, depth) {
+      const { fullPath } = menu;
+      return (
+        <MenuItem
+          key={fullPath}
+          index={fullPath}
+          inline-indent={this.inlineIndent}
+        >
+          <template slot="title">
+            {this.renderMenuContent(h, menu, depth)}
+          </template>
+        </MenuItem>
+      );
+    },
+    // 渲染有子级的菜单
+    renderSubMenu(h, menu, children, depth) {
+      const { fullPath } = menu;
+      const noContent =
+        depth === 1 && this.collapse && this.mode === "vertical";
+      return (
+        <div key="index">
+          <SubMenu
+            key={fullPath}
+            index={fullPath}
+            inline-indent={this.inlineIndent}
+            popper-class={this.themeClass}
+            popper-append-to-body
+          >
+            <template slot="title">
+              {depth == 1 && (
+                <div>
+                  {this.renderMenuIcon(h, menu, depth)}
+                  <div style="margin-top:-24px;font-size:14px;margin-left:-2px">
+                    {menu.meta.title}
+                  </div>
+                </div>
+              )}
+              {!noContent && this.renderMenuContent(h, menu, depth)}
+            </template>
+            {children}
+          </SubMenu>
+        </div>
+      );
+    },
+    // 渲染有子级且需要显示父级的菜单
+    renderChildrenWithParentMenu(h, menu, children, depth) {
+      let data = [];
+      menu.children.forEach((x) => {
+        let childrens = [];
+        x.children.forEach((y) => {
+          childrens.push(this.renderSingleMenu(h, y, depth + 1));
+        });
+        data.push(
+          <div>
+            <div class="popover-menu__title">
+              {this.renderMenuContent(h, x, depth)}
+            </div>
+            <div class="el-menu el-menu--inline">{childrens}</div>
+          </div>
+        );
+      });
+      return data;
+    },
+    // 渲染菜单项
+    renderMenus(h, menus, depth = 1) {
+      return menus.map((menu) => {
+        let children = [];
+        //弹出菜单显示父级信息;
+        if (this.collapse && this.showParentOnCollapse) {
+          // 这里认为父级的深度应该+1
+          children = this.renderChildrenWithParentMenu(
+            h,
+            menu,
+            children,
+            depth + 1
+          );
+        }
+        // 一级菜单
+        return this.renderSubMenu(h, menu, children, depth);
+      });
+    },
+  },
+
+  render() {
+    return (
+      <el-menu
+        ref="el-menu"
+        class={this.menuClass}
+        mode={this.mode}
+        collapse={this.collapse}
+        collapse-transition={false}
+        unique-opened={this.uniqueOpened}
+        default-active={this.defaultActive}
+        default-openeds={this.defaultOpeneds}
+        on-select={this.onSelect}
+      >
+        {this.children}
+      </el-menu>
+    );
+  },
+};
+</script>