109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<!-- app/components/home/AnswerForm.vue - 答题提交表单，状态全部来自 Pinia store -->
|
||
<script lang="ts" setup>
|
||
import { Search } from "lucide-vue-next";
|
||
import { storeToRefs } from "pinia";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle
|
||
} from "@/components/ui/card";
|
||
import { Label } from "@/components/ui/label";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue
|
||
} from "@/components/ui/select";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import type { QuestionType } from "@/interfaces";
|
||
import { QUESTION_TYPE_OPTIONS, useAnswerStore } from "@/stores/answer";
|
||
|
||
const answerStore = useAnswerStore();
|
||
const { question, questionType, options, searchLoading } =
|
||
storeToRefs(answerStore);
|
||
const AUTO_TYPE_VALUE = "__auto__";
|
||
|
||
/** shadcn Select 不使用空字符串作为 item value，这里只在组件边界做一次映射 */
|
||
const selectedQuestionType = computed({
|
||
get: () => questionType.value || AUTO_TYPE_VALUE,
|
||
set: (value: string) => {
|
||
questionType.value =
|
||
value === AUTO_TYPE_VALUE ? "" : (value as QuestionType);
|
||
}
|
||
});
|
||
|
||
/** 表单提交只触发 store action，组件不直接接触请求服务 */
|
||
const onSubmit = () => {
|
||
void answerStore.searchAnswer();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle class="text-xl">题目查询</CardTitle>
|
||
<CardDescription
|
||
>服务端流式请求模型，前端返回普通 JSON 结果。</CardDescription
|
||
>
|
||
</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>
|
||
|
||
<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>
|
||
<Select v-model="selectedQuestionType">
|
||
<SelectTrigger id="answer-type" class="w-full">
|
||
<SelectValue placeholder="自动判断" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem
|
||
v-for="item in QUESTION_TYPE_OPTIONS"
|
||
:key="item.value || AUTO_TYPE_VALUE"
|
||
:value="item.value || AUTO_TYPE_VALUE"
|
||
>
|
||
{{ item.label }}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</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. 选项一 B. 选项二"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-end">
|
||
<Button type="submit" :disabled="searchLoading">
|
||
<Search class="size-4" />
|
||
<span>{{ searchLoading ? "查询中" : "获取答案" }}</span>
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</template>
|