eoss-ui 0.5.97 → 0.5.99

package/packages/theme-chalk/src/icon.scss

@@ -16,6 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.es-icon-shiyongjiuban:before {
+  content: '\e6c9';
+}
+
+.es-icon-tiyanxinban:before {
+  content: '\e829';
+}
+
 .es-icon-home:before {
   content: '\e6c5';
 }

package/packages/theme-chalk/src/main.scss

@@ -322,6 +322,22 @@
         background-color: $--color-primary-light-10;
       }
     }
+    &.es-setting-app-nav {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 8px;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: $--color-primary-light-8;
+      }
+      &::after {
+        top: 0;
+      }
+    }
     &.es-setting-subsystem-nav {
       &::before {
         content: '';

package/packages/theme-chalk/src/simplicity.scss

@@ -153,6 +153,15 @@
     .el-drawer__body {
       background-color: #f4f4f4;
       padding: 20px;
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        padding: 14px;
+      }
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        padding: 10px;
+      }
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        padding: 6px;
+      }
     }
   }
   .es-simplicity-public-drawer {
@@ -211,6 +220,15 @@
         width: 20%;
         height: 25%;
         padding: 12px;
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          padding: 8px;
+        }
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          padding: 4px;
+        }
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          padding: 2px;
+        }
       }
     }
     .es-simplicity_apps-list-content {
@@ -222,11 +240,57 @@
     .es-simplicity_apps-icon {
       margin-bottom: 16px;
       color: $--color-primary;
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        margin-bottom: 12px;
+      }
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        margin-bottom: 8px;
+      }
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        margin-bottom: 4px;
+      }
     }
     .es-simplicity_apps-search {
       width: 200px;
       .el-input__inner {
         border-radius: 16px;
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
+        }
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+        }
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          height: 20px;
+          line-height: 20px;
+          font-size: 12px;
+        }
+        &::placeholder {
+          @media screen and (max-width: 1600px) and (max-height: 900px) {
+            font-size: 14px;
+          }
+          @media screen and (max-width: 1280px) and (max-height: 720px) {
+            font-size: 12px;
+          }
+        }
+      }
+      .el-input__icon {
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          line-height: 28px;
+          font-size: 14px;
+        }
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          line-height: 24px;
+          font-size: 12px;
+        }
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          line-height: 20px;
+          font-size: 12px;
+        }
       }
     }
   }
