rcs-admin/src/views/MainView.vue

<template>
    <ElContainer class="h-full">
        <ElAside class="bg-aside" v-if="!isMobile">
            <div class="h-16 px-4 flex items-center justify-center cursor-pointer">
                <span class="text-lg font-[sh]">{{ title }}</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>
                <ElAlert
                    type="success"
                    class="!w-auto !mr-8 invisible md:visible"
                    :closable="false"
                    v-if="user.roles.includes('user')"
                >
                    <span>费率: {{ user.rate === '1.00' ? '-' : user.rate }},</span>
                    <span> 已消费: {{ user.send }},</span>
                    <span> 余额: {{ user.balance }},</span>
                    <span> 筛号数量: {{ user.screenBalance }}</span>
                </ElAlert>
                <ElAlert
                    type="success"
                    class="!w-auto !mr-8 invisible md:visible"
                    :closable="false"
                    v-if="user.roles.includes('api')"
                >
                    <span>费率: {{ user.rate === '1.00' ? '-' : user.rate }},</span>
                    <span> 余额: {{ user.balance }}</span>
                </ElAlert>
                <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>
    <div
        class="watermark flex flex-wrap justify-between"
        v-if="user.username !== 'admin' && user.username !== 'zoumaAdmin'"
    >
        <span class="item" v-for="n in 200" :key="n">{{ user.username }}</span>
    </div>
</template>
<script setup>
import { 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, MessageDots, DeviceMobileMessage, Language } from '@vicons/tabler'
import UserAvatar from '@/components/UserAvatar.vue'
import ChangePwd from '@/components/ChangePwd.vue'
import { http } from '@/plugins/http'
import { useUserStore } from '@/stores/user'

const title = '47.98.193.71' === location.host ? '悟空传媒' : import.meta.env.VITE_TITLE
const route = useRoute()
const activeMenu = ref(route.path || '/home')
const isMobile = inject('isMobile')
const showDrawer = ref(false)
const { user } = useUserStore()
const roles = user.roles
const invitor = user.invitor
let menus = []
if (roles.includes('admin')) {
    menus = [
        {
            name: '/home',
            title: '主页',
            icon: Home
        },
        {
            name: 'rcs-parent',
            title: 'RCS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/screenList',
                    title: '筛号列表'
                },
                {
                    name: '/phoneList',
                    title: '发送列表'
                },
                {
                    name: '/task',
                    title: '任务列表'
                }
            ]
        },
        {
            name: 'sms-parent',
            title: 'SMS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/smsPhoneList',
                    title: '发送列表'
                },
                {
                    name: '/smsTask',
                    title: '短信任务列表'
                }
            ]
        },
        {
            name: 'user-parent',
            title: '用户管理',
            icon: User,
            children: [
                {
                    name: '/user',
                    title: '用户总列表'
                },
                {
                    name: '/dealer',
                    title: '发送用户列表'
                },
                {
                    name: '/paymentView',
                    title: '余额充值'
                },
                {
                    name: '/balance',
                    title: '余额明细'
                }
            ]
        },
        {
            name: 'contryConfig',
            title: '国家配置',
            icon: Language,
            children: [
                {
                    name: '/destConfig',
                    title: '目标国家'
                }
            ]
        },
        {
            name: 'settings',
            title: '系统设置',
            icon: Settings,
            children: [
                {
                    name: '/device',
                    title: '设备列表'
                },
                {
                    name: '/channel',
                    title: '渠道列表'
                },
                {
                    name: '/operator',
                    title: '运营商配置'
                },
                {
                    name: '/rcsNumber',
                    title: 'RCS号码'
                },
                {
                    name: '/sysConfig',
                    title: '参数设置'
                },
                {
                    name: '/operationLog',
                    title: '操作日志'
                },
                {
                    name: '/statistics',
                    title: '统计'
                }
            ]
        }
    ]
} else if (roles.includes('superApi')) {
    menus = [
        {
            name: '/home',
            title: '主页',
            icon: Home
        },
        {
            name: 'rcs-parent',
            title: 'RCS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/task',
                    title: '任务列表'
                }
            ]
        },
        {
            name: 'user-parent',
            title: '用户管理',
            icon: User,
            children: [
                {
                    name: '/dealer',
                    title: '用户列表'
                },
                {
                    name: '/paymentView',
                    title: '余额充值'
                }
            ]
        }
    ]
} else if (roles.includes('api')) {
    menus = [
        {
            name: '/home',
            title: '主页',
            icon: Home
        },
        {
            name: 'rcs-parent',
            title: 'RCS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/task',
                    title: '任务列表'
                },
                {
                    name: '/paymentView',
                    title: '余额充值'
                }
            ]
        },
        {
            name: 'user-parent',
            title: '用户管理',
            icon: User,
            children: [
                {
                    name: '/dealer',
                    title: '用户列表'
                }
            ]
        }
    ]
} else if (roles.includes('user')) {
    if (invitor === 25 || invitor === 605 || invitor === 606 || invitor === 698) {
        menus = [
            {
                name: '/home',
                title: '主页',
                icon: Home
            },
            {
                name: 'rcs-parent',
                title: 'RCS管理',
                icon: DeviceMobileMessage,
                children: [
                    {
                        name: '/screenList',
                        title: '筛号列表'
                    },
                    {
                        name: '/phoneList',
                        title: '发送列表'
                    },
                    {
                        name: '/task',
                        title: '任务列表'
                    },
                    {
                        name: '/paymentView',
                        title: '余额充值'
                    },
                    {
                        name: '/balance',
                        title: '余额明细'
                    }
                ]
            }
        ]
    } else {
        menus = [
            {
                name: '/home',
                title: '主页',
                icon: Home
            },
            {
                name: 'rcs-parent',
                title: 'RCS管理',
                icon: DeviceMobileMessage,
                children: [
                    {
                        name: '/screenList',
                        title: '筛号列表'
                    },
                    {
                        name: '/phoneList',
                        title: '发送列表'
                    },
                    {
                        name: '/task',
                        title: '任务列表'
                    },
                    {
                        name: '/balance',
                        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>
<style lang="less" scoped>
.watermark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: repeat;
    opacity: 0.05;
    pointer-events: none;
    font-size: 50px;
    z-index: 9;

    .item {
        display: inline-block;
        padding: 20px;
        transform: rotate(-30deg);
    }
}
</style>