From 17c5c6520837616ba844c5f66182d03cc34dc725 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 13 Jul 2024 21:09:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20tabs=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Tabs/index.vue | 68 ++++++++++++++++------------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 74817f0..c5cc665 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -17,35 +17,36 @@
       />
     </a-tabs>
     <div class="tabs_setting">
-      <a-dropdown trigger="hover" :popup-max-height="false">
-        <div class="setting"><icon-apps :size="18" /></div>
-        <template #content>
-          <a-doption @click="refresh">
-            <template #icon><icon-refresh /></template>
-            <template #default>{{ $t(`language.refresh`) }}</template>
-          </a-doption>
-          <a-doption @click="closeCurrent">
-            <template #icon><icon-close /></template>
-            <template #default>{{ $t(`language.close-current`) }}</template>
-          </a-doption>
-          <a-doption @click="closeSides('left')">
-            <template #icon><icon-left /></template>
-            <template #default>{{ $t(`language.close-left-side`) }}</template>
-          </a-doption>
-          <a-doption @click="closeSides('right')">
-            <template #icon><icon-right /></template>
-            <template #default>{{ $t(`language.close-right-side`) }}</template>
-          </a-doption>
-          <a-doption @click="closeOther('other')">
-            <template #icon><icon-close-circle /></template>
-            <template #default>{{ $t(`language.close-other`) }}</template>
-          </a-doption>
-          <a-doption @click="closeOther('all')">
-            <template #icon><icon-folder-delete /></template>
-            <template #default>{{ $t(`language.close-all`) }}</template>
-          </a-doption>
-        </template>
-      </a-dropdown>
+      <a-space>
+        <a-tooltip :content="$t(`language.refresh`)" position="bottom" mini>
+          <span ref="refreshRef" :class="rotateOpen && 'refresh'"><icon-refresh :size="18" @click="refresh" /></span>
+        </a-tooltip>
+        <a-dropdown trigger="hover" :popup-max-height="false">
+          <div class="setting"><icon-apps :size="18" /></div>
+          <template #content>
+            <a-doption @click="closeCurrent">
+              <template #icon><icon-close /></template>
+              <template #default>{{ $t(`language.close-current`) }}</template>
+            </a-doption>
+            <a-doption @click="closeSides('left')">
+              <template #icon><icon-left /></template>
+              <template #default>{{ $t(`language.close-left-side`) }}</template>
+            </a-doption>
+            <a-doption @click="closeSides('right')">
+              <template #icon><icon-right /></template>
+              <template #default>{{ $t(`language.close-right-side`) }}</template>
+            </a-doption>
+            <a-doption @click="closeOther('other')">
+              <template #icon><icon-close-circle /></template>
+              <template #default>{{ $t(`language.close-other`) }}</template>
+            </a-doption>
+            <a-doption @click="closeOther('all')">
+              <template #icon><icon-folder-delete /></template>
+              <template #default>{{ $t(`language.close-all`) }}</template>
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </a-space>
     </div>
   </div>
 </template>
@@ -78,7 +79,12 @@ const onDelete = (key: string) => {
 };
 
 // 刷新当前页
+const rotateOpen = ref(false);
 const refresh = () => {
+  rotateOpen.value = true;
+  setTimeout(() => {
+    rotateOpen.value = false;
+  }, 500);
   const themeStore = useThemeConfig();
   themeStore.setRefreshPage(false);
   currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name);
@@ -154,6 +160,10 @@ const closeOther = (type: string) => {
       margin-right: $margin;
       color: $color-text-2;
     }
+    .refresh {
+      transition: transform 0.5s;
+      transform: rotate(360deg);
+    }
   }
 }
 :deep(.arco-tabs-nav-tab) {