From a7f1e89ce9e25fcb61d219ef71b7bb883bfd0bba Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Thu, 14 May 2026 10:51:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=AF=8D=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/workspace/input-box.tsx    |  33 +--
 .../workspace/workspace-nav-menu.tsx          |  13 +-
 .../src/core/recommended-questions/hooks.ts   |  58 +++++
 .../src/core/recommended-questions/index.ts   |  57 ++++
 .../src/pages/RecommendedQuestionsPage.tsx    | 246 ++++++++++++++++++
 frontend-web/src/pages/WorkspaceRoutes.tsx    |   9 +
 6 files changed, 389 insertions(+), 27 deletions(-)
 create mode 100644 frontend-web/src/core/recommended-questions/hooks.ts
 create mode 100644 frontend-web/src/core/recommended-questions/index.ts
 create mode 100644 frontend-web/src/pages/RecommendedQuestionsPage.tsx

diff --git a/frontend-web/src/components/workspace/input-box.tsx b/frontend-web/src/components/workspace/input-box.tsx
index 7bc633fa..4bc67415 100644
--- a/frontend-web/src/components/workspace/input-box.tsx
+++ b/frontend-web/src/components/workspace/input-box.tsx
@@ -80,35 +80,14 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 
+import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
+
 import { useThread } from "./messages/context";
 import { ModeHoverGuide } from "./mode-hover-guide";
 import { Tooltip } from "./tooltip";
 
 type InputMode = "flash" | "thinking" | "pro" | "ultra";
 
