qdt-admin-layout 1.0.0

package/src/store/app.js

@@ -0,0 +1,132 @@
+import Vue from 'vue'
+import { createGetters, createMutations } from './util'
+import { isMobile } from '../helper'
+
+const state = {
+  // 区分pc和移动端
+  isMobile: isMobile(),
+
+  // 标题，目前只配合logo使用
+  title: '',
+
+  // logo地址
+  logo: '',
+
+  // 点击logo后跳转的路由，作为router.push/replace的第一个参数
+  logoRoute: '/',
+
+  // 点击logo容器时触发，会替换原有的逻辑，(e) => any
+  onLogoClick: undefined,
+
+  // 是否显示侧边栏或顶栏的logo
+  showLogo: true,
+
+  // 当前激活的顶部菜单的fullPath
+  activeRootMenu: '',
+
+  // 所有的树形菜单，mix导航模式时，每个元素为顶部菜单，顶部菜单的子级（如果有）为侧边栏菜单
+  menus: [],
+
+  // 是否正在加载菜单，会让侧边栏菜单和顶栏菜单呈现加载状态
+  loadingMenu: false,
+
+  // 分层结构，上下（'top-bottom'）、左右（'left-right'）
+  struct: 'left-right',
+
+  // 导航模式，'aside'、'head'、'mix'
+  navMode: 'mix',
+
+  // 自定义渲染logo，(h, {img, title, props}) => VNode | VNode[]
+  logoSlot: undefined
+}
+
+const store = Vue.observable(state)
+
+//加速查找menu的哈希表：<k: menu.fullPath, v: menu>
+let MenuSearchMap = Object.create(null)
+
+//对菜单进行排序、增加parent属性，并将转换后的菜单节点放入查找表中
+function transformMenu(menus, parent) {
+  if (!menus) return
+
+  const copy = menus.map(menu => ({ ...menu }))
+
+  copy.sort((pre, next) => {
+    pre = getSortValue(pre)
+    next = getSortValue(next)
+    if (pre < next) return -1
+    if (pre === next) return 0
+    return 1
+  })
+
+  copy.forEach(menu => {
+    menu.parent = parent
+    MenuSearchMap[menu.fullPath] = menu
+
+    if (menu.children) {
+      menu.children = transformMenu(menu.children, menu)
+    }
+  })
+
+  return copy
+}
+
+//菜单排序值的空值处理
+function getSortValue(item) {
+  const sort = deepGetSortValue(item)
+  return sort == null ? 10000 : sort
+}
+
+//获取菜单的排序值
+function deepGetSortValue(item) {
+  const { children = [], meta: { sort } = {} } = item
+
+  if (sort != null) return sort
+
+  // 如果只有一个子节点，那么取子节点的排序值
+  if (children.length === 1) {
+    return deepGetSortValue(children[0])
+  }
+
+  return null
+}
+
+export const getters = createGetters(store)
+
+export const mutations = {
+  ...createMutations(store),
+
+  menus(v) {
+    // 每次更新菜单时都需要清空加速表
+    MenuSearchMap = Object.create(null)
+
+    if (!Array.isArray(v)) {
+      return store.menus = []
+    }
+
+    store.menus = transformMenu(v)
+  },
+
+  /**
+   * 修改某一个菜单的meta属性
+   *
+   * @param fullPath {string} 菜单的fullPath
+   * @param meta {MenuItemMeta}
+   */
+  modifyMenuMeta(fullPath, meta) {
+    const menu = getMenuByFullPath(fullPath)
+    if (!menu) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(`[appMutations.modifyMenu] 没有fullPath为${fullPath}的菜单`)
+      }
+      return
+    }
+
+    menu.meta = { ...menu.meta, ...meta }
+  }
+}
+
+//根据菜单的fullPath快速查找菜单
+export function getMenuByFullPath(fullPath) {
+  return MenuSearchMap[fullPath]
+}

package/src/store/aside.js

