From 02e23050d5bc7abe05b1fb29a7dfd062a9bb4180 Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Fri, 17 Apr 2026 00:34:51 +0800
Subject: [PATCH] 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.
---
 app/components/AppShell.vue  | 83 ++++++++++++++++++++++++++++++++++++++++++++
 app/layouts/blank.vue        |  7 ++++
 app/layouts/default.vue      | 80 +++---------------------------------------
 app/layouts/not-login.vue    | 76 +++-------------------------------------
 app/pages/index/index.vue    | 61 +++++++++++++++++++++++++++-----
 app/pages/login/index.vue    | 25 ++++++++-----
 app/pages/register/index.vue | 25 ++++++++-----
 7 files changed, 184 insertions(+), 173 deletions(-)
 create mode 100644 app/components/AppShell.vue
 create mode 100644 app/layouts/blank.vue

diff --git a/app/components/AppShell.vue b/app/components/AppShell.vue
new file mode 100644
index 0000000..b3d778c
--- /dev/null
+++ b/app/components/AppShell.vue
@@ -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>
diff --git a/app/layouts/blank.vue b/app/layouts/blank.vue
new file mode 100644
index 0000000..84888ff
--- /dev/null
+++ b/app/layouts/blank.vue
@@ -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>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 7a3e681..5dc532a 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,77 +1,5 @@
 <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 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>
-
-<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>
\ No newline at end of file
+  <AppShell>
+    <slot />
+  </AppShell>
+</template>
\ No newline at end of file
diff --git a/app/layouts/not-login.vue b/app/layouts/not-login.vue
index d6ee668..223e64d 100644
--- a/app/layouts/not-login.vue
+++ b/app/layouts/not-login.vue
@@ -1,73 +1,5 @@
 <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>
-        </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>
-
-<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>
\ No newline at end of file
+  <AppShell show-auth-actions>
+    <slot />
+  </AppShell>
+</template>
\ No newline at end of file
diff --git a/app/pages/index/index.vue b/app/pages/index/index.vue
index 2a15808..a953a52 100644
--- a/app/pages/index/index.vue
+++ b/app/pages/index/index.vue
@@ -19,23 +19,66 @@ async function logout() {
 </script>
 
 <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">
       <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>
-      <p class="text-sm text-muted">当前用户：{{ user?.username }}</p>
-      <UButton class="mt-4" color="neutral" :loading="logoutLoading" @click="logout">
-        退出登录
-      </UButton>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 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</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 v-else>
       <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>
-      <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="/register" color="neutral" variant="outline">去注册</UButton>
       </div>
diff --git a/app/pages/login/index.vue b/app/pages/login/index.vue
index f619054..42df85e 100644
--- a/app/pages/login/index.vue
+++ b/app/pages/login/index.vue
@@ -6,7 +6,7 @@ import { useAuthSession } from '../../composables/useAuthSession'
 
 definePageMeta({
   title: '登录',
-  layout: 'not-login',
+  layout: 'blank',
 })
 
 type LoginFormState = {
@@ -89,12 +89,20 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
 </script>
 
 <template>
-  <div class="max-w-md mx-auto py-10">
-    <UCard>
+  <div class="min-h-screen flex items-start justify-center px-4 pt-14 pb-8 md:pt-20">
+    <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>
-        <div class="space-y-1">
-          <h1 class="text-xl font-semibold">欢迎登录</h1>
-          <p class="text-sm text-muted">请输入用户名和密码继续</p>
+        <div class="space-y-1 text-center">
+          <h1 class="text-2xl font-semibold">欢迎登录</h1>
+          <p class="text-sm text-muted">请输入用户名和密码继续使用</p>
         </div>
       </template>
 
@@ -131,11 +139,12 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
         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>
       </div>
     </UCard>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/app/pages/register/index.vue b/app/pages/register/index.vue
index 11f91c7..31ab7b5 100644
--- a/app/pages/register/index.vue
+++ b/app/pages/register/index.vue
@@ -5,7 +5,7 @@ import { normalizeSafeRedirect } from '../../utils/auth-routes'
 
 definePageMeta({
   title: '注册',
-  layout: 'not-login',
+  layout: 'blank',
 })
 
 type RegisterFormState = {
@@ -79,12 +79,20 @@ const onSubmit = async (_event: FormSubmitEvent<RegisterFormState>) => {
 </script>
 
 <template>
-  <div class="max-w-md mx-auto py-10">
-    <UCard>
+  <div class="min-h-screen flex items-start justify-center px-4 pt-14 pb-8 md:pt-20">
+    <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>
-        <div class="space-y-1">
-          <h1 class="text-xl font-semibold">创建账号</h1>
-          <p class="text-sm text-muted">请输入用户名和密码完成注册</p>
+        <div class="space-y-1 text-center">
+          <h1 class="text-2xl font-semibold">创建账号</h1>
+          <p class="text-sm text-muted">用户名 3-20 位，密码至少 6 位</p>
         </div>
       </template>
 
@@ -121,11 +129,12 @@ const onSubmit = async (_event: FormSubmitEvent<RegisterFormState>) => {
         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>
       </div>
     </UCard>
+    </div>
   </div>
 </template>