增加控制 自动刷新/手动刷新 的功能

cc-inspector/src/views/devtools/common.less

@@ -0,0 +1,22 @@
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+.refresh {
+  margin: 0 3px;
+  cursor: pointer;
+  &:hover {
+    color: rgb(250, 207, 161);
+  }
+  &:active {
+    color: #ffaa00;
+  }
+}
+.refresh-rotate {
+  animation: rotate 1s linear infinite reverse;
+}

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

@@ -2,6 +2,7 @@
   <div class="left">
     <CCDock name="Hierarchy">
       <template v-slot:title>
+        <i class="iconfont icon_refresh refresh" :class="{ 'refresh-rotate': freshAuto }" @click="onClickRefresh"></i>
         <div class="engine-version" v-if="engineVersion">Cocos Creator V{{ engineVersion }}</div>
       </template>
       <CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
@@ -44,9 +45,14 @@ export default defineComponent({
         timer.clean();
       }
     };
-    const timer: Timer = new Timer(() => {
+    const timer: Timer = new Timer();
+    timer.onWork = () => {
+      freshAuto.value = true;
       updateTree();
-    });
+    };
+    timer.onClean = () => {
+      freshAuto.value = false;
+    };
     timer.name = "hierarchy";
     let ins: MousetrapInstance | null = null;
     function onQuickVisible() {
@@ -158,7 +164,16 @@ export default defineComponent({
       selectedUUID = uuid;
       Bus.emit(BusMsg.SelectNode, uuid);
     }
+    const freshAuto = ref(false);
     return {
+      onClickRefresh() {
+        freshAuto.value = true;
+        updateTree();
+        setTimeout(() => {
+          freshAuto.value = false;
+        }, 1000);
+      },
+      freshAuto,
       engineVersion,
       expandedKeys,
       elTree,
@@ -280,6 +295,7 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
+@import "./common.less";
 .left {
   display: flex;
   flex-direction: column;

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

@@ -60,9 +60,10 @@ export default defineComponent({
     const isShowDebug = ref<boolean>(false);
     const iframes = ref<Array<FrameInfo>>([]);
     const { config, frameID } = storeToRefs(appStore());
-    const timer = new Timer(() => {
+    const timer = new Timer();
+    timer.onWork = () => {
       checkSupport();
-    });
+    };
     timer.name = "devtools";
     onMounted(() => {
       ccui.footbar.showTipsArray({

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

@@ -1,6 +1,9 @@
 <template>
   <div class="right">
     <CCDock name="Inspector">
+      <template v-slot:title>
+        <i class="iconfont icon_refresh refresh" :class="{ 'refresh-rotate': freshAuto }" @click="onClickRefresh"></i>
+      </template>
       <div class="inspector" @contextmenu.prevent.stop="onMenu">
         <Properties v-if="treeItemData" :data="treeItemData"></Properties>
       </div>
@@ -31,7 +34,14 @@ export default defineComponent({
         treeItemData.value = null;
       }
     }
-    const timer = new Timer(updateNodeInfo);
+    const timer = new Timer();
+    timer.onWork = () => {
+      freshAuto.value = true;
+      updateNodeInfo();
+    };
+    timer.onClean = () => {
+      freshAuto.value = false;
+    };
     timer.name = "inspector";
     const treeItemData = ref<NodeInfoData | null>(null);
     const funcEnableSchedule = (b: boolean) => {
@@ -83,9 +93,17 @@ export default defineComponent({
         ccui.footbar.showError(error, { title: "parse property error" });
       }
     });
-
+    const freshAuto = ref(false);
     return {
+      freshAuto,
       treeItemData,
+      onClickRefresh() {
+        freshAuto.value = true;
+        updateNodeInfo();
+        setTimeout(() => {
+          freshAuto.value = false;
+        }, 1000);
+      },
       onMenu(evnet: MouseEvent) {
         const menus: IUiMenuItem[] = [];
         menus.push({
@@ -95,6 +113,18 @@ export default defineComponent({
             ga.fireEventWithParam(GA_EventName.MouseMenu, "update node info");
           },
         });
+        menus.push({
+          name: "fresh auto",
+          callback: () => {
+            timer.create(true);
+          },
+        });
+        menus.push({
+          name: "fresh manual",
+          callback: () => {
+            timer.clean();
+          },
+        });
         menus.push({
           name: simpleProperties ? "show more properties" : "show simple properties",
           callback: () => {
@@ -109,11 +139,13 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
+@import "./common.less";
 .right {
   flex: 1;
   display: flex;
   overflow-x: hidden;
   overflow-y: overlay;
+
   .inspector {
     display: flex;
     flex: 1;

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

@@ -1,17 +1,21 @@
 export class Timer {
   private timer: number | null = null;
-  private callback: Function | null = null;
-  private duration: number = 0;
+  /**
+   * 执行定时器的回调
+   */
+  public onWork: Function | null = null;
+  /**
+   * 清理定时器的回调
+   */
+  public onClean: Function | null = null;
+  public duration: number = 300;
   public name: string = "";
-  constructor(cb: Function = null, duration: number = 300) {
-    this.callback = cb;
-    this.duration = duration;
-  }
+
   create(rightNow: boolean = false) {
     this.clean();
-    this.timer = setInterval(this.callback, this.duration);
+    this.timer = setInterval(this.onWork, this.duration);
     if (rightNow) {
-      this.callback && this.callback();
+      this.onWork && this.onWork();
     }
   }
   clean() {
@@ -20,5 +24,6 @@ export class Timer {
     }
     clearInterval(this.timer);
     this.timer = null;
+    this.onClean && this.onClean();
   }
 }