aida_front/src/views/SellerDashboard/index.vue

<template>
	<div class="seller-dashboard-index">
		<div class="nav">
			<div
				v-for="v in list"
				:key="v.path"
				:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
				@click="handleClick(v.path)"
			>
				<div class="icon"><svg-icon :name="v.icon" size="20" /></div>
				<span class="layer">{{ v.layer }}</span>
			</div>
		</div>

		<router-view></router-view>
		<toolTipBox v-model:visible="visible" @close="() => {}" ref="toolTipBoxRef"></toolTipBox>
	</div>
</template>

<script setup>
	import { Https } from "@/tool/https"
	import { ref, computed, onMounted, onUnmounted } from "vue"
	import { useRoute, useRouter } from "vue-router"
	import toolTipBox from "./toolTipBox.vue"
	import myEvent from "@/tool/myEvents.js"
	import { useStore } from "vuex"
	const store = useStore()
	store.dispatch("seller/get_designerInfo")
	const route = useRoute()
	const router = useRouter()
	const visible = ref(false)
	const list = ref([
		{
			icon: "seller-brandProfile",
			layer: "Brand Profile",
			path: "/home/seller/brandProfile"
		},
		{
			icon: "seller-myListings",
			layer: "My Listings",
			path: "/home/seller/myListings"
		},
		{
			icon: "seller-myOrders",
			layer: "My Orders",
			path: "/home/seller/myOrders"
		},
		{
			icon: "seller-settings",
			layer: "Settings",
			path: "/home/seller/settings"
		}
	])
	const toolTipBoxRef = ref(null)
	const activePath = computed(() => route.path)
	const handleClick = (path) => {
		if (path === activePath.value) return
		router.push(path)
	}
	onMounted(()=>{
		myEvent.add('newListing',(path)=>{
			toolTipBoxRef.value.routerPath = path
			visible.value = true
		})
	})
	onUnmounted(() => {
		myEvent.remove("newListing")
	})
</script>
<style scoped lang="less">
	.seller-dashboard-index {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> .nav {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 3.6rem;
			margin-bottom: 4rem;
			> div {
				width: 18rem;
				height: 6rem;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				cursor: pointer;
				> .icon {
					margin-right: 1rem;
					color: #b0b0b0;
				}
				> .layer {
					font-size: 2rem;
					color: #999999;
				}
				&.active {
					> .icon,
					> .layer {
						color: #000;
					}
					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 0.4rem;
						background-color: #000;
					}
				}
			}
		}
	}
</style>