CMVR-IOT-UI/src/views/flow/index.vue

<!--
 * 文件说明：流程设计器主页面，负责编辑、校验、试运行、执行跟踪和快捷操作。
 * 作用范围：仅服务于流程设计器模块。
 -->
<template>
  <div class="page">
    <el-container class="page__container">
      <el-header v-if="!flowInfoData.isLog">
        <div class="flow-heading">
          <div class="flow-heading__name">{{ flowInfoData.name || "未命名流程" }}</div>
          <div class="flow-status" :class="`flow-status--${flowState}`">
            <span class="flow-status__dot"></span>
            <span>{{ stateMap[flowState] }}</span>
          </div>
        </div>
        <div class="btn__container">
          <div class="btn flow-actions">
            <el-tag v-if="hasRunResult && ['testRunError', 'testRunFinish'].includes(flowState)" :type="flowState === 'testRunFinish' ? 'success' : 'danger'">
              {{ totalRunningTime }}ms
            </el-tag>
            <el-button v-if="hasRunResult" @click="clearRun">
              <el-icon><Delete /></el-icon>清除结果
            </el-button>
            <el-button :type="groupSelectionPending ? 'primary' : 'default'" @click="group">
              <el-icon><CollectionTag /></el-icon>{{ groupSelectionPending ? "取消分组" : "分组" }}
            </el-button>
            <el-button v-if="flowState !== 'testRunning'" @click="testRun">
              <el-icon><VideoPlay /></el-icon>试运行
            </el-button>
            <el-button v-if="flowState === 'testRunning'" @click="flowPauseFn">
              <el-icon><VideoPause /></el-icon>暂停
            </el-button>
            <el-button v-if="flowState === 'pause'" @click="flowResumeFn">
              <el-icon><VideoPlay /></el-icon>恢复
            </el-button>
            <el-button v-if="['testRunning', 'pause'].includes(flowState)" @click="flowStopFn">
              <el-icon><CircleClose /></el-icon>终止
            </el-button>
          </div>
          <div class="btn publish-actions">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="试运行成功后才可以发布"
              placement="top"
              v-if="flowState !== 'testRunFinish'"
            >
              <el-button type="primary" :disabled="true"><el-icon><Upload /></el-icon>发布</el-button>
            </el-tooltip>
            <el-button v-else @click="deployFlow" type="primary"><el-icon><Upload /></el-icon>发布</el-button>

            <el-popover
              :width="260"
              @show="showNodeRelationship"
              popper-class="node-relationship-network-popover"
            >
              <template #reference>
                <el-button circle title="节点关系" aria-label="节点关系"><el-icon><Share /></el-icon></el-button>
              </template>
              <div>
                <div class="title">节点关系网</div>
                <div class="fit">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="适应屏幕"
                    placement="bottom"
                  >
                    <el-button size="small" circle @click="fitView"
                      ><el-icon><Location /></el-icon
                    ></el-button>
                  </el-tooltip>
                </div>
                <el-tree
                  style="max-width: 600px"
                  :data="treeData"
                  :props="defaultProps"
                  :default-expand-all="true"
                  @node-click="handleTreeNodeClick"
                />
              </div>
            </el-popover>
          </div>
        </div>
      </el-header>
      <el-container class="container">
        <el-aside v-if="!flowStore.disableForm">
          <Aside />
        </el-aside>
        <el-main>
          <div class="canvas-toolbar">
            <el-tooltip v-if="!flowStore.disableForm" content="撤销" placement="bottom">
              <el-button aria-label="撤销" @click="lf.undo()"><el-icon><RefreshLeft /></el-icon></el-button>
            </el-tooltip>
            <el-tooltip v-if="!flowStore.disableForm" content="重做" placement="bottom">
              <el-button aria-label="重做" @click="lf.redo()"><el-icon><RefreshRight /></el-icon></el-button>
            </el-tooltip>
            <span v-if="!flowStore.disableForm" class="canvas-toolbar__divider"></span>
            <el-tooltip content="适应视图" placement="bottom">
              <el-button aria-label="适应视图" @click="fitView"><el-icon><FullScreen /></el-icon></el-button>
            </el-tooltip>
          </div>
          <VueFlow
            id="main-flow"
            class="flow__container"
            ref="flowContainerRef"
            :min-zoom="0.1"
            :max-zoom="3"
            :node-drag-threshold="0"
            :nodes-draggable="!flowStore.disableForm"
            :nodes-connectable="!flowStore.disableForm"
            :edges-updatable="!flowStore.disableForm"
            :elements-selectable="true"
            :elevate-nodes-on-select="false"
            :delete-key-code="null"
            :multi-selection-key-code="['Control', 'Meta']"
            :selection-key-code="flowStore.disableForm ? null : true"
            :pan-on-drag="flowStore.disableForm ? true : [1, 2]"
            :zoom-on-double-click="false"
            :default-edge-options="defaultEdgeOptions"
            @connect="handleConnect"
            @node-double-click="handleNodeDoubleClick"
            @node-drag-start="handleNodeDragStart"
            @node-drag="handleNodeDrag"
            @node-drag-stop="handleNodeDragStop"
            @nodes-change="handleNodesChange"
            @edges-change="handleEdgesChange"
            @edge-click="handleEdgeClick"
            @pane-click="handlePaneClick"
            @selection-end="handleSelectionEnd"
            @dragover="dragover"
            @drop="drop"
          >
            <template #node-flow-node="nodeProps">
              <FlowNode v-bind="nodeProps" />
            </template>
            <template #edge-flow-edge="edgeProps">
              <FlowEdge v-bind="edgeProps" />
            </template>
            <Background color="#d9dee8" :gap="24" :size="1" />
            <Controls position="bottom-right" />
          </VueFlow>
        </el-main>
      </el-container>
    </el-container>

    <TestRun
      :drawer="isOpen"
      @close="isOpen = false"
      @changeState="changeState"
      :flowId="flowInfoData.itemId"
    />

    <ParamsDrawer
      v-if="showParamsDrawer"
      :drawer="true"
      :data="paramsDrawerData"
      @close="showParamsDrawer = false"
    />
  </div>

  <el-dialog v-model="visible" width="500" class="single-node-dialog" append-to-body>
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">执行{{ nodeName }}节点</h4>
      </div>
    </template>
    <div v-if="nodeAction === 'AGV_MOVE_TO_STATION'" class="single-node-station-tools">
      <el-button
        type="primary"
        plain
        :loading="stationLoading"
        :disabled="!singleNodeRobotId || !singleNodeDeviceId"
        @click="loadSingleNodeStations"
      >加载站点列表</el-button>
      <span>{{ singleNodeRobotId && singleNodeDeviceId ? '加载后从站点下拉框选择' : '请先选择机器人和设备' }}</span>
    </div>
    <el-form
      :inline="true"
      :model="formData"
      :rules="rules"
      ref="executeForm"
      label-position="top"
      label-width="auto"
      :disabled="flowStore.disableForm"
    >
      <div v-for="(field, index) in singleNodeFields" :key="field.key">
        <el-row class="single-node-param-row">
          <el-form-item
            class="single-node-param-name"
            :label="index === 0 ? '参数名' : ''"
          >
            <el-input
              :disabled="field.param?.disabled || false"
              v-model="field.param.name"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item
            class="single-node-param-value"
            :label="index === 0 ? '参数值' : ''"
          >
            <el-input-number
              v-if="field.param.componentType === 'number'"
              v-model="field.param.input"
              :min="0"
              :max="field.param.max || Infinity"
              :step="field.param.step || 1"
              :step-strictly="true"
              placeholder="请输入"
              clearable
            />
            <el-select
              v-model="field.param.input"
              v-else-if="field.param.componentType === 'select'"
              :disabled="field.param.deviceLocked"
              @change="field.param.name === 'robotId' && handleSingleNodeRobotChange(field.param.input)"
            >
              <el-option
                v-for="item in field.param.selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-else
              v-model="field.param.input"
              autosize
              type="textarea"
              resize="none"
              placeholder="请输入"
              clearable
            />
            <div v-if="field.param.name === 'deviceId' && field.param.deviceLocked" class="device-lock-hint">
              已自动匹配当前机器人设备
            </div>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="singleNodeExecuting" @click="execute"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, reactive, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
