feat: separate agent workflow settings page
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-03-16 17:46:36 +08:00
parent d4e6fb3fc8
commit 4f1745b865
3 changed files with 421 additions and 262 deletions

View File

@ -1,5 +1,6 @@
"use client";
import Link from "next/link";
import { useState, useEffect, useMemo } from "react";
import useSWR from "swr";
import { toast } from "sonner";
@ -1512,7 +1513,6 @@ export function AdminSettingsClient() {
const [editingModel, setEditingModel] = useState<string | null>(null);
const [modelAvatarUploading, setModelAvatarUploading] = useState(false);
const [contactQrUploading, setContactQrUploading] = useState(false);
const [workflowOptionUploadingKey, setWorkflowOptionUploadingKey] = useState<string | null>(null);
// 🆕 火山引擎视频多模型表单(动态从API加载)
const [volcanoVideoModels, setVolcanoVideoModels] = useState<Array<{
@ -1574,70 +1574,6 @@ export function AdminSettingsClient() {
const [showStorageDialog, setShowStorageDialog] = useState(false);
const [editingStorage, setEditingStorage] = useState<string | null>(null);
const updateWorkflowStep = (
stepKey: string,
updater: (step: AgentWorkflowUiConfig["steps"][number]) => AgentWorkflowUiConfig["steps"][number]
) => {
setSiteSettings((prev) => ({
...prev,
agentWorkflowUiConfig: {
steps: prev.agentWorkflowUiConfig.steps.map((step) =>
step.key === stepKey ? updater(step) : step
),
},
}));
};
const updateWorkflowOption = (
stepKey: string,
optionKey: string,
updater: (
option: AgentWorkflowUiConfig["steps"][number]["options"][number]
) => AgentWorkflowUiConfig["steps"][number]["options"][number]
) => {
updateWorkflowStep(stepKey, (step) => ({
...step,
options: step.options.map((option) =>
option.key === optionKey ? updater(option) : option
),
}));
};
const handleWorkflowOptionPreviewUpload = async (
stepKey: string,
optionKey: string,
file: File
) => {
if (!file.type.startsWith("image/")) {
toast.error("请上传图片文件");
return;
}
const uploadKey = `${stepKey}:${optionKey}`;
try {
setWorkflowOptionUploadingKey(uploadKey);
const formData = new FormData();
formData.append("file", file);
const response = await fetchUploadWithRetry(formData);
const result = await response.json();
if (!response.ok || !result?.url) {
throw new Error(result?.error || "上传失败");
}
updateWorkflowOption(stepKey, optionKey, (option) => ({
...option,
previewImageUrl: result.url,
}));
toast.success("功能卡片预览图上传成功");
} catch (error: any) {
toast.error(error?.message || "功能卡片预览图上传失败");
} finally {
setWorkflowOptionUploadingKey(null);
}
};
// --- 用户管理逻辑 ---
const handleUserSearch = (search: string) => {
setUserSearch(search);
@ -5683,208 +5619,23 @@ export function AdminSettingsClient() {
{siteSettings.agentEnabled && (
<div className="rounded-lg border p-4 space-y-4">
<div>
<div className="font-medium">工作流功能卡片配置</div>
<div className="font-medium">智能体工作流配置</div>
<div className="text-xs text-muted-foreground mt-1">
智能体工作流左侧每个环节的按钮名称、说明文案和预览图都从这里读取,前端不再写死。
智能体页面的功能按钮名称、Prompt 片段和预览图已迁移到独立子页面,避免网站设置页过于臃肿。
</div>
</div>
<div className="space-y-5">
{siteSettings.agentWorkflowUiConfig.steps.map((step) => (
<div key={step.key} className="rounded-xl border p-4 space-y-4">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 space-y-2">
<Label>{step.key}</Label>
<Input
value={step.title}
onChange={(event) =>
updateWorkflowStep(step.key, (current) => ({
...current,
title: event.target.value,
}))
}
placeholder="步骤标题"
/>
<Textarea
value={step.description || ""}
onChange={(event) =>
updateWorkflowStep(step.key, (current) => ({
...current,
description: event.target.value,
}))
}
rows={2}
placeholder="步骤说明"
/>
</div>
<div className="flex items-center gap-2 pt-6">
<Label htmlFor={`workflow-step-${step.key}-enabled`}>启用</Label>
<Switch
id={`workflow-step-${step.key}-enabled`}
checked={step.enabled}
onCheckedChange={(checked) =>
updateWorkflowStep(step.key, (current) => ({
...current,
enabled: checked,
}))
}
/>
</div>
</div>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
{step.options.map((option) => {
const uploadKey = `${step.key}:${option.key}`;
const isUploading = workflowOptionUploadingKey === uploadKey;
return (
<div key={option.key} className="rounded-xl border bg-muted/20 p-3 space-y-3">
<div className="flex items-start justify-between gap-3">
<div className="space-y-1">
<div className="text-sm font-medium">{option.key}</div>
<div className="text-xs text-muted-foreground">
工作流按钮名称与预览图
</div>
</div>
<div className="flex items-center gap-2">
<Label
htmlFor={`workflow-option-${step.key}-${option.key}-enabled`}
className="text-xs text-muted-foreground"
>
启用
</Label>
<Switch
id={`workflow-option-${step.key}-${option.key}-enabled`}
checked={option.enabled}
onCheckedChange={(checked) =>
updateWorkflowOption(step.key, option.key, (current) => ({
...current,
enabled: checked,
}))
}
/>
</div>
</div>
<div className="grid grid-cols-[120px_minmax(0,1fr)] gap-3">
<div className="space-y-2">
<div className="flex h-[96px] items-center justify-center overflow-hidden rounded-lg border bg-background">
{option.previewImageUrl ? (
<img
src={option.previewImageUrl}
alt={option.buttonName}
className="h-full w-full object-cover"
/>
) : (
<div className="px-3 text-center text-xs text-muted-foreground">
未上传预览图
</div>
)}
</div>
<label className="block">
<input
type="file"
accept="image/*"
className="hidden"
onChange={(event) => {
const file = event.target.files?.[0];
if (!file) return;
void handleWorkflowOptionPreviewUpload(
step.key,
option.key,
file
);
event.target.value = "";
}}
/>
<Button
type="button"
variant="outline"
size="sm"
className="w-full"
disabled={isUploading}
onClick={(event) => {
const input =
event.currentTarget.parentElement?.querySelector(
'input[type="file"]'
) as HTMLInputElement | null;
input?.click();
}}
>
{isUploading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Upload className="mr-2 h-4 w-4" />
)}
上传图片
</Button>
</label>
</div>
<div className="space-y-3">
<div className="space-y-2">
<Label>按钮名称</Label>
<Input
value={option.buttonName}
onChange={(event) =>
updateWorkflowOption(step.key, option.key, (current) => ({
...current,
buttonName: event.target.value,
}))
}
placeholder="按钮名称"
/>
</div>
<div className="space-y-2">
<Label>说明文案</Label>
<Textarea
value={option.description || ""}
onChange={(event) =>
updateWorkflowOption(step.key, option.key, (current) => ({
...current,
description: event.target.value,
}))
}
rows={2}
placeholder="卡片说明"
/>
</div>
<div className="space-y-2">
<Label>预览图链接</Label>
<Input
value={option.previewImageUrl || ""}
onChange={(event) =>
updateWorkflowOption(step.key, option.key, (current) => ({
...current,
previewImageUrl: event.target.value,
}))
}
placeholder="https://..."
/>
</div>
<div className="space-y-2">
<Label>Prompt 片段</Label>
<Textarea
value={option.promptFragment || ""}
onChange={(event) =>
updateWorkflowOption(step.key, option.key, (current) => ({
...current,
promptFragment: event.target.value,
}))
}
rows={3}
placeholder="用于右侧执行时注入的工作流提示片段"
/>
</div>
</div>
</div>
</div>
);
})}
<div className="rounded-xl border bg-muted/20 p-4">
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="space-y-1">
<div className="text-sm font-medium">独立维护智能体功能卡片</div>
<div className="text-xs text-muted-foreground">
建议在独立页面中维护每个环节的按钮名称、预览图上传、说明文案和 Prompt 片段。
</div>
</div>
))}
<Button asChild>
<Link href="/settings/agent-workflow">前往智能体工作流配置</Link>
</Button>
</div>
</div>
</div>
)}

View File

@ -0,0 +1,393 @@
"use client";
import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import useSWR from "swr";
import { toast } from "sonner";
import {
ArrowLeft,
Image as ImageIcon,
Loader2,
Save,
Sparkles,
Upload,
} from "lucide-react";
import {
defaultAgentWorkflowUiConfig,
normalizeAgentWorkflowUiConfig,
} from "@/lib/agents/workflow-ui-config";
import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import type { AgentWorkflowUiConfig } from "@/types/agent";
const fetcher = (url: string) => fetch(url, { cache: "no-store" }).then((res) => res.json());
export function AgentWorkflowSettingsClient() {
const { data, isLoading, mutate } = useSWR<{
agentWorkflowUiConfig?: AgentWorkflowUiConfig;
}>("/api/site-settings", fetcher);
const [config, setConfig] = useState<AgentWorkflowUiConfig>(defaultAgentWorkflowUiConfig);
const [isSaving, setIsSaving] = useState(false);
const [uploadingKey, setUploadingKey] = useState<string | null>(null);
const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
useEffect(() => {
if (!data) return;
setConfig(normalizeAgentWorkflowUiConfig(data.agentWorkflowUiConfig));
}, [data]);
const sortedSteps = useMemo(
() => [...config.steps].sort((left, right) => left.sortOrder - right.sortOrder),
[config.steps]
);
const updateStep = (
stepKey: string,
updater: (step: AgentWorkflowUiConfig["steps"][number]) => AgentWorkflowUiConfig["steps"][number]
) => {
setConfig((prev) => ({
...prev,
steps: prev.steps.map((step) => (step.key === stepKey ? updater(step) : step)),
}));
};
const updateOption = (
stepKey: string,
optionKey: string,
updater: (
option: AgentWorkflowUiConfig["steps"][number]["options"][number]
) => AgentWorkflowUiConfig["steps"][number]["options"][number]
) => {
updateStep(stepKey, (step) => ({
...step,
options: step.options.map((option) =>
option.key === optionKey ? updater(option) : option
),
}));
};
const handleUploadPreview = async (stepKey: string, optionKey: string, file: File) => {
if (!file.type.startsWith("image/")) {
toast.error("请上传图片文件");
return;
}
const refKey = `${stepKey}:${optionKey}`;
try {
setUploadingKey(refKey);
const formData = new FormData();
formData.append("file", file);
const response = await fetchUploadWithRetry(formData);
const result = await response.json();
if (!response.ok || !result?.url) {
throw new Error(result?.error || "上传失败");
}
updateOption(stepKey, optionKey, (option) => ({
...option,
previewImageUrl: result.url,
}));
toast.success("预览图上传成功");
} catch (error) {
toast.error(error instanceof Error ? error.message : "预览图上传失败");
} finally {
setUploadingKey(null);
}
};
const handleSave = async () => {
try {
setIsSaving(true);
const response = await fetch("/api/site-settings", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
agentWorkflowUiConfig: config,
}),
});
if (!response.ok) {
throw new Error("保存失败");
}
toast.success("智能体工作流配置已保存");
await mutate();
} catch (error) {
toast.error(error instanceof Error ? error.message : "保存失败");
} finally {
setIsSaving(false);
}
};
return (
<div className="container mx-auto space-y-6 p-6">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="space-y-1">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Sparkles className="h-4 w-4" />
智能体配置中心
</div>
<h1 className="text-2xl font-semibold">智能体工作流配置</h1>
<p className="text-sm text-muted-foreground">
单独维护智能体页面左侧每个环节的功能按钮名称、说明、Prompt 片段和预览图。
</p>
</div>
<div className="flex items-center gap-2">
<Button asChild variant="outline">
<Link href="/settings">
<ArrowLeft className="mr-2 h-4 w-4" />
返回设置
</Link>
</Button>
<Button onClick={handleSave} disabled={isSaving}>
{isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
保存配置
</Button>
</div>
</div>
<Card>
<CardHeader>
<CardTitle>功能说明</CardTitle>
<CardDescription>
这里配置的是智能体工作流页面的功能卡片。网站设置页只保留入口,不再承载这些详细配置。
</CardDescription>
</CardHeader>
</Card>
{isLoading ? (
<Card>
<CardContent className="flex items-center justify-center py-12">
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
</CardContent>
</Card>
) : (
<div className="space-y-5">
{sortedSteps.map((step) => (
<Card key={step.key}>
<CardHeader>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 space-y-3">
<div className="space-y-2">
<Label>步骤标题</Label>
<Input
value={step.title}
onChange={(event) =>
updateStep(step.key, (current) => ({
...current,
title: event.target.value,
}))
}
placeholder="步骤标题"
/>
</div>
<div className="space-y-2">
<Label>步骤说明</Label>
<Textarea
value={step.description || ""}
onChange={(event) =>
updateStep(step.key, (current) => ({
...current,
description: event.target.value,
}))
}
rows={2}
placeholder="步骤说明"
/>
</div>
</div>
<div className="flex items-center gap-2 pt-8">
<Label htmlFor={`workflow-step-${step.key}`}>启用</Label>
<Switch
id={`workflow-step-${step.key}`}
checked={step.enabled}
onCheckedChange={(checked) =>
updateStep(step.key, (current) => ({
...current,
enabled: checked,
}))
}
/>
</div>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
{step.options
.slice()
.sort((left, right) => left.sortOrder - right.sortOrder)
.map((option) => {
const refKey = `${step.key}:${option.key}`;
const isUploading = uploadingKey === refKey;
return (
<div key={option.key} className="rounded-xl border bg-muted/20 p-4 space-y-4">
<div className="flex items-start justify-between gap-4">
<div>
<div className="text-sm font-medium">{option.key}</div>
<div className="mt-1 text-xs text-muted-foreground">
配置按钮名称与预览图
</div>
</div>
<div className="flex items-center gap-2">
<Label
htmlFor={`workflow-option-${step.key}-${option.key}`}
className="text-xs text-muted-foreground"
>
启用
</Label>
<Switch
id={`workflow-option-${step.key}-${option.key}`}
checked={option.enabled}
onCheckedChange={(checked) =>
updateOption(step.key, option.key, (current) => ({
...current,
enabled: checked,
}))
}
/>
</div>
</div>
<div className="grid grid-cols-[148px_minmax(0,1fr)] gap-4">
<div className="space-y-3">
<div className="flex h-[120px] items-center justify-center overflow-hidden rounded-xl border bg-background">
{option.previewImageUrl ? (
<img
src={option.previewImageUrl}
alt={option.buttonName}
className="h-full w-full object-cover"
/>
) : (
<div className="px-3 text-center text-xs text-muted-foreground">
<ImageIcon className="mx-auto mb-2 h-5 w-5 opacity-60" />
暂无预览图
</div>
)}
</div>
<input
ref={(element) => {
fileInputRefs.current[refKey] = element;
}}
type="file"
accept="image/*"
className="hidden"
onChange={(event) => {
const file = event.target.files?.[0];
if (!file) return;
void handleUploadPreview(step.key, option.key, file);
event.target.value = "";
}}
/>
<div className="grid grid-cols-1 gap-2">
<Button
type="button"
variant="outline"
size="sm"
disabled={isUploading}
onClick={() => fileInputRefs.current[refKey]?.click()}
>
{isUploading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Upload className="mr-2 h-4 w-4" />
)}
上传图片
</Button>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() =>
updateOption(step.key, option.key, (current) => ({
...current,
previewImageUrl: "",
}))
}
>
清空图片
</Button>
</div>
</div>
<div className="space-y-3">
<div className="space-y-2">
<Label>按钮名称</Label>
<Input
value={option.buttonName}
onChange={(event) =>
updateOption(step.key, option.key, (current) => ({
...current,
buttonName: event.target.value,
}))
}
placeholder="按钮名称"
/>
</div>
<div className="space-y-2">
<Label>说明文案</Label>
<Textarea
value={option.description || ""}
onChange={(event) =>
updateOption(step.key, option.key, (current) => ({
...current,
description: event.target.value,
}))
}
rows={2}
placeholder="说明文案"
/>
</div>
<div className="space-y-2">
<Label>预览图链接</Label>
<Input
value={option.previewImageUrl || ""}
onChange={(event) =>
updateOption(step.key, option.key, (current) => ({
...current,
previewImageUrl: event.target.value,
}))
}
placeholder="https://..."
/>
</div>
<div className="space-y-2">
<Label>Prompt 片段</Label>
<Textarea
value={option.promptFragment || ""}
onChange={(event) =>
updateOption(step.key, option.key, (current) => ({
...current,
promptFragment: event.target.value,
}))
}
rows={3}
placeholder="用于执行时注入的提示片段"
/>
</div>
</div>
</div>
</div>
);
})}
</div>
</CardContent>
</Card>
))}
</div>
)}
</div>
);
}

View File

@ -0,0 +1,15 @@
import { requireAdmin } from "@/lib/middleware/admin";
import { redirect } from "next/navigation";
import { AgentWorkflowSettingsClient } from "./agent-workflow-settings-client";
export const dynamic = "force-dynamic";
export default async function AgentWorkflowSettingsPage() {
try {
await requireAdmin();
} catch {
redirect("/");
}
return <AgentWorkflowSettingsClient />;
}