<template>
<!-- rr-theme container provides CSS variables; data-theme for light/dark -->
<div class="builder-page rr-theme" :data-theme="theme">
<div v-if="fallbackNotice" class="notice-top">
<span>已应用回退建议：提升 {{ fallbackNotice.type }} 优先级</span>
<button class="mini" @click="undoFallbackPromotion">撤销</button>
</div>
<div class="main">
<Canvas
:nodes="store.nodes"
:edges="store.edges"
:node-errors="validation.nodeErrors"
:focus-node-id="focusNodeId"
:fit-seq="fitSeq"
@select-node="store.selectNode"
@select-edge="store.selectEdge"
@duplicate-node="store.duplicateNode"
@remove-node="store.removeNode"
@connect-from="store.connectFrom"
@connect="store.onConnect"
@node-dragged="store.setNodePosition"
@add-node-at="onAddNodeAt"
/>
<div class="topbar rr-topbar backdrop-blur">
<div class="left">
<strong class="text-[var(--rr-text)]">{{ title }}</strong>
<span class="tip">工作流可视化编排</span>
</div>
<div class="right">
<button class="top-btn" @click="exportFlow" title="导出 JSON">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
</svg>
导出
</button>
<label class="top-btn import" title="导入 JSON">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
</svg>
导入
<input type="file" accept="application/json" @change="onImport" />
</label>
<button class="top-btn" @click="openRename" title="重命名工作流">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 20h9" />
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z" />
</svg>
Rename
</button>
<button
class="top-btn"
:class="{ active: triggerPanelVisible }"
@click="triggerPanelVisible = !triggerPanelVisible"
title="管理触发器"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
Triggers
</button>
<span class="divider-vert" />
<button
class="top-btn"
:disabled="!selectedId"
@click="runFromSelected"
title="从选中节点回放"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
从选中运行
</button>
<button class="top-btn primary" @click="runAll" title="从头回放整流">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
运行
</button>
<span class="divider-vert" />
<span class="status" :data-state="saveState">{{ saveLabel }}</span>
<button class="top-btn success" @click="save">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
<polyline points="17 21 17 13 7 13 7 21" />
<polyline points="7 3 7 8 15 8" />
</svg>
保存
</button>
</div>
</div>
<Sidebar
class="floating-sidebar"
:flow="store.flowLocal"
:palette-types="store.paletteTypes"
:subflow-ids="store.listSubflowIds()"
:current-subflow-id="currentSubflowIdVal"
@add-node="store.addNode"
@switch-main="store.switchToMain"
@switch-subflow="store.switchToSubflow"
@add-subflow="store.addSubflow"
@remove-subflow="store.removeSubflow"
/>
<PropertyPanel
v-if="activeNode"
class="floating-property"
:node="activeNode"
:variables="availableVars"
:highlight-field="highlightField"
:subflow-ids="store.listSubflowIds()"
@remove-node="store.removeNode"
@create-subflow="store.addSubflow"
@switch-to-subflow="store.switchToSubflow"
/>
<EdgePropertyPanel
v-else-if="activeEdge"
class="floating-property"
:edge="activeEdge"
:nodes="store.nodes"
@remove-edge="store.removeEdge"
/>
<TriggerPanel
v-if="triggerPanelVisible && store.flowLocal?.id"
class="floating-trigger"
:flow-id="store.flowLocal.id"
@close="triggerPanelVisible = false"
/>
<div class="bottom-toolbar">
<button class="toolbar-btn" @click="store.undo" title="撤销 (⌘/Ctrl+Z)">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 7v6h6M21 17a9 9 0 00-9-9 9 9 0 00-9 9" />
</svg>
</button>
<button class="toolbar-btn" @click="store.redo" title="重做 (⌘/Ctrl+Shift+Z)">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 7v6h-6M3 17a9 9 0 019-9 9 9 0 019 9" />
</svg>
</button>
<span class="toolbar-divider" />
<button class="toolbar-btn" @click="store.layoutAuto" title="自动排版">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="3" y="3" width="7" height="7" rx="1" />
<rect x="14" y="3" width="7" height="7" rx="1" />
<rect x="14" y="14" width="7" height="7" rx="1" />
<rect x="3" y="14" width="7" height="7" rx="1" />
</svg>
</button>
<button class="toolbar-btn" @click="fitAll" title="自适应视图">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"
/>
</svg>
</button>
</div>
</div>
<!-- simple toast container -->
<div class="rr-toast-container">
<div v-for="t in toasts" :key="t.id" class="rr-toast" :data-level="t.level">
{{ t.message }}
</div>
</div>
</div>
<!-- Rename dialog -->
<div v-if="renameVisible" class="rr-modal">
<div class="rr-dialog small">
<div class="rr-header">
<div class="title">重命名工作流</div>
<button class="close" @click="renameVisible = false">✕</button>
</div>
<div class="rr-body">
<div class="row">
<label>名称</label>
<input v-model="renameName" placeholder="工作流名称" />
</div>
<div class="row">
<label>描述</label>
<textarea v-model="renameDesc" placeholder="可选描述"></textarea>
</div>
</div>
<div class="rr-footer">
<button class="primary" @click="applyRename">保存</button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
// Dedicated full-page builder using the same inner components as popup modal
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import type { Flow as FlowV2 } from '@/entrypoints/background/record-replay/types';
import type { FlowV3 } from '@/entrypoints/background/record-replay-v3/domain/flow';
import type {
FlowId,
NodeId,
TriggerId,
} from '@/entrypoints/background/record-replay-v3/domain/ids';
import type { JsonObject } from '@/entrypoints/background/record-replay-v3/domain/json';
import type { TriggerSpec } from '@/entrypoints/background/record-replay-v3/domain/triggers';
import { useRRV3Rpc } from '@/entrypoints/shared/composables';
import {
flowV2ToV3ForRpc,
flowV3ToV2ForBuilder,
isFlowV3,
extractFlowCandidates,
} from '@/entrypoints/shared/utils';
import { useBuilderStore } from '@/entrypoints/popup/components/builder/store/useBuilderStore';
import { validateFlow } from '@/entrypoints/popup/components/builder/model/validation';
import Canvas from '@/entrypoints/popup/components/builder/components/Canvas.vue';
import Sidebar from '@/entrypoints/popup/components/builder/components/Sidebar.vue';
import PropertyPanel from '@/entrypoints/popup/components/builder/components/PropertyPanel.vue';
import EdgePropertyPanel from '@/entrypoints/popup/components/builder/components/EdgePropertyPanel.vue';
import TriggerPanel from '@/entrypoints/popup/components/builder/components/TriggerPanel.vue';
const title = ref('工作流编辑器');
// theme state: persisted in localStorage and default to system preference
const theme = ref<'light' | 'dark'>(
(localStorage.getItem('rr-theme') as 'light' | 'dark' | null) ||
(matchMedia && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
);
function toggleTheme() {
theme.value = theme.value === 'dark' ? 'light' : 'dark';
try {
localStorage.setItem('rr-theme', theme.value);
} catch {}
}
const store = useBuilderStore();
// V3 RPC client
const rpc = useRRV3Rpc({
autoConnect: true,
onError: (message) => pushToast(message, 'error'),
});
// toast event bus (listen to rr_toast)
type ToastItem = { id: string; message: string; level: 'info' | 'warn' | 'error' };
const toasts = ref<ToastItem[]>([]);
function pushToast(message: string, level: 'info' | 'warn' | 'error' = 'warn') {
const id = `toast_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
const item: ToastItem = { id, message, level };
toasts.value.push(item);
setTimeout(() => {
const idx = toasts.value.findIndex((x) => x.id === id);
if (idx >= 0) toasts.value.splice(idx, 1);
}, 2500);
}
function onToast(ev: any) {
try {
const msg = String(ev?.detail?.message || '');
const level = (ev?.detail?.level || 'warn') as any;
if (msg) pushToast(msg, level);
} catch {}
}
onMounted(() => window.addEventListener('rr_toast', onToast as any));
onUnmounted(() => window.removeEventListener('rr_toast', onToast as any));
// Parse query string
function getQuery(): Record<string, string> {
const q: Record<string, string> = {};
const url = new URL(location.href);
url.searchParams.forEach((v, k) => (q[k] = v));
return q;
}
async function bootstrap() {
const q = getQuery();
if (q.flowId) {
try {
await rpc.ensureConnected();
const flowV3 = (await rpc.request('rr_v3.getFlow', {
flowId: q.flowId as FlowId,
})) as FlowV3 | null;
if (flowV3) {
const { flow: flowV2, warnings } = flowV3ToV2ForBuilder(flowV3);
warnings.forEach((w) => pushToast(w, 'warn'));
store.initFromFlow(flowV2);
title.value = `编辑：${flowV2.name || flowV2.id}`;
if (q.focus) {
setTimeout(() => {
try {
store.selectNode(q.focus!);
(focusNodeId as any).value = q.focus!;
setTimeout(() => ((focusNodeId as any).value = null), 300);
} catch {}
}, 0);
}
} else {
// Flow not found - notify user and initialize empty flow
pushToast(`工作流 "${q.flowId}" 未找到，已创建新工作流`, 'warn');
initEmptyFlow();
}
} catch (e) {
pushToast(`加载工作流失败：${e instanceof Error ? e.message : String(e)}`, 'error');
initEmptyFlow();
}
} else if (q.new === '1') {
initEmptyFlow();
}
}
/**
* 初始化一个空的工作流
*/
function initEmptyFlow() {
const now = Date.now();
const empty: FlowV2 = {
id: `flow_${now}`,
name: '新建工作流',
version: 1,
steps: [],
variables: [],
meta: {
createdAt: new Date(now).toISOString(),
updatedAt: new Date(now).toISOString(),
} as any,
} as any;
store.initFromFlow(empty);
title.value = '新建工作流';
}
// Builder helpers mostly ported from modal component
const selectedId = computed<string | null>(() => (store.activeNodeId as any)?.value ?? null);
const selectedEdgeId = computed<string | null>(() => (store.activeEdgeId as any)?.value ?? null);
const activeNode = computed(() => store.nodes.find((n) => n.id === selectedId.value) || null);
const activeEdge = computed(() => store.edges.find((e) => e.id === selectedEdgeId.value) || null);
const validation = computed(() => validateFlow(store.nodes));
// Available variables for the currently selected node (global + previous node outputs)
const availableVars = computed(() => store.listAvailableVariables(selectedId.value || undefined));
const search = ref('');
const focusNodeId = ref<string | null>(null);
const currentSubflowIdVal = computed<string | null>(
() => (store.currentSubflowId as any)?.value ?? null,
);
const highlightField = ref<string | null>(null);
const fitSeq = ref(0);
function focusSearch() {
const q = search.value.trim().toLowerCase();
if (!q) return;
const matches = (n: any): boolean => {
if ((n.name || '').toLowerCase().includes(q)) return true;
if ((n.type || '').toLowerCase().includes(q)) return true;
try {
const walk = (v: any): boolean => {
if (v == null) return false;
if (typeof v === 'string')
return v.toLowerCase().includes(q) || v.toLowerCase().includes(`{${q}}`);
if (Array.isArray(v)) return v.some(walk);
if (typeof v === 'object') return Object.values(v).some(walk);
return false;
};
return walk(n.config);
} catch {
return false;
}
};
const hit = store.nodes.find((n) => matches(n));
if (hit) {
store.selectNode(hit.id);
focusNodeId.value = hit.id;
setTimeout(() => (focusNodeId.value = null), 300);
}
}
function onAddNodeAt(type: string, x: number, y: number) {
try {
store.addNodeAt(type as any, x, y);
} catch {}
}
function fitAll() {
fitSeq.value++;
}
// trigger panel state
const triggerPanelVisible = ref(false);
// rename dialog
const renameVisible = ref(false);
const renameName = ref('');
const renameDesc = ref('');
function openRename() {
renameName.value = store.flowLocal.name || '';
renameDesc.value = (store.flowLocal as any).description || '';
renameVisible.value = true;
}
function applyRename() {
store.flowLocal.name = renameName.value.trim();
(store.flowLocal as any).description = renameDesc.value;
renameVisible.value = false;
}
/**
* 保存 Flow 到 V3 RPC
* @returns 保存成功返回 FlowV3，失败返回 null
*/
async function save(): Promise<FlowV3 | null> {
try {
// Use exportFlowForSave to properly handle subflow editing:
// - Flushes current canvas state back to flowLocal (including subflow edits)
// - Returns deep copy with correct nodes/edges from flowLocal
// Note: steps are NOT generated - nodes/edges are the source of truth
const flowV2 = store.exportFlowForSave();
await rpc.ensureConnected();
// Convert V2 -> V3 for RPC
const { flow: flowV3, warnings: convWarnings } = flowV2ToV3ForRpc(flowV2);
convWarnings.forEach((w) => pushToast(w, 'warn'));
// Save via RPC (cast FlowV3 to JsonObject for RPC compatibility)
const saved = (await rpc.request('rr_v3.saveFlow', {
flow: flowV3 as unknown as JsonObject,
})) as unknown as FlowV3;
// Sync timestamps back to local state
if (!store.flowLocal.meta) {
(store.flowLocal as any).meta = {};
}
(store.flowLocal as any).meta.createdAt = saved.createdAt;
(store.flowLocal as any).meta.updatedAt = saved.updatedAt;
// Sync triggers (best-effort, don't block save result)
try {
await syncTriggersAndSchedules(flowV2.id, flowV2.nodes || []);
} catch {}
return saved;
} catch (e) {
pushToast(`保存失败：${e instanceof Error ? e.message : String(e)}`, 'error');
return null;
}
}
// ==================== Trigger Sync Helpers ====================
function trigId(flowId: string, nodeId: string, kind: string): TriggerId {
return `trg_${flowId}_${nodeId}_${kind}` as TriggerId;
}
function schId(flowId: string, nodeId: string, idx: number): TriggerId {
return `sch_${flowId}_${nodeId}_${idx}` as TriggerId;
}
/**
* 将 V2 schedule 配置转换为 cron 表达式
* @returns cron 表达式或 null（如果无法转换）
*/
function scheduleToCron(schedule: { type?: string; when?: string }): string | null {
if (!schedule) return null;
const type = String(schedule.type || '').trim();
const when = String(schedule.when || '').trim();
if (type === 'interval') {
const minutesRaw = Number(when);
if (!Number.isFinite(minutesRaw)) return null;
const minutes = Math.max(1, Math.round(minutesRaw));
if (minutes < 60) return `*/${minutes} * * * *`;
const hours = Math.max(1, Math.round(minutes / 60));
return `0 */${hours} * * *`;
}
if (type === 'daily') {
const [hRaw, mRaw] = when.split(':');
const hourRaw = Number(hRaw);
const minuteRaw = Number(mRaw);
if (!Number.isFinite(hourRaw) || !Number.isFinite(minuteRaw)) return null;
const hour = Math.min(23, Math.max(0, Math.floor(hourRaw)));
const minute = Math.min(59, Math.max(0, Math.floor(minuteRaw)));
return `${minute} ${hour} * * *`;
}
// V3 cron 不支持 'once' 一次性定时
return null;
}
/**
* 从 trigger 节点配置同步触发器到 V3 存储
* @description V2 schedules 会转换为 V3 cron triggers
*/
async function syncTriggersAndSchedules(flowId: string, nodes: unknown[]) {
const triggersNeeded: TriggerSpec[] = [];
const tnodes = (nodes || []).filter((n: any) => n && n.type === 'trigger');
for (const n of tnodes as any[]) {
const cfg = n.config || {};
const enabled = cfg.enabled !== false;
// URL trigger
if (cfg.modes?.url && Array.isArray(cfg.url?.rules) && cfg.url.rules.length) {
triggersNeeded.push({
id: trigId(flowId, n.id, 'url'),
kind: 'url',
enabled,
flowId: flowId as FlowId,
match: cfg.url.rules,
});
}
// Context menu trigger
if (cfg.modes?.contextMenu && cfg.contextMenu?.title) {
triggersNeeded.push({
id: trigId(flowId, n.id, 'menu'),
kind: 'contextMenu',
enabled,
flowId: flowId as FlowId,
title: cfg.contextMenu.title,
contexts: (Array.isArray(cfg.contextMenu.contexts)
? cfg.contextMenu.contexts
: ['all']
).map(String),
});
}
// Command trigger
if (cfg.modes?.command && cfg.command?.commandKey) {
triggersNeeded.push({
id: trigId(flowId, n.id, 'cmd'),
kind: 'command',
enabled,
flowId: flowId as FlowId,
commandKey: String(cfg.command.commandKey),
});
}
// DOM trigger
if (cfg.modes?.dom && cfg.dom?.selector) {
const debounceMsRaw = Number(cfg.dom.debounceMs);
triggersNeeded.push({
id: trigId(flowId, n.id, 'dom'),
kind: 'dom',
enabled,
flowId: flowId as FlowId,
selector: String(cfg.dom.selector),
appear: cfg.dom.appear !== false,
once: cfg.dom.once !== false,
debounceMs: Number.isFinite(debounceMsRaw) ? debounceMsRaw : 800,
});
}
// Schedule -> Cron trigger (V3 converts schedules to cron)
if (cfg.modes?.schedule && Array.isArray(cfg.schedules)) {
cfg.schedules.forEach((s: any, i: number) => {
const cron = scheduleToCron(s);
if (!cron) {
const scheduleType = String(s?.type || 'unknown');
if (scheduleType === 'once') {
pushToast(
`节点 ${n.id} 的定时 #${i + 1}: V3 暂不支持一次性定时（once），已跳过`,
'warn',
);
} else {
pushToast(
`节点 ${n.id} 的定时 #${i + 1}: 无法转换为 cron（type=${scheduleType}），已跳过`,
'warn',
);
}
return;
}
triggersNeeded.push({
id: schId(flowId, n.id, i),
kind: 'cron',
enabled: enabled && s?.enabled !== false,
flowId: flowId as FlowId,
cron,
});
});
}
}
// Sync triggers via V3 RPC
try {
await rpc.ensureConnected();
// Get existing triggers for this flow
const existing = (await rpc.request('rr_v3.listTriggers', {
flowId: flowId as FlowId,
})) as TriggerSpec[] | null;
const existingById = new Map((existing || []).map((t) => [t.id, t]));
const neededIds = new Set(triggersNeeded.map((t) => t.id));
// Create or update triggers
for (const trigger of triggersNeeded) {
// Cast TriggerSpec to JsonObject for RPC compatibility
const triggerPayload = trigger as unknown as JsonObject;
if (existingById.has(trigger.id)) {
await rpc.request('rr_v3.updateTrigger', { trigger: triggerPayload });
} else {
await rpc.request('rr_v3.createTrigger', { trigger: triggerPayload });
}
}
// Delete stale triggers (only node-managed triggers, not panel-created ones like interval/once)
// Node-managed trigger IDs have prefixes: trg_{flowId}_ or sch_{flowId}_
const nodeManagedPrefixes = [`trg_${flowId}_`, `sch_${flowId}_`];
const isNodeManaged = (triggerId: string) =>
nodeManagedPrefixes.some((prefix) => triggerId.startsWith(prefix));
for (const existing of existingById.values()) {
if (!neededIds.has(existing.id) && isNodeManaged(existing.id)) {
await rpc.request('rr_v3.deleteTrigger', { triggerId: existing.id });
}
}
} catch (e) {
// Best-effort sync - log for debugging but don't block user
console.warn('[Builder] Trigger sync failed:', e);
}
}
async function exportFlow() {
try {
// Save first to ensure latest changes are persisted
const saved = await save();
if (!saved) return;
// Export the V3 flow directly (no need for separate RPC call)
const blob = new Blob([JSON.stringify(saved, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
await chrome.downloads.download({
url,
filename: `${store.flowLocal.name || 'flow'}.json`,
saveAs: true,
} as chrome.downloads.DownloadOptions);
URL.revokeObjectURL(url);
} catch (e) {
pushToast(`导出失败：${e instanceof Error ? e.message : String(e)}`, 'error');
}
}
async function onImport(e: Event) {
const input = e.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
try {
const txt = await file.text();
const parsed = JSON.parse(txt);
const candidates = extractFlowCandidates(parsed);
if (!candidates.length) {
pushToast('导入失败：未找到工作流数据', 'error');
return;
}
const first = candidates[0];
if (isFlowV3(first)) {
// V3 format: save via RPC, then load into builder
await rpc.ensureConnected();
const saved = (await rpc.request('rr_v3.saveFlow', {
flow: first as unknown as JsonObject,
})) as unknown as FlowV3;
const { flow: flowV2, warnings } = flowV3ToV2ForBuilder(saved);
warnings.forEach((w) => pushToast(w, 'warn'));
store.initFromFlow(flowV2);
title.value = `编辑：${flowV2.name || flowV2.id}`;
// Sync triggers
try {
await syncTriggersAndSchedules(flowV2.id, flowV2.nodes || []);
} catch {}
} else {
// V2 format: load directly, then save to convert to V3
store.initFromFlow(first as FlowV2);
// If V2 flow has steps but no nodes, trigger conversion
if (
Array.isArray((first as any)?.steps) &&
(!Array.isArray((first as any)?.nodes) || (first as any).nodes.length === 0)
) {
store.importFromSteps();
}
title.value = `编辑：${store.flowLocal.name || store.flowLocal.id}`;
await save(); // Convert and save as V3
}
} catch (e) {
pushToast(`导入失败：${e instanceof Error ? e.message : String(e)}`, 'error');
} finally {
input.value = '';
}
}
async function runFromSelected() {
if (!selectedId.value || !store.flowLocal?.id) return;
try {
const saved = await save();
if (!saved) return;
await rpc.ensureConnected();
// Skip trigger nodes (they can't be start nodes)
const node = store.nodes.find((n) => n.id === selectedId.value) || null;
const startNodeId = node?.type === 'trigger' ? undefined : selectedId.value;
await rpc.request('rr_v3.enqueueRun', {
flowId: saved.id as FlowId,
...(startNodeId ? { startNodeId: startNodeId as NodeId } : {}),
});
} catch (e) {
pushToast(`运行失败：${e instanceof Error ? e.message : String(e)}`, 'error');
}
}
async function runAll() {
if (!store.flowLocal?.id) return;
try {
const saved = await save();
if (!saved) return;
await rpc.ensureConnected();
await rpc.request('rr_v3.enqueueRun', { flowId: saved.id as FlowId });
} catch (e) {
pushToast(`运行失败：${e instanceof Error ? e.message : String(e)}`, 'error');
}
}
// Hotkeys
function onKey(e: KeyboardEvent) {
const id = selectedId.value;
const isMeta = e.metaKey || e.ctrlKey;
// Do not trigger global hotkeys when user is typing in an input control
// or editing inside contenteditable, especially within the property panel.
const t = e.target as HTMLElement | null;
if (t) {
const tag = (t.tagName || '').toLowerCase();
const inEditable =
tag === 'input' ||
tag === 'textarea' ||
tag === 'select' ||
(t as HTMLElement).isContentEditable ||
!!t.closest('.floating-property');
if (inEditable) return;
}
if ((e.key === 'Delete' || e.key === 'Backspace') && id) {
e.preventDefault();
store.removeNode(id);
} else if (isMeta && e.key.toLowerCase?.() === 'd') {
if (id) {
e.preventDefault();
store.duplicateNode(id);
}
} else if (isMeta && e.key.toLowerCase?.() === 'z') {
e.preventDefault();
if (e.shiftKey) store.redo();
else store.undo();
} else if (isMeta && e.key.toLowerCase?.() === 's') {
e.preventDefault();
save();
}
}
onMounted(() => {
document.addEventListener('keydown', onKey);
bootstrap();
});
onUnmounted(() => document.removeEventListener('keydown', onKey));
// Auto save debounced
const saveState = ref<'idle' | 'saving' | 'saved'>('idle');
const saveLabel = computed(() =>
saveState.value === 'saving' ? '保存中…' : saveState.value === 'saved' ? '已保存' : '',
);
let saveTimer: ReturnType<typeof setTimeout> | null = null;
let statusTimer: ReturnType<typeof setTimeout> | null = null;
function scheduleAutoSave() {
if (saveTimer) clearTimeout(saveTimer);
saveTimer = setTimeout(async () => {
try {
saveState.value = 'saving';
await new Promise((r) => setTimeout(r, 0));
const saved = await save();
if (!saved) {
saveState.value = 'idle';
return;
}
saveState.value = 'saved';
if (statusTimer) clearTimeout(statusTimer);
statusTimer = setTimeout(() => (saveState.value = 'idle'), 1200);
} catch {
saveState.value = 'idle';
}
}, 800);
}
watch(
() => [store.nodes, store.edges, store.flowLocal.name, (store.flowLocal as any).description],
scheduleAutoSave,
{ deep: true },
);
// Fallback suggestion from run logs
const fallbackNotice = ref<{ nodeId: string; type: string; prevIndex: number } | null>(null);
function applyFallbackPromotion(nodeId: string, toType: string) {
const node = store.nodes.find((n) => n.id === nodeId);
if (!node || (node.type !== 'click' && node.type !== 'fill')) return;
const cands = (node as any).config?.target?.candidates as Array<{ type: string; value: string }>;
if (!Array.isArray(cands) || !cands.length) return;
const idx = cands.findIndex((c) => c.type === String(toType));
if (idx > 0) {
const cand = cands.splice(idx, 1)[0];
cands.unshift(cand);
fallbackNotice.value = { nodeId, type: String(toType), prevIndex: idx };
focusNode(nodeId);
highlightField.value = 'target.candidates';
setTimeout(() => (highlightField.value = null), 1500);
}
}
function undoFallbackPromotion() {
const n = fallbackNotice.value;
if (!n) return;
const node = store.nodes.find((x) => x.id === n.nodeId);
if (!node || (node.type !== 'click' && node.type !== 'fill')) {
fallbackNotice.value = null;
return;
}
const cands = (node as any).config?.target?.candidates as Array<{ type: string; value: string }>;
if (!Array.isArray(cands) || cands.length === 0) {
fallbackNotice.value = null;
return;
}
const currentIdx = cands.findIndex((c) => c.type === n.type);
if (currentIdx >= 0 && n.prevIndex >= 0 && n.prevIndex < cands.length) {
const cand = cands.splice(currentIdx, 1)[0];
cands.splice(n.prevIndex, 0, cand);
}
fallbackNotice.value = null;
}
function focusNode(id: string) {
store.selectNode(id);
focusNodeId.value = id;
setTimeout(() => (focusNodeId.value = null), 300);
}
// per-node error indicators replace global error panel
</script>
<style scoped>
.builder-page {
position: relative;
width: 100vw;
height: 100vh;
background: var(--rr-bg);
display: flex;
flex-direction: column;
color: var(--rr-text);
}
.topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
border: none;
background: #ededed;
z-index: 20;
pointer-events: none;
}
.topbar > * {
pointer-events: auto;
}
.rr-toast-container {
position: fixed;
top: 60px;
right: 16px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
}
.rr-toast {
min-width: 180px;
max-width: 360px;
padding: 10px 12px;
border-radius: 10px;
font-size: 12px;
color: #111;
background: #fff8e1;
border: 1px solid #facc15;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.rr-toast[data-level='info'] {
background: #e0f2fe;
border-color: #38bdf8;
}
.rr-toast[data-level='error'] {
background: #fee2e2;
border-color: #ef4444;
}
.topbar .left {
display: flex;
gap: 8px;
align-items: center;
}
.topbar .tip {
color: var(--rr-muted);
font-size: 12px;
}
.topbar .right {
display: flex;
gap: 8px;
align-items: center;
}
.main {
flex: 1;
position: relative;
background: var(--rr-bg);
overflow: hidden;
width: 100%;
height: 100%;
}
.floating-sidebar {
position: absolute;
left: 0;
top: 36px;
z-index: 10;
pointer-events: auto;
}
.floating-property {
position: absolute;
right: 0;
/* keep below topbar and pinned above bottom */
top: 52px;
z-index: 10;
pointer-events: auto;
}
.floating-trigger {
position: absolute;
right: 400px; /* offset from property panel */
top: 52px;
z-index: 10;
pointer-events: auto;
}
.bottom-toolbar {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
gap: 4px;
align-items: center;
background: var(--rr-card);
border: 1px solid var(--rr-border);
border-radius: 12px;
padding: 8px 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(8px);
}
.toolbar-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--rr-text-secondary);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.toolbar-btn:hover {
background: var(--rr-hover);
color: var(--rr-text);
}
.toolbar-btn:active {
transform: scale(0.95);
}
.toolbar-divider {
width: 1px;
height: 24px;
background: var(--rr-border);
margin: 0 4px;
}
.top-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--rr-border);
background: var(--rr-card);
color: var(--rr-text);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.top-btn:hover:not(:disabled) {
background: var(--rr-hover);
border-color: var(--rr-text-weak);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.top-btn:active:not(:disabled) {
transform: translateY(0);
}
.top-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.top-btn.active {
background: var(--rr-accent);
color: #fff;
border-color: var(--rr-accent);
}
.top-btn.primary {
background: var(--rr-accent);
color: #fff;
border-color: var(--rr-accent);
}
.top-btn.primary:hover {
background: #2563eb;
border-color: #2563eb;
}
.top-btn.success {
background: #10b981;
color: #fff;
border-color: #10b981;
}
.top-btn.success:hover {
background: #059669;
border-color: #059669;
}
.top-btn.danger {
background: rgba(239, 68, 68, 0.1);
color: var(--rr-danger);
border-color: rgba(239, 68, 68, 0.3);
}
.top-btn.danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: var(--rr-danger);
}
.top-btn.ghost {
border: none;
background: transparent;
}
.top-btn.ghost:hover {
background: var(--rr-hover);
}
.top-btn.import {
position: relative;
overflow: hidden;
}
.top-btn.import input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.divider-vert {
width: 1px;
height: 24px;
background: var(--rr-border);
margin: 0 8px;
}
.topbar .status {
color: var(--rr-muted);
font-size: 12px;
margin-right: 8px;
min-width: 48px;
display: inline-block;
}
.btn.import {
position: relative;
overflow: hidden;
}
.btn.import input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.notice-top {
background: var(--rr-brand-strong);
color: #fff;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.notice-top .mini {
background: var(--rr-card);
border: 1px solid var(--rr-border);
color: var(--rr-text);
}
/* removed legacy error-panel styles */
/* dialog styles (aligned with popup ScheduleDialog) */
.rr-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 2147483646;
display: flex;
align-items: center;
justify-content: center;
}
.rr-dialog {
background: #fff;
border-radius: 8px;
width: 520px;
max-width: 96vw;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.rr-dialog.small {
width: 520px;
}
.rr-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.rr-header .title {
font-weight: 600;
}
.rr-header .close {
border: none;
background: #f3f4f6;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
}
.rr-body {
padding: 12px 16px;
overflow: auto;
}
.rr-footer {
padding: 12px 16px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.rr-footer .primary {
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
padding: 8px 14px;
cursor: pointer;
}
.row {
display: flex;
gap: 8px;
align-items: center;
margin: 6px 0;
}
.row > label {
width: 88px;
color: #374151;
}
.row > input,
.row > textarea {
flex: 1;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 6px 8px;
}
.row > textarea {
min-height: 64px;
}
</style>
