From 8d5b8240cc5f7c155559799d25c2b26008844fcf Mon Sep 17 00:00:00 2001
From: xu_yanfeng <xu_yanfeng@126.com>
Date: Sat, 28 Dec 2024 14:25:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E7=94=A8=E5=AE=9A=E6=97=B6=E5=99=A8?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cc-inspector/src/views/devtools/bridge.ts     |   2 +-
 cc-inspector/src/views/devtools/bus.ts        |   4 +
 cc-inspector/src/views/devtools/find.vue      |  18 +-
 cc-inspector/src/views/devtools/hierarchy.vue | 178 +++++-------------
 cc-inspector/src/views/devtools/index.vue     |  44 +++--
 cc-inspector/src/views/devtools/inspector.vue |  19 +-
 .../src/views/devtools/test/server.ts         |   5 +-
 cc-inspector/src/views/devtools/test/test.vue |  63 +++++--
 cc-inspector/src/views/devtools/timer.ts      |  16 ++
 .../src/views/devtools/ui/property-engine.vue |   2 +-
 .../src/views/devtools/ui/propertys.vue       |   2 +-
 .../src/views/devtools/ui/settings.vue        |   2 +-
 .../src/views/devtools/ui/ui-prop.vue         |   2 +-
 cc-inspector/src/views/devtools/util.ts       |   6 +
 14 files changed, 170 insertions(+), 193 deletions(-)
 create mode 100644 cc-inspector/src/views/devtools/timer.ts

diff --git a/cc-inspector/src/views/devtools/bridge.ts b/cc-inspector/src/views/devtools/bridge.ts
index 538ab69..6374612 100644
--- a/cc-inspector/src/views/devtools/bridge.ts
+++ b/cc-inspector/src/views/devtools/bridge.ts
@@ -40,7 +40,7 @@ class Bridge implements TestClient {
       testServer.add(this);
     }
   }
