调整

source/src/devtools/data.ts

@@ -222,3 +222,8 @@ export class Group {
     this.data = orderKeys.concat(otherKeys);
   }
 }
+
+export interface NodeInfoData {
+  uuid: string;// 节点的uuid
+  group: Group[];
+}

source/src/devtools/ui/index.vue

@@ -11,7 +11,7 @@
     </el-drawer>
     <div class="head" v-show="iframes.length>1">
       <div class="label">inspect target:</div>
-      <el-select v-model="frameID" placeholder="请选择" @change="onChangeFrame" style="flex:1;">
+      <el-select v-model="frameID" placeholder="please select ..." @change="onChangeFrame" style="flex:1;">
         <el-option v-for="item in iframes" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
@@ -31,13 +31,13 @@
           <el-button v-show="isShowRefreshBtn" type="success" class="el-icon-refresh"
                      size="mini"
                      @click="onBtnClickUpdateTree"></el-button>
-          <el-button @click="onClickSettings">set</el-button>
+          <el-button @click="onClickSettings" class="el-icon-s-tools"></el-button>
         </div>
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+        <el-input placeholder="enter keywords to filter" v-model="filterText">
           <template slot="append">
             <div class="matchCase ">
               <div class="iconfont el-icon-third-font-size" @click.stop="onChangeCase"
-                   title="匹配大小写"
+                   title="match case"
                    :style="{'color':matchCase?'red':''}">
               </div>
             </div>
@@ -67,11 +67,11 @@
         </div>
       </div>
       <div class="right">
-        <properties :all-group="treeItemData"></properties>
+        <properties v-if="treeItemData" :data="treeItemData"></properties>
       </div>
     </div>
     <div v-show="!isShowDebug" class="no-find">
-      <span>未发现cocos creator的游戏!</span>
+      <span>No games created by cocos creator found!</span>
       <el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdatePage">刷新</el-button>
     </div>
   </div>
@@ -83,7 +83,16 @@ import {Component, Watch} from "vue-property-decorator";
 import properties from "./propertys.vue";
 import {Msg, Page, PluginEvent} from "@/core/types"
 import {connectBackground} from "@/devtools/connectBackground";
-import {EngineData, FrameDetails, Info, ObjectData, ObjectItemRequestData, TreeData} from "@/devtools/data";
+import {
+  EngineData,
+  FrameDetails,
+  Group,
+  Info,
+  NodeInfoData,
+  ObjectData,
+  ObjectItemRequestData,
+  TreeData
+} from "@/devtools/data";
 import Bus, {BusMsg} from "@/devtools/bus";
 import settingsVue from "./settings.vue"
 import {RefreshAuto, RefreshManual, settings} from "@/devtools/settings";
@@ -96,7 +105,7 @@ import {RefreshAuto, RefreshManual, settings} from "@/devtools/settings";
 })
 export default class Index extends Vue {
   private isShowDebug: boolean = false;
-  treeItemData: Array<Record<string, any>> = [];
+  treeItemData: NodeInfoData | null = null;
   treeData: Array<TreeData> = []
   expandedKeys: Array<string> = [];
   selectedUUID: string | null = null;
@@ -248,11 +257,8 @@ export default class Index extends Vue {
     }
   }
 
-  _onMsgNodeInfo(eventData: any) {
+  _onMsgNodeInfo(eventData: NodeInfoData) {
     this.isShowDebug = true;
-    if (!Array.isArray(eventData)) {
-      eventData = [eventData]
-    }
     this.treeItemData = eventData;
   }
 
@@ -274,7 +280,7 @@ export default class Index extends Vue {
 
   _reset() {
     this.treeData = [];
-    this.treeItemData = [];
+    this.treeItemData = null;
   }
 
   mounted() {

source/src/devtools/ui/propertys.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="prop">
-    <div v-for="(group, index) in allGroup" :key="index" class="group">
+    <div v-for="(group, index) in data.group" :key="index" class="group">
       <div class="header" @click="onClickHeader(group)">
         <div style="margin: 0 5px;">
           <i v-if="group.fold" class="el-icon-caret-right"></i>
@@ -22,15 +22,18 @@ import Vue from "vue"
 
 import {Component, Prop, Watch} from "vue-property-decorator"
 import UiProp from "./ui-prop.vue"
+import {NodeInfoData} from "@/devtools/data";
 
 @Component({
   components: {UiProp},
 })
 export default class properties extends Vue {
-  name: string = "properties"
-
-  @Prop({default: () => [],})
-  allGroup: Array<Record<string, any>> | undefined;
+  @Prop({
+    default: () => {
+      return {};
+    }
+  })
+  data!: NodeInfoData;
 
   onClickHeader(group: any) {
     if (group && group.hasOwnProperty("fold")) {
@@ -38,27 +41,20 @@ export default class properties extends Vue {
     }
   }
 
-  @Prop({default: "label"})
-  private label?: string | undefined
-
-  setup() {
-
-  }
-
-  @Watch("allGroup")
-  watchAllGroup() {
-    this._initValue();
+  @Watch("data")
+  watchData(oldValue: NodeInfoData, newValue: NodeInfoData) {
+    this._initValue(oldValue.uuid === newValue.uuid);
   }
 
   created() {
     this._initValue();
   }
 
-  _initValue() {
-    if (this.allGroup) {
+  _initValue(isSameNode = true) {
+    if (this.data.group) {
       // 第一个cc.Node不折叠
-      for (let i = 0; i < this.allGroup.length; i++) {
-        let item = this.allGroup[i];
+      for (let i = 0; i < this.data.group.length; i++) {
+        let item = this.data.group[i];
         this.$set(item, "fold", i !== 0);
       }
     }

source/src/inject/index.ts

@@ -8,7 +8,7 @@ import {
   Group,
   ImageData,
   Info,
-  InvalidData,
+  InvalidData, NodeInfoData,
   NumberData,
   ObjectData, ObjectItemRequestData,
   Property,
@@ -588,14 +588,18 @@ class CCInspector {
       let nodeGroup = this._getGroupData(node);
       groupData.push(nodeGroup);
       // 收集组件信息
-      let nodeComp = node._components;
+      const nodeComp = node._components;
       for (let i = 0; i < nodeComp.length; i++) {
         let itemComp = nodeComp[i];
         this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp;
         let compGroup = this._getGroupData(itemComp);
         groupData.push(compGroup);
       }
-      this.sendMsgToContent(Msg.NodeInfo, groupData);
+      const data: NodeInfoData = {
+        uuid: uuid,
+        group: groupData,
+      }
+      this.sendMsgToContent(Msg.NodeInfo, data);
     } else {
       // 未获取到节点数据
       console.log("未获取到节点数据");