From 438d086dd53e85c035e2735e8e94bdcdd26079b4 Mon Sep 17 00:00:00 2001
From: xu_yanfeng <xu_yanfeng@126.com>
Date: Fri, 27 Dec 2024 21:08:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E5=87=BAhierarchy=E5=92=8Cin?=
 =?UTF-8?q?spector=EF=BC=8C=E4=BE=BF=E4=BA=8E=E9=80=BB=E8=BE=91=E7=BB=B4?=
 =?UTF-8?q?=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cc-inspector/src/views/devtools/bridge.ts     |  26 +-
 cc-inspector/src/views/devtools/bus.ts        |   3 +-
 cc-inspector/src/views/devtools/hierarchy.vue | 302 ++++++++++++
 cc-inspector/src/views/devtools/index.vue     | 435 ++----------------
 cc-inspector/src/views/devtools/inspector.vue |  82 ++++
 cc-inspector/src/views/devtools/store.ts      |   2 +
 .../src/views/devtools/test/server.ts         |  12 +-
 cc-inspector/src/views/devtools/test/test.vue |   2 +-
 .../src/views/devtools/ui/property-group.vue  |   7 +-
 9 files changed, 453 insertions(+), 418 deletions(-)
 create mode 100644 cc-inspector/src/views/devtools/hierarchy.vue
 create mode 100644 cc-inspector/src/views/devtools/inspector.vue

diff --git a/cc-inspector/src/views/devtools/bridge.ts b/cc-inspector/src/views/devtools/bridge.ts
index 7850f56..538ab69 100644
--- a/cc-inspector/src/views/devtools/bridge.ts
+++ b/cc-inspector/src/views/devtools/bridge.ts
@@ -1,4 +1,5 @@
 import CCP from "cc-plugin/src/ccp/entry-render";
+import { TinyEmitter } from "tiny-emitter";
 import { Msg, Page, PluginEvent } from "../../core/types";
 import { Terminal } from "../../scripts/terminal";
 import { TestClient, testServer } from "./test/server";
@@ -7,11 +8,7 @@ if (chrome.devtools) {
   console.log("chrome devtools");
 }
 class Bridge implements TestClient {
-  /**
-   * 把callback保存为变量，方便测试
-   */
-  public onMessage: BridgeCallback | null = null;
-
+  private emitter = new TinyEmitter();
   /**
    * 和background建立的链接
    */
@@ -32,24 +29,25 @@ class Bridge implements TestClient {
       this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => {
         const data = PluginEvent.create(event);
         console.log(...this.terminal.chunkMessage(data.toChunk()));
-        if (data.valid && this.onMessage) {
-          this.onMessage(data, sender);
+        if (data.valid && data.isTargetDevtools()) {
+          this.emitter.emit(data.msg, data.data);
         } else {
           console.log(JSON.stringify(event));
+          debugger;
         }
       });
     } else {
       testServer.add(this);
     }
   }
