2025年9月10日14:12:31更新

css/beautiful.css

@@ -187,8 +187,8 @@ cursor: pointer;
 .label_left{
   position: absolute;
   top: -4px;
-  left: -60px;
-  width: 70px;
+  left: -55px;
+  width: 47px;
   z-index: -10;
 }
 .label_left:hover{
@@ -218,6 +218,30 @@ cursor: pointer;
   opacity: 1;
 } */
 
+.label_input{
+    display: block;
+    width: 60px;
+    /* height: 25px; */
+    /* background-color: blanchedalmond; */
+    position: absolute;
+    top: -2px;
+    left: 43px;
+    font-size: 12px;
+    
+}
+
+.label_output{
+    display: block;
+    width: 50px;
+    /* height: 25px; */
+    /* background-color: blanchedalmond; */
+    position: absolute;
+    top: -1px;
+    left: -45px;
+    font-size: 12px;
+    
+}
+
 
 /* Editing Drawflow */
 
@@ -230,7 +254,7 @@ cursor: pointer;
   width: 200px;
 }
 
-.pink{
+/* .pink{
   stroke: pink !important;
 }
 .skyblue{
@@ -238,7 +262,7 @@ cursor: pointer;
 }
 .green{
   stroke: green !important;
-}
+} */
 
 .drawflow .drawflow-node.selected  {
   background: white;
@@ -263,9 +287,64 @@ cursor: pointer;
   border: 2px solid var(--border-color);
 }
 
-.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
+/* .drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
   background: #4ea9ff;
+} */
+
+/* 设置input output伪类颜色 */
+.drawflow .drawflow-node .inputs .input_roleCard,.drawflow .drawflow-node .outputs .output_roleCard{
+  background: #cc99ff;
+}
+.drawflow .drawflow-node .inputs .input_string{
+  background: #ff99cc;
+}
+.drawflow .drawflow-node .inputs .input_worldState{
+  background: #0505ff;
+}
+.drawflow .drawflow-node .inputs .input_numVal{
+  background: #99ccff;
+}
+.drawflow .drawflow-node .inputs .input_bool,.drawflow .drawflow-node .outputs .output_bool{
+  background: #00ff00;
+}
+.drawflow .drawflow-node .inputs .input_eventCard-startCard,.drawflow .drawflow-node .outputs .output_startCard{
+  /* background: #ffcc00; */
+  background: #800080;
+}
+.drawflow .drawflow-node .inputs .input_midea{
+/* 暂无颜色定义 */
 }
+.drawflow .drawflow-node .inputs .input_eventCard, .drawflow .drawflow-node .outputs .output_eventCard{
+  background: #ffcc00;
+}
+
+.input_roleCard{
+  stroke: #cc99ff !important;
+}
+.input_string{
+  stroke: #ff99cc !important;
+}
+.input_worldState{
+  stroke: #0505ff !important;
+}
+.input_numVal{
+  stroke: #99ccff !important;
+}
+.input_bool{
+  stroke: #00ff00 !important;
+}
+.input_eventCard-startCard{
+  stroke: #800080 !important;
+}
+.input_midea{
+  /* 暂无颜色定义 */
+}
+.input_eventCard{
+  stroke: #ffcc00 !important;
+}
+
+
+
 
 .drawflow .drawflow-node .output {
   right: 10px;
@@ -303,6 +382,12 @@ cursor: pointer;
 .drawflow .title-box svg {
   position: initial;
 }
+.xhw_wrapper{
+  min-height: 200px;
+}
+.xhw1{
+  text-align: center;
+}
 .drawflow-node .box {
   padding: 10px 20px 20px 20px;
   font-size: 14px;

css/drawflow.min.css

-.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
\ No newline at end of file
+.drawflow,
+.drawflow .parent-node {
+    position: relative
+}
+
+.parent-drawflow {
+    display: flex;
+    overflow: hidden;
+    touch-action: none;
+    outline: 0
+}
+
+.drawflow {
+    width: 100%;
+    height: 100%;
+    user-select: none
+}
+
+.drawflow .drawflow-node {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    background: #0ff;
+    width: 160px;
+    min-height: 40px;
+    border-radius: 4px;
+    border: 2px solid #000;
+    color: #000;
+    z-index: 2;
+    padding: 15px
+}
+
+.drawflow .drawflow-node.selected {
+    background: red
+}
+
+.drawflow .drawflow-node:hover {
+    cursor: move
+}
+
+.drawflow .drawflow-node .inputs,
+.drawflow .drawflow-node .outputs {
+    width: 0
+}
+
+.drawflow .drawflow-node .drawflow_content_node {
+    width: 100%;
+    display: block
+}
+
+.drawflow .drawflow-node .input,
+.drawflow .drawflow-node .output {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border-radius: 50%;
+    border: 2px solid #000;
+    cursor: crosshair;
+    z-index: 1;
+    margin-bottom: 5px
+}
+
+.drawflow .drawflow-node .input {
+    left: -27px;
+    top: 2px;
+    background: #ff0
+}
+
+.drawflow .drawflow-node .output {
+    right: -3px;
+    top: 2px
+}
+
+.drawflow svg {
+    z-index: 0;
+    position: absolute;
+    overflow: visible !important
+}
+
+.drawflow .connection {
+    position: absolute;
+    pointer-events: none
+}
+
+.drawflow .connection .main-path {
+    fill: none;
+    stroke-width: 5px;
+    stroke: #4682b4;
+    pointer-events: all
+}
+
+.drawflow .connection .main-path:hover {
+    stroke: #1266ab;
+    cursor: pointer
+}
+
+.drawflow .connection .main-path.selected {
+    stroke: #43b993
+}
+
+.drawflow .connection .point {
+    cursor: move;
+    stroke: #000;
+    stroke-width: 2;
+    fill: #fff;
+    pointer-events: all
+}
+
+.drawflow .connection .point.selected,
+.drawflow .connection .point:hover {
+    fill: #1266ab
+}
+
+.drawflow .main-path {
+    fill: none;
+    stroke-width: 5px;
+    stroke: #4682b4
+}
+
+.drawflow-delete {
+    position: absolute;
+    display: block;
+    width: 30px;
+    height: 30px;
+    background: #000;
+    color: #fff;
+    z-index: 4;
+    border: 2px solid #fff;
+    line-height: 30px;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 50%;
+    font-family: monospace;
+    cursor: pointer
+}
+
+.drawflow>.drawflow-delete {
+    margin-left: -15px;
+    margin-top: 15px
+}
+
+.parent-node .drawflow-delete {
+    right: -15px;
+    top: -15px
+}
\ No newline at end of file

css/style.css

@@ -13,23 +13,15 @@ html, body {
 
 .svgIcon_left{
     position: absolute;
-    top: -13px;
-    left: -13px;
-}
-.svgIcon_left:hover{
-    cursor: pointer;
-    transform: scale(1.1);
-    transition: all 0.2s ease;
+    top: -4px;
+    left: 16px;
+    cursor: default;
 }
 .svgIcon_right{
     position: absolute;
-    top: -13px;
-    right: -13px;
-}
-.svgIcon_right:hover{
-    cursor: pointer;
-    transform: scale(1.1);
-    transition: all 0.2s ease;
+    top: -4px;
+    left: -26px;
+    cursor: default;
 }
 
 #customContextMenu {

js/index.js

@@ -181,7 +181,7 @@ function handleContextmenu(e) {
   //判断当前的线段关闭功能是否显示
   if(document.getElementsByClassName('drawflow-delete').length > 0){
     document.getElementById('customContextMenu').style.display = 'none';
-    hideMenu()
+    // hideMenu()
     return
   }
   const customMenu = document.getElementById('customContextMenu');
@@ -252,15 +252,14 @@ function rightMenu() {
         console.log(action)
         // 根据不同的动作执行不同的操作
         switch (action) {
+          //起始卡
           case 'startCard':
-            addNodeToDrawFlow_A("facebook",x,y)
-            break;
-          case 'eventCard':
-            addNodeToDrawFlow_A("template",x,y)
+            addNodeToDrawFlow_A("startCard",x,y)
             break;
           case 'conditionCard':
             addNodeToDrawFlow_A("dbclick",x,y)
             break;
+          //条件卡
           case 'conditionCard-huo':
             addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-huo')
             break;
@@ -270,8 +269,16 @@ function rightMenu() {
           case 'conditionCard-fei':
             addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-fei')
             break;
+          //结局卡
           case 'endCard':
-            addNodeToDrawFlow_A("slack",x,y)
+            addNodeToDrawFlow_A("endCard",x,y)
+            break;
+          //事件卡
+          case 'eventCard':
+            addNodeToDrawFlow_A("eventCard",x,y)
+            break;
+          case 'roleCard':
+            addNodeToDrawFlow_A("roleCard",x,y)
             break;
         }
         // 点击菜单项后隐藏菜单