抽离刷新按钮组件，支持旋转一次和无限旋转

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

@@ -1,22 +0,0 @@
-@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/const.ts

@@ -2,3 +2,9 @@ export const PanelMsg = {
   Show: "Show",
   Hide: "Hide",
 };
+
+export enum RotateType {
+  None = "none",
+  One = "one",
+  Loop = "loop",
+}

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

@@ -4,7 +4,7 @@
       <span>no games created by cocos creator found!</span>
       <span>{{ msg }}</span>
     </div>
-    <i class="fresh iconfont icon_refresh" @click="onBtnClickUpdatePage"></i>
+    <Refresh @click="onBtnClickUpdatePage"></Refresh>
   </div>
 </template>
 <script lang="ts">
@@ -13,9 +13,11 @@ import { Msg, PluginEvent, ResponseSupportData } from "../../core/types";
 import { ga } from "../../ga";
 import { GA_Button } from "../../ga/type";
 import { bridge } from "./bridge";
+import Refresh from "./refresh.vue";
 import { checkSupport } from "./util";
 export default defineComponent({
   name: "find",
+  components: { Refresh },
   setup(props) {
     bridge.on(Msg.ResponseSupport, (event: PluginEvent) => {
       let data: ResponseSupportData = event.data;
@@ -52,19 +54,5 @@ export default defineComponent({
     font-size: 20px;
     user-select: none;
   }
-
-  .fresh {
-    cursor: pointer;
-    color: white;
-    font-size: 20px;
-
-    &:hover {
-      color: #cef57b;
-    }
-
-    &:active {
-      color: #ffaa00;
-    }
-  }
 }
 </style>

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

@@ -3,7 +3,7 @@
     <CCDock name="Hierarchy">
       <template v-slot:tab-name-before> </template>
       <template v-slot:title>
-        <i class="iconfont icon_refresh refresh" :class="{ 'refresh-rotate': freshAuto }" @click="onClickRefresh"></i>
+        <Refresh @click="onClickRefresh" :type="rotateType"></Refresh>
         <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">
@@ -18,6 +18,7 @@
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
 import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
+import { HandExpandOptions } from "@xuyanfeng/cc-ui/types/cc-tree/const";
 import Mousetrap, { MousetrapInstance } from "mousetrap";
 import { storeToRefs } from "pinia";
 import { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
@@ -26,15 +27,16 @@ import { ga } from "../../ga";
 import { GA_EventName } from "../../ga/type";
 import { bridge } from "./bridge";
 import { Bus, BusMsg } from "./bus";
+import { RotateType } from "./const";
 import { EngineData, TreeData } from "./data";
 import GameInfo from "./game-info.vue";
+import Refresh from "./refresh.vue";
 import { appStore } from "./store";
 import { Timer } from "./timer";
-import { HandExpandOptions } from "@xuyanfeng/cc-ui/types/cc-tree/const";
 const { CCTree, CCFootBar, CCDock, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 export default defineComponent({
   name: "hierarchy",
-  components: { CCButtonGroup, CCInput, CCTree, CCDock },
+  components: { Refresh, CCButtonGroup, CCInput, CCTree, CCDock },
   setup() {
     const funcShowPlace = (data: EngineData) => {
       console.log(data);
@@ -49,13 +51,13 @@ export default defineComponent({
     };
     const timer: Timer = new Timer();
     timer.onWork = () => {
-      freshAuto.value = true;
+      rotateType.value = RotateType.Loop;
       config.value.refreshHirarchy = true;
       appStore().save();
       updateTree();
     };
     timer.onClean = () => {
-      freshAuto.value = false;
+      rotateType.value = RotateType.None;
       config.value.refreshHirarchy = false;
       appStore().save();
     };
@@ -189,16 +191,15 @@ export default defineComponent({
       Bus.emit(BusMsg.SelectNode, uuid);
       bridge.send(Msg.SelectNode, uuid);
     }
-    const freshAuto = ref(config.value.refreshHirarchy);
+    const rotateType = ref<RotateType>(RotateType.None);
+    if (config.value.refreshHirarchy) {
+      rotateType.value = RotateType.Loop;
+    }
     return {
       onClickRefresh() {
-        freshAuto.value = true;
         updateTree();
-        setTimeout(() => {
-          freshAuto.value = false;
-        }, 1000);
       },
-      freshAuto,
+      rotateType,
       engineVersion,
       expandedKeys,
       elTree,
@@ -331,7 +332,6 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
-@import "./common.less";
 .left {
   display: flex;
   flex-direction: column;

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

@@ -2,7 +2,7 @@
   <div class="right">
     <CCDock name="Inspector">
       <template v-slot:title>
-        <i class="iconfont icon_refresh refresh" :class="{ 'refresh-rotate': freshAuto }" @click="onClickRefresh"></i>
+        <Refresh :type="rotateType" @click="onClickRefresh"></Refresh>
       </template>
       <div class="inspector" @contextmenu.prevent.stop="onMenu">
         <Properties v-if="treeItemData" :data="treeItemData"></Properties>
@@ -20,13 +20,15 @@ import { ga } from "../../ga";
 import { GA_EventName } from "../../ga/type";
 import { bridge } from "./bridge";
 import { Bus, BusMsg } from "./bus";
+import { RotateType } from "./const";
 import { NodeInfoData } from "./data";
+import Refresh from "./refresh.vue";
 import { appStore } from "./store";
 import { Timer } from "./timer";
 import Properties from "./ui/propertys.vue";
 const { CCDock } = ccui.components;
 export default defineComponent({
-  components: { Properties, CCDock },
+  components: { Properties, CCDock, Refresh },
   setup() {
     function updateNodeInfo() {
       if (selectedUUID) {
@@ -39,13 +41,13 @@ export default defineComponent({
     const { config } = storeToRefs(appStore());
     const timer = new Timer();
     timer.onWork = () => {
-      freshAuto.value = true;
+      rotateType.value = RotateType.Loop;
       config.value.refreshInspector = true;
       appStore().save();
       updateNodeInfo();
     };
     timer.onClean = () => {
-      freshAuto.value = false;
+      rotateType.value = RotateType.None;
       config.value.refreshInspector = false;
       appStore().save();
     };
@@ -104,16 +106,15 @@ export default defineComponent({
         ccui.footbar.showError(error, { title: "parse property error" });
       }
     });
-    const freshAuto = ref(config.value.refreshInspector);
+    const rotateType = ref<RotateType>(RotateType.None);
+    if (config.value.refreshInspector) {
+      rotateType.value = RotateType.Loop;
+    }
     return {
-      freshAuto,
+      rotateType,
       treeItemData,
       onClickRefresh() {
-        freshAuto.value = true;
         updateNodeInfo();
-        setTimeout(() => {
-          freshAuto.value = false;
-        }, 1000);
       },
       onMenu(evnet: MouseEvent) {
         const menus: IUiMenuItem[] = [];
@@ -150,7 +151,6 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
-@import "./common.less";
 .right {
   flex: 1;
   display: flex;

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="iconfont icon_refresh_one refresh" @animationend="onAnimationend" @click="onClick" :class="getClass()"></div>
+</template>
+<script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, ref, watch } from "vue";
+import { RotateType } from "./const";
+const { CCButton } = ccui.components;
+export default defineComponent({
+  name: "refresh",
+  components: { CCButton },
+  props: {
+    type: { type: String, default: RotateType.None },
+  },
+  setup(props, { emit }) {
+    const rotateType = ref(props.type);
+    watch(
+      () => props.type,
+      (v) => {
+        rotateType.value = v;
+      }
+    );
+    return {
+      onAnimationend() {
+        rotateType.value = RotateType.None;
+      },
+      onClick() {
+        if (rotateType.value === RotateType.Loop) {
+          return;
+        }
+        rotateType.value = RotateType.One;
+      },
+      getClass() {
+        if (rotateType.value === RotateType.Loop) {
+          return "refresh-rotate-loop";
+        }
+        if (rotateType.value === RotateType.One) {
+          return "refresh-rotate-one";
+        }
+        if (rotateType.value === RotateType.None) {
+          return "";
+        }
+        return "";
+      },
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+@time-loop: 1s;
+@time-one: 0.4s;
+
+.refresh {
+  margin: 0 3px;
+  cursor: pointer;
+  &:hover {
+    color: rgb(250, 207, 161);
+  }
+  &:active {
+    color: #ffaa00;
+  }
+}
+.refresh-rotate-loop {
+  animation: rotate @time-loop linear infinite reverse;
+}
+
+.refresh-rotate-one {
+  animation: rotate @time-one linear 1 reverse;
+}
+</style>