将登录注册页改为模态

app/app.config.ts

@@ -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',

app/components/AppHeader.vue

@@ -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
+  isSidebarOpen?: boolean;
-  toggleSidebar?: () => void
+  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="() => {
+          @click="
-            console.log('汉堡按钮被点击')
+            () => {
-            props.toggleSidebar()
+              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 
+          <svg
-            class="w-5 h-5" 
+            class="w-5 h-5"
-            fill="none" 
+            fill="none"
-            stroke="currentColor" 
+            stroke="currentColor"
             viewBox="0 0 24 24"
             :class="{ 'rotate-180': props.isSidebarOpen }"
           >
-            <path 
+            <path
               v-if="!props.isSidebarOpen"
-              stroke-linecap="round" 
+              stroke-linecap="round"
-              stroke-linejoin="round" 
+              stroke-linejoin="round"
-              stroke-width="2" 
+              stroke-width="2"
               d="M4 6h16M4 12h16M4 18h16"
             />
-            <path 
+            <path
               v-else
-              stroke-linecap="round" 
+              stroke-linecap="round"
-              stroke-linejoin="round" 
+              stroke-linejoin="round"
-              stroke-width="2" 
+              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 -->
+          <!-- Settings Button -->
-        <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"
+            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="页面设置"
+            title="页面设置"
-          @click="isSettingsOpen = !isSettingsOpen"
+            @click="isSettingsOpen = !isSettingsOpen"
-        >
+          >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg
-          <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" />
+              class="w-5 h-5"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              fill="none"
-        </svg>
+              stroke="currentColor"
-      </button>
+              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
+          <button
-            to="/login"
+            @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>
+          </button>
-          <NuxtLink
+          <button
-            to="/register"
+            @click="handleLoginRegister('register')"
-            class="text-sm font-medium text-white bg-primary rounded-md"
+            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>
+          </button>
-          <!-- 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> -->
         </div>
       </div>
     </div>
-        <!-- Theme Settings Panel -->
+    <!-- Theme Settings Panel -->
-  <ThemeSettings 
+    <ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
-    :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>

app/components/auth/login.vue

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

app/components/auth/register.vue

@@ -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 providers = ref([
-const email = ref('')
+  {
-const password = ref('')
+    label: 'Google',
-const confirmPassword = ref('')
+    icon: 'i-simple-icons-google',
-const agreeTerms = ref(false)
+    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 = () => {
+<template>
-  // TODO: Implement actual registration logic
+  <UAuthForm
-  console.log('Registration attempt:', { 
+    class="max-w-md"
-    username: username.value, 
+    title="Login"
-    email: email.value, 
+    description="Enter your credentials to access your account."
-    password: password.value,
+    icon="i-lucide-user"
-    confirmPassword: confirmPassword.value,
+    :fields="fields"
-    agreeTerms: agreeTerms.value 
+    :providers="providers"
-  })
+    :separator="{
-  
+      icon: 'i-lucide-user'
-  // For demo purposes, redirect to home
+    }"
-  navigateTo('/')
+  />
-}
+</template>
-
-useSeoMeta({
-  title: '注册 - Easy Docs',
-  description: '创建您的 Easy Docs 账户'
-})
-</script>