qdt-admin-layout 1.0.0

package/src/component/Header/index.vue

@@ -0,0 +1,131 @@
+<script>
+/**
+ * 顶栏
+ */
+
+//TODO header会在head-menu渲染后再次渲染，初步排查是head-menu中的activeMenu改变所致
+import { appGetters, headerGetters } from "../../store";
+import Logo from "../../component/Logo";
+import Hamburger from "../../component/Hamburger";
+import HorizontalResizableMenu from "../../component/HorizontalResizableMenu";
+import { refreshPage } from "../../helper";
+import { isEmpty } from "../../util";
+
+export default {
+  name: "Header",
+
+  computed: {
+    // 左侧logo
+    defaultLogo() {
+      // 渲染顶栏logo的条件
+      // ①桌面端
+      // ②设置了显示logo
+      // ③导航模式为顶部导航或页面为上下结构
+      const renderLogo =
+        !appGetters.isMobile &&
+        appGetters.showLogo &&
+        (appGetters.navMode === "head" || appGetters.struct === "top-bottom");
+      return renderLogo && <Logo show-title />;
+    },
+    // 左侧汉堡包
+    defaultHamburger() {
+      // 移动端时必须渲染，不然侧边栏怎么出来
+      return (
+        appGetters.isMobile && <Hamburger class="header-item header-icon" />
+      );
+    },
+    // 中间的导航菜单
+    defaultHeadMenu() {
+      // 渲染顶部导航菜单的条件
+      // ①桌面端
+      // ②导航模式为顶部导航或混合导航
+      const renderHeadMenu =
+        !appGetters.isMobile && ["head", "aside"].includes(appGetters.navMode);
+
+      return renderHeadMenu && <HorizontalResizableMenu ref="head-menu" />;
+    },
+    // 右侧刷新按钮
+    defaultRefreshBtn() {
+      // 这里为了可读性，不再将click事件放到外面
+      return (
+        <div
+          title="刷新"
+          class="header-item"
+          on-click={() => refreshPage(this.$router)}
+        >
+          <i class="el-icon-refresh-right header-icon" />
+        </div>
+      );
+    },
+    // 右侧下拉菜单
+    defaultUserDropdown() {
+      const {
+        username,
+        logout = {},
+        message = {},
+        userinfo = {},
+      } = headerGetters;
+
+      return (
+        <div class="user-dropdown-reference">
+          <el-avatar
+            size={28}
+            src={headerGetters.avatar}
+            icon="el-icon-user-solid"
+          />
+          {!isEmpty(username) && (
+            <span class="username hide-on-mobile" on-click={userinfo}>
+              {username}
+            </span>
+          )}
+
+          <span class="username shu">|</span>
+          <i
+            style="color:#fff"
+            class="el-icon-bell header-icon"
+            on-click={message}
+          />
+          <span class="username shu">|</span>
+          <span class="username exit" on-click={logout}>
+            退出
+          </span>
+        </div>
+      );
+    },
+  },
+
+  methods: {
+    /*顶栏的左、中、右三部分内容*/
+    renderLeftContent(h) {
+      const defaultContent = [this.defaultLogo, this.defaultHamburger];
+      const { leftSlot } = headerGetters;
+
+      return leftSlot ? leftSlot(h, defaultContent) : defaultContent;
+    },
+    renderCenterContent(h) {
+      const defaultContent = [this.defaultHeadMenu];
+      const { centerSlot } = headerGetters;
+
+      return centerSlot ? centerSlot(h, defaultContent) : defaultContent;
+    },
+    renderRightContent(h) {
+      const defaultContent = [this.defaultRefreshBtn, this.defaultUserDropdown];
+      const { rightSlot } = headerGetters;
+
+      return rightSlot ? rightSlot(h, defaultContent) : defaultContent;
+    },
+  },
+
+  render(h) {
+    return (
+      <header class={`header ${headerGetters.theme}`}>
+        <div class="header-left">{this.renderLeftContent(h)}</div>
+
+        <div class="header-center">{this.renderCenterContent(h)}</div>
+
+        <div class="header-right">{this.renderRightContent(h)}</div>
+      </header>
+    );
+  },
+};
+</script>

package/src/component/Header/style.scss