-
-  recv(event: PluginEvent): void {
-    this.doMessage(event);
+  on(msg: Msg, callback: Function) {
+    this.emitter.on(msg, callback);
   }
-  doMessage(data: PluginEvent) {
-    if (this.onMessage) {
-      this.onMessage(data, null);
-    }
+  recv(event: PluginEvent): void {
+    this.emit(event);
+  }
+  emit(data: PluginEvent) {
+    this.emitter.emit(data.msg, data);
   }
   send(msg: Msg, data?: any) {
     if (CCP.Adaptation.Env.isChromeDevtools) {
diff --git a/cc-inspector/src/views/devtools/bus.ts b/cc-inspector/src/views/devtools/bus.ts
index cd341f4..6ffac30 100644
--- a/cc-inspector/src/views/devtools/bus.ts
+++ b/cc-inspector/src/views/devtools/bus.ts
@@ -3,9 +3,8 @@ import { TinyEmitter } from "tiny-emitter";
 export enum BusMsg {
   ShowPlace = "ShowPlace",
   RequestObjectData = "RequestObjectData",
-  LogData = "LogData",
   FoldAllGroup = "FoldAllGroup",
   UpdateSettings = "UpdateSettings",
 }
 
-export default new TinyEmitter();
+export const Bus = new TinyEmitter();
diff --git a/cc-inspector/src/views/devtools/hierarchy.vue b/cc-inspector/src/views/devtools/hierarchy.vue
new file mode 100644
index 0000000..fff389d
--- /dev/null
+++ b/cc-inspector/src/views/devtools/hierarchy.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="left">
+    <div class="tool-btn">
+      <div class="text">Node Tree</div>
+      <CCButtonGroup :items="buttonGroup" :recover="true"></CCButtonGroup>
+    </div>
+    <CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
+      <slot>
+        <i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
+      </slot>
+    </CCInput>
+    <CCTree style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick"></CCTree>
+  </div>
+</template>
+<script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
+import { storeToRefs } from "pinia";
+import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
+import { Msg, RequestNodeInfoData, RequestTreeInfoData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types";
+import { bridge } from "./bridge";
+import { Bus, BusMsg } from "./bus";
+import { EngineData, TreeData } from "./data";
+import { appStore, RefreshType } from "./store";
+import SettingsVue from "./ui/settings.vue";
+const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
+export default defineComponent({
+  name: "hierarchy",
+  components: { CCButtonGroup, CCInput, CCTree },
+  setup() {
+    onMounted(() => {
+      syncSettings();
+    });
+    Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
+      console.log(toRaw(data));
+      _expand(data.engineUUID);
+    });
+    Bus.on(BusMsg.UpdateSettings, () => {
+      syncSettings();
+    });
+    const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
+      icon: "icon_refresh",
+      click: () => {
+        onBtnClickUpdateTree();
+      },
+      visible: true,
+    });
+    const buttonGroup = ref<ButtonGroupItem[]>([
+      btnRefresh,
+      {
+        icon: "icon_settings",
+        click: () => {
+          ccui.dialog.showDialog({
+            comp: SettingsVue,
+            title: "Settings",
+          });
+        },
+      },
+    ]);
+    function _expand(uuid: string) {
+      let expandKeys: Array<string> = [];
+
+      function circle(array: any) {
+        for (let i = 0; i < array.length; i++) {
+          let item = array[i];
+          expandKeys.push(item.uuid);
+          if (item.uuid === uuid) {
+            return true;
+          } else {
+            let find = circle(item.children);
+            if (find) {
+              return true;
+            } else {
+              expandKeys.pop();
+            }
+          }
+        }
+      }
+
+      circle(treeData);
+
+      expandKeys.forEach((key) => {
+        if (!expandedKeys.value.find((el) => el === key)) {
+          expandedKeys.value.push(key);
+        }
+      });
+      // 高亮uuid
+    }
+    let timerID: NodeJS.Timer | null = null;
+
+    function _clearTimer() {
+      if (timerID !== null) {
+        clearInterval(timerID);
+        timerID = null;
+      }
+    }
+    function onBtnClickUpdateTree() {
+      const id = toRaw(frameID.value);
+      bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData);
+    }
+    function onEnableTreeWatch(watch: boolean, time = 300) {
+      if (watch) {
+        _clearTimer();
+        timerID = setInterval(() => {
+          onBtnClickUpdateTree();
+        }, time);
+      } else {
+        _clearTimer();
+      }
+    }
+    function syncSettings() {
+      const { refreshType, refreshTime } = config.value;
+      switch (refreshType) {
+        case RefreshType.Auto: {
+          btnRefresh.visible = false;
+          onEnableTreeWatch(true, refreshTime);
+          break;
+        }
+        case RefreshType.Manual: {
+          btnRefresh.visible = true;
+          onEnableTreeWatch(false);
+        }
+      }
+    }
+    function updateFilterText(val: any) {
+      (elTree.value as any)?.filter(val);
+    }
+    const filterText = ref<string>("");
+    watch(filterText, (val) => {
+      // TODO: 过滤树
+      updateFilterText(val);
+    });
+    // TODO: 放到store里面
+    const { config, frameID } = storeToRefs(appStore());
+    const matchCase = ref<boolean>(false);
+    const elTree = ref<typeof CCTree>();
+    const treeData = ref<TreeData[]>([]);
+    function updateNodeInfo() {
+      if (selectedUUID) {
+        bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
+      }
+    }
+    let selectedUUID: string | null = null;
+    function _findUuidInTree(data: TreeData[], targetUUID: string) {
+      function circle(tree: TreeData[]) {
+        for (let i = 0; i < tree.length; i++) {
+          let item: TreeData = tree[i];
+          if (item.id === targetUUID) {
+            return true;
+          }
+          if (circle(item.children || [])) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      return circle(data);
+    }
+
+    bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
+      if (!Array.isArray(data)) {
+        data = [data];
+      }
+      treeData.value = data;
+      if (!selectedUUID) {
+        return;
+      }
+      const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
+      if (b) {
+        updateNodeInfo();
+        nextTick(() => {
+          if (elTree.value) {
+            elTree.value.handChoose(selectedUUID);
+          }
+        });
+      } else {
+        selectedUUID = null;
+      }
+    });
+
+    bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
+      const isCocosGame: boolean = data.support;
+      if (isCocosGame) {
+        syncSettings();
+        onBtnClickUpdateTree();
+      } else {
+        _clearTimer();
+        treeData.value.length = 0;
+        selectedUUID = null;
+      }
+    });
+    bridge.on(Msg.ResponseSetProperty, (data: ResponseSetPropertyData) => {
+      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);
+        });
+      }
+
+      // 更新指定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;
+        }
+      }
+    });
+    const expandedKeys = ref<Array<string>>([]);
+    return {
+      expandedKeys,
+      elTree,
+      filterText,
+      treeData,
+      matchCase,
+      frameID,
+      buttonGroup,
+      handleNodeClick(data: TreeData | null) {
+        if (data) {
+          selectedUUID = data.id;
+          updateNodeInfo();
+        } else {
+          selectedUUID = null;
+        }
+      },
+      onNodeExpand(data: TreeData) {
+        if (data.id) {
+          expandedKeys.value.push(data.id);
+        }
+      },
+      onNodeCollapse(data: TreeData) {
+        if (data.id) {
+          const keys = toRaw(expandedKeys.value);
+          const index = keys.findIndex((el) => el === data.id);
+          if (index !== -1) {
+            keys.splice(index, 1);
+          }
+          expandedKeys.value = keys;
+        }
+      },
+      // TODO: 暂时这个版本先不实现
+      filterNode(value: any, data: any) {
+        if (!value) {
+          return true;
+        } else {
+          if (matchCase) {
+            // 严格匹配大写
+            return data?.name?.indexOf(value) !== -1;
+          } else {
+            return data?.name?.toLowerCase().indexOf(value.toLowerCase()) !== -1;
+          }
+        }
+      },
+      onChangeCase() {
+        matchCase.value = !matchCase.value;
+        updateFilterText(filterText);
+      },
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.left {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  width: 300px;
+
+  .tool-btn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    .text {
+      padding-left: 5px;
+      flex: 1;
+      user-select: none;
+      font-size: 12px;
+      color: white;
+    }
+  }
+
+  .matchCase {
+    width: 30px;
+    height: 26px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue
index 0b30d18..4fa8bf2 100644
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -12,22 +12,9 @@
         <span>JS堆栈大小: {{ memory.performance.totalJSHeapSize }}</span>
         <span>JS堆栈使用: {{ memory.performance.usedJSHeapSize }}</span>
       </div>
-      <div class="left">
-        <div class="tool-btn">
-          <div class="text">Node Tree</div>
-          <CCButtonGroup :items="buttonGroup" :recover="true"></CCButtonGroup>
-        </div>
-        <CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
-          <slot>
-            <i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
-          </slot>
-        </CCInput>
-        <CCTree style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick"></CCTree>
-      </div>
+      <Hierarchy></Hierarchy>
       <CCDivider></CCDivider>
-      <div class="right">
-        <Properties v-if="treeItemData" :data="treeItemData"></Properties>
-      </div>
+      <Inspector></Inspector>
     </div>
     <Find v-if="!isShowDebug"></Find>
     <CCDialog></CCDialog>
@@ -37,21 +24,21 @@
 
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
-import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
 import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { storeToRefs } from "pinia";
-import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
+import { defineComponent, ref, toRaw } from "vue";
 import PluginConfig from "../../../cc-plugin.config";
-import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestObjectData, RequestTreeInfoData, RequestUseFrameData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types";
+import { Msg, RequestLogData, RequestUseFrameData, ResponseSupportData } from "../../core/types";
 import { bridge } from "./bridge";
-import Bus, { BusMsg } from "./bus";
-import { EngineData, FrameDetails, NodeInfoData, ObjectData, TreeData } from "./data";
+import { Bus, BusMsg } from "./bus";
+import { FrameDetails, NodeInfoData, TreeData } from "./data";
 import Find from "./find.vue";
-import { appStore, RefreshType } from "./store";
+import Hierarchy from "./hierarchy.vue";
+import Inspector from "./inspector.vue";
+import { appStore } from "./store";
 import Test from "./test/test.vue";
 import Properties from "./ui/propertys.vue";
 import SettingsVue from "./ui/settings.vue";
-ccui.components.CCAd;
 const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 interface FrameInfo {
   label: string;
@@ -59,98 +46,14 @@ interface FrameInfo {
 }
 
 export default defineComponent({
-  components: { Find, Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
+  components: { Find, Inspector, Hierarchy, Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
   name: "devtools",
   props: {},
   setup(props, ctx) {
     appStore().init();
-    const { config } = storeToRefs(appStore());
-    const treeItemData = ref<NodeInfoData | null>(null);
     const isShowDebug = ref<boolean>(false);
-    const frameID = ref<number>(0);
     const iframes = ref<Array<FrameInfo>>([]);
-    const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
-      icon: "icon_refresh",
-      click: () => {
-        onBtnClickUpdateTree();
-      },
-      visible: true,
-    });
-    const buttonGroup = ref<ButtonGroupItem[]>([
-      btnRefresh,
-      {
-        icon: "icon_settings",
-        click: () => {
-          ccui.dialog.showDialog({
-            comp: SettingsVue,
-            title: "Settings",
-          });
-        },
-      },
-    ]);
-    function _checkSelectedUUID() {
-      if (selectedUUID) {
-        const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
-        if (b) {
-          return true;
-        }
-      }
-      selectedUUID = null;
-      treeItemData.value = null;
-      return false;
-    }
-
-    function _findUuidInTree(data: TreeData[], targetUUID: string) {
-      function circle(tree: TreeData[]) {
-        for (let i = 0; i < tree.length; i++) {
-          let item: TreeData = tree[i];
-          if (item.id === targetUUID) {
-            return true;
-          }
-          if (circle(item.children || [])) {
-            return true;
-          }
-        }
-        return false;
-      }
-
-      return circle(data);
-    }
-
-    /**
-     * 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了
-     */
-    const requestList: Array<{ id: string; cb: Function }> = [];
-
-    function _expand(uuid: string) {
-      let expandKeys: Array<string> = [];
-
-      function circle(array: any) {
-        for (let i = 0; i < array.length; i++) {
-          let item = array[i];
-          expandKeys.push(item.uuid);
-          if (item.uuid === uuid) {
-            return true;
-          } else {
-            let find = circle(item.children);
-            if (find) {
-              return true;
-            } else {
-              expandKeys.pop();
-            }
-          }
-        }
-      }
-
-      circle(treeData);
-
-      expandKeys.forEach((key) => {
-        if (!expandedKeys.value.find((el) => el === key)) {
-          expandedKeys.value.push(key);
-        }
-      });
-      // 高亮uuid
-    }
+    const { config, frameID } = storeToRefs(appStore());
 
     // 问题：没有上下文的权限，只能操作DOM
     function _executeScript(para: Object) {
@@ -169,151 +72,35 @@ export default defineComponent({
         }
       });
     }
-    const elTree = ref<typeof CCTree>();
-    function _initChromeRuntimeConnect() {
-      const msgFunctionMap: Record<string, Function> = {};
-      msgFunctionMap[Msg.ResponseTreeInfo] = (data: Array<TreeData>) => {
-        isShowDebug.value = true;
-        if (!Array.isArray(data)) {
-          data = [data];
-        }
-        treeData.value = data;
-        if (_checkSelectedUUID()) {
-          updateNodeInfo();
-          nextTick(() => {
-            if (elTree.value) {
-              elTree.value.handChoose(selectedUUID);
-            }
-          });
-        }
-      };
-      msgFunctionMap[Msg.ResponseSupport] = (data: ResponseSupportData) => {
-        debugger;
-        const isCocosGame: boolean = data.support;
-        isShowDebug.value = isCocosGame;
-        if (isCocosGame) {
-          syncSettings();
-          onBtnClickUpdateTree();
-        } else {
-          _clearTimer();
-          treeData.value.length = 0;
-          treeItemData.value = null;
-          selectedUUID = null;
-        }
-      };
-      msgFunctionMap[Msg.ResponseNodeInfo] = (eventData: NodeInfoData) => {
-        isShowDebug.value = true;
-        try {
-          // 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
-          const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
-          treeItemData.value = nodeInfo;
-        } catch (error) {
-          console.error(error);
-          ccui.footbar.showError(error, { title: "parse property error" });
-        }
-      };
-      msgFunctionMap[Msg.MemoryInfo] = (eventData: any) => {
-        memory.value = eventData;
-      };
-      msgFunctionMap[Msg.ResponseSetProperty] = (data: ResponseSetPropertyData) => {
-        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);
-          });
-        }
-
-        // 更新指定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.ResponseUpdateFrames] = (resFrames: FrameDetails[]) => {
-        iframes.value = resFrames.map((item) => {
-          return {
-            label: item.url,
-            value: item.frameID,
-          };
-        });
-
-        // 第一次获取到frame配置后，自动获取frame数据
-        if (frameID === null && iframes.value.length > 0 && !iframes.value.find((el) => el.value === frameID.value)) {
-          frameID.value = iframes[0].value;
-          onChangeFrame();
-        }
-      };
-      msgFunctionMap[Msg.ResponseObjectItemData] = (requestData: ResponseObjectData) => {
-        if (requestData.id !== null) {
-          let findIndex = requestList.findIndex((el) => el.id === requestData.id);
-          if (findIndex > -1) {
-            let del = requestList.splice(findIndex, 1)[0];
-            del.cb(requestData.data);
-          }
-        }
-      };
-      // 接收来自background.js的消息数据
-      bridge.onMessage = (data: PluginEvent, sender: any) => {
-        if (!data) {
-          return;
-        }
-        if (data.isTargetDevtools()) {
-          PluginEvent.finish(data);
-          const { msg } = data;
-          if (msg) {
-            const func = msgFunctionMap[msg];
-            if (func) {
-              func(data.data);
-            } else {
-              console.warn(`没有${msg}消息的函数`);
-            }
-          }
-        } else {
-          debugger;
-        }
-      };
-    }
-    _initChromeRuntimeConnect();
-    window.addEventListener(
-      "message",
-      (event) => {
-        console.log("on vue:" + JSON.stringify(event));
-      },
-      false
-    );
-    Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
-      console.log(toRaw(data));
-      _expand(data.engineUUID);
+    bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
+      isShowDebug.value = true;
     });
