feat: 新增鉴权

app/components/home/AnswerForm.vue

@@ -1,7 +1,10 @@
 <!-- app/components/home/AnswerForm.vue - 答题提交表单，状态全部来自 Pinia store -->
 <script lang="ts" setup>
+import { toTypedSchema } from "@vee-validate/zod";
 import { Search } from "lucide-vue-next";
 import { storeToRefs } from "pinia";
+import { useForm } from "vee-validate";
+import * as z from "zod";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -11,7 +14,13 @@ import {
   CardHeader,
   CardTitle
 } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from "@/components/ui/form";
 import {
   Select,
   SelectContent,
@@ -26,6 +35,10 @@ import { QUESTION_TYPE_OPTIONS, useAnswerStore } from "@/stores/answer";
 const answerStore = useAnswerStore();
 const { question, questionType, options, searchLoading } =
   storeToRefs(answerStore);
+
+const authStore = useAuthStore();
+/** session 尚未初始化完成（客户端 plugin 还在请求中） */
+const sessionChecking = computed(() => !authStore.initialized);
 const AUTO_TYPE_VALUE = "__auto__";
 
 /** shadcn Select 不使用空字符串作为 item value，这里只在组件边界做一次映射 */
@@ -37,10 +50,47 @@ const selectedQuestionType = computed({
   }
 });
 
-/** 表单提交只触发 store action，组件不直接接触请求服务 */
-const onSubmit = () => {
-  void answerStore.searchAnswer();
-};
+const formSchema = toTypedSchema(
+  z.object({
+    question: z
+      .string({ required_error: "题目不能为空" })
+      .min(1, "题目不能为空"),
+    options: z.string().default("")
+  })
+);
+
+const { handleSubmit, setFieldError } = useForm({
+  validationSchema: formSchema,
+  initialValues: { question: question.value, options: options.value }
+});
+
+let clearErrorTimer: ReturnType<typeof setTimeout> | null = null;
+
+/** 表单提交先更新 store 再触发 action，组件不直接接触请求服务 */
+const onSubmit = handleSubmit(
+  (values) => {
+    if (clearErrorTimer) {
+      clearTimeout(clearErrorTimer);
+      clearErrorTimer = null;
+    }
+    question.value = values.question;
+    options.value = values.options ?? "";
+    void answerStore.searchAnswer();
+  },
+  () => {
+    // 校验失败 5s 后自动清除提示
+    if (clearErrorTimer) clearTimeout(clearErrorTimer);
+    clearErrorTimer = setTimeout(() => {
+      setFieldError("question", undefined);
+      clearErrorTimer = null;
+    }, 5000);
+  }
+);
+
+onUnmounted(() => {
+  // 清除定时器
+  if (clearErrorTimer) clearTimeout(clearErrorTimer);
+});
 </script>
 
 <template>
@@ -53,24 +103,34 @@ const onSubmit = () => {
     </CardHeader>
 
     <CardContent>
-      <form class="grid gap-4" @submit.prevent="onSubmit">
-        <div class="grid gap-2">
-          <Label for="answer-question">题目</Label>
-          <Textarea
-            id="answer-question"
-            v-model="question"
-            class="min-h-32 resize-y"
-            placeholder="输入题目内容"
-          />
-        </div>
+      <form class="grid gap-4" @submit="onSubmit">
+        <FormField
+          v-slot="{ componentField }"
+          name="question"
+          :validate-on-blur="false"
+          :validate-on-change="false"
+          :validate-on-model-update="false"
+        >
+          <FormItem>
+            <FormLabel>题目</FormLabel>
+            <FormControl>
+              <Textarea
+                class="min-h-32 resize-y"
+                placeholder="输入题目内容"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
 
         <div
           class="grid gap-4 md:grid-cols-[220px_minmax(0,1fr)] md:items-start"
         >
           <div class="grid gap-2">
-            <Label for="answer-type">题型</Label>
+            <label class="text-sm font-medium leading-none">题型</label>
             <Select v-model="selectedQuestionType">
-              <SelectTrigger id="answer-type" class="w-full">
+              <SelectTrigger class="w-full">
                 <SelectValue placeholder="自动判断" />
               </SelectTrigger>
               <SelectContent>
@@ -85,22 +145,35 @@ const onSubmit = () => {
             </Select>
           </div>
 
-          <div class="grid gap-2">
-            <Label for="answer-options">选项</Label>
-            <Textarea
-              id="answer-options"
-              v-model="options"
-              class="min-h-24 resize-y"
-              placeholder="A. 选项一&#10;B. 选项二"
-            />
-          </div>
+          <FormField v-slot="{ componentField }" name="options">
+            <FormItem>
+              <FormLabel>选项</FormLabel>
+              <FormControl>
+                <Textarea
+                  class="min-h-24 resize-y"
+                  placeholder="A. 选项一&#10;B. 选项二"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
         </div>
 
         <div class="flex items-center justify-end">
-          <Button type="submit" :disabled="searchLoading">
+          <!-- 已登录或 session 尚未确认：乐观显示正常按钮（SSR/客户端 DOM 一致，避免水合不一致）-->
+          <!-- 确认未登录后才切换为"去登录"，此切换只发生在客户端 plugin 完成后 -->
+          <Button
+            v-if="authStore.isOnline || sessionChecking"
+            type="submit"
+            :disabled="searchLoading"
+          >
             <Search class="size-4" />
             <span>{{ searchLoading ? "查询中" : "获取答案" }}</span>
           </Button>
+          <Button v-else as-child variant="outline">
+            <NuxtLink to="/login">去登录</NuxtLink>
+          </Button>
         </div>
       </form>
     </CardContent>