303 lines
7.3 KiB
Vue
303 lines
7.3 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
import ModalAuthentication from '~/components/ModalAuthentication.vue'
|
|
|
|
const colorMode = useColorMode()
|
|
const dayjs = useDayjs()
|
|
const overlay = useOverlay()
|
|
const toast = useToast()
|
|
const router = useRouter()
|
|
const loginState = useLoginState()
|
|
|
|
const isDark = computed({
|
|
get() {
|
|
return colorMode.value === 'dark'
|
|
},
|
|
set() {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
},
|
|
})
|
|
|
|
const links = [
|
|
{
|
|
label: '分身制课',
|
|
icon: 'tabler:books',
|
|
to: '/generation',
|
|
},
|
|
{
|
|
label: '聊天',
|
|
icon: 'tabler:message-chatbot',
|
|
to: '/aigc/chat',
|
|
},
|
|
{
|
|
label: '绘画',
|
|
icon: 'i-tabler-brush',
|
|
to: '/aigc/draw',
|
|
},
|
|
{
|
|
label: 'AI 工具导航',
|
|
icon: 'tabler:planet',
|
|
to: '/aigc/navigation',
|
|
},
|
|
]
|
|
|
|
const items: (DropdownMenuItem & {
|
|
icon?: string
|
|
})[][] = [
|
|
[
|
|
{
|
|
label: 'support@fenshenzhike.com',
|
|
slot: 'account',
|
|
disabled: true,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: '账号管理',
|
|
icon: 'i-tabler-user-circle',
|
|
to: '/profile',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: '注销登录',
|
|
icon: 'i-tabler-logout',
|
|
click: () =>
|
|
loginState.logout().then(() => {
|
|
toast.add({
|
|
title: '退出登录',
|
|
description: `您已成功退出登录账号`,
|
|
color: 'success',
|
|
icon: 'i-tabler-logout-2',
|
|
})
|
|
router.push({ path: '/user/authenticate' })
|
|
}),
|
|
},
|
|
],
|
|
]
|
|
|
|
const open_login_modal = () => {
|
|
const modal = overlay.create(ModalAuthentication)
|
|
modal.open()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (loginState.user.auth_code === 2) {
|
|
/** Adminstrator notifications */
|
|
|
|
// Fetch unverified users
|
|
const unverifiedUsers = await useFetchWrapped<
|
|
req.user.UserList & AuthedRequest,
|
|
BaseResponse<PagedData<UserSchema>>
|
|
>('App.User_User.ListUser', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id!,
|
|
page: 1,
|
|
perpage: 20,
|
|
is_verify: false,
|
|
})
|
|
|
|
if (!unverifiedUsers) {
|
|
toast.add({
|
|
title: '获取待审核用户失败',
|
|
description: '获取未审核用户列表失败',
|
|
color: 'error',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
} else if (unverifiedUsers.data.total > 0) {
|
|
toast.add({
|
|
title: '有新用户等待审核',
|
|
description: `有 ${unverifiedUsers.data.total} 个新用户注册，请尽快审核`,
|
|
color: 'warning',
|
|
icon: 'i-tabler-user-plus',
|
|
duration: 0,
|
|
actions: [
|
|
{
|
|
label: '前往处理',
|
|
variant: 'solid',
|
|
color: 'warning',
|
|
onClick: () => {
|
|
router.push({
|
|
path: '/generation/admin/users',
|
|
query: {
|
|
unverified: 1,
|
|
},
|
|
})
|
|
},
|
|
},
|
|
// {
|
|
// label: '全部忽略',
|
|
// onClick: () => {
|
|
// alert('ignored')
|
|
// },
|
|
// },
|
|
],
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative grid min-h-screen w-full">
|
|
<header>
|
|
<h1 class="inline-flex flex-col">
|
|
<span class="text-lg font-bold text-neutral-600 dark:text-neutral-300">
|
|
AIGC 微课视频研创平台
|
|
</span>
|
|
<!-- <span class="text-xs text-neutral-600 dark:text-neutral-300">眩生花科技</span> -->
|
|
</h1>
|
|
<!-- <div class="hidden md:block">
|
|
<NavigationMenu
|
|
orientation="horizontal"
|
|
:links="links"
|
|
class="select-none"
|
|
/>
|
|
</div> -->
|
|
<div class="flex flex-row items-center gap-4">
|
|
<ClientOnly>
|
|
<UButton
|
|
:icon="
|
|
isDark
|
|
? 'i-line-md-sunny-outline-to-moon-alt-loop-transition'
|
|
: 'i-line-md-moon-alt-to-sunny-outline-loop-transition'
|
|
"
|
|
color="neutral"
|
|
variant="ghost"
|
|
aria-label="Theme"
|
|
@click="isDark = !isDark"
|
|
/>
|
|
<UButton
|
|
v-if="!loginState.is_logged_in"
|
|
label="登录或注册"
|
|
size="xs"
|
|
class="font-bold"
|
|
color="primary"
|
|
@click="open_login_modal"
|
|
/>
|
|
<UDropdownMenu
|
|
v-if="loginState.is_logged_in"
|
|
:items="items"
|
|
:content="{
|
|
align: 'end',
|
|
}"
|
|
>
|
|
<UAvatar
|
|
:alt="loginState.user.username.toUpperCase()"
|
|
:src="loginState.user.avatar"
|
|
:chip="{
|
|
color: 'warning',
|
|
position: 'bottom-right',
|
|
text: 'OP',
|
|
}"
|
|
size="md"
|
|
/>
|
|
<template #account="{ item }">
|
|
<div class="text-left">
|
|
<p class="flex items-center gap-1">
|
|
已登录为
|
|
<UBadge
|
|
v-if="loginState.user.auth_code === 2"
|
|
color="warning"
|
|
size="xs"
|
|
variant="subtle"
|
|
>
|
|
OP
|
|
</UBadge>
|
|
</p>
|
|
<p
|
|
class="max-w-40 truncate whitespace-nowrap font-medium text-gray-900 dark:text-white"
|
|
>
|
|
{{ loginState.user?.username }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template #item="{ item }">
|
|
<span class="truncate">{{ item.label }}</span>
|
|
<UIcon
|
|
v-if="item.icon"
|
|
:name="item.icon"
|
|
class="ms-auto size-4 shrink-0 text-gray-400 dark:text-gray-500"
|
|
/>
|
|
</template>
|
|
</UDropdownMenu>
|
|
</ClientOnly>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
|
|
<footer>
|
|
<p class="text-sm text-neutral-500">
|
|
© {{ dayjs().year() }} 重庆眩生花科技有限公司
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
@reference '@/assets/css/main.css';
|
|
|
|
body {
|
|
@apply bg-neutral-50 bg-fixed dark:bg-neutral-950;
|
|
/* @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')]; */
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
--bar-width: 5px;
|
|
width: var(--bar-width);
|
|
height: var(--bar-width);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
--bar-color: rgba(0, 0, 0, 0.1);
|
|
background-color: var(--bar-color);
|
|
border-radius: 20px;
|
|
background-clip: content-box;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
/*
|
|
*::-webkit-scrollbar {
|
|
@apply w-1.5 h-1.5;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
@apply bg-neutral-300/20 dark:bg-neutral-700/20;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
@apply rounded;
|
|
@apply bg-neutral-300 dark:bg-neutral-700;
|
|
@apply hover:bg-neutral-400 hover:dark:bg-neutral-600;
|
|
}
|
|
*/
|
|
</style>
|
|
|
|
<style scoped>
|
|
@reference '@/assets/css/main.css';
|
|
|
|
header {
|
|
@apply fixed inset-x-0 z-30 h-16 border-b bg-white/50;
|
|
@apply dark:border-neutral-800 dark:bg-neutral-900/50;
|
|
@apply flex flex-row items-center justify-between px-4;
|
|
@apply backdrop-blur-3xl backdrop-saturate-150;
|
|
}
|
|
|
|
main {
|
|
@apply h-screen pt-16;
|
|
}
|
|
|
|
footer {
|
|
@apply z-30 h-16 border-t bg-white;
|
|
@apply dark:border-neutral-800 dark:bg-neutral-900;
|
|
@apply flex flex-row items-center justify-between px-4;
|
|
}
|
|
</style>
|