-    Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
-      if (!data.id || requestList.find((el) => el.id === data.id)) {
-        return;
+    bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
+      const isCocosGame: boolean = data.support;
+      isShowDebug.value = isCocosGame;
+    });
+    bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
+      isShowDebug.value = true;
+    });
+    bridge.on(Msg.MemoryInfo, (eventData: any) => {
+      memory.value = eventData;
+    });
+    bridge.on(Msg.ResponseUpdateFrames, (resFrames: FrameDetails[]) => {
+      iframes.value = resFrames.map((item) => {
+        return {
+          label: item.url,
+          value: item.frameID,
+        };
+      });
+
+      // 第一次获取到frame配置后，自动获取frame数据
+      if (frameID === null && iframes.value.length > 0 && !iframes.value.find((el) => el.value === frameID.value)) {
+        frameID.value = iframes[0].value;
+        onChangeFrame();
       }
-      requestList.push({ id: data.id, cb });
-      bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
     });
-    Bus.on(BusMsg.UpdateSettings, () => {
-      syncSettings();
-    });
-    Bus.on(BusMsg.LogData, (data: string[]) => {
-      bridge.send(Msg.RequestLogData, data as RequestLogData);
-    });
-    onMounted(() => {
-      syncSettings();
-    });
-    const treeData = ref<TreeData[]>([]);
-    const expandedKeys = ref<Array<string>>([]);
+
     const memory = ref<{
       performance: {
         jsHeapSizeLimit?: number;
@@ -330,59 +117,7 @@ export default defineComponent({
       children: "children",
       label: "name",
     });
-    const filterText = ref<string>("");
-    watch(filterText, (val) => {
-      // TODO: 过滤树
-      updateFilterText(val);
-    });
 
-    const matchCase = ref<boolean>(false);
-
-    function onEnableTreeWatch(watch: boolean, time = 300) {
-      if (watch) {
-        _clearTimer();
-        timerID = setInterval(() => {
-          onBtnClickUpdateTree();
-        }, time);
-      } else {
-        _clearTimer();
-      }
-    }
-    let timerID: NodeJS.Timer | null = null;
-
-    function _clearTimer() {
-      if (timerID !== null) {
-        clearInterval(timerID);
-        timerID = null;
-      }
-    }
-    function syncSettings() {
-      const { refreshType, refreshTime } = config.value;
-      switch (refreshType) {
-        case RefreshType.Auto: {
-          btnRefresh.visible = false;
-          onEnableTreeWatch(true, refreshTime);
-          break;
-        }
-        case RefreshType.Manual: {
-          btnRefresh.visible = true;
-          onEnableTreeWatch(false);
-        }
-      }
-    }
-    function updateNodeInfo() {
-      if (selectedUUID) {
-        bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
-      }
-    }
-    let selectedUUID: string | null = null;
-    function updateFilterText(val: any) {
-      (elTree.value as any)?.filter(val);
-    }
-    function onBtnClickUpdateTree() {
-      const id = toRaw(frameID.value);
-      bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData);
-    }
     function onChangeFrame() {
       const id = Number(toRaw(frameID.value));
       bridge.send(Msg.RequestUseFrame, { id } as RequestUseFrameData);
@@ -391,18 +126,11 @@ export default defineComponent({
     const version = ref(PluginConfig.manifest.version);
     return {
       version,
-      buttonGroup,
-      elTree,
       memory,
       defaultProps,
-      filterText,
-      matchCase,
+      frameID,
       iframes,
       isShowDebug,
-      expandedKeys,
-      treeData,
-      treeItemData,
-      frameID,
       testValidGame(b: boolean) {
         isShowDebug.value = !!b;
       },
@@ -417,52 +145,12 @@ export default defineComponent({
         });
         return options;
       },
-      onChangeCase() {
-        matchCase.value = !matchCase.value;
-        updateFilterText(filterText);
-      },
-      handleNodeClick(data: TreeData | null) {
-        if (data) {
-          selectedUUID = data.id;
-          updateNodeInfo();
-        } else {
-          selectedUUID = null;
-        }
-      },
-      // TODO: 暂时这个版本先不实现
-      filterNode(value: any, data: any) {
-        if (!value) {
-          return true;
-        } else {
-          if (matchCase) {
-            // 严格匹配大写
-            return data?.name?.indexOf(value) !== -1;
-          } else {
-            return data?.name?.toLowerCase().indexOf(value.toLowerCase()) !== -1;
-          }
-        }
-      },
 
       onMemoryTest() {
         bridge.send(Msg.MemoryInfo);
       },
 
       onChangeFrame,
-      onNodeExpand(data: TreeData) {
-        if (data.id) {
-          expandedKeys.value.push(data.id);
-        }
-      },
-      onNodeCollapse(data: TreeData) {
-        if (data.id) {
-          const keys = toRaw(expandedKeys.value);
-          const index = keys.findIndex((el) => el === data.id);
-          if (index !== -1) {
-            keys.splice(index, 1);
-          }
-          expandedKeys.value = keys;
-        }
-      },
     };
   },
 });
