You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
85 lines
2.1 KiB
<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',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
]
|
|
|
|
const { allowRegister } = useGlobalConfig()
|
|
</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 v-if="allowRegister" 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>
|
|
|