feat: implement Login and Register views

2026-03-24 15:22:00 +08:00
parent b7eacaa953
commit 3aa9f3425f
2 changed files with 116 additions and 0 deletions
@@ -0,0 +1,53 @@
+<!-- src/views/Login.vue -->
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <n-card class="w-96" title="登录">
+      <n-form ref="formRef" :model="form" :rules="rules">
+        <n-form-item path="username" label="用户名">
+          <n-input v-model:value="form.username" placeholder="输入用户名" />
+        </n-form-item>
+        <n-form-item path="password" label="密码">
+          <n-input v-model:value="form.password" type="password" placeholder="输入密码" />
+        </n-form-item>
+        <n-button type="primary" block :loading="loading" @click="handleLogin">
+          登录
+        </n-button>
+      </n-form>
+      <div class="mt-4 text-center">
+        还没有账号？<router-link to="/register" class="text-blue-500">注册</router-link>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { NCard, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
+import { useAuthStore } from '../stores/auth'
+
+const router = useRouter()
+const message = useMessage()
+const authStore = useAuthStore()
+
+const form = ref({ username: '', password: '' })
+const loading = ref(false)
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名' }],
+  password: [{ required: true, message: '请输入密码' }],
+}
+
+const handleLogin = async () => {
+  loading.value = true
+  try {
+    await authStore.login(form.value.username, form.value.password)
+    message.success('登录成功')
+    router.push('/')
+  } catch (error: any) {
+    message.error(error.response?.data?.detail || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
@@ -0,0 +1,63 @@
+<!-- src/views/Register.vue -->
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <n-card class="w-96" title="注册">
+      <n-form ref="formRef" :model="form" :rules="rules">
+        <n-form-item path="username" label="用户名">
+          <n-input v-model:value="form.username" placeholder="输入用户名" />
+        </n-form-item>
+        <n-form-item path="email" label="邮箱">
+          <n-input v-model:value="form.email" placeholder="输入邮箱" />
+        </n-form-item>
+        <n-form-item path="password" label="密码">
+          <n-input v-model:value="form.password" type="password" placeholder="输入密码" />
+        </n-form-item>
+        <n-button type="primary" block :loading="loading" @click="handleRegister">
+          注册
+        </n-button>
+      </n-form>
+      <div class="mt-4 text-center">
+        已有账号？<router-link to="/login" class="text-blue-500">登录</router-link>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { NCard, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
+import { useAuthStore } from '../stores/auth'
+
+const router = useRouter()
+const message = useMessage()
+const authStore = useAuthStore()
+
+const form = ref({ username: '', email: '', password: '' })
+const loading = ref(false)
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名' }],
+  email: [
+    { required: true, message: '请输入邮箱' },
+    { type: 'email', message: '请输入有效邮箱' }
+  ],
+  password: [
+    { required: true, message: '请输入密码' },
+    { min: 6, message: '密码至少6位' }
+  ],
+}
+
+const handleRegister = async () => {
+  loading.value = true
+  try {
+    await authStore.register(form.value.username, form.value.email, form.value.password)
+    message.success('注册成功，请登录')
+    router.push('/login')
+  } catch (error: any) {
+    message.error(error.response?.data?.detail || '注册失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>