import { MarkerType, VueFlow, useVueFlow } from "@vue-flow/core";
import { v4 as uuid } from "uuid";
import { Background } from "@vue-flow/background";
import { Controls } from "@vue-flow/controls";
import "@vue-flow/core/dist/style.css";
import "@vue-flow/core/dist/theme-default.css";
import "@vue-flow/controls/dist/style.css";
import FlowNode from "./vue-flow/FlowNode.vue";
import FlowEdge from "./vue-flow/FlowEdge.vue";
import { createFlowFacade } from "./vue-flow/adapter";
import { useFlowEvents } from "./composables/useFlowEvents";
import TestRun from "./components/TestRun.vue";
import ParamsDrawer from "./components/ParamsDrawer.vue";
import Aside from "./components/Aside.vue";
import { ElMessage } from "element-plus";
import { useFlowStore } from "@/store/modules/flow";
import { emitter } from "@/utils/eventBus";
import { convertToTree } from "@/utils/flow";
import {
  actionRequiresDevice,
  createDefaultRobotRole,
  ensureNodeExecutionResources,
  getResourceRoles,
  mergeCopiedResourceRoles,
  normalizeFlowResourceSchema,
  validateFlowResources,
} from "@/utils/flowResources";
import {
  flowDeploy,
  flowView,
  flowPause,
  flowResume,
  flowStop,
  flowAction,
  getAgvStations,
} from "@/api/flow/flow";
import { getDetect } from "@/api/test/detect";
import { getRobotList, getRobotDevicesByRobotId } from '@/api/inspection/robot'
import { getDeviceKindForAction, toDeviceOptions } from '@/utils/robotDevice'
import {
  CircleClose,
  CollectionTag,
  Delete,
  FullScreen,
  Location,
  RefreshLeft,
  RefreshRight,
  Share,
  Upload,
  VideoPause,
  VideoPlay,
} from "@element-plus/icons-vue";

const flowContainerRef = ref(null);
const lfRef = ref(null);
const vueFlow = useVueFlow("main-flow");
const lf = createFlowFacade(vueFlow);
const loopChildDragContexts = new Map();
const { onFlowEvent } = useFlowEvents();
window.lf = lf;

const defaultEdgeOptions = {
  type: "flow-edge",
  animated: true,
  selectable: true,
  focusable: true,
  deletable: true,
  interactionWidth: 32,
  markerEnd: {
    type: MarkerType.ArrowClosed,
    color: "#ff6b35",
    width: 20,
    height: 20,
  },
  style: { stroke: "#ff6b35", strokeWidth: 2 },
};

/**
 * 处理 dragover 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} e 触发操作的浏览器事件
 */
const dragover = (e) => {
  e.preventDefault();
};

/**
 * 处理 drop 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} e 触发操作的浏览器事件
 */
const drop = (e) => {
  let node = e.dataTransfer.getData("flowNode");
  if (!node) return;
  node = JSON.parse(node);
  const point = lf.getPointByClient(e.clientX, e.clientY);
  const loopNode = findLoopAtPoint(point.canvasOverlayPosition);
  if (["stopLoop", "subEnd", "subStart", "currentLoop"].includes(node.type) && !loopNode) {
    ElMessage.warning("此节点只能拖拽到循环节点的循环体中");
    return;
  }
  const { type, ...other } = node;
  const newNode = lf.addNode({
    type,
    x: point.canvasOverlayPosition.x,
    y: point.canvasOverlayPosition.y,
    properties: {
      ...other,
    },
  });
  const normalizedResources = ensureNodeExecutionResources(lf.getGraphData(), newNode.id);
  if (normalizedResources.start) {
    lf.setProperties(normalizedResources.start.id, normalizedResources.start.properties);
  }
  if (normalizedResources.node) {
    lf.setProperties(normalizedResources.node.id, normalizedResources.node.properties);
  }
  if (loopNode && !["start", "end", "loop", "selectArea"].includes(newNode.type)) {
    lf.addToGroup(loopNode.id, newNode.id, point.canvasOverlayPosition);
  }

  if (
    !["selectArea", "stopLoop", "subStart", "subEnd"].includes(newNode.type)
  ) {
    showParamsDrawer.value = true;
    paramsDrawerData.value = lf.getGraphData().nodes.find((item) => item.id === newNode.id) || newNode;
  }
};

/**
 * 处理 handleConnect 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} connection 连接信息
 */
const handleConnect = (connection) => {
  if (!connection.source || !connection.target) return;
  const edge = lf.addEdge({
    type: "bezier",
    sourceNodeId: connection.source,
    targetNodeId: connection.target,
    sourceAnchorId: connection.sourceHandle || `${connection.source}_1`,
    targetAnchorId: connection.targetHandle || `${connection.target}_3`,
  });
  lf.emit("edge:add", { data: edge });
};

/**
 * 处理 handleNodeDoubleClick 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} { node } 调用方传入的 { node } 参数
 */
const handleNodeDoubleClick = ({ node }) => {
  const data = lf.getGraphData().nodes.find((item) => item.id === node.id);
  if (!data || ["selectArea", "stopLoop", "subStart", "subEnd", "end"].includes(data.type)) return;
  showParamsDrawer.value = true;
  paramsDrawerData.value = data;
};

/**
 * 查找 findLoopAtPoint 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} point 画布坐标
 */
const findLoopAtPoint = (point) => {
  return (vueFlow.getNodes.value || []).find((candidate) => {
    if (candidate.data?.flowType !== "loop") return false;
    const groupPosition = candidate.computedPosition || candidate.position;
    const groupWidth = Number(candidate.dimensions?.width || candidate.data?.size?.width || 0);
    const groupHeight = Number(candidate.dimensions?.height || candidate.data?.size?.height || 0);
    return point.x >= groupPosition.x + 24
      && point.x <= groupPosition.x + groupWidth - 24
      && point.y >= groupPosition.y + 112
      && point.y <= groupPosition.y + groupHeight - 24;
  });
};

/**
 * 查找 findContainingLoop 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} node 当前流程节点
 */
const findContainingLoop = (node) => {
  const position = node.computedPosition || node.position;
  const width = Number(node.dimensions?.width || node.data?.size?.width || 0);
  const height = Number(node.dimensions?.height || node.data?.size?.height || 0);
  return findLoopAtPoint({ x: position.x + width / 2, y: position.y + height / 2 });
};

/**
 * 处理 eventClientPoint 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} event 触发操作的浏览器事件
 */
const eventClientPoint = (event) => {
  const pointer = event?.touches?.[0] || event?.changedTouches?.[0] || event;
  if (!Number.isFinite(pointer?.clientX) || !Number.isFinite(pointer?.clientY)) return null;
  return { x: pointer.clientX, y: pointer.clientY };
};

/**
 * 处理 handleNodeDragStart 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} { node 调用方传入的 { node 参数
 * @param {*} event } 调用方传入的 event } 参数
 */
const handleNodeDragStart = ({ node, event }) => {
  const drag = lf.prepareLoopChildDrag(node.id);
  const clientPoint = eventClientPoint(event);
  if (!drag || !clientPoint) return;
  const pointer = lf.getPointByClient(clientPoint.x, clientPoint.y).canvasOverlayPosition;
  loopChildDragContexts.set(node.id, {
    groupId: drag.groupId,
    offset: { x: pointer.x - drag.position.x, y: pointer.y - drag.position.y },
  });
};

