2024-02-06 fix: 修复Menu组件缩略菜单弹窗内样式不统一问题

(cherry picked from commit ff0566bb7f)

src/layout/components/Menu/src/components/useRenderMenuItem.tsx

@@ -1,47 +1,39 @@
 import { ElSubMenu, ElMenuItem } from 'element-plus'
-import type { RouteMeta } from 'vue-router'
 import { hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
-import { useDesign } from '@/hooks/web/useDesign'
 import { pathResolve } from '@/utils/routerHelper'
 
-export const useRenderMenuItem = (
+const { renderMenuTitle } = useRenderMenuTitle()
+
+export const useRenderMenuItem = () =>
   // allRouters: AppRouteRecordRaw[] = [],
-  menuMode: 'vertical' | 'horizontal'
+  {
-) => {
     const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-    return routers.map((v) => {
+      return routers
-      const meta = (v.meta ?? {}) as RouteMeta
+        .filter((v) => !v.meta?.hidden)
-      if (!meta.hidden) {
+        .map((v) => {
+          const meta = v.meta ?? {}
           const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
           const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
 
-        const { renderMenuTitle } = useRenderMenuTitle()
-
           if (
             oneShowingChild &&
             (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
             !meta?.alwaysShow
           ) {
             return (
-            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
+              <ElMenuItem
+                index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
+              >
                 {{
                   default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
                 }}
               </ElMenuItem>
             )
           } else {
-          const { getPrefixCls } = useDesign()
-
-          const preFixCls = getPrefixCls('menu-popper')
             return (
-            <ElSubMenu
+              <ElSubMenu index={fullPath}>
-              index={fullPath}
-              popperClass={
-                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
-              }
-            >
                 {{
                   title: () => renderMenuTitle(meta),
                   default: () => renderMenuItem(v.children!, fullPath)
@@ -49,11 +41,10 @@ export const useRenderMenuItem = (
               </ElSubMenu>
             )
           }
-      }
         })
     }
 
     return {
       renderMenuItem
     }
-}
+  }

src/layout/components/Menu/src/components/useRenderMenuTitle.tsx

@@ -1,5 +1,6 @@
 import type { RouteMeta } from 'vue-router'
 import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
 
 export const useRenderMenuTitle = () => {
   const renderMenuTitle = (meta: RouteMeta) => {
@@ -9,10 +10,14 @@ export const useRenderMenuTitle = () => {
     return icon ? (
       <>
         <Icon icon={meta.icon}></Icon>
-        <span class="v-menu__title">{t(title as string)}</span>
+        <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {t(title as string)}
+        </span>
       </>
     ) : (
-      <span class="v-menu__title">{t(title as string)}</span>
+      <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {t(title as string)}
+      </span>
     )
   }