feat: 优化元素查看

Web/packages/core/src/store/index.js

@@ -19,6 +19,7 @@ const store = new Store({
     mcHostWaitFetchRequestQueue:[],
     mcHostWaitFetchResponseQueue:[],
     isNative:false,
+    activeNodeKey: null,
   }
 })
 
@@ -51,6 +52,10 @@ export function toggleElement(element){
     store.state.highlightElement = element;
 }
 
+export function activeNodeTree(key){
+  store.state.activeNodeKey = key;
+}
+
 export function addIndependPlugin(plugin){
   // Unique Container
   let index = store.state.independPlugins.findIndex(ele => {

Web/packages/web/src/plugins/element/elementContainer.vue

@@ -36,6 +36,7 @@ import ElementDetails from './elementDetails.vue';
 import ElementSnippet from './elementSnippet.vue';
 // import MutationObserver from 'mutation-observer';
 import { guid, $bus } from '../../assets/util';
+import { debounce } from "../../assets/util";
 import { toggleElement } from '@dokit/web-core';
 export default {
   components: {
@@ -58,7 +59,11 @@ export default {
       active: 0,
     };
   },
+  created() {
+    this.watchWindowSize = debounce(this.watchWindowSize, 300);
+  },
   mounted() {
+    window.addEventListener("resize", this.watchWindowSize);
     this.node = this.getNode(document.documentElement);
     this.observer = new MutationObserver((mutations) => {
       for (let i = 0; i < mutations.length; i++) {
@@ -82,6 +87,7 @@ export default {
     },
   },
   destroyed() {
+    window.removeEventListener("resize", this.watchWindowSize);
     this.observer.disconnect();
   },
   watch: {
@@ -324,6 +330,14 @@ export default {
         return attrStyle;
       }
     },
+    watchWindowSize() {
+      this.node = this.getNode(document.documentElement);
+      this.oldElement = this.highlightElement
+      toggleElement(null);
+      this.$nextTick(() => {
+        toggleElement(this.oldElement);
+      });
+    }
   },
 };
 </script>

Web/packages/web/src/plugins/element/elementTree.vue

@@ -15,7 +15,7 @@
         unfold ? 'dk-toggle' : '',
       ]"
     >
-      <span class="dkelm-node" @click="unfoldDetail">
+      <span class="dkelm-node"  :class="[isActived ? 'actived' : '']" @click="unfoldDetail">
         &lt;{{ node.tagName.toLowerCase() }}
         <i class="dkelm-k" v-if="node.className || node.attributes.length">
           <span v-for="(item, index) in node.attributes" :key="index">
@@ -33,7 +33,7 @@
           <ElementTree :node="child" :parentIsUnfold="unfold"></ElementTree>
         </div>
       </template>
-      <span class="dkelm-node" v-if="!isNullEndTag(node.tagName)"
+      <span class="dkelm-node" :class="[isActived ? 'actived' : '']" @click="unfoldDetail" v-if="!isNullEndTag(node.tagName)"
         >&lt;/{{ node.tagName.toLowerCase() }}&gt;</span
       >
     </div>
@@ -46,6 +46,7 @@
 <script>
 import ElementTree from "./elementTree.vue";
 import { $bus } from "../../assets/util";
+import { activeNodeTree } from '@dokit/web-core';
 export default {
   name: "ElementTree",
   components: {
@@ -82,6 +83,21 @@ export default {
       immediate: true,
     }
   },
+  computed:{
+    canFold() {
+      return this.node?.childNodes.length > 0;
+    },
+    isActived() {
+      console.log(this.activeNodeKey)
+      return this.activeNodeKey === this.node?.key
+    },
+    state() {
+      return this.$store.state;
+    },
+    activeNodeKey() {
+      return this.state.activeNodeKey;
+    },
+  },
   created() {
     if (this?.node?.tagName === "HTML") {
       $bus.on(this.node.key, this.refresh);
@@ -110,14 +126,9 @@ export default {
       return names.indexOf(tagName) > -1 ? true : false;
     },
     unfoldDetail() {
-      this.canFold()&&(this.unfold = !this.unfold);
-    },
-    canFold() {
-      if (this.node.childNodes.length > 0) {
-        return true;
-      }
-      return false;
-    },
+      this.canFold&&(this.unfold = !this.unfold);
+      activeNodeTree(this.node.key)
+    },  
     _trim(str) {
       return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
     },
@@ -129,6 +140,11 @@ export default {
 .element-tree-container {
   font-size: 16px;
   position: relative;
+  &.can-unfold{
+    &>.dkelm-l>.dkelm-node {
+      cursor: pointer;
+    }
+  }
   .dkelm-l {
     padding-left: 8px;
     position: relative;
@@ -158,6 +174,9 @@ export default {
   }
   .dkelm-node {
     color: #183691;
+    &.actived{
+      background: rgba(0, 0, 0, 0.1);
+    }
   }
   .dkelm-k {
     color: #0086b3;