feat(*): Continuously optimize code (#441)

re #440

Author: vanoneang

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -29,10 +29,19 @@ module.exports = {
     'no-use-before-define': 'off',
     'no-prototype-builtins': 'off',
     'class-methods-use-this': 'off',
+    'template-curly-spacing': 'off',
     'arrow-parens': ['error', 'as-needed'],
     'comma-dangle': ['error', 'only-multiline'],
     'no-param-reassign': ['error', { props: false }],
     'import/no-extraneous-dependencies': ['error', { devDependencies: ['script/**/*.js'] }],
+    indent: [
+      'warn',
+      2,
+      {
+        ignoredNodes: ['TemplateLiteral'],
+        SwitchCase: 1,
+      },
+    ],
     'object-curly-newline': [
       'error',
       {

package-lock.json

@@ -3,20 +3,10 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
-
 export default {
-  data() {
-    return {
-      timer: null,
-    }
-  },
   mounted() {
     document.getElementById('loader').style.display = 'none'
   },
-  methods: {
-    ...mapActions(['loginOut']),
-  },
 }
 </script>
 

src/app.vue

@@ -1,7 +1,6 @@
 @import './realize/reset';
 @import './realize/animation';
 @import './realize/transition';
-@import './realize/global';
 
 .lin-container {
   .el-divider--horizontal {
@@ -20,4 +19,4 @@
   .lin-wrap {
     padding: 20px;
   }
-}
+}

src/assets/style/index.scss

@@ -1,4 +1,4 @@
-@keyframes fadeIn {
+@keyframes fade {
   from {
     opacity: 0.1;
   }

src/assets/style/realize/animation.scss

@@ -65,7 +65,7 @@ $--font-path: "~element-plus/lib/theme-chalk/fonts";
   color: #fff !important;
   background: #3963bc !important;
   border: 1px solid #3963bc !important;
-  
+
   &:hover,
   &:focus {
     color: #fff !important;
@@ -384,7 +384,7 @@ thead tr {
         width: 4px;
         height: 4px;
         border-radius: 50%;
-        border: 1px solid $submenu-title;
+        border: 1px solid $sub-menu-title;
         position: absolute;
         left: 45px;
         top: 23px;
@@ -460,59 +460,59 @@ thead tr {
 
 .el-submenu.is-active.is-opened {
   .el-submenu__title {
-    color: $submenu-title !important;
-    background: $menuItem-bg !important;
+    color: $sub-menu-title !important;
+    background: $menu-item-bg !important;
     height: 50px;
 
     &:hover {
-      background: $menuItem-hover !important;
+      background: $menu-item-hover !important;
     }
 
     i {
-      color: $submenu-title;
+      color: $sub-menu-title;
     }
   }
 }
 
 .is-opened {
   .el-submenu__title {
-    height: $menuItem-height;
+    height: $menu-item-height;
     transition: border-color 0s, background-color 0s, color 0s;
   }
 
   .el-menu--inline {
-    background: $menuItem-bg !important;
+    background: $menu-item-bg !important;
 
     &:hover {
-      background-color: $menuItem-hover !important;
+      background-color: $menu-item-hover !important;
     }
   }
 
   .el-submenu__title {
-    background: $menuItem-bg !important;
+    background: $menu-item-bg !important;
 
     &:hover {
-      background-color: $menuItem-hover !important;
+      background-color: $menu-item-hover !important;
     }
   }
 
   .el-menu-item {
-    background: $menuItem-bg !important;
+    background: $menu-item-bg !important;
 
     &:hover {
-      background-color: $menuItem-hover !important;
+      background-color: $menu-item-hover !important;
     }
   }
 }
 
 .el-menu-item {
   //display: flex;
   //align-items: center;
-  height: $menuItem-height;
+  height: $menu-item-height;
   transition: border-color 0s, background-color 0s, color 0s;
 
   &:hover {
-    background-color: $menuItem-hover;
+    background-color: $menu-item-hover;
   }
 }
 
@@ -533,14 +533,14 @@ thead tr {
 
 .el-submenu__title {
   // display: flex;
-  height: $menuItem-height;
+  height: $menu-item-height;
   align-items: center;
   line-height: 50px;
   // padding-left: 17px !important;
   box-sizing: border-box;
 
   i {
-    color: $submenu-title;
+    color: $sub-menu-title;
   }
 }
 
@@ -549,7 +549,7 @@ thead tr {
   // margin-left: -2px;
   .el-submenu.is-active {
     .el-submenu__title {
-      height: $menuItem-height;
+      height: $menu-item-height;
       background-color: #1d2a60 !important;
 
       i {
@@ -569,7 +569,7 @@ thead tr {
 
 .router-link-active {
   .el-menu-item.is-active {
-    height: $menuItem-height;
+    height: $menu-item-height;
     color: $theme !important;
   }
 }
@@ -586,7 +586,7 @@ thead tr {
 
 // layout
 .el-container.is-vertical {
-  background: $appmain-background;
+  background: $app-main-background;
 }
 
 .el-aside {
@@ -595,7 +595,7 @@ thead tr {
 
 .el-main {
   padding: 0 20px 20px 20px;
-  background: $appmain-background;
+  background: $app-main-background;
 }
 
 .el-container {
@@ -893,4 +893,4 @@ $typeMap: (primary:#3963BC,
   @include e(title) {
     color: #333333;
   }
-}
+}

src/assets/style/realize/element-variable.scss

@@ -2,51 +2,63 @@
 // 根据不同的屏幕加载背景图片
 @mixin bi($url, $type: 'png') {
   background-image: url($url + "@2x." + $type);
-  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
     background-image: url($url + "@3x." + $type);
     background-size: cover;
   }
 }
 
-//文字超出后以...显示 支持多行
-@mixin fn-ellpisis($line: 1) {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: $line;
+// 文字超出后以...显示
+@mixin no-wrap {
+  text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
-@mixin btn_scale_hover(){
+// 扩展小图标按钮的点击区域
+@mixin extend-click() {
+  position: relative;
+  &:before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+  }
+}
+
+@mixin btn-scale-hover(){
   transition: .4s all;
   &:hover{
     transform: scale(1.1);
   }
 }
 
-@mixin bi-saturate_hover($background-color, $value: 20){ // 背景颜色增加饱和度
+@mixin bi-saturate-hover($background-color, $value: 20){ // 背景颜色增加饱和度
   transition: .6s all;
   &:hover{
     background-color: saturate($background-color, $value);
   }
 }
 
-@mixin color-saturate_hover($color, $value: 30){ // 颜色增加饱和度
+@mixin color-saturate-hover($color, $value: 30){ // 颜色增加饱和度
   transition: .6s all;
   &:hover{
     color: saturate($color, $value);
   }
 }
 
-@mixin bi-lighten_hover($background-color, $value: 10){ // 背景颜色变浅。
+@mixin bi-lighten-hover($background-color, $value: 10){ // 背景颜色变浅。
   transition: .6s all;
   &:hover{
     background-color: lighten($background-color, $value);
   }
 }
 
-@mixin bi-opacity_hover($opacity: .8){ // 透明度
+@mixin bi-opacity-hover($opacity: .8){ // 透明度
   transition: .4s all;
   &:hover{
     opacity: $opacity;
   }
-}
+}

src/assets/style/realize/global.scss

@@ -191,4 +191,4 @@ a:hover {
 $--color-primary: #4c76af;
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-plus/lib/theme-chalk/fonts';
-@import '../../../../node_modules/element-plus/packages/theme-chalk/src/index';
+// @import '../../../../node_modules/element-plus/packages/theme-chalk/src/index';