@vortex-ui/env-puzzle 2.0.0-beta.4 → 2.0.0-beta.6

package/lib/style/darkGreen.less

@@ -0,0 +1,370 @@
+@border-color: #e5e9f2;
+@normal-item-bg-color: #f2f2f2;
+@bg-color: #fff;
+@middle-font-color: #666;
+@table-header-bg: #f7f8fa;
+@text-color: #333;
+.darkGreenFormItem {
+    .ant-modal-body {
+        padding: 0;
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: @border-color;
+        }
+        .vtx-form-layout {
+            > .vtx-form-layout {
+                border: none;
+            }
+            > .vtx-form-pane:nth-child(1) {
+                border-top: 1px solid @border-color;
+                .vtx-form-pane-title {
+                    padding-top: 16px;
+                }
+            }
+            position: relative;
+            padding: 0;
+            border-left: 1px solid @border-color;
+            border-bottom: 1px solid @border-color;
+            .vtx-form-item-col {
+                position: relative;
+                z-index: 9;
+                margin-bottom: 0;
+                //border-bottom: 1px solid @border-color;
+                border-right: 1px solid @border-color;
+                border-top: 1px solid @border-color;
+                min-height: 60px;
+            }
+            .ant-col-8,
+            .ant-col-12,
+            .ant-col-24 {
+                &.vtx-form-item-col {
+                    border-bottom: 1px solid @border-color;
+                    margin-bottom: -1px;
+                }
+            }
+            .vtx-form-card {
+                border: none;
+            }
+            .vtx-form-pane {
+                .ant-divider {
+                    height: 0;
+                    border: none;
+                }
+            }
+            .vtx-form-pane-content {
+                //border-left: 1px solid @border-color;
+            }
+            .ant-card:not(:nth-last-child(1)) {
+                .vtx-form-card-content {
+                    border-bottom: 1px solid @border-color;
+                }
+            }
+            .vtx-form-card-content {
+                padding: 20px 0 0 0;
+            }
+            .ant-card.vtx-form-card {
+                border-bottom: none;
+            }
+            .ant-tabs-tabpane {
+                .ant-divider {
+                    height: 0;
+                    border: none;
+                }
+            }
+            .ant-card-head {
+                background: @normal-item-bg-color;
+                .ant-card-head-title {
+                    font-weight: normal;
+                    color: @text-color;
+                }
+                .ant-card-extra {
+                    span {
+                        color: @middle-font-color;
+                    }
+                }
+            }
+        }
+        .ant-form-item {
+            height: 100%;
+            margin-bottom: 0 !important;
+            margin-right: 0;
+            .ant-form-item-row {
+                height: 100%;
+                align-items: center;
+            }
+            .ant-form-item-control {
+                height: 100%;
+                background: @bg-color;
+                > *:only-child {
+                    height: 100%;
+                }
+                .ant-form-item-control-input {
+                    height: 100%;
+                }
+                .ant-form-item-explain {
+                    position: absolute;
+                    bottom: 0;
+                    left: 5px;
+                    right: 0;
+                }
+            }
+            .ant-form-item-label {
+                background: @normal-item-bg-color;
+                height: 100%;
+                min-height: 58px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+            // 各个表单样式控制
+            .ant-form-item-control-input-content {
+                > *:nth-child(1):not(.ant-select):not(.vtx-multi-select):not(.vtx-select):not(.vtx-input-textarea):not(.env-tree-select) {
+                    padding-left: 10px;
+                }
+                > .ant-select-disabled {
+                    height: calc(~'100% + 2px');
+                    position: relative;
+                    // top: -1px;
+                    .ant-select-selector {
+                        border-radius: 0;
+                    }
+                }
+                padding-top: 1px;
+                padding-bottom: 1px;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                input,
+                textarea {
+                    height: 100% !important;
+                    border: none;
+                }
+            }
+            .ant-checkbox,
+            .ant-radio {
+                input {
+                    display: none;
+                }
+            }
+            .vtx-multi-select {
+                height: 100%;
+                .ant-select {
+                    height: 100%;
+                    .ant-select-selector {
+                        height: 100%;
+                    }
+                }
+                .ant-select-selector {
+                    border: none;
+                    border-right: 1px solid @border-color;
+                }
+                .ant-btn {
+                    height: 100%;
+                    border: none;
+                }
+            }
+            .vtx-input-textarea {
+                width: 100%;
+                height: 100%;
+            }
+            input {
+                padding-left: 0;
+                min-height: 56px;
+            }
+            textarea,
+            .ant-input-number-disabled,
+            .ant-input-affix-wrapper,
+            .env-tree-select,
+            .ant-select,
+            .ant-input-number,
+            .ant-picker {
+                height: 100%;
+                border: none;
+                .ant-input-number-input-wrap {
+                    height: 100%;
+                }
+            }
+            .ant-select {
+                display: flex;
+                align-items: center;
+                .ant-select-selector {
+                    //height: calc(~'100% - 1px');
+                    height: 100%;
+                    width: 100%;
+                    border: none;
+                    input {
+                        height: 100%;
+                        overflow: visible;
+                    }
+                }
+                .ant-select-selection-placeholder,
+                .ant-select-selection-item {
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            .ant-upload-picture-card-wrapper {
+                padding-top: 10px;
+            }
+            .ant-select-focused,
+            .ant-input-number-focused,
+            .ant-input-affix-wrapper {
+                outline: none;
+                position: relative;
+                z-index: 199;
+                width: calc(~'100% - 1px');
+                // height: calc(~'100% - 1px');
+            }
+            input:focus,
+            textarea:focus {
+                outline: none;
+                position: relative;
+                z-index: 199;
+                width: calc(~'100% - 1px');
+                // height: calc(~'100% - 1px');
+            }
+        }
+        .ant-row {
+            width: 100%;
+        }
+        .vtx-form-pane-title {
+            padding-left: 24px;
+            margin-bottom: 0;
+            padding-bottom: 24px;
+            border-right: 1px solid @border-color;
+        }
+        .ant-col:not(.ant-col-8):not(.ant-col-12):not(.ant-col-24):not(.ant-col-4) {
+            &.ant-form-item-label {
+                width: 150px;
+            }
+        }
+        .text-node {
+            box-sizing: border-box;
+            padding-left: 10px;
+        }
+        .ant-col:not(:nth-child(1)) {
+            .ant-row {
+                .ant-col.vtx-form-item-col {
+                    border-top: none;
+                }
+            }
+        }
+        .ant-form-item-with-help {
+            margin-bottom: 0 !important;
+        }
+        //.ant-col{
+        //    max-height: 62px ;
+        //    overflow: hidden;
+        //}
+    }
+    .ant-tabs-nav-wrap {
+        background: @table-header-bg;
+        height: 42px;
+        .ant-tabs-tab-active {
+            background: #fff;
+        }
+        .ant-tabs-tab {
+            height: 42px;
+            padding-left: 18px !important;
+            padding-right: 18px !important;
+            margin-left: 0;
+        }
+        .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
+            top: 0;
+        }
+    }
+}
+
+.darkGreen {
+    .env-create-modal {
+        .darkGreenFormItem();
+    }
+    .env-view-modal {
+        .ant-modal-body {
+            > .ant-row {
+                position: relative;
+                padding: 0;
+                .left-border {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    width: 1px;
+                    background: @border-color;
+                }
+                .right-border {
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    bottom: 0;
+                    width: 1px;
+                    background: @border-color;
+                }
+                .top-border {
+                    position: absolute;
+                    right: 0;
+                    left: 0;
+                    top: 0;
+                    height: 1px;
+                    background: @border-color;
+                }
+                .bottom-border {
+                    position: absolute;
+                    right: 0;
+                    left: 0;
+                    bottom: 0;
+                    height: 1px;
+                    background: @border-color;
+                }
+            }
+        }
+        .env-view-modal-col {
+            position: relative;
+            background: #fff;
+            z-index: 9;
+            border-top: 1px solid @border-color;
+            border-bottom: 1px solid @border-color;
+            border-right: 1px solid @border-color;
+            margin-bottom: -1px;
+        }
+        .env-view-modal-col-label {
+            box-sizing: border-box;
+            padding-left: 0;
+            text-align: right;
+            flex-basis: 100px;
+            flex-shrink: 0;
+            width: 100px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            background: @normal-item-bg-color;
+            height: 100%;
+            min-height: 58px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+        .env-view-modal-col-value {
+            padding-left: 10px;
+            display: flex;
+            align-items: center;
+
+            .ant-upload-picture-card-wrapper{
+                padding-top: 10px;
+            }
+        }
+        .ant-divider-horizontal {
+            display: none;
+        }
+    }
+    .ant-upload-list-picture-card {
+        min-height: 112px;
+    }
+}

package/lib/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/style/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _stringUtil = _interopRequireDefault(require("../../@vortex-ui/env-puzzle/typings/src/utils/string-util"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// todo: 这里可以使用环境变量等更优雅的方法
+var iframeEnv = _stringUtil["default"].getUrlParam('iframeEnv') || 'darkGreen';
+var themeList = ['darkGreen'];
+themeList.forEach(function (item) {
+  if (iframeEnv === item) {
+    document.body.className = 'darkGreen';
+
+    require('./darkGreen.less');
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["iframeEnv","StringUtil","getUrlParam","themeList","forEach","item","document","body","className","require"],"sources":["style/index.js"],"sourcesContent":["import StringUtil from '../../@vortex-ui/env-puzzle/typings/src/utils/string-util';\n// todo: 这里可以使用环境变量等更优雅的方法\nconst iframeEnv = StringUtil.getUrlParam('iframeEnv') || 'darkGreen';\nconst themeList = ['darkGreen'];\nthemeList.forEach((item) => {\n    if (iframeEnv === item) {\n        document.body.className = 'darkGreen';\n        require('./darkGreen.less');\n    }\n});\n"],"mappings":";;AAAA;;;;AACA;AACA,IAAMA,SAAS,GAAGC,sBAAA,CAAWC,WAAX,CAAuB,WAAvB,KAAuC,WAAzD;AACA,IAAMC,SAAS,GAAG,CAAC,WAAD,CAAlB;AACAA,SAAS,CAACC,OAAV,CAAkB,UAACC,IAAD,EAAU;EACxB,IAAIL,SAAS,KAAKK,IAAlB,EAAwB;IACpBC,QAAQ,CAACC,IAAT,CAAcC,SAAd,GAA0B,WAA1B;;IACAC,OAAO,CAAC,kBAAD,CAAP;EACH;AACJ,CALD"}

package/lib/template/index.d.ts

@@ -1,6 +1,7 @@
 import InternalTemplate from './template';
 import InternalCard from './card';
 import Field from './field';
+import '../style/index';
 declare type InternalCardT = typeof InternalCard;
 declare type InternalTemplateT = typeof InternalTemplate;
 interface CardI extends InternalCardT {

package/lib/template/index.js

@@ -11,6 +11,8 @@ var _card = _interopRequireDefault(require("./card"));
 
 var _field = _interopRequireDefault(require("./field"));
 
+require("../style/index");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // 在 `Card` 组件中绑定 `Field`

package/lib/template/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Card","InternalCard","Field","Template","InternalTemplate"],"sources":["template/index.js"],"sourcesContent":["import InternalTemplate from './template';\nimport InternalCard from './card';\nimport Field from './field';\n// 在 `Card` 组件中绑定 `Field`\nconst Card = InternalCard;\nCard.Field = Field;\n// 在 `Template 组件中绑定 `Card`\nconst Template = InternalTemplate;\nTemplate.Card = Card;\nexport default Template;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AACA;AACA,IAAMA,IAAI,GAAGC,gBAAb;AACAD,IAAI,CAACE,KAAL,GAAaA,iBAAb,C,CACA;;AACA,IAAMC,QAAQ,GAAGC,oBAAjB;AACAD,QAAQ,CAACH,IAAT,GAAgBA,IAAhB;eACeG,Q"}
+{"version":3,"file":"index.js","names":["Card","InternalCard","Field","Template","InternalTemplate"],"sources":["template/index.js"],"sourcesContent":["import InternalTemplate from './template';\nimport InternalCard from './card';\nimport Field from './field';\nimport '../style/index';\n// 在 `Card` 组件中绑定 `Field`\nconst Card = InternalCard;\nCard.Field = Field;\n// 在 `Template 组件中绑定 `Card`\nconst Template = InternalTemplate;\nTemplate.Card = Card;\nexport default Template;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AACA;AACA,IAAMA,IAAI,GAAGC,gBAAb;AACAD,IAAI,CAACE,KAAL,GAAaA,iBAAb,C,CACA;;AACA,IAAMC,QAAQ,GAAGC,oBAAjB;AACAD,QAAQ,CAACH,IAAT,GAAgBA,IAAhB;eACeG,Q"}

package/lib/template/style/index.css

@@ -45,6 +45,12 @@
       -ms-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.env-template .ant-pagination-item-active {
+  background: #1890ff;
+}
+.env-template .ant-pagination-item-active a {
+  color: #fff;
+}
 .env-template-table-wrap {
   height: 100%;
   display: -webkit-box;

package/lib/template/style/table.css

@@ -1,3 +1,9 @@
+.env-template .ant-pagination-item-active {
+  background: #1890ff;
+}
+.env-template .ant-pagination-item-active a {
+  color: #fff;
+}
 .env-template-table-wrap {
   height: 100%;
   display: -webkit-box;

package/lib/template/style/table.less

@@ -1,11 +1,21 @@
 @import (reference) '~antd/lib/style/themes/index.less';
+
 @prefix-cls: env-template;
+.@{prefix-cls} {
+    .ant-pagination-item-active {
+        background: @primary-color;
+        a {
+            color: #fff;
+        }
+    }
+}
 
 .@{prefix-cls}-table-wrap {
     height: 100%;
     display: flex;
     flex-direction: column;
 }
+
 .@{prefix-cls}-card-wrap {
     flex: 1;
     height: 0;
@@ -18,7 +28,6 @@
         background-color: rgba(0, 0, 0, 0.05);
         border-radius: 3px;
     }
-
     .@{prefix-cls}-card-list-empty {
         margin-top: 200px;
     }
@@ -43,12 +52,10 @@
     flex: 1;
     &-action-btn {
         padding: 0;
-
         > span + .anticon-down {
             margin-left: 0;
         }
     }
-
     &-action-btn + &-action-btn {
         // margin-left: 8px;
     }
@@ -56,13 +63,11 @@
         .ant-popover-inner-content {
             padding: 0;
         }
-
         .ant-list-item {
             padding: 6px 28px;
             cursor: pointer;
         }
     }
-
     &-pagination {
         display: flex;
         justify-content: flex-end;
@@ -71,9 +76,9 @@
         height: 32px;
         box-sizing: content-box;
     }
-
     &-total-number {
         font-weight: 400;
         color: #5f5f5f;
     }
 }
+

package/lib/view-modal/index.d.ts

@@ -1,2 +1,3 @@
 import ViewModal from './view-modal';
+import '../style/index';
 export default ViewModal;

package/lib/view-modal/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _viewModal = _interopRequireDefault(require("./view-modal"));
 
+require("../style/index");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = _viewModal["default"];

package/lib/view-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ViewModal"],"sources":["view-modal/index.js"],"sourcesContent":["import ViewModal from './view-modal';\nexport default ViewModal;\n"],"mappings":";;;;;;;AAAA;;;;eACeA,qB"}
+{"version":3,"file":"index.js","names":["ViewModal"],"sources":["view-modal/index.js"],"sourcesContent":["import ViewModal from './view-modal';\nimport '../style/index';\nexport default ViewModal;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;eACeA,qB"}

package/lib/view-modal/style/index.css

@@ -1,3 +1,41 @@
+.green .ant-modal-body {
+  padding: 0;
+}
+.green .ant-modal-body .ant-form-item-control-input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.green .ant-modal-body .ant-form-item-control-input .ant-form-item-control-input-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.env-view-modal .ant-modal-body {
+  padding: 0;
+}
+.env-view-modal .ant-modal-body .ant-form-item-control-input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.env-view-modal .ant-modal-body .ant-form-item-control-input .ant-form-item-control-input-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .env-view-modal-title {
   font-weight: 400;
   color: #595959;

package/lib/view-modal/style/index.less

@@ -1,6 +1,21 @@
 @import (reference) '~antd/lib/style/themes/index.less';
 
+.green {
+    .ant-modal-body {
+        padding: 0;
+        .ant-form-item-control-input{
+            display: flex;
+            align-items: center;
+            .ant-form-item-control-input-content{
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
+
 .env-view-modal {
+    .green();
     &-title {
         font-weight: 400;
         color: @comment-action-hover-color;

package/lib/view-modal/view-modal.js

@@ -177,13 +177,14 @@ var ViewModal = function ViewModal(props) {
         return _vtxModal["default"].size.small;
 
       case 'middle':
-        return _vtxModal["default"].size.middle;
+        // return VtxModal.size.middle;
+        return 900;
 
       case 'large':
         return _vtxModal["default"].size.large;
 
       default:
-        return _vtxModal["default"].size.middle;
+        return 900;
     }
   };
 
@@ -200,7 +201,15 @@ var ViewModal = function ViewModal(props) {
     style: {
       width: "100%"
     }
-  }, renderFieldItem(children)));
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'left-border'
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'right-border'
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'top-border'
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'bottom-border'
+  }), renderFieldItem(children)));
 };
 
 var _default = ViewModal;