/**
 * 更新 updateLoopChildDrag 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} { node 调用方传入的 { node 参数
 * @param {*} event } 调用方传入的 event } 参数
 */
const updateLoopChildDrag = ({ node, event }) => {
  const drag = loopChildDragContexts.get(node.id);
  const clientPoint = eventClientPoint(event);
  if (!drag || !clientPoint) return;
  const pointer = lf.getPointByClient(clientPoint.x, clientPoint.y).canvasOverlayPosition;
  lf.layoutLoopDuringDrag(drag.groupId, node.id, {
    x: pointer.x - drag.offset.x,
    y: pointer.y - drag.offset.y,
  });
};

/**
 * 处理 handleNodeDrag 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} payload 事件数据
 */
const handleNodeDrag = (payload) => updateLoopChildDrag(payload);

/**
 * 处理 handleNodeDragStop 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} payload 事件数据
 */
const handleNodeDragStop = (payload) => {
  const { node } = payload;
  updateLoopChildDrag(payload);
  loopChildDragContexts.delete(node.id);
  const vueNode = vueFlow.findNode(node.id);
  if (
    vueNode
    && !vueNode.parentNode
    && !["start", "end", "loop", "selectArea"].includes(vueNode.data?.flowType)
  ) {
    const loopNode = findContainingLoop(vueNode);
    if (loopNode) lf.addToGroup(loopNode.id, vueNode.id);
  }

  lf.markChanged();
};

/**
 * 处理 handleNodesChange 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} changes 变更集合
 */
const handleNodesChange = (changes) => {
  if (changes.some((change) => ["add", "remove"].includes(change.type) || (change.type === "position" && change.dragging === false))) {
    lf.markChanged();
  }
};

/**
 * 处理 handleEdgesChange 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} changes 变更集合
 */
const handleEdgesChange = (changes) => {
  if (changes.some((change) => ["add", "remove"].includes(change.type))) lf.markChanged();
};

/**
 * 处理 handleEdgeClick 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} { event 调用方传入的 { event 参数
 * @param {*} edge } 调用方传入的 edge } 参数
 */
const handleEdgeClick = ({ event, edge }) => {
  event?.stopPropagation?.();
  lf.selectElementById(edge.id);
};

/**
 * 处理 handlePaneClick 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const handlePaneClick = () => lf.clearSelectElements();

const flowStore = useFlowStore();

const isOpen = ref(false);
const stateMap = {
  unpublished: "未发布",
  testRunning: "试运行中",
  testRunFinish: "试运行成功",
  testRunError: "试运行失败",
  release: "已发布",
  updateData: "修改中",
  pause: "已暂停",
  stop: "已终止",
};
const flowState = ref("unpublished");
const flowInfoData = ref({
  itemId: "",
  instId: "",
  taskId: "",
  isLog: false,
  name: "流程",
});

/**
 * 试运行
 */
const testRun = async () => {
  // 1、验证画布内所有的表单通过验证
  const { nodes, edges } = lf.getGraphData();

  const isolatedNodes = nodes.filter((node) => {
    const nodeId = node.id;
    // 检查是否存在关联边
    return !edges.some(
      (edge) => edge.sourceNodeId === nodeId || edge.targetNodeId === nodeId
    );
  });

  const gl = isolatedNodes.filter((item) => {
    return !item.properties?.parentId && item.type !== "selectArea";
  });

  if (gl && gl.length > 0) {
    ElMessage.warning("存在孤立的节点，请检查！");
    return;
  }

  if (nodeErrorList.value.length > 0) {
    ElMessage.warning("存在参数错误的节点，请检查！");
    return;
  }

  const resourceValidation = validateFlowResources({ nodes, edges });
  if (resourceValidation.errors.length > 0) {
    const error = resourceValidation.errors[0];
    ElMessage.warning(error.message);
    if (error.nodeId) {
      lf.selectElementById(error.nodeId);
      lf.focusOn({ id: error.nodeId });
    }
    return;
  }

  isOpen.value = true;
};

// 流程暂停
/**
 * 处理 flowPauseFn 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const flowPauseFn = async () => {
  const res = await flowPause(instId.value);
  if (res.code === 200) {
    flowState.value = "pause";
    ElMessage.success(res.msg);
  }
};

const totalRunningTime = ref(0);
const hasRunResult = ref(false);
let flowPollTimer = null;
let flowDisposed = false;

/**
 * 清理 clearFlowPollTimer 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const clearFlowPollTimer = () => {
  if (flowPollTimer !== null) {
    window.clearTimeout(flowPollTimer);
    flowPollTimer = null;
  }
};

/**
 * 调度 scheduleFlowView 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} currentInstId 当前流程实例 ID
 * @param {*} taskId 任务 ID
 * @param {*} delay 延迟毫秒数
 */
const scheduleFlowView = (currentInstId, taskId = null, delay = 2000) => {
  clearFlowPollTimer();
  flowPollTimer = window.setTimeout(() => {
    flowPollTimer = null;
    if (!flowDisposed) loopFlowView(currentInstId, taskId);
  }, delay);
};

