添加测试tree的入口，适配基本的tree逻辑

cc-inspector/src/core/types.ts

@@ -8,22 +8,52 @@ export enum Page {
 }
 
 export enum Msg {
-  NodeInfo = "node-info",// 具体的节点信息
+  /**
-  TreeInfo = "tree-info",// 节点树信息
+   * 具体的节点信息
-  Support = "game-support",// 游戏支持信息
+   */
+  NodeInfo = "node-info",
+  /**
+   * 节点树信息
+   */
+  TreeInfo = "tree-info",
+  /**
+   * 游戏支持信息
+   */
+  Support = "game-support",// 
   MemoryInfo = "memory-info",//
-  TabsInfo = "tabs_info", // 当前页面信息
+  /**
-  GetTabID = "GetTabID", // 获取页面ID
+   * 当前页面信息
-  UpdateFrames = "UpdateFrames", // 更新页面的frame
+   */
+  TabsInfo = "tabs_info",
+  /**
+   * 获取页面ID
+   */
+  GetTabID = "GetTabID",
+  /**
+   * 更新页面的frame
+   */
+  UpdateFrames = "UpdateFrames",
   UseFrame = "UseFrame",
   GetObjectItemData = "GetObjectItemData",
   LogData = "LogData",
-  SetProperty = "set-property", // 设置node属性
+  /**
-  UpdateProperty = "update-property", // 更新属性
+   * 设置node属性
+   */
+  SetProperty = "set-property",
+  /**
+   * 更新属性
+   */
+  UpdateProperty = "update-property",
 }
 
 export class PluginEvent {
+  /**
+   * 消息的类型
+   */
   msg: Msg | null = null;
+  /**
+   * 携带的数据
+   */
   data: any = null;
 
   /**

cc-inspector/src/scripts/inject/index.ts

@@ -191,8 +191,8 @@ class CCInspector {
 
   // 收集节点信息
   getNodeChildren(node: any, data: TreeData) {
-    data.uuid = node.uuid;
+    data.id = node.uuid;
-    data.name = node.name;
+    data.text = node.name;
     // @ts-ignore
     if (node instanceof cc.Scene) {
       // 场景不允许获取active，引擎会报错

cc-inspector/src/views/devtools/connectBackground.ts

@@ -1,5 +1,5 @@
 import { Msg, Page, PluginEvent } from "../../core/types";
-
+export type BackgroundCallback = (data: PluginEvent, sender: any) => void;
 class ConnectBackground {
   connect: chrome.runtime.Port | null = null;
 
@@ -16,17 +16,25 @@ class ConnectBackground {
       })
     }
   }
-
+  /**
-  onBackgroundMessage(cb: Function) {
+   * 把callback保存为变量，方便测试
+   */
+  private callback: BackgroundCallback | null = null;
+  onBackgroundMessage(cb: BackgroundCallback) {
+    this.callback = cb;
     if (this.connect) {
       this.connect.onMessage.addListener((event, sender) => {
         cb && cb(event, sender)
       });
     }
   }
+  testMessage(data: PluginEvent) {
+    if (this.callback) {
+      this.callback(data, null);
+    }
+  }
   sendMsgToContentScript(msg: Msg, data?: any) {
     if (!chrome || !chrome.devtools) {
-      console.log("环境异常，无法执行函数");
       return;
     }
     this.postMessageToBackground(msg, data);

cc-inspector/src/views/devtools/data.ts

@@ -1,5 +1,5 @@
+import { ITreeData } from '@xuyanfeng/cc-ui/types/cc-tree/const';
 import { v4 } from "uuid";
-
 export enum DataType {
   Number = 'Number',
   String = 'String',
@@ -208,11 +208,11 @@ export class EnumData extends Info {
   }
 }
 
-export class TreeData {
+export class TreeData implements ITreeData {
+  id: string = "";
   active: boolean = true;
-  uuid: string = "";
+  text: string = "";
-  name: string = "";
+  children: TreeData[] = [];
-  children: Array<TreeData> = [];
 }
 
 export class Property {

cc-inspector/src/views/devtools/index.vue

@@ -23,7 +23,7 @@
           </slot>
         </CCInput>
         <div class="treeList">
-          <CCTree></CCTree>
+          <CCTree :value="treeData"></CCTree>
           <!-- <el-tree
             :data="treeData"
             ref="tree"
@@ -79,6 +79,7 @@ import { connectBackground } from "./connectBackground";
 import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
 import { appStore, RefreshType } from "./store";
 import Test from "./test.vue";
+ccui.components.CCAd;
 import properties from "./ui/propertys.vue";
 import SettingsVue from "./ui/settings.vue";
 const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
@@ -133,7 +134,7 @@ export default defineComponent({
       function circle(tree: TreeData[]) {
         for (let i = 0; i < tree.length; i++) {
           let item: TreeData = tree[i];
-          if (item.uuid === targetUUID) {
+          if (item.id === targetUUID) {
             return true;
           }
           if (circle(item.children)) {
@@ -178,16 +179,45 @@ export default defineComponent({
       // 高亮uuid
     }
 
-    function _onMsgNodeInfo(eventData: NodeInfoData) {
+    // 问题：没有上下文的权限，只能操作DOM
+    function _executeScript(para: Object) {
+      // chrome.tabs.executeScript()//v2版本使用的函数
+      const tabID = chrome.devtools.inspectedWindow.tabId;
+      chrome.scripting.executeScript({ files: ["js/execute.js"], target: { tabId: tabID } }, (results: chrome.scripting.InjectionResult[]) => {});
+    }
+
+    function _inspectedCode() {
+      let injectCode = "";
+      chrome.devtools.inspectedWindow.eval(injectCode, (result, isException) => {
+        if (isException) {
+          console.error(isException);
+        } else {
+          console.log(`执行结果：${result}`);
+        }
+      });
+    }
+    const elTree = ref<HTMLElement>();
+
+    function _initChromeRuntimeConnect() {
+      const msgFunctionMap: Record<string, Function> = {};
+      msgFunctionMap[Msg.TreeInfo] = (data: Array<TreeData>) => {
         isShowDebug.value = true;
-      treeItemData.value = eventData;
+        if (!Array.isArray(data)) {
+          data = [data];
         }
-
+        console.log(data);
-    function _onMsgMemoryInfo(eventData: any) {
+        treeData.value = data;
-      memory.value = eventData;
+        if (_checkSelectedUUID()) {
+          updateNodeInfo();
+          nextTick(() => {
+            if (elTree.value) {
+              //@ts-ignore
+              elTree.value.setCurrentKey(selectedUUID);
             }
-
+          });
-    function _onMsgSupport(isCocosGame: boolean) {
+        }
+      };
+      msgFunctionMap[Msg.Support] = (isCocosGame: boolean) => {
         isShowDebug.value = isCocosGame;
         if (isCocosGame) {
           syncSettings();
@@ -198,18 +228,40 @@ export default defineComponent({
           treeItemData.value = null;
           selectedUUID = null;
         }
-    }
+      };
-    function _onMsgGetObjectItemData(requestData: ObjectItemRequestData) {
+      msgFunctionMap[Msg.NodeInfo] = (eventData: NodeInfoData) => {
-      if (requestData.id !== null) {
+        isShowDebug.value = true;
-        let findIndex = requestList.findIndex((el) => el.id === requestData.id);
+        treeItemData.value = eventData;
-        if (findIndex > -1) {
+      };
-          let del = requestList.splice(findIndex, 1)[0];
+      msgFunctionMap[Msg.MemoryInfo] = (eventData: any) => {
-          del.cb(requestData.data);
+        memory.value = eventData;
-        }
+      };
-      }
+      msgFunctionMap[Msg.UpdateProperty] = (data: Info) => {
+        const uuid = data.path[0];
+        const key = data.path[1];
+        const value = data.data;
+        let treeArray: Array<TreeData> = [];
+
+        function circle(array: Array<TreeData>) {
+          array.forEach((item) => {
+            treeArray.push(item);
+            circle(item.children);
+          });
         }
 
-    function _onMsgUpdateFrames(details: FrameDetails[]) {
+        // 更新指定uuid节点的tree的name
+        circle(treeData.value);
+        let ret = treeArray.find((el) => el.id === uuid);
+        if (ret) {
+          if (key === "name") {
+            ret.text = value;
+          }
+          if (key === "active") {
+            ret.active = !!value;
+          }
+        }
+      };
+      msgFunctionMap[Msg.UpdateFrames] = (details: FrameDetails[]) => {
         // 先把iframes里面无效的清空了
         iframes.value = iframes.value.filter((item) => {
           details.find((el) => el.frameID === item.value);
@@ -232,77 +284,16 @@ export default defineComponent({
           frameID.value = iframes[0].value;
           onChangeFrame();
         }
-    }
+      };
-
+      msgFunctionMap[Msg.GetObjectItemData] = (requestData: ObjectItemRequestData) => {
-    function _onMsgUpdateProperty(data: Info) {
+        if (requestData.id !== null) {
-      const uuid = data.path[0];
+          let findIndex = requestList.findIndex((el) => el.id === requestData.id);
-      const key = data.path[1];
+          if (findIndex > -1) {
-      const value = data.data;
+            let del = requestList.splice(findIndex, 1)[0];
-      let treeArray: Array<TreeData> = [];
+            del.cb(requestData.data);
-
-      function circle(array: Array<TreeData>) {
-        array.forEach((item) => {
-          treeArray.push(item);
-          circle(item.children);
-        });
-      }
-
-      // 更新指定uuid节点的tree的name
-      circle(treeData.value);
-      let ret = treeArray.find((el) => el.uuid === uuid);
-      if (ret) {
-        if (key === "name") {
-          ret.name = value;
-        }
-        if (key === "active") {
-          ret.active = !!value;
           }
         }
-    }
+      };
-    // 问题：没有上下文的权限，只能操作DOM
-    function _executeScript(para: Object) {
-      // chrome.tabs.executeScript()//v2版本使用的函数
-      const tabID = chrome.devtools.inspectedWindow.tabId;
-      chrome.scripting.executeScript({ files: ["js/execute.js"], target: { tabId: tabID } }, (results: chrome.scripting.InjectionResult[]) => {});
-    }
-
-    function _inspectedCode() {
-      let injectCode = "";
-      chrome.devtools.inspectedWindow.eval(injectCode, (result, isException) => {
-        if (isException) {
-          console.error(isException);
-        } else {
-          console.log(`执行结果：${result}`);
-        }
-      });
-    }
-    const elTree = ref<HTMLElement>();
-    function _onMsgTreeInfo(treeData: Array<TreeData>) {
-      console.log("treeData");
-      isShowDebug.value = true;
-      if (!Array.isArray(treeData)) {
-        treeData = [treeData];
-      }
-      treeData = treeData;
-      if (_checkSelectedUUID()) {
-        updateNodeInfo();
-        nextTick(() => {
-          if (elTree.value) {
-            //@ts-ignore
-            elTree.value.setCurrentKey(selectedUUID);
-          }
-        });
-      }
-    }
-    function _initChromeRuntimeConnect() {
-      const msgFunctionMap: Record<string, Function> = {};
-      msgFunctionMap[Msg.TreeInfo] = _onMsgTreeInfo;
-      msgFunctionMap[Msg.Support] = _onMsgSupport;
-      msgFunctionMap[Msg.NodeInfo] = _onMsgNodeInfo;
-      msgFunctionMap[Msg.MemoryInfo] = _onMsgMemoryInfo;
-      msgFunctionMap[Msg.UpdateProperty] = _onMsgUpdateProperty;
-      msgFunctionMap[Msg.UpdateFrames] = _onMsgUpdateFrames;
-      msgFunctionMap[Msg.GetObjectItemData] = _onMsgGetObjectItemData;
       // 接收来自background.js的消息数据
       connectBackground.onBackgroundMessage((data: PluginEvent, sender: any) => {
         if (!data) {
@@ -323,10 +314,7 @@ export default defineComponent({
         }
       });
     }
-    if (chrome && chrome.runtime) {
     _initChromeRuntimeConnect();
-    }
-
     window.addEventListener(
       "message",
       (event) => {
@@ -351,7 +339,7 @@ export default defineComponent({
     onMounted(() => {
       syncSettings();
     });
-    const treeData = ref<Array<TreeData>>([]);
+    const treeData = ref<TreeData[]>([]);
     const expandedKeys = ref<Array<string>>([]);
     const memory = ref<{
       performance: {
@@ -459,7 +447,7 @@ export default defineComponent({
         updateFilterText(filterText);
       },
       handleNodeClick(data: TreeData) {
-        selectedUUID = data.uuid;
+        selectedUUID = data.id;
         updateNodeInfo();
       },
       filterNode(value: any, data: any) {
@@ -484,13 +472,13 @@ export default defineComponent({
 
       onChangeFrame,
       onNodeExpand(data: TreeData) {
-        if (data.hasOwnProperty("uuid") && data.uuid) {
+        if (data.hasOwnProperty("uuid") && data.id) {
-          expandedKeys.value.push(data.uuid);
+          expandedKeys.value.push(data.id);
         }
       },
       onNodeCollapse(data: TreeData) {
         if (data.hasOwnProperty("uuid")) {
-          let index = expandedKeys.value.findIndex((el) => el === data.uuid);
+          let index = expandedKeys.value.findIndex((el) => el === data.id);
           if (index !== -1) {
             expandedKeys.value.splice(index, 1);
           }

cc-inspector/src/views/devtools/test.vue

@@ -3,12 +3,17 @@
     <CCSection name="功能测试">
       <CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
       <CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
+      <CCButton @click="onTestTree">init tree data</CCButton>
     </CCSection>
   </div>
 </template>
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
+import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
 import { defineComponent, ref } from "vue";
+import { Msg, Page, PluginEvent } from "../../core/types";
+import { connectBackground } from "./connectBackground";
+import { TreeData } from "./data";
 const { CCButton, CCSection } = ccui.components;
 export default defineComponent({
   name: "test",
@@ -27,6 +32,16 @@ export default defineComponent({
       onClickNoCocosGame() {
         emit("validGame", false);
       },
+      onTestTree() {
+        const data: TreeData = {
+          id: "1",
+          text: "root",
+          active: true,
+          children: [],
+        };
+        const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, data);
+        connectBackground.testMessage(event);
+      },
     };
   },
 });