@@ -0,0 +1,74 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  height: $header-height;
+  padding-left: $header-padding-left;
+  z-index: $header-z-index;
+  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.5);
+
+  &-left,
+  &-center,
+  &-right {
+    height: 100%;
+  }
+
+  &-left,
+  &-right {
+    display: flex;
+  }
+
+  &-center {
+    flex: 1;
+  }
+
+  .header-icon {
+    font-size: 18px;
+    padding: 0 7px;
+  }
+
+  .header-item {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    cursor: pointer;
+  }
+
+  // 左侧logo
+  .logo-container {
+    width: auto;
+    min-width: $aside-width - $header-padding-left;
+    padding-left: $menu-padding - $header-padding-left;
+  }
+
+  // 右侧用户头像和用户名
+  .user-dropdown-reference {
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    .username {
+      font-size: 14px;
+      color: #fff;
+      padding: 0 7px;
+    }
+    .shu {
+      padding: 0 13px;
+      font-size: 14px;
+    }
+    .exit {
+      padding-left: 7px;
+      padding-right: 20px;
+    }
+  }
+}
+
+@import "theme-light";
+@import "theme-dark";

package/src/component/Header/theme-dark.scss

@@ -0,0 +1,31 @@
+.header.dark {
+  background-color: $header-background-dark;
+
+  .logo-container {
+    color: $--color-white;
+  }
+
+  .header-item {
+    color: $header-item-color-dark;
+
+    &:hover {
+      background-color: $header-item-hover-color-dark;
+    }
+  }
+}
+
+//暗色主题的下拉菜单
+.header-dropdown.dark {
+  background-color: $header-background-dark;
+  border: none;
+
+  .el-dropdown-menu__item {
+    color: $menu-text-color-dark;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      color: $menu-text-hover-color-dark;
+    }
+  }
+}

package/src/component/Header/theme-light.scss

