style: layout

package.json

@@ -29,7 +29,7 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@element-plus/icons": "^0.0.11",
+    "@element-plus/icons-vue": "^0.2.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
@@ -43,7 +43,7 @@
     "cropperjs": "^1.5.11",
     "dayjs": "^1.10.7",
     "echarts": "^5.2.1",
-    "element-plus": "1.2.0-beta.3",
+    "element-plus": "1.2.0-beta.6",
     "element-resize-detector": "^1.2.3",
     "font-awesome": "^4.7.0",
     "js-cookie": "^3.0.1",
@@ -112,7 +112,7 @@
     "stylelint-config-standard": "22.0.0",
     "stylelint-order": "4.1.0",
     "typescript": "4.4.2",
-    "unplugin-element-plus": "^0.1.0",
+    "unplugin-element-plus": "^0.1.3",
     "vite": "2.6.14",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",

src/plugins/element-plus/index.ts

@@ -48,24 +48,8 @@ import {
   ElInfiniteScroll
 } from "element-plus";
 
-// https://element-plus.org/zh-CN/component/icon.html
+// Directives
-import {
+const plugins = [ElLoading, ElInfiniteScroll];
-  Check,
-  Menu,
-  HomeFilled,
-  SetUp,
-  Edit,
-  Setting,
-  Lollipop,
-  Link,
-  Position,
-  Histogram,
-  RefreshRight,
-  ArrowDown,
-  Close,
-  CloseBold,
-  Bell
-} from "@element-plus/icons";
 
 const components = [
   ElTag,
@@ -112,7 +96,27 @@ const components = [
   ElCollapse,
   ElCollapseItem
 ];
-// icon
+
+// https://element-plus.org/zh-CN/component/icon.html
+import {
+  Check,
+  Menu,
+  HomeFilled,
+  SetUp,
+  Edit,
+  Setting,
+  Lollipop,
+  Link,
+  Position,
+  Histogram,
+  RefreshRight,
+  ArrowDown,
+  Close,
+  CloseBold,
+  Bell
+} from "@element-plus/icons-vue";
+
+// Icon
 export const iconComponents = [
   Check,
   Menu,
@@ -131,14 +135,17 @@ export const iconComponents = [
   Bell
 ];
 
-const plugins = [ElLoading, ElInfiniteScroll];
-
 export function useElementPlus(app: App) {
-  components.push(...iconComponents);
+  // 注册组件
   components.forEach((component: Component) => {
     app.component(component.name, component);
   });
+  // 注册指令
   plugins.forEach(plugin => {
     app.use(plugin);
   });
+  // 注册图标
+  iconComponents.forEach((component: Component) => {
+    app.component(component.name, component);
+  });
 }

src/style/sidebar.scss

@@ -124,6 +124,12 @@
       &:hover {
         color: $menuTitleHover !important;
       }
+
+      div,
+      span {
+        height: 50px;
+        line-height: 50px;
+      }
     }
 
     .submenu-title-noDropdown,
@@ -486,7 +492,7 @@
     > .el-sub-menu__title::before {
     position: absolute;
     top: 0;
-    left: 5px;
+    left: 0;
     width: 3px;
     height: 100%;
     background-color: $menuActiveBefore;
@@ -502,7 +508,6 @@
   .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
     position: absolute;
     top: 0;
-    left: 5px;
     width: 3px;
     height: 100%;
     background-color: $menuActiveBefore;
@@ -563,6 +568,9 @@
 body[layout="vertical"] {
   $sideBarWidth: 210px;
   @include merge-style($sideBarWidth);
+  .el-menu--collapse {
+    width: 54px;
+  }
 
   .sidebar-logo-container {
     background: $sidebarLogo;
@@ -603,8 +611,6 @@ body[layout="vertical"] {
 
     /* 菜单折叠 */
     .el-menu--collapse {
-      margin-left: -5px;
-
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
@@ -617,6 +623,15 @@ body[layout="vertical"] {
         }
       }
 
+      /* 无子菜单 */
+      .el-menu-item [class^="el-icon"] {
+        right: 5px;
+      }
+
+      .el-sub-menu__title [class^="el-icon"] {
+        right: 2px;
+      }
+
       .submenu-title-noDropdown {
         background: transparent !important;
       }