提示词修改
This commit is contained in:
fengxiangdebaozi committed
1 parent
c79f5c5a7a
commit
a7f1e89ce9
6 files changed
+389
-27
No files matched your search
@@ -0,0 +1,246 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { GripVerticalIcon, PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
|
||||
import type { RecommendedQuestion } from "@/core/recommended-questions";
|
||||
|
||||
type DialogState =
|
||||
| { mode: "add" }
|
||||
| { 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 [dialog, setDialog] = useState<DialogState>(null);
|
||||
const [formTitle, setFormTitle] = useState("");
|
||||
const [formContent, setFormContent] = useState("");
|
||||
const [deleteTarget, setDeleteTarget] = useState<RecommendedQuestion | null>(null);
|
||||
|
||||
// drag state
|
||||
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
const title = formTitle.trim();
|
||||
const content = formContent.trim();
|
||||
if (!title || !content) {
|
||||
toast.error("标题和内容不能为空");
|
||||
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("问题已更新");
|
||||
}
|
||||
closeDialog();
|
||||
}
|
||||
|
||||
function handleDelete(q: RecommendedQuestion) {
|
||||
setQuestions(questions.filter((item) => item.id !== q.id));
|
||||
setDeleteTarget(null);
|
||||
toast.success("问题已删除");
|
||||
}
|
||||
|
||||
function handleDragStart(index: number) {
|
||||
setDragIndex(index);
|
||||
}
|
||||
|
||||
function handleDragOver(e: React.DragEvent, index: number) {
|
||||
e.preventDefault();
|
||||
setDragOverIndex(index);
|
||||
}
|
||||
|
||||
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!);
|
||||
setQuestions(next);
|
||||
setDragIndex(null);
|
||||
setDragOverIndex(null);
|
||||
}
|
||||
|
||||
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">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">推荐问题配置</h1>
|
||||
<p className="text-muted-foreground mt-1 text-sm">
|
||||
管理首页展示的推荐问题，点击后直接发送到对话。拖拽可调整顺序。
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={openAdd} className="shrink-0">
|
||||
<PlusIcon className="mr-1.5 size-4" />
|
||||
添加问题
|
||||
</Button>
|
||||
</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}>
|
||||
<PlusIcon className="mr-1.5 size-4" />
|
||||
添加第一个问题
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{questions.map((q, index) => (
|
||||
<div
|
||||
key={q.id}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDrop={() => 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 ${
|
||||
dragOverIndex === index && dragIndex !== index
|
||||
? "border-blue-400 bg-blue-50"
|
||||
: "border-[#e4e4e7]"
|
||||
}`}
|
||||
>
|
||||
<GripVerticalIcon className="text-muted-foreground/40 mt-0.5 size-4 shrink-0 cursor-grab active:cursor-grabbing" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-medium text-[#18181b]">
|
||||
{q.title}
|
||||
</div>
|
||||
<div className="text-muted-foreground mt-0.5 line-clamp-2 text-xs">
|
||||
{q.content}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7"
|
||||
onClick={() => openEdit(q)}
|
||||
>
|
||||
<PencilIcon className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-destructive hover:text-destructive size-7"
|
||||
onClick={() => setDeleteTarget(q)}
|
||||
>
|
||||
<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}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
{dialog?.mode === "add" ? "添加" : "保存"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 删除确认弹窗 */}
|
||||
<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)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => deleteTarget && handleDelete(deleteTarget)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,7 @@ import AgentChatPage from "./AgentChatPage";
|
||||
import NewAgentPage from "./NewAgentPage";
|
||||
import ScheduledTaskRunDetailPage from "./ScheduledTaskRunDetailPage";
|
||||
import ScheduledTasksPage from "./ScheduledTasksPage";
|
||||
import RecommendedQuestionsPage from "./RecommendedQuestionsPage";
|
||||
|
||||
function WorkspaceLayout({
|
||||
children,
|
||||
@@ -143,6 +144,14 @@ export default function WorkspaceRoutes({
|
||||
</WorkspaceLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="settings/recommended-questions"
|
||||
element={
|
||||
<WorkspaceLayout {...layoutProps}>
|
||||
<RecommendedQuestionsPage />
|
||||
</WorkspaceLayout>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user