119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
const router = useRouter()
|
|
const loginState = useLoginState()
|
|
|
|
// 检查用户权限
|
|
if (loginState.user.auth_code !== 2) {
|
|
throw createError({
|
|
statusCode: 403,
|
|
statusMessage: '无权访问管理页面',
|
|
})
|
|
}
|
|
|
|
useHead({
|
|
title: '管理中心',
|
|
})
|
|
|
|
const adminPages = [
|
|
{
|
|
title: '用户管理',
|
|
description: '管理系统用户、权限和服务配额',
|
|
icon: 'i-tabler-users',
|
|
path: '/generation/admin/users',
|
|
color: 'blue',
|
|
},
|
|
{
|
|
title: '数字人定制管理',
|
|
description: '管理用户提交的数字人定制请求',
|
|
icon: 'i-tabler-user-cog',
|
|
path: '/generation/admin/digital-human-train',
|
|
color: 'amber',
|
|
},
|
|
{
|
|
title: '片头片尾管理',
|
|
description: '管理用户提交的片头片尾制作请求',
|
|
icon: 'i-tabler-movie',
|
|
path: '/generation/admin/materials',
|
|
color: 'green',
|
|
},
|
|
]
|
|
|
|
const navigateToPage = (path: string) => {
|
|
router.push(path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="p-4 pb-0">
|
|
<BubbleTitle
|
|
title="管理中心"
|
|
subtitle="Administrator Panel"
|
|
/>
|
|
<GradientDivider />
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<div
|
|
v-for="page in adminPages"
|
|
:key="page.path"
|
|
class="group cursor-pointer"
|
|
@click="navigateToPage(page.path)"
|
|
>
|
|
<UCard
|
|
class="transition-all duration-200 hover:shadow-lg group-hover:scale-105"
|
|
>
|
|
<div class="flex flex-col items-center p-6 text-center">
|
|
<div
|
|
class="mb-4 flex h-16 w-16 items-center justify-center rounded-full transition-colors"
|
|
:class="{
|
|
'bg-blue-100 dark:bg-blue-900/30': page.color === 'blue',
|
|
'bg-amber-100 dark:bg-amber-900/30': page.color === 'amber',
|
|
'bg-green-100 dark:bg-green-900/30': page.color === 'green',
|
|
}"
|
|
>
|
|
<UIcon
|
|
:name="page.icon"
|
|
class="h-8 w-8"
|
|
:class="{
|
|
'text-blue-600 dark:text-blue-400': page.color === 'blue',
|
|
'text-amber-600 dark:text-amber-400':
|
|
page.color === 'amber',
|
|
'text-green-600 dark:text-green-400':
|
|
page.color === 'green',
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<h3
|
|
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
|
|
>
|
|
{{ page.title }}
|
|
</h3>
|
|
|
|
<p
|
|
class="text-sm leading-relaxed text-gray-600 dark:text-gray-400"
|
|
>
|
|
{{ page.description }}
|
|
</p>
|
|
|
|
<div
|
|
class="mt-4 flex items-center text-sm text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300"
|
|
>
|
|
<span>进入管理</span>
|
|
<UIcon
|
|
name="i-heroicons-arrow-right"
|
|
class="ml-1 h-4 w-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|