add:增加vue-flow组件

src/components/nodeFlow/sopNode.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { Handle, Position } from "@vue-flow/core";
+// 接收数据
+const props = defineProps(["id","data", "label"]);
+const emit = defineEmits(['activateNode']);
+
+const updateItem = () => {
+  // 已经完成就不能在点击了
+  if(props.data.isFinished){
+    return;
+  }
+  emit('activateNode', props.id);
+};
+
+</script>
+
+<template>
+  <div class="custom-step-node" :class="{ 'is-finished': data.isFinished }" @click="updateItem">
+    <div class="node-capsule" :class="{ 'is-active': data.isActive }">
+      <Handle type="target" :position="Position.Left" class="hidden-handle" />
+
+      <span class="status-dot"></span>
+      <span class="node-label">{{ data.title }}</span>
+
+      <Handle type="source" :position="Position.Right" class="hidden-handle" />
+    </div>
+
+    <div class="node-input-area" @click.stop>
+      <div class="input-wrapper-container">
+        <div class="input-wrapper">
+          <el-input type="text" v-model="data.value" @click.stop></el-input>
+        </div>
+        <span class="percent-unit">%</span>
+      </div>
+      <div class="node-tooltips">产能赋权</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.custom-step-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px; /* 胶囊与输入框的间距 */
+  width: 120px;
+  cursor: pointer;
+}
+
+/* 胶囊样式 */
+.node-capsule {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 16px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 20px; /* 圆角胶囊 */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+}
+
+/* 激活状态（蓝框） */
+.node-capsule.is-active {
+  border-color: #2563eb;
+  color: #2563eb;
+  box-shadow: 0 0 0 1px #2563eb;
+}
+
+/* 状态小圆点 */
+.status-dot {
+  width: 6px;
+  height: 6px;
+  background-color: #d1d5db; /* 默认灰色 */
+  border-radius: 50%;
+  margin-right: 8px;
+}
+.is-active .status-dot {
+  background-color: #2563eb; /* 激活蓝色 */
+}
+
+.node-label {
+  font-size: 13px;
+  color: #4b5563;
+}
+.is-active .node-label {
+  color: #2563eb;
+  font-weight: 500;
+}
+
+/* 输入框区域 */
+.node-input-area {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  .input-wrapper-container{
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .node-tooltips{
+    color: #90a1b9;
+    font-size: 12px;
+    opacity: 0;
+    margin-top: 3px;
+  }
+  &:hover .node-tooltips{
+    opacity: 1;
+  }
+}
+
+.input-wrapper {
+  width: 60px;
+  :deep(.el-input__inner){
+    text-align: center;
+    font-weight: 600;
+  }
+}
+
+.percent-input {
+  width: 100%;
+  border: none;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  color: #1f2937;
+  outline: none;
+}
+
+.percent-unit {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.is-finished {
+  filter: grayscale(1);
+  opacity: 0.6;         
+  cursor: not-allowed;  
+  pointer-events: none;
+}
+
+/* 隐藏连接点逻辑，但保持在胶囊中心高度 */
+.hidden-handle {
+  width: 0;
+  height: 0;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+}
+</style>