estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将登录注册页改为模态

Browse Source
This commit is contained in:
estel
2025-07-25 14:44:47 +08:00
parent e0582c0d79
commit c1b1f8c1bb
4 changed files with 158 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/app.config.ts
View File

@@ -6,6 +6,35 @@ export default defineAppConfig({
}
},
uiPro: {
modal: {
slots: {
overlay: 'fixed inset-0 bg-elevated/75',
content: 'fixed bg-default divide-y divide-default flex flex-col focus:outline-none',
header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-16',
wrapper: '',
body: 'flex-1 overflow-y-auto p-4 sm:p-6',
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
title: 'text-highlighted font-semibold',
description: 'mt-1 text-muted text-sm',
close: 'absolute top-4 end-4'
},
variants: {
transition: {
true: {
overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
content: 'data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]'
}
},
fullscreen: {
true: {
content: 'inset-0'
},
false: {
content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden'
}
}
}
},
footer: {
slots: {
root: 'border-t border-default',

150
app/components/AppHeader.vue
View File

@@ -1,113 +1,135 @@
<script setup lang="ts">
const isSettingsOpen = ref(false)
const isSettingsOpen = ref(false);
const isLoginModalOpen = ref(false);
const isRegisterModalOpen = ref(false);
const { header } = useAppConfig();
// 定义 props 来接收侧边栏状态和切换函数
interface Props {
isSidebarOpen?: boolean
toggleSidebar?: () => void
isSidebarOpen?: boolean;
toggleSidebar?: () => void;
}
const props = withDefaults(defineProps<Props>(), {
isSidebarOpen: false,
toggleSidebar: () => {}
})
toggleSidebar: () => {},
});
// 登录注册函数
const handleLoginRegister = (type: "login" | "register") => {
if (type === "login") {
isLoginModalOpen.value = true;
} else if (type === "register") {
isRegisterModalOpen.value = true;
}
};
</script>
<template>
<Uheader
class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
>
<div class="px-2 sm:px-4 lg:px-6">
<div class="flex justify-between items-center h-12">
<!-- 汉堡菜单按钮 - 只在移动端显示 -->
<button
@click="() => {
console.log('汉堡按钮被点击')
props.toggleSidebar()
}"
@click="
() => {
console.log('汉堡按钮被点击');
props.toggleSidebar();
}
"
class="lg:hidden p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label="打开导航菜单"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
:class="{ 'rotate-180': props.isSidebarOpen }"
>
<path
<path
v-if="!props.isSidebarOpen"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
<path
<path
v-else
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<UContentSearchButton v-if="header?.search" class="lg:hidden" />
<div class="ml-auto flex items-center space-x-2">
<UColorModeSwitch />
<!-- Settings Button -->
<button
class="ml-auto p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
title="页面设置"
@click="isSettingsOpen = !isSettingsOpen"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
<!-- Settings Button -->
<button
class="ml-auto p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
title="页面设置"
@click="isSettingsOpen = !isSettingsOpen"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
<!-- User Actions - Mobile and Desktop -->
<div class="flex items-center space-x-2">
<NuxtLink
to="/login"
<button
@click="handleLoginRegister('login')"
class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
>
登录
</NuxtLink>
<NuxtLink
to="/register"
class="text-sm font-medium text-white bg-primary rounded-md"
</button>
<button
@click="handleLoginRegister('register')"
class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
>
<UButton icon="lucide-rocket">注册</UButton>
</NuxtLink>
<!-- Mobile Menu Button -->
<!-- <div class="sm:hidden">
<NuxtLink
to="/login"
class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
>
登录
</NuxtLink>
<NuxtLink
to="/register"
class="ml-2 px-3 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
>
注册
</NuxtLink>
</div> -->
注册
</button>
</div>
</div>
</div>
<!-- Theme Settings Panel -->
<ThemeSettings
:is-open="isSettingsOpen"
@close="isSettingsOpen = false"
/>
<!-- Theme Settings Panel -->
<ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
</Uheader>
<!-- 登录模态框 -->
<UModal v-model:open="isLoginModalOpen" title="登录" :dismissible="false">
<template #body>
<authLogin />
</template>
</UModal>
<!-- 注册模态框 -->
<UModal v-model:open="isRegisterModalOpen" title="注册" :dismissible="false">
<template #body>
<authRegister />
</template>
</UModal>
</template>

5
app/components/auth/login.vue
View File

@@ -29,9 +29,10 @@ const fields = ref([
<template>
<UAuthForm
class="max-w-md"
title="Login"
description="Enter your credentials to access your account."
title="登录"
description="使用社交账号或邮箱登录"
icon="i-lucide-user"
:fields="fields"
:providers="providers"

155
app/components/auth/register.vue
View File

@@ -1,117 +1,42 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
创建新账户
</h2>
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
或
<NuxtLink to="/login" class="font-medium text-blue-600 hover:text-blue-500">
登录现有账户
</NuxtLink>
</p>
</div>
<form class="mt-8 space-y-6" @submit.prevent="handleRegister">
<div class="space-y-4">
<div>
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">用户名</label>
<input
id="username"
v-model="username"
type="text"
required
class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="用户名"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">邮箱地址</label>
<input
id="email"
v-model="email"
type="email"
required
class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="邮箱地址"
>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">密码</label>
<input
id="password"
v-model="password"
type="password"
required
class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="密码"
>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">确认密码</label>
<input
id="confirm-password"
v-model="confirmPassword"
type="password"
required
class="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="确认密码"
>
</div>
</div>
<div class="flex items-center">
<input
id="agree-terms"
v-model="agreeTerms"
type="checkbox"
required
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
>
<label for="agree-terms" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
我同意
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">服务条款</a>
和
<a href="#" class="font-medium text-blue-600 hover:text-blue-500">隐私政策</a>
</label>
</div>
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
创建账户
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
const username = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreeTerms = ref(false)
const providers = ref([
{
label: 'Google',
icon: 'i-simple-icons-google',
color: 'neutral',
variant: 'subtle'
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
color: 'neutral',
variant: 'subtle'
}
])
const fields = ref([
{
name: 'email',
type: 'text',
label: 'Email'
},
{
name: 'password',
type: 'password',
label: 'Password'
}
])
</script>
const handleRegister = () => {
// TODO: Implement actual registration logic
console.log('Registration attempt:', {
username: username.value,
email: email.value,
password: password.value,
confirmPassword: confirmPassword.value,
agreeTerms: agreeTerms.value
})
// For demo purposes, redirect to home
navigateTo('/')
}
useSeoMeta({
title: '注册 - Easy Docs',
description: '创建您的 Easy Docs 账户'
})
</script>
<template>
<UAuthForm
class="max-w-md"
title="Login"
description="Enter your credentials to access your account."
icon="i-lucide-user"
:fields="fields"
:providers="providers"
:separator="{
icon: 'i-lucide-user'
}"
/>
</template>