ydb-components-material 0.1.8 → 0.1.10

package/lib/components/file-item/index.scss

@@ -0,0 +1,284 @@
+.file_item {
+  border-radius: 8px;
+  opacity: 1;
+  background: #F7F7F7;
+  padding: 12px;
+
+  .file {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .file_img {
+      width: 80px;
+      height: 80px;
+      border-radius: 4px;
+      position: relative;
+      border-radius: 8px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fff;
+      font-size: 12px;
+      color: #666666;
+      flex-direction: column;
+
+      .small_img {
+        width: 24px;
+        height: 24px;
+
+      }
+
+      .add {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .add_icon {
+          width: 14px;
+          margin-left: -5px;
+        }
+        color: #1678FF;
+      }
+
+      .del {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        top: -6px;
+        right: -6px;
+        z-index: 9;
+      }
+
+      .mask {
+        // display: none !important;
+        border-radius: 8px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        // opacity: 0.5;
+        background: #2222227d;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        z-index: 8;
+
+        .checked {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 3px;
+          }
+        }
+      }
+    }
+
+    .operation {
+      .btn {
+        display: flex;
+        flex-direction: row;
+
+        .img_btn {
+          margin-left: 8px;
+          width: 68px;
+          height: 26px;
+          border-radius: 4px;
+          opacity: 1;
+          box-sizing: border-box;
+          border: 1px solid #1678FF;
+          color: #1678FF;
+          font-size: 13px;
+          line-height: 26px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .operation_btn {
+          cursor: pointer;
+          margin-left: 8px;
+          width: 68px;
+          height: 26px;
+          border-radius: 4px;
+          opacity: 1;
+          box-sizing: border-box;
+          background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+          color: #fff;
+          font-size: 13px;
+          line-height: 26px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .file_item_bottom {
+    border-top: 1px solid #EAEAEA;
+    display: flex;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding-top: 12px;
+
+    .line {
+      width: 1px;
+      height: 20px;
+      background-color: #EAEAEA;
+    }
+
+    .icon_text {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #1678FF;
+
+      img {
+        width: 16px;
+        height: 11px;
+        margin-right: 5px;
+
+      }
+    }
+  }
+
+  .img_view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .close {
+      width: 17px;
+      height: 17px;
+      color: #fff;
+      position: absolute;
+      top: 40px;
+      right: 20px;
+    }
+
+    .view {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .material_lib {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    .material_lib_content {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background-color: #fff;
+      border-radius: 16px 16px 0px 0px;
+
+      .material_lib_title {
+        font-size: 16px;
+        color: #333333;
+        line-height: 54px;
+        text-align: center;
+      }
+
+      .tips {
+        padding: 12px;
+        background: #FFF6E8;
+        font-size: 14px;
+        line-height: 24px;
+        color: #F29655;
+        display: flex;
+        align-items: flex-start;
+
+        img {
+          width: 14px;
+          height: 14px;
+          margin-right: 8px;
+          margin-top: 5px;
+        }
+      }
+
+      .list {
+        padding: 12px 12px 0 12px;
+        width: 100%;
+        background-color: #F5F5F5;
+        margin-bottom: 64px;
+        max-height: 300px;
+        overflow: auto;
+
+        .item {
+          padding: 16px 12px;
+          border-radius: 8px;
+          background: #FFF;
+          display: flex;
+          align-items: center;
+          color: #333333;
+          font-size: 14px;
+          width: 100%;
+          margin-bottom: 12px;
+
+          .preview_icon {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            color: #1678FF;
+
+            img {
+              width: 16px;
+              margin-right: 4px;
+            }
+          }
+        }
+      }
+
+      .bottom_btn {
+        background-color: #fff;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        .btn {
+          width: 169px;
+          height: 40px;
+          border-radius: 50px;
+          font-size: 16px;
+          line-height: 40px;
+          text-align: center;
+        }
+
+        .cancel {
+          background-color: #fff;
+          border: 1px solid #E7E7E7;
+          color: #333;
+        }
+
+        .ok {
+          background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+          color: #fff;
+        }
+      }
+    }
+  }
+}

package/lib/components/message/icons/icon_error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g><rect x="0" y="0" width="14" height="14" rx="7" fill="#FF6237" fill-opacity="1"/></g><g><path d="M10.374788305468751,4.3754119873046875Q10.374788305468751,4.5245664673046875,10.31770940546875,4.662367187304687Q10.26063060546875,4.800168087304687,10.15516230546875,4.905636087304687L10.15526820546875,4.905742087304688L8.06059880546875,7.000411487304687L10.15526910546875,9.095081787304688L10.15516280546875,9.095187687304687Q10.26063060546875,9.200655887304688,10.31770940546875,9.338456587304687Q10.37478880546875,9.476257287304687,10.374789205468751,9.625411987304688Q10.37478880546875,9.699265487304688,10.36038020546875,9.771699887304688Q10.34597210546875,9.844134287304687,10.31770940546875,9.912366387304687Q10.28944680546875,9.980598487304688,10.248416405468749,10.042005587304686Q10.207385105468749,10.103413087304688,10.15516280546875,10.155635787304687Q10.10294060546875,10.207858087304688,10.041533505468749,10.248888987304689Q9.98012590546875,10.289919887304688,9.91189380546875,10.318182987304688Q9.84366230546875,10.346445087304687,9.77122740546875,10.360853187304688Q9.698792505468749,10.375262287304688,9.62493900546875,10.375262287304688Q9.47578430546875,10.375262287304688,9.33798310546875,10.318182987304688Q9.20018240546875,10.261103587304689,9.09471460546875,10.155635787304687L9.09460880546875,10.155741687304687L6.99993900546875,8.061071887304688L4.90526910546875,10.155741687304687L4.90516330546875,10.155635787304687Q4.79969520546875,10.261103587304689,4.66189430546875,10.318182987304688Q4.52409350546875,10.375262287304688,4.3749389654687505,10.375262287304688Q4.30108511546875,10.375262287304688,4.22865045546875,10.360853687304687Q4.1562157254687495,10.346445087304687,4.08798372546875,10.318182487304687Q4.01975172546875,10.289919887304688,3.95834457546875,10.248888987304689Q3.89693739546875,10.207858087304688,3.84471490546875,10.155635787304687Q3.79249238546875,10.103413087304688,3.75146143546875,10.042005987304687Q3.71043047346875,9.980598487304688,3.68216785746875,9.912366887304687Q3.65390524046875,9.844134787304688,3.63949708546875,9.771699887304688Q3.62508893012975,9.699265487304688,3.62508893012975,9.625411987304688Q3.62508893012975,9.476257287304687,3.68216785046875,9.338456587304687Q3.73924677546875,9.200655887304688,3.84471487546875,9.095187687304687L3.84460884546875,9.095081787304688L5.93927880546875,7.000411487304687L3.84460973546875,4.905742087304688L3.84471559546875,4.905636087304687Q3.73924749546875,4.800168087304687,3.68216856946875,4.662367187304687Q3.62508964538575,4.5245664673046875,3.62508964538575,4.3754119873046875Q3.62508964538575,4.301558197304687,3.63949780446875,4.229123477304688Q3.65390596346875,4.156688807304688,3.68216858846875,4.088456777304687Q3.71043121046875,4.020224747304687,3.75146219546875,3.9588175973046873Q3.79249316546875,3.8974104273046875,3.84471568546875,3.8451879473046873Q3.89693820546875,3.7929654273046873,3.95834541546875,3.7519344573046873Q4.01975259546875,3.7109035033046873,4.08798462546875,3.6826408843046874Q4.15621662546875,3.6543782653046875,4.22865134546875,3.6399701093046875Q4.30108606546875,3.6255619525946874,4.37493991546875,3.6255619525946874Q4.52409422546875,3.6255619525946874,4.66189500546875,3.6826408733046874Q4.79969580546875,3.7397197973046876,4.9051642054687505,3.8451879073046875L4.90527010546875,3.8450819273046877L6.99993900546875,5.9397511873046875L9.094607805468751,3.8450819273046877L9.094713705468749,3.8451879073046875Q9.20018200546875,3.7397197973046876,9.33798220546875,3.6826408733046874Q9.475783305468749,3.6255619525946874,9.62493800546875,3.6255619525946874Q9.698791505468751,3.6255619525946874,9.77122590546875,3.6399701093046875Q9.843660805468751,3.6543782633046873,9.91189290546875,3.6826408803046875Q9.980124505468751,3.7109034953046875,10.04153160546875,3.7519344573046873Q10.10293910546875,3.7929654073046875,10.15516190546875,3.8451879273046874Q10.207384105468751,3.8974104273046875,10.24841500546875,3.9588175973046873Q10.28944590546875,4.020224747304687,10.317708505468751,4.088456747304687Q10.345971105468749,4.156688747304687,10.36037970546875,4.229123477304688Q10.374787805468749,4.301558197304687,10.374788305468751,4.3754119873046875Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

package/lib/components/message/icons/icon_warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g><path d="M14,7Q14,7.1718402,13.991568,7.3434739Q13.983135,7.5151072,13.966292,7.68612Q13.949449,7.8571329,13.924234,8.027113Q13.899019,8.197093,13.865496,8.3656311Q13.83197,8.5341702,13.790217,8.700861Q13.748464,8.8675518,13.698582,9.0319929Q13.648699,9.196434,13.590806,9.3582287Q13.532915,9.5200233,13.467155,9.6787834Q13.401394,9.8375435,13.327923,9.9928856Q13.254452,10.148228,13.173448,10.299777Q13.092443,10.451326,13.004099,10.598719Q12.915755,10.746111,12.820286,10.88899Q12.724816,11.03187,12.622452,11.169893Q12.520086,11.307918,12.411073,11.440753Q12.302058,11.573587,12.186657,11.700912Q12.071257,11.828238,11.949747,11.949747Q11.828238,12.071257,11.700912,12.186658Q11.573587,12.302058,11.440753,12.411073Q11.307918,12.520086,11.169893,12.622451Q11.03187,12.724816,10.88899,12.820286Q10.746111,12.915755,10.598719,13.004099Q10.451326,13.092443,10.299777,13.173449Q10.148228,13.254454,9.9928856,13.327925Q9.8375435,13.401396,9.6787834,13.467155Q9.5200233,13.532916,9.3582287,13.590808Q9.196434,13.648699,9.0319929,13.698583Q8.8675518,13.748465,8.700861,13.790218Q8.5341702,13.831971,8.3656311,13.865496Q8.197093,13.899019,8.027113,13.924234Q7.8571329,13.94945,7.68612,13.966293Q7.5151072,13.983136,7.3434734,13.991568Q7.1718402,14,7,14Q6.8281598,14,6.6565266,13.991568Q6.4848933,13.983135,6.3138804,13.966292Q6.1428671,13.949449,5.9728866,13.924234Q5.802906,13.899019,5.6343675,13.865496Q5.4658289,13.83197,5.2991385,13.790217Q5.1324482,13.748464,4.9680071,13.698582Q4.803566,13.648699,4.6417708,13.590806Q4.4799757,13.532915,4.3212156,13.467155Q4.1624556,13.401394,4.0071144,13.327923Q3.8517723,13.254452,3.700223,13.173448Q3.5486732,13.092443,3.4012804,13.004099Q3.2538881,12.915755,3.1110082,12.820286Q2.9681282,12.724816,2.8301048,12.622452Q2.6920815,12.520086,2.559247,12.411073Q2.4264126,12.302058,2.299087,12.186657Q2.171762,12.071257,2.0502524,11.949747Q1.9287429,11.828238,1.813342,11.700912Q1.6979411,11.573587,1.5889268,11.440753Q1.4799124,11.307918,1.3775473,11.169893Q1.275182,11.03187,1.1797127,10.88899Q1.0842432,10.746111,0.99589968,10.598719Q0.90755606,10.451326,0.82655108,10.299777Q0.74554604,10.148228,0.67207485,9.9928856Q0.59860361,9.8375435,0.53284317,9.6787834Q0.46708274,9.5200233,0.40919149,9.3582287Q0.35130021,9.196434,0.30141759,9.0319929Q0.25153497,8.8675518,0.20978118,8.700861Q0.16802739,8.5341702,0.13450301,8.3656311Q0.10097862,8.197093,0.075764418,8.027113Q0.0505502,7.8571329,0.033706907,7.68612Q0.016863609,7.5151072,0.0084318044,7.3434734Q0,7.1718402,0,7Q0,6.8281598,0.0084318044,6.6565266Q0.016863609,6.4848933,0.033706907,6.3138804Q0.0505502,6.1428671,0.07576441,5.9728866Q0.10097862,5.802906,0.13450301,5.6343675Q0.16802739,5.4658289,0.20978117,5.2991385Q0.25153497,5.1324482,0.30141759,4.9680071Q0.35130021,4.803566,0.40919146,4.6417708Q0.46708274,4.4799757,0.53284317,4.3212156Q0.59860361,4.1624556,0.67207479,4.0071144Q0.74554598,3.8517723,0.82655102,3.700223Q0.90755594,3.5486732,0.99589956,3.4012804Q1.0842431,3.2538881,1.1797125,3.1110082Q1.2751819,2.9681282,1.3775471,2.8301048Q1.4799123,2.6920815,1.5889268,2.559247Q1.6979411,2.4264126,1.8133421,2.299087Q1.9287429,2.171762,2.0502524,2.0502524Q2.171762,1.9287429,2.299087,1.813342Q2.4264126,1.6979411,2.559247,1.5889268Q2.6920815,1.4799124,2.8301048,1.3775473Q2.9681282,1.275182,3.1110082,1.1797127Q3.2538881,1.0842432,3.4012806,0.99589968Q3.5486729,0.90755606,3.7002227,0.82655108Q3.8517723,0.74554604,4.0071139,0.67207485Q4.1624556,0.59860361,4.3212156,0.53284317Q4.4799757,0.46708274,4.6417708,0.40919149Q4.803566,0.35130021,4.9680071,0.30141759Q5.1324482,0.25153497,5.2991385,0.20978118Q5.4658289,0.16802739,5.6343675,0.13450301Q5.802906,0.10097862,5.9728866,0.075764418Q6.1428671,0.0505502,6.31388,0.033706907Q6.4848928,0.016863609,6.6565266,0.0084318044Q6.8281598,0,7,0Q7.1718402,0,7.3434739,0.0084318044Q7.5151072,0.016863609,7.68612,0.033706907Q7.8571329,0.0505502,8.027113,0.07576441Q8.197093,0.10097862,8.3656311,0.13450301Q8.5341702,0.16802739,8.700861,0.20978117Q8.8675518,0.25153497,9.0319929,0.30141759Q9.196434,0.35130021,9.3582287,0.40919146Q9.5200233,0.46708274,9.6787834,0.53284317Q9.8375435,0.59860361,9.9928856,0.67207479Q10.148228,0.74554598,10.299777,0.82655102Q10.451326,0.90755594,10.598719,0.99589956Q10.746111,1.0842431,10.88899,1.1797125Q11.03187,1.2751819,11.169893,1.3775471Q11.307918,1.4799123,11.440753,1.5889268Q11.573587,1.6979411,11.700912,1.8133421Q11.828238,1.9287429,11.949747,2.0502524Q12.071257,2.171762,12.186658,2.299087Q12.302058,2.4264126,12.411073,2.559247Q12.520086,2.6920815,12.622451,2.8301048Q12.724816,2.9681282,12.820286,3.1110082Q12.915755,3.2538881,13.004099,3.4012806Q13.092443,3.5486729,13.173449,3.7002227Q13.254454,3.8517723,13.327925,4.0071139Q13.401396,4.1624556,13.467155,4.3212156Q13.532916,4.4799757,13.590808,4.6417708Q13.648699,4.803566,13.698583,4.9680071Q13.748465,5.1324482,13.790218,5.2991385Q13.831971,5.4658289,13.865496,5.6343675Q13.899019,5.802906,13.924234,5.9728866Q13.94945,6.1428671,13.966293,6.31388Q13.983136,6.4848928,13.991568,6.6565266Q14,6.8281598,14,7ZM6.9999456,8.5557728C6.5703907,8.5557728,6.222168,8.20755,6.222168,7.7779951L6.222168,3.8891058C6.222168,3.4595511,6.5703907,3.1113281,6.9999456,3.1113281C7.4295006,3.1113281,7.7777233,3.4595511,7.7777233,3.8891058L7.7777233,7.7779951C7.7777233,8.20755,7.4295006,8.5557728,6.9999456,8.5557728ZM7.7777233,10.889106Q7.7777228,10.96571,7.7627783,11.040842Q7.7478328,11.115973,7.7185173,11.186747Q7.6892023,11.25752,7.6466436,11.321214Q7.604085,11.384909,7.5499172,11.439076Q7.4957495,11.493243,7.432055,11.535803Q7.3683605,11.578362,7.2975874,11.607677Q7.2268143,11.636992,7.1516819,11.651937Q7.0765495,11.666883,6.9999456,11.666883Q6.9233408,11.666883,6.8482084,11.651937Q6.7730756,11.636992,6.7023025,11.607677Q6.6315289,11.578362,6.5678344,11.535803Q6.5041404,11.493244,6.4499731,11.439077Q6.3958054,11.384909,6.3532467,11.321215Q6.3106875,11.25752,6.2813725,11.186747Q6.2520571,11.115973,6.2371125,11.040841Q6.222168,10.96571,6.222168,10.889106Q6.222168,10.8125,6.237113,10.737368Q6.2520571,10.662235,6.2813725,10.591462Q6.3106875,10.520689,6.3532462,10.456995Q6.3958054,10.3933,6.4499731,10.339133Q6.5041404,10.284966,6.5678349,10.242407Q6.6315289,10.199847,6.702302,10.170532Q6.7730751,10.141217,6.848208,10.126272Q6.9233408,10.111328,6.9999456,10.111328Q7.0765495,10.111328,7.1516819,10.126272Q7.2268143,10.141217,7.2975874,10.170532Q7.3683605,10.199847,7.432055,10.242407Q7.4957495,10.284966,7.5499167,10.339133Q7.604084,10.3933,7.6466436,10.456994Q7.6892023,10.520688,7.7185178,10.591461Q7.7478333,10.662235,7.7627783,10.737368Q7.7777228,10.8125,7.7777233,10.889106Z" fill-rule="evenodd" fill="#F29655" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

package/lib/components/message/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './index.scss';
+export interface MessageProps {
+    /**
+     * 类型
+     */
+    type?: "error" | "warning" | "success";
+    title: string;
+    text: string;
+    goBack?: () => void;
+    retry?: () => void;
+    skip?: () => void;
+    close: () => void;
+}
+declare const Message: React.FC<MessageProps>;
+export default Message;

package/lib/components/message/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _icon_error = _interopRequireDefault(require("./icons/icon_error.svg"));
+var _icon_warning = _interopRequireDefault(require("./icons/icon_warning.svg"));
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Message = function Message(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'error' : _ref$type,
+    title = _ref.title,
+    text = _ref.text,
+    goBack = _ref.goBack,
+    retry = _ref.retry,
+    skip = _ref.skip,
+    close = _ref.close;
+  console.log('goBack', goBack, type);
+  var icon = type === 'error' ? _icon_error["default"] : _icon_warning["default"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "message"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "content"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "icon",
+    src: icon,
+    alt: "",
+    onClick: function onClick() {
+      return goBack();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, text), /*#__PURE__*/React.createElement("div", {
+    className: "btns"
+  }, goBack && /*#__PURE__*/React.createElement("div", {
+    className: "blue_btn btn",
+    onClick: goBack
+  }, "\u8FD4\u56DE\u4FEE\u6539"), retry && skip && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "black_btn",
+    onClick: retry
+  }, "\u518D\u8BD5\u4E00\u6B21"), /*#__PURE__*/React.createElement("div", {
+    className: "blue_btn",
+    onClick: skip
+  }, "\u4EBA\u5DE5\u5BA1\u6838")), skip && close && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "black_btn btn",
+    onClick: skip
+  }, "\u5FFD\u7565\uFF0C\u7EE7\u7EED\u63D0\u4EA4"), /*#__PURE__*/React.createElement("div", {
+    className: "blue_btn btn",
+    onClick: close
+  }, "\u6211\u518D\u60F3\u60F3")))));
+};
+Message.displayName = 'Message';
+var _default = exports["default"] = Message;

