qdt-admin-layout 1.0.0

package/src/component/TagsView/index.vue

@@ -0,0 +1,255 @@
+<script>
+/**
+ * 页签栏
+ */
+
+import {
+  appGetters,
+  pageGetters,
+  pageMutations,
+  tagsViewGetters,
+  tagsViewMutations
+} from '../../store'
+import useContextMenu from '../../component/ContextMenu/functionalUse'
+import HorizontalScroller from '../../component/HorizontalScroller'
+import { refreshPage } from '../../helper'
+import { getRouterKey, getRouterTitle, isRedirectRouter } from '../../config/logic'
+import { isAffix, getAffixTagsFromMenuTree, renderDefaultStyleTag } from './util'
+
+export default {
+  name: 'TagsView',
+
+  data() {
+    return {
+      // 当前激活的页签的key，随路由变化
+      activeKey: '',
+
+      // 当前选中的页签
+      selectedTag: undefined,
+
+      // 页签右键菜单的属性
+      contextMenu: {
+        show: false,
+        top: 0,
+        left: 0
+      }
+    }
+  },
+
+  computed: {
+    contextMenuItems() {
+      const { visitedViews } = tagsViewGetters
+      const closeable = visitedViews.length > 1 && !isAffix(this.selectedTag)
+
+      return [
+        { content: '刷新', click: this.refreshSelectedTag },
+        { content: closeable && '关闭', click: this.closeSelectedTag },
+        { content: '关闭其他', click: this.closeOthersTags },
+        { content: '关闭全部', click: this.closeAllTags }
+      ].filter(i => i.content)
+    },
+
+    // 避免HorizontalScroller在右键时触发$forceUpdate
+    // https://segmentfault.com/q/1010000040171066
+    tagsSlot() {
+      return this._u([{
+        key: 'default',
+        fn: this.renderTags,
+        proxy: true
+      }])
+    }
+  },
+
+  watch: {
+    $route(to, from) {
+      tagsViewGetters.enableChangeTransition && this.decideRouteTransition(to, from)
+
+      // 如果是刷新的话，不需要进行后续操作
+      if (isRedirectRouter(to)) return
+
+      this.setActiveKey(to)
+      this.addTag(to)
+      this.$nextTick(this.moveToCurrentTag)
+    }
+  },
+
+  methods: {
+    /**
+     * 根据路由设置当前激活的页签key
+     * @param route {import('vue-router').Route}
+     */
+    setActiveKey(route) {
+      this.activeKey = getRouterKey(route)
+    },
+
+    /**
+     * 根据访问的tab页的左右顺序来确定路由动画
+     * @param to {import('vue-router').Route}
+     * @param from {import('vue-router').Route}
+     */
+    decideRouteTransition(to, from) {
+      const { next, prev } = pageGetters.transition
+      const { visitedViews } = tagsViewGetters
+      const fromKey = getRouterKey(from)
+      const toKey = getRouterKey(to)
+
+      // 这里认为页签数量不会太多，所以为了可读性使用两次循环查找
+      const fromIndex = visitedViews.findIndex(i => i.key === fromKey)
+      const toIndex = visitedViews.findIndex(i => i.key === toKey)
+
+      let transitionName = prev
+
+      // 新开tab也认为顺序高于上一个tab
+      if (toIndex === -1 || fromIndex < toIndex) {
+        transitionName = next
+      }
+
+      pageMutations.transition({ curr: transitionName })
+    },
+
+    // 初始化固定显示的页签
+    initTags() {
+      // TODO 如果页签栏初始化后菜单未加载，则固定页签会出问题
+      // 添加所有固定显示的页签
+      getAffixTagsFromMenuTree(this.$router, appGetters.menus).forEach(tagsViewMutations.addTagOnly)
+
+      // 将当前路由对象添加为页签
+      this.addTag(this.$route)
+    },
+    /**
+     * 尝试将路由对象添加为tab页
+     * @param route {import('vue-router').Route}
+     */
+    addTag(route) {
+      tagsViewMutations.addTagAndCache({
+        ...route,
+        meta: {
+          ...route.meta,
+          title: getRouterTitle(route)
+        }
+      })
+    },
+    // 横向滚动条移动至当前tab
+    moveToCurrentTag() {
+      const { scroller } = this.$refs
+      const cur =
+        Array
+          .from(scroller.$el.children)
+          .find(el => el.classList.contains('active'))
+      cur && scroller.moveToTarget(cur)
+    },
+    /**
+     * 激活末尾页签
+     * @param refresh {boolean=} 目标路由是当前路由时是否需要刷新
+     * @return {Promise<Route>}
+     */
+    gotoLastTag(refresh = false) {
+      const views = tagsViewGetters.visitedViews
+      const router = this.$router
+
+      if (views.length === 0) {
+        return router.push('/')
+      }
+
+      const latest = views[views.length - 1]
+
+      // 目标路由是当前路由时需要刷新，否则直接跳转
+      this.activeKey === latest.key
+        ? refresh && refreshPage(router)
+        // 需要套一层$nextTick，否则tagsViewStore.visitedViews可能只会变动一次
+        : this.$nextTick(() => router.push(latest))
+    },
+
+    /**
+     * 刷新所选页签
+     * @param view {View}
+     */
+    refreshSelectedTag(view = this.selectedTag) {
+      refreshPage(this.$router, view)
+    },
+    /**
+     * 关闭所选页签
+     * @param view {VisitedView}
+     */
+    closeSelectedTag(view = this.selectedTag) {
+      if (tagsViewGetters.visitedViews.length <= 1 || isAffix(view)) return
+
+      tagsViewMutations.delTagAndCache(view)
+      this.activeKey === view.key && this.gotoLastTag()
+    },
+    // 关闭除激活、固定页签以外的所有页签
+    closeOthersTags() {
+      tagsViewMutations.delOtherTagAndCache(this.selectedTag)
+      this.gotoLastTag()
+    },
+    // 关闭除固定页签以外的所有页签
+    closeAllTags() {
+      tagsViewMutations.delAllTagAndCache()
+      this.gotoLastTag(true)
+    },
+    /**
+     * 在页签上打开右键菜单
+     * @param tag {VisitedView}
+     * @param e {MouseEvent}
+     */
+    openContextMenu(tag, e) {
+      e.preventDefault()
+
+      // 销毁之前的右键菜单实例
+      this.$contextmenu && this.$contextmenu()
+
+      this.selectedTag = tag
+
+      this.$contextmenu = useContextMenu(this.contextMenuItems, {
+        left: e.clientX + 15,
+        top: e.clientY + 5
+      })
+    },
+
+    renderTags() {
+      const { $createElement: h, $router, activeKey } = this
+      const { itemSlot, visitedViews } = tagsViewGetters
+      const renderFn = itemSlot || renderDefaultStyleTag
+
+      return visitedViews.map(view => {
+        const active = activeKey === view.key
+        const showClose = !isAffix(view) && visitedViews.length > 1
+        const on = {
+          contextmenu: e => this.openContextMenu(view, e)
+        }
+        const onClose = e => {
+          // 需要阻止事件冒泡，不然会触发tag的click事件
+          e.stopPropagation()
+          this.closeSelectedTag(view)
+        }
+
+        // 非激活页签时，绑定点击事件，点击跳转到页签对应的路由
+        if (!active) {
+          on.click = () => $router.push(view, () => undefined)
+        }
+
+        return renderFn(h, {
+          key: view.key,
+          active,
+          on,
+          title: view.meta.title,
+          close: showClose && onClose
+        })
+      })
+    }
+  },
+
+  mounted() {
+    this.setActiveKey(this.$route)
+    this.initTags()
+  },
+
+  render() {
+    return (
+      <nav class="tags-view">
+        <HorizontalScroller ref="scroller" scopedSlots={this.tagsSlot}/>
+      </nav>
+    )
+  }
+}
+</script>

