415 lines
14 KiB
TypeScript
415 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
GripVerticalIcon,
|
|
Loader2Icon,
|
|
PencilIcon,
|
|
PlusIcon,
|
|
TagIcon,
|
|
Trash2Icon,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { ResourceTagDialog } from "@/components/workspace/tags/resource-tag-dialog";
|
|
import { TagChipList } from "@/components/workspace/tags/tag-chip";
|
|
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
useAdminRecommendedQuestions,
|
|
useCreateRecommendedQuestion,
|
|
useDeleteRecommendedQuestion,
|
|
useReorderRecommendedQuestions,
|
|
useUpdateRecommendedQuestion,
|
|
} from "@/core/recommended-questions/hooks";
|
|
import type { RecommendedQuestion } from "@/core/recommended-questions";
|
|
|
|
type DialogState =
|
|
| { mode: "add" }
|
|
| { mode: "edit"; question: RecommendedQuestion }
|
|
| null;
|
|
|
|
/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
|
|
const successToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
|
|
} as const;
|
|
|
|
/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
|
|
const errorToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
|
|
} as const;
|
|
|
|
export default function RecommendedQuestionsPage({
|
|
embedded = false,
|
|
}: {
|
|
embedded?: boolean;
|
|
} = {}) {
|
|
const { theme } = useTheme();
|
|
const { questions, isLoading, error } = useAdminRecommendedQuestions();
|
|
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("");
|
|
const [deleteTarget, setDeleteTarget] = useState<RecommendedQuestion | null>(null);
|
|
const [tagTarget, setTagTarget] = useState<RecommendedQuestion | null>(null);
|
|
|
|
// drag state
|
|
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
|
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
|
|
|
// 名称 / 标签搜索
|
|
const [search, setSearch] = useState("");
|
|
const [tagIds, setTagIds] = useState<string[]>([]);
|
|
|
|
const isFiltering = search.trim() !== "" || tagIds.length > 0;
|
|
const needle = search.trim().toLowerCase();
|
|
const visibleQuestions = isFiltering
|
|
? questions.filter((q) => {
|
|
const matchesText =
|
|
needle === "" ||
|
|
q.title.toLowerCase().includes(needle) ||
|
|
q.content.toLowerCase().includes(needle);
|
|
const matchesTags =
|
|
tagIds.length === 0 ||
|
|
(q.tags ?? []).some((t) => tagIds.includes(t.id));
|
|
return matchesText && matchesTags;
|
|
})
|
|
: questions;
|
|
|
|
function openAdd() {
|
|
setFormTitle("");
|
|
setFormContent("");
|
|
setDialog({ mode: "add" });
|
|
}
|
|
|
|
function openEdit(q: RecommendedQuestion) {
|
|
setFormTitle(q.title);
|
|
setFormContent(q.content);
|
|
setDialog({ mode: "edit", question: q });
|
|
}
|
|
|
|
function closeDialog() {
|
|
setDialog(null);
|
|
}
|
|
|
|
async function handleSave() {
|
|
const title = formTitle.trim();
|
|
const content = formContent.trim();
|
|
if (!title || !content) {
|
|
toast.error("标题和内容不能为空", darkToastOpts.error);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (dialog?.mode === "add") {
|
|
await createMutation.mutateAsync({
|
|
title,
|
|
content,
|
|
sort_order: questions.length,
|
|
});
|
|
toast.success("问题已添加", darkToastOpts.success);
|
|
} else if (dialog?.mode === "edit") {
|
|
await updateMutation.mutateAsync({
|
|
id: dialog.question.id,
|
|
body: { title, content },
|
|
});
|
|
toast.success("问题已更新", darkToastOpts.success);
|
|
}
|
|
closeDialog();
|
|
} catch (e) {
|
|
toast.error(
|
|
e instanceof Error ? e.message : "操作失败",
|
|
darkToastOpts.error,
|
|
);
|
|
}
|
|
}
|
|
|
|
async function handleDelete(q: RecommendedQuestion) {
|
|
try {
|
|
await deleteMutation.mutateAsync(q.id);
|
|
setDeleteTarget(null);
|
|
toast.success("问题已删除", darkToastOpts.success);
|
|
} catch (e) {
|
|
toast.error(
|
|
e instanceof Error ? e.message : "删除失败",
|
|
darkToastOpts.error,
|
|
);
|
|
}
|
|
}
|
|
|
|
function handleDragStart(index: number) {
|
|
setDragIndex(index);
|
|
}
|
|
|
|
function handleDragOver(e: React.DragEvent, index: number) {
|
|
e.preventDefault();
|
|
setDragOverIndex(index);
|
|
}
|
|
|
|
async function handleDrop(toIndex: number) {
|
|
if (dragIndex === null || dragIndex === toIndex) {
|
|
setDragIndex(null);
|
|
setDragOverIndex(null);
|
|
return;
|
|
}
|
|
const next = [...questions];
|
|
const [moved] = next.splice(dragIndex, 1);
|
|
next.splice(toIndex, 0, moved!);
|
|
setDragIndex(null);
|
|
setDragOverIndex(null);
|
|
try {
|
|
await reorderMutation.mutateAsync(next.map((q) => q.id));
|
|
} catch {
|
|
toast.error("排序保存失败", darkToastOpts.error);
|
|
}
|
|
}
|
|
|
|
const isSaving =
|
|
createMutation.isPending ||
|
|
updateMutation.isPending ||
|
|
deleteMutation.isPending ||
|
|
reorderMutation.isPending;
|
|
|
|
const darkToastOpts =
|
|
theme === "dark"
|
|
? { success: successToastDarkOptions, error: errorToastDarkOptions }
|
|
: { success: undefined, error: undefined };
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
embedded
|
|
? "flex w-full flex-col gap-6"
|
|
: "mx-auto flex w-full max-w-2xl flex-col gap-6 px-6 py-10"
|
|
}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className={embedded ? "text-base font-semibold" : "text-xl font-semibold"}>推荐问题配置</h1>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
管理首页展示的推荐问题，点击后直接发送到对话。拖拽可调整顺序。
|
|
</p>
|
|
</div>
|
|
<Button onClick={openAdd} className="shrink-0" disabled={isLoading}>
|
|
<PlusIcon className="mr-1.5 size-4" />
|
|
添加问题
|
|
</Button>
|
|
</div>
|
|
|
|
{!isLoading && !error && questions.length > 0 && (
|
|
<TagSearchBar
|
|
targetType="recommended_question"
|
|
searchPlaceholder="搜索标题 / 内容"
|
|
onSearchChange={setSearch}
|
|
tagIds={tagIds}
|
|
onTagIdsChange={setTagIds}
|
|
/>
|
|
)}
|
|
|
|
{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 dark:text-[#7FACF2] dark:!border-[#213F62]">
|
|
<p>暂无推荐问题</p>
|
|
<Button size="sm" onClick={openAdd}>
|
|
<PlusIcon className="mr-1.5 size-4" />
|
|
添加第一个问题
|
|
</Button>
|
|
</div>
|
|
) : visibleQuestions.length === 0 ? (
|
|
<div className="text-muted-foreground flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-sm dark:text-[#7FACF2] dark:!border-[#213F62]">
|
|
<p>没有匹配的推荐问题</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-2 ">
|
|
{visibleQuestions.map((q, index) => (
|
|
<div
|
|
key={q.id}
|
|
draggable={!isFiltering}
|
|
onDragStart={() => !isFiltering && handleDragStart(index)}
|
|
onDragOver={(e) => !isFiltering && handleDragOver(e, index)}
|
|
onDrop={() => !isFiltering && handleDrop(index)}
|
|
onDragEnd={() => {
|
|
setDragIndex(null);
|
|
setDragOverIndex(null);
|
|
}}
|
|
className={`flex items-start gap-3 rounded-xl border bg-white px-4 py-3.5 transition-colors dark:bg-[#022248] dark:!border-[#213D5E] ${
|
|
dragOverIndex === index && dragIndex !== index
|
|
? "border-blue-400 bg-blue-50 dark:border-[#2580FF] dark:bg-[#0D2D54]"
|
|
: "border-[#e4e4e7]"
|
|
}`}
|
|
>
|
|
<GripVerticalIcon
|
|
className={`text-muted-foreground/40 mt-0.5 size-4 shrink-0 dark:text-[#566B7F] ${
|
|
isFiltering
|
|
? "cursor-not-allowed opacity-40"
|
|
: "cursor-grab active:cursor-grabbing"
|
|
}`}
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-medium text-[#18181b] dark:text-white">
|
|
{q.title}
|
|
</div>
|
|
<div className="text-muted-foreground mt-0.5 line-clamp-2 text-xs dark:text-[#7FACF2]">
|
|
{q.content}
|
|
</div>
|
|
{(q.tags?.length ?? 0) > 0 && (
|
|
<TagChipList tags={q.tags!} className="mt-2" />
|
|
)}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
onClick={() => setTagTarget(q)}
|
|
disabled={isSaving}
|
|
title="打标签（按岗位分发）"
|
|
>
|
|
<TagIcon className="size-3.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
onClick={() => openEdit(q)}
|
|
disabled={isSaving}
|
|
>
|
|
<PencilIcon className="size-3.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive hover:text-destructive size-7"
|
|
onClick={() => setDeleteTarget(q)}
|
|
disabled={isSaving}
|
|
>
|
|
<Trash2Icon className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 添加 / 编辑弹窗 */}
|
|
<Dialog open={dialog !== null} onOpenChange={(o) => !o && closeDialog()}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{dialog?.mode === "add" ? "添加推荐问题" : "编辑推荐问题"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-4 py-2">
|
|
<div className="flex flex-col gap-1.5">
|
|
<p className="text-sm font-medium">卡片标题</p>
|
|
<Input
|
|
placeholder="例：市场分析报告"
|
|
value={formTitle}
|
|
onChange={(e) => setFormTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<p className="text-sm font-medium">发送内容</p>
|
|
<Textarea
|
|
placeholder="点击卡片后实际发送给 AI 的消息内容"
|
|
rows={4}
|
|
value={formContent}
|
|
onChange={(e) => setFormContent(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={closeDialog} disabled={isSaving}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={isSaving}>
|
|
{isSaving && <Loader2Icon className="mr-1.5 size-4 animate-spin" />}
|
|
{dialog?.mode === "add" ? "添加" : "保存"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 打标签弹窗（按岗位分发推荐问题） */}
|
|
{tagTarget && (
|
|
<ResourceTagDialog
|
|
open={tagTarget !== null}
|
|
onOpenChange={(o) => !o && setTagTarget(null)}
|
|
targetType="recommended_question"
|
|
targetId={tagTarget.id}
|
|
title={`为「${tagTarget.title}」打标签`}
|
|
/>
|
|
)}
|
|
|
|
{/* 删除确认弹窗 */}
|
|
<Dialog
|
|
open={deleteTarget !== null}
|
|
onOpenChange={(o) => !o && setDeleteTarget(null)}
|
|
>
|
|
<DialogContent className="sm:max-w-sm">
|
|
<DialogHeader>
|
|
<DialogTitle>确认删除</DialogTitle>
|
|
</DialogHeader>
|
|
<p className="text-muted-foreground text-sm">
|
|
确定要删除「{deleteTarget?.title}」吗？此操作不可撤销。
|
|
</p>
|
|
<DialogFooter>
|
|
<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>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|