package/lib/components/message/index.scss

@@ -0,0 +1,67 @@
+.message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .content {
+    width: 320px;
+    border-radius: 8px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .icon {
+      width: 32px;
+      height: 32px;
+      margin-bottom: 8px;
+      margin-top: 32px;
+    }
+
+    .title {
+      font-size: 16px;
+      color: #FF6237;
+      margin-bottom: 16px;
+    }
+
+    .text {
+      font-size: 14px;
+      color: #333333;
+      margin: 0 29px 17px;
+      text-align: center;
+    }
+
+    .btns {
+      border-top: 1px solid rgba(0, 0, 0, 0.102);
+      width: 100%;
+      display: flex;
+      flex: 1;
+      height: 56px;
+
+      .btn {
+        font-size: 16px;
+        width: 100%;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+      }
+
+      .blue_btn {
+        color: #1678FF;
+      }
+
+      .left_btn {
+        border-right: 1px solid rgba(0, 0, 0, 0.102);
+      }
+    }
+
+  }
+}

package/lib/components/statistic/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './index.scss';
+export interface StatsticProps {
+    /**
+     * 类型
+     */
+    type?: "error" | "warning" | "success";
+    number: number;
+    text: string;
+}
+declare const Statstic: React.FC<StatsticProps>;
+export default Statstic;

