156 lines
4.3 KiB
Vue
156 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import ModalAuthentication from "~/components/ModalAuthentication.vue";
|
|
|
|
const colorMode = useColorMode()
|
|
const dayjs = useDayjs()
|
|
const modal = useModal()
|
|
const toast = useToast()
|
|
const loginState = useLoginState()
|
|
|
|
const isDark = computed({
|
|
get() {
|
|
return colorMode.value === 'dark'
|
|
},
|
|
set() {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
})
|
|
|
|
const links = [
|
|
{
|
|
label: '绘画',
|
|
icon: 'i-tabler-brush',
|
|
to: '/aigc/drawing'
|
|
}, {
|
|
label: '聊天',
|
|
icon: 'i-tabler-message-2',
|
|
to: '/aigc/chat'
|
|
}, {
|
|
label: 'PPT',
|
|
icon: 'i-tabler-file-type-ppt',
|
|
to: '/aigc/ppt-course-gen'
|
|
}
|
|
]
|
|
|
|
const items = [
|
|
[{
|
|
label: 'support@fenshenzhike.com',
|
|
slot: 'account',
|
|
disabled: true
|
|
}], [{
|
|
label: '账号资料',
|
|
icon: 'i-tabler-user-circle'
|
|
}], [{
|
|
label: '注销登录',
|
|
icon: 'i-tabler-logout',
|
|
click: () => loginState.logout().then(() => toast.add({
|
|
title: '退出登录',
|
|
description: `您已成功退出登录账号`,
|
|
color: 'indigo',
|
|
icon: 'i-tabler-logout-2'
|
|
}))
|
|
}]
|
|
]
|
|
|
|
const open_login_modal = () => {
|
|
modal.open(ModalAuthentication)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative grid w-full min-h-screen">
|
|
<header>
|
|
<h1 class="inline-flex flex-col">
|
|
<span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">眩生花 AI 助手</span>
|
|
<span class="text-xs text-neutral-600 dark:text-neutral-300">这里可以有一个副标题</span>
|
|
</h1>
|
|
<div class="hidden md:block">
|
|
<UHorizontalNavigation :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="gray"
|
|
variant="ghost"
|
|
aria-label="Theme"
|
|
@click="isDark = !isDark"
|
|
/>
|
|
<UButton v-if="!loginState.is_logged_in" label="登录或注册" size="xs" class="font-bold" color="indigo"
|
|
@click="open_login_modal"/>
|
|
</ClientOnly>
|
|
<UDropdown v-if="loginState.is_logged_in" :items="items" :popper="{ placement: 'bottom-start' }"
|
|
:ui="{ item: { disabled: 'cursor-text select-text' } }">
|
|
<UAvatar :src="void 0" icon="i-tabler-user" 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="amber" size="xs" variant="subtle">
|
|
OP
|
|
</UBadge>
|
|
</p>
|
|
<p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
|
|
{{ loginState.user?.username }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template #item="{ item }">
|
|
<span class="truncate">{{ item.label }}</span>
|
|
<UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
|
|
</template>
|
|
</UDropdown>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<slot/>
|
|
</main>
|
|
|
|
<footer>
|
|
<p class="text-sm text-neutral-500">© {{ dayjs().year() }} 重庆眩生花科技有限公司</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
body {
|
|
@apply bg-neutral-50 dark:bg-neutral-950 bg-fixed;
|
|
@apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')];
|
|
}
|
|
|
|
*::-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>
|
|
header {
|
|
@apply fixed inset-x-0 h-16 bg-white border-b z-30;
|
|
@apply dark:bg-neutral-900 dark:border-neutral-800;
|
|
@apply flex flex-row items-center justify-between px-4;
|
|
@apply bg-opacity-50 dark:bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150;
|
|
}
|
|
|
|
main {
|
|
@apply h-screen pt-16;
|
|
}
|
|
|
|
footer {
|
|
@apply h-16 bg-white border-t z-30;
|
|
@apply dark:bg-neutral-900 dark:border-neutral-800;
|
|
@apply flex flex-row items-center justify-between px-4;
|
|
}
|
|
</style> |