-  on(msg: Msg, callback: Function) {
+  on(msg: Msg, callback: (data: PluginEvent) => void) {
     this.emitter.on(msg, callback);
   }
   recv(event: PluginEvent): void {
diff --git a/cc-inspector/src/views/devtools/bus.ts b/cc-inspector/src/views/devtools/bus.ts
index 6ffac30..3da3ef4 100644
--- a/cc-inspector/src/views/devtools/bus.ts
+++ b/cc-inspector/src/views/devtools/bus.ts
@@ -5,6 +5,10 @@ export enum BusMsg {
   RequestObjectData = "RequestObjectData",
   FoldAllGroup = "FoldAllGroup",
   UpdateSettings = "UpdateSettings",
+  /**
+   * 开关定时器，方便测试
+   */
+  EnableSchedule = "EnableSchedule",
 }
 
 export const Bus = new TinyEmitter();
diff --git a/cc-inspector/src/views/devtools/find.vue b/cc-inspector/src/views/devtools/find.vue
index c921263..33e07a3 100644
--- a/cc-inspector/src/views/devtools/find.vue
+++ b/cc-inspector/src/views/devtools/find.vue
@@ -5,25 +5,11 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted } from "vue";
-import { Msg, RequestSupportData } from "../../core/types";
-import { bridge } from "./bridge";
+import { defineComponent } from "vue";
+import { checkSupport } from "./util";
 export default defineComponent({
   name: "find",
   setup(props) {
-    let timer: NodeJS.Timer = null;
-    onMounted(() => {
-      timer = setInterval(() => {
-        checkSupport();
-      }, 300);
-    });
-    onUnmounted(() => {
-      clearInterval(timer);
-    });
-
-    function checkSupport() {
-      bridge.send(Msg.RequestSupport, {} as RequestSupportData);
-    }
     return {
       onBtnClickUpdatePage() {
         checkSupport();
diff --git a/cc-inspector/src/views/devtools/hierarchy.vue b/cc-inspector/src/views/devtools/hierarchy.vue
index fff389d..42d5c21 100644
--- a/cc-inspector/src/views/devtools/hierarchy.vue
+++ b/cc-inspector/src/views/devtools/hierarchy.vue
@@ -1,62 +1,51 @@
 <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>
+    <CCDock name="Hierarchy">
+      <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" @node-unclick="handleNodeUnclick"></CCTree>
+    </CCDock>
   </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 { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
+import { Msg, PluginEvent, RequestNodeInfoData, RequestTreeInfoData, ResponseSetPropertyData } 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;
+import { appStore } from "./store";
+import { Timer } from "./timer";
+const { CCTree, CCFootBar, CCDock, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 export default defineComponent({
   name: "hierarchy",
-  components: { CCButtonGroup, CCInput, CCTree },
+  components: { CCButtonGroup, CCInput, CCTree, CCDock },
   setup() {
-    onMounted(() => {
-      syncSettings();
-    });
+    onMounted(() => {});
     Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
       console.log(toRaw(data));
       _expand(data.engineUUID);
     });
-    Bus.on(BusMsg.UpdateSettings, () => {
-      syncSettings();
+    Bus.on(BusMsg.EnableSchedule, (b: boolean) => {
+      if (b) {
+        timer.create();
+      } else {
+        timer.clean();
+      }
     });
-    const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
-      icon: "icon_refresh",
-      click: () => {
-        onBtnClickUpdateTree();
-      },
-      visible: true,
+    const timer: Timer = new Timer(() => {
+      updateTree();
+    });
+    onMounted(() => {
+      timer.create();
+    });
+    onUnmounted(() => {
+      timer.clean();
     });
-    const buttonGroup = ref<ButtonGroupItem[]>([
-      btnRefresh,
-      {
-        icon: "icon_settings",
-        click: () => {
-          ccui.dialog.showDialog({
-            comp: SettingsVue,
-            title: "Settings",
-          });
-        },
-      },
-    ]);
     function _expand(uuid: string) {
       let expandKeys: Array<string> = [];
 
@@ -86,42 +75,12 @@ export default defineComponent({
       });
       // 高亮uuid
     }
-    let timerID: NodeJS.Timer | null = null;
-
-    function _clearTimer() {
-      if (timerID !== null) {
-        clearInterval(timerID);
-        timerID = null;
-      }
-    }
-    function onBtnClickUpdateTree() {
+    function updateTree() {
+      console.log("update tree info");
       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);
     }
@@ -130,7 +89,6 @@ export default defineComponent({
       // TODO: 过滤树
       updateFilterText(val);
     });
-    // TODO: 放到store里面
     const { config, frameID } = storeToRefs(appStore());
     const matchCase = ref<boolean>(false);
     const elTree = ref<typeof CCTree>();
@@ -141,56 +99,21 @@ export default defineComponent({
       }
     }
     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>) => {
+    bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
+      let data: Array<TreeData> = event.data;
       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;
-      }
+      nextTick(() => {
+        if (elTree.value) {
+          elTree.value.handChoose(selectedUUID);
+        }
+      });
     });
 
-    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) => {
+    bridge.on(Msg.ResponseSetProperty, (event: PluginEvent) => {
+      let data: ResponseSetPropertyData = event.data;
       const uuid = data.path[0];
       const key = data.path[1];
       const value = data.data;
@@ -223,7 +146,9 @@ export default defineComponent({
       treeData,
       matchCase,
       frameID,
-      buttonGroup,
+      handleNodeUnclick() {
+        selectedUUID = null;
+      },
       handleNodeClick(data: TreeData | null) {
         if (data) {
           selectedUUID = data.id;
@@ -275,21 +200,6 @@ export default defineComponent({
   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;
diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue
index 4fa8bf2..96f3e28 100644
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="devtools">
-    <Test @valid-game="testValidGame"> </Test>
+    <Test> </Test>
     <div class="head" v-show="iframes.length > 1">
       <div class="label">inspect target:</div>
       <CCSelect v-model:value="frameID" @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
     </div>
-    <div v-show="isShowDebug" class="find">
+    <div v-if="isShowDebug" class="find">
       <div v-if="false">
         <CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
         <span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
@@ -26,9 +26,9 @@
 import ccui from "@xuyanfeng/cc-ui";
 import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { storeToRefs } from "pinia";
-import { defineComponent, ref, toRaw } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, toRaw } from "vue";
 import PluginConfig from "../../../cc-plugin.config";
-import { Msg, RequestLogData, RequestUseFrameData, ResponseSupportData } from "../../core/types";
+import { Msg, PluginEvent, RequestUseFrameData, ResponseSupportData } from "../../core/types";
 import { bridge } from "./bridge";
 import { Bus, BusMsg } from "./bus";
 import { FrameDetails, NodeInfoData, TreeData } from "./data";
@@ -37,8 +37,10 @@ import Hierarchy from "./hierarchy.vue";
 import Inspector from "./inspector.vue";
 import { appStore } from "./store";
 import Test from "./test/test.vue";
+import { Timer } from "./timer";
 import Properties from "./ui/propertys.vue";
 import SettingsVue from "./ui/settings.vue";
+import { checkSupport } from "./util";
 const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 interface FrameInfo {
   label: string;
@@ -54,7 +56,15 @@ export default defineComponent({
     const isShowDebug = ref<boolean>(false);
     const iframes = ref<Array<FrameInfo>>([]);
     const { config, frameID } = storeToRefs(appStore());
-
+    const timer = new Timer(() => {
+      checkSupport();
+    });
+    onMounted(() => {
+      timer.create();
+    });
+    onUnmounted(() => {
+      timer.clean();
+    });
     // 问题：没有上下文的权限，只能操作DOM
     function _executeScript(para: Object) {
       // chrome.tabs.executeScript()//v2版本使用的函数
@@ -72,21 +82,31 @@ export default defineComponent({
         }
       });
     }
-
-    bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
+    Bus.on(BusMsg.EnableSchedule, (b: boolean) => {
+      if (b) {
+        timer.create();
+      } else {
+        timer.clean();
+      }
+    });
+    bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
+      let data: Array<TreeData> = event.data;
       isShowDebug.value = true;
     });
-    bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
+    bridge.on(Msg.ResponseSupport, (event: PluginEvent) => {
+      let data: ResponseSupportData = event.data;
       const isCocosGame: boolean = data.support;
       isShowDebug.value = isCocosGame;
     });
-    bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
+    bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => {
+      let eventData: NodeInfoData = event.data;
       isShowDebug.value = true;
     });
     bridge.on(Msg.MemoryInfo, (eventData: any) => {
       memory.value = eventData;
     });
-    bridge.on(Msg.ResponseUpdateFrames, (resFrames: FrameDetails[]) => {
+    bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => {
+      let resFrames: FrameDetails[] = event.data;
       iframes.value = resFrames.map((item) => {
         return {
           label: item.url,
@@ -131,9 +151,7 @@ export default defineComponent({
       frameID,
       iframes,
       isShowDebug,
-      testValidGame(b: boolean) {
-        isShowDebug.value = !!b;
-      },
+
       getFramesData(): Option[] {
         const frames: FrameInfo[] = toRaw(iframes.value);
         const options: Option[] = [];
diff --git a/cc-inspector/src/views/devtools/inspector.vue b/cc-inspector/src/views/devtools/inspector.vue
index b5f8bda..f094244 100644
--- a/cc-inspector/src/views/devtools/inspector.vue
+++ b/cc-inspector/src/views/devtools/inspector.vue
@@ -1,30 +1,35 @@
 <template>
   <div class="right">
-    <Properties v-if="treeItemData" :data="treeItemData"></Properties>
+    <CCDock name="Inspector">
+      <Properties v-if="treeItemData" :data="treeItemData"></Properties>
+    </CCDock>
   </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 { Msg, PluginEvent, 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";
+const { CCDock } = ccui.components;
 export default defineComponent({
-  components: { Properties },
+  components: { Properties, CCDock },
   setup() {
     const treeItemData = ref<NodeInfoData | null>(null);
-    bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
+    bridge.on(Msg.ResponseSupport, (event: PluginEvent) => {
+      let data: ResponseSupportData = event.data;
       const isCocosGame: boolean = data.support;
       if (isCocosGame) {
       } else {
         treeItemData.value = null;
       }
     });
-    bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
+    bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => {
       try {
         // 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
+        let eventData: NodeInfoData = event.data;
         const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
         treeItemData.value = nodeInfo;
       } catch (error) {
@@ -37,7 +42,8 @@ export default defineComponent({
      */
     const requestList: Array<{ id: string; cb: Function }> = [];
 
-    bridge.on(Msg.ResponseObjectItemData, (requestData: ResponseObjectData) => {
+    bridge.on(Msg.ResponseObjectItemData, (event: PluginEvent) => {
+      const requestData: ResponseObjectData = event.data;
       if (requestData.id !== null) {
         let findIndex = requestList.findIndex((el) => el.id === requestData.id);
         if (findIndex > -1) {
@@ -64,6 +70,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .right {
   flex: 1;
+  display: flex;
   overflow-x: hidden;
   overflow-y: overlay;
 
diff --git a/cc-inspector/src/views/devtools/test/server.ts b/cc-inspector/src/views/devtools/test/server.ts
index 6834ff9..7882e50 100644
--- a/cc-inspector/src/views/devtools/test/server.ts
+++ b/cc-inspector/src/views/devtools/test/server.ts
@@ -98,13 +98,12 @@ export class TestServer {
   add(client: TestClient) {
     this.clients.push(client);
   }
-  private count: number = 0;
+  public support: boolean = true;
   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,
+          support: this.support,
           msg: "",
         } as ResponseSupportData);
         this.send(e);
diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue
index 2f0f5be..47648c2 100644
--- a/cc-inspector/src/views/devtools/test/test.vue
+++ b/cc-inspector/src/views/devtools/test/test.vue
@@ -1,13 +1,24 @@
 <template>
   <div v-if="show" class="test">
     <CCSection name="功能测试" :expand="config.expandTest" @change="onExpandTest">
-      <CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
-      <CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
-      <CCButton @click="onTestTree">init tree data</CCButton>
-      <CCButton @click="onFrames">test frame</CCButton>
-      <CCButton @click="onTestNodeInfo">test node info</CCButton>
-      <CCButton @click="onNull">test null</CCButton>
-      <CCButton @click="onTerminal">onTerminal</CCButton>
+      <div>
+        <CCProp name="tree" align="left">
+          <CCButton @click="onTestTree1">tree1</CCButton>
+          <CCButton @click="onTestTree2">tree2</CCButton>
+          <CCButton @click="onTestNodeInfo">test node info</CCButton>
+        </CCProp>
+        <CCProp name="test" align="left">
+          <CCButton @click="onFrames">test frame</CCButton>
+          <CCButton @click="onNull">test null</CCButton>
+          <CCButton @click="onTerminal">terminal</CCButton>
+        </CCProp>
+        <CCProp name="cocos game" align="left">
+          <CCCheckBox :value="true" @change="onChangeCocosGame"></CCCheckBox>
+        </CCProp>
+        <CCProp name="timer" align="left">
+          <CCCheckBox :value="true" @change="onChangeTimer"></CCCheckBox>
+        </CCProp>
+      </div>
     </CCSection>
   </div>
 </template>
@@ -18,13 +29,14 @@ import { defineComponent, ref } from "vue";
 import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
 import { Terminal } from "../../../scripts/terminal";
 import { bridge } from "../bridge";
+import { Bus, BusMsg } from "../bus";
 import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data";
 import { appStore } from "../store";
 import { testServer } from "./server";
-const { CCButton, CCSection } = ccui.components;
+const { CCButton, CCSection, CCCheckBox, CCProp } = ccui.components;
 export default defineComponent({
   name: "test",
-  components: { CCButton, CCSection },
+  components: { CCButton, CCSection, CCCheckBox, CCProp },
   emits: ["validGame"],
   props: {
     isCocosGame: { type: Boolean, default: false },
@@ -67,11 +79,12 @@ export default defineComponent({
         config.value.expandTest = v;
         appStore().save();
       },
-      onClickHasCocosGame() {
-        emit("validGame", true);
+
+      onChangeCocosGame(b: boolean) {
+        testServer.support = b;
       },
-      onClickNoCocosGame() {
-        emit("validGame", false);
+      onChangeTimer(b: boolean) {
+        Bus.emit(BusMsg.EnableSchedule, b);
       },
       onTerminal() {
         const t = new Terminal("flag");
@@ -86,12 +99,30 @@ export default defineComponent({
         console.log(...t.blue("blue"));
         console.log(...t.chunkMessage(event.toChunk()));
       },
-      onTestTree() {
+      onTestTree1() {
+        const data: TreeData = {
+          id: "11",
+          text: "11",
+          active: true,
+          children: [{ id: "22", text: "22", active: true, children: [] }],
+        };
+        const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
+        bridge.emit(event);
+      },
+      onTestTree2() {
         const data: TreeData = {
           id: "1",
-          text: "root",
+          text: "1",
           active: true,
-          children: [],
+          children: [
+            {
+              id: "2",
+              text: "2",
+              active: true,
+              children: [{ id: "3", text: "3", active: true, children: [] }],
+            },
+            { id: "4", text: "4", active: true, children: [] },
+          ],
         };
         const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
         bridge.emit(event);
diff --git a/cc-inspector/src/views/devtools/timer.ts b/cc-inspector/src/views/devtools/timer.ts
new file mode 100644
index 0000000..dc2e60d
--- /dev/null
+++ b/cc-inspector/src/views/devtools/timer.ts
@@ -0,0 +1,16 @@
+export class Timer {
+  private timer: number = 0;
+  private callback: Function | null = null;
+  private duration: number = 0;
+  constructor(cb: Function = null, duration: number = 300) {
+    this.callback = cb;
+    this.duration = duration;
+  }
+  create() {
+    this.clean();
+    this.timer = setInterval(this.callback, this.duration);
+  }
+  clean() {
+    clearInterval(this.timer);
+  }
+}
diff --git a/cc-inspector/src/views/devtools/ui/property-engine.vue b/cc-inspector/src/views/devtools/ui/property-engine.vue
index 8b981cb..6af9457 100644
--- a/cc-inspector/src/views/devtools/ui/property-engine.vue
+++ b/cc-inspector/src/views/devtools/ui/property-engine.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import Bus, { BusMsg } from "../bus";
+import { Bus, BusMsg } from "../bus";
 import { EngineData } from "../data";
 export default defineComponent({
   name: "property-engine",
diff --git a/cc-inspector/src/views/devtools/ui/propertys.vue b/cc-inspector/src/views/devtools/ui/propertys.vue
index e29860c..a38605b 100644
--- a/cc-inspector/src/views/devtools/ui/propertys.vue
+++ b/cc-inspector/src/views/devtools/ui/propertys.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, watch } from "vue";
-import Bus, { BusMsg } from "../bus";
+import { Bus, BusMsg } from "../bus";
 import { NodeInfoData } from "../data";
 import PropertyGroup from "../ui/property-group.vue";
 import UiProp from "./ui-prop.vue";
diff --git a/cc-inspector/src/views/devtools/ui/settings.vue b/cc-inspector/src/views/devtools/ui/settings.vue
index d29b6d5..fb04700 100644
--- a/cc-inspector/src/views/devtools/ui/settings.vue
+++ b/cc-inspector/src/views/devtools/ui/settings.vue
@@ -15,7 +15,7 @@ import ccui from "@xuyanfeng/cc-ui";
 import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { storeToRefs } from "pinia";
 import { defineComponent, ref } from "vue";
-import bus, { BusMsg } from "../bus";
+import { BusMsg } from "../bus";
 import { appStore, RefreshType } from "../store";
 const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCProp, CCColor } = ccui.components;
 export default defineComponent({
diff --git a/cc-inspector/src/views/devtools/ui/ui-prop.vue b/cc-inspector/src/views/devtools/ui/ui-prop.vue
index 4ecdac1..19ef80e 100644
--- a/cc-inspector/src/views/devtools/ui/ui-prop.vue
+++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue
@@ -34,7 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
 import { Msg, RequestSetPropertyData } from "../../../core/types";
 import { bridge } from "../bridge";
-import Bus, { BusMsg } from "../bus";
+import { Bus, BusMsg } from "../bus";
 import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
 import Engine from "./property-engine.vue";
 import PropertyImage from "./property-image.vue";
diff --git a/cc-inspector/src/views/devtools/util.ts b/cc-inspector/src/views/devtools/util.ts
index e69de29..5c51f9e 100644
--- a/cc-inspector/src/views/devtools/util.ts
+++ b/cc-inspector/src/views/devtools/util.ts
@@ -0,0 +1,6 @@
+import { Msg, RequestSupportData } from "../../core/types";
+import { bridge } from "./bridge";
+
+export function checkSupport() {
+  bridge.send(Msg.RequestSupport, {} as RequestSupportData);
+}