remove all semicolons

RuoYi

2025-04-27 2f8a257efd2b64dc40666b0d332edb7824a9768d

 src/components/TopNav/index.vue

@@ -3,12 +3,15 @@
    :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" />

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

      >

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

        <svg-icon

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

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

        {{ item.meta.title }}

      </el-menu-item>

    </template>



    <!-- 顶部菜单超出数量折叠 -->

@@ -18,10 +21,12 @@
        <el-menu-item

          :index="item.path"

          :key="index"

          v-if="index >= visibleNumber"

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

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

        >

          v-if="index >= visibleNumber">

        <svg-icon

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

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

        {{ item.meta.title }}

        </el-menu-item>

      </template>

    </el-sub-menu>

  </el-menu>

@@ -30,123 +35,132 @@
<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);

// 是否为首次加载

const isFrist = ref(null);

const visibleNumber = ref(null)

// 当前激活菜单的 index

const currentIndex = ref(null);

const currentIndex = ref(null)

// 隐藏侧边栏路由

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



const store = useStore();

const route = useRoute();

const router = useRouter();

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(() => {

  let topMenus = [];

  let topMenus = []

  routers.value.map((menu) => {

    if (menu.hidden !== true) {

      // 兼容顶部栏一级菜单内部跳转

      if (menu.path === "/") {

          topMenus.push(menu.children[0]);

      if (menu.path === '/' && menu.children) {

          topMenus.push(menu.children[0])

      } else {

          topMenus.push(menu);

          topMenus.push(menu)

      }

    }

  })

  return topMenus;

  return topMenus

})



// 设置子路由

const childrenMenus = computed(() => {

  let childrenMenus = [];

  let childrenMenus = []

  routers.value.map((router) => {

    for (let item in router.children) {

      if (router.children[item].parentPath === undefined) {

        if(router.path === "/") {

          router.children[item].path = "/" + router.children[item].path;

          router.children[item].path = "/" + router.children[item].path

        } else {

          if(!isHttp(router.children[item].path)) {

            router.children[item].path = router.path + "/" + router.children[item].path;

            router.children[item].path = router.path + "/" + router.children[item].path

          }

        }

        router.children[item].parentPath = router.path;

        router.children[item].parentPath = router.path

      }

      childrenMenus.push(router.children[item]);

      childrenMenus.push(router.children[item])

    }

  })

  return constantRoutes.concat(childrenMenus);

  return constantRoutes.concat(childrenMenus)

})



// 默认激活的菜单

const activeMenu = computed(() => {

  const path = route.path;

  let activePath = path;

  if (path !== undefined && path.lastIndexOf("/") > 0) {

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

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

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

  } else if ("/index" == path || "" == path) {

    if (!isFrist.value) {

      isFrist.value = true;

    } else {

      activePath = "index";

  const path = route.path

  let activePath = path

  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {

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

    if (!route.meta.link) {

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

      appStore.toggleSideBarHide(false)

    }

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

  } else if(!route.children) {

    activePath = path;

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

    activePath = path

    appStore.toggleSideBarHide(true)

  }

  activeRoutes(activePath);

  return activePath;

  activeRoutes(activePath)

  return activePath

})



function setVisibleNumber() {

  const width = document.body.getBoundingClientRect().width / 3;

  visibleNumber.value = parseInt(width / 85);

  const width = document.body.getBoundingClientRect().width / 3

  visibleNumber.value = parseInt(width / 85)

}



function handleSelect(key, keyPath) {

  currentIndex.value = key;

  const route = routers.value.find(item => item.path === key);

  currentIndex.value = key

  const route = routers.value.find(item => item.path === key)

  if (isHttp(key)) {

    // http(s):// 路径新窗口打开

    window.open(key, "_blank");

    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);

    activeRoutes(key)

    appStore.toggleSideBarHide(false)

  }

}



function activeRoutes(key) {

  let routes = [];

  let routes = []

  if (childrenMenus.value && childrenMenus.value.length > 0) {

    childrenMenus.value.map((item) => {

      if (key == item.parentPath || (key == "index" && "" == item.path)) {

        routes.push(item);

        routes.push(item)

      }

    });

    })

  }

  if(routes.length > 0) {

    store.commit("SET_SIDEBAR_ROUTERS", routes);

    permissionStore.setSidebarRouters(routes)

  } else {

    appStore.toggleSideBarHide(true)

  }

  return routes;

  return routes

}



onMounted(() => {

  window.addEventListener('resize', setVisibleNumber)

})



onBeforeUnmount(() => {

  window.removeEventListener('resize', setVisibleNumber)

})

@@ -172,7 +186,7 @@
}



/* sub-menu item */

.topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {

.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {

  float: left;

  height: 50px !important;

  line-height: 50px !important;

@@ -180,4 +194,24 @@
  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;

}



/* 图标右间距 */

.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>