qdt-admin-layout 1.1.4 → 1.1.6

package/README.md

@@ -18,4 +18,7 @@
 
 ```
 npm i qdt-admin-layout -S
+
+npm用户名：hexiaojun
+密码:hxj1433808390
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdt-admin-layout",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "基于element-ui的后台管理layout的管家婆改版",
   "main": "src/index.js",
   "module": "dist/esm/index.js",

package/src/component/Aside/DefaultSidebar/index.vue

@@ -3,16 +3,16 @@
  * 默认的侧边栏实现，支持以抽屉形式渲染
  */
 
-import menuMixin from '../../../mixin/menu'
-import { appGetters, asideGetters, asideMutations } from '../../../store'
-import Logo from '../../../component/Logo'
-import NavMenu from '../../../component/NavMenu'
-import Hamburger from '../../../component/Hamburger'
-import LoadingSpinner from '../../../component/LoadingSpinner'
-import { getRouterActiveMenu, isRedirectRouter } from '../../../config/logic'
+import menuMixin from "../../../mixin/menu";
+import { appGetters, asideGetters, asideMutations } from "../../../store";
+import Logo from "../../../component/Logo";
+import NavMenu from "../../../component/NavMenu";
+import Hamburger from "../../../component/Hamburger";
+import LoadingSpinner from "../../../component/LoadingSpinner";
+import { getRouterActiveMenu, isRedirectRouter } from "../../../config/logic";
 
 export default {
-  name: 'DefaultSidebar',
+  name: "DefaultSidebar",
 
   mixins: [menuMixin],
 
@@ -21,85 +21,92 @@ export default {
       // 开启了自动隐藏时，判断鼠标是否在侧边栏外
       mouseOutside: true,
       // 开启了自动隐藏时，用于判断鼠标是否在弹出菜单内
-      openedMenuNum: 0
-    }
+      openedMenuNum: 0,
+    };
   },
 
   computed: {
     // 侧边栏菜单
     sidebarMenus() {
-      const menus = appGetters.menus
-      let finalData
+      const menus = appGetters.menus;
+      let finalData;
 
       // 移动端时，侧边栏只会按侧边栏导航模式渲染
-      if (appGetters.isMobile) finalData = menus
+      if (appGetters.isMobile) finalData = menus;
       else {
         // 只有导航模式为aside或mix时才会渲染侧边栏
         switch (appGetters.navMode) {
-          case 'aside':
-            finalData = menus
-            break
-          case 'mix':
-            const root = menus.find(i => i.fullPath === appGetters.activeRootMenu)
-            finalData = root ? root.children || [] : []
-            break
+          case "aside":
+            finalData = menus;
+            break;
+          case "mix":
+            const root = menus.find(
+              (i) => i.fullPath === appGetters.activeRootMenu
+            );
+            finalData = root ? root.children || [] : [];
+            break;
           default:
-            finalData = []
+            finalData = [];
         }
       }
 
-      const f = asideGetters.postMenus
-      return f ? f(this.copyMenus(finalData)) : finalData
+      const f = asideGetters.postMenus;
+      return f ? f(this.copyMenus(finalData)) : finalData;
     },
 
     // 当是移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹
     renderInDrawer() {
-      return appGetters.isMobile || asideGetters.autoHide
+      return appGetters.isMobile || asideGetters.autoHide;
     },
     // el-drawer的自定义类名
     drawerClass() {
-      const behindHeader = !appGetters.isMobile && appGetters.struct === 'top-bottom'
-      return `sidebar-drawer${behindHeader ? ' behind-header' : ''}`
+      const behindHeader =
+        !appGetters.isMobile && appGetters.struct === "top-bottom";
+      return `sidebar-drawer${behindHeader ? " behind-header" : ""}`;
     },
 
     // 侧边栏的显隐状态，true显示、false隐藏
     show() {
       // store中要显示那就显示
-      if (asideGetters.show) return true
+      if (asideGetters.show) return true;
 
       // 移动端，false
-      if (appGetters.isMobile) return false
+      if (appGetters.isMobile) return false;
 
       // 未设置侧边栏自动隐藏，false
-      if (!asideGetters.autoHide) return false
+      if (!asideGetters.autoHide) return false;
 
       // 鼠标在侧边栏内，true
-      if (!this.mouseOutside) return true
+      if (!this.mouseOutside) return true;
 
       // 侧边栏处于折叠状态 且 存在弹出的子菜单，true
-      return this.collapse && this.openedMenuNum > 0
+      return this.collapse && this.openedMenuNum > 0;
     },
 
     // 侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
     collapse() {
-      return asideGetters.collapse && !appGetters.isMobile
+      return asideGetters.collapse && !appGetters.isMobile;
     },
 
     // 是否需要显示logo
     showLogo() {
-      return appGetters.showLogo && (appGetters.isMobile || appGetters.struct === 'left-right')
+      // return (
+      //   appGetters.showLogo &&
+      //   (appGetters.isMobile || appGetters.struct === "left-right")
+      // );
+      return true;
     },
 
     sidebarClass() {
-      return { 'sidebar': true, 'collapse': this.collapse }
+      return { sidebar: true, collapse: this.collapse };
     },
 
     // 只有设置了自动隐藏时才需要绑定鼠标的移入移出事件
     sidebarEvent() {
       return !appGetters.isMobile && asideGetters.autoHide
         ? { mouseleave: this.onMouseLeave, mouseenter: this.onMouseEnter }
-        : undefined
-    }
+        : undefined;
+    },
   },
 
   watch: {
@@ -107,209 +114,207 @@ export default {
     $route: {
       immediate: true,
       handler(to) {
-        if (isRedirectRouter(to)) return
+        if (isRedirectRouter(to)) return;
 
-        this.activeMenu = getRouterActiveMenu(this.$route)
+        this.activeMenu = getRouterActiveMenu(this.$route);
 
-        const elMenu = this.$_getElMenuInstance()
-        if (!elMenu) return
+        const elMenu = this.$_getElMenuInstance();
+        if (!elMenu) return;
 
-        this.resetActiveMenu()
+        this.resetActiveMenu();
 
-        const item = elMenu.items[this.activeMenu]
-        if (!item) return
+        const item = elMenu.items[this.activeMenu];
+        if (!item) return;
 
         // 由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
-        this.onSelect(item.index, item.indexPath, item, false)
+        this.onSelect(item.index, item.indexPath, item, false);
 
         // 滚动至激活的菜单
-        this.$nextTick(this.moveToActiveMenuVertically)
-      }
-    }
+        this.$nextTick(this.moveToActiveMenuVertically);
+      },
+    },
   },
 
   methods: {
     // 返回传入的菜单数据的拷贝副本
     copyMenus(menus) {
-      return menus.map(menu => {
-        const result = { ...menu }
+      return menus.map((menu) => {
+        const result = { ...menu };
         if (result.children) {
-          result.children = this.copyMenus(result.children)
+          result.children = this.copyMenus(result.children);
         }
-        return result
-      })
+        return result;
+      });
     },
 
     // 模拟选中菜单
     onSelect(index, indexPath, item, jump = true) {
       // 非折叠且开启手风琴模式时，收起其它展开项
       if (!asideGetters.collapse && asideGetters.uniqueOpen) {
-        const elMenu = this.$_getElMenuInstance()
-        elMenu.openedMenus = indexPath.slice(0, -1)
+        const elMenu = this.$_getElMenuInstance();
+        elMenu.openedMenus = indexPath.slice(0, -1);
       }
 
-      jump && this.actionOnSelectMenu(index)
+      jump && this.actionOnSelectMenu(index);
 
       // 抽屉模式下需要关闭抽屉
       if (this.renderInDrawer && this.show) {
-        asideMutations.close()
-        this.mouseOutside = true
+        asideMutations.close();
+        this.mouseOutside = true;
       }
     },
 
     // 将当前激活的菜单移动到视窗中
     moveToActiveMenuVertically() {
-      const elMenu = this.$_getElMenuInstance()
-      if (!elMenu) return
+      const elMenu = this.$_getElMenuInstance();
+      if (!elMenu) return;
 
-      const cur = elMenu.activeIndex
-      if (!cur) return
+      const cur = elMenu.activeIndex;
+      if (!cur) return;
 
-      const curInstance = elMenu.items[cur]
-      if (!curInstance) return
+      const curInstance = elMenu.items[cur];
+      if (!curInstance) return;
 
-      let el = curInstance.$el
+      let el = curInstance.$el;
 
       // 当侧边栏折叠时，需要滚动至可视区域的元素是激活菜单的最顶层父节点
       if (elMenu.collapse) {
-        let rootParent = curInstance
-        while (rootParent.$parent.$options.componentName !== 'ElMenu') {
-          rootParent = rootParent.$parent
+        let rootParent = curInstance;
+        while (rootParent.$parent.$options.componentName !== "ElMenu") {
+          rootParent = rootParent.$parent;
         }
-        el = rootParent.$el
+        el = rootParent.$el;
       }
 
       /*
-      * 这里考虑了菜单展开时的200ms动画时间
-      * 为什么不分情况讨论？比如当subMenu已经是展开状态时，无需延时滚动
-      * 但这种情况无法判断，因为这时menu.openedMenus已经包含了subMenu，无论subMenu之前是否展开
-      * 所以统一延时300ms
-      * */
-      window.setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 300)
+       * 这里考虑了菜单展开时的200ms动画时间
+       * 为什么不分情况讨论？比如当subMenu已经是展开状态时，无需延时滚动
+       * 但这种情况无法判断，因为这时menu.openedMenus已经包含了subMenu，无论subMenu之前是否展开
+       * 所以统一延时300ms
+       * */
+      window.setTimeout(
+        () => el.scrollIntoView({ behavior: "smooth", block: "nearest" }),
+        300
+      );
     },
 
     // 开启侧边栏自动隐藏后的鼠标移动事件
     onMouseMove(e) {
       // 鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部
-      if (e.clientX <= 1) this.mouseOutside = false
+      if (e.clientX <= 1) this.mouseOutside = false;
     },
     onMouseLeave() {
-      this.mouseOutside = true
+      this.mouseOutside = true;
     },
     onMouseEnter() {
-      this.mouseOutside = false
+      this.mouseOutside = false;
     },
 
     // 渲染el-menu时监听其展开菜单
     watchOpenedMenus() {
       // 尝试取消之前设置的监听
       if (this.watchOpenedMenusCallback) {
-        this.watchOpenedMenusCallback()
-        this.watchOpenedMenusCallback = null
+        this.watchOpenedMenusCallback();
+        this.watchOpenedMenusCallback = null;
       }
 
-      const elMenu = this.$_getElMenuInstance()
-      if (!elMenu) return
+      const elMenu = this.$_getElMenuInstance();
+      if (!elMenu) return;
 
-      this.watchOpenedMenusCallback = elMenu.$watch('openedMenus', v => {
-        this.openedMenuNum = v.length
-      })
+      this.watchOpenedMenusCallback = elMenu.$watch("openedMenus", (v) => {
+        this.openedMenuNum = v.length;
+      });
     },
 
     // 抽屉打开的过渡动画结束时，滚动至高亮菜单
     onDrawerOpened() {
-      this.$nextTick(this.moveToActiveMenuVertically)
+      this.$nextTick(this.moveToActiveMenuVertically);
     },
 
     renderHeader(h) {
-      const defaultContent = this.showLogo && <Logo show-title={!this.collapse}/>
-      const { headerSlot } = asideGetters
+      const defaultContent = this.showLogo && (
+        <Logo show-title={!this.collapse} />
+      );
+      const { headerSlot } = asideGetters;
 
-      return headerSlot ? headerSlot(h, defaultContent) : defaultContent
+      return headerSlot ? headerSlot(h, defaultContent) : defaultContent;
     },
     renderFooter(h) {
-      const defaultContent = asideGetters.showHamburger && !this.renderInDrawer && <Hamburger/>
-      const { footerSlot } = asideGetters
+      const defaultContent = asideGetters.showHamburger &&
+        !this.renderInDrawer && <Hamburger />;
+      const { footerSlot } = asideGetters;
 
-      let children
+      let children;
 
       if (footerSlot) {
-        let renderResult = footerSlot(h, defaultContent)
+        let renderResult = footerSlot(h, defaultContent);
         if (Array.isArray(renderResult)) {
-          renderResult = renderResult.filter(Boolean)
+          renderResult = renderResult.filter(Boolean);
           if (renderResult.length > 0) {
-            children = renderResult
+            children = renderResult;
           }
-        }
-        else children = renderResult
-      }
-      else children = defaultContent
+        } else children = renderResult;
+      } else children = defaultContent;
 
-      return children && (
-        <div class="sidebar-footer">
-          {children}
-        </div>
-      )
-    }
+      return children && <div class="sidebar-footer">{children}</div>;
+    },
   },
 
   created() {
     // 侧边栏菜单变化时设置当前的高亮菜单
     // 在此前，activeMenu会在watch:$route中发生第一次变化（不会真有人把menu.meta.activeMenu设成''吧？）
-    this.$watch('sidebarMenus', this.setDefaultActiveMenu, { immediate: true })
+    this.$watch("sidebarMenus", this.setDefaultActiveMenu, { immediate: true });
 
     // 添加或移除鼠标移动事件
     this.$watch(
       () => {
         // 如果是移动端，false
-        if (appGetters.isMobile) return false
+        if (appGetters.isMobile) return false;
 
         // 如果未启用侧边栏自动隐藏，false
-        if (!asideGetters.autoHide) return false
+        if (!asideGetters.autoHide) return false;
 
         // 侧边栏为打开状态，false
-        if (this.show) return false
+        if (this.show) return false;
 
         // 鼠标在侧边栏外部，true
-        return this.mouseOutside
+        return this.mouseOutside;
       },
-      v => {
+      (v) => {
         // 尝试移除之前可能添加的事件
-        window.removeEventListener('mousemove', this.onMouseMove)
+        window.removeEventListener("mousemove", this.onMouseMove);
 
-        v && window.addEventListener('mousemove', this.onMouseMove)
+        v && window.addEventListener("mousemove", this.onMouseMove);
       },
       { immediate: true }
-    )
+    );
 
     // 切换至移动端 或 切换至桌面端且设置了自动隐藏时，收起侧边栏
     this.$watch(
       () => appGetters.isMobile,
-      v => (v || asideGetters.autoHide) && asideMutations.close()
-    )
+      (v) => (v || asideGetters.autoHide) && asideMutations.close()
+    );
   },
 
   beforeDestroy() {
-    window.removeEventListener('mousemove', this.onMouseMove)
+    window.removeEventListener("mousemove", this.onMouseMove);
   },
 
   render(h) {
     // 没有菜单时，仅当设置了alwaysRender才退出后续渲染
     if (this.sidebarMenus.length === 0 && !asideGetters.alwaysRender) {
-      return
+      return;
     }
-
     const sidebar = (
       <div {...{ class: this.sidebarClass, on: this.sidebarEvent }}>
         {this.renderHeader(h)}
 
-        {appGetters.loadingMenu
-          ? (
-            <div style="position: relative;flex: 1">
-              <LoadingSpinner/>
-            </div>
-          )
-          : <NavMenu
+        {appGetters.loadingMenu ? (
+          <div style="position: relative;flex: 1">
+            <LoadingSpinner />
+          </div>
+        ) : (
+          <NavMenu
             ref="nav-menu"
             menus={this.sidebarMenus}
             collapse={this.collapse}
@@ -324,16 +329,19 @@ export default {
             menu-content-slot={asideGetters.menuContentSlot}
             {...{
               // 只能在nav-menu的mounted里，自身mounted时nav-menu可能还未渲染
-              on: { select: this.onSelect, 'hook:mounted': this.watchOpenedMenus }
+              on: {
+                select: this.onSelect,
+                "hook:mounted": this.watchOpenedMenus,
+              },
             }}
           />
-        }
+        )}
 
         {this.renderFooter(h)}
       </div>
-    )
+    );
 
-    if (!this.renderInDrawer) return sidebar
+    if (!this.renderInDrawer) return sidebar;
 
     return (
       <el-drawer
@@ -348,7 +356,7 @@ export default {
       >
         {sidebar}
       </el-drawer>
-    )
-  }
-}
+    );
+  },
+};
 </script>

package/src/component/Aside/DefaultSidebar/style.scss

@@ -4,17 +4,15 @@
   height: 100%;
   width: $aside-width;
   transition: width 0.2s;
-
   > .el-menu {
     flex: 1;
   }
 
   &.collapse {
-    width: 90px;
-
-    .logo-container {
-      padding-left: ($aside-collapse-width - $logo-size) / 2;
-    }
+    width: 160px;
+    // .logo-container {
+    //   padding-left: ($aside-collapse-width - $logo-size) / 2;
+    // }
   }
 }
 

package/src/component/Aside/index.vue

@@ -4,27 +4,30 @@
  * 拆成Aside和DefaultSidebar是为了能让用户自定义侧边栏内容
  */
 
-import { appGetters, asideGetters } from '../../store'
-import DefaultSidebar from './DefaultSidebar'
+import { appGetters, asideGetters } from "../../store";
+import DefaultSidebar from "./DefaultSidebar";
 
 export default {
-  name: 'Aside',
+  name: "Aside",
 
   computed: {
     // 移动端下不能设置z-index，否则会被el-drawer的遮罩遮住
     style() {
-      return appGetters.isMobile ? 'z-index: auto !important' : undefined
-    }
+      return appGetters.isMobile ? "z-index: auto !important" : undefined;
+    },
   },
 
   render(h) {
-    const { defaultSlot } = asideGetters
-
+    const { defaultSlot } = asideGetters;
     return (
-      <aside class={`aside ${asideGetters.theme}`} style={this.style}>
-        {defaultSlot ? defaultSlot(h) : <DefaultSidebar ref="default-sidebar"/>}
+      <aside class="aside dark" style={this.style}>
+        {defaultSlot ? (
+          defaultSlot(h)
+        ) : (
+          <DefaultSidebar ref="default-sidebar" />
+        )}
       </aside>
-    )
-  }
-}
+    );
+  },
+};
 </script>

package/src/component/Aside/style.scss

@@ -1,7 +1,7 @@
-@import './DefaultSidebar/style';
+@import "./DefaultSidebar/style";
 
 .aside {
-  z-index: $header-z-index - 1;
+  z-index: $header-z-index + 1;
 
   // 侧边栏底部区域
   .sidebar-footer {
@@ -19,5 +19,5 @@
   }
 }
 
-@import './theme-light';
-@import './theme-dark';
+@import "./theme-light";
+@import "./theme-dark";

package/src/component/ContextMenu/style.scss

@@ -8,7 +8,7 @@
   max-height: 50vh;
   color: rgb(96, 98, 102);
   background-color: rgb(255, 255, 255);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.4);
   overflow-y: auto;
   overflow-x: hidden;
 

package/src/component/Header/index.vue

@@ -25,7 +25,8 @@ export default {
         !appGetters.isMobile &&
         appGetters.showLogo &&
         (appGetters.navMode === "head" || appGetters.struct === "top-bottom");
-      return renderLogo && <Logo />;
+      // return renderLogo && <Logo />;
+      return null;
     },
     // 左侧汉堡包
     defaultHamburger() {
@@ -72,12 +73,14 @@ export default {
             />
           </span>
           {!isEmpty(username) && (
-            <span on-click={userinfo} class="username hide-on-mobile">{username}</span>
+            <span on-click={userinfo} class="username hide-on-mobile">
+              {username}
+            </span>
           )}
 
           <span class="username shu">|</span>
           <i
-            style="color:#fff"
+            style="color:#333"
             class="el-icon-bell header-icon"
             on-click={message}
           />

package/src/component/Header/style.scss

@@ -56,7 +56,7 @@
 
     .username {
       font-size: 14px;
-      color: #fff;
+      color: #333;
       padding: 0 7px;
     }
     .shu {

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

@@ -1,8 +1,8 @@
 .header.light {
-  background: linear-gradient(90deg, #f58852, #f56c45);
+  background: #ffffff;
 
   .logo-container {
-    color: #fff;
+    color: #333;
   }
 
   .header-item {