@@ -499,55 +187,6 @@ export default defineComponent({
     flex: 1;
     flex-direction: row;
     overflow: auto;
-
-    .left {
-      display: flex;
-      flex-direction: column;
-      min-width: 200px;
-      width: 300px;
-
-      .tool-btn {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-
-        .text {
-          padding-left: 5px;
-          flex: 1;
-          user-select: none;
-          font-size: 12px;
-          color: white;
-        }
-      }
-
-      .matchCase {
-        width: 30px;
-        height: 26px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    .right {
-      flex: 1;
-      overflow-x: hidden;
-      overflow-y: overlay;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-        background: #999;
-        border-radius: 2px;
-        height: 6px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: #333;
-        border-radius: 2px;
-      }
-    }
   }
 }
 </style>
diff --git a/cc-inspector/src/views/devtools/inspector.vue b/cc-inspector/src/views/devtools/inspector.vue
new file mode 100644
index 0000000..b5f8bda
--- /dev/null
+++ b/cc-inspector/src/views/devtools/inspector.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="right">
+    <Properties v-if="treeItemData" :data="treeItemData"></Properties>
+  </div>
+</template>
+<script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, ref } from "vue";
+import { Msg, RequestObjectData, ResponseObjectData, ResponseSupportData } from "../../core/types";
+import { bridge } from "./bridge";
+import { Bus, BusMsg } from "./bus";
+import { NodeInfoData, ObjectData } from "./data";
+import Properties from "./ui/propertys.vue";
+export default defineComponent({
+  components: { Properties },
+  setup() {
+    const treeItemData = ref<NodeInfoData | null>(null);
+    bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
+      const isCocosGame: boolean = data.support;
+      if (isCocosGame) {
+      } else {
+        treeItemData.value = null;
+      }
+    });
+    bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
+      try {
+        // 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
+        const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
+        treeItemData.value = nodeInfo;
+      } catch (error) {
+        console.error(error);
+        ccui.footbar.showError(error, { title: "parse property error" });
+      }
+    });
+    /**
+     * 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了
+     */
+    const requestList: Array<{ id: string; cb: Function }> = [];
+
+    bridge.on(Msg.ResponseObjectItemData, (requestData: ResponseObjectData) => {
+      if (requestData.id !== null) {
+        let findIndex = requestList.findIndex((el) => el.id === requestData.id);
+        if (findIndex > -1) {
+          let del = requestList.splice(findIndex, 1)[0];
+          del.cb(requestData.data);
+        }
+      }
+    });
+    Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
+      if (!data.id || requestList.find((el) => el.id === data.id)) {
+        return;
+      }
+      requestList.push({ id: data.id, cb });
+      bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
+    });
+    // TODO: 需要检查当前的这个节点是否有效
+    // treeItemData.value = null;
+    return {
+      treeItemData,
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.right {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: overlay;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    background: #999;
+    border-radius: 2px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #333;
+    border-radius: 2px;
+  }
+}
+</style>
diff --git a/cc-inspector/src/views/devtools/store.ts b/cc-inspector/src/views/devtools/store.ts
index eca967f..3a12b90 100644
--- a/cc-inspector/src/views/devtools/store.ts
+++ b/cc-inspector/src/views/devtools/store.ts
@@ -23,7 +23,9 @@ export class ConfigData {
 
 export const appStore = defineStore("app", () => {
   const config = ref<ConfigData>(new ConfigData());
+  const frameID = ref<number>(0);
   return {
+    frameID,
     config,
     init() {
       profile.init(new ConfigData(), pluginConfig);
diff --git a/cc-inspector/src/views/devtools/test/server.ts b/cc-inspector/src/views/devtools/test/server.ts
index 51a6d29..6834ff9 100644
--- a/cc-inspector/src/views/devtools/test/server.ts
+++ b/cc-inspector/src/views/devtools/test/server.ts
@@ -1,5 +1,5 @@
 import { v4 } from "uuid";
-import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseTreeInfoData } from "../../../core/types";
+import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
 import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
 export class TestClient {
   recv(event: PluginEvent) {}
@@ -98,8 +98,18 @@ export class TestServer {
   add(client: TestClient) {
     this.clients.push(client);
   }
+  private count: number = 0;
   recv(msg: string, data: any) {
     switch (msg) {
+      case Msg.RequestSupport: {
+        this.count++;
+        const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, {
+          support: this.count > 10,
+          msg: "",
+        } as ResponseSupportData);
+        this.send(e);
+        break;
+      }
       case Msg.RequestNodeInfo: {
         const id: string = (data as RequestNodeInfoData).uuid;
         const node: Node = this.testData.findNode(id);
diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue
index 0ebe105..2f0f5be 100644
--- a/cc-inspector/src/views/devtools/test/test.vue
+++ b/cc-inspector/src/views/devtools/test/test.vue
@@ -94,7 +94,7 @@ export default defineComponent({
           children: [],
         };
         const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
-        bridge.doMessage(event);
+        bridge.emit(event);
       },
       onFrames() {
         const data: FrameDetails[] = [
diff --git a/cc-inspector/src/views/devtools/ui/property-group.vue b/cc-inspector/src/views/devtools/ui/property-group.vue
index 62b35f8..af4b00d 100644
--- a/cc-inspector/src/views/devtools/ui/property-group.vue
+++ b/cc-inspector/src/views/devtools/ui/property-group.vue
@@ -15,7 +15,9 @@
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
 import { defineComponent, PropType, ref, toRaw, watch } from "vue";
-import Bus, { BusMsg } from "../bus";
+import { Msg, RequestLogData } from "../../../core/types";
+import { bridge } from "../bridge";
+import { Bus, BusMsg } from "../bus";
 import { Group } from "../data";
 import UiProp from "./ui-prop.vue";
 const { CCInput, CCSection, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
@@ -54,7 +56,8 @@ export default defineComponent({
       fold,
       onLog() {
         const raw = toRaw(props);
-        Bus.emit(BusMsg.LogData, [raw.group.id]);
+        const data = [raw.group.id];
+        bridge.send(Msg.RequestLogData, data as RequestLogData);
       },
     };
   },