feat(frontend): add template library and extract create-assistant page

Introduce a split-view template library for creating assistants from presets, share selection cards between create and template flows, and move the choose step out of AssistantPage into CreateAssistantPage.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/pages/AssistantPage.tsx

@@ -3,19 +3,16 @@
 import {
   Boxes,
   Brain,
-  Check,
   Copy,
   MessageSquareText,
   MoreHorizontal,
   Pencil,
   Plus,
-  Rocket,
   Sparkles,
   Trash2,
-  Workflow,
-  ChevronLeft,
   ChevronUp,
   ChevronDown,
+  LayoutTemplate,
   Save,
   Terminal,
   Loader2,
@@ -24,7 +21,6 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { TurnConfigEditor } from "@/components/turn-config-editor";
-import { Input } from "@/components/ui/input";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -111,7 +107,6 @@ type OpenCodeForm = {
 };
 
 type AssistantType = "提示词" | "工作流" | "Dify" | "FastGPT" | "OpenCode";
-type BuildMethod = "提示词" | "工作流" | "智能体平台" | "OpenCode";
 
 const assistantTypes: AssistantType[] = [
   "提示词",
@@ -137,14 +132,6 @@ const typeToLabel: Record<ApiAssistantType, AssistantType> = {
   fastgpt: "FastGPT",
   opencode: "OpenCode",
 };
-const typeFromBuildMethod: Record<
-  Exclude<BuildMethod, "智能体平台">,
-  ApiAssistantType
-> = {
-  提示词: "prompt",
-  工作流: "workflow",
-  OpenCode: "opencode",
-};
 
 // 后端 type → 编辑器视图(工作流暂为占位页)
 const typeToView = {
@@ -155,13 +142,12 @@ const typeToView = {
   workflow: "workflow",
 } as const;
 
-type View = "list" | "choose" | "loading" | (typeof typeToView)[ApiAssistantType];
+type View = "list" | "loading" | (typeof typeToView)[ApiAssistantType];
 
 // 路由驱动的页面模式:
-// /assistants → list | /assistants/new → choose(引导,确认即建库) | /assistants/[id] → edit
+// /assistants → list | /assistants/[id] → edit
 export type AssistantPageProps =
   | { mode: "list" }
-  | { mode: "choose" }
   | { mode: "edit"; assistantId: string };
 
 // 各类型的空白表单模板(新建用)
@@ -229,47 +215,6 @@ function formatTimestamp(iso?: string | null): string {
   )}:${pad(d.getMinutes())}`;
 }
 
-type AssistantTypeOption = {
-  type: BuildMethod;
-  label: string;
-  description: string;
-  icon: React.ReactNode;
-  /** 提示词、工作流、智能体平台已落地；OpenCode 暂时显示即将上线 */
-  available: boolean;
-};
-
-const assistantTypeOptions: AssistantTypeOption[] = [
-  {
-    type: "提示词",
-    label: "使用提示词构建",
-    description: "通过提示词、模型与语音快速搭建对话助手，适合大多数场景。",
-    icon: <MessageSquareText size={20} />,
-    available: true,
-  },
-  {
-    type: "工作流",
-    label: "使用工作流构建",
-    description: "用可视化编排串联多个节点，适合多步骤、带分支的复杂流程。",
-    icon: <Workflow size={20} />,
-    available: true,
-  },
-  {
-    type: "智能体平台",
-    label: "从智能体平台创建",
-    description:
-      "接入 Dify、FastGPT 等智能体平台，复用平台中的提示词、知识库和工作流配置。",
-    icon: <Boxes size={20} />,
-    available: true,
-  },
-  {
-    type: "OpenCode",
-    label: "使用 OpenCode 构建",
-    description: "对接 OpenCode 服务，通过提示词驱动代码助手并支持实时语音对话。",
-    icon: <Terminal size={20} />,
-    available: false,
-  },
-];
-
 type AssistantListItem = {
   id: string;
   name: string;
@@ -313,7 +258,6 @@ export function AssistantPage(props: AssistantPageProps) {
   const [tools, setTools] = useState<Tool[]>([]);
   // 视图由路由模式决定;仅编辑模式需要先 loading,等拿到助手类型后切换
   const [view, setView] = useState<View>(() => {
-    if (props.mode === "choose") return "choose";
     if (props.mode === "edit") return "loading";
     return "list";
   });
@@ -321,13 +265,6 @@ export function AssistantPage(props: AssistantPageProps) {
   const [typeFilter, setTypeFilter] = useState<TypeFilter>("全部");
   const [sortOrder, setSortOrder] = useState<SortOrder>("newest");
   const [currentPage, setCurrentPage] = useState(1);
-  // choose 步骤的草稿：名称与已选类型，确认后直接建库并进入编辑页
-  // (工作流占位页也用它展示名称与类型)
-  const [draftName, setDraftName] = useState("");
-  const [draftType, setDraftType] = useState<BuildMethod | null>(null);
-  // 引导页:创建请求进行中 / 创建失败
-  const [creating, setCreating] = useState(false);
-  const [createError, setCreateError] = useState<string | null>(null);
   // 已保存基线(当前类型表单的 JSON);与表单不一致时保存按钮才可点击
   const [savedSnapshot, setSavedSnapshot] = useState<string | null>(null);
 
@@ -499,33 +436,6 @@ export function AssistantPage(props: AssistantPageProps) {
     router.push(`/assistants/${assistant.id}`);
   }
 
-  // 引导页确认：直接创建到数据库拿到 id，再进入该助手的编辑页
-  // 智能体平台默认先建 dify，具体平台在编辑页再选
-  async function confirmType() {
-    if (!draftName.trim() || !draftType || creating) {
-      return;
-    }
-
-    setCreating(true);
-    setCreateError(null);
-    try {
-      const assistantType: ApiAssistantType =
-        draftType === "智能体平台"
-          ? "dify"
-          : typeFromBuildMethod[draftType];
-      const created = await assistantsApi.create(
-        baseUpsert({
-          name: draftName.trim(),
-          type: assistantType,
-        }),
-      );
-      router.push(`/assistants/${created.id}`);
-    } catch (error) {
-      setCreateError(error instanceof Error ? error.message : "创建失败");
-      setCreating(false);
-    }
-  }
-
   // 复制助手：服务端整行复制(含真 key,密钥不经浏览器)
   async function handleDuplicate(assistant: AssistantListItem) {
     try {
@@ -1014,10 +924,20 @@ export function AssistantPage(props: AssistantPageProps) {
         title="助手列表"
         description="管理已有的视频助手，支持提示词、工作流、Dify 和 FastGPT 类型。"
         action={
-          <Button className="w-full shrink-0 gap-2 sm:w-auto" onClick={startCreate}>
-            <Plus size={16} />
-            创建助手
-          </Button>
+          <div className="flex w-full shrink-0 flex-col gap-2 sm:w-auto sm:flex-row">
+            <Button
+              variant="outline"
+              className="w-full gap-2 border-hairline-strong text-foreground hover:bg-surface-strong sm:w-auto"
+              onClick={() => router.push("/assistants/templates")}
+            >
+              <LayoutTemplate size={16} />
+              模版库
+            </Button>
+            <Button className="w-full shrink-0 gap-2 sm:w-auto" onClick={startCreate}>
+              <Plus size={16} />
+              创建助手
+            </Button>
+          </div>
         }
       >
         <ListPageSection>
@@ -1191,120 +1111,6 @@ export function AssistantPage(props: AssistantPageProps) {
     );
   }
 
-  if (view === "choose") {
-    return (
-      <ListPageLayout
-        title="创建助手"
-        className="max-w-[1180px]"
-        description="先为助手取个名字，再选择构建方式。确认后将立即创建助手并进入编辑页。"
-        action={
-          <Button
-            variant="outline"
-            className="w-full shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground sm:w-auto"
-            onClick={() => router.push("/assistants")}
-          >
-            <ChevronLeft size={16} />
-            返回列表
-          </Button>
-        }
-      >
-        <ListPageSection>
-          <label className="block">
-            <div className="mb-2 text-sm font-medium text-foreground">
-              助手名称
-            </div>
-            <Input
-              value={draftName}
-              autoFocus
-              onChange={(event) => setDraftName(event.target.value)}
-              placeholder="请输入助手名称"
-              className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
-            />
-          </label>
-        </ListPageSection>
-
-        <section className="flex flex-col gap-3">
-          <div className="text-sm font-medium text-foreground">构建方式</div>
-
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-              {assistantTypeOptions.map((option) => {
-                const selected = draftType === option.type;
-
-                return (
-                  <button
-                    key={option.type}
-                    type="button"
-                    onClick={() => setDraftType(option.type)}
-                    className={`group relative flex flex-col gap-4 rounded-2xl border bg-card p-5 text-left transition-colors ${
-                      selected
-                        ? "border-primary ring-1 ring-primary"
-                        : "border-hairline hover:border-hairline-strong"
-                    }`}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex h-11 w-11 items-center justify-center rounded-full bg-surface-strong text-foreground">
-                        {option.icon}
-                      </div>
-
-                      {selected ? (
-                        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
-                          <Check size={14} />
-                        </span>
-                      ) : (
-                        !option.available && (
-                          <Badge
-                            variant="secondary"
-                            className="h-6 bg-surface-strong px-3 text-xs text-muted-foreground"
-                          >
-                            即将上线
-                          </Badge>
-                        )
-                      )}
-                    </div>
-
-                    <div>
-                      <div className="text-base font-medium text-foreground">
-                        {option.label}
-                      </div>
-                      <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
-                        {option.description}
-                      </p>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </section>
-
-        <div className="flex items-center justify-end gap-3">
-          {createError && (
-            <span className="text-xs text-destructive">{createError}</span>
-          )}
-          <Button
-            variant="outline"
-            className="border-hairline-strong text-muted-foreground hover:text-foreground"
-            disabled={creating}
-            onClick={() => router.push("/assistants")}
-          >
-            取消
-          </Button>
-          <Button
-            className="gap-2"
-            disabled={!draftName.trim() || !draftType || creating}
-            onClick={() => void confirmType()}
-          >
-            {creating ? (
-              <Loader2 size={16} className="animate-spin" />
-            ) : (
-              <Rocket size={16} />
-            )}
-            创建助手
-          </Button>
-        </div>
-      </ListPageLayout>
-    );
-  }
-
   if (view === "workflow") {
     return (
       <WorkflowPage