仿钉钉流程设计器- 优化节点配置

src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss

@@ -91,7 +91,7 @@
         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
         &:hover {
-          // border-color: #0089ff;
+          border-color: #0089ff;
           .node-toolbar {
             opacity: 1;
           }
@@ -130,6 +130,9 @@
             text-overflow: ellipsis;
             color: #1f1f1f;
             line-height: 18px;
+            &:hover {
+              border-bottom: 1px dashed #f60;
+            }
           }
         }
 
@@ -153,6 +156,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
             color: #f60;
+            &:hover {
+              border-bottom: 1px dashed #000;
+            }
           }
 
           .branch-priority {
@@ -211,14 +217,13 @@
         .node-toolbar {
           opacity: 0;
           position: absolute;
-          top: -25px;
+          top: -20px;
           right: 0px;
           display: flex;
 
           .toolbar-icon {
             text-align: center;
             vertical-align: middle;
-            color:  #000;
           }
         }
 
@@ -501,10 +506,47 @@
       }
     }
   }
-
-
 }
 
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    height: 24px;
+    line-height: 24px;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    height: 24px;
+    max-width: 510px;
+    font-size: 16px;
+    line-height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+  
+    &:focus   {
+      border-color: #40a9ff;
+      outline: 0;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
+    }
+  }
+}
+
+
+
 // 节点连线气泡卡片样式
 .handler-item-wrapper {
   display: flex;