qdt-admin-layout 1.0.0

package/src/component/Breadcrumb/style.scss

@@ -0,0 +1,27 @@
+.breadcrumb {
+    white-space: nowrap;
+    font-size: $--font-size-base;
+
+    &-separator {
+        margin: 0 9px;
+        color: $--color-text-placeholder;
+    }
+
+    &-item {
+        display: inline-block;
+
+        &:not(:last-child) .breadcrumb-inner {
+            color: $--color-text-regular;
+            transition: $--color-transition-base;
+            cursor: pointer;
+
+            &:hover {
+                color: $--color-primary;
+            }
+        }
+
+        &:last-child .breadcrumb-inner {
+            color: $--color-text-secondary;
+        }
+    }
+}

package/src/component/CachedRouterView/index.vue

@@ -0,0 +1,162 @@
+<script>
+/**
+ * 自行实现缓存控制的router-view，不支持嵌套路由
+ */
+
+import { pageGetters, tagsViewGetters } from '../../store'
+import { getRouterKey } from '../../config/logic'
+import { isEmpty } from '../../util'
+
+/**
+ * 根据指定的key清除keep-alive组件内的缓存
+ *
+ * @param key {string}
+ * @param instance {Vue} keep-alive组件实例
+ */
+function pruneCacheEntry(key, instance) {
+  if (!instance) return
+
+  const { cache, _vnode: current } = instance
+  const entry = cache[key]
+
+  if (entry && (!current || entry.tag !== current.tag)) {
+    entry.componentInstance.$destroy()
+  }
+
+  delete cache[key]
+
+  // keep-alive中的keys仅是用于max，所以直接清空
+  instance.keys = []
+}
+
+/**
+ * 获取组件构造器的id
+ *
+ * @param instance {Vue}
+ * @returns {number}
+ */
+function getCtorId(instance) {
+  const opt = instance.$vnode.componentOptions
+  return opt && opt.Ctor.cid
+}
+
+export default {
+  name: 'CachedRouterView',
+
+  inheritAttrs: true,
+
+  data() {
+    return {
+      renderView: true
+    }
+  },
+
+  computed: {
+    // 当前路由的唯一标识
+    routerViewKey() {
+      return getRouterKey(this.$route)
+    },
+
+    // 是否使用keep-alive
+    useKeepAlive() {
+      return tagsViewGetters.enabled && tagsViewGetters.enableCache
+    },
+    // 传递给keep-alive组件的属性
+    keepAliveData() {
+      const timestamp = Date.now()
+      // 确保缓存控制数组变动时，keep-alive也会更新
+      // 因为会有关掉的页签非当前页签的情况，此时cachedViews虽然变化，但keep-alive不会更新
+      const exclude = tagsViewGetters.cachedViews.map(key => key + timestamp)
+
+      return {
+        props: { exclude },
+        on: { 'hook:updated': this.onKeepAliveUpdated }
+      }
+    },
+    // 加速读取的缓存key哈希表
+    cachedKeyMap() {
+      return tagsViewGetters.cachedViews.reduce((map, key) => {
+        map[key] = 1
+        return map
+      }, {})
+    },
+
+    // 是否使用过渡动画
+    useTransition() {
+      return pageGetters.enableTransition
+    },
+    // 过渡动画名称
+    transitionName() {
+      return pageGetters.transition.curr
+    }
+  },
+
+  methods: {
+    // 获取keep-alive实例
+    getKeepAliveInstance() {
+      if (!this._vnode) return
+
+      const vnode = this._vnode.children[0]
+
+      // 未被transition包裹时
+      if (!pageGetters.enableTransition) {
+        return vnode.componentInstance
+      }
+
+      return vnode.child._vnode.componentInstance
+    },
+
+    // 在keep-alive更新后对其缓存做处理
+    onKeepAliveUpdated() {
+      const instance = this.getKeepAliveInstance()
+      const { cache } = instance
+      const hasTransition = pageGetters.enableTransition
+
+      // 由于keep-alive会缓存所有，所以需要清除不需要缓存的部分
+      Object.keys(cache).forEach(key => {
+        const routerKey = hasTransition
+          // 被transition包裹时，key会加上一个前缀
+          ? key.replace(/__transition-(\d+)-/, '')
+          : key
+        !this.cachedKeyMap[routerKey] && pruneCacheEntry(key, instance)
+
+        // 解决HMR无效
+        if (process.env.NODE_ENV === 'development') {
+          if (cache[key]) {
+            const comp = cache[key].componentInstance
+            const lastCtorId = cache[key]._ctorId
+            const ctorId = (cache[key]._ctorId = getCtorId(comp))
+
+            if (!isEmpty(lastCtorId) && lastCtorId !== ctorId) {
+              pruneCacheEntry(key, instance)
+              this.rerenderRouterView()
+            }
+          }
+        }
+      })
+    },
+
+    // 强制router-view重新渲染
+    rerenderRouterView() {
+      if (!this.renderView) return
+
+      this.renderView = false
+      this.$nextTick(() => this.renderView = true)
+    }
+  },
+
+  render(h) {
+    let view = this.renderView && <router-view key={this.routerViewKey}/>
+
+    if (this.useKeepAlive) {
+      view = <keep-alive {...this.keepAliveData}>{view}</keep-alive>
+    }
+
+    if (this.useTransition) {
+      view = <transition name={this.transitionName} mode="out-in">{view}</transition>
+    }
+
+    return <div>{view}</div>
+  }
+}
+</script>

