feat: scaffold infrastructure - router, pinia, tailwind, amap, auth store, page placeholders

2026-05-20 23:31:55 +08:00
parent eb183448b4
commit c49ac7a42e
29 changed files with 1624 additions and 432 deletions
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const router = useRouter()
+const route = useRoute()
+
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+  try {
+    await authStore.login(email.value, password.value)
+    const redirect = (route.query.redirect as string) || '/'
+    router.push(redirect)
+  } catch (e: unknown) {
+    error.value = e instanceof Error ? e.message : '登录失败'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<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>
+
+      <form @submit.prevent="handleLogin" class="space-y-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
+          <input
+            v-model="email"
+            type="email"
+            required
+            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"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
+          <input
+            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"
+          />
+        </div>
+
+        <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+
+        <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"
+        >
+          {{ loading ? '登录中...' : '登录' }}
+        </button>
+      </form>
+
+      <p class="mt-6 text-center text-sm text-gray-500">
+        没有账号？
+        <RouterLink to="/register" class="text-sky-600 hover:text-sky-700 font-medium">去注册</RouterLink>
+      </p>
+    </div>
+  </div>
+</template>