feat: 导航栏路由开发
parent
347eebdbad
commit
5f653f5f31
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,16 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="yewuguanli" clip-path="url(#clip0_807_4489)">
|
||||
<path id="Vector" d="M22 2.5H2V8.5H22V2.5Z" stroke="#0052D9" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M2 20.5151L8.08781 14.3646L11.3775 17.5151L15.3991 13.5L17.6393 15.684" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_3" d="M22 8.08595V21.0859" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_4" d="M2 8.08595V15.0859" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_5" d="M6.50781 21.5H22.0001" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_6" d="M8.5 5.5H19" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_7" d="M5 5.4983H5.50001" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4489">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,14 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="zhishizhongxin" clip-path="url(#clip0_807_4471)">
|
||||
<path id="Vector" d="M18 4H4.5C3.67158 4 3 4.67158 3 5.5V19.5C3 20.3285 3.67158 21 4.5 21H19.5C20.3285 21 21 20.3285 21 19.5V12.5V9" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M16.1216 6.2427L18.2429 4.12135L16.1216 2.00003" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_3" d="M12 8.5V17" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_4" d="M16 12V17" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_5" d="M8 12V17" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4471">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 999 B |
@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="shouye" clip-path="url(#clip0_807_4340)">
|
||||
<path id="Vector" d="M4.5 9V21H19.5V9L12 3L4.5 9Z" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M9.5 14.5V21H14.5V14.5H9.5Z" stroke="#0052D9" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_3" d="M4.5 21H19.5" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4340">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 607 B |
@ -0,0 +1,16 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="yewuguanli" clip-path="url(#clip0_807_4352)">
|
||||
<path id="Vector" d="M22 2.5H2V8.5H22V2.5Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M2 20.5151L8.08781 14.3646L11.3775 17.5151L15.3991 13.5L17.6393 15.684" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_3" d="M22 8.08595V21.0859" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_4" d="M2 8.08595V15.0859" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_5" d="M6.50775 21.5H22" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_6" d="M8.5 5.5H19" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_7" d="M5 5.4983H5.50001" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4352">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="shouye" clip-path="url(#clip0_807_4466)">
|
||||
<path id="Vector" d="M4.5 9V21H19.5V9L12 3L4.5 9Z" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M9.5 14.5V21H14.5V14.5H9.5Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_3" d="M4.5 21H19.5" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4466">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 607 B |
@ -0,0 +1,14 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="zhishizhongxin" clip-path="url(#clip0_807_4345)">
|
||||
<path id="Vector" d="M18 4H4.5C3.67158 4 3 4.67158 3 5.5V19.5C3 20.3285 3.67158 21 4.5 21H19.5C20.3285 21 21 20.3285 21 19.5V12.5V9" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M16.1213 6.2427L18.2426 4.12135L16.1213 2.00003" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_3" d="M12 8.5V17" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_4" d="M16 12V17" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_5" d="M8 12V17" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4345">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 999 B |
@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="xitongguanli" clip-path="url(#clip0_807_4361)">
|
||||
<path id="Vector" d="M12 2L9 5H5V9L2 12L5 15V19H9L12 22L15 19H19V15L22 12L19 9V5H15L12 2Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M12 15C13.6568 15 15 13.6568 15 12C15 10.3432 13.6568 9 12 9C10.3432 9 9 10.3432 9 12C9 13.6568 10.3432 15 12 15Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_807_4361">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 618 B |
@ -0,0 +1,232 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import logoImg from "@/assets/home/logo.png";
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
import MeunIcon from "./meunIcon.vue";
|
||||
import { onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { findRouteByPath, getParentPaths, getTopMenu } from "@/router/utils";
|
||||
const { route } = useNav();
|
||||
const router = useRouter();
|
||||
const defaultActive = computed(() =>
|
||||
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
|
||||
);
|
||||
const menuData = computed(() => {
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
meta: {
|
||||
title: "首页",
|
||||
icon: 0
|
||||
},
|
||||
children: [],
|
||||
path: "/home"
|
||||
}
|
||||
].concat(usePermissionStoreHook().wholeMenus);
|
||||
// return [
|
||||
// {
|
||||
// id: 0,
|
||||
// meta: {
|
||||
// title: "首页",
|
||||
// icon: 0
|
||||
// },
|
||||
// path: "/home",
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// meta: {
|
||||
// title: "知识中心",
|
||||
// icon: 1
|
||||
// },
|
||||
// path: "/test",
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// meta: {
|
||||
// title: "业务管理",
|
||||
// icon: 2
|
||||
// },
|
||||
// path: "/test1",
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// path: "/systemManagement",
|
||||
// redirect: "/systemManagement/accountManagement",
|
||||
// meta: {
|
||||
// title: "系统管理",
|
||||
// icon: 2,
|
||||
// rank: 15
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: "/systemManagement/accountManagement",
|
||||
// name: "systemManagement",
|
||||
// component: () =>
|
||||
// import("@/views/systemManagement/accountManagement/index.vue"),
|
||||
// meta: {
|
||||
// title: "账号管理",
|
||||
// showLink: true,
|
||||
// showParent: true,
|
||||
// roles: ["admin", "common"]
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ];
|
||||
});
|
||||
const currentTopRoute = ref("/home");
|
||||
const routes: any = router.options.routes;
|
||||
const getCurrentRoute = () => {
|
||||
// 当前路由的父级路径组成的数组
|
||||
const parentRoutes = getParentPaths(
|
||||
router.currentRoute.value.name as string,
|
||||
routes,
|
||||
"name"
|
||||
);
|
||||
if (router.currentRoute.value.path === "/home") {
|
||||
currentTopRoute.value = "/home";
|
||||
} else {
|
||||
currentTopRoute.value = parentRoutes[1];
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log(usePermissionStoreHook().wholeMenus);
|
||||
getCurrentRoute();
|
||||
});
|
||||
const getIsActived = val => {
|
||||
return val === currentTopRoute.value ? true : false;
|
||||
};
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
getCurrentRoute();
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
const changeRouter = val => {
|
||||
router.push(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="navbar-wrapper">
|
||||
<div class="logo-container">
|
||||
<img :src="logoImg" alt="" />
|
||||
<span>知识报送平台</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="meun_list">
|
||||
<div
|
||||
v-for="(item, index) in menuData"
|
||||
:class="[currentTopRoute === item.path ? 'actived' : '']"
|
||||
:key="index"
|
||||
>
|
||||
<el-dropdown v-if="item?.children.length > 0">
|
||||
<div class="meun_item">
|
||||
<MeunIcon
|
||||
:isActived="getIsActived(item.path)"
|
||||
:meunIconIndex="item.meta.icon"
|
||||
/>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<div class="drop_meun">
|
||||
<div
|
||||
@click="changeRouter(items.path)"
|
||||
class="drop_meun_item"
|
||||
v-for="(items, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<span>{{ items.meta.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div v-else>
|
||||
<div class="meun_item" @click="changeRouter(item.path)">
|
||||
<MeunIcon
|
||||
:isActived="getIsActived(item.path)"
|
||||
:meunIconIndex="item.meta.icon"
|
||||
/>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar-wrapper {
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
.logo-container {
|
||||
display: flex;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
span {
|
||||
font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #283c84;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-left: 116px;
|
||||
.meun_list {
|
||||
display: flex;
|
||||
.meun_item {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
color: #666666;
|
||||
span {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.actived {
|
||||
background: rgba(0, 82, 217, 0.1);
|
||||
color: #0052d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.drop_meun {
|
||||
width: 156px;
|
||||
background: #ffffff;
|
||||
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding: 24px;
|
||||
padding-bottom: 0;
|
||||
.drop_meun_item {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
margin-bottom: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.drop_meun_item:hover {
|
||||
color: #0052d9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<component v-if="isActived" :is="actIcon" />
|
||||
<component v-else :is="icon" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import homeIcon from "../../../assets/svg/home/home.svg";
|
||||
import actHomeIcon from "../../../assets/svg/home/act_home.svg";
|
||||
import systemIcon from "../../../assets/svg/home/system.svg";
|
||||
import knowledgeCentreIcon from "../../../assets/svg/home/knowledgeCentre.svg";
|
||||
import businessManagementIcon from "../../../assets/svg/home/businessManagement.svg";
|
||||
import actKnowledgeCentreIcon from "../../../assets/svg/home/actKnowledgeCentre.svg";
|
||||
import actBusinessManagementIcon from "../../../assets/svg/home/actBusinessManagement.svg";
|
||||
// ...导入其他SVG组件
|
||||
const props = defineProps({
|
||||
meunIconIndex: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
isActived: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const icons = [
|
||||
homeIcon,
|
||||
knowledgeCentreIcon,
|
||||
businessManagementIcon,
|
||||
systemIcon
|
||||
]; // ...加入其他SVG组件的引用
|
||||
const actIcons = [
|
||||
actHomeIcon,
|
||||
actKnowledgeCentreIcon,
|
||||
actBusinessManagementIcon
|
||||
];
|
||||
|
||||
const icon = ref();
|
||||
const actIcon = ref();
|
||||
|
||||
onMounted(() => {
|
||||
icon.value = icons[props.meunIconIndex];
|
||||
actIcon.value = actIcons[props.meunIconIndex];
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
path: "/systemManagement",
|
||||
redirect: "/systemManagement/accountManagement",
|
||||
meta: {
|
||||
title: "系统管理",
|
||||
icon: 3,
|
||||
rank: 15
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/systemManagement/accountManagement",
|
||||
name: "systemManagement",
|
||||
component: () =>
|
||||
import("@/views/systemManagement/accountManagement/index.vue"),
|
||||
meta: {
|
||||
title: "账号管理",
|
||||
showLink: true,
|
||||
showParent: true,
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -1,11 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
name: "Home"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>算法管理</h1>
|
||||
<h1>首页</h1>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,5 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>11111</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue