fix: cannot retry after the DeviceGroupTree component fails to get data

src/components/form/EditInput/index.vue

@@ -11,7 +11,7 @@
       class="o-editor u-ellipsis"
       :class="align"
     >
-      {{ value }}
+      {{ value || placeholder }}
     </div>
     <input
       v-else
@@ -19,6 +19,7 @@
       :value="value"
       class="o-editor input u-ellipsis"
       :class="align"
+      :placeholder="placeholder"
       :maxlength="maxlength"
       @focus="onFocus"
       @blur="onBlur"
@@ -47,6 +48,10 @@ export default {
     maxlength: {
       type: [String, Number],
       default: 30
+    },
+    placeholder: {
+      type: String,
+      default: ''
     }
   },
   data () {

src/components/layout/PlatformPage/index.vue

@@ -3,6 +3,7 @@
     <template v-if="tenants">
       <div class="c-sibling-item c-sidebar u-width--md u-overflow-y--auto">
         <el-tree
+          class="ellipsis"
           :data="tenants"
           node-key="path"
           :current-node-key="tenant.path"

src/components/layout/TenantPage/index.vue

@@ -14,6 +14,7 @@
       >
         <el-tree
           ref="groupTree"
+          class="ellipsis"
           :data="groups"
           node-key="path"
           :current-node-key="group.path"

src/components/tree/DeviceGroupTree/index.vue

@@ -269,7 +269,7 @@ export default {
         this.$ratioCache = ratioCacheOptions.cache
         this.$productCache = productCacheOptions.cache
         return this.getDevicesByActive()
-      }, console.log)
+      })
     },
     setCache (device, { key, nameKey, ids, map, cache }) {
       const id = device.id

src/components/tree/DirectoryTree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l-flex--col c-directory-tree">
+  <div class="l-flex--col">
     <div class="l-flex__none l-flex--row c-sibling-item--v u-line-height">
       <i
         class="l-flex__none c-sibling-item el-icon-circle-plus-outline u-font-size--lg u-color--blue u-bold has-active"
@@ -9,9 +9,10 @@
         {{ title }}
       </div>
     </div>
-    <div class="l-flex__fill c-sibling-item--v u-overflow-y--auto">
+    <div class="l-flex__fill c-sibling-item--v u-overflow--auto">
       <el-tree
         ref="treeRef"
+        class="inline-flex"
         :data="groups"
         :props="defaultProps"
         node-key="id"
@@ -202,13 +203,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-directory-tree {
-  ::v-deep .el-tree-node__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
 .c-contentmenu {
   position: fixed;
   width: 150px;

src/scss/base/_cover.scss

@@ -32,3 +32,16 @@
   display: flex;
   flex-direction: column;
 }
+
+.el-tree.inline-flex {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 100%;
+}
+
+.el-tree.ellipsis {
+  .el-tree-node__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

src/scss/bem/_component.scss

@@ -271,13 +271,13 @@
 
 .c-grid-form {
   display: inline-grid;
-  grid-template-columns: max-content minmax(400px, min-content);
+  grid-template-columns: max-content 400px;
   grid-row-gap: $spacing--sm;
   grid-column-gap: $spacing;
   align-items: flex-start;
 
   &.sm {
-    grid-template-columns: max-content minmax(300px, min-content);
+    grid-template-columns: max-content 300px;
   }
 
   &.auto {

src/scss/bem/_object.scss

@@ -20,7 +20,7 @@
   }
 
   &:hover {
-    background-color: rgba($blue, .8);
+    background-color: lighten($blue, 10%);
   }
 
   &:active {

src/scss/bem/_utility.scss

@@ -17,6 +17,10 @@
   text-overflow: ellipsis;
 }
 
+.u-overflow--auto {
+  overflow: auto;
+}
+
 .u-overflow-x--auto {
   overflow-x: auto;
   overflow-y: hidden;
@@ -208,3 +212,7 @@
 .u-vertical--middle {
   vertical-align: middle;
 }
+
+.u-line-height {
+  line-height: 1;
+}