样式修改

zhangwencui

4 小时以前 e38c0656952f70552170fc4ee72420b0c741919e

 src/components/TopNav/index.vue

@@ -1,217 +1,216 @@
<template>

  <el-menu

    :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

        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 :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">

      <template #title>更多菜单</template>

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

        <el-menu-item

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

    </el-sub-menu>

  </el-menu>

</template>



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

// 当前激活菜单的 index

const currentIndex = ref(null)

// 隐藏侧边栏路由

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



const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()

const route = useRoute()

const router = useRouter()



// 主题颜色

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

// 所有的路由信息

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



// 顶部显示菜单

const topMenus = computed(() => {

  let topMenus = []

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

    if (menu.hidden !== true) {

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

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

          topMenus.push(menu.children[0])

      } else {

          topMenus.push(menu)

      }

    }

  })

  return topMenus

})



// 设置子路由

const childrenMenus = computed(() => {

  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

        } else {

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

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

          }

        }

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

      }

      childrenMenus.push(router.children[item])

    }

  })

  return constantRoutes.concat(childrenMenus)

})



// 默认激活的菜单

const activeMenu = computed(() => {

  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)

    }

  } else if(!route.children) {

    activePath = path

    appStore.toggleSideBarHide(true)

  }

  activeRoutes(activePath)

  return activePath

})



function setVisibleNumber() {

  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)

  if (isHttp(key)) {

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

    window.open(key, "_blank")

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

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

    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)

    appStore.toggleSideBarHide(false)

  }

}



function activeRoutes(key) {

  let routes = []

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

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

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

        routes.push(item)

      }

    })

  }

  if(routes.length > 0) {

    permissionStore.setSidebarRouters(routes)

  } else {

    appStore.toggleSideBarHide(true)

  }

  return routes

}



onMounted(() => {

  window.addEventListener('resize', setVisibleNumber)

})



onBeforeUnmount(() => {

  window.removeEventListener('resize', setVisibleNumber)

})



onMounted(() => {

  setVisibleNumber()

})

</script>



<style lang="scss">

.topmenu-container.el-menu--horizontal > .el-menu-item {

  float: left;

  height: 50px !important;

  line-height: 50px !important;

  color: #999093 !important;

  padding: 0 5px !important;

  margin: 0 10px !important;

}



.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {

  border-bottom: 2px solid #{'var(--theme)'} !important;

  color: #303133;

}



/* sub-menu item */

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

  float: left;

  height: 50px !important;

  line-height: 50px !important;

  color: #999093 !important;

  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>

<template>
  <div class="top-nav">
    <button v-show="showArrows"
            class="nav-arrow nav-arrow--left"
            type="button"
            :disabled="!canScrollLeft"
            @click="scrollLeft">
      <el-icon :size="18">
        <ArrowLeft />
      </el-icon>
    </button>
    <div ref="scrollWrapRef"
         class="top-nav__scroll"
         @scroll.passive="updateScrollState">
      <el-menu class="top-nav-menu"
               :default-active="activeMenu"
               mode="horizontal"
               :unique-opened="true"
               :ellipsis="false"
               :active-text-color="theme">
        <sidebar-item v-for="(routeItem, index) in topbarRouters"
                      :key="routeItem.path + index"
                      :item="routeItem"
                  :base-path="routeItem.path" />
      </el-menu>
    </div>
    <button v-show="showArrows"
            class="nav-arrow nav-arrow--right"
            type="button"
            :disabled="!canScrollRight"
            @click="scrollRight">
      <el-icon :size="18">
        <ArrowRight />
      </el-icon>
    </button>
  </div>
</template>

<script setup>
  import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
  import useSettingsStore from "@/store/modules/settings";
  import usePermissionStore from "@/store/modules/permission";
  import SidebarItem from "@/layout/components/Sidebar/SidebarItem.vue";

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

  // 主题颜色
  const theme = computed(() => settingsStore.theme);
  const topbarRouters = computed(() => permissionStore.topbarRouters);
  const scrollWrapRef = ref(null);
  const canScrollLeft = ref(false);
  const canScrollRight = ref(false);
  const showArrows = computed(() => canScrollLeft.value || canScrollRight.value);

  // 默认激活的菜单
  const activeMenu = computed(() => {
    const { meta, path } = route;
    if (meta?.activeMenu) return meta.activeMenu;
    return path;
  });

  function updateScrollState() {
    const el = scrollWrapRef.value;
    if (!el) return;
    const maxScrollLeft = el.scrollWidth - el.clientWidth;
    canScrollLeft.value = el.scrollLeft > 0;
    canScrollRight.value = el.scrollLeft < maxScrollLeft - 1;
  }

  function scrollByStep(direction) {
    const el = scrollWrapRef.value;
    if (!el) return;
    const step = Math.max(240, Math.floor(el.clientWidth * 0.6));
    el.scrollBy({ left: direction * step, behavior: "smooth" });
    requestAnimationFrame(() => updateScrollState());
  }

  function scrollLeft() {
    scrollByStep(-1);
  }

  function scrollRight() {
    scrollByStep(1);
  }

  let resizeRaf = 0;
  function handleResize() {
    if (resizeRaf) cancelAnimationFrame(resizeRaf);
    resizeRaf = requestAnimationFrame(() => {
      updateScrollState();
    });
  }

  onMounted(() => {
    updateScrollState();
    window.addEventListener("resize", handleResize, { passive: true });
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
    if (resizeRaf) cancelAnimationFrame(resizeRaf);
  });
</script>

<style lang="scss" scoped>
  .top-nav {
    position: relative;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .top-nav__scroll {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .nav-arrow {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--surface-base);
    color: var(--text-secondary);
    cursor: pointer;
    transition: 0.2s ease;
    margin: 0 8px;

    &:hover:not(:disabled) {
      color: var(--el-color-primary);
      border-color: rgba(var(--el-color-primary-rgb), 0.35);
      background: rgba(var(--el-color-primary-rgb), 0.06);
    }

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }

  .top-nav-menu {
    width: max-content;
    min-width: 100%;
    height: 100%;
    border-bottom: none;
    background: transparent;
  }

  :deep(.top-nav-menu.el-menu--horizontal) {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    height: 100%;
    width: max-content;
    min-width: 100%;
  }

  :deep(.top-nav-menu.el-menu--horizontal > .el-menu-item),
  :deep(.top-nav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title) {
    height: var(--topbar-height);
    line-height: var(--topbar-height);
    padding: 0 12px;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  :deep(
      .top-nav-menu.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover
    ),
  :deep(
      .top-nav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title:hover
    ) {
    background: rgba(var(--el-color-primary-rgb), 0.06);
    color: var(--el-color-primary);
  }

  :deep(.top-nav-menu.el-menu--horizontal > .el-menu-item.is-active),
  :deep(
      .top-nav-menu.el-menu--horizontal
        > .el-sub-menu.is-active
        > .el-sub-menu__title
    ) {
    background: rgba(var(--el-color-primary-rgb), 0.06);
    color: var(--el-color-primary);
    font-weight: 600;
    border-bottom-color: var(--el-color-primary);
  }

  :deep(.top-nav-menu.el-menu--horizontal > .el-menu-item .svg-icon),
  :deep(
      .top-nav-menu.el-menu--horizontal
        > .el-sub-menu
        > .el-sub-menu__title
        .svg-icon
    ) {
    margin-right: 8px;
  }
</style>