修复自定义字典样式不生效的问题(I81F03)

RuoYi

2023-09-14 1b45f0a1cd3461c827e4018026d2cfd05c1b62bd

 src/components/TopNav/index.vue

@@ -3,10 +3,14 @@
    :default-active="activeMenu"

    mode="horizontal"

    @select="handleSelect"

    :ellipsis="false"

  >

    <template v-for="(item, index) in topMenus">

      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"

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

        ><svg-icon

          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"

          :icon-class="item.meta.icon"

        />

        {{ item.meta.title }}</el-menu-item

      >

    </template>

@@ -30,6 +34,9 @@
<script setup>

import { constantRoutes } from "@/router"

import { isHttp } from '@/utils/validate'

import useAppStore from '@/store/modules/app'

import useSettingsStore from '@/store/modules/settings'

import usePermissionStore from '@/store/modules/permission'



// 顶部栏初始数

const visibleNumber = ref(null);

@@ -38,14 +45,16 @@
// 隐藏侧边栏路由

const hideList = ['/index', '/user/profile'];



const store = useStore();

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()

const route = useRoute();

const router = useRouter();



// 主题颜色

const theme = computed(() => store.state.settings.theme);

const theme = computed(() => settingsStore.theme);

// 所有的路由信息

const routers = computed(() => store.state.permission.topbarRouters);

const routers = computed(() => permissionStore.topbarRouters);



// 顶部显示菜单

const topMenus = computed(() => {

@@ -91,10 +100,12 @@
  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {

    const tmpPath = path.substring(1, path.length);

    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));

    store.dispatch('app/toggleSideBarHide', false);

    if (!route.meta.link) {

        appStore.toggleSideBarHide(false);

    }

  } else if(!route.children) {

    activePath = path;

    store.dispatch('app/toggleSideBarHide', true);

    appStore.toggleSideBarHide(true);

  }

  activeRoutes(activePath);

  return activePath;

@@ -113,12 +124,18 @@
    window.open(key, "_blank");

  } else if (!route || !route.children) {

    // 没有子路由路径内部打开

    router.push({ path: key });

    store.dispatch('app/toggleSideBarHide', true);

    const routeMenu = childrenMenus.value.find(item => item.path === key);

    if (routeMenu && routeMenu.query) {

      let query = JSON.parse(routeMenu.query);

      router.push({ path: key, query: query });

    } else {

      router.push({ path: key });

    }

    appStore.toggleSideBarHide(true);

  } else {

    // 显示左侧联动菜单

    activeRoutes(key);

    store.dispatch('app/toggleSideBarHide', false);

    appStore.toggleSideBarHide(false);

  }

}



@@ -132,7 +149,9 @@
    });

  }

  if(routes.length > 0) {

    store.commit("SET_SIDEBAR_ROUTERS", routes);

    permissionStore.setSidebarRouters(routes);

  } else {

    appStore.toggleSideBarHide(true);

  }

  return routes;

}

@@ -173,4 +192,22 @@
  padding: 0 5px !important;

  margin: 0 10px !important;

}



/* 背景色隐藏 */

.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {

    background-color: #ffffff !important;

}



/* 图标右间距 */

.topmenu-container .svg-icon {

  margin-right: 4px;

}



/* topmenu more arrow */

.topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {

  position: static;

  vertical-align: middle;

  margin-left: 8px;

  margin-top: 0px;

}

</style>