package/lib/components/statistic/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Statstic = function Statstic(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'error' : _ref$type,
+    number = _ref.number,
+    text = _ref.text;
+  var bgColor = {
+    error: '#FBF3F4',
+    warning: '#FFF8ED',
+    success: '#EFF9F5'
+  }[type];
+  var color = {
+    error: '#C83E42',
+    warning: '#C38A38',
+    success: '#1D9C70'
+  }[type];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "statstic",
+    style: {
+      background: bgColor,
+      color: color
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "count"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "num"
+  }, number), /*#__PURE__*/React.createElement("div", {
+    className: "unit"
+  }, "\u9879")), /*#__PURE__*/React.createElement("div", {
+    className: "text",
+    style: {
+      color: color
+    }
+  }, text));
+};
+Statstic.displayName = 'Statstic';
+var _default = exports["default"] = Statstic;

package/lib/components/statistic/index.scss

@@ -0,0 +1,30 @@
+.statstic {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 72px;
+
+  .count {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 9px;
+
+    .num {
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 26px;
+      margin-right: 1px;
+    }
+    .unit {
+      font-size: 12px;
+    }
+  }
+
+  .text {
+    color: #C83E42;
+    font-size: 13px;
+    font-weight: 500;
+  }
+}

package/lib/components/tips/index.d.ts

