feat: 顶部刷新按钮动画

src/views/main-frame/MainFrame.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { invokeAllRefreshCallback } from '@/composables/useRefresh'
 
 const route = useRoute()
 
+const refreshing = ref(false)
+
 const handleRefresh = () => {
+  if (refreshing.value)
+    return
+
   invokeAllRefreshCallback()
+  refreshing.value = true
+  setTimeout(() => {
+    refreshing.value = false
+  }, 1000);
 }
 </script>
 
@@ -14,7 +24,7 @@ const handleRefresh = () => {
     <header class="header">
       <img src="@/assets/logo.png" class="logo" alt="logo" />
       <span class="refresh" title="刷新" @click="handleRefresh">
-        <iconfont class="icon dsk-undo" />
+        <iconfont class="icon dsk-undo" :class="{ refreshing }" />
       </span>
       <ul class="breadcrumb">
         <li class="item">首页</li>

src/views/main-frame/style.scss

@@ -1,3 +1,13 @@
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .main-frame-page {
   @apply relative w-full h-full;
   min-width: $small-screen;
@@ -22,10 +32,16 @@
       width: 64px;
       height: 64px;
       margin-left: 20px;
-      transition: all .2s ease-in-out;
+      transition: all 0.2s ease-in-out;
 
       &:hover {
-        background: rgba(255, 255, 255, .07);
+        background: rgba(255, 255, 255, 0.07);
+      }
+
+      .icon {
+        &.refreshing {
+          animation: rotate 1s ease 0s;
+        }
       }
     }
 
@@ -33,12 +49,12 @@
       @apply flex flex-1;
       margin-left: 10px;
       font-size: 15px;
-      color: rgba(255, 255, 255, .7);
+      color: rgba(255, 255, 255, 0.7);
 
       .item {
         &::after {
           @apply inline-block;
-          content: '/';
+          content: "/";
           margin: 0 8px;
         }
 
@@ -52,15 +68,19 @@
       }
     }
 
-    .data-big-screen, .fullscreen, .message, .help, .avatar {
+    .data-big-screen,
+    .fullscreen,
+    .message,
+    .help,
+    .avatar {
       @apply inline-flex justify-center items-center cursor-pointer;
       width: 42px;
       height: 64px;
-      transition: all .2s ease-in-out;
+      transition: all 0.2s ease-in-out;
       margin: 0 3px;
 
       &:hover {
-        background: rgba(255, 255, 255, .07);
+        background: rgba(255, 255, 255, 0.07);
       }
     }
 
@@ -81,7 +101,7 @@
         @apply flex justify-center items-center relative cursor-pointer;
         height: 50px;
         color: #515a6e;
-        transition: all .2s ease-in-out;
+        transition: all 0.2s ease-in-out;
 
         &:hover {
           color: #2d8cf0;