/**
 * 处理 flowResumeFn 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const flowResumeFn = async () => {
  const res = await flowResume(instId.value);
  if (res.code === 200) {
    flowState.value = "testRunning";
    clearFlowPollTimer();
    loopFlowView(instId.value);
    ElMessage.success(res.msg);
  }
};

/**
 * 处理 flowStopFn 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const flowStopFn = async () => {
  const res = await flowStop(instId.value);
  if (res.code === 200) {
    clearFlowPollTimer();
    flowState.value = "stop";
    hasRunResult.value = true;
    flowStore.updateDisableForm(false);
    ElMessage.success(res.msg);
  }
};

const initFlowData = {
  nodes: [
    {
      type: "start",
      x: 300,
      y: 100,
      properties: {
        name: "Start",
        action: "start",
        schemaVersion: 2,
        resourceRoles: [createDefaultRobotRole()],
        inputParams: [],
      },
    },
    {
      type: "end",
      x: 1300,
      y: 700,
      properties: {
        name: "End",
        action: "end",
      },
    },
  ],
  // 边
  edges: [],
};

const hasSameEdge = (edge, ignoredId) => lf.getGraphData().edges.some((item) => (
  item.id !== ignoredId
  && item.sourceNodeId === edge.sourceNodeId
  && item.targetNodeId === edge.targetNodeId
  && item.sourceAnchorId === edge.sourceAnchorId
  && item.targetAnchorId === edge.targetAnchorId
));

const validEdge = (data) => {
  // 校验思路：先确认端点存在，再按节点类型限制方向；最后结合锚点名称和现有连线判重。
  // 任一阶段失败都会删除候选连线，避免非法边进入可保存的画布数据。
  const sourceModel = lf.getNodeModelById(data.sourceNodeId);
  const targetModel = lf.getNodeModelById(data.targetNodeId);
  if (!sourceModel || !targetModel) {
    lf.deleteEdge(data.id);
    return;
  }

  const sourceAnchorArr = sourceModel.anchors;
  const [sourceName] = sourceAnchorArr
    .filter((item) => {
      return item.id === data.sourceAnchorId;
    })
    .map((item) => {
      return item.name;
    });

  const targetAnchorArr = targetModel.anchors;
  const [targetName] = targetAnchorArr
    .filter((item) => {
      return item.id === data.targetAnchorId;
    })
    .map((item) => {
      return item.name;
    });

  if (!sourceName || !targetName) {
    lf.deleteEdge(data.id);
    return;
  }

  if (sourceName === "right" && targetName === "left") {
    if (hasSameEdge(data, data.id)) {
      lf.deleteEdge(data.id);
    }
    return;
  } else if (
    (sourceName === "right" && targetName === "right") ||
    (sourceName === "left" && targetName === "left")
  ) {
    lf.deleteEdge(data.id);
  } else if (sourceName === "left" && targetName === "right") {
    const sourceNodeId = data.targetNodeId;
    const sourceAnchorId = data.targetAnchorId;
    const targetNodeId = data.sourceNodeId;
    const targetAnchorId = data.sourceAnchorId;
    lf.deleteEdge(data.id);
    if (hasSameEdge({ sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId })) return;
    lf.addEdge({
      type: "bezier",
      sourceNodeId,
      targetNodeId,
      sourceAnchorId,
      targetAnchorId,
    });
  }
};

const instId = ref(null);
const changeState = (value) => {
  oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()));
  isOpen.value = false;
  flowStore.updateDisableForm(true);
  flowState.value = value.type;
  hasRunResult.value = false;

  instId.value = value.instId;
  clearFlowPollTimer();
  loopFlowView(value.instId);
};

const loopFlowView = async (instId, taskId = null) => {
  // 轮询思路：优先使用任务 ID 查询指定执行，否则查询实例最新状态，再统一映射节点状态。
  // 仅在非日志模式下根据终态停止或续排定时器，日志回放保持为一次性快照。
  const params = {
    itemId: flowInfoData.value.itemId,
    instId,
  };
  if (taskId) {
    params.taskId = taskId;
  }
  const res = await flowView(params);
  if (flowDisposed) return;
  if (res.code === 200) {
    const arr = res.data || [];
    if (arr.length > 0) hasRunResult.value = true;
    arr.forEach((item) => {
      emitter.emit("changeNodeState", item);
    });
    oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()));
    if (
      arr[arr.length - 1]?.nodeType !== "END" &&
      !["FAILED", "STOPPED"].includes(arr[arr.length - 1]?.status)
    ) {
      scheduleFlowView(instId);
    } else if (
      arr[arr.length - 1]?.nodeType === "END" &&
      arr[arr.length - 1]?.status === "SUCCESS"
    ) {
      if (!flowInfoData.value.isLog) {
        flowStore.updateDisableForm(false);
        flowState.value = "testRunFinish";
        totalRunningTime.value = arr[arr.length - 1].endTime - arr[0].startTime
      }
    } else {
      if (!flowInfoData.value.isLog) {
        if (["PAUSED", "STOPPED"].includes(arr[arr.length - 1]?.status)) {
          flowState.value = arr[arr.length - 1]?.status === "PAUSED" ? "pause" : "stop";
        } else {
          flowState.value = "testRunError";
          totalRunningTime.value = arr[arr.length - 1].endTime - arr[0].startTime
          flowStore.updateDisableForm(false);
        }
      }
    }
  }
};

let oldFlowData = {};
/**
 * 发布
 */
const deployFlow = async () => {
  if (flowState.value !== "testRunFinish") {
    ElMessage.warning("试运行成功后才可以发布");
    return;
  }

  try {
    const res = await flowDeploy({ id: flowInfoData.value.itemId });

    if (res.code === 200) {
      ElMessage.success(res.msg);
      flowState.value = "release";
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    ElMessage.error("部署操作产生异常");
  }
};

const loadFlowData = async (id, lf) => {
  try {
    const res = await getDetect(id);
    if (res.data && res.data.flowData) {
      const flowData = normalizeFlowResourceSchema(JSON.parse(res.data.flowData));
      lf.render(flowData);

      nextTick(() => {
        oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()));
        lf.fitView();
      });
    } else {
      // 渲染数据 data
      lf.render(initFlowData);
      oldFlowData = initFlowData;
      nextTick(() => lf.zoom(0.8, [850, 450]));
    }
  } catch (err) {
    lf.render(initFlowData);
    oldFlowData = initFlowData;
    nextTick(() => lf.zoom(0.8, [850, 450]));
  }
};

const registerBeforeUnload = () => {
  window.addEventListener("beforeunload", handleBeforeUnload);
};

const handleBeforeUnload = (_event) => {
  if (flowState.value === "pause" && !flowInfoData.value.isLog) {
    flowStopFn();
  }
};

const justLoadFlow = () => {
  const url = new URL(window.location.href);
  const locationParams = Object.fromEntries(url.searchParams.entries());
  if (locationParams?.itemId) {
    flowState.value = locationParams.state === "0" ? "release" : "unpublished";
    flowInfoData.value = {
      itemId: locationParams.itemId,
      instId: locationParams?.instId || "",
      taskId: locationParams?.taskId || "",
      isLog: locationParams?.isLog || false,
      name: decodeURIComponent(locationParams.name),
    };

    if (flowInfoData.value.isLog) {
      flowStore.updateDisableForm(true);
      scheduleFlowView(flowInfoData.value.instId, flowInfoData.value.taskId, 1000);
    }
  }
};

let flowInitialized = false;
const initFlow = () => {
  if (flowInitialized) return;
  flowInitialized = true;
  lfRef.value = lf;
  loadFlowData(flowInfoData.value.itemId, lf);

  lf.on("edge:add", ({ data }) => validEdge(data));
  lf.on("history:change", () => {
    if (flowStore.disableForm) return;
    const flowData = lf.getGraphData();
    if (JSON.stringify(oldFlowData) !== JSON.stringify(flowData)) {
      flowState.value = "updateData";
    }
  });
};

const groupSelectionPending = ref(false);

const createGroup = (selectedNodes) => {
  const nodes = selectedNodes.filter((item) => (
    !["selectArea", "loop"].includes(item.type)
    && !lf.getNodeModelById(item.id)?.parentId
  ));
  if (nodes.length < 2) {
    ElMessage.warning("请至少选择两个未分组节点");
    groupSelectionPending.value = false;
    return;
  }

  const INSET = { left: 52, top: 120, right: 52, bottom: 52 };
  let minX = Infinity;
  let minY = Infinity;
  let maxX = -Infinity;
  let maxY = -Infinity;
  const children = [];

  nodes.forEach((item) => {
    const model = lf.getNodeModelById(item.id);
    const width = model?.width || 372;
    const height = model?.height || 180;
    const left = Number.isFinite(model?.left) ? model.left : item.x - width / 2;
    const top = Number.isFinite(model?.top) ? model.top : item.y - height / 2;
    minX = Math.min(minX, left);
    minY = Math.min(minY, top);
    maxX = Math.max(maxX, left + width);
    maxY = Math.max(maxY, top + height);
    children.push(item.id);
  });

  const width = maxX - minX + INSET.left + INSET.right;
  const height = maxY - minY + INSET.top + INSET.bottom;
  lf.groupNodes({
    type: "selectArea",
    x: minX - INSET.left + width / 2,
    y: minY - INSET.top + height / 2,
    properties: {
      name: "分组",
      action: "NONE",
      width,
      height,
    },
  }, children);
  lf.clearSelectElements();
  groupSelectionPending.value = false;
};

const group = () => {
  if (groupSelectionPending.value) {
    groupSelectionPending.value = false;
    lf.clearSelectElements();
    return;
  }
  const { nodes } = lf.getSelectElements();
  if (nodes.length) createGroup(nodes);
  else groupSelectionPending.value = true;
};

const handleSelectionEnd = () => {
  if (!groupSelectionPending.value) return;
  createGroup(lf.getSelectElements().nodes);
};

const treeData = ref(null);
const defaultProps = {
  children: "children",
  label: "name",
};
const showNodeRelationship = () => {
  const { nodes } = lf.getGraphData();
  treeData.value = convertToTree(nodes);
};

const handleTreeNodeClick = (node) => {
  lf.focusOn({
    id: node.id,
  });
  lf.selectElementById(node.id);
};

const fitView = () => {
  lf.fitView();
};