package/src/component/TagsView/style.scss

@@ -0,0 +1,51 @@
+.tags-view {
+  height: $tags-view-height;
+  background-color: $tags-view-background-color;
+  box-shadow: $tags-view-shadow;
+  overflow: hidden;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border: $tags-view-item-border;
+    border-radius: $tags-view-item-border-radius;
+    padding: $tags-view-item-padding;
+    margin: $tags-view-item-between / 2;
+    font-size: $tags-view-item-font-size;
+    color: $--color-text-secondary;
+    background-color: $--color-white;
+    box-sizing: border-box;
+    user-select: none;
+    cursor: pointer;
+
+    &:first-of-type {
+      margin-left: $tags-view-item-between;
+    }
+
+    &:last-of-type {
+      margin-right: $tags-view-item-between;
+    }
+
+    &.active {
+      color: $--color-primary;
+
+      .tags-view-item__dot {
+        background-color: $--color-primary;
+      }
+    }
+
+    &__dot {
+      background-color: #e8eaec;
+      width: $tags-view-item-font-size;
+      height: $tags-view-item-font-size;
+      border-radius: 50%;
+      margin-right: .5em;
+    }
+
+    .el-icon-close {
+      font-size: $tags-view-item-font-size + 2;
+      margin-left: 1em;
+    }
+  }
+}

package/src/component/TagsView/util.js

