feat: adopt naive ui and refine shell interactions

src/views/auth/AuthConfirmView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { NButton, NCard, NResult, NSpin } from 'naive-ui'
 import { createClient } from '@supabase/supabase-js'
 
 const router = useRouter()
@@ -69,38 +70,40 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
-    <div class="w-full max-w-sm text-center">
+  <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
+    <div class="mx-auto max-w-3xl">
+      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
       <template v-if="state === 'success'">
-        <span class="text-5xl block mb-4">✅</span>
-        <h1 class="text-2xl font-bold text-gray-900 mb-2">邮箱认证成功</h1>
-        <p class="text-gray-500 mb-2">你的邮箱已确认，现在可以登录了！</p>
-        <p class="text-sm text-gray-400 mb-6">{{ countdown }} 秒后自动跳转登录页面...</p>
-        <RouterLink
-          to="/login"
-          class="inline-flex items-center px-6 py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 transition-colors"
-        >
-          立即登录
-        </RouterLink>
+        <NResult status="success" title="邮箱认证成功" description="你的邮箱已确认，现在可以登录了。">
+          <template #footer>
+            <div class="space-y-4">
+              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动跳转登录页面...</p>
+              <RouterLink to="/login" class="no-underline">
+                <NButton type="primary">立即登录</NButton>
+              </RouterLink>
+            </div>
+          </template>
+        </NResult>
       </template>
 
       <template v-else-if="state === 'failed'">
-        <span class="text-5xl block mb-4">❌</span>
-        <h1 class="text-2xl font-bold text-gray-900 mb-2">认证失败</h1>
-        <p class="text-gray-500 mb-6">邮箱确认链接无效或已过期，请重新注册。</p>
-        <RouterLink
-          to="/register"
-          class="inline-flex items-center px-6 py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 transition-colors"
-        >
-          重新注册
-        </RouterLink>
+        <NResult status="error" title="认证失败" description="邮箱确认链接无效或已过期，请重新注册。">
+          <template #footer>
+            <RouterLink to="/register" class="no-underline">
+              <NButton type="primary">重新注册</NButton>
+            </RouterLink>
+          </template>
+        </NResult>
       </template>
 
       <template v-else>
-        <span class="text-5xl block mb-4 animate-pulse">⏳</span>
-        <h1 class="text-2xl font-bold text-gray-900 mb-2">正在验证...</h1>
-        <p class="text-gray-500">请稍候</p>
+        <div class="flex flex-col items-center justify-center py-12 text-center">
+          <NSpin size="large" />
+          <h1 class="mt-6 text-2xl font-bold text-slate-900">正在验证...</h1>
+          <p class="mt-2 text-slate-500">请稍候</p>
+        </div>
       </template>
+      </NCard>
     </div>
   </div>
 </template>