package/src/component/ContextMenu/functionalUse.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import ContextMenu from './index'
+
+/**
+ * 函数形式创建右键菜单
+ * 注意！每次调用时都会创建一个新的实例，需要自行销毁上一次产生的实例
+ *
+ * @param items {{content:string,click:function}[]} 菜单数组
+ * @param options {{left:number,top:number,minDistance?:number}} 配置项
+ * @return {function} 关闭右键菜单的方法
+ */
+export default function(items, options) {
+  const ctor = Vue.extend(ContextMenu)
+  const instance = new ctor({ propsData: { value: true, items, ...options } })
+
+  instance.$mount()
+  instance.$once('input', value => {
+    if (!value) {
+      instance.$destroy()
+      document.body.removeChild(instance.$el)
+    }
+  })
+  document.body.appendChild(instance.$el)
+
+  return () => instance.close()
+}

package/src/component/ContextMenu/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <ul
+    v-show="value"
+    class="context-menu"
+    :style="style"
+    @contextmenu.prevent
+    @click="onClick"
+  >
+    <li
+      v-for="(i, index) in menuItems"
+      :key="i.content"
+      :data-index="index"
+      class="context-menu-item"
+    >
+      {{ i.content }}
+    </li>
+  </ul>
+</template>
+
+<script>
+/**
+ * 右键菜单，用于页签栏，右键点击页签时弹出
+ */
+
+export default {
+  name: 'ContextMenu',
+
+  props: {
+    // 是否显示，支持v-modal
+    value: Boolean,
+    // 菜单定义数组，{content: string 菜单文字, click: function 点击菜单时触发的函数}
+    items: Array,
+    // 菜单距离屏幕左侧的距离，单位px
+    left: Number,
+    // 菜单距离屏幕顶部的距离，单位px
+    top: Number,
+    // 菜单距离屏幕边缘的最小距离，单位px
+    minDistance: { type: Number, default: 10 }
+  },
+
+  data() {
+    this.willAutoAdaptLeft = false
+    this.willAutoAdaptTop = false
+    return {
+      realLeft: '0px',
+      realTop: '0px'
+    }
+  },
+
+  computed: {
+    style() {
+      return { left: this.realLeft, top: this.realTop }
+    },
+
+    menuItems() {
+      return this.items.filter(Boolean)
+    }
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(v) {
+        document.body[v ? 'addEventListener' : 'removeEventListener']('click', this.close)
+        if (v) {
+          this.willAutoAdaptLeft = true
+          this.willAutoAdaptTop = true
+          this.$nextTick(this.autoAdapt)
+        }
+      }
+    },
+    left: {
+      immediate: true,
+      handler: 'autoAdaptLeft'
+    },
+    top: {
+      immediate: true,
+      handler: 'autoAdaptTop'
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('input', false)
+    },
+    autoAdapt() {
+      this.autoAdaptTop(this.top)
+      this.autoAdaptLeft(this.left)
+    },
+    autoAdaptTop(v) {
+      if (this.willAutoAdaptTop) {
+        this.willAutoAdaptTop = false
+        return
+      }
+      if (!this.value || v == null) return
+
+      const elHeight = this.$el.offsetHeight
+      const remainHeight = document.body.clientHeight - v - this.minDistance
+      const over = elHeight - remainHeight
+      const finalTop = over > 0 ? v - over : v
+
+      this.realTop = `${finalTop}px`
+    },
+    autoAdaptLeft(v) {
+      if (this.willAutoAdaptLeft) {
+        this.willAutoAdaptLeft = false
+        return
+      }
+      if (!this.value || v == null) return
+
+      const elWidth = this.$el.offsetWidth
+      const remainWidth = document.body.clientWidth - v - this.minDistance
+      const over = elWidth - remainWidth
+      const finalLeft = over > 0 ? v - over : v
+
+      this.realLeft = `${finalLeft}px`
+    },
+
+    /**
+     * 事件代理
+     *
+     * @param event {Event}
+     */
+    onClick(event) {
+      if (!event.target.classList.contains('context-menu-item')) {
+        return
+      }
+
+      const index = Number(event.target.dataset.index)
+      const menuItem = this.menuItems[index]
+
+      menuItem && menuItem.click()
+    }
+  },
+
+  beforeDestroy() {
+    document.body.removeEventListener('click', this.close)
+  }
+}
+</script>

