tianheng-ui 0.1.0 → 0.1.1

package/packages/FormMaking/styles/index.scss

@@ -0,0 +1,785 @@
+$primary-color: #409eff;
+$primary-background-color: #ecf5ff;
+
+.fm-container {
+  height: 100%;
+
+  *,
+  :after,
+  :before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  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;
+  }
+
+  .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 {
+      height: 100% !important;
+    }
+
+    & > .el-container {
+      background: #fff;
+    }
+    .fm2-main {
+      position: relative;
+
+      & > .el-container {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+    main {
+      padding: 0;
+    }
+
+    footer {
+      height: 30px;
+      line-height: 30px;
+      border-top: 1px solid #e0e0e0;
+      font-size: 12px;
+      text-align: right;
+      color: $primary-color;
+      background: #fafafa;
+
+      a {
+        color: $primary-color;
+      }
+    }
+
+    .codeDialog {
+      .el-tabs {
+        height: 100%;
+      }
+      .el-tabs__content {
+        height: calc(100% - 40px);
+      }
+      .el-tab-pane {
+        height: 100%;
+      }
+    }
+  }
+
+  // 顶部操作区
+  .center-container {
+    border-left: 1px solid #e0e0e0;
+    border-right: 1px solid #e0e0e0;
+
+    .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 {
+      padding: 0;
+      position: relative;
+      background: #fafafa;
+    }
+
+    .client {
+      flex: 1;
+      text-align: left;
+      .el-button {
+        color: #333;
+      }
+      .active {
+        color: #409eff;
+      }
+    }
+  }
+
+  // 左侧字段区
+  .components-list {
+    padding: 8px 0;
+    width: 100%;
+    height: 100%;
+
+    .widget-cate {
+      padding: 8px 12px;
+      font-size: 13px;
+    }
+
+    ul {
+      position: relative;
+      overflow: hidden;
+      padding: 0 10px 10px;
+      margin: 0;
+    }
+
+    .form-edit-widget-label {
+      font-size: 12px;
+      display: block;
+      width: 48%;
+      line-height: 26px;
+      position: relative;
+      float: left;
+      left: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: 1%;
+      color: #333;
+      border: 1px solid #f4f6fc;
+
+      &:hover {
+        color: $primary-color;
+        border: 1px dashed $primary-color;
+      }
+
+      & > a {
+        display: block;
+        cursor: move;
+        background: #f4f6fc;
+        border: 1px solid #f4f6fc;
+
+        .icon {
+          margin-right: 6px;
+          margin-left: 8px;
+          font-size: 14px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        span {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .widget-form-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .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;
+
+      .widget-col-list {
+        min-height: 50px;
+        border: 1px dashed #ccc;
+        background: #fff;
+      }
+      .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;
+        }
+      }
+      // .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);
+        }
+      }
+
+      .widget-view {
+        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;
+        }
+
+        &.is_req {
+          .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;
+          }
+        }
+
+        &.active {
+          outline: 2px solid $primary-color;
+          border: 1px solid $primary-color;
+        }
+
+        &.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-col {
+        padding-bottom: 0;
+        padding: 5px;
+        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 {
+              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;
+            }
+
+            &.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;
+      }
+    }
+
+    // draggable 样式
+    .ghost {
+      background: #f56c6c;
+      border: 2px solid #f56c6c;
+      position: relative;
+
+      &::after {
+        background: #f56c6c;
+      }
+    }
+
+    li.ghost {
+      height: 5px;
+      list-style: none;
+      font-size: 0;
+      overflow: hidden;
+    }
+  }
+
+  .config-container {
+    position: relative;
+
+    .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-container-content {
+      padding: 10px;
+
+      .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 {
+          padding: 0 8px;
+        }
+      }
+    }
+
+    .ghost {
+      background: #fff;
+      border: 1px dashed $primary-color;
+
+      &::after {
+        background: #fff;
+        display: block;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    li.ghost {
+      list-style: none;
+      font-size: 0;
+      display: block;
+      position: relative;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .el-form-item__label {
+    width: 100%;
+  }
+}
+
+.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;
+    }
+  }
+
+  .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-actions-col {
+  .actions {
+    background: #e6a23c;
+  }
+
+  .drag {
+    background: #e6a23c;
+  }
+}