feat(tree): support for expansion after search

src/components/tree/DeviceTree/index.vue

@@ -221,6 +221,7 @@ export default {
       const rootOption = this.createNode()
       this.setNodes(rootOption, this.onFilter(rootOption, this.$nodes, regx))
       this.rootOption = rootOption
+      this.customExpand = !!this.deviceName
     },
     onFilter (parent, nodes, regx) {
       if (regx) {
@@ -231,7 +232,7 @@ export default {
           return regx.test(name)
         })
       }
-      return nodes.map(({ children, ...node }) => {
+      const childNodes = nodes.map(({ children, ...node }) => {
         if (!children) {
           const leafNode = this.createLeafNode(parent, node)
           if (this.filter) {
@@ -243,6 +244,10 @@ export default {
         this.setNodes(subNode, this.onFilter(subNode, children, regx))
         return subNode
       })
+      if (this.hideDisabled) {
+        return childNodes.filter(({ disabled }) => !disabled)
+      }
+      return childNodes
     },
     reset () {
       this.onSearch()

src/components/tree/Tree/TreeNode/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="l-flex__none l-flex--col c-tree-node">
     <div
+      v-if="isInView"
       class="l-flex--row c-tree-node__content u-pointer"
       :class="{ selected }"
       @click="onToggle"
@@ -21,11 +22,8 @@
       />
       <span class="l-flex__fill c-sibling-item near u-ellipsis">{{ node.name }}</span>
     </div>
-    <template v-if="!isLeaf">
-      <div
-        v-show="expand"
-        class="l-flex--col c-tree-node__sub"
-      >
+    <template v-if="!isLeaf && expand">
+      <div class="l-flex--col c-tree-node__sub">
         <div
           v-if="nodeCount === 0"
           class="c-tree-node__empty u-color--info dark"
@@ -55,7 +53,8 @@ export default {
   },
   data () {
     return {
-      expand: !!this.tree?.defaultExpand,
+      isInView: false,
+      expand: this.node.children ? !!this.tree?.expandOnInit : false,
       selected: false
     }
   },
@@ -82,7 +81,37 @@ export default {
       return false
     }
   },
+  watch: {
+    'tree.expandOnInit' (val) {
+      if (!this.isLeaf && val) {
+        this.expand = val
+      }
+    }
+  },
+  mounted () {
+    this.observe(this.$el)
+  },
+  beforeDestroy () {
+    this.$observer?.disconnect()
+    this.$observer = null
+  },
   methods: {
+    observe () {
+      if (!this.$observer) {
+        this.$observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              this.isInView = true
+            } else {
+              this.isInView = false
+            }
+          })
+        }, {
+          threshold: [0.25]
+        })
+      }
+      this.$observer.observe(this.$el)
+    },
     onToggle () {
       if (this.isLeaf) {
         this.tree.clickNode(this.node, this)
@@ -105,6 +134,7 @@ export default {
 
 <style lang="scss" scoped>
 .c-tree-node {
+  min-height: $padding--xs * 2 + $font-size--sm;
   line-height: 1;
 
   &__content {

src/components/tree/tree.js

@@ -16,6 +16,14 @@ export default {
     highlight: {
       type: [Boolean, String],
       default: false
+    },
+    defaultExpand: {
+      type: [Boolean, String],
+      default: false
+    },
+    hideDisabled: {
+      type: [Boolean, String],
+      default: true
     }
   },
   data () {
@@ -24,7 +32,13 @@ export default {
         checked: false,
         indeterminate: false,
         children: []
-      }
+      },
+      customExpand: false
+    }
+  },
+  computed: {
+    expandOnInit () {
+      return this.defaultExpand || this.customExpand
     }
   },
   watch: {

src/views/platform/upgrade/deploy/components/DeviceTypeTree.vue

@@ -89,6 +89,7 @@ export default {
             ...arr
           ])
           this.rootOption = rootOption
+          this.customExpand = !!this.deviceName
         },
         () => {
           this.error = true