@@ -0,0 +1,92 @@
+/**
+ * 侧边栏的响应式数据
+ */
+import Vue from 'vue'
+import { getters as appGetters } from './app'
+import { createGetters, createMutations } from './util'
+
+const state = {
+  // 抽屉模式时的显隐
+  show: false,
+
+  // 主题，light 或 dark
+  theme: 'dark',
+
+  // 手风琴效果
+  uniqueOpen: true,
+
+  // 是否折叠
+  collapse: false,
+
+  // 折叠时显示上级
+  showParentOnCollapse: false,
+
+  // 是否显示汉堡包
+  showHamburger: false,
+
+  // 自动隐藏
+  autoHide: false,
+
+  // 是否在没有菜单时也渲染侧边栏
+  alwaysRender: false,
+
+  // 在侧边栏渲染前对菜单数据进行操作的函数（menus => changedMenus:array），需要返回修改后的菜单数组！
+  postMenus: null,
+
+  // 传递给nav-menu，子菜单的单位缩进距离，默认为var.scss中的$menu-padding
+  inlineIndent: 26,
+
+  // 侧边栏菜单变化时的过渡动画名称，最终传递给transition的name属性，为空时不使用过渡动画
+  switchTransitionName: 'sidebar',
+
+  // 默认展开的菜单的fullPath数组
+  defaultOpeneds: [],
+
+  // 自定义渲染侧边栏内容，(h) => VNode
+  defaultSlot: undefined,
+  // 自定义渲染侧边栏头部内容，(h, logo) => VNode | VNode[]
+  headerSlot: undefined,
+  // 自定义渲染侧边栏底部内容，(h, hamburger) => VNode | VNode[]
+  footerSlot: undefined,
+  // 自定义渲染菜单图标，(h, {menu, depth}) => VNode
+  menuIconSlot: undefined,
+  // 自定义渲染菜单内容，(h, {menu, depth}) => VNode
+  menuContentSlot: undefined
+}
+
+const store = Vue.observable(state)
+
+export const getters = createGetters(store)
+
+export const mutations = {
+  ...createMutations(store),
+
+  /*移动端或设置了侧边栏自动隐藏时打开关闭抽屉，否则展开折叠*/
+  open() {
+    if (appGetters.isMobile || store.autoHide) {
+      store.show = true
+    }
+    else store.collapse = false
+  },
+  close() {
+    if (appGetters.isMobile || store.autoHide) {
+      store.show = false
+    }
+    else store.collapse = true
+  },
+  // 切换侧边栏的状态
+  switch(action) {
+    switch (action) {
+      case 'open':
+        return mutations.open()
+      case 'close':
+        return mutations.close()
+      default :
+        const open =
+          appGetters.isMobile
+            ? !store.show
+            : store.collapse
+        open ? mutations.open() : mutations.close()
+    }
+  }
+}

package/src/store/header.js

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import { createGetters, createMutations } from './util'
+
+const state = {
+  // 主题，light 或 dark
+  theme: 'light',
+  // 是否显示第一级水平菜单的展开折叠图标
+  showCollapseIcon: false,
+
+  // 头像地址
+  avatar: '',
+
+  // 用户名称
+  username: '',
+
+  // 下拉菜单项，{icon:图标, content:菜单内容, handler:点击时触发的方法}
+  dropdownItems: [],
+
+  // 自定义渲染下拉菜单项，(h) => VNode[]
+  dropdownItemsSlot: undefined,
+  // 自定义渲染左侧内容，(h, [logo, hamburger]) => VNode | VNode[]
+  leftSlot: undefined,
+  // 自定义渲染中部内容，(h, [headMenu]) => VNode | VNode[]
+  centerSlot: undefined,
+  // 自定义渲染右侧内容，(h, [refreshBtn, dropdown]) => VNode | VNode[]
+  rightSlot: undefined,
+  // 自定义渲染菜单图标，(h, {menu, depth}) => VNode
+  menuIconSlot: undefined,
+  // 自定义渲染菜单内容，(h, {menu, depth}) => VNode
+  menuContentSlot: undefined
+}
+
+const store = Vue.observable(state)
+
+export const getters = createGetters(store)
+
+export const mutations = createMutations(store)

