fix: refine local edit controls and workflow validation

2026-05-19 14:15:10 +08:00 · 2026-05-19 14:15:10 +08:00 · a5b3e35df9
commit a5b3e35df9
parent c5510e4936
4 changed files with 222 additions and 88 deletions
--- a/app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx
+++ b/app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx
@ -64,6 +64,7 @@ import {
  getAgentWorkflowOfficialCategoryKeyLabels,
  getAgentWorkflowOfficialSecondCategoryKey,
  getAgentWorkflowOfficialThirdCategoryKey,
+  getAgentWorkflowMissingPreviewOptions,
  getAgentWorkflowPageFeatureSettings,
  normalizeAgentWorkflowBusinessModeSettings,
  normalizeAgentWorkflowOptionOrdering,
@ -678,7 +679,10 @@ function hasWorkflowOptionDescription(option: AgentWorkflowOptionUiConfig) {
 }

 function hasWorkflowOptionPreview(option: AgentWorkflowOptionUiConfig) {
-  return Boolean(String(option.previewImageUrl || "").trim());
+  return Boolean(
+    String(option.previewImageUrl || "").trim() ||
+      String(option.previewImageSourceUrl || "").trim()
+  );
 }

 function hasWorkflowOptionConfiguredContent(option: AgentWorkflowOptionUiConfig) {
@ -3871,6 +3875,22 @@ export function AgentWorkflowSettingsClient({
        return;
      }

+      if (changedEntries.some(({ field }) => field === "agentWorkflowUiConfig")) {
+        const missingPreviewOptions = getAgentWorkflowMissingPreviewOptions(
+          config.steps || [],
+          { enabledOnly: true }
+        );
+        if (missingPreviewOptions.length > 0) {
+          const firstItems = missingPreviewOptions
+            .slice(0, 3)
+            .map((item) => `${item.stepPath} / ${item.path}`)
+            .join("；");
+          throw new Error(
+            `当前有 ${missingPreviewOptions.length} 个已启用卡片缺少自己的预览图，请先补图或关闭对应卡片后再保存。${firstItems}`
+          );
+        }
+      }
+
      const conflictedFields = changedEntries
        .filter(({ field }) => latestServerSignatures[field] !== baseSignatures[field])
        .map(({ field }) => AGENT_WORKFLOW_SETTINGS_FIELD_LABELS[field]);
--- a/app/api/site-settings/route.ts
+++ b/app/api/site-settings/route.ts
@ -35,6 +35,7 @@ import {
  AGENT_WORKFLOW_UI_CONFIG_KEY,
  AGENT_WORKFLOW_PROMPT_FRAGMENT_MAX_LENGTH,
  defaultAgentWorkflowUiConfig,
+  getAgentWorkflowMissingPreviewOptions,
  normalizeAgentWorkflowStepOrdering,
  normalizeAgentWorkflowUiConfig,
 } from "@/lib/agents/workflow-ui-config";
@ -176,6 +177,29 @@ const defaultRealtimeCanvasModeIconConfig: RealtimeCanvasModeIconConfig = {
  enhanceLabel: DEFAULT_ENHANCE_CANVAS_MODE_LABEL,
 };

+function createAgentWorkflowMissingPreviewResponse(
+  steps: ReturnType<typeof normalizeAgentWorkflowUiConfig>["steps"]
+) {
+  const missingPreviewOptions = getAgentWorkflowMissingPreviewOptions(steps || [], {
+    enabledOnly: true,
+  });
+
+  if (missingPreviewOptions.length === 0) {
+    return null;
+  }
+
+  return NextResponse.json(
+    {
+      error: `当前有 ${missingPreviewOptions.length} 个已启用卡片缺少自己的预览图，请先补图或关闭对应卡片后再保存。`,
+      details: missingPreviewOptions.slice(0, 30).map((item) => ({
+        path: ["agentWorkflowUiConfig", item.stepPath, item.path],
+        message: `缺少预览图：${item.stepPath} / ${item.path}`,
+      })),
+    },
+    { status: 400 }
+  );
+}
+
 async function readCanvasFeatureAvailability(valueByKey: Map<string, unknown>) {
  const [enabledTripoProviders, enabledWorldlabsProviders] = await Promise.all([
    db
@ -2379,6 +2403,12 @@ export async function PUT(request: NextRequest) {

      if (agentWorkflowUiConfig !== undefined) {
        const normalized = normalizeAgentWorkflowUiConfig(agentWorkflowUiConfig);
+        const missingPreviewResponse = createAgentWorkflowMissingPreviewResponse(
+          normalized.steps
+        );
+        if (missingPreviewResponse) {
+          return missingPreviewResponse;
+        }
        await persistSystemSettingWithHistory(
          AGENT_WORKFLOW_UI_CONFIG_KEY,
          normalized,
@ -3032,6 +3062,12 @@ export async function PUT(request: NextRequest) {

      if (agentWorkflowUiConfig !== undefined) {
        const normalized = normalizeAgentWorkflowUiConfig(agentWorkflowUiConfig);
+        const missingPreviewResponse = createAgentWorkflowMissingPreviewResponse(
+          normalized.steps
+        );
+        if (missingPreviewResponse) {
+          return missingPreviewResponse;
+        }
        await persistSystemSettingWithHistory(
          AGENT_WORKFLOW_UI_CONFIG_KEY,
          normalized,
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@ -2884,7 +2884,7 @@ export function ImageNode({
      !isSelected ||
      isMultiSelected ||
      !data.src ||
-      !boxCutoutMode
+      (!boxCutoutMode && !localEditMode)
    ) {
      return;
    }
@ -2925,7 +2925,7 @@ export function ImageNode({
      resizeObserver?.disconnect();
      if (rafId !== null) window.cancelAnimationFrame(rafId);
    };
-  }, [boxCutoutMode, data.src, isMultiSelected, isSelected]);
+  }, [boxCutoutMode, data.src, isMultiSelected, isSelected, localEditMode]);

  // 🆕 处理图片点击标注
  const handlePickerClick = useCallback(
@ -7467,88 +7467,6 @@ export function ImageNode({
                  onPointerMove={handleLocalEditPointerMove}
                  onPointerUp={handleLocalEditPointerUp}
                />
-                <div
-                  className="absolute left-3 top-3 z-[180] w-[260px] rounded-2xl border border-emerald-300/45 bg-slate-950/82 p-3 text-white shadow-[0_18px_54px_rgba(0,0,0,0.36)] backdrop-blur-md"
-                  data-canvas-no-drag="true"
-                  onClick={(event) => event.stopPropagation()}
-                  onMouseDown={(event) => event.stopPropagation()}
-                  onPointerDown={(event) => event.stopPropagation()}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <div>
-                      <div className="text-[13px] font-semibold">局部编辑</div>
-                      <div className="mt-0.5 text-[11px] text-white/58">
-                        框选区域后填写每个区域的修改要求
-                      </div>
-                    </div>
-                    <span className="rounded-full border border-white/10 bg-white/8 px-2 py-1 text-[11px] text-white/72">
-                      {localEditRegions.length}/{LOCAL_EDIT_MAX_REGIONS}
-                    </span>
-                  </div>
-                  <div className="mt-3 flex flex-wrap gap-1.5">
-                    {localEditRegions.length > 0 ? (
-                      localEditRegions.map((region) => (
-                        <button
-                          className={cn(
-                            "rounded-full border px-2 py-1 text-[11px] transition",
-                            editingLocalEditRegionId === region.id
-                              ? "border-white/70 bg-white/18 text-white"
-                              : "border-white/12 bg-white/8 text-white/70 hover:bg-white/14"
-                          )}
-                          key={region.id}
-                          onClick={() => setEditingLocalEditRegionId(region.id)}
-                          type="button"
-                        >
-                          {region.index}. {region.prompt || "待填写"}
-                        </button>
-                      ))
-                    ) : (
-                      <span className="text-[11px] text-white/48">
-                        暂无区域，直接在图片上拖拽框选。
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-3 flex items-center gap-2">
-                    <Button
-                      className="h-8 flex-1 rounded-xl bg-emerald-500 text-xs font-semibold text-white hover:bg-emerald-400"
-                      disabled={
-                        isSubmittingLocalEdit ||
-                        localEditRegions.length === 0 ||
-                        localEditRegions.some((region) => !region.prompt.trim())
-                      }
-                      onClick={() => void handleSubmitLocalEdit()}
-                      size="sm"
-                      type="button"
-                    >
-                      {isSubmittingLocalEdit ? (
-                        <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-                      ) : (
-                        <Wand2 className="mr-1.5 h-3.5 w-3.5" />
-                      )}
-                      生成
-                    </Button>
-                    <Button
-                      className="h-8 rounded-xl border-white/12 bg-white/8 px-2.5 text-xs text-white/72 hover:bg-white/14 hover:text-white"
-                      disabled={isSubmittingLocalEdit || localEditRegions.length === 0}
-                      onClick={clearLocalEditRegions}
-                      size="sm"
-                      type="button"
-                      variant="ghost"
-                    >
-                      清空
-                    </Button>
-                    <Button
-                      className="h-8 rounded-xl border-white/12 bg-white/8 px-2.5 text-xs text-white/72 hover:bg-white/14 hover:text-white"
-                      disabled={isSubmittingLocalEdit}
-                      onClick={resetLocalEditState}
-                      size="sm"
-                      type="button"
-                      variant="ghost"
-                    >
-                      退出
-                    </Button>
-                  </div>
-                </div>
                {boxCutoutMetrics ? (
                  <div
                    className="pointer-events-none absolute z-[151] rounded-[2px] border border-dashed border-emerald-300/36 bg-emerald-300/5"
@ -7608,7 +7526,7 @@ export function ImageNode({
                        {isEditing ? (
                          <input
                            autoFocus={editingLocalEditRegionId === region.id}
-                            className="h-9 min-w-0 flex-1 rounded-full border border-white/20 bg-slate-950/88 px-3 text-[12px] font-medium text-white outline-none ring-2 ring-transparent transition placeholder:text-white/42 focus:border-white/40 focus:ring-white/18"
+                            className="h-9 min-w-0 flex-1 rounded-full border border-slate-200 bg-white/95 px-3 text-[12px] font-medium text-slate-900 shadow-[0_10px_24px_rgba(15,23,42,0.14)] outline-none ring-2 ring-transparent transition placeholder:text-slate-400 focus:border-emerald-400 focus:ring-emerald-300/35 dark:border-white/20 dark:bg-slate-950/88 dark:text-white dark:placeholder:text-white/42 dark:focus:border-white/40 dark:focus:ring-white/18"
                            onBlur={() => {
                              if (region.prompt.trim()) {
                                setEditingLocalEditRegionId(null);
@ -7632,7 +7550,7 @@ export function ImageNode({
                          />
                        ) : (
                          <button
-                            className="h-9 min-w-0 flex-1 truncate rounded-full border border-white/18 bg-slate-950/82 px-3 text-left text-[12px] font-semibold text-white shadow-[0_10px_24px_rgba(0,0,0,0.24)] hover:bg-slate-900"
+                            className="h-9 min-w-0 flex-1 truncate rounded-full border border-slate-200 bg-white/95 px-3 text-left text-[12px] font-semibold text-slate-900 shadow-[0_10px_24px_rgba(15,23,42,0.14)] hover:bg-slate-50 dark:border-white/18 dark:bg-slate-950/82 dark:text-white dark:shadow-[0_10px_24px_rgba(0,0,0,0.24)] dark:hover:bg-slate-900"
                            onClick={() => setEditingLocalEditRegionId(region.id)}
                            title={region.prompt}
                            type="button"
@ -7641,7 +7559,7 @@ export function ImageNode({
                          </button>
                        )}
                        <button
-                          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/18 bg-slate-950/82 text-white/72 hover:bg-red-500 hover:text-white"
+                          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white/95 text-slate-500 shadow-[0_10px_24px_rgba(15,23,42,0.12)] hover:bg-red-500 hover:text-white dark:border-white/18 dark:bg-slate-950/82 dark:text-white/72 dark:shadow-[0_10px_24px_rgba(0,0,0,0.24)]"
                          onClick={() => deleteLocalEditRegion(region.id)}
                          title="删除区域"
                          type="button"
@ -8213,6 +8131,89 @@ export function ImageNode({
      </Dialog>

      {/* 工具栏使用 Portal 渲染到 body，避免被裁剪 */}
+      {isSelected &&
+        !isMultiSelected &&
+        data.src &&
+        localEditMode &&
+        !isThisNodePicking &&
+        !isCompareMode &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            className="fixed z-[9999] flex items-center gap-2 rounded-[24px] border border-slate-200 bg-white px-2 py-2 text-gray-800 shadow-[0_14px_38px_rgba(15,23,42,0.16)] dark:border-slate-700 dark:bg-slate-900 dark:text-gray-100"
+            onClick={(event) => event.stopPropagation()}
+            onMouseDown={(event) => event.stopPropagation()}
+            onPointerDown={(event) => event.stopPropagation()}
+            ref={boxCutoutToolbarRef}
+            style={{
+              top: boxCutoutToolbarPosition.top,
+              left: boxCutoutToolbarPosition.left,
+              transform: `scale(${FLOATING_TOOLBAR_SCALE})`,
+              transformOrigin: "top left",
+              pointerEvents: "auto",
+              maxWidth: `${Math.max(
+                180,
+                Math.floor(boxCutoutToolbarPosition.maxWidth / FLOATING_TOOLBAR_SCALE)
+              )}px`,
+              overflowX: "auto",
+              scrollbarWidth: "none",
+            }}
+          >
+            <div className="mr-1 inline-flex h-10 shrink-0 items-center gap-2 rounded-xl bg-slate-100 px-3 font-medium text-[13px] text-slate-700 dark:bg-zinc-800 dark:text-slate-100">
+              <Wand2 className="h-4 w-4 text-emerald-500" />
+              <span className="whitespace-nowrap">局部编辑</span>
+              <span className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/8 dark:text-slate-300">
+                {localEditRegions.length}/{LOCAL_EDIT_MAX_REGIONS}
+              </span>
+            </div>
+
+            <div className="mx-1 h-6 w-px bg-slate-200 dark:bg-slate-700" />
+
+            <Button
+              className="mr-1 inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl bg-emerald-600 px-3 font-semibold text-[13px] text-white hover:bg-emerald-500 hover:text-white disabled:bg-slate-300 disabled:text-slate-500 dark:bg-emerald-500 dark:disabled:bg-slate-700 dark:disabled:text-slate-400 dark:hover:bg-emerald-400"
+              disabled={
+                isSubmittingLocalEdit ||
+                localEditRegions.length === 0 ||
+                localEditRegions.some((region) => !region.prompt.trim())
+              }
+              onClick={() => void handleSubmitLocalEdit()}
+              title="生成局部编辑结果"
+              type="button"
+              variant="ghost"
+            >
+              {isSubmittingLocalEdit ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Wand2 className="h-4 w-4" />
+              )}
+              <span className="whitespace-nowrap">生成</span>
+            </Button>
+
+            <Button
+              className="h-10 shrink-0 rounded-xl px-3 text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+              disabled={isSubmittingLocalEdit || localEditRegions.length === 0}
+              onClick={clearLocalEditRegions}
+              title="清空区域"
+              type="button"
+              variant="ghost"
+            >
+              清空
+            </Button>
+
+            <Button
+              className="h-10 shrink-0 rounded-xl px-3 text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+              disabled={isSubmittingLocalEdit}
+              onClick={resetLocalEditState}
+              title="退出局部编辑"
+              type="button"
+              variant="ghost"
+            >
+              退出
+            </Button>
+          </div>,
+          document.body
+        )}
+
      {isSelected &&
        !isMultiSelected &&
        data.src &&
--- a/lib/agents/workflow-ui-config.ts
+++ b/lib/agents/workflow-ui-config.ts
@ -142,6 +142,16 @@ export interface FlattenedAgentWorkflowStep {
  parentKeys: string[];
 }

+export interface AgentWorkflowMissingPreviewOption {
+  key: string;
+  label: string;
+  path: string;
+  stepKey: string;
+  stepPath: string;
+  disabled: boolean;
+  childCount: number;
+}
+
 function cloneOption(
  option: AgentWorkflowOptionUiConfig
 ): AgentWorkflowOptionUiConfig {
@ -787,6 +797,73 @@ export function countAgentWorkflowOptionTree(
  return flattenAgentWorkflowOptionTree(options).length;
 }

+export function hasAgentWorkflowOptionOwnPreview(
+  option: AgentWorkflowOptionUiConfig
+): boolean {
+  return Boolean(
+    String(option.previewImageUrl || "").trim() ||
+      String(option.previewImageSourceUrl || "").trim()
+  );
+}
+
+export function getAgentWorkflowMissingPreviewOptions(
+  steps: AgentWorkflowStepUiConfig[],
+  options: { enabledOnly?: boolean } = {}
+): AgentWorkflowMissingPreviewOption[] {
+  const enabledOnly = options.enabledOnly !== false;
+  const missingOptions: AgentWorkflowMissingPreviewOption[] = [];
+
+  const walkOptions = (
+    optionItems: AgentWorkflowOptionUiConfig[],
+    stepKey: string,
+    stepPath: string,
+    parentPath: string[] = []
+  ) => {
+    for (const option of [...(optionItems || [])].sort(
+      (left, right) => left.sortOrder - right.sortOrder
+    )) {
+      const disabled = option.enabled === false;
+      const label = option.buttonName || option.key;
+      const pathParts = [...parentPath, label];
+
+      if ((!enabledOnly || !disabled) && !hasAgentWorkflowOptionOwnPreview(option)) {
+        missingOptions.push({
+          key: option.key,
+          label,
+          path: pathParts.join(" / "),
+          stepKey,
+          stepPath,
+          disabled,
+          childCount: (option.children || []).length,
+        });
+      }
+
+      if (!enabledOnly || !disabled) {
+        walkOptions(option.children || [], stepKey, stepPath, pathParts);
+      }
+    }
+  };
+
+  const walkSteps = (stepItems: AgentWorkflowStepUiConfig[], parentPath: string[] = []) => {
+    for (const step of [...(stepItems || [])].sort(
+      (left, right) => left.sortOrder - right.sortOrder
+    )) {
+      if (enabledOnly && step.enabled === false) {
+        continue;
+      }
+
+      const stepTitle = step.title || step.key;
+      const stepPathParts = [...parentPath, stepTitle];
+      const stepPath = stepPathParts.join(" / ");
+      walkOptions(step.options || [], step.key, stepPath);
+      walkSteps(step.children || [], stepPathParts);
+    }
+  };
+
+  walkSteps(steps || []);
+  return missingOptions;
+}
+
 function collectWorkflowOptionKeySetFromSteps(
  steps: AgentWorkflowStepUiConfig[]
 ): Set<string> {