AutoAndroidController/src/pages/blueprint/node-renderer/node-renderer.css

/* ========== 公共节点样式（所有节点都会继承） ========== */
/* 所有节点的基础交互和事件处理 */
.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; /* 执行端口通常不显示标签 */
}