@@ -0,0 +1,67 @@
+import { getRouterTitle } from '../../config/logic'
+
+/**
+ * 判断页签是否固定
+ *
+ * @param view {View}
+ * @return {boolean} 是固定页签则返回true，否则false
+ */
+export function isAffix(view) {
+  return view ? view.meta.affix : false
+}
+
+/**
+ * 从菜单树中获取所有需要固定显示的页签
+ *
+ * @param router {VueRouter}       - 路由实例
+ * @param menus {StoreMenuItem[]}  - appStore中的菜单
+ * @return {View[]}
+ */
+export function getAffixTagsFromMenuTree(router, menus) {
+  return menus.reduce((affixTags, menu) => {
+    const { fullPath, children, meta } = menu
+
+    if (meta.affix === true) {
+      const { route } = router.resolve(fullPath)
+
+      affixTags.push({
+        ...route,
+        meta: {
+          affix: true,
+          ...route.meta,
+          title: getRouterTitle(route)
+        }
+      })
+    }
+
+    if (children) {
+      const tempTags = getAffixTagsFromMenuTree(router, children)
+      tempTags.length && affixTags.push(...tempTags)
+    }
+
+    return affixTags
+  }, [])
+}
+
+/**
+ * 渲染默认样式的页签
+ *
+ * @param h {import('vue').CreateElement}  - 渲染函数
+ * @param key {string}                     - vnode的key值
+ * @param active {boolean=}                - 是否激活
+ * @param on {{[k:string]:function}?}      - 绑定的事件监听器
+ * @param title {string}                   - 页签文字
+ * @param close {function?}                - 点击关闭按钮时触发的函数
+ * @return {import('vue').VNode}
+ */
+export function renderDefaultStyleTag(h, { key, active = false, on, title, close }) {
+  const className = `tags-view-item${active ? ' active' : ''}`
+
+  return (
+    <div key={key} class={className} {...{ on }}>
+      <div class="tags-view-item__dot"/>
+      <span>{title}</span>
+      {close && <i class="el-icon-close" on-click={close}/>}
+    </div>
+  )
+}

package/src/config/const.js

@@ -0,0 +1,24 @@
+/**
+ * 一些可修改的常量
+ */
+
+export default {
+  /**
+   * 移动端的最大宽度
+   * 默认为scss中的$max-mobile-width变量
+   * 该值的变动并不能影响样式，需要同时修改$max-mobile-width或覆盖相关样式
+   */
+  maxMobileWidth: 500,
+
+  /**
+   * redirect的路径名
+   * 如果需要修改，则需要在injectDefaultRoute执行前修改
+   */
+  redirectPath: '/redirect',
+
+  /**
+   * 是否开启Layout组件的插槽功能
+   * 关闭后只能通过store使用render方式来自定义渲染内容，不过可以提高一丢丢性能
+   */
+  enableLayoutSlot: true
+}

package/src/config/defaultRoute.js

@@ -0,0 +1,23 @@
+import Const from './const'
+import Redirect from '../component/Redirect'
+
+/**
+ * 注入默认的路由
+ *
+ * @param layout 你的layout组件
+ * @returns {array}
+ */
+export function injectDefaultRoute(layout) {
+  return [
+    {
+      path: Const.redirectPath,
+      component: layout,
+      children: [
+        {
+          path: '*',
+          component: Redirect
+        }
+      ]
+    }
+  ]
+}

package/src/config/index.js

@@ -0,0 +1,4 @@
+import Const from './const'
+import { injectDefaultRoute } from './defaultRoute'
+
+export { Const, injectDefaultRoute }

package/src/config/logic.js

@@ -0,0 +1,53 @@
+/**
+ * 一些可能后续会修改的公用逻辑
+ */
+
+import Const from './const'
+
+/**
+ * 获取每个路由对应的唯一key
+ * @param route {Route}
+ * @returns {string}
+ */
+export function getRouterKey(route) {
+  const { name, path, fullPath, meta: { usePathKey, useFullPathKey } = {} } = route
+  return usePathKey
+    ? path
+    : useFullPathKey
+      ? fullPath
+      : name || fullPath
+}
+
+/**
+ * 获取路由标题
+ * @param route {Route}
+ * @returns {string}
+ */
+export function getRouterTitle(route) {
+  const { title, dynamicTitle } = route.meta || {}
+
+  return typeof dynamicTitle === 'function'
+    ? dynamicTitle(route) || title
+    : title
+}
+
+/**
+ * 获取路由对应的激活菜单index
+ * @param route {Route}
+ * @returns {string}
+ */
+export function getRouterActiveMenu(route) {
+  const { path, meta: { activeMenu } = {} } = route
+
+  return activeMenu || path
+}
+
+/**
+ * 判断路由是否为redirect路由，是则返回true
+ * @param route {Route}
+ * @returns {boolean}
+ */
+export function isRedirectRouter(route) {
+  const [first] = route.matched
+  return first && first.path === Const.redirectPath
+}

