topuser
/
nuxt4-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: create AppShell component and refactor layouts for improved structure 

Introduce a new AppShell component to encapsulate the main application layout, including header, footer, and menu items. Refactor existing layouts (default and not-login) to utilize the new AppShell component, enhancing code reusability and maintainability. Update the blank layout for a simplified structure. Modify index, login, and register pages for consistent styling and improved user experience.
feat/auth-access-control
npmrun 2 days ago
parent
5483edb74c
commit
02e23050d5
7 changed files with 184 additions and 173 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 83
      app/components/AppShell.vue
  2. 7
      app/layouts/blank.vue
  3. 78
      app/layouts/default.vue
  4. 74
      app/layouts/not-login.vue
  5. 61
      app/pages/index/index.vue
  6. 25
      app/pages/login/index.vue
  7. 25
      app/pages/register/index.vue

83
app/components/AppShell.vue
View File

@ -0,0 +1,83 @@
<script setup lang="ts">
withDefaults(
defineProps<{
showAuthActions?: boolean
}>(),
{
showAuthActions: false,
},
)
const menuItems = [
[
{
label: '首页',
icon: 'i-lucide-house',
to: '/',
},
{
label: '文档',
icon: 'i-lucide-book-open',
children: [
{
label: 'Nuxt',
to: 'https://nuxt.com/docs',
target: '_blank',
},
{
label: 'Nuxt UI',
to: 'https://ui.nuxt.com/getting-started',
target: '_blank',
},
],
},
{
label: '示例',
icon: 'i-lucide-layout-grid',
children: [
{
label: 'Hello API',
to: '/api/hello',
target: '_blank',
},
],
},
],
]
</script>
<template>
<UApp>
<div class="min-h-screen bg-default text-default flex flex-col">
<header class="border-b border-default">
<UContainer class="h-14 flex items-center justify-between">
<div class="flex items-center gap-2">
<NuxtLink to="/" class="font-semibold tracking-tight">
BigHouse
</NuxtLink>
<UDropdownMenu :items="menuItems" :content="{ align: 'end' }">
<UButton color="neutral" variant="ghost" label="菜单" icon="i-lucide-menu" />
</UDropdownMenu>
</div>
<div v-if="showAuthActions" class="flex items-center gap-2">
<UButton color="neutral" variant="ghost" to="/login" label="登录" />
<UButton color="neutral" variant="outline" to="/register" label="注册" />
</div>
</UContainer>
</header>
<main class="flex-1">
<UContainer class="py-8">
<slot />
</UContainer>
</main>
<footer class="border-t border-default">
<UContainer class="h-12 flex items-center text-sm text-muted">
Built with Nuxt + Nuxt UI & BigHouse
</UContainer>
</footer>
</div>
</UApp>
</template>

7
app/layouts/blank.vue
View File

@ -0,0 +1,7 @@
<template>
<UApp>
<div class="min-h-screen bg-gradient-to-br from-neutral-50 via-white to-neutral-100 text-default">
<slot />
</div>
</UApp>
</template>

78
app/layouts/default.vue
View File

@ -1,77 +1,5 @@
<template> <template>
<UApp> <AppShell>
<div class="min-h-screen bg-default text-default flex flex-col"> <slot />
<header class="border-b border-default"> </AppShell>
<UContainer class="h-14 flex items-center justify-between">
<div class="flex items-center gap-2">
<NuxtLink to="/" class="font-semibold tracking-tight">
BigHouse
</NuxtLink>
<UDropdownMenu :items="menuItems" :content="{ align: 'end' }">
<UButton color="neutral" variant="ghost" label="菜单" icon="i-lucide-menu" />
</UDropdownMenu>
</div>
<div class="flex items-center gap-2">
<UButton color="neutral" variant="ghost" to="/login" label="登录" />
<UButton color="neutral" variant="outline" to="/register" label="注册" />
</div>
</UContainer>
</header>
<main class="flex-1">
<UContainer class="py-8">
<NuxtPage />
</UContainer>
</main>
<footer class="border-t border-default">
<UContainer class="h-12 flex items-center text-sm text-muted">
Built with Nuxt + Nuxt UI & BigHouse
</UContainer>
</footer>
</div>
</UApp>
</template> </template>
<script setup lang="ts">
const menuItems = [
[
{
label: "首页",
icon: "i-lucide-house",
to: "/",
},
{
label: "文档",
icon: "i-lucide-book-open",
children: [
{
label: "Nuxt",
to: "https://nuxt.com/docs",
target: "_blank",
},
{
label: "Nuxt UI",
to: "https://ui.nuxt.com/getting-started",
target: "_blank",
},
],
},
{
label: "示例",
icon: "i-lucide-layout-grid",
children: [
{
label: "Hello API",
to: "/api/hello",
target: "_blank",
},
{
label: "首页页面",
to: "/",
},
],
},
],
]
</script>