@@ -6,6 +6,7 @@ export interface TipsProps {
      */
     text: string;
     type: 'success' | 'warning' | 'error';
+    style?: object;
 }
 declare const Tips: React.FC<TipsProps>;
 export default Tips;

package/lib/components/tips/index.js

@@ -12,7 +12,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var Tips = function Tips(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? '文案' : _ref$text,
-    type = _ref.type;
+    type = _ref.type,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
   var color = '#333333';
   if (type === 'warning') {
     color = '#F29655';
@@ -26,7 +28,8 @@ var Tips = function Tips(_ref) {
     icon = _icon_error["default"];
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "tips"
+    className: "tips",
+    style: style
   }, /*#__PURE__*/React.createElement("img", {
     className: "icon",
     src: icon

package/lib/index.d.ts

@@ -9,5 +9,11 @@ export type { CheckResProps } from './components/check-res';
 export { default as CheckRes } from './components/check-res';
 export type { TipsProps } from './components/tips';
 export { default as Tips } from './components/tips';
+export type { FileItemProps } from './components/file-item';
+export { default as FileItem } from './components/file-item';
+export type { MessageProps } from './components/message';
+export { default as Message } from './components/message';
+export type { StatsticProps } from './components/statistic';
+export { default as Statstic } from './components/statistic';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/lib/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.bizCssPrefix = exports.Tips = exports.ColorfulInput = exports.ColorfulButton = exports.CheckRes = exports.CheckLoading = exports.CardTitle = void 0;
+exports.bizCssPrefix = exports.Tips = exports.Statstic = exports.Message = exports.FileItem = exports.ColorfulInput = exports.ColorfulButton = exports.CheckRes = exports.CheckLoading = exports.CardTitle = void 0;
 var _colorfulButton = _interopRequireDefault(require("./components/colorful-button"));
 exports.ColorfulButton = _colorfulButton["default"];
 var _colorfulInput = _interopRequireDefault(require("./components/colorful-input"));
@@ -15,4 +15,10 @@ var _checkRes = _interopRequireDefault(require("./components/check-res"));
 exports.CheckRes = _checkRes["default"];
 var _tips = _interopRequireDefault(require("./components/tips"));
 exports.Tips = _tips["default"];
+var _fileItem = _interopRequireDefault(require("./components/file-item"));
+exports.FileItem = _fileItem["default"];
+var _message = _interopRequireDefault(require("./components/message"));
+exports.Message = _message["default"];
+var _statistic = _interopRequireDefault(require("./components/statistic"));
+exports.Statstic = _statistic["default"];
 var bizCssPrefix = exports.bizCssPrefix = 'bizpack';

package/lib/style.js

@@ -1,4 +1,6 @@
 require('@alifd/next/lib/button/style');
 require('@alifd/next/lib/input/style');
 require('@alifd/next/lib/icon/style');
+require('@alifd/next/lib/message/style');
+require('@alifd/next/lib/radio/style');
 require('./index.scss');