package/src/store/index.js

@@ -0,0 +1,20 @@
+export { getters as appGetters, mutations as appMutations, getMenuByFullPath } from './app'
+export { getters as asideGetters, mutations as asideMutations } from './aside'
+export { getters as headerGetters, mutations as headerMutations } from './header'
+export { getters as pageGetters, mutations as pageMutations } from './page'
+export { getters as tagsViewGetters, mutations as tagsViewMutations } from './tagsView'
+
+/**
+ * 简化从store中批量取值的过程
+ *
+ * @template T
+ * @param store {T}
+ * @param propNames {string[]}
+ * @return {{[key: string]: function(): any}}
+ */
+export function mapGetters(store, propNames) {
+  return propNames.reduce((map, prop) => {
+    map[prop] = () => store[prop]
+    return map
+  }, {})
+}

package/src/store/page.js

@@ -0,0 +1,67 @@
+/**
+ * 路由页面的响应式数据
+ */
+import Vue from 'vue'
+import { createGetters, createMutations } from './util'
+
+const state = {
+  // 是否启用过渡动画
+  enableTransition: true,
+  // 路由过渡动画
+  transition: {
+    // 当未启用多页签时的路由动画
+    default: 'el-fade-in',
+    // 要访问的tab顺序高于上一个访问的tab时的路由动画
+    next: 'left-out',
+    // 要访问的tab顺序不高于上一个访问的tab时的路由动画
+    prev: 'right-out',
+    // 当前使用的路由动画
+    curr: 'el-fade-in'
+  },
+
+  /*iframe的控制*/
+  showIframe: false,
+  currentIframe: '',
+  iframeList: [],
+
+  // 是否显示页头
+  showHeader: true,
+  // 是否显示页脚
+  showFooter: true,
+
+  // 自定义渲染页头内容，(h) => VNode | VNode[]
+  headerSlot: undefined,
+  // 自定义渲染页脚内容，(h) => VNode | VNode[]
+  footerSlot: undefined
+}
+
+const store = Vue.observable(state)
+
+export const getters = createGetters(store)
+
+export const mutations = {
+  ...createMutations(store),
+
+  // 修改transition时使用Object.assign
+  transition(obj) {
+    Object.assign(store.transition, obj)
+  },
+
+  addIframe(src) {
+    !store.iframeList.includes(src) && store.iframeList.push(src)
+  },
+  delIframe(src) {
+    const index = store.iframeList.findIndex(i => i === src)
+    index > -1 && store.iframeList.splice(index, 1)
+  },
+  openIframe(src) {
+    store.showIframe = true
+    store.currentIframe = src
+    mutations.addIframe(src)
+  },
+  closeIframe(src, del) {
+    store.showIframe = false
+    store.currentIframe = ''
+    del && mutations.delIframe(src)
+  }
+}

package/src/store/tagsView.js

