qdt-admin-layout 1.0.0 → 1.0.1

package/README.md

@@ -1,22 +1,21 @@
-# el-admin-layout
-
-这是一个基于`element-ui`的后台管理layout组件，需要配合`vue2`、`vue-router3`使用。
+# qdt-admin-layout
 
+签到通定制版
 
 ## 功能特性
 
-- flex布局、有限的移动端适配
+- flex 布局、有限的移动端适配
 - 仿`ant-design-pro`的三种导航
 - 多页签
 - 侧边栏和顶栏的深色\亮色主题
 - 侧边栏可搜索
 - 路由和菜单分离
 - 支持各种页面缓存（不支持嵌套路由）
-- 支持iframe、外链
+- 支持 iframe、外链
 - 数据外部可控，满足大部分定制化需求
 
 ## 安装
 
 ```
-npm i el-admin-layout -S
+npm i qdt-admin-layout -S
 ```

package/package.json

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

package/src/component/ElMenu/sub.vue

@@ -88,16 +88,18 @@ export default {
               on-mouseleave={() => this.handleMouseleave(true)}
               on-focus={(e) => this.handleMouseenter(e, 100)}
             >
-              {this.$slots.default.map((item) => {
-                return (
-                  <ul
-                    style="display:inline-block;width:200px"
-                    class={this.popupMenuClass}
-                  >
-                    {item}
-                  </ul>
-                );
-              })}
+              <div class="menu-display">
+                {this.$slots.default.map((item) => {
+                  return (
+                    <ul
+                      style="display:inline-block;width:200px;vertical-align: top;margin:0;box-shadow: 0 0 black;border-radius:0px"
+                      class={this.popupMenuClass}
+                    >
+                      {item}
+                    </ul>
+                  );
+                })}
+              </div>
             </div>
           </transition>
         ) : (

package/src/component/Layout/index.vue

@@ -21,7 +21,7 @@ export default {
 
   computed: {
     isLeftRight() {
-      return appGetters.struct === 'left-right'
+      return appGetters.struct === 'top-bottom'
     },
     renderAside() {
       return appGetters.isMobile || ['aside', 'mix'].includes(appGetters.navMode)

package/src/component/NavMenu/index.vue

@@ -94,7 +94,7 @@ export default {
       if (slot) return slot(h, { menu, depth });
 
       const icon = menu.meta.icon;
-      return icon && <i style="margin-top:-18px" class={`menu-icon ${icon}`} />;
+      return icon && <i class={`menu-icon ${icon}`} />;
     },
     // 渲染菜单内容
     renderMenuContent(h, menu, depth) {
@@ -132,13 +132,12 @@ export default {
           >
             <template slot="title">
               {depth == 1 && (
-                <div>
+                <div style="padding: 10% 0;">
                   {this.renderMenuIcon(h, menu, depth)}
-                  <div style="margin-top:-24px;font-size:14px;margin-left:-2px">
-                    {menu.meta.title}
-                  </div>
+                  <div>{menu.meta.title}</div>
                 </div>
               )}
+
               {!noContent && this.renderMenuContent(h, menu, depth)}
             </template>
             {children}
@@ -156,7 +155,10 @@ export default {
         });
         data.push(
           <div>
-            <div class="popover-menu__title">
+            <div
+              style="font-weight:800;color:black"
+              class="popover-menu__title"
+            >
               {this.renderMenuContent(h, x, depth)}
             </div>
             <div class="el-menu el-menu--inline">{childrens}</div>

package/src/component/NavMenu/style.scss

@@ -1,16 +1,25 @@
+.menu-display {
+  margin-left: 5px;
+  border-radius: 2px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  ul {
+    border-left: 1px solid rgb(228, 231, 237);
+  }
+  ul:first-child {
+    border: none;
+  }
+}
+.el-menu--collapse .el-submenu {
+  height: 88px !important;
+}
+
 .el-menu {
   width: 100%;
-  border: none !important;
 
   // 菜单图标
   .menu-icon {
     color: inherit;
     font-size: 38px;
-
-    // 与菜单内容的间隔
-    & + * {
-      margin-left: $menu-icon-text-gap;
-    }
   }
 
   // 子级菜单激活时，父级同样高亮
@@ -100,7 +109,7 @@
   // 折叠时
   &.el-menu--collapse {
     .el-submenu__title {
-      padding-right: $menu-padding;
+      padding: 5% 0 !important;
     }
 
     // 使用过渡动画会用span标签包裹，导致原始使用'>'选择器失效

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

@@ -26,7 +26,7 @@
     // 子级菜单的背景颜色和内阴影
     .el-menu--inline {
       background-color: $sub-menu-background-dark;
-      box-shadow: inset 0 2px 8px darken($sub-menu-background-dark, 10%)
+      // box-shadow: inset 0 2px 8px darken($sub-menu-background-dark, 10%)
     }
   }
 

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

@@ -1,9 +1,8 @@
 .collapse {
   .el-submenu__title {
+    text-align: center;
     height: 100%;
-    padding-top: 15px;
-    padding-left: 25px;
-    padding-right: 23px;
+    line-height: normal !important;
   }
 }
 
@@ -13,7 +12,7 @@
     // 菜单的文字以及hover颜色
     .el-menu-item,
     .el-submenu__title {
-      color: $menu-text-color-light;
+      color: rgb(109, 110, 110);
       &:hover {
         color: #f56d45;
       }
@@ -21,7 +20,7 @@
 
     // 设置了显示弹出菜单的父级
     .el-menu--popup .popover-menu__title {
-      color: $menu-text-color-light;
+      color: rgb(109, 110, 110);
       border-bottom-color: $--border-color-light;
     }
 
@@ -71,7 +70,7 @@
     // 菜单的文字以及hover颜色
     .el-menu-item,
     .el-submenu__title {
-      color: $menu-text-color-light;
+      color: rgb(109, 110, 110);
 
       &:hover {
         color: $menu-text-hover-color-light;

package/src/store/app.js

@@ -31,10 +31,10 @@ const state = {
   loadingMenu: false,
 
   // 分层结构，上下（'top-bottom'）、左右（'left-right'）
-  struct: 'left-right',
+  struct: 'top-bottom',
 
   // 导航模式，'aside'、'head'、'mix'
-  navMode: 'mix',
+  navMode: 'aside',
 
   // 自定义渲染logo，(h, {img, title, props}) => VNode | VNode[]
   logoSlot: undefined