package/src/component/ContextMenu/style.scss

@@ -0,0 +1,30 @@
+.context-menu {
+  position: fixed;
+  z-index: $--index-popper;
+  padding: 5px 0;
+  margin: 0;
+  border-radius: 4px;
+  font-size: 12px;
+  max-height: 50vh;
+  color: $--color-white;
+  background-color: $menu-background-dark;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &-item {
+    margin: 0;
+    padding: 7px 16px;
+    white-space: nowrap;
+    cursor: pointer;
+    list-style-type: none;
+
+    &:hover {
+      color: $--color-primary;
+    }
+  }
+}

package/src/component/ElMenu/item.vue

@@ -0,0 +1,66 @@
+<template>
+  <li :class="className" :style="paddingStyle" @click="handleClick">
+    <el-tooltip v-if="showTooltip" effect="dark" placement="right">
+      <div :style="iconContainerStyle">
+        <slot />
+      </div>
+      <template v-slot:content>
+        <slot name="title" />
+      </template>
+    </el-tooltip>
+
+    <template v-else>
+      <slot />
+      <slot name="title" />
+    </template>
+  </li>
+</template>
+
+<script>
+/**
+ * 改写el-menu-item
+ *
+ * 移除了所有背景色、hover颜色，由样式控制
+ */
+
+import MenuMixin from "./mixin";
+import { MenuItem } from "element-ui";
+
+export default {
+  name: MenuItem.name,
+
+  componentName: MenuItem.componentName,
+
+  mixins: [MenuMixin, ...MenuItem.mixins.slice(1)],
+
+  props: MenuItem.props,
+
+  computed: {
+    active: MenuItem.computed.active,
+    className() {
+      return {
+        "el-menu-item": true,
+        "is-active": this.active,
+        "is-disabled": this.disabled,
+      };
+    },
+    showTooltip() {
+      return (
+        this.parentMenu.$options.componentName === "ElMenu" &&
+        this.rootMenu.collapse
+      );
+    },
+    iconContainerStyle() {
+      return `position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 ${this.inlineIndent}px;`;
+    },
+  },
+
+  methods: {
+    handleClick: MenuItem.methods.handleClick,
+  },
+
+  mounted: MenuItem.mounted,
+
+  beforeDestroy: MenuItem.beforeDestroy,
+};
+</script>

package/src/component/ElMenu/mixin.js

@@ -0,0 +1,36 @@
+/**
+ * 在原基础上增加了 inlineIndent 属性，用于确定每级节点的单位缩进距离
+ */
+import { MenuItem } from 'element-ui'
+
+export default {
+  ...MenuItem.mixins[0],
+
+  props: {
+    inlineIndent: {
+      type: Number, default: 20
+    }
+  },
+
+  computed: {
+    ...MenuItem.mixins[0].computed,
+
+    paddingStyle() {
+      if (this.rootMenu.mode !== 'vertical') return undefined
+
+      let padding = this.inlineIndent
+
+      if (!this.rootMenu.collapse) {
+        let parent = this.$parent
+        while (parent && parent.$options.componentName !== 'ElMenu') {
+          if (parent.$options.componentName === 'ElSubmenu') {
+            padding += this.inlineIndent
+          }
+          parent = parent.$parent
+        }
+      }
+
+      return { 'padding-left': `${padding}px` }
+    }
+  }
+}

package/src/component/ElMenu/sub.vue

