feat: complete auth flow - email confirmation, login state, route guards

src/views/auth/LoginView.vue

@@ -20,7 +20,7 @@ async function handleLogin() {
     const redirect = (route.query.redirect as string) || '/'
     router.push(redirect)
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : '登录失败'
+    error.value = e instanceof Error ? e.message : '登录失败，请稍后重试'
   } finally {
     loading.value = false
   }
@@ -30,7 +30,11 @@ async function handleLogin() {
 <template>
   <div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
     <div class="w-full max-w-sm">
-      <h1 class="text-2xl font-bold text-gray-900 text-center mb-8">登录 OpenCloud</h1>
+      <div class="text-center mb-8">
+        <span class="text-5xl block mb-4">☁️</span>
+        <h1 class="text-2xl font-bold text-gray-900">登录 OpenCloud</h1>
+        <p class="text-sm text-gray-500 mt-1">记录你眼中的每一朵云</p>
+      </div>
 
       <form @submit.prevent="handleLogin" class="space-y-4">
         <div>
@@ -39,8 +43,9 @@ async function handleLogin() {
             v-model="email"
             type="email"
             required
+            autocomplete="email"
             placeholder="your@email.com"
-            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
+            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
           />
         </div>
 
@@ -50,17 +55,20 @@ async function handleLogin() {
             v-model="password"
             type="password"
             required
-            placeholder="至少8位"
-            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
+            autocomplete="current-password"
+            placeholder="输入密码"
+            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
           />
         </div>
 
-        <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+        <div v-if="error" class="p-3 bg-red-50 border border-red-200 rounded-lg">
+          <p class="text-sm text-red-600">{{ error }}</p>
+        </div>
 
         <button
           type="submit"
           :disabled="loading"
-          class="w-full py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 disabled:opacity-50 transition-colors"
+          class="w-full py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 disabled:opacity-50 transition-colors"
         >
           {{ loading ? '登录中...' : '登录' }}
         </button>