如何优雅解决若依二级菜单名字过长问题：若依（RuoYi）菜单字体大小，菜单长度修改攻略

$base-sidebar-width: 220px;

   <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
          <el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right-start">

            <span v-if="onlyOneChild.meta">

              <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />

            </span>

          </el-tooltip>

        </el-menu-item>
      </app-link>

<el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right-start">
  <span v-if="onlyOneChild.meta">
    <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)":title="onlyOneChild.meta.title" />
  </span>
</el-tooltip>

    .el-menu-item, .el-submenu__title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: 24px; // 修改左侧菜单字体大小，根据实际需求调整
    }

<template>
  <div class="container">
    <div :class="{ 'has-logo': showLogo }"
      :style="{ width: menuWidth, backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
      <logo v-if="showLogo" :collapse="isCollapse" />
      <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <el-menu :default-active="activeMenu" :collapse="isCollapse"
          :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
          :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :unique-opened="true"
          :active-text-color="theme" :collapse-transition="false" mode="vertical">
          <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
            :base-path="route.path" />
        </el-menu>
      </el-scrollbar>


    </div>
    <div class="drag-bar" @mousedown="startResize"></div>

  </div>
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'

const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
  const { meta, path } = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})



// 增加拖拽相关的响应式数据
const resizing = ref(false);
const menuWidth = ref('200px'); // 初始菜单宽度

// 开始调整大小
// 开始调整大小
function startResize(event) {
  resizing.value = true;
  console.log("开始调整大小"); // 用于调试
  resizing.value = true; // 设置正在调整大小的标志
  event.preventDefault(); // 防止默认事件干扰
  const startX = event.clientX;
  const startWidth = parseInt(menuWidth.value, 10);
  

  function handleMouseMove(e) {
    e.preventDefault();
    console.log("正在调整大小"); // 用于调试
    if (!resizing.value) return; // 确保在拖拽状态时才调整大小
    const currentWidth = startWidth + e.clientX - startX;
    menuWidth.value = `${currentWidth}px`;
  }

  function handleMouseUp() {
    resizing.value = false;
    console.log("调整大小结束"); // 用于调试
    // 移除监听器
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
  }

  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
}


// 监听 mousemove 和 mouseup 事件

</script>
<style scoped>
.drag-bar {
  width: 15px;
  /* 可以适当增加宽度，确保容易拖拽 */
  height: 100%;
  /* 确保高度足够 */
  cursor: ew-resize;
  position: absolute;
  /* 可能需要绝对定位来正确放置 */
  right: 0;
  /* 根据实际布局调整 */
  top: 0;
  /* 根据实际布局调整 */
}

.container {
  display: flex;
  position: relative;
  /* 为了绝对定位拖拽条 */
}
</style>