Code-Create/src/pages/my-account/account-info.vue

<template>
	<div class="account-info">
		<div class="left">
			<div class="info">
				<img alt="" src="" class="avatar" />
				<div class="name">12312</div>
				<div class="email">12312@example.com</div>
			</div>
			<router-link
				class="link"
				v-for="(v, i) in navs"
				:key="i"
				:to="v.path"
				@click="typeof v.onClick === 'function' && v.onClick()"
			>
				<span class="iconfont" :class="v.icon"></span>
				<span class="label">{{ v.label }}</span>
			</router-link>
		</div>
		<div class="content">
			<router-view></router-view>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useUserInfoStore } from '@/stores/userInfo'
	const userInfoStore = useUserInfoStore()
	const navs = ref([
		{
			path: '/my-account',
			label: 'Dashboard',
			icon: 'icon-dashboard'
		},
		{
			path: '/my-account/orders',
			label: 'Orders',
			icon: 'icon-orders'
		},
		{
			path: '/my-account/subscriptions',
			label: 'Subscriptions',
			icon: 'icon-subscriptions'
		},
		{
			path: '/my-account/address',
			label: 'Address',
			icon: 'icon-address'
		},
		{
			path: '/my-account/payment-methods',
			label: 'Payment methods',
			icon: 'icon-duidiaojiaohuanduihuan'
		},
		{
			path: '/my-account/details',
			label: 'Account details',
			icon: 'icon-tubiao-'
		},
		{
			path: '/my-account',
			label: 'Log out',
			icon: 'icon-tuichu',
			onClick: () => {
				console.log('logout')
				userInfoStore.setToken('')
			}
		}
	])
</script>

<style scoped lang="less">
	.account-info {
		display: flex;
		> .left {
			width: 270px;
			border-right: 1px solid #e1e1e1;
			margin-right: 30px;
			> .info {
				margin-bottom: 30px;
				> .avatar {
					width: 86px;
					height: 86px;
					margin-bottom: 15px;
					border-radius: 50%;
				}
				> .name {
					color: #222;
					font-size: 16px;
				}
				> .email {
					color: #333;
					font-size: 14px;
				}
			}
			> .link {
				display: flex;
				align-items: center;
				width: 100%;
				color: #222;
				font-size: 16px;
				text-decoration: none;
				padding: 7px 0;
				line-height: 1.6;
				> .iconfont {
					font-size: 20px;
					margin-right: 5px;
				}
			}
		}
		> .content {
			flex: 1;
		}
	}
</style>