feat: 新增鉴权

2026-05-22 22:38:01 +08:00
parent b02f15f735
commit 3857f77f8b
38 changed files with 1697 additions and 195 deletions
@@ -0,0 +1,136 @@
+<!-- app/pages/register.vue - 新用户注册页 -->
+<script lang="ts" setup>
+import { toTypedSchema } from "@vee-validate/zod";
+import { useForm } from "vee-validate";
+import * as z from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useAuthStore } from "@/stores/auth";
+
+useHead({ title: "注册 - OCS AI 答题服务" });
+
+const authStore = useAuthStore();
+
+// 已登录用户访问注册页，直接跳首页
+watchEffect(() => {
+  if (authStore.isOnline) navigateTo("/");
+});
+
+const formSchema = toTypedSchema(
+  z.object({
+    name: z
+      .string({ required_error: "昵称不能为空" })
+      .min(1, "昵称不能为空")
+      .max(20, "昵称不能超过 20 个字符"),
+    email: z
+      .string({ required_error: "邮箱不能为空" })
+      .min(1, "邮箱不能为空")
+      .email("请输入有效的邮箱地址"),
+    password: z
+      .string({ required_error: "密码不能为空" })
+      .min(8, "密码至少 8 位")
+      .max(100, "密码不能超过 100 位")
+      .regex(/[a-zA-Z]/, "密码必须包含英文字母")
+      .regex(/[0-9]/, "密码必须包含数字")
+  })
+);
+
+const { handleSubmit, isSubmitting } = useForm({
+  validationSchema: formSchema
+});
+
+const onSubmit = handleSubmit(async (values) => {
+  const ok = await authStore.signUp(values.name, values.email, values.password);
+  if (ok) {
+    await navigateTo("/");
+  }
+});
+</script>
+
+<template>
+  <div class="flex min-h-[60vh] items-center justify-center">
+    <div class="w-full max-w-sm space-y-6">
+      <div class="space-y-1 text-center">
+        <h1 class="text-2xl font-semibold">注册</h1>
+        <p class="text-sm text-muted-foreground">创建新账号</p>
+      </div>
+
+      <form class="space-y-4" @submit="onSubmit">
+        <FormField v-slot="{ componentField }" name="name">
+          <FormItem>
+            <FormLabel>昵称</FormLabel>
+            <FormControl>
+              <Input
+                type="text"
+                autocomplete="name"
+                placeholder="你的昵称"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="email">
+          <FormItem>
+            <FormLabel>邮箱</FormLabel>
+            <FormControl>
+              <Input
+                type="email"
+                autocomplete="email"
+                placeholder="your@email.com"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="password">
+          <FormItem>
+            <FormLabel>密码</FormLabel>
+            <FormControl>
+              <Input
+                type="password"
+                autocomplete="new-password"
+                placeholder="至少 8 位"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <p v-if="authStore.error" class="text-sm text-destructive">
+          {{ authStore.error }}
+        </p>
+
+        <Button
+          type="submit"
+          :disabled="isSubmitting || authStore.loading || !authStore.initialized"
+          class="w-full"
+        >
+          {{ authStore.loading ? "注册中..." : "注册" }}
+        </Button>
+      </form>
+
+      <p class="text-center text-sm text-muted-foreground">
+        已有账号？
+        <NuxtLink
+          to="/login"
+          class="underline underline-offset-4 hover:text-primary"
+        >
+          登录
+        </NuxtLink>
+      </p>
+    </div>
+  </div>
+</template>