XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 独立登录页面

Browse Source
This commit is contained in:
Timothy Yin
2025-02-17 18:54:57 +08:00
parent 2cb9dc10ca
commit 8209a314f2
5 changed files with 658 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
layouts/authenticate.vue Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts" setup></script>
<template>
<div>
<slot />
</div>
</template>
<style scoped></style>

109
layouts/default.vue
View File

@@ -37,28 +37,40 @@ const links = [
label: 'AI 工具导航',
icon: 'tabler:planet',
to: '/aigc/navigation',
}
},
]
const items = [
[{
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: 'indigo',
icon: 'i-tabler-logout-2',
})),
}],
[
{
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: 'indigo',
icon: 'i-tabler-logout-2',
})
router.push({ path: '/user/authenticate' })
}),
},
],
]
const open_login_modal = () => {
@@ -70,23 +82,38 @@ const open_login_modal = () => {
<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">AIGC 微课视频研创平台</span>
<span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">
AIGC 微课视频研创平台
</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"/>
<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'"
: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"/>
<UButton
v-if="!loginState.is_logged_in"
label="登录或注册"
size="xs"
class="font-bold"
color="indigo"
@click="open_login_modal"
/>
<UDropdown
v-if="loginState.is_logged_in"
:items="items"
@@ -105,18 +132,28 @@ const open_login_modal = () => {
<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">
<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">
<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"/>
<UIcon
:name="item.icon"
class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"
/>
</template>
</UDropdown>
</ClientOnly>
@@ -124,11 +161,13 @@ const open_login_modal = () => {
</header>
<main>
<slot/>
<slot />
</main>
<footer>
<p class="text-sm text-neutral-500">© {{ dayjs().year() }} 重庆眩生花科技有限公司</p>
<p class="text-sm text-neutral-500">
© {{ dayjs().year() }} 重庆眩生花科技有限公司
</p>
</footer>
</div>
</template>
@@ -136,25 +175,25 @@ const open_login_modal = () => {
<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')];
/* @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)
height: var(--bar-width);
}
::-webkit-scrollbar-track {
background-color: transparent
background-color: transparent;
}
::-webkit-scrollbar-thumb {
--bar-color: rgba(0, 0, 0, .1);
--bar-color: rgba(0, 0, 0, 0.1);
background-color: var(--bar-color);
border-radius: 20px;
background-clip: content-box;
border: 1px solid transparent
border: 1px solid transparent;
}
/*
@@ -191,4 +230,4 @@ footer {
@apply dark:bg-neutral-900 dark:border-neutral-800;
@apply flex flex-row items-center justify-between px-4;
}
</style>
</style>