添加推荐问题修改接口

frontend-web/src/pages/RecommendedQuestionsPage.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { GripVerticalIcon, PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  GripVerticalIcon,
+  Loader2Icon,
+  PencilIcon,
+  PlusIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -14,7 +20,13 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
+import {
+  useCreateRecommendedQuestion,
+  useDeleteRecommendedQuestion,
+  useRecommendedQuestions,
+  useReorderRecommendedQuestions,
+  useUpdateRecommendedQuestion,
+} from "@/core/recommended-questions/hooks";
 import type { RecommendedQuestion } from "@/core/recommended-questions";
 
 type DialogState =
@@ -22,12 +34,13 @@ type DialogState =
   | { mode: "edit"; question: RecommendedQuestion }
   | null;
 
-function generateId() {
-  return `q-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-}
-
 export default function RecommendedQuestionsPage() {
-  const [questions, setQuestions] = useRecommendedQuestions();
+  const { questions, isLoading, error } = useRecommendedQuestions();
+  const createMutation = useCreateRecommendedQuestion();
+  const updateMutation = useUpdateRecommendedQuestion();
+  const deleteMutation = useDeleteRecommendedQuestion();
+  const reorderMutation = useReorderRecommendedQuestions();
+
   const [dialog, setDialog] = useState<DialogState>(null);
   const [formTitle, setFormTitle] = useState("");
   const [formContent, setFormContent] = useState("");
@@ -53,7 +66,7 @@ export default function RecommendedQuestionsPage() {
     setDialog(null);
   }
 
-  function handleSave() {
+  async function handleSave() {
     const title = formTitle.trim();
     const content = formContent.trim();
     if (!title || !content) {
@@ -61,24 +74,35 @@ export default function RecommendedQuestionsPage() {
       return;
     }
 
-    if (dialog?.mode === "add") {
-      setQuestions([...questions, { id: generateId(), title, content }]);
-      toast.success("问题已添加");
-    } else if (dialog?.mode === "edit") {
-      setQuestions(
-        questions.map((q) =>
-          q.id === dialog.question.id ? { ...q, title, content } : q,
-        ),
-      );
-      toast.success("问题已更新");
+    try {
+      if (dialog?.mode === "add") {
+        await createMutation.mutateAsync({
+          title,
+          content,
+          sort_order: questions.length,
+        });
+        toast.success("问题已添加");
+      } else if (dialog?.mode === "edit") {
+        await updateMutation.mutateAsync({
+          id: dialog.question.id,
+          body: { title, content },
+        });
+        toast.success("问题已更新");
+      }
+      closeDialog();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "操作失败");
     }
-    closeDialog();
   }
 
-  function handleDelete(q: RecommendedQuestion) {
-    setQuestions(questions.filter((item) => item.id !== q.id));
-    setDeleteTarget(null);
-    toast.success("问题已删除");
+  async function handleDelete(q: RecommendedQuestion) {
+    try {
+      await deleteMutation.mutateAsync(q.id);
+      setDeleteTarget(null);
+      toast.success("问题已删除");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "删除失败");
+    }
   }
 
   function handleDragStart(index: number) {
@@ -90,7 +114,7 @@ export default function RecommendedQuestionsPage() {
     setDragOverIndex(index);
   }
 
-  function handleDrop(toIndex: number) {
+  async function handleDrop(toIndex: number) {
     if (dragIndex === null || dragIndex === toIndex) {
       setDragIndex(null);
       setDragOverIndex(null);
@@ -99,11 +123,21 @@ export default function RecommendedQuestionsPage() {
     const next = [...questions];
     const [moved] = next.splice(dragIndex, 1);
     next.splice(toIndex, 0, moved!);
-    setQuestions(next);
     setDragIndex(null);
     setDragOverIndex(null);
+    try {
+      await reorderMutation.mutateAsync(next.map((q) => q.id));
+    } catch {
+      toast.error("排序保存失败");
+    }
   }
 
+  const isSaving =
+    createMutation.isPending ||
+    updateMutation.isPending ||
+    deleteMutation.isPending ||
+    reorderMutation.isPending;
+
   return (
     <div className="mx-auto flex w-full max-w-2xl flex-col gap-6 px-6 py-10">
       <div className="flex items-center justify-between">
@@ -113,13 +147,21 @@ export default function RecommendedQuestionsPage() {
             管理首页展示的推荐问题，点击后直接发送到对话。拖拽可调整顺序。
           </p>
         </div>
-        <Button onClick={openAdd} className="shrink-0">
+        <Button onClick={openAdd} className="shrink-0" disabled={isLoading}>
           <PlusIcon className="mr-1.5 size-4" />
           添加问题
         </Button>
       </div>
 
-      {questions.length === 0 ? (
+      {isLoading ? (
+        <div className="flex items-center justify-center py-16">
+          <Loader2Icon className="text-muted-foreground size-6 animate-spin" />
+        </div>
+      ) : error ? (
+        <div className="text-destructive flex flex-col items-center gap-2 rounded-xl border border-dashed py-16 text-sm">
+          <p>加载失败：{error.message}</p>
+        </div>
+      ) : questions.length === 0 ? (
         <div className="text-muted-foreground flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-sm">
           <p>暂无推荐问题</p>
           <Button variant="outline" size="sm" onClick={openAdd}>
@@ -161,6 +203,7 @@ export default function RecommendedQuestionsPage() {
                   size="icon"
                   className="size-7"
                   onClick={() => openEdit(q)}
+                  disabled={isSaving}
                 >
                   <PencilIcon className="size-3.5" />
                 </Button>
@@ -169,6 +212,7 @@ export default function RecommendedQuestionsPage() {
                   size="icon"
                   className="text-destructive hover:text-destructive size-7"
                   onClick={() => setDeleteTarget(q)}
+                  disabled={isSaving}
                 >
                   <Trash2Icon className="size-3.5" />
                 </Button>
@@ -206,10 +250,11 @@ export default function RecommendedQuestionsPage() {
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={closeDialog}>
+            <Button variant="outline" onClick={closeDialog} disabled={isSaving}>
               取消
             </Button>
-            <Button onClick={handleSave}>
+            <Button onClick={handleSave} disabled={isSaving}>
+              {isSaving && <Loader2Icon className="mr-1.5 size-4 animate-spin" />}
               {dialog?.mode === "add" ? "添加" : "保存"}
             </Button>
           </DialogFooter>
@@ -229,13 +274,21 @@ export default function RecommendedQuestionsPage() {
             确定要删除「{deleteTarget?.title}」吗？此操作不可撤销。
           </p>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteTarget(null)}
+              disabled={isSaving}
+            >
               取消
             </Button>
             <Button
               variant="destructive"
+              disabled={isSaving}
               onClick={() => deleteTarget && handleDelete(deleteTarget)}
             >
+              {deleteMutation.isPending && (
+                <Loader2Icon className="mr-1.5 size-4 animate-spin" />
+              )}
               删除
             </Button>
           </DialogFooter>