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.
76 lines
1.8 KiB
76 lines
1.8 KiB
<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">
|
|
Nuxt4 Demo
|
|
</NuxtLink>
|
|
<UDropdownMenu :items="menuItems" :content="{ align: 'end' }">
|
|
<UButton color="neutral" variant="ghost" label="菜单" icon="i-lucide-menu" />
|
|
</UDropdownMenu>
|
|
</div>
|
|
<div>
|
|
<UButton color="neutral" variant="ghost" 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
|
|
</UContainer>
|
|
</footer>
|
|
</div>
|
|
</UApp>
|
|
</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: "/index",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
]
|
|
</script>
|