const nodeName = ref("");
const visible = ref(false);
const formData = reactive({
  nodeParams: [],
});
const rules = reactive({});
const executeForm = ref();
const nodeAction = ref("");
const singleNodeExecuting = ref(false);
const activeSingleNodeId = ref("");
// 单节点机器人选择按节点缓存；新节点默认沿用最近一次选择。
const singleNodeRobotCache = new Map();
let lastSingleNodeRobotId = "";
const stationLoading = ref(false);
const singleNodeRobotOptions = ref([]);
const flattenSingleNodeParams = (params, parentPath = [], fields = []) => {
  (params || []).forEach((param, index) => {
    const name = String(param?.name || "").trim();
    const path = [...parentPath, name || `param-${index}`];
    if (Array.isArray(param?.children)) {
      flattenSingleNodeParams(param.children, path, fields);
      return;
    }
    if (!name && (param?.input === "" || param?.input === null || param?.input === undefined)) return;
    fields.push({ key: `${path.join(".")}-${index}`, param });
  });
  return fields;
};
const singleNodeFields = computed(() => flattenSingleNodeParams(formData.nodeParams));
const buildSingleNodePayload = (params) => {
  const payload = {};
  (params || []).forEach((param) => {
    const name = String(param?.name || "").trim();
    if (!name) return;
    payload[name] = Array.isArray(param.children)
      ? buildSingleNodePayload(param.children)
      : param.input;
  });
  return payload;
};
const validateSingleNodeParams = () => {
  for (const { param } of singleNodeFields.value) {
    if (!String(param?.name || "").trim()) {
      ElMessage.warning("请输入参数名");
      return false;
    }
    if (param.input === "" || param.input === null || param.input === undefined) {
      ElMessage.warning(`请输入参数 ${param.name} 的值`);
      return false;
    }
  }
  return true;
};
const singleNodeRobotId = computed(() =>
  formData.nodeParams.find((item) => item.name === "robotId")?.input
);
const singleNodeDeviceId = computed(() =>
  formData.nodeParams.find((item) => item.name === "deviceId")?.input
);
// 在执行、关闭弹窗或切换节点前记录当前机器人选择。
const rememberSingleNodeRobot = () => {
  if (!activeSingleNodeId.value || !singleNodeRobotId.value) return;
  lastSingleNodeRobotId = singleNodeRobotId.value;
  singleNodeRobotCache.set(activeSingleNodeId.value, singleNodeRobotId.value);
};

watch(visible, (value) => {
  if (!value) rememberSingleNodeRobot();
});

const handleSingleNodeRobotChange = async (robotId) => {
  const deviceParam = formData.nodeParams.find((item) => item.name === "deviceId");
  if (!deviceParam) return;
  const originalDeviceId = deviceParam.input;
  const originalOptions = [...(deviceParam.selectOptions || [])];
  const originalLocked = Boolean(deviceParam.deviceLocked);
  const stationParam = formData.nodeParams.find((item) => item.name === "stationId");
  if (!robotId) return;
  try {
    const deviceKind = getDeviceKindForAction(nodeAction.value);
    const response = await getRobotDevicesByRobotId(robotId,
      deviceKind ? { deviceKind } : {});
    const devices = Array.isArray(response.data) ? response.data : [];
    if (!devices.length) {
      deviceParam.input = originalDeviceId;
      deviceParam.selectOptions = originalOptions;
      deviceParam.deviceLocked = originalLocked;
      ElMessage.warning("当前机器人没有匹配的在线设备，已保留原设备");
      return;
    }

    if (stationParam) {
      stationParam.input = "";
      stationParam.selectOptions = [];
    }
    deviceParam.componentType = "select";
    deviceParam.selectOptions = toDeviceOptions(devices);
    const currentDevice = devices.find((device) => device.deviceId === originalDeviceId);
    deviceParam.input = (currentDevice || devices[0]).deviceId;
    deviceParam.deviceLocked = devices.length === 1;
  } catch (error) {
    deviceParam.input = originalDeviceId;
    deviceParam.selectOptions = originalOptions;
    deviceParam.deviceLocked = originalLocked;
    console.error("加载机器人设备失败:", error);
    ElMessage.error("加载机器人设备失败");
  }
};

/**
 * 处理 stationOptions 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} stations 站点集合
 */
const stationOptions = (stations) => (Array.isArray(stations) ? stations : [])
  .filter((station) => station?.id !== undefined && station?.id !== null && String(station.id).trim())
  .map((station) => {
    const id = String(station.id).trim();
    const description = station.description ? String(station.description).trim() : "";
    return { value: id, label: description ? `${id} - ${description}` : id };
  });

/**
 * 加载 loadSingleNodeStations 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const loadSingleNodeStations = async () => {
  stationLoading.value = true;
  try {
    const response = await getAgvStations({
      robotId: singleNodeRobotId.value,
      deviceId: singleNodeDeviceId.value,
    });
    const options = stationOptions(response?.data);
    const stationParam = formData.nodeParams.find((item) => item.name === "stationId");
    if (!stationParam) return;
    stationParam.selectOptions = options;
    stationParam.stationRobotId = singleNodeRobotId.value;
    stationParam.stationDeviceId = singleNodeDeviceId.value;
    if (!options.some((item) => item.value === stationParam.input)) stationParam.input = "";
    if (options.length === 0) ElMessage.warning("当前AGV没有可用站点");
  } catch (error) {
    console.error("加载AGV站点列表失败:", error);
    ElMessage.error("加载AGV站点列表失败");
  } finally {
    stationLoading.value = false;
  }
};

/**
 * 加载 loadSingleNodeRobots 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const loadSingleNodeRobots = async () => {
  const response = await getRobotList({ pageNum: 1, pageSize: 1000, connectStatus: '1' });
  singleNodeRobotOptions.value = (response.rows || []).map(item => ({
    label: `${item.robotName || item.robotId} (${item.robotId})`,
    value: item.robotId,
  }));
};

/**
 * 处理 singleNodeExecution 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} e 触发操作的浏览器事件
 */
const singleNodeExecution = async (e) => {
  rememberSingleNodeRobot();
  const { name, nodeType, nodeParams, action, nodeId } = e.detail;
  const executionParams = JSON.parse(JSON.stringify(nodeParams || []))
    .filter((param) => !['robotId', 'deviceId'].includes(param.name));
  const normalizedAction = String(action || "").toUpperCase();
  const effectiveNodeType = nodeType || (getDeviceKindForAction(normalizedAction) ? "EDGE" : "");
  activeSingleNodeId.value = nodeId || `${normalizedAction}:${name || ""}`;
  nodeName.value = name;
  visible.value = true;
  nodeAction.value = normalizedAction;
  singleNodeExecuting.value = false;
  stationLoading.value = false;
  if (effectiveNodeType === "EDGE") {
    await loadSingleNodeRobots();
    const routingParams = [
      {
        disabled: true,
        input: "",
        name: "robotId",
        type: "input",
        componentType: "select",
        selectOptions: singleNodeRobotOptions.value,
      },
    ];
    if (actionRequiresDevice(normalizedAction)) {
      routingParams.push({
        disabled: true,
        input: "",
        name: "deviceId",
        type: "input",
        componentType: "select",
        selectOptions: [],
      });
    }
    formData.nodeParams = [...routingParams, ...executionParams];
    const cachedRobotId = singleNodeRobotCache.get(activeSingleNodeId.value) || lastSingleNodeRobotId;
    if (cachedRobotId) {
      formData.nodeParams[0].input = cachedRobotId;
      await handleSingleNodeRobotChange(cachedRobotId);
    }
  } else {
    formData.nodeParams = executionParams;
  }
  if (nodeAction.value === "AGV_MOVE_TO_STATION") {
    const stationParam = formData.nodeParams.find((item) => item.name === "stationId");
    if (stationParam) {
      stationParam.input = "";
      stationParam.selectOptions = [];
    }
  }
};

