cloud-web-corejs 1.1.0-dev.26 → 1.1.0-dev.28

package/src/components/xform/styles/detail-temp.scss

@@ -0,0 +1,71 @@
+// Core xform detail-template skins extracted from the app stylesheet.
+@import "~@base/styles/variables.scss";
+
+.detail-temp-box{
+  &.d-temp-1{
+    padding: 8px 12px 0;
+    .detail-temp-header{
+      font-size:$fontSizeBase;vertical-align: middle;margin-bottom:10px;color:#303133;
+      &:before{
+        content:"";width:4px;height:12px;display:inline-block;background:$baseColor;margin-right:6px;border-radius: 1px;vertical-align: middle;
+      }
+      .detail-temp-label{
+        font-size:14px;vertical-align: middle;
+      }
+    }
+  }
+  &.d-temp-2{
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 8px;
+
+    .detail-temp-header {
+      padding: 8px 12px;
+      background: #f5f7fa;
+      border-bottom: 1px solid #e4e7ed;
+      .detail-temp-label {
+        font-size: 14px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+  }
+  &.d-temp-3{
+    padding: 0 12px 0;margin-bottom: 8px;border-radius: 4px;border: solid 1px #eee;background: #FFF;
+    .detail-temp-header{
+      font-size:$fontSizeBase;vertical-align: middle;margin-bottom:4px;color:#303133;overflow: hidden;
+      .detail-temp-label{
+        position:relative;padding: 12px 0 8px;display: inline-block;font-size: 14px;
+        &:before{
+          content:"";height:3px;display:inline-block;background:$baseColor;border-radius: 1px;vertical-align: middle;position:absolute;top:0;left:0;right:0;
+        }
+      }
+    }
+    .detail-temp-body{
+      padding:4px 0;
+    }
+  }
+  &.d-temp-4{
+    padding: 8px 12px 0;
+    .detail-temp-header{
+      background:#F3F3F3;padding:0 12px;height:24px;line-height:24px;color:#303133;
+      .detail-temp-label{
+        font-size:14px;vertical-align: middle;font-weight:600
+      }
+    }
+    .detail-temp-body{
+      padding:4px 0;
+    }
+  }
+  .detail-temp-empty {
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #c0c4cc;
+    font-size: 13px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+  }
+}

package/src/components/xform/styles/h5-designer.scss

@@ -0,0 +1,191 @@
+// Core H5 designer-preview styles. Runtime H5 remains in styles/h5.scss under .xform-h5.
+@import "~@base/styles/variables.scss";
+
+.form-render-wrapper.h5-layout,
+.el-form.H5-layout,
+.designer-view.h5-layout {
+  padding: 0 !important;
+  background: #f5f4f9 !important;
+  overflow: hidden;
+  .el-input {
+    width: 100% !important;
+  }
+  .form-widget-list {
+    padding: 0 !important;
+  }
+  .box-style {
+    margin-bottom: 12px;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    .t {
+      line-height: 40px;
+      padding: 0 12px;
+      background: #fff;
+      border-bottom: solid 1px #eee;
+      color: #49b8ff;
+      &:before {
+        content: "";
+        width: 5px;
+        height: 15px;
+        display: inline-block;
+        background: #49b8ff;
+        border-radius: 2px;
+        margin-right: 8px;
+        vertical-align: middle;
+        margin-bottom: 1px;
+      }
+      b {
+        color: inherit;
+        padding-left: 0;
+        padding-right: 0;
+        background: none;
+        font-weight: 400;
+        font-size: 0.9125rem;
+      }
+    }
+    .cont {
+      padding: 6px 12px;
+      .field-wrapper {
+        &.disable .el-form-item {
+          background-color: #f1f1f1;
+          .el-input__inner {
+            background-color: #f1f1f1;
+          }
+        }
+        .el-form-item {
+          padding: 5px 12px;
+          border: solid 1px #eee;
+          border-radius: 4px;
+          margin: 7px 0;
+          min-height: 42px;
+          .el-form-item__label {
+            color: #999;
+            font-size: 0.825rem;
+            &:after {
+              display: none;
+            }
+          }
+          .el-input__inner {
+            border: none;
+            text-align: right;
+            font-size: 0.8125rem;
+            color: #212121;
+            padding: 0;
+          }
+          .el-input-number.noButton:before {
+            right: -10px;
+          }
+          .el-date-editor .el-input__inner {
+            padding-right: 24px;
+            .el-input__prefix {
+              top: 1px;
+            }
+          }
+          .select-input {
+            border: none;
+            width: auto;
+            float: right;
+            -webkit-appearance: none;
+            position: relative;
+            background: none;
+            &:after {
+              content: "";
+              position: absolute;
+              right: 0;
+              top: 50%;
+              margin-top: -4px;
+              border: 4px solid transparent;
+              border-left: 5px solid #999;
+            }
+            height: 29px;
+            padding-right: 12px;
+            text-align: right;
+          }
+          .el-checkbox-group {
+            text-align: right;
+            .el-checkbox {
+              margin-right: 0;
+              margin-left: 12px;
+              .el-checkbox__inner {
+                text-align: left;
+              }
+              .el-checkbox__label {
+                padding-left: 6px;
+                min-width: 46px;
+              }
+            }
+          }
+        }
+      }
+      .vxe-grid {
+        .vxe-table--render-default .vxe-table--border-line {
+          display: none;
+        }
+        .vxe-tools--operate,
+        .vxe-cell--sort,
+        .vxe-cell--filter {
+          display: none;
+        }
+      }
+      .tips-box {
+        color: #ed5b5c;
+        font-size: 0.75rem;
+        line-height: 20px;
+        &:before {
+          content: "\e7a3";
+          font-family: element-icons !important;
+          display: inline;
+        }
+      }
+    }
+  }
+}
+.designer-view.h5-layout {
+  overflow-y: auto;
+  height: 100%;
+  .box-style.fixbottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.designer-box {
+  .el-form.H5-layout {
+    .tab-box .el-tabs__content {
+      padding: 4px;
+      .el-tab-pane {
+        .form-widget-list .container-wrapper .grid-container {
+          padding: 10px;
+        }
+        .h5-item {
+          .h5-title {
+            display: flex;
+            b {
+              margin-right: 10px;
+            }
+            > .grid-cell {
+              flex: 1;
+              .form-widget-list {
+                text-align: right;
+                .field-wrapper {
+                  display: inline-block !important;
+                  position: static;
+                  right: inherit;
+                  top: inherit;
+                  margin-left: 10px;
+                }
+              }
+            }
+          }
+          .h5-form-box {
+            .upload-img {
+              margin-top: 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/xform/styles/h5.scss

@@ -5,9 +5,8 @@
  * formConfig.layoutType === 'H5' 输出，PC/Pad 版式下整份样式不生效。
  *
  * 为什么放包内而不是 resources/css/style.scss：
- *   package.json 的 files 只含 src/resources/js，不含 src/resources/css ——
- *   style.scss 不随 cloud-web-corejs 发布，消费应用用的是自己那份拷贝。
- *   样式写在这里才能随包走，改一次各应用同步生效。
+ *   style.scss 是消费应用按需加载的历史业务样式，不随 cloud-web-corejs 发布。
+ *   组件样式写在这里才能随包走，改一次各应用同步生效。
  *   详见 docs/2026-08 xform 移动端布局对齐 bill_setting 方案.md 决策 2。
  *
  * ★ 特异度硬约束（改这个文件前必读）：
@@ -19,7 +18,7 @@
  *   每处覆盖点都标了对手所在行号，便于核对。
  */
 
-@import "~@/styles/variables.scss";
+@import "~@base/styles/variables.scss";
 
 /* ============ 块 A：变量 ============ */
 /* 收掉 bill_setting 散在 4 处 5 个值的 calc(100vh - N)，不要抄它的具体数值 */
@@ -1352,7 +1351,7 @@ $xformH5Size:14px;
     border: solid 2px #fff;
 
     .icon {
-      background: url(~@/resources/images/icon-tips.png) no-repeat center;
+      background: url(~@base/core-resources/images/icon-tips.png) no-repeat center;
       background-size: cover;
       position: absolute;
       top: -19px;
@@ -1435,7 +1434,7 @@ $xformH5Size:14px;
   }
 
   &.error > div .icon {
-    background-image: url(~@/resources/images/icon-error.png);
+    background-image: url(~@base/core-resources/images/icon-error.png);
     border-color: #fff;
   }
 }

package/src/components/xform/styles/skins.scss

@@ -0,0 +1,398 @@
+// Core xform tab / step customClass skins extracted from the app stylesheet.
+@import "~@base/styles/variables.scss";
+
+.tabCard-sty2 {
+  > .el-tabs__header {
+    margin: 0 0 0 0;
+    .el-tabs__nav-wrap::after {
+      background: #e9e9e9;
+      height: 1px;
+    }
+  }
+  > .el-tabs__content .d-cont {
+    padding: 0;
+    margin: 0;
+    height: calc(100vh - 154px);
+  }
+  > .el-tabs__active-bar {
+    display: none;
+  }
+}
+.vxe-tit {
+  line-height: 28px;
+  font-weight: 600;
+  font-size: 14px;
+  color: $baseColor;
+  i {
+    margin-right: 3px;
+    font-weight: 400;
+    vertical-align: middle;
+  }
+}
+.tabSeparate-box {
+  .el-tabs__header {
+    margin-bottom: 1px;
+    .el-tabs__nav-wrap {
+      .el-tabs__nav {
+        border: none;
+        border-radius: 5px;
+        overflow: hidden;
+      }
+      .el-tabs__item {
+        height: 30px;
+        line-height: 30px;
+        background: #f0f0f0;
+        color: #424242;
+        -webkit-transition: none;
+        transition: none;
+        padding: 0 14px;
+        font-size: $fontSizeBase;
+        outline: none !important;
+        min-width: 84px;
+        text-align: center;
+        border-left: solid 1px #e1e1e1;
+        font-size: 13px;
+        &.is-active {
+          background: $baseColor;
+          color: #fff;
+        }
+      }
+    }
+    .el-tabs__active-bar,
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+  }
+}
+
+.step-box_style {
+  margin: 12px 0 8px;
+  text-align: center;
+  display: flex;
+  .item {
+    flex: 1;
+    position: relative;
+    color: #c0c4cc;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      right: -50%;
+      height: 2px;
+      border-color: inherit;
+      background-color: #c0c4cc;
+      top: 11px;
+    }
+    .icon {
+      z-index: 1;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      box-sizing: border-box;
+      background: #ffffff;
+      transition: 0.15s ease-out;
+      border-radius: 50%;
+      position: relative;
+      border: solid 2px #c0c4cc;
+      padding-right: 2px;
+      padding-top: 2px;
+    }
+    .title {
+      padding: 6px 0 3px;
+      font-size: 13px;
+    }
+    .description {
+      width: 128px;
+      opacity: 0.6;
+      margin: auto;
+      font-size: $fontSizeBase;
+    }
+    &:last-child:after {
+      display: none;
+    }
+    &.on {
+      color: $baseColor;
+      .icon {
+        background: $baseColor;
+        color: #fff;
+        border-color: $baseColor;
+      }
+    }
+  }
+}
+.step-box {
+  font-size: $fontSizeBase;
+  margin: 8px 0 12px;
+  .el-step {
+    cursor: pointer;
+  }
+  .el-step__head {
+    &.is-process {
+      color: $baseColor;
+      border-color: $baseColor;
+    }
+    &.is-success {
+      .el-step__icon {
+        background-color: #30b08f;
+        .el-step__icon-inner {
+          font-weight: 600;
+          color: #fff;
+        }
+      }
+    }
+    .el-step__icon-inner {
+      line-height: 2.2;
+      font-weight: 400;
+    }
+    &.is-finish {
+      .el-step__icon.is-text {
+        background-color: $baseColor;
+        color: #fff;
+      }
+      .el-step__line {
+        background-color: $baseColor;
+      }
+    }
+  }
+  .el-step__title {
+    font-size: 13px;
+    line-height: 24px;
+    &.is-process {
+      color: $baseColor;
+      font-weight: 400;
+      margin-left: -1px;
+    }
+  }
+  .el-step__description {
+    opacity: 0.8;
+    &.is-process {
+      color: $baseColor;
+    }
+  }
+  &.center {
+    text-align: center;
+    margin: 20px 0;
+    .el-step__line {
+      left: 50%;
+      right: -50%;
+    }
+    .el-step__main {
+      text-align: center;
+    }
+    .el-step__description {
+      padding-right: 0;
+    }
+  }
+}
+.step-box1 {
+  font-size: $fontSizeBase;
+  margin: 0 -12px 16px;
+  background: #f1f6fc;
+  padding: 16px 0 12px;
+  border-bottom: solid 1px #eee;
+  .el-step__head {
+    &.is-process {
+      color: $baseColor;
+      border-color: $baseColor;
+    }
+    &.is-success {
+      .el-step__icon {
+        background-color: #30b08f;
+        .el-step__icon-inner {
+          font-weight: 600;
+          color: #fff;
+        }
+      }
+    }
+    .el-step__icon-inner {
+      line-height: 2.2;
+      font-weight: 400;
+      margin-left: -1px;
+    }
+  }
+  .el-step__title {
+    font-size: 13px;
+    line-height: 24px;
+    &.is-process {
+      color: $baseColor;
+      font-weight: 400;
+    }
+  }
+  .el-step__description {
+    opacity: 0.8;
+    &.is-process {
+      color: $baseColor;
+    }
+  }
+}
+.step-box2 {
+  font-size: $fontSizeBase;
+  margin: 8px 0 12px;
+  .el-step {
+    cursor: pointer;
+    &.is-horizontal .el-step__line {
+      left: 30px;
+      right: 8px;
+      background: #d8d9dc;
+    }
+  }
+  .el-step__head {
+    &.is-process {
+      color: #f1f5fb;
+      border-color: $baseColor;
+      .el-step__icon {
+        background-color: #f1f5fb;
+      }
+    }
+    &.is-success {
+      color: $baseColor;
+      border-color: $baseColor;
+      .el-step__icon {
+        background-color: $baseColor;
+        border-color: $baseColor;
+        .el-step__icon-inner {
+          font-weight: 600;
+          color: #fff;
+        }
+      }
+      .el-step__line {
+        background: #f1f5fb;
+        &:after {
+          content: "";
+          border-top: dashed 2px $baseColor;
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+        }
+        i {
+          position: relative;
+          z-index: 3;
+        }
+      }
+    }
+    .el-step__icon-inner {
+      line-height: 2.2;
+      font-weight: 400;
+    }
+    &.is-finish {
+      .el-step__icon.is-text {
+        background-color: $baseColor;
+        color: #fff;
+      }
+      .el-step__line {
+        background-color: $baseColor;
+      }
+    }
+    &.is-wait {
+      .el-step__icon {
+        color: #f1f5fb;
+        background-color: #f1f5fb;
+        border-color: #d8d9dc;
+      }
+    }
+  }
+  .el-step__main {
+    position: absolute;
+    bottom: 100%;
+    width: 150px;
+    .el-step__title {
+      font-size: 21px;
+      line-height: 24px;
+      display: inline-block;
+      font-weight: 600;
+      margin-right: 8px;
+      color: #212121;
+      vertical-align: text-bottom;
+      &.is-process,
+      &.is-success {
+        color: $baseColor;
+      }
+      &.is-wait {
+        color: #999;
+      }
+    }
+    .el-step__description {
+      font-size: 14px;
+      opacity: 0.7;
+      display: inline-block;
+      vertical-align: text-bottom;
+      margin-top: 0;
+      color: #212121;
+      &.is-process,
+      &.is-success {
+        color: $baseColor;
+      }
+      &.is-wait {
+        color: #999;
+      }
+    }
+  }
+}
+.step-box3 {
+  .el-step {
+    font-size: $fontSizeBase;
+    flex-basis: auto !important;
+    .el-step__main {
+      padding-left: 4px;
+      .el-step__title {
+        font-size: $fontSizeBase;
+        overflow: hidden;
+        padding-bottom: 6px;
+        .name {
+          float: left;
+          color: #323232;
+        }
+        .a-time {
+          float: right;
+          color: #666666;
+        }
+        &.is-process {
+          font-weight: 400;
+        }
+      }
+      .el-step__description {
+        background: #fafafa;
+        padding: 4px 6px;
+        margin-left: 2px;
+        margin-bottom: 8px;
+        color: #666;
+        p {
+          margin-bottom: 0;
+        }
+        .use {
+          color: #323232;
+          margin-right: 16px;
+        }
+        .time {
+          color: #c0c4cc;
+        }
+      }
+    }
+    .el-step__head {
+      margin-left: 10px;
+      .el-step__icon {
+        width: 10px;
+        height: 10px;
+        background: $baseColor;
+        border: solid 1px #fff;
+        margin-left: 7px;
+        margin-top: 7px;
+        .el-step__icon-inner {
+          display: none;
+        }
+      }
+      .el-step__line {
+        top: 8px;
+        background: $baseColor;
+        width: 1px;
+        left: 11.5px;
+        bottom: -4px;
+      }
+    }
+  }
+}