-// 推荐问题列表 — 可自由配置 title（卡片标题）和 content（发送给对话的内容）
-const RECOMMENDED_QUESTIONS: { title: string; content: string }[] = [
-  {
-    title: "市场分析报告",
-    content: "请帮我写一份关于当前 AI 市场的详细分析报告，包括市场规模、主要玩家和发展趋势。",
-  },
-  {
-    title: "制定学习计划",
-    content: "请帮我制定一个为期 3 个月的 Python 编程学习计划，从基础到进阶，每周安排具体任务。",
-  },
-  {
-    title: "代码审查建议",
-    content: "请帮我审查代码，找出潜在的问题、性能瓶颈以及改进建议，并给出修改示例。",
-  },
-  {
-    title: "数据分析方案",
-    content: "请帮我设计一个用于分析用户行为数据的方案，包括数据收集、处理和可视化策略。",
-  },
-  {
-    title: "文章润色优化",
-    content: "请帮我润色以下文章，使其更加流畅、专业，并保持原意不变。",
-  },
-];
 
 function getResolvedMode(
   mode: InputMode | undefined,
@@ -185,6 +164,8 @@ export function InputBox({
     null,
   );
 
+  const [recommendedQuestions] = useRecommendedQuestions();
+
   useEffect(() => {
     if (models.length === 0) {
       return;
@@ -461,11 +442,11 @@ export function InputBox({
         </div>
       )}
 
-      {isNewThread && searchParams.get("mode") !== "skill" && (
+      {isNewThread && searchParams.get("mode") !== "skill" && recommendedQuestions.length > 0 && (
         <div className="flex flex-wrap justify-center gap-2.5 px-4 mb-[10px]">
-          {RECOMMENDED_QUESTIONS.map((q) => (
+          {recommendedQuestions.map((q) => (
             <button
-              key={q.title}
+              key={q.id}
               type="button"
               className="rounded-full border border-[#e4e4e7] bg-white px-4 py-2 text-sm text-[#18181b] shadow-none transition-colors hover:bg-[#f4f4f5] cursor-pointer"
               onClick={() => {
diff --git a/frontend-web/src/components/workspace/workspace-nav-menu.tsx b/frontend-web/src/components/workspace/workspace-nav-menu.tsx
index 4e974ede..86193c37 100644
--- a/frontend-web/src/components/workspace/workspace-nav-menu.tsx
+++ b/frontend-web/src/components/workspace/workspace-nav-menu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronsUpDown, Settings2Icon, SettingsIcon } from "lucide-react";
+import { ChevronsUpDown, MessageSquarePlusIcon, Settings2Icon, SettingsIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import {
@@ -19,6 +19,8 @@ import {
 } from "@/components/ui/sidebar";
 import { useI18n } from "@/core/i18n/hooks";
 
+import { useNavigate } from "react-router-dom";
+
 import { SettingsDialog } from "./settings";
 
 function NavMenuButtonContent({
@@ -42,6 +44,7 @@ function NavMenuButtonContent({
 }
 
 export function WorkspaceNavMenu() {
+  const navigate = useNavigate();
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsDefaultSection, setSettingsDefaultSection] = useState<
     "appearance" | "memory" | "tools" | "skills" | "notification" | "about"
@@ -88,6 +91,14 @@ export function WorkspaceNavMenu() {
                     <Settings2Icon />
                     {t.common.settings}
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() =>
+                      navigate("/page/workspace/settings/recommended-questions")
+                    }
+                  >
+                    <MessageSquarePlusIcon />
+                    推荐问题配置
+                  </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
               </DropdownMenuContent>
diff --git a/frontend-web/src/core/recommended-questions/hooks.ts b/frontend-web/src/core/recommended-questions/hooks.ts
new file mode 100644
index 00000000..f06be605
--- /dev/null
+++ b/frontend-web/src/core/recommended-questions/hooks.ts
@@ -0,0 +1,58 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+import {
+  DEFAULT_QUESTIONS,
+  getRecommendedQuestions,
+  saveRecommendedQuestions,
+  type RecommendedQuestion,
+} from "./index";
+
+type Listener = () => void;
+
+const listeners = new Set<Listener>();
+let cached: RecommendedQuestion[] | null = null;
+
+function getSnapshot(): RecommendedQuestion[] {
+  if (cached === null) {
+    cached = getRecommendedQuestions();
+  }
+  return cached;
+}
+
+function getServerSnapshot(): RecommendedQuestion[] {
+  return DEFAULT_QUESTIONS;
+}
+
+function subscribe(listener: Listener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function emitChange() {
+  for (const l of listeners) l();
+}
+
+export function updateRecommendedQuestions(
+  questions: RecommendedQuestion[],
+): void {
+  cached = questions;
+  saveRecommendedQuestions(questions);
+  emitChange();
+}
+
+export function useRecommendedQuestions(): [
+  RecommendedQuestion[],
+  (questions: RecommendedQuestion[]) => void,
+] {
+  const questions = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot,
+  );
+
+  const save = useCallback((qs: RecommendedQuestion[]) => {
+    updateRecommendedQuestions(qs);
+  }, []);
+
+  return [questions, save];
+}
diff --git a/frontend-web/src/core/recommended-questions/index.ts b/frontend-web/src/core/recommended-questions/index.ts
new file mode 100644
index 00000000..466596fa
--- /dev/null
+++ b/frontend-web/src/core/recommended-questions/index.ts
@@ -0,0 +1,57 @@
+export interface RecommendedQuestion {
+  id: string;
+  title: string;
+  content: string;
+}
+
+const STORAGE_KEY = "deerflow.recommended-questions";
+
+export const DEFAULT_QUESTIONS: RecommendedQuestion[] = [
+  {
+    id: "default-1",
+    title: "市场分析报告",
+    content:
+      "请帮我写一份关于当前 AI 市场的详细分析报告，包括市场规模、主要玩家和发展趋势。",
+  },
+  {
+    id: "default-2",
+    title: "制定学习计划",
+    content:
+      "请帮我制定一个为期 3 个月的 Python 编程学习计划，从基础到进阶，每周安排具体任务。",
+  },
+  {
+    id: "default-3",
+    title: "代码审查建议",
+    content:
+      "请帮我审查代码，找出潜在的问题、性能瓶颈以及改进建议，并给出修改示例。",
+  },
+  {
+    id: "default-4",
+    title: "数据分析方案",
+    content:
+      "请帮我设计一个用于分析用户行为数据的方案，包括数据收集、处理和可视化策略。",
+  },
+  {
+    id: "default-5",
+    title: "文章润色优化",
+    content: "请帮我润色以下文章，使其更加流畅、专业，并保持原意不变。",
+  },
+];
+
+export function getRecommendedQuestions(): RecommendedQuestion[] {
+  if (typeof window === "undefined") return DEFAULT_QUESTIONS;
+  const json = localStorage.getItem(STORAGE_KEY);
+  if (!json) return DEFAULT_QUESTIONS;
+  try {
+    const parsed = JSON.parse(json) as RecommendedQuestion[];
+    if (Array.isArray(parsed) && parsed.length > 0) return parsed;
+  } catch {}
+  return DEFAULT_QUESTIONS;
+}
+
+export function saveRecommendedQuestions(
+  questions: RecommendedQuestion[],
+): void {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(questions));
+}
diff --git a/frontend-web/src/pages/RecommendedQuestionsPage.tsx b/frontend-web/src/pages/RecommendedQuestionsPage.tsx
new file mode 100644
index 00000000..5484161e
--- /dev/null
+++ b/frontend-web/src/pages/RecommendedQuestionsPage.tsx
@@ -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>
+  );
+}
diff --git a/frontend-web/src/pages/WorkspaceRoutes.tsx b/frontend-web/src/pages/WorkspaceRoutes.tsx
index bf1527a6..2448d0d8 100644
--- a/frontend-web/src/pages/WorkspaceRoutes.tsx
+++ b/frontend-web/src/pages/WorkspaceRoutes.tsx
@@ -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>
   );
 }