shorts-admin/src/views/MainView.vue

<template>
    <ElContainer class="h-full">
        <ElAside class="bg-slate-100 dark:bg-zinc-800" v-if="!isMobile">
            <div class="h-16 px-4 flex items-center justify-center cursor-pointer">
                <span class="text-lg font-[sh]">Admin</span>
            </div>
            <SideMenu :default-active="activeMenu" :menus="menus" />
        </ElAside>
        <ElContainer>
            <ElHeader class="!h-16 border-b !box-border border-neutral-200 dark:border-neutral-800 flex items-center">
                <div class="p-4 mr-4 cursor-pointer" @click="toggleMenu" v-if="isMobile">
                    <Menu2 class="w-5 h-5" />
                </div>

                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="route.name !== 'home'">{{
                        route.meta?.title || route.path
                    }}</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="grow"></div>
                <DarkSwitch class="mr-4" />
                <el-dropdown @command="onCommand">
                    <UserAvatar />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </ElHeader>
            <ElMain class="bg-neutral-50 dark:bg-neutral-900" id="main-container">
                <RouterView></RouterView>
            </ElMain>
        </ElContainer>

        <ElDrawer
            v-model="showDrawer"
            direction="ltr"
            size="80%"
            v-if="isMobile"
            class="!bg-slate-100 dark:!bg-zinc-800"
        >
            <SideMenu :default-active="activeMenu" :menus="menus" />
        </ElDrawer>

        <ChangePwd v-model="showChangePwdDialog"> </ChangePwd>
    </ElContainer>
</template>
<script setup>
import { ElAside, ElContainer, ElHeader, ElMain, ElMessageBox } from 'element-plus'
import DarkSwitch from '@/components/DarkSwitch.vue'
import SideMenu from '@/components/SideMenu.vue'
import { useRoute } from 'vue-router'
import { ref, watch, shallowRef, inject } from 'vue'
import { User, Home, Menu2, Settings, Video } from '@vicons/tabler'
import UserAvatar from '@/components/UserAvatar.vue'
import ChangePwd from '@/components/ChangePwd.vue'
import { http } from '@/plugins/http'

const route = useRoute()
const activeMenu = ref(route.name || '/home')
const isMobile = inject('isMobile')
const showDrawer = ref(false)
const menus = [
    {
        name: '/home',
        title: '主页',
        icon: Home
    },
    {
        name: 'series',
        title: '短剧列表',
        icon: Video
    },
    {
        name: 'user-parent',
        title: '用户管理',
        icon: User,
        children: [
            {
                name: '/user',
                title: '用户列表'
            }
        ]
    },
    {
        name: 'settings',
        title: '系统设置',
        icon: Settings,
        children: [
            {
                name: '/sysConfig',
                title: '参数设置'
            }
        ]
    }
]
function toggleMenu() {
    showDrawer.value = !showDrawer.value
}
watch(route, () => {
    activeMenu.value = route.name
})
const showChangePwdDialog = ref(false)
function onCommand(cmd) {
    if (cmd === 'logout') {
        logout()
    } else if (cmd === 'changePassword') {
        showChangePwdDialog.value = true
    }
}
function logout() {
    ElMessageBox.confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        http.setToken(null)
        location.reload()
    })
}
</script>