@@ -0,0 +1,118 @@
+<script>
+/**
+ * 改写el-submenu
+ *
+ * 移除了所有背景色、hover颜色，由样式控制
+ * props中popperAppendToBody默认为true
+ */
+
+import MenuMixin from "./mixin";
+import { Submenu } from "element-ui";
+
+export default {
+  name: Submenu.name,
+
+  componentName: Submenu.componentName,
+
+  mixins: [MenuMixin, ...Submenu.mixins.slice(1)],
+
+  props: {
+    ...Submenu.props,
+    popperAppendToBody: { type: Boolean, default: true },
+  },
+
+  data: Submenu.data,
+
+  computed: {
+    appendToBody: Submenu.computed.appendToBody,
+    menuTransitionName: Submenu.computed.menuTransitionName,
+    opened: Submenu.computed.opened,
+    active: Submenu.computed.active,
+    mode: Submenu.computed.mode,
+    isMenuPopup: Submenu.computed.isMenuPopup,
+    isFirstLevel: Submenu.computed.isFirstLevel,
+    className() {
+      return {
+        "el-submenu": true,
+        "is-active": this.active,
+        "is-opened": this.opened,
+        "is-disabled": this.disabled,
+      };
+    },
+    submenuArrowClass() {
+      const icon =
+        (this.rootMenu.mode === "horizontal" && this.isFirstLevel) ||
+        (this.rootMenu.mode === "vertical" && !this.rootMenu.collapse)
+          ? "el-icon-arrow-down"
+          : "el-icon-arrow-right";
+      return "el-submenu__icon-arrow " + icon;
+    },
+    popupMenuClass() {
+      return `el-menu el-menu--popup el-menu--popup-${this.currentPlacement}`;
+    },
+  },
+
+  watch: Submenu.watch,
+
+  methods: Submenu.methods,
+
+  created: Submenu.created,
+
+  mounted: Submenu.mounted,
+
+  beforeDestroy: Submenu.beforeDestroy,
+
+  render() {
+    return (
+      <li
+        class={this.className}
+        on-mouseenter={this.handleMouseenter}
+        on-mouseleave={() => this.handleMouseleave(false)}
+        on-focus={this.handleMouseenter}
+      >
+        <div
+          ref="submenu-title"
+          class="el-submenu__title"
+          on-click={this.handleClick}
+        >
+          {this.$slots.title}
+          <i class={this.submenuArrowClass} />
+        </div>
+        {this.isMenuPopup ? (
+          <transition name={this.menuTransitionName}>
+            <div
+              ref="menu"
+              v-show={this.opened}
+              class={[`el-menu--${this.mode}`, this.popperClass]}
+              on-mouseenter={(e) => this.handleMouseenter(e, 100)}
+              on-mouseleave={() => this.handleMouseleave(true)}
+              on-focus={(e) => this.handleMouseenter(e, 100)}
+            >
+              {this.$slots.default.map((item) => {
+                return (
+                  <ul
+                    style="display:inline-block;width:200px"
+                    class={this.popupMenuClass}
+                  >
+                    {item}
+                  </ul>
+                );
+              })}
+            </div>
+          </transition>
+        ) : (
+          <el-collapse-transition>
+            <ul
+              style="display:inline-block"
+              v-show={this.opened}
+              class="el-menu el-menu--inline"
+            >
+              {this.$slots.default}
+            </ul>
+          </el-collapse-transition>
+        )}
+      </li>
+    );
+  },
+};
+</script>

package/src/component/Hamburger/index.vue

@@ -0,0 +1,27 @@
+<script>
+/**
+ * 汉堡包，控制侧边栏的展开折叠状态（如果侧边栏是抽屉形式，则是显示和隐藏），用于侧边栏底部和顶栏左侧
+ */
+
+import { appGetters, asideGetters, asideMutations } from '../../store'
+
+export default {
+  name: 'Hamburger',
+
+  render() {
+    // 考虑侧边栏可能是抽屉的情况
+    const collapsed = appGetters.isMobile ? asideGetters.show : !asideGetters.collapse
+    const className = `hamburger${collapsed ? ' collapsed' : ''}`
+
+    return (
+      <div
+        class={className}
+        title={`${collapsed ? '折叠' : '展开'}侧边栏`}
+        on-click={asideMutations.switch}
+      >
+        <i class="el-icon-s-unfold"/>
+      </div>
+    )
+  }
+}
+</script>

package/src/component/Hamburger/style.scss

@@ -0,0 +1,3 @@
+.hamburger.collapsed > i {
+  transform: rotate(180deg);
+}