From 4df17f4bf323b0e9c2987179c870788b1c1a3015 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Wed, 12 Jun 2024 14:10:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Header/index.vue      | 6 +++++-
 src/layouts/components/MainSidebar/index.vue | 2 +-
 src/layouts/components/Menu/index.vue        | 7 ++-----
 src/layouts/components/Menu/item.vue         | 4 ++++
 src/layouts/components/Menu/sub.vue          | 3 +++
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 7274f021..2bda9898 100755
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -32,7 +32,7 @@ function handlerMouserScroll(event: WheelEvent) {
         <Logo class="title" />
         <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
           <!-- 顶部模式 -->
-          <div class="menu flex of-hidden transition-all">
+          <div class="menu h-full flex of-hidden transition-all">
             <template v-for="(item, index) in menuStore.allMenus" :key="index">
               <div
                 class="menu-item relative transition-all" :class="{
@@ -135,6 +135,10 @@ header {
               color: var(--g-header-menu-hover-color);
               background-color: var(--g-header-menu-hover-bg);
             }
+
+            .menu-item-container-icon {
+              font-size: 24px !important;
+            }
           }
 
           &.active .menu-item-container {
diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue
index 4303c724..90c6c9b1 100755
--- a/src/layouts/components/MainSidebar/index.vue
+++ b/src/layouts/components/MainSidebar/index.vue
@@ -18,7 +18,7 @@ const { switchTo } = useMenu()
     <div v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
       <!-- 侧边栏模式（含主导航） -->
-      <div class="menu flex flex-col of-hidden transition-all">
+      <div class="menu w-full flex flex-col of-hidden transition-all">
         <template v-for="(item, index) in menuStore.allMenus" :key="index">
           <div
             class="menu-item relative transition-all" :class="{
diff --git a/src/layouts/components/Menu/index.vue b/src/layouts/components/Menu/index.vue
index 1d01876f..bfd77284 100644
--- a/src/layouts/components/Menu/index.vue
+++ b/src/layouts/components/Menu/index.vue
@@ -162,11 +162,8 @@ provide(rootMenuInjectionKey, reactive({
 
 <template>
   <div
-    class="flex flex-col of-hidden transition-all" :class="{
-      'w-[200px]': !isMenuPopup && props.mode === 'vertical',
-      'w-[64px]': isMenuPopup && props.mode === 'vertical',
-      'h-[80px]': props.mode === 'horizontal',
-      'flex-row! w-auto': isMenuPopup && props.mode === 'horizontal',
+    class="h-full w-full flex flex-col of-hidden transition-all" :class="{
+      'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
     }"
   >
     <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
diff --git a/src/layouts/components/Menu/item.vue b/src/layouts/components/Menu/item.vue
index e21e07a1..586015c7 100644
--- a/src/layouts/components/Menu/item.vue
+++ b/src/layouts/components/Menu/item.vue
@@ -2,6 +2,10 @@
 import type { SubMenuItemProps } from './types'
 import { rootMenuInjectionKey } from './types'
 
+defineOptions({
+  name: 'SubMenuItem',
+})
+
 const props = withDefaults(
   defineProps<SubMenuItemProps>(),
   {
diff --git a/src/layouts/components/Menu/sub.vue b/src/layouts/components/Menu/sub.vue
index d03effd9..0bf28e84 100644
--- a/src/layouts/components/Menu/sub.vue
+++ b/src/layouts/components/Menu/sub.vue
@@ -147,6 +147,9 @@ function handleMouseenter() {
             subMenuRef.value!.getElement()!.style.height = `${window.innerHeight - top}px`
           }
         }
+        if (left + subMenuRef.value!.getElement()!.offsetWidth > document.documentElement.clientWidth) {
+          left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
+        }
         subMenuRef.value!.getElement()!.style.top = `${top}px`
         subMenuRef.value!.getElement()!.style.left = `${left}px`
       })