当菜单内容超长时(当前默认阈值8个字符),显示tooltip,暂时只修改了左侧菜单混合模式,其他未调整

cds-fontend-2025.V1/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue

@@ -12,6 +12,8 @@ import { $t } from '@/locales';
 import { useMenu, useMixMenuContext } from '../../../context';
 import FirstLevelMenu from '../components/first-level-menu.vue';
 import GlobalLogo from '../../global-logo/index.vue';
+import { h } from 'vue';
+import { NTooltip} from 'naive-ui';
 
 defineOptions({
   name: 'VerticalMixMenu'
@@ -67,6 +69,50 @@ function updateExpandedKeys() {
   expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
 }
 
+//菜单文本超长时显示 Tooltip
+const renderMenuLabel = (option: any) => {
+  if (option.children) {
+    return h('span', option.label);
+  }
+
+  const MAX_LENGTH = 8; // 菜单宽度超长阈值,超过8个字符显示Tooltip
+  const needsTooltip = option.label && option.label.length > MAX_LENGTH;
+
+  if (!needsTooltip) {
+    return h('span', {
+      style: {
+        display: 'inline-block',
+        maxWidth: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
+    }, option.label);
+  }
+
+  return h(
+    NTooltip,
+    {
+      placement: 'right',// 显示在菜单右侧,防止遮挡
+      trigger: 'hover',
+      style: { maxWidth: '300px' }
+    },
+    {
+      trigger: () => h('span', {
+        style: {
+          display: 'inline-block',
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          verticalAlign: 'bottom'
+        }
+      }, option.label),
+      default: () => option.label
+    }
+  );
+};
+
 watch(
   () => route.name,
   () => {
@@ -116,6 +162,7 @@ watch(
               :options="childLevelMenus"
               :inverted="inverted"
               :indent="18"
+              :render-label="renderMenuLabel"
               @update:value="routerPushByKeyWithMetaQuery"
             />
           </SimpleScrollbar>