diff --git a/src/components/common/AuthModal.vue b/src/components/common/AuthModal.vue
index 33d6883..c4ec31b 100644
--- a/src/components/common/AuthModal.vue
+++ b/src/components/common/AuthModal.vue
@@ -9,10 +9,17 @@ const loading = ref(false)
 const formState = ref({
   username: '',
   password: '',
-  remember: true
+  remember: true,
+  email: '',
+  code: ''
 })
 
-const userStore = useUserStore() // Initialize the store outside the handleSubmit function
+const loginType = ref(1)
+const isSend = ref(1)
+const reloadSendTime = ref(60)
+let timer = null
+
+const userStore = useUserStore()
 
 onMounted(() => {
   AOS.init({
@@ -25,7 +32,6 @@ onMounted(() => {
 
 const show = () => {
   visible.value = true
-  // 在下一个渲染周期触发AOS动画
   setTimeout(() => {
     document.querySelectorAll('[data-aos]').forEach(el => {
       el.classList.add('aos-animate')
@@ -47,12 +53,26 @@ const handleSubmit = async () => {
   }
 }
 
+const sendEmailCode = () => {
+  // 模拟发送验证码
+  alert('验证码已发送，验证码为：123456')
+  isSend.value = 2
+  timer = setInterval(() => {
+    if (reloadSendTime.value > 0) {
+      reloadSendTime.value--
+    } else {
+      clearInterval(timer)
+      isSend.value = 1
+      reloadSendTime.value = 60
+    }
+  }, 1000)
+}
+
 defineExpose({
   show,
   close
 })
 </script>
-
 <template>
   <!-- 模态框背景遮罩 -->
   <div
@@ -92,7 +112,8 @@ defineExpose({
           </button>
         </div>
 
-        <div class="px-8 pt-12 pb-8">
+        <!-- 登录表单 -->
+        <div v-if="loginType === 1" class="px-8 pt-12 pb-8">
           <div class="text-center mb-8" data-aos="fade-down" data-aos-delay="100">
             <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="modal-title">
               欢迎登录
@@ -184,51 +205,163 @@ defineExpose({
               </button>
             </div>
 
-            <!-- 分割线和其他登录方式 -->
-            <div class="mt-6" data-aos="fade-up" data-aos-delay="600">
-              <div class="relative">
-                <div class="absolute inset-0 flex items-center">
-                  <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
-                </div>
-                <div class="relative flex justify-center text-sm">
-                  <span class="px-2 bg-white/90 dark:bg-gray-800/90 text-gray-500 dark:text-gray-400">
-                    其他登录方式
-                  </span>
+            <!-- 注册链接 -->
+            <div class="text-sm text-center mt-6" data-aos="fade-up" data-aos-delay="700">
+              <span class="text-gray-600 dark:text-gray-400">还没有账号? </span>
+              <a href="javascript:;" @click="loginType = 2" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
+                立即注册
+              </a>
+            </div>
+          </form>
+        </div>
+        <!-- 注册表单 -->
+        <div v-else-if="loginType === 2" class="px-8 pt-12 pb-8">
+          <div class="text-center mb-8" data-aos="fade-down" data-aos-delay="100">
+            <h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="modal-title">
+              欢迎注册
+            </h3>
+          </div>
+
+          <form @submit.prevent="handleSubmit" class="space-y-6">
+            <!-- 用户名 -->
+            <div data-aos="fade-up" data-aos-delay="200">
+              <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                用户名
+              </label>
+              <div class="relative rounded-lg shadow-sm">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                  </svg>
                 </div>
+                <input
+                    id="username"
+                    v-model="formState.username"
+                    type="text"
+                    name="username"
+                    autocomplete="username"
+                    required
+                    class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
+                    placeholder="请输入用户名"
+                />
               </div>
+            </div>
 
-              <div class="mt-6 grid grid-cols-3 gap-3">
-                <div>
-                  <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white/70 dark:bg-gray-700/70 backdrop-blur-sm text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-600 cursor-pointer transition-all duration-300">
-                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
-                    </svg>
-                  </a>
+            <!-- 密码 -->
+            <div data-aos="fade-up" data-aos-delay="300">
+              <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                密码
+              </label>
+              <div class="relative rounded-lg shadow-sm">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
                 </div>
+                <input
+                    id="password"
+                    v-model="formState.password"
+                    type="password"
+                    name="password"
+                    autocomplete="current-password"
+                    required
+                    class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
+                    placeholder="请输入密码"
+                />
+              </div>
+            </div>
 
-                <div>
-                  <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white/70 dark:bg-gray-700/70 backdrop-blur-sm text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-600 cursor-pointer transition-all duration-300">
-                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+            <!-- 邮箱 -->
+            <div data-aos="fade-up" data-aos-delay="400" class="flex items-center">
+              <div class="flex-1">
+                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  邮箱
+                </label>
+                <div class="relative rounded-lg shadow-sm">
+                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
+                         stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                     </svg>
-                  </a>
-                </div>
-
-                <div>
-                  <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white/70 dark:bg-gray-700/70 backdrop-blur-sm text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-600 cursor-pointer transition-all duration-300">
-                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                      <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
-                    </svg>
-                  </a>
+                  </div>
+                  <input id="email" v-model="formState.email" type="email" name="email" autocomplete="email" required
+                         class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
+                         placeholder="请输入您的邮箱">
                 </div>
               </div>
             </div>
 
-            <!-- 注册链接 -->
+            <!-- 邮箱验证码 -->
+            <div data-aos="fade-up" data-aos-delay="500" class="flex items-center">
+              <div class="flex-1">
+                <label for="verification-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  验证码
+                </label>
+                <div class="relative rounded-lg shadow-sm">
+                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
+                         stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                    </svg>
+                  </div>
+                  <input id="verification-code" v-model="formState.code" type="text" name="code" autocomplete="one-time-code"
+                         required
+                         class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
+                         placeholder="请输入验证码">
+                </div>
+              </div>
+              <button v-if="isSend === 1" @click="sendEmailCode" class="mt-6 ml-3 px-4 py-3 bg-rose-500 text-white rounded-lg hover:bg-rose-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500">
+                发送验证码
+              </button>
+              <!-- 假设这里有个用于重新发送验证码的按钮 -->
+              <button v-else id="resend-code-btn" class="mt-6 ml-3 px-4 py-3 bg-rose-500 text-white rounded-lg hover:bg-rose-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500" :disabled="reloadSendTime > 0">
+                {{ reloadSendTime > 0 ? `重新发送 (${reloadSendTime})` : '重新发送' }}
+              </button>
+            </div>
+
+            <!-- 记住我 -->
+            <div class="flex items-center justify-between" data-aos="fade-up" data-aos-delay="400">
+              <div class="flex items-center">
+                <input
+                    id="remember-me"
+                    v-model="formState.remember"
+                    name="remember-me"
+                    type="checkbox"
+                    class="h-4 w-4 text-rose-600 focus:ring-rose-500 border-gray-300 dark:border-gray-600 rounded cursor-pointer"
+                />
+                <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+                  记住我
+                </label>
+              </div>
+              <div class="text-sm">
+                <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
+                  忘记密码?
+                </a>
+              </div>
+            </div>
+
+            <!-- 注册按钮 -->
+            <div data-aos="fade-up" data-aos-delay="500">
+              <button
+                  type="submit"
+                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 cursor-pointer transition-all duration-300 hover:shadow-lg"
+                  :disabled="loading"
+              >
+                <svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {{ loading ? '注册中...' : '立即注册' }}
+              </button>
+            </div>
+
+            <!-- 登录链接 -->
             <div class="text-sm text-center mt-6" data-aos="fade-up" data-aos-delay="700">
-              <span class="text-gray-600 dark:text-gray-400">还没有账号? </span>
-              <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
-                立即注册
+              <span class="text-gray-600 dark:text-gray-400">已有账号? </span>
+              <a href="javascript:;" @click="loginType = 1" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
+                立即登录
               </a>
             </div>
           </form>
@@ -263,4 +396,4 @@ button, a, [role="button"], .cursor-pointer {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 21946af..472c238 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -109,7 +109,8 @@ onMounted(() => {
                   </a>
                   <hr class="my-1 border-gray-200 dark:border-gray-700" />
                   <a
-                      href="#"
+                      @click="userStore.logout()"
+                      href="javascript:;"
                       class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-rose-50 dark:hover:bg-rose-900/20 hover:text-rose-600 dark:hover:text-rose-400"
                   >
                     退出登录