@@ -0,0 +1,15 @@
+.header.light {
+  background: linear-gradient(90deg, #f58852, #f56c45);
+
+  .logo-container {
+    color: #fff;
+  }
+
+  .header-item {
+    color: #fff;
+
+    &:hover {
+      background-color: $header-item-hover-color-light;
+    }
+  }
+}

package/src/component/HorizontalResizableMenu/GhostMenu.vue

@@ -0,0 +1,101 @@
+<script>
+/**
+ * 用于计算顶栏菜单的宽度
+ * 由nav-menu简化而来，仅保留第一级菜单以及必要属性
+ */
+
+import SubMenu from '../../component/ElMenu/sub'
+import NavMenu from '../../component/NavMenu'
+import { headerGetters, mapGetters } from '../../store'
+
+export default {
+  name: 'GhostMenu',
+
+  data() {
+    return {
+      // 外部菜单数据
+      menus: [],
+      // 各个第一级菜单节点的宽度
+      menuItemSizes: []
+    }
+  },
+
+  computed: {
+    ...mapGetters(headerGetters, [
+      'menuIconSlot',
+      'menuContentSlot'
+    ]),
+    menuClass() {
+      const { theme, showCollapseIcon } = headerGetters
+      return [
+        'el-menu--horizontal',
+        `el-menu--${theme}`,
+        !showCollapseIcon && 'hide-collapse-icon'
+      ]
+    }
+  },
+
+  methods: {
+    renderMenuIcon: NavMenu.methods.renderMenuIcon,
+    renderMenuContent: NavMenu.methods.renderMenuContent,
+    renderSingleMenu: NavMenu.methods.renderSingleMenu,
+
+    // 渲染有子级的菜单
+    renderSubMenu(h, menu, depth) {
+      const { fullPath } = menu
+
+      return (
+        <SubMenu key={fullPath} index={fullPath}>
+          <template slot="title">
+            {this.renderMenuIcon(h, menu, depth)}
+            {this.renderMenuContent(h, menu, depth)}
+          </template>
+        </SubMenu>
+      )
+    },
+    // 渲染菜单项
+    renderMenus(h, menus, depth = 1) {
+      return menus.map(menu => {
+        return Array.isArray(menu.children)
+          ? this.renderSubMenu(h, menu, depth)
+          : this.renderSingleMenu(h, menu, depth)
+      })
+    },
+
+    resize() {
+      const ul = this.$el
+      if (!ul) return
+
+      const menuItemNodes = ul.children
+      if (!menuItemNodes || menuItemNodes.length === 0) return
+
+      this.menuItemSizes = Array.from(menuItemNodes).map(i => i.getBoundingClientRect().width)
+    }
+  },
+
+  mounted() {
+    const dom = this.$el
+    dom.style.position = 'fixed'
+    dom.style.bottom = '-1000px'
+    dom.style.right = '-1000px'
+    dom.style.width = 'auto'
+    document.body.appendChild(dom)
+
+    this.resizeObserver = new window.ResizeObserver(this.resize)
+    this.resizeObserver.observe(dom)
+
+    this.$once('hook:beforeDestroy', () => {
+      this.$el && document.body.removeChild(this.$el)
+      if (Reflect.has(this, '$_resizeObserver')) {
+        this.$_resizeObserver.disconnect()
+        delete this.$_resizeObserver
+      }
+    })
+  },
+
+  render(h) {
+    const children = this.renderMenus(h, this.menus)
+    return h('el-menu', { class: this.menuClass, props: { mode: 'horizontal' } }, children)
+  }
+}
+</script>

package/src/component/HorizontalResizableMenu/index.vue

@@ -0,0 +1,280 @@
+<script>
+/**
+ * 顶部菜单，参考了ant design的响应式设计
+ */
+
+import Vue from 'vue'
+import menuMixin from '../../mixin/menu'
+import { appGetters, appMutations, headerGetters } from '../../store'
+import NavMenu from '../../component/NavMenu'
+import LoadingSpinner from '../../component/LoadingSpinner'
+import GhostMenu from './GhostMenu'
+import { getRouterActiveMenu } from '../../config/logic'
+import { getMenuByFullPath } from '../../store'
+import { findFirstLeaf } from '../../util'
+
+export default {
+  name: 'HorizontalResizableMenu',
+
+  mixins: [menuMixin],
+
+  data() {
+    return {
+      // 最后一个不被隐藏的顶部菜单的数组下标
+      // 为undefined时，说明不需要隐藏菜单，为-1时，说明需要隐藏全部菜单
+      lastVisibleIndex: undefined,
+      // 各个第一级菜单节点的宽度，取ghost-menu中的值
+      $menuItemSizes: [],
+      // ...指示器的宽度
+      $overflowedIndicatorWidth: 0,
+
+      // 用于生成el-submenu的key
+      seed: 0
+    }
+  },
+
+  computed: {
+    // 原始的菜单数组
+    menus() {
+      const { menus, navMode } = appGetters
+
+      switch (navMode) {
+        case 'head' :
+          return menus
+        case 'mix':
+          return menus.map(menu => ({ ...menu, children: undefined }))
+        default:
+          return []
+      }
+    },
+    // 实际用于渲染的菜单数组（仿antd的自适应宽度）
+    realMenus() {
+      const { lastVisibleIndex, menus, seed } = this
+
+      // 不需要隐藏菜单
+      if (lastVisibleIndex === undefined) {
+        return menus
+      }
+
+      const fullPath = `_${seed}`
+
+      // 隐藏全部菜单
+      if (lastVisibleIndex === -1) {
+        return [{ fullPath, meta: { icon: 'el-icon-menu' }, children: menus }]
+      }
+
+      const visible = menus.slice(0, lastVisibleIndex + 1)
+      const hidden = menus.slice(lastVisibleIndex + 1)
+
+      visible.push({ fullPath, meta: { title: '...' }, children: hidden })
+
+      return visible
+    },
+    // 是否有dom，加载中、无菜单时没有
+    hasDom() {
+      return !appGetters.loadingMenu && this.menus.length > 0
+    }
+  },
+
+  watch: {
+    // 路由变化时设置高亮菜单
+    $route: {
+      immediate: true,
+      handler(to) {
+        if (this.setActiveRootMenu(to)) {
+          this.setActiveMenu(appGetters.navMode, to)
+        }
+      }
+    },
+    // 顶部菜单变化时设置高亮菜单
+    realMenus: {
+      immediate: true,
+      handler(v) {
+        this.setActiveMenu()
+        this.setDefaultActiveMenu(v)
+      }
+    },
+    // 有dom时才进行自适应处理
+    hasDom: {
+      immediate: true,
+      async handler(value) {
+        // 等待mounted
+        await this.$nextTick()
+
+        value ? this.startObserver() : this.stopObserver()
+      }
+    },
+    // 变动时修改种子，避免组件不更新
+    lastVisibleIndex() {
+      this.seed++
+    }
+  },
+
+  methods: {
+    // 路由变化时设置高亮根节点菜单，有匹配菜单时返回true
+    setActiveRootMenu({ path, meta: { activeMenu } }) {
+      // 优先使用activeMenu找到路由匹配的菜单
+      const menu = getMenuByFullPath(activeMenu || path)
+      if (!menu) return false
+
+      // 向上找出菜单所属的根节点
+      let rootMenu = menu
+      while (rootMenu.parent) {
+        rootMenu = rootMenu.parent
+      }
+
+      appMutations.activeRootMenu(rootMenu.fullPath)
+
+      return true
+    },
+    setActiveMenu(navMode = appGetters.navMode, route = this.$route) {
+      const oldVal = this.activeMenu
+
+      // 只有在混合导航模式下才将当前激活的顶部菜单认为是当前菜单
+      if (navMode === 'mix') {
+        this.activeMenu = appGetters.activeRootMenu
+      }
+      // 否则按照路由配置项设置
+      else this.activeMenu = getRouterActiveMenu(route)
+
+      this.activeMenu !== oldVal && this.resetActiveMenu()
+    },
+
+    // 点击菜单时触发
+    onSelect(index) {
+      // 混合导航模式下点击的必是根节点
+      if (appGetters.navMode === 'mix') {
+        return this.onSelectRootMenu(index)
+      }
+
+      this.actionOnSelectMenu(index)
+    },
+    onSelectRootMenu(index) {
+      const root = getMenuByFullPath(index)
+
+      // vue-router中对应index的路由可能有子级且未设置redirect，此时访问index会404
+      const { leaf, hasOtherLeaf } = findFirstLeaf(root)
+
+      // 如果该根节点已激活且有多个叶子节点，退出
+      if (!leaf || appGetters.activeRootMenu === index && hasOtherLeaf) {
+        return
+      }
+
+      this.actionOnSelectMenu(leaf.fullPath)
+    },
+
+    // 获取el-menu的dom
+    getMenuEl() {
+      return this.$el
+    },
+    // 创建一个用于获取宽度的菜单，若已创建，则更新其菜单
+    genGhostMenu() {
+      if (Reflect.has(this, '$_ghostMenu')) {
+        this.$_ghostMenu.menus = this.menus
+        return
+      }
+
+      const ctor = Vue.extend(GhostMenu)
+      const instance = new ctor({ data: { menus: this.menus } })
+      instance.$watch('menuItemSizes', value => {
+        this.$data.$menuItemSizes = value
+        this.resize()
+      })
+      instance.$mount()
+      this.$_ghostMenu = instance
+    },
+    // 移除辅助菜单
+    destroyGhostMenu() {
+      Reflect.has(this, '$_ghostMenu') && this.$_ghostMenu.$destroy()
+    },
+    // 设置'...'菜单的宽度，只在mounted时调用一次
+    setOverflowedIndicatorWidth() {
+      const ul = document.createElement('ul')
+
+      ul.className = 'el-menu--horizontal el-menu el-menu--horizontal'
+      ul.style.position = 'fixed'
+      ul.style.top = '-100px'
+      ul.style.right = '-1000px'
+      ul.innerHTML = `<li class="el-submenu"><div class="el-submenu__title"><span>...</span></div></li>`
+
+      document.body.appendChild(ul)
+
+      this.$data.$overflowedIndicatorWidth = ul.children[0].offsetWidth + 1
+
+      document.body.removeChild(ul)
+    },
+
+    resize() {
+      const width = this.getMenuEl().getBoundingClientRect().width
+      const { $menuItemSizes, $overflowedIndicatorWidth } = this.$data
+
+      let lastVisibleIndex = -1
+
+      for (let i = $menuItemSizes.length - 1, sum = 0; i >= 0; i--) {
+        sum += $menuItemSizes[i]
+
+        if (sum + $overflowedIndicatorWidth > width) {
+          break
+        }
+
+        lastVisibleIndex += 1
+
+        if (lastVisibleIndex === $menuItemSizes.length - 1) {
+          lastVisibleIndex = undefined
+          break
+        }
+      }
+
+      this.lastVisibleIndex = lastVisibleIndex
+    },
+    startObserver() {
+      this.resizeObserver = new window.ResizeObserver(this.resize)
+      this.resizeObserver.observe(this.getMenuEl())
+    },
+    stopObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
+      this.destroyGhostMenu()
+    }
+  },
+
+  async mounted() {
+    await this.$nextTick()
+    this.setOverflowedIndicatorWidth()
+  },
+
+  beforeDestroy() {
+    this.stopObserver()
+  },
+
+  render() {
+    if (appGetters.loadingMenu) {
+      return (
+        <div style="position: relative;width: 100%;height: 100%">
+          <LoadingSpinner/>
+        </div>
+      )
+    }
+
+    if (this.menus.length === 0) return
+
+    this.genGhostMenu()
+
+    return (
+      <NavMenu
+        ref="nav-menu"
+        menus={this.realMenus}
+        theme={headerGetters.theme}
+        mode="horizontal"
+        default-active={this.defaultActive}
+        show-collapse-icon={headerGetters.showCollapseIcon}
+        menu-icon-slot={headerGetters.menuIconSlot}
+        menu-content-slot={headerGetters.menuContentSlot}
+        on-select={this.onSelect}
+      />
+    )
+  }
+}
+</script>