@zat-design/sisyphus-react 3.1.5 → 3.2.0-beta.2

package/dist/index.esm.css

@@ -283,7 +283,7 @@
 .pro-layout-open-menu .ant-menu-root > .ant-menu-item-only-child {
   min-height: 48px;
   padding-top: 12px;
-  padding-bottom: 12px;
+  padding-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1) - var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1));
   margin: 0;
   height: auto;
 }
@@ -331,8 +331,7 @@
   line-height: initial !important;
   height: auto !important;
   margin: 0;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding-top: 12px 0;
   min-height: 48px;
 }
 .pro-layout-open-menu .ant-menu-title-content div {
@@ -676,14 +675,14 @@
   display: none !important;
 }
 .pro-collapse.ant-collapse .pro-collapse-panel {
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-collapse .ant-collapse-header {
   -webkit-box-align: center !important;
   -webkit-align-items: center !important;
       -ms-flex-align: center !important;
           align-items: center !important;
-  padding: 14px var(--zaui-space-size-md, 16px) !important;
+  padding: 12px var(--zaui-space-size-md, 16px) !important;
   background: var(--zaui-area, #fafafa);
 }
 .pro-collapse .ant-collapse-header-text {
@@ -711,7 +710,7 @@
   background: var(--zaui-base-bg, #ffffff);
 }
 .pro-collapse.pro-collapse-level2 .ant-collapse-header {
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
   padding: 0 !important;
   background: var(--zaui-base-bg, #ffffff);
 }
@@ -786,7 +785,7 @@
   font-size: var(--zaui-font-size, 14px);
 }
 .pro-collapse.pro-collapse-list .ant-descriptions {
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-footer {
   position: fixed;
@@ -799,17 +798,37 @@
           box-shadow: 3px 2px 12px 0 hsla(0, 0%, 59.2%, 0.32);
   z-index: 101;
 }
+.back-button-container.ant-btn {
+  color: var(--zaui-text);
+  font-weight: 400;
+  background: var(--zaui-disabled-bg);
+  border: none;
+}
+.back-button-container.ant-btn:hover {
+  color: var(--zaui-aide-text);
+  background: var(--zaui-disabled-bg);
+  border: none;
+}
+.back-button-container.ant-btn:active,
+.back-button-container.ant-btn:focus {
+  color: var(--zaui-text);
+  font-weight: 400;
+  background: var(--zaui-disabled-bg);
+}
 .pro-header {
   background-color: var(--zaui-base-bg, #ffffff);
-  padding: var(--zaui-space-size-lg, 32px) 0 0 0;
+  padding: 24px 0 0 0;
 }
 .pro-header.pro-header-no-back .pro-header-top {
   padding-left: 0;
 }
+.pro-header.pro-header-no-back .pro-header-left.pro-header-left-space {
+  margin-left: 0 !important;
+}
 .pro-header.pro-header-no-describe {
   -webkit-box-shadow: none;
           box-shadow: none;
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-header.pro-header-no-describe .pro-header-title,
 .pro-header.pro-header-no-describe .pro-header-top {
@@ -817,7 +836,7 @@
   margin: 0;
 }
 .pro-header.pro-header-fixed.pro-header-no-describe .pro-header-top {
-  padding-bottom: 12px;
+  padding-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1) - var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1));
 }
 .pro-header .pro-header-describe a {
   color: var(--zaui-link, #006AFF);
@@ -906,7 +925,7 @@
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-bottom: var(--zaui-space-size-sm, 8px);
+  margin-bottom: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
   padding: 0 var(--zaui-space-size-md, 16px);
 }
 .pro-header .pro-header-top .pro-header-left {
@@ -1064,7 +1083,7 @@
 .pro-header .pro-header-nav ul li {
   margin-right: 52px;
   margin-top: 4px;
-  margin-bottom: 12px;
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-header .pro-header-nav ul li:last-child {
   margin-right: 0;
@@ -1096,9 +1115,9 @@
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
-  font-size: 14px;
+  font-size: var(--zaui-font-size, 14px);
   padding: 0 var(--zaui-space-size-md, 16px);
-  padding-bottom: 12px;
+  padding-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1) - var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1));
 }
 .pro-header .pro-header-describe li {
   margin-left: var(--zaui-space-card, 32px);
@@ -1481,7 +1500,6 @@
   color: #ff5050;
   font-weight: 600;
   font-size: var(--aui-font-size-sm, 12px);
-  font-family: PingFangSC-Semibold, PingFang SC;
   border-radius: 8px;
 }
 .pro-step.open {
@@ -1520,7 +1538,7 @@
   text-shadow: none;
 }
 .pro-tabs .pro-tabs-card .pro-tabs-card-left .pro-tabs-card-left-total {
-  font-size: 26px;
+  font-size: var(--zaui-font-size-lg-title, 24px);
   font-weight: 600;
   color: var(--zaui-text, #343434);
 }
@@ -1600,6 +1618,15 @@
 .pro-table .custom-column-btn .anticon {
   height: 16px;
 }
+.pro-table .ant-table-body .ant-table-cell .varied-cell {
+  margin-left: -8px;
+  background: var(--zaui-contract-bg, #fffaa1);
+  padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-sm, 8px);
+  border-radius: var(--zaui-border-radius, 4px);
+}
+.pro-table .ant-table-body .varied-cell.empty-cell {
+  width: 24.5px;
+}
 .pro-table .copyable-table-cell .ant-typography {
   margin-bottom: 0;
   display: -webkit-box;
@@ -1673,7 +1700,7 @@
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-table .column-config .right-actions {
   display: -webkit-box;
@@ -1882,15 +1909,15 @@ div.pro-textarea-view .ant-input-disabled {
 }
 div.pro-textarea-view::after {
   display: none;
-  padding-bottom: 11px;
+  padding-bottom: 12px;
 }
 .pro-form-list-block-title {
   height: 14px;
-  margin: 3px 0;
-  padding-left: 7px;
+  margin: calc(var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1)) 0;
+  padding-left: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
   font-weight: 600;
   line-height: 14px;
-  border-left: 4px solid #006aff;
+  border-left: 4px solid var(--zaui-brand, #006aff);
 }
 .pro-form-list {
   display: -webkit-box;
@@ -1906,10 +1933,10 @@ div.pro-textarea-view::after {
 .pro-form-list .single-delete {
   width: 14px !important;
   height: 14px !important;
-  color: #939599;
+  color: var(--zaui-placeholder, #a0a0a0);
 }
 .pro-form-list .single-delete:hover {
-  color: #8f8c8c;
+  color: var(--zaui-aide-text, #909090);
 }
 .pro-form-list:nth-child(1) {
   -webkit-box-flex: 1;
@@ -1921,7 +1948,7 @@ div.pro-textarea-view::after {
   padding-bottom: var(--zaui-height-size-md, 16px);
 }
 .pro-form-list .pro-form-list-action > .ant-space-item:first-child > .ant-btn-link {
-  margin-left: 8px;
+  margin-left: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
 }
 .pro-form-list .pro-form-list-drag-handle {
   display: -webkit-box;
@@ -1932,8 +1959,8 @@ div.pro-textarea-view::after {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  height: calc(var(--zaui-height-size-lg, 32px) * var(--zaui-size, 1));
-  margin-bottom: 22px;
+  height: 32px;
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
   padding: 0;
   padding-right: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
   border: none;
@@ -1946,14 +1973,14 @@ div.pro-textarea-view::after {
 }
 .pro-form-list-toolbar .ant-btn-link,
 .pro-form-list-action .ant-btn-link {
-  padding: 4px 0;
+  padding: calc(var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1)) 0;
 }
 .pro-form-list-toolbar .ant-btn-text:hover,
 .pro-form-list-action .ant-btn-text:hover {
   background: transparent;
 }
 .ant-form-item-has-error .ant-picker-status-error ~ .forever-checkbox:not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
-  background: #fff;
+  background: var(--zaui-base-bg, #ffffff);
   border-color: var(--ant-error-color);
 }
 .ant-form-item-has-error .forever-checkbox:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus {
@@ -1963,6 +1990,29 @@ div.pro-textarea-view::after {
   -webkit-box-shadow: 0 0 0 2px var(--ant-error-color-outline);
           box-shadow: 0 0 0 2px var(--ant-error-color-outline);
 }
+span.ant-input-group-compact.pro-time-limit,
+span.ant-input-group-compact.pro-range-limit {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+span.ant-input-group-compact.pro-time-limit .ant-picker,
+span.ant-input-group-compact.pro-range-limit .ant-picker {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.ant-input-group-compact.pro-time-limit .forever-checkbox,
+span.ant-input-group-compact.pro-range-limit .forever-checkbox {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0;
+      -ms-flex: 0;
+          flex: 0;
+  min-width: unset;
+  white-space: nowrap;
+}
 .pro-address {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1995,7 +2045,7 @@ div.pro-textarea-view::after {
   text-align: center !important;
 }
 .pro-number-range .ant-input-status-error.range-split {
-  border-color: #ff4d4f;
+  border-color: var(--zaui-danger, #ff5050);
 }
 .pro-number-range .ant-input-rtl.range-right {
   border-right-width: 0;
@@ -2075,7 +2125,7 @@ div.pro-textarea-view::after {
 .pro-modal-select .ant-input-group-wrapper:hover .close-icon > span,
 .pro-tree-modal .ant-input-group-wrapper:hover .close-icon > span {
   position: relative;
-  font-size: var(--zaui-font-size-sm, 12px);
+  font-size: var(--zaui-font-size, 14px);
   border: none;
   border-radius: 50%;
 }
@@ -2103,7 +2153,7 @@ div.pro-textarea-view::after {
 .pro-tree-modal .trigger-no-hover:hover .ant-input,
 .pro-modal-select .trigger-no-hover:hover .ant-input-group-addon,
 .pro-tree-modal .trigger-no-hover:hover .ant-input-group-addon {
-  border-color: #d9d9d9;
+  border-color: var(--zaui-form-control-line, #DCDCDC);
 }
 .pro-modal-select .pro-modal-select-init,
 .pro-tree-modal .pro-modal-select-init {
@@ -2117,7 +2167,7 @@ div.pro-textarea-view::after {
 }
 .pro-modal-select .ant-input-group-addon,
 .pro-tree-modal .ant-input-group-addon {
-  padding: 0px var(--zaui-space-size-md, 8px);
+  padding: 0px var(--zaui-space-size-sm, 8px);
   background-color: var(--zaui-base-bg, #ffffff);
   cursor: pointer;
 }
@@ -2257,7 +2307,7 @@ div.pro-textarea-view::after {
 }
 .pro-enum-select .close-icon {
   position: relative;
-  margin-left: -31px;
+  margin-left: calc(0px - calc(var(--zaui-space-size-lg, 32px) * var(--zaui-size, 1)));
   margin-right: var(--zaui-space-size-md, 14px);
   color: #FFFFFF;
   height: 12px;
@@ -2281,7 +2331,6 @@ div.pro-textarea-view::after {
 }
 .pro-enum-select .close-icon > span {
   position: relative;
-  font-size: 8px;
   border: none;
   border-radius: 50%;
 }
@@ -2310,7 +2359,7 @@ div.pro-textarea-view::after {
 .pro-enum-select-modal .ant-table-thead > tr > th {
   border: 0;
   white-space: nowrap;
-  background-color: #F6F7F8;
+  background-color: var(--zaui-table-header-bg, #f2f3f5);
 }
 .pro-enum-select-modal .ant-table-thead > tr > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
   height: 0;
@@ -2329,7 +2378,7 @@ div.pro-textarea-view::after {
   background-color: var(--zaui-base-bg);
 }
 .pro-enum-select-modal .ant-table-tbody tr:nth-child(2n) > td {
-  background-color: #FAFAFA;
+  background-color: var(--zaui-table-strip-bg, #fafafa);
 }
 .pro-enum-select-modal .ant-table-tbody > .ant-table-placeholder > td {
   background-color: var(--zaui-base-bg);
@@ -2337,14 +2386,14 @@ div.pro-textarea-view::after {
 .pro-enum-select-modal .ant-table-tbody > tr:hover:not(.ant-table-expanded-row, .ant-table-placeholder) > td,
 .pro-enum-select-modal .ant-table-tbody .ant-table-row-hover,
 .pro-enum-select-modal .ant-table-tbody .ant-table-row-hover > td {
-  background: #FAFAFA;
+  background: var(--zaui-table-hover-bg, #fafafa);
 }
 .pro-enum-select-modal .ant-table-fixed .ant-table-row-hover,
 .pro-enum-select-modal .ant-table-fixed .ant-table-row-hover > td {
-  background: #FAFAFA;
+  background: var(--zaui-table-hover-bg, #fafafa);
 }
 .pro-enum-select-modal .ant-table-fixed-header .ant-table-tbody tr:nth-child(n) > td {
-  background-color: #FAFAFA;
+  background-color: var(--zaui-table-strip-bg, #fafafa);
 }
 .pro-enum-select-modal .ant-table-fixed-header .ant-table-tbody tr:nth-child(2n) > td {
   background-color: var(--zaui-base-bg);
@@ -2353,7 +2402,35 @@ div.pro-textarea-view::after {
   padding-bottom: 0;
 }
 .pro-enum-select-modal .ant-modal-footer {
-  padding: 16px;
+  padding: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
+}
+.pro-form.ant-form-vertical .ant-form-item .ant-form-item-label {
+  -webkit-box-flex: 0 !important;
+  -webkit-flex: none !important;
+      -ms-flex: none !important;
+          flex: none !important;
+}
+.pro-form.ant-form-vertical .pro-form-custom-footer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 0;
+  height: auto;
+  padding-top: 6px;
+}
+.pro-form.ant-form-vertical .pro-form-custom-footer .ant-space-align-center {
+  -webkit-box-align: normal;
+  -webkit-align-items: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+.pro-form.ant-form {
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-form .pro-collapse-level2 .ant-collapse-item {
   margin-bottom: 0 !important;
@@ -2405,32 +2482,35 @@ div.pro-textarea-view::after {
           transform: rotate(-90deg);
 }
 .pro-form .ant-form-item {
-  margin-bottom: 22px !important;
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1)) !important;
+}
+.pro-form .ant-form-item.pro-form-item-width-auto .ant-form-item-control-input {
+  -webkit-box-flex: inherit;
+  -webkit-flex-grow: inherit;
+      -ms-flex-positive: inherit;
+          flex-grow: inherit;
+}
+.pro-form .ant-form-item.pro-form-item-width-auto .ant-form-item-control-input-content {
+  -webkit-box-flex: initial;
+  -webkit-flex: initial;
+      -ms-flex: initial;
+          flex: initial;
 }
 .pro-form .ant-form-item .ant-form-item-tooltip svg {
   width: 14px;
   height: 14px;
   vertical-align: bottom;
-  fill: #909090;
+  fill: var(--zaui-aide-text, #909090);
 }
 .pro-form .ant-form-item.pro-form-item-changed span.ant-input-affix-wrapper,
 .pro-form .ant-form-item.pro-form-item-changed .ant-select-selector,
 .pro-form .ant-form-item.pro-form-item-changed .ant-picker {
-  background: #fffaa1;
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .ant-form-item.pro-form-item-changed span.ant-input-affix-wrapper input,
 .pro-form .ant-form-item.pro-form-item-changed .ant-select-selector input,
 .pro-form .ant-form-item.pro-form-item-changed .ant-picker input {
-  background: #fffaa1;
-}
-.pro-form .ant-form-item.pro-form-item-changed #switch {
-  background: #bfbfbf;
-}
-.pro-form .ant-form-item.label-width .ant-form-item-label {
-  width: auto !important;
-  max-width: -webkit-fit-content !important;
-  max-width: -moz-fit-content !important;
-  max-width: fit-content !important;
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .ant-form-item .ant-row {
   width: 100%;
@@ -2455,169 +2535,32 @@ div.pro-textarea-view::after {
 }
 .pro-form .ant-form-item .pro-number-range .range-right .range-right {
   width: 100%;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--zaui-form-control-line, #DCDCDC);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 .pro-form .ant-form-item-hidden {
   display: none;
 }
-.pro-form.mode-view .ant-input[disabled] {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-input-disabled {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-picker.ant-picker-disabled {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-picker-input > input[disabled] {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-picker-suffix {
-  display: none;
-}
-.pro-form.mode-view .ant-input-textarea.ant-input-textarea-show-count::after {
-  display: none;
-}
-.pro-form.mode-view .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-select-arrow {
-  display: none;
-}
-.pro-form.mode-view .ant-upload.ant-upload-disabled {
-  display: none;
-}
-.pro-form.mode-view .ant-switch-loading,
-.pro-form.mode-view .ant-switch-disabled {
-  background-color: #fff;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-switch-loading .ant-switch-inner,
-.pro-form.mode-view .ant-switch-disabled .ant-switch-inner {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-}
-.pro-form.mode-view .ant-switch-loading .ant-switch-handle,
-.pro-form.mode-view .ant-switch-disabled .ant-switch-handle {
-  display: none;
-}
-.pro-form.mode-view .ant-radio-wrapper.ant-radio-wrapper-checked.ant-radio-wrapper-disabled {
-  display: block;
-}
-.pro-form.mode-view .ant-radio-wrapper.ant-radio-wrapper-checked.ant-radio-wrapper-disabled .ant-radio.ant-radio-checked.ant-radio-disabled {
-  display: none;
-}
-.pro-form.mode-view .ant-radio-wrapper.ant-radio-wrapper-checked.ant-radio-wrapper-disabled > span {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-  position: relative;
-  top: -3px;
-}
-.pro-form.mode-view .ant-radio-wrapper.ant-radio-wrapper-disabled {
-  display: none;
-}
-.pro-form.mode-view .ant-checkbox-wrapper.ant-checkbox-wrapper-checked.ant-checkbox-wrapper-disabled {
-  display: block;
-}
-.pro-form.mode-view .ant-checkbox-wrapper.ant-checkbox-wrapper-checked.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-checked.ant-checkbox-disabled {
-  display: none;
-}
-.pro-form.mode-view .ant-checkbox-wrapper.ant-checkbox-wrapper-checked.ant-checkbox-wrapper-disabled > span {
-  color: #333;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-  cursor: default;
-  opacity: 1;
-  position: relative;
-  top: -3px;
-}
-.pro-form.mode-view .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled {
-  display: none;
-}
-.pro-form.mode-view .ant-form-item-has-error .ant-form-item-explain.ant-form-item-explain-error {
-  display: none;
-}
-.pro-form.mode-view ::-webkit-input-placeholder {
-  font-size: 0px;
-}
-.pro-form.mode-view ::-moz-placeholder {
-  font-size: 0px;
-}
-.pro-form.mode-view :-ms-input-placeholder {
-  font-size: 0px;
-}
-.pro-form.mode-view ::-ms-input-placeholder {
-  font-size: 0px;
-}
-.pro-form.mode-view ::placeholder {
-  font-size: 0px;
-}
-.pro-form.mode-view .ant-input-affix-wrapper-disabled {
-  background-color: transparent;
-  border: none;
-}
-.pro-form.mode-view .ant-select-selection-placeholder {
-  display: none;
-}
-.pro-form.mode-view .ant-input-suffix {
-  display: none;
-}
 .pro-form .ant-form-item-label > label {
   white-space: pre-wrap;
 }
 .pro-form .suffix-value {
-  margin-left: 8px;
+  margin-left: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
 }
 .pro-form .ant-form-item-has-error .group-separator {
   color: var(--ant-error-color);
   border-color: var(--ant-error-color);
 }
 .pro-form .ant-form-item-has-error .site-input-split {
-  border-color: #ff4d4f;
+  border-color: var(--zaui-danger, #ff5050);
 }
 .pro-form .site-input-group-wrapper .site-input-split {
   text-align: center;
-  background-color: #fafafa;
+  background-color: var(--zaui-table-strip-bg, #fafafa);
 }
 .pro-form .site-input-group-wrapper .site-input-split.site-input-split-disabled {
-  background-color: #f2f2f2;
+  background-color: var(--zaui-disabled-bg, #f2f2f2);
 }
 .pro-form .site-input-group-wrapper .site-input-right {
   border-left-width: 0;
@@ -2675,8 +2618,8 @@ div.pro-textarea-view::after {
   display: flex;
 }
 .pro-form .noDisabled {
-  color: #333;
-  font-size: 14px;
+  color: var(--zaui-disabled-text, #333333);
+  font-size: var(--zaui-font-size, 14px);
   background-color: transparent;
   border: none;
   cursor: default;
@@ -2751,7 +2694,7 @@ div.pro-textarea-view::after {
 }
 .pro-upload .pro-upload-dragger .pro-upload-handle-box .drag-upload-inner .upload-dragger-control .dragger-txt-line1 .dragger-txt {
   margin-left: 9px;
-  font-size: 14px;
+  font-size: var(--zaui-font-size, 14px);
   color: rgba(0, 0, 0, 0.85);
   line-height: 20px;
 }
@@ -2761,7 +2704,7 @@ div.pro-textarea-view::after {
 .pro-upload .pro-upload-dragger .pro-upload-handle-box .drag-upload-inner .upload-dragger-control .file-ext {
   text-align: center;
   margin-top: 10px;
-  font-size: 12x;
+  font-size: var(--zaui-font-size-sm, 12px);
   color: #939599;
   line-height: 14px;
 }
@@ -2852,7 +2795,7 @@ div.pro-textarea-view::after {
 .pro-upload .pro-upload-button .upload-tip-txt {
   margin-left: 10px;
   line-height: 32px;
-  font-size: 12px;
+  font-size: var(--zaui-font-size-sm, 12px);
   color: #939599;
 }
 .pro-upload .pro-upload-image {
@@ -2885,7 +2828,7 @@ div.pro-textarea-view::after {
 .pro-upload .pro-upload-image .file-item-image {
   position: relative;
   height: 126px;
-  width: 126px ;
+  width: 126px;
   border: 1px dashed #d9d9d9;
   overflow: hidden;
   border-radius: 8px;
@@ -2949,7 +2892,7 @@ div.pro-textarea-view::after {
 }
 .pro-upload .pro-upload-image .file-item-image .actions-wrap .action-item {
   color: #fff;
-  font-size: 12px;
+  font-size: var(--zaui-font-size-sm, 12px);
   opacity: 0.8;
 }
 .pro-upload .pro-upload-image .file-item-image .actions-wrap .action-item .action-icon {
@@ -3144,14 +3087,14 @@ div.pro-textarea-view::after {
       -ms-flex-direction: row;
           flex-direction: row;
   height: 482px;
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-tree-modal-content .ant-tree-checkbox {
   margin-top: 2px;
 }
 .pro-tree-modal-content .ant-tree-switcher {
-  width: var(--zaui-font-size-xxl, 20px);
-  line-height: var(--zaui-font-size-xxl, 20px);
+  width: 20px;
+  line-height: 20px;
 }
 .pro-tree-modal-content .ant-tree-treenode {
   width: 100%;
@@ -3159,12 +3102,11 @@ div.pro-textarea-view::after {
   padding-bottom: var(--zaui-font-size-sm, 12px);
   color: var(--zaui-text);
   font-size: var(--zaui-font-size, 14px);
-  font-family: PingFangSC-Regular, PingFang SC;
-  line-height: var(--zaui-font-size-xxl, 20px);
+  line-height: 20px;
 }
 .pro-tree-modal-content .ant-tree-node-content-wrapper {
-  min-height: var(--zaui-font-size-xxl, 20px);
-  line-height: var(--zaui-font-size-xxl, 20px);
+  min-height: 20px;
+  line-height: 20px;
 }
 .pro-tree-modal-content .ant-tree-node-content-wrapper {
   width: 100%;
@@ -3183,8 +3125,7 @@ div.pro-textarea-view::after {
   height: 100%;
   color: var(--zaui-text);
   font-size: var(--zaui-font-size, 14px);
-  font-family: PingFangSC-Regular, PingFang SC;
-  line-height: var(--zaui-font-size-xxl, 20px);
+  line-height: 20px;
   border: 1px solid #e6e6e6;
   border-radius: var(--zaui-border-radius, 4px);
   /* 修改滚动条样式 */
@@ -3294,8 +3235,8 @@ div.pro-textarea-view::after {
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin-bottom: var(--zaui-font-size-sm, 12px);
-  line-height: var(--zaui-font-size-xxl, 20px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
+  line-height: 20px;
   cursor: pointer;
 }
 .pro-tree-modal-checkbox-content-look {
@@ -3368,18 +3309,17 @@ div.pro-textarea-view::after {
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
-  height: var(--zaui-font-size-xxl, 20px);
+  height: 20px;
   margin-right: var(--zaui-space-size-sm, 8px);
   padding: 0 var(--zaui-space-size-xs);
   font-weight: 400;
-  font-family: PingFangSC-Regular, PingFang SC;
-  line-height: var(--zaui-font-size-lg-title);
+  line-height: 24px;
   white-space: nowrap;
   border-radius: var(--zaui-border-radius-card);
 }
 .pro-tree-modal-tree-node-tag span {
   font-size: var(--zaui-font-size-sm, 12px);
-  line-height: var(--zaui-font-size-xxl, 20px);
+  line-height: 20px;
   text-align: center;
   -webkit-transform: scale(0.83, 0.83);
           transform: scale(0.83, 0.83);
@@ -3401,7 +3341,6 @@ div.pro-textarea-view::after {
   color: #939599;
   font-weight: 400;
   font-size: var(--zaui-font-size, 14px);
-  font-family: PingFangSC-Regular, PingFang SC;
 }
 .pro-transfer-right .checked-item {
   margin: var(--zaui-space-size-sm, 8px) 0;
@@ -3423,7 +3362,7 @@ div.pro-textarea-view::after {
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 100%;
-  height: var(--zaui-space-size-lg, 32px);
+  height: 32px;
   padding: 2px var(--zaui-space-size-sm, 8px);
   color: var(--zaui-text, #343434);
   font-size: var(--zaui-font-size, 14px);
@@ -3432,7 +3371,7 @@ div.pro-textarea-view::after {
   border-radius: var(--zaui-border-radius, 4px);
 }
 .pro-transfer-right .checked-item .ant-tag .drag-icon {
-  height: var(--zaui-font-size-xxl, 20px);
+  height: 20px;
   margin-right: var(--zaui-space-size-xs, 4px);
   cursor: move;
 }
@@ -3444,7 +3383,7 @@ div.pro-textarea-view::after {
   max-width: calc(100% - 42px);
 }
 .pro-transfer-right .checked-item .ant-tag .disabled-icon {
-  height: var(--zaui-font-size-xxl, 20px);
+  height: 20px;
   margin-right: var(--zaui-space-size-xs, 4px);
 }
 .pro-transfer-right .checked-item .ant-tag .anticon-close {
@@ -3479,7 +3418,7 @@ div.pro-textarea-view::after {
   color: #939499;
 }
 .pro-tree .pro-tree-search {
-  margin-bottom: var(--zaui-space-size-sm);
+  margin-bottom: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
 }
 .pro-tree-content {
   display: -webkit-box;
@@ -3541,13 +3480,14 @@ div.pro-textarea-view::after {
   -webkit-align-items: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
+  cursor: pointer;
 }
 .pro-tree-content .tree-title-box .expand-button.expand .expand-icon .anticon-caret-down {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
 .pro-tree-content .tree-title-box .expand-button .expand-icon {
-  font-size: 12px;
+  font-size: var(--zaui-font-size-sm, 12px);
   margin-right: var(--zaui-space-size-xs);
 }
 .pro-tree-content .ant-tree-checkbox {
@@ -3570,8 +3510,8 @@ div.pro-textarea-view::after {
   font-size: var(--zaui-font-size);
 }
 .pro-tree-content .ant-tree-node-content-wrapper {
-  min-height: var(--zaui-font-size-xxl);
-  line-height: var(--zaui-font-size-xxl);
+  min-height: 20px;
+  line-height: 20px;
 }
 .pro-tree-content .ant-tree-node-content-wrapper {
   width: 100%;
@@ -3626,7 +3566,7 @@ div.pro-textarea-view::after {
   left: 0px;
   background-color: var(--zaui-brand);
   opacity: 0.1;
-  z-index: 0;
+  z-index: -1;
   border-radius: var(--zaui-space-size-xs);
 }
 .pro-tree-tree-node .tree-node-show-text {
@@ -3673,7 +3613,7 @@ div.pro-textarea-view::after {
   margin-left: var(--zaui-space-size-xs);
 }
 .pro-tree-tree-node .operate-tree-node-btns .icon-add {
-  font-size: 12px;
+  font-size: var(--zaui-font-size-sm, 12px);
 }
 .pro-tree-tree-node .operate-tree-node-btns .svg-icon-expand {
   margin-bottom: -2px;
@@ -3702,10 +3642,10 @@ div.pro-textarea-view::after {
   font-weight: 400;
   line-height: 24px;
   white-space: nowrap;
-  border-radius: 2px;
+  border-radius: var(--zaui-border-radius-card);
 }
 .pro-tree-tree-node-tag span {
-  font-size: 12px;
+  font-size: var(--zaui-font-size-sm, 12px);
   line-height: 20px;
   text-align: center;
   -webkit-transform: scale(0.83, 0.83);
@@ -3794,9 +3734,9 @@ div.pro-textarea-view::after {
   background-color: inherit;
 }
 .pro-form.pro-form-view .ant-form-item .pro-tree * {
-  line-height: 1!important;
-  height: auto!important;
-  min-height: auto!important;
+  line-height: 1 !important;
+  height: auto !important;
+  min-height: auto !important;
 }
 .pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox {
   margin-top: var(--zaui-space-size-sm);
@@ -3805,7 +3745,7 @@ div.pro-textarea-view::after {
   padding-top: var(--zaui-font-size-sm);
 }
 .pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox * {
-  height: 16px!important;
+  height: 16px !important;
 }
 .pro-drawer .pro-drawer-close {
   position: absolute;
@@ -3945,7 +3885,7 @@ div.pro-textarea-view::after {
   overflow: auto;
 }
 .pro-modal-no-footer .ant-modal-content .ant-modal-body {
-  padding-bottom: var(--zaui-space-size-md, 16px);
+  padding-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-modal-scrolling {
   z-index: 1;
@@ -4087,6 +4027,10 @@ div.pro-textarea-view::after {
 .pro-edit-table .ant-table-content > table .ant-table-summary .ant-table-cell-fix-right {
   background-color: var(--zaui-table-header-bg, #f2f3f5);
 }
+.pro-edit-table .ant-table-content > table .ant-table-cell-fix-right-first::after {
+  -webkit-box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+          box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+}
 .pro-edit-table .ant-table-content > table th.ant-table-selection-column {
   width: 48px;
 }
@@ -4177,7 +4121,7 @@ div.pro-textarea-view::after {
   width: auto;
 }
 .pro-edit-table-header {
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .pro-edit-table-toolbar-fixed {
   position: absolute;
@@ -4271,10 +4215,10 @@ div.pro-textarea-view::after {
   font-size: var(--zaui-font-size-lg, 16px);
   font-weight: 500;
   color: var(--zaui-text, #343434);
-  margin-bottom: var(--zaui-space-size-sm, 8px);
+  margin-bottom: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
 }
 .pro-edit-label-popconfirm .pro-edit-label-tip {
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
   color: #666;
 }
 .pro-edit-label-popconfirm .pro-edit-label-tip .anticon-info-circle {
@@ -4354,7 +4298,7 @@ div.pro-textarea-view::after {
   width: 4px;
   height: 14px;
   background: var(--zaui-brand, #006aff);
-  border-radius: 2px;
+  border-radius: var(zaui-border-radius-card, 2px);
 }
 .pro-theme-prd-tools-drawer .pro-theme-color {
   display: -webkit-box;
@@ -4384,7 +4328,7 @@ div.pro-textarea-view::after {
   margin-right: 34px;
 }
 .pro-theme-prd-tools-drawer .pro-theme-color li span {
-  font-size: 14px;
+  font-size: var(--zaui-font-size, 14px);
   vertical-align: -7px;
 }
 .pro-theme-prd-tools-drawer .pro-theme-color li:nth-child(1) {
@@ -4477,7 +4421,7 @@ div.pro-textarea-view::after {
   left: 4px;
   z-index: 1;
   color: var(--zaui-text, #343434);
-  font-size: 16px;
+  font-size: var(--zaui-font-size-lg, 16px);
   -webkit-transform: translateZ(100px);
           transform: translateZ(100px);
 }
@@ -4509,7 +4453,7 @@ div.pro-textarea-view::after {
   color: var(--zaui-brand, #006aff);
 }
 .pro-theme-tools .anticon svg {
-  font-size: 24px;
+  font-size: var(--zaui-font-size-lg-title, 24px);
 }
 .pro-theme-tools-drawer .ant-drawer-body {
   padding: 32px;
@@ -4550,29 +4494,11 @@ div.pro-textarea-view::after {
 .pro-download.ant-btn-text {
   padding: 0;
 }
-.back-button-container {
-  color: var(--zaui-aide-text);
-  font-weight: 400;
-  background: var(--zaui-disabled-bg);
-  border: none;
-}
-.back-button-container:hover {
-  color: var(--zaui-aide-text);
-  background: var(--zaui-disabled-bg);
-  border: none;
-}
-.back-button-container:active,
-.back-button-container:focus {
-  color: var(--zaui-aide-text);
-  font-weight: 400;
-  background: var(--zaui-disabled-bg);
-}
 .pro-editable .ant-table-cell .table-title-required::before {
   display: inline-block;
   margin-right: 4px;
   color: #ff5050;
-  font-size: 14px;
-  font-family: SimSun, sans-serif;
+  font-size: var(--zaui-font-size, 14px);
   line-height: 1;
   content: '*';
 }
@@ -4825,7 +4751,6 @@ samp {
   font-family: monospace, sans-serif;
 }
 .clickable,
-label,
 input[type='button'],
 input[type='submit'],
 input[type='file'],
@@ -4919,6 +4844,7 @@ input[type='button'] {
   --zaui-table-selected-bg: var(--zaui-table-hover-bg);
   --zaui-table-selected-hover-bg: var(--zaui-table-hover-bg);
   --zaui-table-nested-bg: #fafcfe;
+  --zaui-contract-bg: #fffaa1;
   --zaui-form-label-width: 130px;
   --zaui-border-radius: 4px;
   --zaui-border-radius-card: 2px;
@@ -5005,8 +4931,7 @@ input[type='button'] {
 .ant-modal .ant-form-item .ant-form-item-label.ant-form-item-label-left > .ant-form-item-required::after {
   margin-top: 1px;
   color: #ff4d4f;
-  font-size: 14px;
-  font-family: SimSun, sans-serif;
+  font-size: var(--zaui-font-size, 14px);
   line-height: 1;
   content: '*';
 }
@@ -5044,7 +4969,7 @@ input[type='button'] {
 .ant-form .ant-form-item,
 .ant-drawer .ant-form-item,
 .ant-modal .ant-form-item {
-  margin-bottom: 22px !important;
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1)) !important;
 }
 .ant-input[disabled],
 .ant-select-disabled,
@@ -5202,7 +5127,7 @@ input[type='button'] {
   margin-left: 0;
 }
 .ant-tabs .ant-tabs-nav {
-  margin-bottom: var(--zaui-space-size-md, 16px);
+  margin-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1));
 }
 .ant-tabs .ant-tabs-nav .ant-tabs-tab-btn {
   font-size: var(--zaui-font-size-lg, 16px);