样式修改

zhangwencui

2026-06-18 9f5e18cc415cd3fef13f105ffeabae3c01ba9665

 src/layout/components/Sidebar/SidebarItem.vue

@@ -1,17 +1,19 @@
<template>

  <div v-if="!item.hidden">

  <div v-if="!item.hidden" class="sidebar-item-wrapper">

    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">

      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">

        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>

          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" class="menu-icon"/>

          <template #title>

            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>

          </template>

        </el-menu-item>

      </app-link>

    </template>



    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>

      <template v-if="item.meta" #title>

        <svg-icon :icon-class="item.meta && item.meta.icon" />

        <svg-icon :icon-class="item.meta && item.meta.icon" class="menu-icon" />

        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>

      </template>



@@ -83,6 +85,13 @@
  if (isExternal(props.basePath)) {

    return props.basePath

  }

  if (String(routePath || '').startsWith('/')) {
    if (routeQuery) {
      let query = JSON.parse(routeQuery)
      return { path: getNormalPath(routePath), query: query }
    }
    return getNormalPath(routePath)
  }
  if (routeQuery) {

    let query = JSON.parse(routeQuery)

    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }

@@ -98,3 +107,41 @@
  }

}

</script>



<style lang="scss" scoped>
.sidebar-item-wrapper {
  :deep(.menu-icon) {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: inherit;
  }
  
  :deep(.menu-title) {
    font-weight: 500;
    transition: color 0.2s ease;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  
  :deep(.nest-menu) {
    .menu-icon {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
    
    .menu-title { 
      font-size: 13px;
    }
  }
}
</style>