npm - @atomicservice/ascf-toolkit - Versions diffs - 1.0.4-beta.0 → 1.0.5-beta.4 - Mend

@atomicservice/ascf-toolkit 1.0.4-beta.0 → 1.0.5-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/lib/ascf-converter/report/index.html ADDED Viewed

@@ -0,0 +1,718 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <style>
+      html,
+      body,
+      div,
+      span,
+      object,
+      iframe,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p,
+      blockquote,
+      pre,
+      abbr,
+      address,
+      cite,
+      code,
+      del,
+      dfn,
+      em,
+      img,
+      ins,
+      kbd,
+      q,
+      samp,
+      small,
+      strong,
+      sub,
+      sup,
+      var,
+      b,
+      i,
+      dl,
+      dt,
+      dd,
+      ol,
+      ul,
+      li,
+      fieldset,
+      form,
+      label,
+      legend,
+      table,
+      caption,
+      tbody,
+      tfoot,
+      thead,
+      tr,
+      th,
+      td,
+      article,
+      aside,
+      canvas,
+      details,
+      figcaption,
+      figure,
+      footer,
+      header,
+      hgroup,
+      menu,
+      nav,
+      section,
+      summary,
+      time,
+      mark,
+      audio,
+      video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 14px;
+        box-sizing: border-box;
+        outline: 0;
+        vertical-align: baseline;
+        background: transparent;
+        outline-style: none;
+        /*FF*/
+      }
+      body {
+        line-height: 1;
+      }
+      a {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 14px;
+        vertical-align: baseline;
+        background: transparent;
+      }
+      a:hover,
+      a:focus {
+        text-decoration: none;
+        outline-style: none;
+        /*FF*/
+      }
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+      }
+      input,
+      select {
+        vertical-align: middle;
+      }
+      /*css为clearfix，清除浮动*/
+      .clearfix::before,
+      .clearfix::after {
+        content: '';
+        height: 0;
+        line-height: 0;
+        display: block;
+        visibility: hidden;
+        clear: both;
+      }
+      .clearfix:after {
+        clear: both;
+      }
+      .clearfix {
+        display: flex;
+        margin-bottom: 20px;
+      }
+      .conntent {
+        width: 1146px;
+        margin: 0 auto;
+      }
+      /* index.css */
+      html {
+        background-color: #fafbfd;
+      }
+      .reports-info .rep-title {
+        height: 56px;
+        line-height: 56px;
+        font-size: 18px;
+      }
+      .table-title {
+        margin-top: 40px;
+      }
+      .reports {
+        padding-bottom: 50px;
+      }
+      .reports-info .bline {
+        position: absolute;
+        width: 1084px;
+        left: 8px;
+        top: 236px;
+        border-top: 1px solid #ccc;
+      }
+      .itembox {
+        min-width: 150px;
+        padding: 15px;
+        text-align: center;
+        border-radius: 8px;
+        position: relative;
+        transition: transform 0.2s;
+        width: 275px;
+      }
+      .topname {
+        vertical-align: middle;
+        font-size: 14px;
+        text-align: center;
+        height: 20px;
+        line-height: 20px;
+        color: #666666;
+      }
+      .icon {
+        margin-left: 3px;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+      }
+      .icon-zhengque {
+        font-size: 20px;
+        color: #31c15a;
+      }
+      .icon-cuowu {
+        font-size: 20px;
+        color: #fa4b4b;
+      }
+      .icon-warning {
+        font-size: 20px;
+        color: #ffba1d;
+      }
+      .apges .icon-zhengque,
+      .apges .icon-cuowu,
+      .apges .icon-warning {
+        font-size: 22px;
+      }
+      .botval {
+        margin-top: 10px;
+        font-size: 22px;
+        text-align: center;
+        font-weight: 700;
+        margin-bottom: 5px;
+      }
+      .show-table {
+        margin-top: 20px;
+        border-bottom: none;
+        border-right: none;
+      }
+      .table-data {
+        width: 50%;
+        height: 50px;
+        float: left;
+      }
+      .table_left,
+      .table_right {
+        border-bottom: 1px solid #e6e6e6;
+        border-right: 1px solid #e6e6e6;
+        text-align: center;
+        width: 50%;
+        height: 50px;
+        line-height: 50px;
+        float: left;
+        text-align: center;
+      }
+      .table-data .table_right {
+        border-left: none;
+      }
+      .rep-list {
+        border: 1px solid #e6e6e6;
+        margin-top: 20px;
+        padding-bottom: 20px;
+      }
+      .rep-list .list-title {
+        height: 66px;
+        line-height: 66px;
+        padding-left: 30px;
+        border-bottom: 1px solid #e6e6e6;
+      }
+      .tab-box {
+        background-color: #fff;
+        padding: 0 20px;
+        padding-bottom: 20px;
+      }
+      .tabs {
+        height: 50px;
+        border-bottom: 1px solid #e6e6e6;
+        user-select: none;
+      }
+      .tab-item {
+        padding: 10px 20px;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        background-color: #f8f9fa;
+        margin-right: 5px;
+        display: flex;
+        align-items: center;
+        width: 181px;
+        height: 49px;
+        font-size: 16px;
+        position: relative;
+      }
+      .tab-item.actived {
+        background-color: #fff;
+        border-color: #ddd;
+        border-bottom-color: #fff;
+        margin-bottom: -1px;
+        font-weight: bold;
+        height: 50px;
+      }
+      .tab-item .num {
+        position: absolute;
+        top: 50%;
+        right: 45px;
+        transform: translateY(-50%);
+        padding: 0 3px;
+        height: 18px;
+        min-width: 18px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 18px;
+        color: #fff;
+        border-radius: 12px;
+      }
+      .tab-item .num.warn {
+        background-color: #ffb700;
+      }
+      .tab-item .num.err {
+        background-color: #ff2a41;
+      }
+      .table-info {
+        margin-top: 30px;
+        display: none;
+        overflow: auto;
+        height: 550px;
+        background-color: #fff;
+      }
+      .table-info.actived {
+        display: block;
+      }
+      .table {
+        width: 100%;
+        background-color: #fff;
+      }
+      .table tr {
+        text-align: center;
+        height: 50px;
+        line-height: 50px;
+      }
+      .table .table-head {
+        background-color: #fafbfd;
+        font-size: 14px;
+        color: #999999;
+        display: none;
+      }
+      .table .table-head th,
+      .table .table-head td {
+        font-weight: 400;
+      }
+      .table-head tr.pages th:nth-child(1),
+      .file-path {
+        text-align: left;
+      }
+      .table-head tr th.result {
+        width: 126px;
+      }
+      .text-left {
+        text-align: left;
+        padding-left: 25px;
+        background-color: #f8f9fa;
+        font-weight: bold;
+        color: #555;
+        font-size: 16px;
+        border-bottom: 1px solid #eee;
+      }
+      .text-right {
+        text-align: right;
+        padding: 0px 15px;
+        text-align: left;
+        border-bottom: 1px solid #eee;
+        width: 85%;
+        font-size: 16px;
+      }
+      .file-path {
+        cursor: pointer;
+        user-select: none;
+      }
+      .file-path:active {
+        color: #ccc;
+      }
+      .show-instruct {
+        cursor: pointer;
+        user-select: none;
+      }
+      .show-instruct:hover {
+        color: blue;
+      }
+      .show-instruct:active {
+        color: #ccc;
+      }
+      .mask {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.6);
+        z-index: 3;
+        overflow: auto;
+      }
+      .mask.hide {
+        display: none;
+      }
+      .mask .file-info {
+        position: relative;
+        width: 700px;
+        margin: 0 auto;
+        background-color: #fff;
+        margin-top: 126px;
+        margin-bottom: 50px;
+        border: 1px solid #e6e6e6;
+        box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.05);
+        border-radius: 4px;
+      }
+      .mask .title {
+        height: 40px;
+        line-height: 40px;
+        padding-left: 7px;
+        border-bottom: 1px solid #ccc;
+      }
+      .mask .table-box {
+        padding: 10px;
+      }
+      .mask .close {
+        right: 0;
+        top: 0;
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        position: absolute;
+        cursor: pointer;
+      }
+      .mask .close i {
+        color: #999;
+        font-size: 18px;
+      }
+      .mask .close i:active {
+        color: #ccc;
+      }
+      .table-box table {
+        width: 100%;
+      }
+      .table-box th,
+      .table-box td {
+        text-align: center;
+        line-height: 36px;
+        border: 1px solid #ccc;
+      }
+      .table-box .name {
+        width: 25%;
+      }
+      .table-box .header {
+        color: #999;
+        font-weight: 400;
+      }
+      .table-box .opations {
+        padding: 5px;
+        width: 40%;
+      }
+      .result {
+        user-select: none;
+      }
+      .opations .opation-item {
+        line-height: 20px;
+      }
+      .table-box td.opations {
+        vertical-align: middle;
+        color: #e51c23;
+      }
+      .table-box .result {
+        width: 35%;
+      }
+      .table-box td.result {
+        color: #3f51b5;
+        cursor: pointer;
+      }
+      .table-box td.result:active {
+        color: #ccc;
+      }
+      .footer {
+        background-color: #333;
+      }
+      .foot-cont {
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        text-align: center;
+      }
+      .table-box th,
+      .table-box td.unsupported {
+        line-height: 1.3em;
+        padding-bottom: 6px;
+      }
+      .iconfont {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+      }
+      .icon-zhengque {
+        background: url(./icons/completely.png) no-repeat center/contain;
+      }
+      .icon-warning {
+        background: url(./icons/portion.png) no-repeat center/contain;
+      }
+      .icon-cuowu,
+      .icon-cuowu1 {
+        background: url(./icons/failed.png) no-repeat center/contain;
+      }
+      body {
+        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        margin: 0;
+        padding: 0;
+        color: #333;
+        background-color: #f5f7fa;
+      }
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .card {
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        margin-bottom: 30px;
+        padding: 20px;
+        width: 1200px;
+      }
+      header {
+        text-align: center;
+        margin-bottom: 30px;
+        color: #1a73e8;
+        margin-bottom: 30px;
+      }
+      h1 {
+        color: #1a73e8;
+        margin-bottom: 10px;
+        margin-top: 30px;
+        font-size: 32px;
+      }
+      .rep-title h2 {
+        margin: 0;
+        color: #333;
+        font-size: 20px;
+        line-height: 1;
+      }
+      .card-header {
+        border-bottom: 1px solid #eee;
+        padding-bottom: 15px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .stat-item {
+        flex: 1;
+        min-width: 150px;
+        padding: 15px;
+        text-align: center;
+        border-radius: 8px;
+        position: relative;
+        transition: transform 0.2s;
+        cursor: pointer;
+      }
+      .rep-allbox {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 -20px;
+      }
+      .itembox_completely {
+        color: #1a73e8;
+        background-color: #e8f0fe;
+      }
+      .itembox_portion {
+        color: #f9ab00;
+        background-color: #fff8e1;
+      }
+      .itembox_failed {
+        color: #db4437;
+        background-color: #ffebee;
+      }
+      .card-header h2 {
+        margin: 0;
+        color: #333;
+        font-size: 20px;
+        line-height: 1;
+      }
+      .status-icon {
+        margin-right: 15px;
+        font-size: 18px;
+      }
+      .success-icon {
+        color: #34a853;
+      }
+      .warning-icon {
+        color: #fbbc05;
+      }
+      .danger-icon {
+        color: #ea4335;
+      }
+      .card_bottom tr {
+        padding: 15px;
+        border-radius: 8px;
+        margin-bottom: 10px;
+        cursor: pointer;
+        transition: box-shadow 0.2s;
+        display: flex;
+        align-items: center;
+      }
+      .card_bottom tr:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+    </style>
+    <script src="./js/data.js"></script>
+    <script src="./js/index.js"></script>
+    <title>ASCF转换报告</title>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>ASCF转换报告</h1>
+      </header>
+      <div class="reports firstone conntent">
+        <div class="card">
+          <div class="reports-info">
+            <div class="rep-title card-header"><h2>转换概览</h2></div>
+            <div class="rep-info" id="project">
+              <div class="rep-allbox clearfix"></div>
+              <div class="table-title card-header"><h2>编译信息</h2></div>
+              <div class="show-table surroundings clearfix"></div>
+              <table class="table">
+                <thead class="table-head">
+                  <tr>
+                    <th class="text-left">统计项</th>
+                    <th class="text-right">结果</th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div class="card card_bottom">
+          <div class="reports-info info-list">
+            <div class="rep-title card-header"><h2>转换详情</h2></div>
+            <div class="tab-box">
+              <div class="tabs">
+                <ul class="clearfix ul"></ul>
+              </div>
+              <div class="card-box"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mask hide">
+        <div class="file-info">
+          <div class="close">
+            <i class="iconfont icon-cuowu1"></i>
+          </div>
+          <div class="title"></div>
+          <div class="table-box">
+            <table>
+              <thead>
+                <tr>
+                  <th class="name header" id="col1">组件名</th>
+                  <th class="opations header" id="col2">不支持</th>
+                  <th class="result header" id="col3">如何解决</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>