/**
 * 执行 execute 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const execute = async () => {
  if (nodeAction.value === "AGV_MOVE_TO_STATION") {
    const stationParam = formData.nodeParams.find((item) => item.name === "stationId");
    const validStation = stationParam?.selectOptions?.some((item) => item.value === stationParam.input);
    const correctSource = stationParam?.stationRobotId === singleNodeRobotId.value
      && stationParam?.stationDeviceId === singleNodeDeviceId.value;
    if (!validStation || !correctSource) {
      ElMessage.warning("请按当前机器人和设备重新加载并选择站点");
      return;
    }
  }
  if (!validateSingleNodeParams()) return;
  rememberSingleNodeRobot();
  singleNodeExecuting.value = true;
  try {
    const res = await flowAction({
      action: nodeAction.value,
      payload: buildSingleNodePayload(formData.nodeParams),
    });
    if (res.code === 200) {
      ElMessage.success("执行成功");
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    console.error("单节点执行失败:", error);
  } finally {
    singleNodeExecuting.value = false;
  }
};

const showParamsDrawer = ref(false);
const paramsDrawerData = ref({});

/**
 * 清理 clearRun 对应的数据或交互；作用范围仅限当前组件或模块。
 */
const clearRun = () => {
  const { nodes } = lf.getGraphData();
  nodes.forEach((item) => {
    const node = lf.getNodeModelById(item.id);
    if (node.closePopover) {
      node.closePopover();
    }
  });
  hasRunResult.value = false;
  totalRunningTime.value = 0;
}

const NODE_PASTE_OFFSET = 40;
const NON_COPYABLE_NODE_TYPES = new Set(["start", "end", "selectArea"]);
const FLOW_CLIPBOARD_TYPE = "cmvr-flow/nodes";
const FLOW_CLIPBOARD_VERSION = 1;
const FLOW_CLIPBOARD_MIME = "application/x-cmvr-flow-nodes";
const FLOW_CLIPBOARD_STORAGE_KEY = "cmvr-flow:clipboard";
const FLOW_EDITOR_INSTANCE_ID = uuid();
const NODE_REFERENCE_ARRAY_KEYS = new Set(["quote", "nameQuote"]);
let copiedPayload = null;
let lastPastedClipboardId = "";
let pasteCount = 0;

const EDITABLE_SELECTOR = [
  "input",
  "textarea",
  "select",
  "[contenteditable]:not([contenteditable='false'])",
  ".monaco-editor",
  ".el-input",
  ".el-textarea",
  ".el-select",
  ".el-cascader",
  ".el-input-number",
  "[role='dialog']",
].join(",");

/**
 * 判断 isEditableElement 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} element 调用方传入的 element 参数
 */
const isEditableElement = (element) => (
  element instanceof Element && Boolean(element.closest(EDITABLE_SELECTOR))
);

/**
 * 判断 isTextEditing 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} event 触发操作的浏览器事件
 */
const isTextEditing = (event) => {
  const eventPath = typeof event.composedPath === "function" ? event.composedPath() : [];
  if (eventPath.some(isEditableElement)) return true;
  if (isEditableElement(event.target) || isEditableElement(document.activeElement)) return true;
  return Boolean(window.getSelection()?.toString());
};

/**
 * 复制 copySelectedNodes 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} event 触发操作的浏览器事件
 */
const copySelectedNodes = (event) => {
  // 复制只保留选中节点及它们之间的内部连线，避免粘贴时重建指向未选节点的关系。
  // 节点数据在此深拷贝，后续生成新 ID 时不会反向污染原画布对象。
  if (flowStore.disableForm || isTextEditing(event)) return;
  const selectedNodes = lf.getSelectElements().nodes;
  if (!selectedNodes.length) return;

  const graph = lf.getGraphData();
  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
  const selectedIds = new Set(selectedNodes.map((node) => node.id));
  /**
   * 新增 addChildren 对应的数据或交互；作用范围仅限当前组件或模块。
   * @param {*} nodeId 流程节点 ID
   */
  const addChildren = (nodeId) => {
    const node = nodeById.get(nodeId);
    (node?.children || []).forEach((childId) => {
      if (selectedIds.has(childId)) return;
      selectedIds.add(childId);
      addChildren(childId);
    });
  };
  [...selectedIds].forEach(addChildren);

  const copyableIds = new Set(
    [...selectedIds].filter((id) => {
      const node = nodeById.get(id);
      return node && !NON_COPYABLE_NODE_TYPES.has(node.type);
    }),
  );
  const nodes = graph.nodes.filter((node) => copyableIds.has(node.id));
  if (!nodes.length) return;
  const edges = graph.edges.filter((edge) => (
    copyableIds.has(edge.sourceNodeId) && copyableIds.has(edge.targetNodeId)
  ));

  const payload = {
    type: FLOW_CLIPBOARD_TYPE,
    version: FLOW_CLIPBOARD_VERSION,
    clipboardId: uuid(),
    sourceEditorId: FLOW_EDITOR_INSTANCE_ID,
    sourceFlowId: flowInfoData.value.itemId || null,
    copiedAt: Date.now(),
    resourceRoles: getResourceRoles(graph),
    graph: JSON.parse(JSON.stringify({ nodes, edges })),
  };
  const serialized = JSON.stringify(payload);

  event.preventDefault();
  if (event.clipboardData) {
    try {
      event.clipboardData.setData(FLOW_CLIPBOARD_MIME, serialized);
    } catch (error) {
      console.debug("浏览器不支持自定义流程剪贴板类型，使用文本格式", error);
    }
    event.clipboardData.setData("text/plain", serialized);
  }
  copiedPayload = payload;
  try {
    localStorage.setItem(FLOW_CLIPBOARD_STORAGE_KEY, serialized);
  } catch (error) {
    console.debug("流程剪贴板本地缓存写入失败", error);
  }
  pasteCount = 0;
  lastPastedClipboardId = "";
};

/**
 * 解析并校验流程剪贴板内容，避免把普通 JSON 文本当作流程节点粘贴。
 * @param {*} raw 剪贴板原始文本
 */
const parseFlowClipboardPayload = (raw) => {
  if (!raw || typeof raw !== "string") return null;
  try {
    const payload = JSON.parse(raw);
    if (
      payload?.type !== FLOW_CLIPBOARD_TYPE
      || payload?.version !== FLOW_CLIPBOARD_VERSION
      || !Array.isArray(payload?.graph?.nodes)
      || !Array.isArray(payload?.graph?.edges)
      || payload.graph.nodes.length === 0
    ) {
      return null;
    }
    return payload;
  } catch {
    return null;
  }
};

/**
 * 优先读取系统剪贴板；浏览器未暴露剪贴板数据时使用同源窗口共享缓存。
 * @param {*} event 粘贴事件
 */
const readFlowClipboardPayload = (event) => {
  const clipboard = event.clipboardData;
  if (clipboard) {
    const customText = clipboard.getData(FLOW_CLIPBOARD_MIME);
    const plainText = clipboard.getData("text/plain");
    const raw = customText || plainText;
    // 系统剪贴板存在其他内容时，不应使用一份过期的本地流程缓存。
    if (raw) return parseFlowClipboardPayload(raw);
  }
  if (copiedPayload) return copiedPayload;
  try {
    return parseFlowClipboardPayload(localStorage.getItem(FLOW_CLIPBOARD_STORAGE_KEY));
  } catch {
    return null;
  }
};

/**
 * 重映射 remapNodeAnchorId 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} anchorId 锚点 ID
 * @param {*} oldNodeId 原节点 ID
 * @param {*} newNodeId 新节点 ID
 */
const remapNodeAnchorId = (anchorId, oldNodeId, newNodeId) => {
  if (!anchorId || !String(anchorId).startsWith(`${oldNodeId}_`)) return anchorId;
  return `${newNodeId}${String(anchorId).slice(oldNodeId.length)}`;
};