74
app/layouts/not-login.vue
View File

@ -1,73 +1,5 @@
<template> <template>
<UApp> <AppShell show-auth-actions>
<div class="min-h-screen bg-default text-default flex flex-col"> <slot />
<header class="border-b border-default"> </AppShell>
<UContainer class="h-14 flex items-center justify-between">
<div class="flex items-center gap-2">
<NuxtLink to="/" class="font-semibold tracking-tight">
BigHouse
</NuxtLink>
<UDropdownMenu :items="menuItems" :content="{ align: 'end' }">
<UButton color="neutral" variant="ghost" label="菜单" icon="i-lucide-menu" />
</UDropdownMenu>
</div>
</UContainer>
</header>
<main class="flex-1">
<UContainer class="py-8">
<NuxtPage />
</UContainer>
</main>
<footer class="border-t border-default">
<UContainer class="h-12 flex items-center text-sm text-muted">
Built with Nuxt + Nuxt UI & BigHouse
</UContainer>
</footer>
</div>
</UApp>
</template> </template>
<script setup lang="ts">
const menuItems = [
[
{
label: "首页",
icon: "i-lucide-house",
to: "/",
},
{
label: "文档",
icon: "i-lucide-book-open",
children: [
{
label: "Nuxt",
to: "https://nuxt.com/docs",
target: "_blank",
},
{
label: "Nuxt UI",
to: "https://ui.nuxt.com/getting-started",
target: "_blank",
},
],
},
{
label: "示例",
icon: "i-lucide-layout-grid",
children: [
{
label: "Hello API",
to: "/api/hello",
target: "_blank",
},
{
label: "首页页面",
to: "/",
},
],
},
],
]
</script>

61
app/pages/index/index.vue
View File