@@ -0,0 +1,186 @@
+/**
+ * 多页签的响应式数据
+ */
+import Vue from 'vue'
+import { getters as pageGetters, mutations as pageMutations } from './page'
+import { createGetters, createMutations } from './util'
+import { isEmpty } from '../util'
+import { getRouterKey } from '../config/logic'
+
+const state = {
+  // 是否启用
+  enabled: true,
+  // 是否启用缓存功能
+  enableCache: true,
+  // 是否启用根据页签顺序来确定过渡动画的功能
+  enableChangeTransition: true,
+
+  // 自定义渲染页签，(h) => VNode
+  itemSlot: undefined,
+
+  // 显示的页签
+  visitedViews: [],
+  // 需要缓存的页签key的数组，用于<keep-router-view-alive/>:include
+  cachedViews: []
+}
+
+const store = Vue.observable(state)
+
+export const getters = createGetters(store)
+
+export const mutations = {
+  ...createMutations(store),
+
+  /**
+   * 多页签的启用/停用
+   * 停用时会移除所有缓存，并且重置路由过渡动画
+   * @param v {boolean} 启用为true，停用为false
+   */
+  enabled(v) {
+    store.enabled = v
+
+    if (!v) {
+      pageMutations.transition({ curr: pageGetters.transition.default })
+      mutations.delAllTagAndCache()
+    }
+  },
+
+  /**
+   * 多页签缓存功能的启用/停用
+   * 停用时会移除所有缓存
+   * @param v {boolean}
+   */
+  enableCache(v) {
+    store.enableCache = v
+    !v && mutations.delAllCache()
+  },
+
+  /**
+   * 根据页签顺序来确定过渡动画功能的启用/停用
+   * 停用时会将pageGetters.transition.curr设为为默认值
+   * @param v {boolean}
+   */
+  enableChangeTransition(v) {
+    store.enableChangeTransition = v
+    pageMutations.transition({ curr: pageGetters.transition.default })
+  },
+
+  /**
+   * 在页签栏上添加一个页签，没有标题、已存在的不会重复添加
+   * @param view {View}
+   */
+  addTagOnly(view) {
+    if (isEmpty(view.meta.title)) {
+      return
+    }
+
+    const key = getRouterKey(view)
+
+    if (store.visitedViews.some(v => v.key === key)) {
+      return
+    }
+
+    // 增加key属性
+    store.visitedViews.push({ ...view, key })
+  },
+
+  /**
+   * 将传入的页签加入缓存中
+   * 以下调用无效：设置了不缓存、已缓存
+   * @param view {View}
+   */
+  addCacheOnly(view) {
+    const { noCache } = view.meta
+
+    const key = getRouterKey(view)
+
+    if (noCache === true || store.cachedViews.includes(key)) {
+      return
+    }
+
+    store.cachedViews.push(key)
+  },
+
+  /**
+   * 同时调用{@link #addTagOnly}、{@link #addCacheOnly}
+   * @param view {View}
+   */
+  addTagAndCache(view) {
+    mutations.addTagOnly(view)
+    mutations.addCacheOnly(view)
+  },
+
+  /**
+   * 从页签栏中移除一个页签
+   * @param view {View}
+   */
+  delTagOnly(view) {
+    const key = getRouterKey(view)
+    const index = store.visitedViews.findIndex(i => i.key === key)
+    index > -1 && store.visitedViews.splice(index, 1)
+  },
+
+  /**
+   * 删除对应的缓存
+   * @param view {View}
+   */
+  delCacheOnly(view) {
+    const key = getRouterKey(view)
+    const index = store.cachedViews.indexOf(key)
+    index > -1 && store.cachedViews.splice(index, 1)
+
+    // 移除iframe
+    const { iframe } = view.meta
+    iframe && pageMutations.delIframe(iframe)
+  },
+
+  /**
+   * 同时调用{@link #delTagOnly}、{@link #delCacheOnly}
+   * @param view {View}
+   */
+  delTagAndCache(view) {
+    mutations.delTagOnly(view)
+    mutations.delCacheOnly(view)
+  },
+
+  /**
+   * 从页签栏上移除其他的非固定页签以及其他的缓存
+   * @param view {View}
+   */
+  delOtherTagAndCache(view) {
+    // 记录被移除的iframe
+    const removeIframe = []
+
+    const key = getRouterKey(view)
+    const cachedKey = store.cachedViews.find(i => i === key)
+
+    store.visitedViews = store.visitedViews.filter(v => {
+      if (v.meta.affix || v.key === key) {
+        return true
+      }
+
+      v.meta.iframe && removeIframe.push(v.meta.iframe)
+
+      return false
+    })
+    store.cachedViews = cachedKey ? [cachedKey] : []
+
+    pageMutations.iframeList(pageGetters.iframeList.filter(i => !removeIframe.includes(i)))
+  },
+
+  /**
+   * 移除所有缓存
+   */
+  delAllCache() {
+    store.cachedViews = []
+    pageMutations.iframeList([])
+  },
+
+  /**
+   * 从页签栏上移除所有非固定页签，并且移除所有缓存
+   */
+  delAllTagAndCache() {
+    store.visitedViews = store.visitedViews.filter(v => v.meta.affix)
+    mutations.delAllCache()
+  }
+}

