From 5e61c84f0b1988c3214a7263a61f45135ad24f5a Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Fri, 26 Jan 2024 01:08:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E8=88=AA=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=94=B6=E8=B5=B7=E6=97=B6=EF=BC=8C=E6=97=A0=E4=BA=8C=E7=BA=A7?=
 =?UTF-8?q?=E7=9A=84=E4=B8=80=E7=BA=A7=E5=AF=BC=E8=88=AA=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=20tooltip=20=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/Menu/item.vue | 60 +++++++++++++++---------------
 src/views/ui-kit/HTooltip.vue      |  5 ++-
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/views/components/Menu/item.vue b/src/views/components/Menu/item.vue
index 4a943611..61c50569 100644
--- a/src/views/components/Menu/item.vue
+++ b/src/views/components/Menu/item.vue
@@ -51,38 +51,40 @@ defineExpose({
       active: isItemActive,
     }"
   >
-    <div
-      class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
-        'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
-        'px-3!': rootMenu.isMenuPopup && level === 0,
-      }" :title="typeof item?.title === 'function' ? item?.title() : item?.title"
-    >
+    <HTooltip :enable="rootMenu.isMenuPopup && level === 0 && !subMenu" :text="typeof item?.title === 'function' ? item?.title() : item?.title" placement="right" class="w-full">
       <div
-        class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
-          'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
-          'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-          'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-          'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
-        }" :style="indentStyle"
+        class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
+          'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
+          'px-3!': rootMenu.isMenuPopup && level === 0,
+        }" :title="typeof item?.title === 'function' ? item?.title() : item?.title"
       >
-        <SvgIcon v-if="icon" :name="icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
-        <span
-          v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
-          :class="{
-            'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
-            'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-          }"
+        <div
+          class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
+            'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
+            'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+            'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
+          }" :style="indentStyle"
         >
-          {{ item?.title }}
-        </span>
+          <SvgIcon v-if="icon" :name="icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
+          <span
+            v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
+            :class="{
+              'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
+              'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            }"
+          >
+            {{ item?.title }}
+          </span>
+        </div>
+        <i
+          v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
+            expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
+            rootMenu.isMenuPopup && level === 0 && 'opacity-0',
+            rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
+          ]"
+        />
       </div>
-      <i
-        v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
-          expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
-          rootMenu.isMenuPopup && level === 0 && 'opacity-0',
-          rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
-        ]"
-      />
-    </div>
+    </HTooltip>
   </div>
 </template>
diff --git a/src/views/ui-kit/HTooltip.vue b/src/views/ui-kit/HTooltip.vue
index 9de5a63d..c3546fdb 100644
--- a/src/views/ui-kit/HTooltip.vue
+++ b/src/views/ui-kit/HTooltip.vue
@@ -2,15 +2,17 @@
 withDefaults(
   defineProps<{
     text: string
+    enable: boolean
   }>(),
   {
     text: '',
+    enable: true,
   },
 )
 </script>
 
 <template>
-  <VTooltip :popper-triggers="['hover']" v-bind="$attrs">
+  <VTooltip v-if="enable" :popper-triggers="['hover']" v-bind="$attrs">
     <slot />
     <template #popper>
       <slot name="text">
@@ -18,4 +20,5 @@ withDefaults(
       </slot>
     </template>
   </VTooltip>
+  <slot v-else />
 </template>