/* ========== 公共节点样式(所有节点都会继承) ========== */ /* 所有节点的基础交互和事件处理 */ .Blueprint-node, .Blueprint-variable-node, .Blueprint-variable-set-node, .Blueprint-begin-node, .Blueprint-set-node, .Blueprint-get-node, .Blueprint-echo-node, .Blueprint-func-node, .Blueprint-schedule-node, .Blueprint-while-node, .Blueprint-if-node, .Blueprint-delay-node { /* 基础定位和尺寸 */ position: absolute; width: fit-content; overflow: visible; /* 事件处理(公共逻辑) */ pointer-events: auto; /* 节点本身可以接收事件 */ user-select: none; /* 防止文本被选中 */ cursor: move; /* 鼠标悬停显示可拖动 */ z-index: 10; /* 确保节点在连线之上 */ } /* 所有节点的子元素(header、body、execution等)默认不拦截事件 */ .Blueprint-node > *:not(.Blueprint-node-port), .Blueprint-variable-node > *:not(.Blueprint-node-port), .Blueprint-variable-set-node > *:not(.Blueprint-node-port), .Blueprint-begin-node > *:not(.Blueprint-node-port), .Blueprint-set-node > *:not(.Blueprint-node-port), .Blueprint-get-node > *:not(.Blueprint-node-port), .Blueprint-echo-node > *:not(.Blueprint-node-port), .Blueprint-func-node > *:not(.Blueprint-node-port), .Blueprint-schedule-node > *:not(.Blueprint-node-port), .Blueprint-while-node > *:not(.Blueprint-node-port), .Blueprint-if-node > *:not(.Blueprint-node-port), .Blueprint-delay-node > *:not(.Blueprint-node-port) { pointer-events: none; /* 让事件传递到父节点 */ user-select: none; /* 防止文本被选中 */ } /* 所有端口可以接收事件(用于连线) */ .Blueprint-node-port { pointer-events: auto !important; /* 端口可以接收事件 */ } /* 流程节点样式 */ .Blueprint-node { min-width: 180px; background: #2d2d30; border: 2px solid #007acc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: stretch; } .Blueprint-node.selected { border-color: #ffa500; box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.3); } /* 变量节点样式(圆角矩形,蓝色发光轮廓,扁平设计) */ .Blueprint-variable-node { min-width: 140px; height: 40px; /* 固定高度,更扁平 */ background: #2d2d30; border: 2px solid #2196f3; border-radius: 12px; /* 圆角矩形 */ box-shadow: 0 0 8px rgba(33, 150, 243, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); /* 蓝色发光效果 */ padding: 0 12px; /* 左右padding让内容有间距 */ display: flex; flex-direction: row; align-items: center; justify-content: center; } .Blueprint-variable-node.selected { border-color: #ffa500; box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.3), 0 0 8px rgba(33, 150, 243, 0.4); } /* SET 变量节点样式(类似流程节点,但更紧凑) */ .Blueprint-variable-set-node { min-width: 160px; background: #2d2d30; border: 2px solid #2196f3; border-radius: 8px; box-shadow: 0 0 8px rgba(33, 150, 243, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: stretch; } .Blueprint-variable-set-node.selected { border-color: #ffa500; box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.3), 0 0 8px rgba(33, 150, 243, 0.4); } /* SET 节点标题 */ .Blueprint-variable-set-header { background: linear-gradient(135deg, #424242 0%, #303030 100%); color: #fff; padding: 8px 16px; font-size: 14px; font-weight: 600; text-align: center; border-radius: 6px 6px 0 0; letter-spacing: 1px; } /* SET 节点执行箭头区域 */ .Blueprint-variable-set-execution { height: 32px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; overflow: visible; padding: 0 8px; } .Blueprint-variable-set-execution .Blueprint-node-port { position: relative; } .Blueprint-variable-set-execution .Blueprint-node-port.input.port-execution { left: auto; top: auto; } .Blueprint-variable-set-execution .Blueprint-node-port.output.port-execution { right: auto; top: auto; margin-left: auto; } /* SET 节点数据端口区域 */ .Blueprint-variable-set-data { padding: 8px 16px; overflow: visible; display: flex; flex-direction: column; gap: 4px; position: relative; min-height: 28px; } .Blueprint-variable-set-data .Blueprint-node-port { position: relative; left: auto; right: auto; } .Blueprint-variable-set-data .Blueprint-node-port.input { flex-direction: row; align-items: center; gap: 6px; } .Blueprint-variable-node-label { color: #fff; font-size: 13px; font-weight: 500; text-align: center; padding: 0 12px; flex: 1; display: flex; align-items: center; justify-content: center; } .Blueprint-node-header { background: #007acc; color: #fff; padding: 12px 16px; font-size: 13px; font-weight: 500; border-radius: 2px 2px 0 0; display: flex; align-items: center; justify-content: center; } /* 区域2:执行箭头区域(固定高度) */ .Blueprint-node-execution { height: 40px; /* 固定高度 */ display: flex; flex-direction: row; justify-content: space-between; /* 输入在左,输出在右 */ align-items: center; /* 纵向居中 */ position: relative; overflow: visible; padding: 0 8px; } /* 区域3:参数区域 */ .Blueprint-node-params { padding: 12px 16px; overflow: visible; display: flex; flex-direction: column; gap: 8px; /* 参数之间的间距 */ position: relative; min-height: 20px; } .Blueprint-variable-node-body { width: 100%; height: 100%; padding: 0 8px; overflow: visible; display: flex; align-items: center; justify-content: space-between; } /* 变量节点的端口样式调整 */ .Blueprint-variable-node .Blueprint-node-port { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; } .Blueprint-variable-node .Blueprint-node-port.input { left: -8px; } .Blueprint-variable-node .Blueprint-node-port.output { right: -8px; } .Blueprint-node-port { position: absolute; /* 端口位置需要根据计算值定位,保留绝对定位 */ cursor: crosshair; z-index: 10; display: flex; align-items: center; overflow: visible; /* 确保箭头不被裁剪 */ min-width: 16px; min-height: 16px; } /* 执行端口的容器,确保箭头可以伸出 */ .Blueprint-node-port.port-execution { width: 20px; height: 12px; } /* 数据端口在节点内部,稍微靠近边缘 */ .Blueprint-node-port.input:not(.port-execution) { left: 8px; flex-direction: row; align-items: center; gap: 4px; width: auto; /* 允许端口容器根据内容扩展 */ max-width: calc(100% - 16px); /* 确保不超过节点宽度 */ } .Blueprint-node-port.output:not(.port-execution) { right: 8px; flex-direction: row-reverse; /* 圆点在左,标签在右 */ align-items: center; gap: 4px; width: auto; /* 允许端口容器根据内容扩展 */ max-width: calc(100% - 16px); /* 确保不超过节点宽度 */ } /* 执行区域内的端口样式 */ .Blueprint-node-execution .Blueprint-node-port { position: relative; /* 相对定位,参与 flex 布局 */ } .Blueprint-node-execution .Blueprint-node-port.input.port-execution { left: auto; top: auto; } .Blueprint-node-execution .Blueprint-node-port.output.port-execution { right: auto; top: auto; margin-left: auto; /* 当只有输出端口时,推到右边 */ } /* 参数区域内的端口样式 */ .Blueprint-node-params .Blueprint-node-port { position: relative; /* 相对定位,参与 flex 布局 */ } .Blueprint-node-params .Blueprint-node-port.input:not(.port-execution) { left: auto; } .Blueprint-node-params .Blueprint-node-port.output:not(.port-execution) { right: auto; align-self: flex-end; /* 输出端口靠右 */ } /* 执行端口箭头样式 - 参考虚幻5蓝图风格 */ .Blueprint-node-port-arrow { width: 0; height: 0; border-style: solid; display: flex; flex-shrink: 0; pointer-events: none; /* 箭头不拦截事件,让父元素(端口)处理 */ } /* 执行输入端口箭头(在左侧,指向右,进入节点) */ .Blueprint-node-port-arrow.execution-input { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 5%; /* 箭头向右移动,使用百分比 */ overflow: visible; order: 0; } .Blueprint-node-port.input.port-execution:hover .Blueprint-node-port-arrow.execution-input { border-left-color: #ccc; } /* 执行输出端口箭头(在右侧,指向右,离开节点) */ .Blueprint-node-port-arrow.execution-output { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-right: -8px; /* 箭头从节点边缘伸出 */ overflow: visible; order: 0; } .Blueprint-node-port.output.port-execution:hover .Blueprint-node-port-arrow.execution-output { border-left-color: #ccc; } /* 参数端口圆点样式 */ .Blueprint-node-port-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; /* 圆点不拦截事件,让父元素(端口)处理 */ } /* 实心端口(已连接) */ .Blueprint-node-port-dot.solid { background: #007acc; border: 2px solid #fff; } /* 空心端口(未连接) */ .Blueprint-node-port-dot.hollow { background: transparent; border: 2px solid #007acc; } /* number 类型端口 - 实心(绿色) */ .Blueprint-node-port.port-number .Blueprint-node-port-dot.solid { background: #4caf50; border-color: #fff; } /* number 类型端口 - 空心(绿色边框) */ .Blueprint-node-port.port-number .Blueprint-node-port-dot.hollow { background: transparent; border-color: #4caf50; } .Blueprint-node-port.port-number:hover .Blueprint-node-port-dot { transform: scale(1.2); } .Blueprint-node-port.port-number:hover .Blueprint-node-port-dot.solid { background: #66bb6a; } /* string 类型端口 - 实心(蓝色) */ .Blueprint-node-port.port-string .Blueprint-node-port-dot.solid { background: #2196f3; border-color: #fff; } /* string 类型端口 - 空心(蓝色边框) */ .Blueprint-node-port.port-string .Blueprint-node-port-dot.hollow { background: transparent; border-color: #2196f3; } .Blueprint-node-port.port-string:hover .Blueprint-node-port-dot { transform: scale(1.2); } .Blueprint-node-port.port-string:hover .Blueprint-node-port-dot.solid { background: #42a5f5; } /* bool 类型端口 - 实心(红色) */ .Blueprint-node-port.port-bool .Blueprint-node-port-dot.solid { background: #ff4444; border-color: #fff; } /* bool 类型端口 - 空心(红色边框) */ .Blueprint-node-port.port-bool .Blueprint-node-port-dot.hollow { background: transparent; border-color: #ff4444; } .Blueprint-node-port.port-bool:hover .Blueprint-node-port-dot { transform: scale(1.2); } .Blueprint-node-port.port-bool:hover .Blueprint-node-port-dot.solid { background: #ff6666; } /* 端口输入框 - 在节点内部 */ .Blueprint-node-port-input { flex: 0 1 auto; /* 不自动扩展,但可以收缩 */ min-width: 60px; max-width: 120px; width: auto; /* 根据内容自动调整 */ height: 20px; padding: 2px 6px; margin-left: 4px; /* 标签和输入框之间的间距 */ background: #1e1e1e; border: 1px solid #3e3e3e; border-radius: 3px; color: #fff; font-size: 11px; font-family: inherit; outline: none; order: 2; /* 输入框在标签之后 */ } .Blueprint-node-port-input:focus { border-color: #007acc; background: #252525; } .Blueprint-node-port-input::placeholder { color: #666; } .Blueprint-node-port:hover { transform: scale(1.1); } .Blueprint-node-port-label { font-size: 11px; color: #ccc; white-space: nowrap; display: flex; align-items: center; flex-shrink: 0; } /* 数据端口的标签在节点内部 - 使用 flex 布局 */ .Blueprint-node-port.input:not(.port-execution) .Blueprint-node-port-label { margin-left: 4px; order: 1; /* 标签在圆点之后,输入框之前 */ } .Blueprint-node-port.output:not(.port-execution) .Blueprint-node-port-label { margin-left: 4px; order: 0; /* 圆点在左,标签在右 */ } /* 执行端口的标签(如果需要) */ .Blueprint-node-port.port-execution .Blueprint-node-port-label { display: none; /* 执行端口通常不显示标签 */ }