qdt-admin-layout 1.0.0

package/src/style/transition.scss

@@ -0,0 +1,71 @@
+/* 过渡动画 */
+
+
+//路由过渡动画
+.right-out,
+.left-out {
+  &-leave-active,
+  &-enter-active {
+    transition: transform .2s, opacity .2s;
+  }
+}
+
+.right-out {
+  &-enter {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+}
+
+.left-out {
+  &-enter {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+}
+
+
+//面包屑切换动画
+.breadcrumb {
+  &-enter-active,
+  &-leave-active,
+  &-move {
+    transition: transform .5s, opacity .5s;
+  }
+
+  &-enter,
+  &-leave-active {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
+
+
+//侧边栏切换动画
+.sidebar-enter-active {
+  transition: all 0.2s;
+}
+
+.sidebar-enter,
+.sidebar-leave-active {
+  opacity: 0;
+  transform: translateY(30px) skewY(10deg)
+}
+
+.sidebar-leave-active {
+  position: absolute;
+}

package/src/style/var.scss

@@ -0,0 +1,81 @@
+@import "~element-ui/packages/theme-chalk/src/common/var.scss";
+
+//移动端的最大宽度
+//值变动时需同时修改../config/const.js maxMobileWidth
+$max-mobile-width: 500px !default;
+
+//logo的宽高
+$logo-size: 30px !default;
+
+//菜单中icon的大小
+$menu-icon-size: 16px !default;
+//菜单中icon和文字的距离
+$menu-icon-text-gap: 10px !default;
+//菜单的padding
+//值变动时需同时修改../store/aside.js inlineIndent
+$menu-padding: $menu-icon-size + $menu-icon-text-gap !default;
+//暗色菜单的背景色
+$menu-background-dark: #304156 !default;
+//暗色子级菜单的背景色
+$sub-menu-background-dark: darken($menu-background-dark, 5%) !default;
+//亮色菜单的文字颜色
+$menu-text-color-light: $--color-text-primary !default;
+//暗色菜单的文字颜色
+$menu-text-color-dark: rgba(255, 255, 255, 0.65) !default;
+//亮色菜单的文字hover颜色
+$menu-text-hover-color-light: $--color-primary !default;
+//暗色菜单的文字hover颜色
+$menu-text-hover-color-dark: $--color-white !default;
+
+//侧边栏宽度
+$aside-width: 208px !default;
+//侧边栏折叠时的宽度
+$aside-collapse-width: $menu-icon-size + $menu-padding * 2 !default;
+
+//顶栏高度
+$header-height: 60px !default;
+//顶栏的padding-left
+$header-padding-left: 12px !default;
+//暗色顶栏的背景色
+$header-background-dark: #1f293d !default;
+//亮色顶栏的功能项颜色
+$header-item-color-light: $menu-text-color-light !default;
+//暗色顶栏的功能项颜色
+$header-item-color-dark: rgba(255, 255, 255, 0.85) !default;
+//亮色顶栏的功能项hover背景颜色
+$header-item-hover-color-light: rgba(0, 0, 0, 0.025) !default;
+//暗色顶栏的功能项hover背景颜色
+$header-item-hover-color-dark: lighten($header-background-dark, 5%) !default;
+//主要用于区分侧边栏、顶栏、页签栏的阴影，不建议修改
+$header-z-index: 10 !default;
+
+//页签栏高度
+$tags-view-height: 32px !default;
+//页签栏背景色
+$tags-view-background-color: #f0f2f5 !default;
+//页签栏阴影
+$tags-view-shadow: inset 0 0 3px 2px hsla(0, 0%, 39.2%, 0.1) !default;
+//页签字体大小
+$tags-view-item-font-size: $--font-size-extra-small !default;
+//页签边框
+$tags-view-item-border: 1px solid $--border-color-base !default;
+//页签圆角大小
+$tags-view-item-border-radius: 3px !default;
+//页签padding
+$tags-view-item-padding: 0 12px !default;
+//页签之间的距离
+$tags-view-item-between: 8px !default;
+
+//页面背景色
+$page-background-color: #f0f2f5 !default;
+//页头高度，用于max-view-height
+$page-header-height: 44px !default;
+//页头的上下padding
+$page-header-padding: 12px !default;
+//路由页面的margin
+$page-view-margin: 24px !default;
+//页脚高度，用于max-view-height
+$page-footer-height: 64px !default;
+
+//暗色边框的颜色，用于nav-menu和侧边栏
+$--border-color-dark: darken($header-background-dark, 5%) !default;

package/src/util.js

@@ -0,0 +1,69 @@
+/**
+ * 判断是否为空值，undefined、null、'' 都视为空值
+ *
+ * @param str         不定参数
+ * @return {boolean}  若为空值，返回true，否则返回false
+ */
+export function isEmpty(...str) {
+  return str.some(i => i === undefined || i === null || i === '')
+}
+
+/**
+ * 防抖
+ *
+ * @param func {function}      原函数
+ * @param wait {number}        防抖间隔，单位毫秒
+ * @param immediate {boolean}  是否立即执行一次
+ * @return {function}          经过防抖包装后的函数
+ */
+export function debounce(func, wait = 100, immediate = false) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = new Date().getTime() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = window.setTimeout(later, wait - last)
+    }
+    else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function() {
+    context = this
+    args = arguments
+    timestamp = new Date().getTime()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = window.setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+/**
+ * 以深度优先找到根节点的第一个叶子节点，并判断是否有其他的叶子节点
+ *
+ * @param node
+ * @param hasOtherLeaf
+ * @returns {{hasOtherLeaf: boolean, leaf: ({children}|*)}|*}
+ */
+export function findFirstLeaf(node, hasOtherLeaf = false) {
+  if (!node || !node.children || node.children.length === 0) {
+    return { leaf: node, hasOtherLeaf }
+  }
+
+  return findFirstLeaf(node.children[0], hasOtherLeaf || node.children.length > 1)
+}

package/types/config.d.ts

@@ -0,0 +1,12 @@
+import Vue, { ComponentOptions, AsyncComponent } from 'vue'
+import { RouteConfig } from 'vue-router'
+
+type Component = ComponentOptions<Vue> | typeof Vue | AsyncComponent
+
+export declare const Const: {
+  maxMobileWidth: number
+  redirectPath: string
+}
+export declare const injectDefaultRoute: {
+  (layout: Component): RouteConfig[]
+}

package/types/helper.d.ts

@@ -0,0 +1,10 @@
+import VueRouter, { Route, RawLocation } from 'vue-router'
+
+export declare const refreshPage: {
+  (router: VueRouter, route?: Route, replace?: boolean): Promise<Route>
+}
+export declare const closeCurrentPage: {
+  (router: VueRouter): void
+
+  (router: VueRouter, next: RawLocation): Promise<Route>
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import './vue-router'
+
+export * from './config'
+export * from './helper'
+export * from './store'

package/types/menu.d.ts

@@ -0,0 +1,17 @@
+export interface MenuItemMeta {
+  title: string
+  sort?: number
+  icon?: string
+  affix?: boolean
+}
+
+export interface MenuItem {
+  fullPath: string
+  meta: MenuItemMeta
+  children?: MenuItem[]
+}
+
+export interface StoreMenuItem extends MenuItem {
+  parent: StoreMenuItem
+  children?: StoreMenuItem[]
+}

package/types/route.d.ts

@@ -0,0 +1,15 @@
+import { Route } from 'vue-router'
+
+export interface RouteMeta {
+  [k: string]: any
+
+  title?: string
+  dynamicTitle?: (route: Route) => string
+  pageHeader?: boolean
+  pageFooter?: boolean
+  noCache?: boolean
+  activeMenu?: string
+  iframe?: string
+  usePathKey?: boolean
+  useFullPathKey?: boolean
+}

package/types/store.d.ts

@@ -0,0 +1,156 @@
+import { CreateElement, VNode } from 'vue'
+import { Route, RawLocation } from 'vue-router'
+import { MenuItem, MenuItemMeta, StoreMenuItem } from './menu'
+import { RouteMeta } from './route'
+
+type Mutation<T> = (val: T) => void
+
+
+interface AppGetters {
+  isMobile: boolean
+  title: string
+  logo: string
+  logoRoute: RawLocation
+  onLogoClick: (e: Event) => any
+  logoSlot: (h: CreateElement, param?: { img: VNode, title: VNode, props: object }) => VNode | VNode[]
+  showLogo: boolean
+  activeRootMenu: string
+  menus: StoreMenuItem[]
+  loadingMenu: boolean
+  struct: 'top-bottom' | 'left-right'
+  navMode: 'aside' | 'mix' | 'head'
+}
+
+type BaseAppMutations = { [K in keyof AppGetters]: Mutation<AppGetters[K]> }
+
+type AppMutations = Omit<BaseAppMutations, 'menus'> & {
+  menus: Mutation<MenuItem[]>
+  modifyMenuMeta: (fullPath: string, meta: MenuItemMeta) => void
+}
+
+
+interface AsideGetters {
+  show: boolean
+  theme: 'light' | 'dark'
+  uniqueOpen: boolean
+  collapse: boolean
+  showParentOnCollapse: boolean
+  showHamburger: boolean
+  autoHide: boolean
+  alwaysRender: boolean
+  postMenus: (menus: StoreMenuItem[]) => MenuItem[]
+  inlineIndent: number
+  switchTransitionName: string
+  defaultOpeneds: string[]
+  defaultSlot: (h: CreateElement) => VNode
+  headerSlot: (h: CreateElement, logo: VNode) => VNode | VNode[]
+  footerSlot: (h: CreateElement, hamburger: VNode) => VNode | VNode[]
+  menuIconSlot: (h: CreateElement, { menu: MenuItem, depth: number }) => VNode
+  menuContentSlot: (h: CreateElement, { menu: MenuItem, depth: number }) => VNode
+}
+
+type BaseAsideMutations = { [K in keyof AsideGetters]: Mutation<AsideGetters[K]> }
+
+type AsideMutations = BaseAsideMutations & {
+  open(): void
+  close(): void
+  switch(action?: 'open' | 'close'): void
+}
+
+
+interface DropdownItem {
+  icon?: string
+  content: string
+  handler: (e: Event) => any
+}
+
+interface HeaderGetters {
+  theme: 'light' | 'dark'
+  showCollapseIcon: boolean
+  avatar: string
+  username: string
+  dropdownItems: DropdownItem[]
+  dropdownItemsSlot: (h: CreateElement) => VNode[]
+  leftSlot: (h: CreateElement, [logo, hamburger]: VNode[]) => VNode | VNode[]
+  centerSlot: (h: CreateElement, [headMenu]: VNode[]) => VNode | VNode[]
+  rightSlot: (h: CreateElement, [refreshBtn, dropdown]: VNode[]) => VNode | VNode[]
+  menuIconSlot: (h: CreateElement, { menu: MenuItem, depth: number }) => VNode
+  menuContentSlot: (h: CreateElement, { menu: MenuItem, depth: number }) => VNode
+}
+
+type HeaderMutations = { [K in keyof HeaderGetters]: Mutation<HeaderGetters[K]> }
+
+
+interface PageGetters {
+  enableTransition: boolean;
+  transition: {
+    default?: string
+    next?: string
+    prev?: string
+    curr?: string
+  }
+  showIframe: boolean
+  currentIframe: string
+  iframeList: string[]
+  showHeader: boolean
+  showFooter: boolean
+  headerSlot: (h: CreateElement) => VNode | VNode[]
+  footerSlot: (h: CreateElement) => VNode | VNode[]
+}
+
+type BasePageMutations = { [K in keyof PageGetters]: Mutation<PageGetters[K]> }
+
+type PageMutations = BasePageMutations & {
+  addIframe: (src: string) => void
+  delIframe: (src: string) => void
+  openIframe: (src: string) => void
+  closeIframe: (src: string, del?: boolean) => void
+}
+
+
+interface View extends Route {
+  meta: RouteMeta
+}
+
+interface VisitedView extends View {
+  key: string
+}
+
+interface TagsViewGetters {
+  enabled: boolean
+  enableCache: boolean
+  enableChangeTransition: boolean
+  itemSlot: (h: CreateElement, param?: { key: string, active: boolean, on?: { [k: string]: Function }, title: string, close?: Function }) => VNode
+  visitedViews: VisitedView[]
+  cachedViews: string[]
+}
+
+type BaseTagsViewMutations = { [K in keyof TagsViewGetters]: Mutation<TagsViewGetters[K]> }
+
+type TagsViewMutations = BaseTagsViewMutations & {
+  addTagOnly: Mutation<View>
+  addCacheOnly: Mutation<View>
+  addTagAndCache: Mutation<View>
+  delTagOnly: Mutation<View>
+  delCacheOnly: Mutation<View>
+  delTagAndCache: Mutation<View>
+  delOtherTagAndCache: Mutation<View>
+  delAllCache: () => void
+  delAllTagAndCache: () => void
+}
+
+
+export declare const appGetters: AppGetters
+export declare const appMutations: AppMutations
+export declare const asideGetters: AsideGetters
+export declare const asideMutations: AsideMutations
+export declare const headerGetters: HeaderGetters
+export declare const headerMutations: HeaderMutations
+export declare const pageGetters: PageGetters
+export declare const pageMutations: PageMutations
+export declare const tagsViewGetters: TagsViewGetters
+export declare const tagsViewMutations: TagsViewMutations
+
+export function getMenuByFullPath(fullPath: string): StoreMenuItem
+
+export function mapGetters<T, K extends keyof T>(getters: T, propsNames: K[]): { [k in K]: () => T[K] }

package/types/vue-router.d.ts

@@ -0,0 +1,7 @@
+import { RouteMeta } from './route'
+
+declare module 'vue-router/types/router' {
+  interface RouteConfigSingleView {
+    meta: RouteMeta
+  }
+}