@ -19,23 +19,66 @@ async function logout() {
</script> </script>
<template> <template>
<div class="max-w-3xl mx-auto py-10"> <div class="max-w-5xl mx-auto py-8 space-y-6">
<UCard v-if="loggedIn"> <UCard v-if="loggedIn">
<template #header> <template #header>
<h1 class="text-xl font-semibold">欢迎回来</h1> <div class="flex items-start justify-between gap-4">
<div>
<h1 class="text-2xl font-semibold">欢迎回来，{{ user?.username }}</h1>
<p class="text-sm text-muted mt-1">你已登录，可访问站内受保护内容。</p>
</div>
<UBadge color="success" variant="subtle">已登录</UBadge>
</div>
</template> </template>
<p class="text-sm text-muted">当前用户：{{ user?.username }}</p>
<UButton class="mt-4" color="neutral" :loading="logoutLoading" @click="logout"> <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
退出登录 <UCard>
</UButton> <p class="text-xs text-muted">状态</p>
<p class="mt-1 font-medium">会话有效</p>
</UCard>
<UCard>
<p class="text-xs text-muted">入口</p>
<p class="mt-1 font-medium">首页 / 配置 / API</p>
</UCard>
<UCard>
<p class="text-xs text-muted">建议</p>
<p class="mt-1 font-medium">可继续扩展个人中心</p>
</UCard>
</div>
<div class="mt-5 flex items-center gap-3">
<UButton color="neutral" :loading="logoutLoading" @click="logout">
退出登录
</UButton>
<UButton to="/api/config/me" target="_blank" variant="outline">
打开受保护接口
</UButton>
</div>
</UCard> </UCard>
<UCard v-else> <UCard v-else>
<template #header> <template #header>
<h1 class="text-xl font-semibold">欢迎来到本站</h1> <div class="flex items-start justify-between gap-4">
<div>
<h1 class="text-2xl font-semibold">欢迎来到本站</h1>
<p class="text-sm text-muted mt-1">当前为访客模式，仅开放首页与认证页面。</p>
</div>
<UBadge color="neutral" variant="subtle">未登录</UBadge>
</div>
</template> </template>
<p class="text-sm text-muted">登录后可访问更多受保护内容。</p>
<div class="mt-4 flex gap-3"> <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<UCard>
<p class="text-xs text-muted">访问策略</p>
<p class="mt-1 font-medium">登录优先，白名单放行</p>
</UCard>
<UCard>
<p class="text-xs text-muted">安全能力</p>
<p class="mt-1 font-medium">API 默认鉴权 + 401 统一处理</p>
</UCard>
</div>
<div class="mt-5 flex gap-3">
<UButton to="/login">去登录</UButton> <UButton to="/login">去登录</UButton>
<UButton to="/register" color="neutral" variant="outline">去注册</UButton> <UButton to="/register" color="neutral" variant="outline">去注册</UButton>
</div> </div>

25
app/pages/login/index.vue
View File

@ -6,7 +6,7 @@ import { useAuthSession } from '../../composables/useAuthSession'
definePageMeta({ definePageMeta({
title: '登录', title: '登录',
layout: 'not-login', layout: 'blank',
}) })
type LoginFormState = { type LoginFormState = {
@ -89,12 +89,20 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
</script> </script>
<template> <template>
<div class="max-w-md mx-auto py-10"> <div class="min-h-screen flex items-start justify-center px-4 pt-14 pb-8 md:pt-20">
<UCard> <div class="w-full max-w-md space-y-4">
<div class="text-center space-y-1">
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-muted hover:text-primary transition-colors">
<UIcon name="i-lucide-arrow-left" class="size-4" />
返回首页
</NuxtLink>
</div>
<UCard class="shadow-lg">
<template #header> <template #header>
<div class="space-y-1"> <div class="space-y-1 text-center">
<h1 class="text-xl font-semibold">欢迎登录</h1> <h1 class="text-2xl font-semibold">欢迎登录</h1>
<p class="text-sm text-muted">请输入用户名和密码继续</p> <p class="text-sm text-muted">请输入用户名和密码继续使用</p>
</div> </div>
</template> </template>
@ -131,11 +139,12 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
class="mt-4" class="mt-4"
/> />
<div class="mt-4 flex items-center justify-between text-sm"> <div class="mt-4 flex items-center justify-center text-sm">
<NuxtLink to="/register" class="text-primary hover:underline"> <NuxtLink to="/register" class="text-primary hover:underline">
去注册 没有账号？去注册
</NuxtLink> </NuxtLink>
</div> </div>
</UCard> </UCard>
</div>
</div> </div>
</template> </template>

25
app/pages/register/index.vue
View File

@ -5,7 +5,7 @@ import { normalizeSafeRedirect } from '../../utils/auth-routes'
definePageMeta({ definePageMeta({
title: '注册', title: '注册',
layout: 'not-login', layout: 'blank',
}) })
type RegisterFormState = { type RegisterFormState = {
@ -79,12 +79,20 @@ const onSubmit = async (_event: FormSubmitEvent<RegisterFormState>) => {
</script> </script>
<template> <template>
<div class="max-w-md mx-auto py-10"> <div class="min-h-screen flex items-start justify-center px-4 pt-14 pb-8 md:pt-20">
<UCard> <div class="w-full max-w-md space-y-4">
<div class="text-center space-y-1">
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-muted hover:text-primary transition-colors">
<UIcon name="i-lucide-arrow-left" class="size-4" />
返回首页
</NuxtLink>
</div>
<UCard class="shadow-lg">
<template #header> <template #header>
<div class="space-y-1"> <div class="space-y-1 text-center">
<h1 class="text-xl font-semibold">创建账号</h1> <h1 class="text-2xl font-semibold">创建账号</h1>
<p class="text-sm text-muted">请输入用户名和密码完成注册</p> <p class="text-sm text-muted">用户名 3-20 位，密码至少 6 位</p>
</div> </div>
</template> </template>
@ -121,11 +129,12 @@ const onSubmit = async (_event: FormSubmitEvent<RegisterFormState>) => {
class="mt-4" class="mt-4"
/> />
<div class="mt-4 flex items-center justify-between text-sm"> <div class="mt-4 flex items-center justify-center text-sm">
<NuxtLink to="/login" class="text-primary hover:underline"> <NuxtLink to="/login" class="text-primary hover:underline">
已有账号，去登录 已有账号？去登录
</NuxtLink> </NuxtLink>
</div> </div>
</UCard> </UCard>
</div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save