front-template/src/layouts/admin.vue

<template>
	<div class="main">
		<div class="nav_left">
			<div class="logo">
				<img src="/logo.png" alt="后台管理系统">
			</div>
			<div class="nav_list">
				<div class="nav_title"><img src="/logo.png" alt="图标">导航管理</div>
				<div class="rArrl"></div>
			</div>
			<div class="nav_li">
				<ul>
					<li v-for="r of routes" :key="r.path">
						<img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ te(r.name) ? t(r.name) : r.name }}</RouterLink>
					</li>
				</ul>
			</div>
			<div class="nav_list">
				<div class="nav_title"><img src="/logo.png" alt="图标">权限管理</div>
				<div class="rArrl"></div>
			</div>
			<div class="nav_list">
				<div class="nav_title"><img src="/logo.png" alt="图标">模型设置</div>
				<div class="rArrl"></div>
			</div>
			<div class="nav_list">
				<div class="nav_title"><img src="/logo.png" alt="图标">内容管理</div>
				<div class="rArrl"></div>
			</div>
			<div class="nav_list">
				<div class="nav_title"><img src="/logo.png" alt="图标">会员管理</div>
				<div class="rArrl"></div>
			</div>
			<div class="nav_list">
				<div class="nav_title"><img src="/logo.png" alt="图标">模版管理</div>
				<div class="rArrl"></div>
			</div>
		</div>
		<div class="nav_right">
			<Heads />
			<div class="content">
				<router-view v-slot="{ Component }">
					<transition name="fade" mode="out-in">
						<component :is="Component" />
					</transition>
				</router-view>
			</div>
		</div>
	</div>
	<!--	<Navigation />-->
	<!--	<div class="w-screen flex flex-col items-center justify-center">-->
	<!--		<router-view v-slot="{ Component }">-->
	<!--			<transition name="fade" mode="out-in">-->
	<!--				<component :is="Component" />-->
	<!--			</transition>-->
	<!--		</router-view>-->
	<!--	</div>-->
</template>

<style scoped>
.main{
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 100vh;
	overflow: hidden;
	.nav_left{
		width: 15%;
		height: 100vh;
		background: #111c43;
		overflow-y: auto;
		.logo{
			width: 100%;
			height: 60px;
			border-bottom: 0.5px solid #293356;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.logo img{
			width: 85%;
			height: 40px;
			background: #293356;
			color: #FFFFFF;
			font-size: 12px;
		}
		.nav_list{
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 45px;
			.nav_title{
				font-size: 14px;
				color: #a3aed1;
				display: flex;
				align-items: center;
			}
			.nav_title img{
				width: 20px;
				height: 20px;
				color: #333333;
				margin-right: 8px;
			}
			.rArrl{
				width: 7px;
				height: 7px;
				border-top: 1px solid #a3aed1;
				border-right: 1px solid #a3aed1;
				margin-top: 9px;
				-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
				transform: translate3d(0, -50%, 0) rotate(45deg);
			}
		}
		.nav_li{
			width: 100%;
			padding-left: 16%;
			background: #1a223f;
		}
		.nav_li ul li{
			font-size: 12px;
			color: #a3aed1;
			display: flex;
			align-items: center;
			height: 45px;
			width: 100%;
		}
		.nav_li ul li img{
			width: 20px;
			height: 20px;
			color: #333333;
			margin-right: 8px;
		}
	}
	.nav_right{
		width: 85%;
		height: 100vh;
		background: #f0f1f7;
		.content{
			width: 100%;
			height: auto;
			overflow-y: auto;
		}
	}
}
</style>
<script setup lang="ts">
import Heads from '~/components/Heads.vue'
import { getRoutes } from '@/plugins/router'
const { te, t } = useI18n()
const routes = getRoutes()
	.filter((r) => !r.path.includes('notFound'))
	.map((r) => {
		let { path, name } = r
		if (path === safeResolve('/')) {
			return { path, name: 'home' }
		}
		if (!name) {
			name = path
		}
		return { path, name: name.toString().slice(1).replaceAll('/', ' · ') }
	})
const $route = useRoute()
</script>