package/src/store/util.js

@@ -0,0 +1,35 @@
+/**
+ * 为Vue.observer返回的对象设置getter
+ *
+ * @template T
+ * @param store {T}
+ * @returns {{[key in keyof T]: T[key]}}
+ */
+export function createGetters(store) {
+  const getters = Object.create(null)
+  Object.defineProperties(
+    getters,
+    Object.keys(store).reduce((obj, key) => {
+      obj[key] = {
+        enumerable: true,
+        get: () => store[key]
+      }
+      return obj
+    }, {})
+  )
+  return getters
+}
+
+/**
+ * 为Vue.observer返回的对象设置mutation
+ *
+ * @template T
+ * @param store {T}
+ * @returns {{[key in keyof T]: function(val: T[key]): void}}
+ */
+export function createMutations(store) {
+  return Object.keys(store).reduce((obj, key) => {
+    obj[key] = v => store[key] = v
+    return obj
+  }, Object.create(null))
+}

package/src/style/index.scss

@@ -0,0 +1,23 @@
+@import './var';
+
+@import './transition';
+
+@import '../component/Layout/style';
+@import '../component/Aside/style';
+@import '../component/Header/style';
+@import '../component/Page/style';
+@import '../component/TagsView/style';
+
+@import '../component/Breadcrumb/style';
+@import '../component/ContextMenu/style';
+@import '../component/Hamburger/style';
+@import '../component/Logo/style';
+@import '../component/NavMenu/style';
+@import '../component/HorizontalScroller/style';
+
+
+@media only screen and (max-width: $max-mobile-width) {
+  .hide-on-mobile {
+    display: none !important
+  }
+}

package/src/style/maxViewHeight.scss

@@ -0,0 +1,65 @@
+/* 辅助样式，使用max-view-height作为类名，获得路由页面的最大高度，需要自行引入 */
+
+@import './var';
+
+//可能达到的最大高度
+$max-height: '100vh - #{$page-view-margin * 2}';
+
+.max-view-height {
+  max-height: calc(#{$max-height});
+}
+
+//即使高度不够也占满
+.max-view-height.full {
+  height: 100vh;
+}
+
+//有顶栏
+.has-header .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height});
+}
+
+//有多页签栏
+.has-tags-view .max-view-height {
+  max-height: calc(#{$max-height} - #{$tags-view-height});
+}
+
+//有页头
+.has-page-header .max-view-height {
+  max-height: calc(#{$max-height} - #{$page-header-height});
+}
+
+//有页脚
+.has-page-footer .max-view-height {
+  max-height: calc(#{$max-height} - #{$page-footer-height});
+}
+
+//同时有顶栏和多页签栏
+.has-header.has-tags-view .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height} - #{$tags-view-height});
+}
+
+//同时有顶栏和页头
+.has-header .has-page-header .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height} - #{$page-header-height});
+}
+
+//同时有顶栏和页脚
+.has-header .has-page-footer .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height} - #{$page-footer-height});
+}
+
+//同时有顶栏、多页签栏、页头
+.has-header.has-tags-view .has-page-header .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height} - #{$tags-view-height} - #{$page-header-height});
+}
+
+//同时有顶栏、多页签栏、页脚
+.has-header.has-tags-view .has-page-footer .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height} - #{$tags-view-height} - #{$page-footer-height});
+}
+
+//同时有顶栏、多页签栏、页头、页脚
+.has-header.has-tags-view .has-page-header.has-page-footer .max-view-height {
+  max-height: calc(#{$max-height} - #{$header-height} - #{$tags-view-height} - #{$page-header-height} - #{$page-footer-height});
+}