From 4642ee62a353f0a390ef8023258a76b4ac3cd9f0 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Wed, 17 Nov 2021 14:00:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20hoverContainer=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B1=9E=E6=80=A7=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/HoverContainer/index.vue           | 23 +++++++++++--------
 .../GlobalHeader/components/FullScreen.vue    |  2 +-
 .../GlobalHeader/components/GihubSite.vue     |  2 +-
 .../GlobalHeader/components/MenuCollapse.vue  |  2 +-
 .../components/SettingDrawerButton.vue        |  2 +-
 .../GlobalHeader/components/ThemeMode.vue     |  8 +++----
 .../GlobalHeader/components/UserAvatar.vue    |  2 +-
 .../components/ReloadButton/index.vue         |  2 +-
 8 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/common/HoverContainer/index.vue b/src/components/common/HoverContainer/index.vue
index 3a8b5e41..d4c44664 100644
--- a/src/components/common/HoverContainer/index.vue
+++ b/src/components/common/HoverContainer/index.vue
@@ -2,34 +2,37 @@
   <div v-if="showTooltip">
     <n-tooltip :placement="placement" trigger="hover">
       <template #trigger>
-        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
           <slot></slot>
         </div>
       </template>
-      {{ content }}
+      {{ tooltipContent }}
     </n-tooltip>
   </div>
-  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { NTooltip } from 'naive-ui';
 import type { FollowerPlacement } from 'vueuc';
 
 interface Props {
-  /** 是否显示tooltip */
-  showTooltip?: boolean;
+  /** tooltip显示文本 */
+  tooltipContent?: string;
   /** tooltip的位置 */
   placement?: FollowerPlacement;
-  /** tooltip显示文本 */
-  content?: string;
+  /** class类 */
+  contentClass?: string;
 }
-withDefaults(defineProps<Props>(), {
-  showTooltip: true,
+const props = withDefaults(defineProps<Props>(), {
+  tooltipContent: '',
   placement: 'bottom',
-  content: ''
+  contentClass: ''
 });
+
+const showTooltip = computed(() => Boolean(props.tooltipContent));
 </script>
 <style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
index c35aa735..18b85410 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" content="全屏" @click="toggle">
+  <hover-container class="w-40px h-full" tooltip-content="全屏" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
     <icon-gridicons-fullscreen v-else class="text-16px" />
   </hover-container>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
index 0964be09..e0992af9 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container content="github" class="w-40px h-full">
+  <hover-container tooltip-content="github" class="w-40px h-full">
     <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
       <icon-mdi-github class="text-20px text-[#666]" />
     </a>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
index 8c182dbc..9d982606 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" :show-tooltip="false" @click="toggleMenu">
+  <hover-container class="w-40px h-full" @click="toggleMenu">
     <icon-line-md-menu-unfold-left v-if="app.menu.collapsed" class="text-16px" />
     <icon-line-md-menu-fold-left v-else class="text-16px" />
   </hover-container>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
index d65c237e..cd5e7e88 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" placement="bottom-end" content="项目配置" @click="openSettingDrawer">
+  <hover-container class="w-40px h-full" tooltip-content="项目配置" placement="bottom-end" @click="openSettingDrawer">
     <icon-mdi-light-cog class="text-16px" />
   </hover-container>
 </template>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue
index b1aea287..ea6b1ff1 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue
@@ -1,9 +1,7 @@
 <template>
-  <hover-container class="px-12px" :show-tooltip="false">
-    <div class="hover:text-primary" @click="toggleDarkMode">
-      <icon-mdi-moon-waning-crescent v-if="theme.darkMode" class="text-14px" />
-      <icon-mdi-white-balance-sunny v-else class="text-14px" />
-    </div>
+  <hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式" @click="toggleDarkMode">
+    <icon-mdi-moon-waning-crescent v-if="theme.darkMode" class="text-14px" />
+    <icon-mdi-white-balance-sunny v-else class="text-14px" />
   </hover-container>
 </template>
 
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
index 25cfb8b1..9ad56125 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
-    <hover-container class="px-12px" :show-tooltip="false">
+    <hover-container class="px-12px">
       <img :src="avatar" class="w-32px h-32px" />
       <span class="pl-8px text-16px font-medium">Soybean</span>
     </hover-container>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
index a52a71f3..2c3bad69 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-64px h-full" placement="bottom-end" content="重新加载" @click="handleRefresh">
+  <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
     <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
   </hover-container>
 </template>