|
@@ -0,0 +1,89 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="w-full h-full">
|
|
|
|
+ <el-container>
|
|
|
|
+ <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
|
|
|
|
+ <div class=" flex flex-row justify-start items-center text-white flex-1">
|
|
|
|
+ <div v-for="routerItem in routerList"
|
|
|
|
+ :class="`border-b-2 border-transparent hover:border-white p-2 mr-4 multipleyHeader ${activeRouter?.path === routerItem.path ? 'border-white' : ''}`"
|
|
|
|
+ :key="routerItem.path">
|
|
|
|
+ <div v-if="!routerItem.children" @click="setCurrentRouter(routerItem)">
|
|
|
|
+ {{ routerItem.name }}
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="flex justify-center items-center">
|
|
|
|
+ <el-dropdown>
|
|
|
|
+ <div class="text-white w-full h-full headerText">
|
|
|
|
+ {{ routerItem.name }}
|
|
|
|
+ <el-icon class="el-icon--right">
|
|
|
|
+ <arrow-down />
|
|
|
|
+ </el-icon>
|
|
|
|
+ </div>
|
|
|
|
+ <template #dropdown>
|
|
|
|
+ <el-dropdown-menu>
|
|
|
|
+ <el-dropdown-item v-for="child in routerItem.children"
|
|
|
|
+ :key="child.path"
|
|
|
|
+ @click="setCurrentRouter(child)">
|
|
|
|
+ {{ child.name }}
|
|
|
|
+ </el-dropdown-item>
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dropdown>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex flex-row justify-start items-center text-white">
|
|
|
|
+ <el-icon :size="26" class="ml-4 cursor-pointer">
|
|
|
|
+ <Bell />
|
|
|
|
+ </el-icon>
|
|
|
|
+ <div>
|
|
|
|
+ <img class="w-8 h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="logout()">
|
|
|
|
+ </div>
|
|
|
|
+ <el-icon :size="26" class="ml-4 cursor-pointer">
|
|
|
|
+ <Grid />
|
|
|
|
+ </el-icon>
|
|
|
|
+ </div>
|
|
|
|
+ </el-header>
|
|
|
|
+ <el-main>
|
|
|
|
+ <router-view />
|
|
|
|
+ </el-main>
|
|
|
|
+ </el-container>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
+import { onMounted, ref } from 'vue';
|
|
|
|
+import { RouteRecordRaw, useRouter } from 'vue-router';
|
|
|
|
+import { useStore } from "@/store"
|
|
|
|
+import defaultCover from "@/assets/defaultCover.png";
|
|
|
|
+const { getRoutersList } = useStore()
|
|
|
|
+const router = useRouter();
|
|
|
|
+const routerList = ref<RouteRecordRaw[]>([]);
|
|
|
|
+const activeRouter = ref<RouteRecordRaw>();
|
|
|
|
+const setCurrentRouter = (item: RouteRecordRaw) => {
|
|
|
|
+ activeRouter.value = item;
|
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
|
+ router.push({ path: item.children[0].path });
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ router.push({ path: item.path });
|
|
|
|
+};
|
|
|
|
+const logout = () => {
|
|
|
|
+ router.push({ path: '/login' });
|
|
|
|
+};
|
|
|
|
+onMounted(() => {
|
|
|
|
+ routerList.value = getRoutersList;
|
|
|
|
+ activeRouter.value = routerList.value.find((item) => item.path === router.currentRoute.value.path);
|
|
|
|
+ console.log("routerList", routerList);
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.multipleyHeader {
|
|
|
|
+ height: 96%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .headerText {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|