chore: 样式微调

Author: hooray

src/views/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 {

src/views/components/MainSidebar/index.vue

@@ -18,7 +18,7 @@ const { switchTo } = useMenu()
     <div v-if="['side'].includes(settingsStore.settings.menu.menuMode)" 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="{

src/views/components/Menu/index.vue

@@ -169,11 +169,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, index) in menu" :key="index">

src/views/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>(),
   {

src/views/components/Menu/sub.vue

@@ -142,6 +142,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`
       })