@@ -239,6 +303,21 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      font-size: 17px;
+      line-height: 26px;
+      padding: 6px 10px 10px;
+    }
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      font-size: 14px;
+      line-height: 20px;
+      padding: 4px 8px 8px;
+    }
+    @media screen and (max-width: 1024px) and (max-height: 768px) {
+      font-size: 12px;
+      line-height: 16px;
+      padding: 4px 6px 6px;
+    }
   }
   .es-simplicity_apps-box {
     position: relative;
@@ -271,12 +350,38 @@
     width: 34px;
     height: 34px;
     line-height: 34px;
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      font-size: 30px;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+    }
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      font-size: 26px;
+      width: 26px;
+      height: 26px;
+      line-height: 26px;
+    }
+    @media screen and (max-width: 1024px) and (max-height: 768px) {
+      font-size: 22px;
+      width: 22px;
+      height: 22px;
+      line-height: 22px;
+    }
   }
   .es-simplicity_apps-text {
     font-weight: 400;
     font-size: 16px;
     text-align: center;
     line-height: 19px;
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      font-size: 14px;
+      line-height: 17px;
+    }
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      font-size: 12px;
+      line-height: 15px;
+    }
   }
   .es-simplicity_apps-hover {
     opacity: 0;
@@ -297,17 +402,78 @@
   .es-simplicity_apps-pagination {
     text-align: right;
     padding: 18px 20px;
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      padding: 14px 16px;
+    }
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      padding: 10px 12px;
+    }
+    @media screen and (max-width: 1024px) and (max-height: 768px) {
+      padding: 7px 8px;
+    }
     .el-pagination__total {
       float: left;
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        height: 24px;
+        line-height: 24px;
+      }
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+      }
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        font-size: 12px;
+        height: 16px;
+        line-height: 16px;
+      }
+    }
+
+    & > button {
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        height: 24px;
+        line-height: 24px;
+      }
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+      }
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        font-size: 12px;
+        height: 16px;
+        line-height: 16px;
+      }
     }
     .el-pager li {
       background-color: #fff;
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        min-width: 26px;
+        height: 24px;
+        line-height: 24px;
+      }
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        min-width: 22px;
+        height: 20px;
+        line-height: 20px;
+      }
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        min-width: 18px;
+        height: 16px;
+        line-height: 16px;
+      }
     }
   }
   .es-simplicity_apps-other {
     width: 34%;
     padding-left: 20px;
     border-left: 1px solid #cdd9e4;
+    @media screen and (max-width: 1600px) and (max-height: 900px) {
+      padding-left: 14px;
+    }
+    @media screen and (max-width: 1280px) and (max-height: 720px) {
+      padding-left: 8px;
+    }
     .es-simplicity_apps-list {
       display: flex;
       align-content: flex-start;
@@ -315,6 +481,15 @@
       .es-simplicity_apps-list-item {
         width: 50%;
         padding: 12px;
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          padding: 8px;
+        }
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          padding: 4px;
+        }
+        @media screen and (max-width: 1024px) and (max-height: 768px) {
+          padding: 2px;
+        }
       }
       .es-simplicity_app-icon {
         display: block;
@@ -328,12 +503,34 @@
       .es-simplicity_apps-text {
         margin-left: 12px;
         text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        line-clamp: 3;
+        -webkit-line-clamp: 3;
+        word-wrap: break-word;
+        @media screen and (max-width: 1600px) and (max-height: 900px) {
+          margin-left: 8px;
+        }
+        @media screen and (max-width: 1280px) and (max-height: 720px) {
+          margin-left: 4px;
+        }
       }
     }
     .es-simplicity_apps-list-content {
       display: flex;
       align-items: center;
       padding: 16px;
+      @media screen and (max-width: 1600px) and (max-height: 900px) {
+        padding: 12px;
+      }
+      @media screen and (max-width: 1280px) and (max-height: 720px) {
+        padding: 8px;
+      }
+      @media screen and (max-width: 1024px) and (max-height: 768px) {
+        padding: 4px;
+      }
       .es-simplicity_apps-texts {
         min-height: 36px;
         display: flex;

package/src/index.js

@@ -121,7 +121,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.5.97',
+  version: '0.5.99',
   install,
   Button,
   ButtonGroup,

package/src/utils/util.js

@@ -2230,6 +2230,7 @@ const isLogined = function ({
       Object.prototype.hasOwnProperty.call(to.query, 'serverId') &&
       Object.prototype.hasOwnProperty.call(to.query, 'authType')
     ) {
+      let loadingInstance = Loading.service({text: '页面加载中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.65)'});
       ajax({
         method: 'post',
         url: authCenter,
@@ -2345,8 +2346,11 @@ const isLogined = function ({
               }
             });
           }
+          loadingInstance.close();
         })
-        .catch((e) => {});
+        .catch((e) => {
+          loadingInstance.close();
+});
     } else if (
       token ||
       to.path === '/' ||
@@ -2768,7 +2772,7 @@ const setScale = function (width = 1920, height = 1080) {
   } else {
     n = 1;
   }
-  if (zoom === 1) {
+  if (zoom === 1 && window.innerWidth === width) {
     document.body.style.removeProperty('transform');
     document.body.style.removeProperty('width');
     document.body.style.removeProperty('height');

package/packages/main/src/simplicity/settings.vue

@@ -1,119 +0,0 @@
-<template>
-  <el-drawer
-    title="设置"
-    custom-class="es-sets-drawer"
-    size="280px"
-    :visible.sync="show"
-    :append-to-body="true"
-  >
-    <div class="es-setting-item">
-      <div class="es-setting-title">主题色</div>
-      <el-radio-group
-        v-if="themes"
-        v-model="color"
-        size="mini"
-        class="es-setting-theme"
-        @change="handleTheme"
-      >
-        <el-radio-button
-          v-for="(item, index) in themes"
-          :key="index"
-          :label="index"
-          :style="{ backgroundColor: item }"
-        >
-          <i class="el-icon-check"></i>
-        </el-radio-button>
-      </el-radio-group>
-      <div class="es-color-picker" v-else>
-        <el-color-picker
-          v-model="color"
-          :predefine="predefineColor"
-          @change="handleTheme"
-        ></el-color-picker>
-        <div class="el-color-picker-tip">请不要选择偏白或者偏黑的颜色</div>
-      </div>
-    </div>
-  </el-drawer>
-</template>
-<script>
-import util from 'eoss-ui/src/utils/util';
-export default {
-  name: 'Message',
-  props: {
-    visible: Boolean,
-    //主题颜色选择颜色集合
-    themes: Array,
-    //默认主题色
-    theme: String,
-    //颜色板预设颜色
-    predefine: {
-      type: Array,
-      default() {
-        return ['#a60006', '#409eff'];
-      }
-    },
-    layout: {
-      type: String,
-      default: 'default'
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.visible;
-      },
-      set(val) {
-        this.$emit('update:visible', val);
-      }
-    },
-    //颜色板预设颜色
-    predefineColor() {
-      if (
-        this.theme &&
-        this.predefine.indexOf(this.theme.toLowerCase()) === -1
-      ) {
-        let arry = this.predefine;
-        arry.push(this.theme);
-        return arry;
-      }
-      return this.predefine;
-    }
-  },
-  watch: {
-    theme: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.color = val;
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      color: '',
-      activeName: this.layout
-    };
-  },
-  mounted() {},
-  methods: {
-    //选择主题颜色
-    handleTheme(res) {
-      res = res.toLowerCase();
-      // const rgb = util.getRgb(res);
-      // const luma = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
-      util.updateTheme(res);
-      this.color = res;
-      this.$emit('change', { type: 'theme', value: res });
-      //this.setTheme(res);
-    },
-    //选择菜单布局
-    handleLayout(res) {
-      let old = this.activeName;
-      this.activeName = res;
-      this.$emit('update:layout', res);
-      this.$emit('layout', res, old);
-    }
-  }
-};
-</script>