tianheng-ui 0.0.56 → 0.0.57

package/packages/{formMaking → FormMaking}/styles/index.scss

@@ -1,41 +1,62 @@
-$primary-color: #409EFF;
+$primary-color: #409eff;
 $primary-background-color: #ecf5ff;
 
-.fm-style{
+.fm-container {
   height: 100%;
 
-  *, :after, :before {
+  *,
+  :after,
+  :before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
 
-  .fa-icon{
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  .fa-icon {
     width: auto;
     height: 1em; /* 或任意其它字体大小相对值 */
-  
+
     /* 要在 Safari 中正常工作，需要再引入如下两行代码 */
     max-width: 100%;
     max-height: 100%;
     vertical-align: middle;
   }
-  
-  .fm2-container{
+
+  .form-hideLabel {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .container-box {
     background: #fff;
     height: 100%;
     border: 1px solid #e0e0e0;
-  
-    .el-container{
+
+    .el-container {
       height: 100% !important;
     }
-  
-    &>.el-container{
+
+    & > .el-container {
       background: #fff;
     }
-    .fm2-main{
+    .fm2-main {
       position: relative;
-  
-      &>.el-container{
+
+      & > .el-container {
         position: absolute;
         top: 0;
         bottom: 0;
@@ -43,11 +64,11 @@ $primary-background-color: #ecf5ff;
         right: 0;
       }
     }
-    main{
+    main {
       padding: 0;
     }
-  
-    footer{
+
+    footer {
       height: 30px;
       line-height: 30px;
       border-top: 1px solid #e0e0e0;
@@ -55,50 +76,80 @@ $primary-background-color: #ecf5ff;
       text-align: right;
       color: $primary-color;
       background: #fafafa;
-  
-      a{
+
+      a {
         color: $primary-color;
       }
     }
+
+    .codeDialog {
+      .el-tabs {
+        height: 100%;
+      }
+      .el-tabs__content {
+        height: calc(100% - 40px);
+      }
+      .el-tab-pane {
+        height: 100%;
+      }
+    }
   }
-  
-  .center-container{
+
+  // 顶部操作区
+  .center-container {
     border-left: 1px solid #e0e0e0;
     border-right: 1px solid #e0e0e0;
-  
-    .btn-bar{
-      height: 45px;
-      line-height: 45px;
-      font-size: 18px;
+
+    .el-header {
+      display: flex;
+      align-items: center;
+      height: 45px !important;
+      line-height: 45px !important;
+      // font-size: 18px;
       border-bottom: solid 2px #e4e7ed;
       text-align: right;
     }
-  
-    .el-main{
+
+    .el-main {
       padding: 0;
       position: relative;
       background: #fafafa;
     }
+
+    .client {
+      flex: 1;
+      text-align: left;
+      i {
+        padding: 8px 5px;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .active {
+        color: #409eff;
+        background-color: #f2f2f2;
+      }
+    }
   }
-  
-  .components-list{
+
+  // 左侧字段区
+  .components-list {
     padding: 8px 0;
     width: 100%;
     height: 100%;
-  
-    .widget-cate{
+
+    .widget-cate {
       padding: 8px 12px;
       font-size: 13px;
     }
-  
-    ul{
+
+    ul {
       position: relative;
       overflow: hidden;
       padding: 0 10px 10px;
       margin: 0;
     }
-  
-    .form-edit-widget-label{
+
+    .form-edit-widget-label {
       font-size: 12px;
       display: block;
       width: 48%;
@@ -111,52 +162,63 @@ $primary-background-color: #ecf5ff;
       white-space: nowrap;
       margin: 1%;
       color: #333;
-      border: 1px solid #F4F6FC;
-  
-      &:hover{
+      border: 1px solid #f4f6fc;
+
+      &:hover {
         color: $primary-color;
         border: 1px dashed $primary-color;
       }
-  
-      &>a{
+
+      & > a {
         display: block;
         cursor: move;
-        background: #F4F6FC;
-        border: 1px solid #F4F6FC;
-  
-        .icon{
+        background: #f4f6fc;
+        border: 1px solid #f4f6fc;
+
+        .icon {
           margin-right: 6px;
           margin-left: 8px;
           font-size: 14px;
           display: inline-block;
           vertical-align: middle;
         }
-  
-        span{
+
+        span {
           display: inline-block;
           vertical-align: middle;
         }
       }
     }
   }
-  
-  .widget-form-container{
+
+  .widget-form-container {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-  
-    
-  
-    .widget-form-list{
+
+    .form-empty {
+      position: absolute;
+      text-align: center;
+      width: 400px;
+      top: 200px;
+      left: 50%;
+      margin-left: -200px;
+      color: #ccc;
+
+      .th-empty-description {
+        font-size: 20px;
+      }
+    }
+
+    .widget-form-list {
+      // margin: 10px;
+      min-height: 100%;
       background: #fff;
-      // border: 1px dashed #999;
       border: 1px dashed #999;
-      min-height: 600px;
-      margin: 10px;
-  
-      .widget-col-list{
+
+      .widget-col-list {
         min-height: 50px;
         border: 1px dashed #ccc;
         background: #fff;
@@ -168,299 +230,263 @@ $primary-background-color: #ecf5ff;
         background: #fff;
         white-space: nowrap;
         overflow-x: scroll;
-        .widget-table-list-item {
-          display: inline-block;
-          width: 230px;
-          border: 1px dashed #ccc;
-          vertical-align: top;
+
+        // 修改table组件中form label样式
+        .el-form-item__label {
+          float: none;
+        }
+        .el-form-item__content {
+          margin-left: 0 !important;
         }
       }
       .widget-table-list:hover::-webkit-scrollbar-thumb {
         background-color: rgba(69, 90, 100, 0.2);
       }
-  
-      .widget-view{
+
+      .tableH5 {
+        min-height: 50px;
+        border: 1px dashed #ccc;
+        background: #fff;
+        white-space: nowrap;
+        overflow-x: scroll;
+
+        .tableH5-item:nth-child(1) {
+          display: flex;
+
+          .actions {
+            align-items: center;
+            justify-content: right;
+          }
+        }
+        .tableH5-item-widget {
+          width: calc(100% - 5px);
+        }
+      }
+
+      .widget-view {
         padding-bottom: 18px;
         position: relative;
-        border: 1px dashed rgba(170,170,170,0.7);
-        background-color: rgba(236, 245, 255, .3);
+        border: 1px dashed rgba(170, 170, 170, 0.7);
+        background-color: rgba(236, 245, 255, 0.3);
         margin: 2px;
-  
-        .el-form-item__content{
+
+        .el-form-item__content {
           position: unset;
         }
-  
-        &.is_req{
-          .el-form-item__label::before{
-            content: '*';
+
+        &.is_req {
+          .el-form-item__label::before {
+            content: "*";
             color: #f56c6c;
             margin-right: 4px;
           }
         }
-  
-        .widget-view-description{
-          height: 15px;
-          line-height: 15px;
-          font-size:13px;
-          margin-top: 6px;
-          color:#909399;
-        }
-  
-        .widget-view-action{
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          height: 28px;
-          line-height: 28px;
-          background: $primary-color;
-          z-index: 9;
-  
-          i{
-            font-size: 14px;
-            color: #fff;
-            margin: 0 5px;
-            cursor: pointer;
-            
-          }
-        }
-  
-        .widget-view-drag{
-          position: absolute;
-          left: -2px;
-          top: -2px;
-          bottom: -18px;
-          height: 28px;
-          line-height: 28px;
-          background: $primary-color;
-          z-index: 9;
-          // display: none;
-  
-          i{
-            font-size: 14px;
-            color: #fff;
-            margin: 0 5px;
-            cursor: move;
-          }
-        }
-  
-        // &:after{
-        //   position: absolute;
-        //   left: 0;
-        //   right: 0;
-        //   top: 0;
-        //   bottom: 0;
-        //   display: block;
-        // }
-  
-        &:hover{
+
+        &:hover {
           background: $primary-background-color;
           outline: 1px solid $primary-color;
           outline-offset: 0px;
-  
-          &.active{
+
+          &.active {
             outline: 2px solid $primary-color;
             border: 1px solid $primary-color;
             outline-offset: 0;
           }
-  
-          .widget-view-drag{
-            display: block;
-          }
         }
-  
-        &.active{
+
+        &.active {
           outline: 2px solid $primary-color;
           border: 1px solid $primary-color;
         }
-  
-        &.ghost{
-          background: #F56C6C;
-          border: 2px solid #F56C6C;
+
+        &.ghost {
+          background: #f56c6c;
+          border: 2px solid #f56c6c;
           outline-width: 0;
           height: 3px;
           box-sizing: border-box;
           font-size: 0;
-          content: '';
+          content: "";
           overflow: hidden;
           padding: 0;
         }
       }
-  
-      .widget-table{
+
+      .widget-col {
         padding-bottom: 0;
         padding: 5px;
-        background-color: rgba(253,246,236, .3);
-  
-        .widget-table-wrapper{
+        margin-left: 2px !important;
+        margin-right: 2px !important;
+        background-color: rgba(253, 246, 236, 0.3);
+
+        &.active {
+          outline: 2px solid #e6a23c !important;
+          border: 1px solid #e6a23c !important;
+        }
+
+        &:hover {
+          background: #fdf6ec;
+          outline: 1px solid #e6a23c;
+          outline-offset: 0px;
+
+          &.active {
+            outline: 2px solid #e6a23c;
+            border: 1px solid #e6a23c;
+            outline-offset: 0;
+          }
+        }
+
+        .el-col {
+          // min-height: 50px;
+        }
+
+        &.ghost {
+          background: #f56c6c;
+          border: 2px solid #f56c6c;
+          outline-width: 0;
+          height: 3px;
+          box-sizing: border-box;
+          font-size: 0;
+          content: "";
+          overflow: hidden;
+          padding: 0;
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+
+      .widget-table {
+        padding-bottom: 0;
+        padding: 5px;
+        background-color: rgba(253, 246, 236, 0.3);
+
+        .widget-table-wrapper {
           min-height: 50px;
           background: #fff;
           display: flex;
           justify-content: flex-start;
-  
-          .widget-table-row{
-            td{
+
+          .widget-table-row {
+            td {
               border-bottom: 0;
             }
           }
-  
-          .widget-table-left{
+
+          .widget-table-left {
             width: 51px;
-            border-left: 1px solid #EBEEF5;
-            border-right: 1px solid #EBEEF5;
-            border-top: 1px solid #EBEEF5;
+            border-left: 1px solid #ebeef5;
+            border-right: 1px solid #ebeef5;
+            border-top: 1px solid #ebeef5;
             flex: none;
           }
-  
-          .widget-table-view{
-            border: 1px solid #EBEEF5;
+
+          .widget-table-view {
+            border: 1px solid #ebeef5;
             width: 200px;
             float: left;
             height: 100%;
             position: relative;
             display: block;
-  
-            .el-table{
+
+            .el-table {
               height: 100%;
             }
-  
-            &.is_req{
-              .el-form-item__label::before{
-                content: '*';
+
+            &.is_req {
+              .el-form-item__label::before {
+                content: "*";
                 color: #f56c6c;
                 margin-right: 4px;
               }
             }
-      
-            .widget-view-description{
-              height: 15px;
-              line-height: 15px;
-              font-size:13px;
-              margin-top: 6px;
-              color:#909399;
-            }
-      
-            .widget-view-action{
-              position: absolute;
-              right: 0;
-              bottom: 0;
-              height: 28px;
-              line-height: 28px;
-              background: $primary-color;
-              z-index: 9;
-      
-              i{
-                font-size: 14px;
-                color: #fff;
-                margin: 0 5px;
-                cursor: pointer;
-                
-              }
-            }
-      
-            .widget-view-drag{
-              position: absolute;
-              left: -2px;
-              top: -2px;
-              bottom: -18px;
-              height: 28px;
-              line-height: 28px;
-              background: $primary-color;
-              z-index: 9;
-              // display: none;
-      
-              i{
-                font-size: 14px;
-                color: #fff;
-                margin: 0 5px;
-                cursor: move;
-              }
-            }
-      
-            &::after{
+
+            &::after {
               position: absolute;
               left: 0;
               right: 0;
               top: 0;
               bottom: 0;
               display: block;
-              content: '';
+              content: "";
             }
-  
-            &::before{
+
+            &::before {
               display: none;
             }
-      
-            &:hover{
+
+            &:hover {
               background: $primary-background-color;
               outline: 1px solid $primary-color;
               outline-offset: -1px;
-      
-              &.active{
+
+              &.active {
                 // outline: 1px solid $primary-color;
                 border: 1px solid $primary-color;
                 outline: 1px solid $primary-color;
                 outline-offset: -1px;
               }
-      
-              .widget-view-drag{
+
+              .widget-view-drag {
                 display: block;
               }
             }
-      
-            &.active{
+
+            &.active {
               outline: 1px solid $primary-color;
               border: 1px solid $primary-color;
               outline-offset: -1px;
             }
-      
-            &.ghost{
-              background: #F56C6C;
+
+            &.ghost {
+              background: #f56c6c;
               outline-width: 0;
               width: 5px !important;
               box-sizing: border-box;
               font-size: 0;
-              content: '';
+              content: "";
               overflow: hidden;
               padding: 0;
               position: relative;
               outline: none !important;
               border: 0 !important;
-  
-              &::after{
-                background: #F56C6C;
+
+              &::after {
+                background: #f56c6c;
                 position: absolute;
                 top: 0;
                 left: 0;
                 bottom: 0;
                 right: 0;
                 z-index: 9999;
-                content: '';
+                content: "";
                 outline: none;
               }
             }
           }
-  
-          .widget-table-content{
-            width:100%;
+
+          .widget-table-content {
+            width: 100%;
             // border: 1px dashed #ccc;
             outline: 1px dashed #ccc;
             background: #fff;
-            flex:1;
+            flex: 1;
             margin: 0 1px;
             overflow: auto;
-  
-            &>div{
+
+            & > div {
               height: 100%;
             }
-  
-            .widget-table-col{
+
+            .widget-table-col {
               height: 100%;
-              
-              .ghost{
-                background: #F56C6C;
+
+              .ghost {
+                background: #f56c6c;
                 // border: 2px solid #F56C6C;
                 position: relative;
-                content: '';
+                content: "";
                 float: left;
                 height: 100%;
                 width: 5px !important;
@@ -468,259 +494,168 @@ $primary-background-color: #ecf5ff;
                 font-size: 0;
                 overflow: hidden;
                 outline: none;
-              
-                &::after{
-                  background: #F56C6C;
+
+                &::after {
+                  background: #f56c6c;
                   position: absolute;
                   top: 0;
                   left: 0;
                   bottom: 0;
                   right: 0;
                   z-index: 9999;
-                  content: '';
+                  content: "";
                   outline: none;
                 }
               }
             }
           }
         }
-  
-        &.active{
+
+        &.active {
           outline: 2px solid #e6a23c;
           border: 1px solid #e6a23c;
         }
-  
-        &:hover{
+
+        &:hover {
           background: #fdf6ec;
           outline: 1px solid #e6a23c;
           outline-offset: 0px;
-  
-          &.active{
+
+          &.active {
             outline: 2px solid #e6a23c;
             border: 1px solid #e6a23c;
             outline-offset: 0;
           }
         }
-  
-        .widget-view-action.widget-col-action{
+
+        .widget-view-action.widget-col-action {
           background: #e6a23c;
         }
-  
-        .widget-view-drag.widget-col-drag{
+
+        .widget-view-drag.widget-col-drag {
           background: #e6a23c;
         }
-  
-        &::after{
+
+        &::after {
           display: none;
         }
-  
-        &.ghost{
-          background: #F56C6C;
+
+        &.ghost {
+          background: #f56c6c;
           outline-width: 0;
           height: 5px;
           box-sizing: border-box;
           font-size: 0;
-          content: '';
+          content: "";
           overflow: hidden;
           padding: 0;
           position: relative;
           outline: none;
           border: 0;
-  
-          &::after{
-            background: #F56C6C;
+
+          &::after {
+            background: #f56c6c;
             position: absolute;
-            top:0;
+            top: 0;
             left: 0;
             right: 0;
             bottom: 0;
-            content: '';
+            content: "";
             display: block;
             z-index: 999;
           }
         }
       }
-  
-      .widget-col{
-        padding-bottom: 0;
-        padding: 5px;
-        // margin-left: 2px !important;
-        // margin-right: 2px !important;
-        background-color: rgba(253,246,236, .3);
-  
-        &.active{
-          outline: 2px solid #e6a23c;
-          border: 1px solid #e6a23c;
-        }
-  
-        &:hover{
-          background: #fdf6ec;
-          outline: 1px solid #e6a23c;
-          outline-offset: 0px;
-  
-          &.active{
-            outline: 2px solid #e6a23c;
-            border: 1px solid #e6a23c;
-            outline-offset: 0;
-          }
-        }
-  
-        .el-col{
-          min-height: 50px;
-        }
-  
-        &.ghost{
-          background: #F56C6C;
-          border: 2px solid #F56C6C;
-          outline-width: 0;
-          height: 3px;
-          box-sizing: border-box;
-          font-size: 0;
-          content: '';
-          overflow: hidden;
-          padding: 0;
-        }
-  
-        .widget-view-action.widget-col-action{
-          background: #e6a23c;
-        }
-  
-        .widget-view-drag.widget-col-drag{
-          background: #e6a23c;
-        }
-  
-        &::after{
-          display: none;
-        }
-      }
-  
-      .ghost{
-        background: #F56C6C;
-        border: 2px solid #F56C6C;
+
+      .ghost {
+        background: #f56c6c;
+        border: 2px solid #f56c6c;
         outline-width: 0;
         height: 3px;
         box-sizing: border-box;
         font-size: 0;
-        content: '';
+        content: "";
         overflow: hidden;
         padding: 0;
       }
-    }
-  
-    .ghost{
-      background: #F56C6C;
-      border: 2px solid #F56C6C;
-      position: relative;
-    
-      &::after{
-        background: #F56C6C;
-      }
-    }
-    
-    li.ghost{
-      height: 5px;
-      list-style: none;
-      font-size: 0;
-      overflow: hidden;
-    }
-  
-    .widget-grid{
-      background: #F4F6FC;
-      position: relative;
-      border-left: 5px solid transparent;
-      padding: 5px;
-      margin: 0 !important;
-  
-      &.active{
-        border-left: 5px solid $primary-color;
-        background: #b3d8ff;
-      }
-    }
-  
-    .widget-grid-container{
-      &.ghost{
-        background: #F56C6C;
-        border: 2px solid #F56C6C;
-        outline-width: 0;
-        height: 3px;
-        box-sizing: border-box;
-        font-size: 0;
-        content: '';
-        overflow: hidden;
-        padding: 0;
+
+      .widget-form-list-image {
+        padding-bottom: 0px !important;
       }
     }
-  
-    .ghost{
-      background: #F56C6C;
-      border: 2px solid #F56C6C;
+
+    // draggable 样式
+    .ghost {
+      background: #f56c6c;
+      border: 2px solid #f56c6c;
       position: relative;
-    
-      &::after{
-        background: #F56C6C;
+
+      &::after {
+        background: #f56c6c;
       }
     }
-    
-    li.ghost{
+
+    li.ghost {
       height: 5px;
       list-style: none;
       font-size: 0;
       overflow: hidden;
     }
   }
-  
-  .widget-config-container{
+
+  .config-container {
     position: relative;
-  
-    .el-header{
+
+    .el-header {
       border-bottom: solid 2px #e4e7ed;
       padding: 0 2px;
-    }
-  
-    .config-tab{
-      height: 45px;
-      line-height: 45px;
-      display: inline-block;
-      width: 145px;
-      text-align: center;
-      font-size: 14px;
-      font-weight: 500;
-      position: relative;
-      cursor: pointer;
-  
-      &.active{
-        border-bottom: solid 2px $primary-color;
+
+      .config-tab {
+        height: 45px;
+        line-height: 45px;
+        display: inline-block;
+        width: 145px;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 500;
+        position: relative;
+        cursor: pointer;
+
+        &.active {
+          border-bottom: solid 2px $primary-color;
+        }
       }
     }
-  
-    .config-content{
+
+    .config-container-content {
       padding: 10px;
-  
-      .el-form-item__label{
+
+      .el-form-item__label {
         padding: 0;
         font-weight: 500;
       }
-  
+
       .el-form-item {
         border-bottom: solid 1px #e1e1e1;
         padding-bottom: 10px;
       }
 
-      .config-pattern-input{
-        .el-input-group__prepend,.el-input-group__append{
+      .config-pattern-input {
+        .el-input-group__prepend,
+        .el-input-group__append {
           padding: 0 8px;
         }
       }
     }
-  
-    .ghost{
+
+    .ghost {
       background: #fff;
       border: 1px dashed $primary-color;
-    
-      &::after{
+
+      &::after {
         background: #fff;
         display: block;
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
@@ -728,41 +663,122 @@ $primary-background-color: #ecf5ff;
         bottom: 0;
       }
     }
-    
-    ul{
+
+    ul {
       margin: 0;
       padding: 0;
     }
-    
-    li.ghost{
+
+    li.ghost {
       list-style: none;
       font-size: 0;
       display: block;
       position: relative;
     }
   }
-  
-  .viewer-container{
-    z-index: 99999 !important;
+
+  .widget-divider {
+    display: flex;
+    align-items: center;
+  }
+
+  // .filler {
+  //   margin-bottom: 0 !important;
+  // }
+}
+
+.configComponents {
+  .config-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+    }
+
+    .value {
+      color: var(--th-blue);
+      cursor: pointer;
+    }
   }
-  
-  .form-empty{
+
+  .eventsCollapse {
+    border: 1px solid #ebeef5;
+    border-bottom-color: #e1e1e1;
+
+    &-item {
+      display: flex;
+      align-items: center;
+
+      .el-select {
+        flex: 1;
+        margin-right: 5px;
+      }
+
+      > i {
+        padding: 5px;
+        cursor: pointer;
+      }
+    }
+
+    .el-collapse-item__header {
+      padding: 5px;
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      background: #f5f7fa;
+    }
+
+    .el-collapse-item__content {
+      padding: 5px;
+    }
+  }
+}
+
+.widget-actions {
+  .actions {
     position: absolute;
-    text-align: center;
-    width: 300px;
-    font-size: 20px;
-    top: 200px;
-    left: 50%;
-    margin-left: -150px;
-    color: #ccc;
+    right: 0;
+    bottom: 0;
+    height: 28px;
+    line-height: 28px;
+    background: $primary-color;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+
+  .drag {
+    position: absolute;
+    left: -2px;
+    bottom: -2px;
+    // bottom: -18px;
+    height: 28px;
+    line-height: 28px;
+    background: $primary-color;
+    z-index: 9;
+    // display: none;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: move;
+    }
   }
+}
 
-  .widget-empty{
-    background-position: 50%;
+.widget-actions-col {
+  .actions {
+    background: #e6a23c;
   }
 
-  .widget-divider {
-    display: flex;
-    align-items: center;
+  .drag {
+    background: #e6a23c;
   }
 }