/**
 * 重映射 remapCopiedNodeReferences 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} value 待处理的新值
 * @param {*} idMap 节点 ID 映射
 * @param {*} parentKey 递归父键名
 */
const remapCopiedNodeReferences = (value, idMap, parentKey = "", options = {}) => {
  if (Array.isArray(value)) {
    const result = value.map((item) => remapCopiedNodeReferences(item, idMap, "", options));
    if (NODE_REFERENCE_ARRAY_KEYS.has(parentKey) && result.length) {
      if (idMap.has(result[0])) {
        result[0] = idMap.get(result[0]);
      } else if (options.dropExternalReferences) {
        options.removedReferenceCount += 1;
        return [];
      }
    }
    return result;
  }
  if (!value || typeof value !== "object") return value;
  return Object.fromEntries(Object.entries(value).map(([key, item]) => (
    [key, remapCopiedNodeReferences(item, idMap, key, options)]
  )));
};

/**
 * 跨窗口粘贴时将节点组移动到当前画布视口中心；当前窗口内复制仍使用固定偏移。
 * @param {*} payload 流程剪贴板载荷
 */
const resolvePasteTranslation = (payload) => {
  if (payload.sourceEditorId === FLOW_EDITOR_INSTANCE_ID) {
    const offset = NODE_PASTE_OFFSET * pasteCount;
    return { x: offset, y: offset };
  }

  const nodes = payload.graph.nodes;
  const xs = nodes.map((node) => Number(node.x || 0));
  const ys = nodes.map((node) => Number(node.y || 0));
  const sourceCenter = {
    x: (Math.min(...xs) + Math.max(...xs)) / 2,
    y: (Math.min(...ys) + Math.max(...ys)) / 2,
  };
  const canvas = document.getElementById("main-flow");
  if (!canvas) {
    const offset = NODE_PASTE_OFFSET * pasteCount;
    return { x: offset, y: offset };
  }
  const rect = canvas.getBoundingClientRect();
  const target = lf.getPointByClient(rect.left + rect.width / 2, rect.top + rect.height / 2)
    .canvasOverlayPosition;
  const repeatedOffset = NODE_PASTE_OFFSET * (pasteCount - 1);
  return {
    x: target.x - sourceCenter.x + repeatedOffset,
    y: target.y - sourceCenter.y + repeatedOffset,
  };
};

/**
 * 粘贴 pasteCopiedNodes 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} event 触发操作的浏览器事件
 */
const pasteCopiedNodes = (event) => {
  // 先为全部节点建立旧 ID 到新 ID 的映射，再重建父子引用、锚点和内部连线。
  // 该顺序保证循环、分组和分支之间的交叉引用都能解析到新的目标 ID。
  if (flowStore.disableForm || isTextEditing(event)) return;
  const payload = readFlowClipboardPayload(event);
  if (!payload) return;
  const copiedGraph = payload.graph;

  event.preventDefault();
  if (lastPastedClipboardId !== payload.clipboardId) {
    pasteCount = 0;
    lastPastedClipboardId = payload.clipboardId;
  }
  pasteCount += 1;
  const translation = resolvePasteTranslation(payload);
  const graph = lf.getGraphData();
  const existingNodeIds = new Set(graph.nodes.map((node) => node.id));
  const idMap = new Map(copiedGraph.nodes.map((node) => (
    [node.id, uuid().replace(/-/g, "")]
  )));
  const isSameEditor = payload.sourceEditorId === FLOW_EDITOR_INSTANCE_ID;
  const isSameFlow = Boolean(payload.sourceFlowId)
    && payload.sourceFlowId === flowInfoData.value.itemId;
  const referenceOptions = {
    dropExternalReferences: !isSameFlow,
    removedReferenceCount: 0,
  };

  const pastedNodes = copiedGraph.nodes.map((sourceNode) => {
    const newId = idMap.get(sourceNode.id);
    const properties = remapCopiedNodeReferences(
      JSON.parse(JSON.stringify(sourceNode.properties || {})),
      idMap,
      "",
      referenceOptions,
    );
    const parentId = properties.parentId;
    if (idMap.has(parentId)) properties.parentId = idMap.get(parentId);
    else if (!isSameEditor || !existingNodeIds.has(parentId)) delete properties.parentId;

    if (sourceNode.type === "branch" && Array.isArray(properties.anchor)) {
      properties.anchor = properties.anchor.map((anchor) => ({
        ...anchor,
        id: remapNodeAnchorId(anchor.id, sourceNode.id, newId),
      }));
    }

    const children = (sourceNode.children || [])
      .filter((childId) => idMap.has(childId))
      .map((childId) => idMap.get(childId));
    return {
      ...JSON.parse(JSON.stringify(sourceNode)),
      id: newId,
      x: Number(sourceNode.x || 0) + translation.x,
      y: Number(sourceNode.y || 0) + translation.y,
      properties,
      children,
    };
  });

  const pastedEdges = copiedGraph.edges.map((sourceEdge) => {
    const sourceNodeId = idMap.get(sourceEdge.sourceNodeId);
    const targetNodeId = idMap.get(sourceEdge.targetNodeId);
    return {
      ...JSON.parse(JSON.stringify(sourceEdge)),
      id: `edge_${uuid().replace(/-/g, "")}`,
      sourceNodeId,
      targetNodeId,
      sourceAnchorId: remapNodeAnchorId(
        sourceEdge.sourceAnchorId,
        sourceEdge.sourceNodeId,
        sourceNodeId,
      ),
      targetAnchorId: remapNodeAnchorId(
        sourceEdge.targetAnchorId,
        sourceEdge.targetNodeId,
        targetNodeId,
      ),
    };
  });

  const resourceMerge = mergeCopiedResourceRoles(graph, payload.resourceRoles || [], pastedNodes);
  const graphNodesWithResources = graph.nodes.map((node) => (
    node.id === resourceMerge.start?.id ? resourceMerge.start : node
  ));

  lf.render({
    nodes: [...graphNodesWithResources, ...pastedNodes],
    edges: [...graph.edges, ...pastedEdges],
  }, {
    resetHistory: false,
    replaceNodes: true,
    preserveNodeSizes: true,
    preserveNodePositions: true,
  });
  nextTick(() => {
    lf.selectElementsByIds(pastedNodes.map((node) => node.id));
    lf.markChanged();
    if (referenceOptions.removedReferenceCount > 0) {
      ElMessage.warning(
        `已粘贴 ${pastedNodes.length} 个节点，${referenceOptions.removedReferenceCount} 个跨工作流参数引用已清除`,
      );
    }
    if (resourceMerge.addedRoles || resourceMerge.addedSlots) {
      ElMessage.success(`已同步 ${resourceMerge.addedRoles} 个机器人角色和 ${resourceMerge.addedSlots} 个设备用途`);
    }
  });
};

/**
 * 处理 handleKeyboardShortcut 对应的数据或交互；作用范围仅限当前组件或模块。
 * @param {*} event 触发操作的浏览器事件
 */
const handleKeyboardShortcut = (event) => {
  if (isTextEditing(event)) return;

  const isModifierKey = event.ctrlKey || event.metaKey;
  const key = event.key.toLowerCase();
  if (isModifierKey && key === "z") {
    if (flowStore.disableForm) return;
    event.preventDefault();
    if (event.shiftKey) lf.redo();
    else lf.undo();
    return;
  }

  if (!["Backspace", "Delete"].includes(event.key) || flowStore.disableForm) return;

  const { nodes, edges } = lf.getSelectElements();
  if (nodes.some((node) => ["start", "end"].includes(node.type))) {
    lf.clearSelectElements();
    return;
  }
  if (nodes.length) {
    event.preventDefault();
    nodes.forEach((node) => {
      lf.deleteNode(node.id);
      emitter.emit("deleteNode", node.id);
    });
    return;
  }
  if (edges.length) {
    event.preventDefault();
    edges.forEach((edge) => lf.deleteEdge(edge.id));
  }
};

