From 8a1c08baaf0ee002b471996b195e7da180b90209 Mon Sep 17 00:00:00 2001
From: feige <791364011@qq.com>
Date: 星期一, 21 七月 2025 09:38:47 +0800
Subject: [PATCH] 增加了前端代码库
---
src/components/TopNav/index.vue | 193 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 193 insertions(+), 0 deletions(-)
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
new file mode 100644
index 0000000..b3f3331
--- /dev/null
+++ b/src/components/TopNav/index.vue
@@ -0,0 +1,193 @@
+<template>
+ <el-menu
+ :default-active="activeMenu"
+ mode="horizontal"
+ @select="handleSelect"
+ >
+ <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-submenu :style="{'--theme': theme}" index="more" :key="visibleNumber" v-if="topMenus.length > visibleNumber">
+ <template slot="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-submenu>
+ </el-menu>
+</template>
+
+<script>
+import { constantRoutes } from "@/router"
+import { isHttp } from "@/utils/validate"
+
+// 闅愯棌渚ц竟鏍忚矾鐢�
+const hideList = ['/index', '/user/profile']
+
+export default {
+ data() {
+ return {
+ // 椤堕儴鏍忓垵濮嬫暟
+ visibleNumber: 5,
+ // 褰撳墠婵�娲昏彍鍗曠殑 index
+ currentIndex: undefined
+ }
+ },
+ computed: {
+ theme() {
+ return this.$store.state.settings.theme
+ },
+ // 椤堕儴鏄剧ず鑿滃崟
+ topMenus() {
+ let topMenus = []
+ this.routers.map((menu) => {
+ if (menu.hidden !== true) {
+ // 鍏煎椤堕儴鏍忎竴绾ц彍鍗曞唴閮ㄨ烦杞�
+ if (menu.path === '/' && menu.children) {
+ topMenus.push(menu.children[0])
+ } else {
+ topMenus.push(menu)
+ }
+ }
+ })
+ return topMenus
+ },
+ // 鎵�鏈夌殑璺敱淇℃伅
+ routers() {
+ return this.$store.state.permission.topbarRouters
+ },
+ // 璁剧疆瀛愯矾鐢�
+ childrenMenus() {
+ var childrenMenus = []
+ this.routers.map((router) => {
+ for (var 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)
+ },
+ // 榛樿婵�娲荤殑鑿滃崟
+ activeMenu() {
+ const path = this.$route.path
+ let activePath = path
+ if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+ const tmpPath = path.substring(1, path.length)
+ if (!this.$route.meta.link) {
+ activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
+ this.$store.dispatch('app/toggleSideBarHide', false)
+ }
+ } else if(!this.$route.children) {
+ activePath = path
+ this.$store.dispatch('app/toggleSideBarHide', true)
+ }
+ this.activeRoutes(activePath)
+ return activePath
+ },
+ },
+ beforeMount() {
+ window.addEventListener('resize', this.setVisibleNumber)
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.setVisibleNumber)
+ },
+ mounted() {
+ this.setVisibleNumber()
+ },
+ methods: {
+ // 鏍规嵁瀹藉害璁＄畻璁剧疆鏄剧ず鏍忔暟
+ setVisibleNumber() {
+ const width = document.body.getBoundingClientRect().width / 3
+ this.visibleNumber = parseInt(width / 85)
+ },
+ // 鑿滃崟閫夋嫨浜嬩欢
+ handleSelect(key, keyPath) {
+ this.currentIndex = key
+ const route = this.routers.find(item => item.path === key)
+ if (isHttp(key)) {
+ // http(s):// 璺緞鏂扮獥鍙ｆ墦寮�
+ window.open(key, "_blank")
+ } else if (!route || !route.children) {
+ // 娌℃湁瀛愯矾鐢辫矾寰勫唴閮ㄦ墦寮�
+ const routeMenu = this.childrenMenus.find(item => item.path === key)
+ if (routeMenu && routeMenu.query) {
+ let query = JSON.parse(routeMenu.query)
+ this.$router.push({ path: key, query: query })
+ } else {
+ this.$router.push({ path: key })
+ }
+ this.$store.dispatch('app/toggleSideBarHide', true)
+ } else {
+ // 鏄剧ず宸︿晶鑱斿姩鑿滃崟
+ this.activeRoutes(key)
+ this.$store.dispatch('app/toggleSideBarHide', false)
+ }
+ },
+ // 褰撳墠婵�娲荤殑璺敱
+ activeRoutes(key) {
+ var routes = []
+ if (this.childrenMenus && this.childrenMenus.length > 0) {
+ this.childrenMenus.map((item) => {
+ if (key == item.parentPath || (key == "index" && "" == item.path)) {
+ routes.push(item)
+ }
+ })
+ }
+ if(routes.length > 0) {
+ this.$store.commit("SET_SIDEBAR_ROUTERS", routes)
+ } else {
+ this.$store.dispatch('app/toggleSideBarHide', true)
+ }
+ }
+ },
+}
+</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-submenu.is-active .el-submenu__title {
+ border-bottom: 2px solid #{'var(--theme)'} !important;
+ color: #303133;
+}
+
+/* submenu item */
+.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
+ float: left;
+ height: 50px !important;
+ line-height: 50px !important;
+ color: #999093 !important;
+ padding: 0 5px !important;
+ margin: 0 10px !important;
+}
+</style>
--
Gitblit v1.9.1