tianheng-ui 0.1.63 → 0.1.65

package/packages/FormMaking/styles/index.scss

@@ -1,538 +1,216 @@
-$primary-color: #409eff;
-$primary-background-color: #ecf5ff;
+@import "../../../lib/theme-chalk/styles/variable.scss";
 
 .th-formMaking {
-  height: 100%;
+  // 组件拖拽区的操作样式
+  .widget-actions {
+    .actions {
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+      display: flex;
+      z-index: 9;
+
+      > div {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        background: $color-parimary-active;
+      }
+      i {
+        font-size: 12px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
 
-  *,
-  :after,
-  :before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
+    .drag {
+      position: absolute;
+      left: -2px;
+      bottom: -2px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      background: $color-parimary-active;
+      z-index: 9;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+        cursor: move;
+      }
+    }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-    padding: 0;
+    &.widget-actions-col {
+      .clone {
+        background: $color-warning-active !important;
+      }
+      .trash {
+        background: $color-warning-active !important;
+      }
+      .drag {
+        background: $color-warning-active !important;
+      }
+    }
   }
 
-  .isHideFormLabel {
-    .el-form-item__label {
+  // draggable 拖拽时的占位样式
+  .draggable-ghost {
+    padding: 0px;
+    height: 52px;
+    font-size: 0;
+    background-color: $color-danger-hover;
+    box-sizing: border-box;
+    overflow: hidden;
+    content: "";
+    // 隐藏内容
+    a {
       display: none;
     }
-    .el-form-item__content {
-      margin-left: 0 !important;
-    }
   }
 
-  .widget-form-container {
-    .draggable {
-      height: 100%;
-    }
-    .draggable-list {
-      min-height: 100%;
-      background: #fff;
-      border: 1px dashed #999;
-
-      .widget-form-list-item {
-        position: relative;
-      }
+  // draggable 拖拽列表样式
+  .draggable-list {
+    min-height: 52px;
+    background-color: #fff;
+    // border: 1px dashed rgba(170, 170, 170, 0.7);
+  }
 
-      .widget-col-list {
-        min-height: 50px;
-        border: 1px dashed #ccc;
-        background: #fff;
+  .widgetForm {
+    .isHideFormLabel {
+      .el-form-item__label {
+        display: none;
       }
-      .widget-table-list {
-        display: -webkit-box;
-        min-height: 50px;
-        border: 1px dashed #ccc;
-        background: #fff;
-        white-space: nowrap;
-        overflow-x: scroll;
-
-        // 修改table组件中form label样式
-        .el-form-item__label {
-          float: none;
-        }
-        .el-form-item__content {
-          margin-left: 0 !important;
-        }
+      .el-form-item__content {
+        margin-left: 0 !important;
       }
-      // .widget-table-list:hover::-webkit-scrollbar-thumb {
-      //   background-color: rgba(69, 90, 100, 0.2);
-      // }
-
-      // .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);
-      //   }
-      // }
-
-      .widgetFormItem {
-        min-width: 100px;
-        padding-bottom: 18px;
-        position: relative;
-        border: 1px dashed rgba(170, 170, 170, 0.7);
-        background-color: rgba(236, 245, 255, 0.3);
-        margin: 2px;
-
-        .el-form-item__content {
-          position: unset;
-        }
-
-        &.isRequired {
-          .el-form-item__label::before {
-            content: "*";
-            color: #f56c6c;
-            margin-right: 4px;
-          }
-        }
-
-        &:hover {
-          background: $primary-background-color;
-          outline: 1px solid $primary-color;
-          outline-offset: 0px;
+    }
 
-          &.active {
-            outline: 2px solid $primary-color;
-            border: 1px solid $primary-color;
-            outline-offset: 0;
-          }
-        }
+    .widgetFormItem {
+      margin: 2px;
+      padding-bottom: 18px;
+      min-width: 120px;
+      position: relative;
+      background-color: rgba($color-parimary-lighter, 0.3);
+      border: 1px dashed rgba(170, 170, 170, 0.7);
 
-        &.active {
-          outline: 2px solid $primary-color;
-          border: 1px solid $primary-color;
-        }
+      // 解决复制、删除、移动按钮的位置问题
+      .el-form-item__content {
+        position: unset;
+      }
 
-        &.ghost {
-          background: #f56c6c;
-          border: 2px solid #f56c6c;
-          outline-width: 0;
-          height: 3px;
-          box-sizing: border-box;
-          font-size: 0;
-          content: "";
-          overflow: hidden;
-          padding: 0;
-        }
+      &.isActive {
+        outline: 2px solid $color-parimary-active;
+        border: 1px solid $color-parimary-active;
       }
 
-      .isLayout {
+      &.isLayout {
         padding-bottom: 0;
         padding: 5px;
         margin-left: 2px !important;
         margin-right: 2px !important;
-        background-color: rgba(253, 246, 236, 0.3);
+        background-color: rgba($color-warning-lighter, 0.3);
 
-        &.active {
-          outline: 2px solid #e6a23c !important;
-          border: 1px solid #e6a23c !important;
+        &.isActive {
+          outline: 2px solid $color-warning-active !important;
+          border: 1px solid $color-warning-active !important;
         }
 
         &:hover {
-          background: #fdf6ec;
-          outline: 1px solid #e6a23c;
+          background-color: $color-warning-lighter;
+          outline: 1px solid $color-warning-active;
           outline-offset: 0px;
-
-          &.active {
-            outline: 2px solid #e6a23c;
-            border: 1px solid #e6a23c;
-            outline-offset: 0;
-          }
-        }
-
-        &.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 {
-      //         border-bottom: 0;
-      //       }
-      //     }
-
-      //     .widget-table-left {
-      //       width: 51px;
-      //       border-left: 1px solid #ebeef5;
-      //       border-right: 1px solid #ebeef5;
-      //       border-top: 1px solid #ebeef5;
-      //       flex: none;
-      //     }
-
-      //     .widget-table-view {
-      //       border: 1px solid #ebeef5;
-      //       width: 200px;
-      //       float: left;
-      //       height: 100%;
-      //       position: relative;
-      //       display: block;
-
-      //       .el-table {
-      //         height: 100%;
-      //       }
-
-      //       &.is_req {
-      //         .el-form-item__label::before {
-      //           content: "*";
-      //           color: #f56c6c;
-      //           margin-right: 4px;
-      //         }
-      //       }
-
-      //       &::after {
-      //         position: absolute;
-      //         left: 0;
-      //         right: 0;
-      //         top: 0;
-      //         bottom: 0;
-      //         display: block;
-      //         content: "";
-      //       }
-
-      //       &::before {
-      //         display: none;
-      //       }
-
-      //       &:hover {
-      //         background: $primary-background-color;
-      //         outline: 1px solid $primary-color;
-      //         outline-offset: -1px;
-
-      //         &.active {
-      //           // outline: 1px solid $primary-color;
-      //           border: 1px solid $primary-color;
-      //           outline: 1px solid $primary-color;
-      //           outline-offset: -1px;
-      //         }
-
-      //         .widget-view-drag {
-      //           display: block;
-      //         }
-      //       }
-
-      //       &.active {
-      //         outline: 1px solid $primary-color;
-      //         border: 1px solid $primary-color;
-      //         outline-offset: -1px;
-      //       }
+      &:hover {
+        background-color: $color-parimary-lighter;
+        outline: 1px solid $color-parimary-active;
+        outline-offset: 0px;
 
-      //       &.ghost {
-      //         background: #f56c6c;
-      //         outline-width: 0;
-      //         width: 5px !important;
-      //         box-sizing: border-box;
-      //         font-size: 0;
-      //         content: "";
-      //         overflow: hidden;
-      //         padding: 0;
-      //         position: relative;
-      //         outline: none !important;
-      //         border: 0 !important;
-
-      //         &::after {
-      //           background: #f56c6c;
-      //           position: absolute;
-      //           top: 0;
-      //           left: 0;
-      //           bottom: 0;
-      //           right: 0;
-      //           z-index: 9999;
-      //           content: "";
-      //           outline: none;
-      //         }
-      //       }
-      //     }
-
-      //     .widget-table-content {
-      //       width: 100%;
-      //       // border: 1px dashed #ccc;
-      //       outline: 1px dashed #ccc;
-      //       background: #fff;
-      //       flex: 1;
-      //       margin: 0 1px;
-      //       overflow: auto;
-
-      //       & > div {
-      //         height: 100%;
-      //       }
-
-      //       .widget-table-col {
-      //         height: 100%;
-
-      //         .ghost {
-      //           background: #f56c6c;
-      //           // border: 2px solid #F56C6C;
-      //           position: relative;
-      //           content: "";
-      //           float: left;
-      //           height: 100%;
-      //           width: 5px !important;
-      //           list-style: none;
-      //           font-size: 0;
-      //           overflow: hidden;
-      //           outline: none;
-
-      //           &::after {
-      //             background: #f56c6c;
-      //             position: absolute;
-      //             top: 0;
-      //             left: 0;
-      //             bottom: 0;
-      //             right: 0;
-      //             z-index: 9999;
-      //             content: "";
-      //             outline: none;
-      //           }
-      //         }
-      //       }
-      //     }
-      //   }
-
-      //   &.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;
-      //     }
-      //   }
-
-      //   .widget-view-action.widget-col-action {
-      //     background: #e6a23c;
-      //   }
-
-      //   .widget-view-drag.widget-col-drag {
-      //     background: #e6a23c;
-      //   }
-
-      //   &::after {
-      //     display: none;
-      //   }
-
-      //   &.ghost {
-      //     background: #f56c6c;
-      //     outline-width: 0;
-      //     height: 5px;
-      //     box-sizing: border-box;
-      //     font-size: 0;
-      //     content: "";
-      //     overflow: hidden;
-      //     padding: 0;
-      //     position: relative;
-      //     outline: none;
-      //     border: 0;
-
-      //     &::after {
-      //       background: #f56c6c;
-      //       position: absolute;
-      //       top: 0;
-      //       left: 0;
-      //       right: 0;
-      //       bottom: 0;
-      //       content: "";
-      //       display: block;
-      //       z-index: 999;
-      //     }
-      //   }
-      // }
-
-      .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;
+        &.isActive {
+          outline: 2px solid $color-parimary-active;
+          border: 1px solid $color-parimary-active;
+          outline-offset: 0;
+        }
       }
     }
+  }
 
-    // draggable 样式
-    .ghost {
-      background: #f56c6c;
-      border: 2px solid #f56c6c;
-      position: relative;
+  // 组件config配置视图样式
+  .component-config {
+    .config-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
 
-      &::after {
-        background: #f56c6c;
+      .title {
       }
-    }
 
-    li.ghost {
-      height: 5px;
-      list-style: none;
-      font-size: 0;
-      overflow: hidden;
+      .value {
+        color: var(--th-blue);
+        cursor: pointer;
+      }
     }
-  }
-
-  .widget-divider {
-    display: flex;
-    align-items: center;
-  }
-}
 
-.configComponents {
-  .config-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    .eventsCollapse {
+      border: 1px solid #ebeef5;
+      border-bottom-color: #e1e1e1;
 
-    .title {
-    }
+      &-item {
+        display: flex;
+        align-items: center;
 
-    .value {
-      color: var(--th-blue);
-      cursor: pointer;
-    }
-  }
-
-  .eventsCollapse {
-    border: 1px solid #ebeef5;
-    border-bottom-color: #e1e1e1;
+        .el-select {
+          flex: 1;
+          margin-right: 5px;
+        }
 
-    &-item {
-      display: flex;
-      align-items: center;
+        > i {
+          padding: 5px;
+          cursor: pointer;
+        }
+      }
 
-      .el-select {
-        flex: 1;
-        margin-right: 5px;
+      .el-collapse-item__header {
+        padding: 5px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 12px;
+        background: #f5f7fa;
       }
 
-      > i {
+      .el-collapse-item__content {
         padding: 5px;
-        cursor: pointer;
       }
     }
 
-    .el-collapse-item__header {
-      padding: 5px;
-      height: 30px;
-      line-height: 30px;
-      font-size: 12px;
-      background: #f5f7fa;
+    .el-form-item__label {
+      width: 100%;
     }
 
-    .el-collapse-item__content {
-      padding: 5px;
+    .flexView {
+      display: flex;
+      margin-bottom: 5px;
     }
   }
-
-  .el-form-item__label {
-    width: 100%;
-  }
-
-  .flexView {
-    display: flex;
-    margin-bottom: 5px;
-  }
 }
 
-.widget-actions {
-  .actions {
-    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;
-    }
+// 组件内联样式
+.component-table {
+  .el-form-item__label {
+    float: none !important;
   }
-
-  .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;
-    }
+  .el-form-item__content {
+    margin-left: 0 !important;
   }
 }
 
-.widget-actions-col {
-  .actions {
-    background: #e6a23c;
-  }
-
-  .drag {
-    background: #e6a23c;
-  }
+// 组件头部标题统一样式
+.component-header_title {
+  margin-bottom: 5px;
+  font-size: 16px;
+  font-weight: bold;
 }