mailbox-outer-admin-vue/src/layout/Index.vue

<template>
    <header class="flex v-center between header">
        <div style="display: inline-flex;align-items: center;justify-content: center;height: 100%;">
            <el-image src="/admin/police-icon.png" style="width: 40px;height: 40px;margin-right: 10px;"></el-image>
            <div class="title"><a href="">厅长信箱 即接即办管理端</a></div>
        </div>
        <div>
            <el-button type="primary" @click="logout" style="--el-button-bg-color: #283AAC;--el-button-border-color: #586EFF;">
                <template #icon>
                    <el-icon style="transform: rotate(-90deg);" :size="18"><Download /></el-icon>
                </template>
                退出
            </el-button>
        </div>
    </header>
    <div class="flex">
        <aside>
            <nav>
                
                <a class="flex v-center center wrap pointer" @click="go('/')" :active="activeUrl === '/mail'">
                    <el-icon><Message /></el-icon>
                    <span>信件查询</span>
                </a>
                
                <a class="flex v-center center wrap pointer" @click="go('/admin')" :active="activeUrl === '/admin'">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>管理员列表</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="go('/user')" :active="activeUrl === '/user'">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>用户管理</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/mailPush')">
                    <el-icon><ChatDotSquare /></el-icon>
                    <span>信件推送查询</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/blacklist')">
                    <el-icon><Lock /></el-icon>
                    <span>黑名单管理</span>
                </a>
            </nav>
        </aside>
        <main><router-view /></main>
    </div>
</template>

<script setup>
import { HomeFilled, Platform, Menu, User,Message,Calendar,ChatDotSquare, Download, Lock } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { useTokenStore } from '../stores/useTokenStore';
import { request } from '../util/axios_config';
import { ElMessage } from 'element-plus'
const { VITE_API_URL } = process.env;

const router = useRouter();

const logout = () => {
    const url = VITE_API_URL +'/logout'
    request({
        url: url,
        method: 'POST'
    }).then((res) => {
        if (res.data === 200) {
            const tokens = useTokenStore();
            tokens.removeTokens();
            ElMessage.success('登出成功');
        }
    })
        .catch((e) => { console.log(e) });
    router.push('/login');
}

const activeUrl = ref('/');
function go(url) {
    activeUrl.value = url
    router.push(url)
}
</script>
<style lang="scss" scoped>
.header {
    background-color: #162582;
    color: #fff;
    height: var(--header-height);
    padding: 0 20px;
    box-sizing: border-box;

    .title {
        font-size: 28px;

        a {
            text-decoration: none;
            color: inherit;
        }
    }
}

aside {
    background-color: #071254;
    color: #fff;
    width: var(--aside-width);
    height: calc(100vh - var(--header-height));

    nav {
        a {
            height: 100px;
            color: #707ab6;
            &:hover {
                color: #fff;
            }
            &[active=true] {
                color: #fff;
            }
            .el-icon {
                font-size: 50px;
            }

            span {
                width: 100%;
                text-align: center;
            }
        }
    }
}
main {
    height: calc(100vh - var(--header-height));
    width: calc(100vw - var(--aside-width));
}
</style>