const nodeErrorList = ref([]);

onMounted(() => {
  justLoadFlow();
  initFlow();
  document.addEventListener("singleNodeExecution", singleNodeExecution);
  registerBeforeUnload();
  window.addEventListener("keydown", handleKeyboardShortcut);
  window.addEventListener("copy", copySelectedNodes);
  window.addEventListener("paste", pasteCopiedNodes);

  onFlowEvent("openParamsDrawer", (node) => {
    showParamsDrawer.value = true;
    paramsDrawerData.value = node;
  });

  onFlowEvent("throwAnError", (data) => {
    // 处理错误抛出逻辑
    const { id, hasError, type } = data;
    let element
    if (type === 'loop') {
      const tt = document.getElementsByClassName(`group__container ${id}`)[0];
      if (tt?.parentElement) {
        element = tt.parentElement;
      } else {
        element = tt
      }
    } else {
      const tt = document.getElementsByClassName(`node__container ${id}`)[0]
      if (tt?.parentElement) {
        element = tt.parentElement;
      } else {
        element = tt
      }
    }
    if (hasError) {
      if (!nodeErrorList.value.includes(id)) {
        nodeErrorList.value.push(id);
        if (element) element.style.background = "#ff00001a";
      }
    } else {
      nodeErrorList.value = nodeErrorList.value.filter((item) => item !== id);
      if (element) element.style.background = "#fff";
    }
  });

  onFlowEvent("deleteNode", (nodeId) => {
    const index = nodeErrorList.value.findIndex((item) => item === nodeId);
    if (index !== -1) {
      nodeErrorList.value.splice(index, 1);
    }
  })
});

onUnmounted(() => {
  flowDisposed = true;
  clearFlowPollTimer();
  loopChildDragContexts.clear();
  if (window.lf === lf) delete window.lf;

  window.removeEventListener("beforeunload", handleBeforeUnload);
  window.removeEventListener("keydown", handleKeyboardShortcut);
  window.removeEventListener("copy", copySelectedNodes);
  window.removeEventListener("paste", pasteCopiedNodes);
  document.removeEventListener("singleNodeExecution", singleNodeExecution);
});
</script>
<style lang="scss" scoped>

.single-node-param-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
}

.single-node-param-name,
.single-node-param-value {
  width: 100%;
  margin-right: 0;
  margin-bottom: 16px;

  :deep(.el-form-item__content),
  :deep(.el-input),
  :deep(.el-input-number),
  :deep(.el-select) {
    width: 220px;
  }
}

.single-node-param-value :deep(.el-textarea__inner) {
  min-height: 32px !important;
  line-height: 20px;
}

.single-node-station-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 6px;
  background: #f7f9fc;
  color: #65758b;
  font-size: 13px;
}

.device-lock-hint {
  width: 100%;
  margin-top: 6px;
  color: var(--el-color-success);
  font-size: 12px;
  line-height: 18px;
}

.page {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .page__container {
    width: 100%;
    height: 100%;
    position: relative;

    .el-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-bottom: 1px solid #e3e7ee;
      background: #fff;
      gap: 18px;

      .flow-heading {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 10px;
      }

      .flow-heading__name {
        overflow: hidden;
        max-width: 320px;
        color: #1f2937;
        font-size: 16px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .flow-status {
        display: flex;
        height: 24px;
        align-items: center;
        gap: 6px;
        padding: 0 8px;
        border: 1px solid #dfe4ec;
        border-radius: 5px;
        background: #f8fafc;
        color: #687386;
        font-size: 11px;
        white-space: nowrap;
      }

      .flow-status__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
      }

      .flow-status--release,
      .flow-status--testRunFinish {
        border-color: #c8ead5;
        background: #effaf3;
        color: #1e7d49;
      }

      .flow-status--testRunning,
      .flow-status--updateData {
        border-color: #cbdcf8;
        background: #f0f6ff;
        color: #2f6fca;
      }

      .flow-status--testRunError,
      .flow-status--stop {
        border-color: #f1cecb;
        background: #fff3f2;
        color: #c33b32;
      }

      .flow-status--pause {
        border-color: #ead9b8;
        background: #fff9eb;
        color: #9a6700;
      }

      .btn__container {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 10px;

        .btn {
          display: flex;
          align-items: center;
          gap: 8px;

          .el-button + .el-button { margin-left: 0; }
        }

        .publish-actions {
          padding-left: 10px;
          border-left: 1px solid #e4e8ef;
        }
      }
    }

    .container {
      height: calc(100% - 60px);
    }

    .el-main {
      padding: 0;
      position: relative;
      overflow: hidden;
    }

    .el-aside {
      margin: 0;
      width: 272px;
      padding: 0;
      border-right: 1px solid #e3e7ee;
      background: #f8fafc;
    }

    .canvas-toolbar {
      display: flex;
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 20;
      align-items: center;
      padding: 4px;
      border: 1px solid #dfe4ec;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 6px 18px rgba(31, 41, 55, 0.1);

      .el-button {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 5px;
        background: transparent;
        color: #566174;
      }

      .el-button + .el-button { margin-left: 2px; }

      .el-button:hover {
        background: #f1f5f9;
        color: #1f2937;
      }
    }

    .canvas-toolbar__divider {
      width: 1px;
      height: 18px;
      margin: 0 4px;
      background: #e1e6ed;
    }

    .flow__container {
      width: 100%;
      height: 100%;
      cursor: pointer;

      :deep(.vue-flow__node) {
        border: 0;
        background: transparent;
        cursor: grab;
      }

      :deep(.vue-flow__node.dragging) { cursor: grabbing; }

      :deep(.vue-flow__node .flow-node-shell),
      :deep(.vue-flow__node .flow-node-content),
      :deep(.vue-flow__node .node__container),
      :deep(.vue-flow__node .right),
      :deep(.vue-flow__node .editIcon),
      :deep(.vue-flow__node .resultText) {
        cursor: pointer;
      }

      :deep(.vue-flow__edge-path),
      :deep(.vue-flow__connection-path) {
        stroke: #ff6b35;
        stroke-width: 2;
      }

      :deep(.vue-flow__pane) {
        cursor: pointer;
      }

      :deep(.vue-flow__pane.dragging) {
        cursor: grabbing;
      }

      :deep(.vue-flow__selection) {
        border: 1px solid #2f80ed;
        background: rgba(47, 128, 237, 0.1);
        box-shadow: 0 0 0 1px rgba(47, 128, 237, 0.08);
      }

      :deep(.vue-flow__nodesselection-rect) {
        border: 1px dashed rgba(47, 128, 237, 0.72);
        background: rgba(47, 128, 237, 0.04);
      }

      :deep(.vue-flow__handle) {
        cursor: crosshair;
      }

      :deep(.vue-flow__edge) {
        cursor: pointer;
      }

      :deep(.vue-flow__edge-interaction) {
        cursor: pointer;
        pointer-events: stroke;
      }

      :deep(.vue-flow__edge.selected .vue-flow__edge-path) {
        stroke: #1677ff;
        stroke-width: 4;
        filter: drop-shadow(0 0 3px rgba(22, 119, 255, 0.45));
      }

      :deep(.vue-flow__controls) {
        overflow: hidden;
        border: 1px solid #dfe4ec;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12);
      }
    }
  }
}
</style>
<style lang="scss">
.node-relationship-network-popover {
  position: relative;

  .title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .fit {
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .el-tree {
    margin-top: 20px;
    max-height: 200px;
    overflow-y: auto;
  }
}


</style>