package/src/helper.js

@@ -0,0 +1,43 @@
+/**
+ * 为避免循环依赖拆分出来的工具类
+ */
+
+import { Const } from './config'
+import { tagsViewMutations } from './store'
+
+/**
+ * 根据宽度判断是否为移动端，是则返回true
+ *
+ * @return {boolean}
+ */
+export function isMobile() {
+  return window.innerWidth <= Const.maxMobileWidth
+}
+
+/**
+ * 路由刷新
+ *
+ * @param router              vue-router实例
+ * @param route               需要刷新的路由对象，默认为当前路由
+ * @param replace {boolean}   是否使用replace进行跳转
+ * @return {Promise}          返回vue-router跳转的结果
+ */
+export function refreshPage(router, route = router.currentRoute, replace = true) {
+  tagsViewMutations.delCacheOnly(route)
+  const to = `${Const.redirectPath}${route.fullPath}`
+  return router[replace ? 'replace' : 'push'](to)
+}
+
+/**
+ * 关闭当前页，如果传入next则跳转到next页面
+ *
+ * @param router                vue-router实例
+ * @param next {string|route}   跳转的目标页面，作为第一个参数传入vue-router.replace
+ * @return {undefined|Promise}  仅在next有值时，返回vue-router.replace的结果
+ */
+export function closeCurrentPage(router, next) {
+  tagsViewMutations.delTagAndCache(router.currentRoute)
+  if (next) {
+    return router.replace(next)
+  }
+}

package/src/index.js

@@ -0,0 +1,15 @@
+import Layout from './component/Layout'
+import Breadcrumb from './component/Breadcrumb'
+import ContextMenu from './component/ContextMenu'
+import Hamburger from './component/Hamburger'
+import HorizontalResizableMenu from './component/HorizontalResizableMenu'
+import Logo from './component/Logo'
+import NavMenu from './component/NavMenu'
+
+export default Layout
+export { Breadcrumb, ContextMenu, Hamburger, HorizontalResizableMenu, Logo, NavMenu }
+
+export * from './config'
+export * from './store'
+
+export { refreshPage, closeCurrentPage } from './helper'

package/src/mixin/menu.js

@@ -0,0 +1,72 @@
+/**
+ * 顶部菜单和侧边栏菜单的公共混入
+ */
+import { refreshPage } from '../helper'
+import { getRouterKey } from '../config/logic'
+
+export default {
+  data() {
+    return {
+      // 当前激活的菜单的fullPath
+      // 之所以手动维护是因为el-menu在点击后就会设置activeIndex
+      activeMenu: '',
+
+      // 传递给nav-menu，只会在activeMenu第一次变化时变化
+      defaultActive: ''
+    }
+  },
+
+  methods: {
+    // 点击菜单后的动作
+    actionOnSelectMenu(menuIndex, refreshWhenSame = true) {
+      // 外部链接时打开新窗口
+      if (menuIndex.startsWith('http')) {
+        window.open(menuIndex)
+        return this.resetActiveMenu()
+      }
+
+      const { route } = this.$router.resolve(menuIndex)
+
+      if (route.matched.length === 0) {
+        console.warn(`点击菜单时出错，'${menuIndex}'没有对应的路由`)
+        return this.resetActiveMenu()
+      }
+
+      // 触发的菜单会跳转到当前路由时，根据参数判断是否进行刷新
+      getRouterKey(this.$route) === getRouterKey(route)
+        ? refreshWhenSame && refreshPage(this.$router)
+        : this.$router.push(route)
+    },
+
+    // el-menu的高亮结果可能有误，所以手动更新
+    resetActiveMenu() {
+      const elMenu = this.$_getElMenuInstance()
+
+      // 仅当存在index为this.activeMenu的el-menu-item时才更新
+      if (elMenu && elMenu.items[this.activeMenu]) {
+        elMenu.updateActiveIndex(this.activeMenu)
+      }
+    },
+
+    // 将defaultActive更新为activeMenu的值，如果两者相同会调用resetActiveMenu()
+    // 尽量少调用，defaultActive的变化将导致调用方以及nav-menu的重新渲染
+    setDefaultActiveMenu() {
+      const newVal = this.activeMenu
+      const oldVal = this.defaultActive
+
+      // 该值变化时，nav-menu会重新渲染来更新高亮菜单
+      this.defaultActive = newVal
+
+      // 未变化时需要手动更新
+      if (oldVal === newVal) {
+        this.resetActiveMenu()
+      }
+    },
+
+    // 获取el-menu实例
+    $_getElMenuInstance() {
+      const navMenu = this.$refs['nav-menu']
+      return navMenu && navMenu.$refs['el-menu']
+    }
+  }
+}