@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.21

package/dist/style.css

@@ -1,55 +1,4 @@
-@charset "UTF-8";.m-editor-scroll-bar {
-  position: absolute;
-  background-color: transparent;
-  opacity: 0.3;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-}
-.m-editor-scroll-bar .m-editor-scroll-bar-thumb {
-  background-color: #aaa;
-  border-radius: 6px;
-  position: absolute;
-}
-.m-editor-scroll-bar.horizontal {
-  width: 100%;
-  height: 15px;
-  bottom: 0;
-}
-.m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
-  height: 6px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
-  bottom: 2px;
-}
-.m-editor-scroll-bar.vertical {
-  height: 100%;
-  width: 15px;
-  right: 5px;
-}
-.m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
-  width: 6px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
-  right: 2px;
-}
-.m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
-  background-color: #eee;
-  opacity: 0.9;
-}
-.m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
-  background-color: #999;
-}
-.m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
-  height: 11px;
-}
-.m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
-  width: 11px;
-}.m-fields-ui-select {
-  cursor: pointer;
-}
-.m-fields-ui-select i {
-  margin-right: 3px;
-}
-.m-fields-ui-select span {
-  color: #2882e0;
-}
+@charset "UTF-8";
 .tmagic-design-popper {
   min-width: 150px;
   line-height: 1.4;
@@ -101,6 +50,70 @@
   transform: rotate(45deg);
 }
 
+.tmagic-design-card.tmagic-design-card--flat {
+  background: #fff;
+  box-shadow: none !important;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  border-bottom: 0;
+}
+.tmagic-design-card.tmagic-design-card--flat.m-flat-hide-body .el-card__header {
+  border-bottom: 0 !important;
+}
+.tmagic-design-card.tmagic-design-card--flat.m-fields-group-list-item {
+  margin-bottom: 0;
+}
+.tmagic-design-card.tmagic-design-card--flat.is-always-shadow {
+  box-shadow: none;
+}
+.tmagic-design-card.tmagic-design-card--flat .el-card__header {
+  border-bottom: none;
+  padding: 16px;
+}
+.tmagic-design-card.tmagic-design-card--flat .el-card__header:hover {
+  background: transparent;
+  box-shadow: none;
+  cursor: default;
+}
+.tmagic-design-card.tmagic-design-card--flat .m-fields-group-list-footer {
+  margin-bottom: 4px;
+  margin-top: 4px;
+}
+.tmagic-design-card.tmagic-design-card--flat .el-card__body {
+  padding: 0 16px 0 16px;
+}
+.tmagic-design-card.tmagic-design-card--flat .el-card__body .tmagic-design-form-item:not(tbody .tmagic-design-form-item) {
+  margin-bottom: 16px;
+}
+.tmagic-design-card.tmagic-design-card--flat .el-card__body > .m-container-row {
+  overflow-x: hidden;
+}
+.m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat {
+  background-color: transparent;
+}
+.m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat > .el-card__header {
+  margin-bottom: 10px;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+.m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat > .el-card__body {
+  background-color: #fff;
+  padding-top: 8px;
+}
+
+.tmagic-design-color-picker-input {
+  margin-left: 8px;
+  width: calc(var(--el-input-width, 100%) - 40px);
+}
+
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }
@@ -115,6 +128,22 @@
   color: #999;
 }
 
+.tmagic-table-sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.tmagic-table-sub-actions .sub-action-btn {
+  width: 100%;
+}
+.tmagic-table-sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.tmagic-table-sub-actions .tmagic-design-button {
+  justify-content: flex-start;
+}
+
 .tmagic-design-form-inline .m-form-container {
   display: inline-flex;
 }
@@ -132,6 +161,9 @@
 .m-form-container .tmagic-design-form-item.show-before-diff {
   background: #f7dadd;
 }
+.m-form-container .m-form-title-extra {
+  margin-left: 8px;
+}
 
 .m-form-dialog .el-dialog__body {
   padding: 0 !important;
@@ -139,7 +171,7 @@
 .m-form-dialog .m-dialog-body {
   padding: 0 20px;
 }
-.m-form-dialog .el-table .m-form-item .el-form-item {
+.m-form-dialog .el-table .m-form-item .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 
@@ -192,6 +224,10 @@
   margin-bottom: var(--td-comp-margin-xxl);
 }
 
+.m-form-container .m-form-container-expand {
+  text-align: center;
+}
+
 .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
   display: none;
 }
@@ -201,6 +237,24 @@
   align-items: center;
   width: 100%;
 }
+.m-fields-text--static {
+  gap: 6px;
+  min-height: 32px;
+}
+.m-fields-text--static .m-fields-text__prepend {
+  color: var(--el-text-color-secondary, #909399);
+}
+.m-fields-text--static .m-fields-text__value {
+  color: var(--el-text-color-regular, #606266);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-fields-text--static .m-fields-text__icon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
 
 .m-form-validate__warning {
   color: var(--el-color-warning);
@@ -226,6 +280,16 @@
   outline: none;
 }
 
+.m-container-text.m-fields-title-container .tmagic-design-form-item .el-form-item__label {
+  color: #0f1113;
+  font-weight: 500;
+  font-size: 16px;
+}
+.m-container-text.m-fields-title-container .tmagic-design-form-item {
+  line-height: 24px;
+  margin-bottom: 16px;
+}
+
 .tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
   bottom: -4px;
 }
@@ -264,6 +328,66 @@ div.m-fields-link {
   width: fit-content;
 }
 
+a.magic-admin-link {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #e6e6e6;
+  background-color: #fafafa;
+  padding: 0 8px;
+  height: 28px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  text-decoration: none;
+}
+a.magic-admin-link i {
+  margin-right: 4px;
+}
+
+.m-container-fieldset.no-border-fieldset.fieldset-in-row > fieldset.m-fieldset legend {
+  left: 0;
+}
+.m-container-fieldset.no-border-fieldset > fieldset.m-fieldset {
+  border: 0;
+}
+.m-container-fieldset.no-border-fieldset > fieldset.m-fieldset legend {
+  position: relative;
+  left: -5px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  padding: 0;
+}
+.m-container-fieldset.fieldset-in-card-fit {
+  border-bottom: 1px solid #e6e6e6;
+}
+.m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset {
+  padding: 16px 0 16px 0 !important;
+  border: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
+  position: relative;
+  top: 10px;
+  background-color: transparent;
+}
+.m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
+  padding-bottom: 0 !important;
+  border-bottom: 0;
+}
+.m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-first {
+  padding-top: 0 !important;
+}
+.m-container-fieldset.fieldset-in-card-fit:last-child {
+  padding-bottom: 0 !important;
+  border-bottom: 0;
+}
+.m-container-fieldset.fieldset-in-card-fit:first {
+  padding-top: 0 !important;
+}
+
 fieldset.m-fieldset {
   position: relative;
   border: 1px solid rgb(229, 229, 229);
@@ -290,6 +414,9 @@ fieldset.m-fieldset .m-form-tip {
   margin-left: 5px;
 }
 
+.m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
+  border: 0;
+}
 .m-fields-group-list .el-button--text {
   padding: 0;
   margin-bottom: 7px;
@@ -308,23 +435,27 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-group-list .m-fields-group-list-item:last-of-type {
   border-bottom: 0;
 }
-.m-fields-group-list .tmagic-design-card .el-card__header {
-  padding: 5px 20px;
-}
-.m-fields-group-list .tmagic-design-card .t-card__header {
-  padding: 5px 0;
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
 }
 
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }
 .m-form-panel .el-card__header a {
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
 }
 .m-form-panel .el-card__body {
   padding: 10px;
@@ -363,6 +494,10 @@ fieldset.m-fieldset .m-form-tip {
   width: 95vw !important;
 }
 
+.el-form-item .m-fields-table .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-fields-table {
   width: 100%;
 }
@@ -385,7 +520,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-table__expanded-cell .m-form-tip {
   margin-left: 80px;
 }
-.m-fields-table .el-form-item {
+.m-fields-table .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 .m-fields-table .tmagic-form-table-drag-target {
@@ -403,8 +538,8 @@ fieldset.m-fieldset .m-form-tip {
   margin-right: auto;
   min-width: 50px;
   outline: none;
-  border-color: #409eff;
-  color: #409eff;
+  border-color: var(--el-color-primary, #409eff);
+  color: var(--el-color-primary, #409eff);
   width: 10px;
 }
 .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab::before {
@@ -443,6 +578,22 @@ fieldset.m-fieldset .m-form-tip {
   justify-content: space-between;
 }
 
+.m-fields-radio-group__option {
+  display: flex;
+  align-items: center;
+}
+
+.m-fields-radio-group__text {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: pre-line;
+  line-height: 20px;
+}
+
+.m-fields-radio-group__icon_with_text {
+  margin-right: 8px;
+}
+
 .tmagic-design-input.search-input {
   background: #fff;
   color: #bbbbbb;
@@ -471,7 +622,7 @@ fieldset.m-fieldset .m-form-tip {
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 35px;
+  flex: 0 0 var(--editor-nav-height, 35px);
   border-bottom: 1px solid #d8dee8;
 }
 .m-editor-nav-menu > div {
@@ -592,7 +743,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   top: 4px;
   right: 4px;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   align-items: center;
   height: 40px;
@@ -600,7 +751,7 @@ fieldset.m-fieldset .m-form-tip {
   color: #909399;
 }
 .m-editor-history-list-popover .m-editor-history-list-close:hover {
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
 }
 .m-editor-history-list-popover .m-editor-history-list-tabs .el-tabs__header,
 .m-editor-history-list-popover .m-editor-history-list-tabs .t-tabs__header {
@@ -617,6 +768,23 @@ fieldset.m-fieldset .m-form-tip {
   padding: 0;
   list-style: none;
 }
+.m-editor-history-list-popover .m-editor-history-list-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 4px 4px;
+}
+.m-editor-history-list-popover .m-editor-history-list-clear {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #f56c6c;
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-clear:hover {
+  background-color: rgba(245, 108, 108, 0.12);
+}
 .m-editor-history-list-popover .m-editor-history-list-item {
   display: flex;
   align-items: center;
@@ -639,14 +807,14 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) {
   background-color: rgba(64, 158, 255, 0.1);
-  box-shadow: inset 2px 0 0 #409eff;
+  box-shadow: inset 2px 0 0 var(--el-color-primary, #409eff);
 }
 .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged):hover {
   background-color: rgba(64, 158, 255, 0.16);
 }
 .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) .m-editor-history-list-item-desc {
   font-weight: 600;
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
 }
 .m-editor-history-list-popover .m-editor-history-list-group {
   flex-direction: column;
@@ -678,17 +846,17 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged {
   margin: 4px 0;
   padding: 4px 8px 6px;
-  background-color: rgba(144, 105, 219, 0.06);
-  border: 1px solid rgba(144, 105, 219, 0.18);
-  border-left: 3px solid #9069db;
+  background-color: rgba(47, 84, 235, 0.06);
+  border: 1px solid rgba(47, 84, 235, 0.18);
+  border-left: 3px solid #2f54eb;
   border-radius: 4px;
 }
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged:hover {
-  background-color: rgba(144, 105, 219, 0.1);
+  background-color: rgba(47, 84, 235, 0.1);
 }
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged .m-editor-history-list-group-head {
   font-weight: 600;
-  color: #5b3fa5;
+  color: #1d39c4;
 }
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone {
   background-color: rgba(192, 196, 204, 0.08);
@@ -701,17 +869,17 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current {
   background-color: rgba(64, 158, 255, 0.08);
   border-color: rgba(64, 158, 255, 0.3);
-  border-left-color: #409eff;
+  border-left-color: var(--el-color-primary, #409eff);
   box-shadow: none;
 }
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current .m-editor-history-list-group-head {
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps {
   margin: 6px 0 0 6px;
   padding: 0;
   list-style: none;
-  border-left: 1px dashed rgba(144, 105, 219, 0.45);
+  border-left: 1px dashed rgba(47, 84, 235, 0.45);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li {
   display: flex;
@@ -727,13 +895,13 @@ fieldset.m-fieldset .m-form-tip {
   cursor: pointer;
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable:hover {
-  background-color: rgba(144, 105, 219, 0.1);
+  background-color: rgba(47, 84, 235, 0.1);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-undone {
   color: #c0c4cc;
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-current {
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
   font-weight: 600;
   background-color: rgba(64, 158, 255, 0.08);
   border-radius: 3px;
@@ -745,17 +913,31 @@ fieldset.m-fieldset .m-form-tip {
   font-size: 10px;
   line-height: 16px;
   color: #fff;
-  background-color: #409eff;
+  background-color: var(--el-color-primary, #409eff);
   font-weight: 500;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-index {
   flex: 0 0 auto;
+  min-width: 30px;
+  text-align: right;
   color: #909399;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: 11px;
   font-weight: 400;
   white-space: nowrap;
 }
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged > .m-editor-history-list-group-head > .m-editor-history-list-item-index {
+  min-width: 0;
+  text-align: left;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-time {
+  flex: 0 0 auto;
+  color: #a8abb2;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  font-weight: 400;
+  white-space: nowrap;
+}
 .m-editor-history-list-popover .m-editor-history-list-item-op {
   flex: 0 0 auto;
   padding: 0 6px;
@@ -772,7 +954,7 @@ fieldset.m-fieldset .m-form-tip {
   background-color: #f56c6c;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-op.op-update {
-  background-color: #409eff;
+  background-color: #e6a23c;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-op.op-initial {
   background-color: #909399;
@@ -796,6 +978,42 @@ fieldset.m-fieldset .m-form-tip {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.m-editor-history-list-popover .m-editor-history-list-item-source {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: #909399;
+  background-color: #f4f4f5;
+  white-space: nowrap;
+  font-weight: 400;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-operator {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border: 1px solid #c6e2ff;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: #409eff;
+  background-color: #ecf5ff;
+  white-space: nowrap;
+  font-weight: 400;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-saved {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  background-color: #67c23a;
+  white-space: nowrap;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
 .m-editor-history-list-popover .m-editor-history-list-item-merge {
   flex: 0 0 auto;
   padding: 0 8px;
@@ -803,17 +1021,28 @@ fieldset.m-fieldset .m-form-tip {
   font-size: 10px;
   line-height: 16px;
   color: #fff;
-  background-color: #9069db;
+  background-color: #2f54eb;
   font-weight: 500;
   letter-spacing: 0.2px;
 }
+.m-editor-history-list-popover .m-editor-history-list-item-actions {
+  display: none;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+.m-editor-history-list-popover .m-editor-history-list-group-head:hover > .m-editor-history-list-item-actions,
+.m-editor-history-list-popover .m-editor-history-list-substeps > li:hover > .m-editor-history-list-item-actions,
+.m-editor-history-list-popover .m-editor-history-list-initial:hover > .m-editor-history-list-item-actions {
+  display: flex;
+}
 .m-editor-history-list-popover .m-editor-history-list-item-diff {
   flex: 0 0 auto;
   padding: 0 6px;
   border-radius: 2px;
   font-size: 10px;
   line-height: 16px;
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
   background-color: rgba(64, 158, 255, 0.1);
   cursor: pointer;
   user-select: none;
@@ -821,19 +1050,33 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-history-list-popover .m-editor-history-list-item-diff:hover {
   background-color: rgba(64, 158, 255, 0.2);
 }
+.m-editor-history-list-popover .m-editor-history-list-item-goto {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #529b2e;
+  background-color: rgba(103, 194, 58, 0.12);
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-goto:hover {
+  background-color: rgba(103, 194, 58, 0.24);
+}
 .m-editor-history-list-popover .m-editor-history-list-item-revert {
   flex: 0 0 auto;
   padding: 0 6px;
   border-radius: 2px;
   font-size: 10px;
   line-height: 16px;
-  color: #e6a23c;
-  background-color: rgba(230, 162, 60, 0.12);
+  color: #f56c6c;
+  background-color: rgba(245, 108, 108, 0.12);
   cursor: pointer;
   user-select: none;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-revert:hover {
-  background-color: rgba(230, 162, 60, 0.25);
+  background-color: rgba(245, 108, 108, 0.25);
 }
 .m-editor-history-list-popover .m-editor-history-list-substep-desc {
   flex: 1 1 auto;
@@ -862,7 +1105,7 @@ fieldset.m-fieldset .m-form-tip {
   flex: 1 1 auto;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: 11px;
-  color: #409eff;
+  color: var(--el-color-primary, #409eff);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -878,6 +1121,16 @@ fieldset.m-fieldset .m-form-tip {
   display: flex;
   flex-direction: column;
 }
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-notice {
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background-color: #fdf6ec;
+  border: 1px solid #faecd8;
+  border-radius: 4px;
+  color: #e6a23c;
+  font-size: 13px;
+  line-height: 1.5;
+}
 .m-editor-history-diff-dialog .m-editor-history-diff-dialog-header {
   display: flex;
   align-items: center;
@@ -930,7 +1183,7 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
 }
 .m-editor-content {
-  height: calc(100% - 35px);
+  height: calc(100% - var(--editor-nav-height, 35px));
 }
 .m-editor-framework-center {
   position: relative;
@@ -978,8 +1231,8 @@ fieldset.m-fieldset .m-form-tip {
   margin-top: 5px;
 }
 .m-editor-empty-button:hover {
-  border-color: #2882e0;
-  color: #2882e0;
+  border-color: var(--el-color-primary, #2882e0);
+  color: var(--el-color-primary, #2882e0);
 }
 
 .m-editor-sidebar {
@@ -988,7 +1241,7 @@ fieldset.m-fieldset .m-form-tip {
   position: relative;
 }
 .m-editor-sidebar .m-editor-sidebar-header {
-  background: #2882e0;
+  background: var(--el-color-primary, #2882e0);
   height: 100%;
   width: 40px;
 }
@@ -1170,9 +1423,9 @@ fieldset.m-fieldset .m-form-tip {
 }
 .ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item i:hover,
 .ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item i:hover {
-  background: #2882e0;
+  background: var(--el-color-primary, #2882e0);
   color: #fff;
-  border-color: #4e8be1;
+  border-color: var(--el-color-primary, #4e8be1);
 }
 .ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item span,
 .ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item span {
@@ -1322,7 +1575,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-editor-page-bar-item-icon .icon-active {
   font-weight: bold;
-  color: #2882e0;
+  color: var(--el-color-primary, #2882e0);
 }
 .m-editor-page-bar-item-title {
   max-width: 150px;
@@ -1352,14 +1605,11 @@ fieldset.m-fieldset .m-form-tip {
   transition: all 0.2s ease 0s;
   padding: 5px 14px;
 }
-.page-bar-popover .menu-item .tmagic-design-button {
-  color: #313a40;
-}
 .page-bar-popover .menu-item:hover {
   background-color: #f3f5f9;
 }
 .page-bar-popover .menu-item.active .tmagic-design-button {
-  color: #2882e0;
+  color: var(--el-color-primary, #2882e0);
 }
 
 .m-editor-page-bar-search-panel {
@@ -1420,7 +1670,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   right: 15px;
   bottom: 15px;
-  z-index: 30;
+  z-index: 32;
   opacity: 0.5;
 }
 .m-editor-props-panel .m-editor-props-panel-src-icon:hover {
@@ -1430,7 +1680,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   right: 15px;
   bottom: 60px;
-  z-index: 30;
+  z-index: 31;
   opacity: 0.5;
 }
 .m-editor-props-panel .m-editor-props-panel-style-icon:hover {
@@ -1440,7 +1690,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 10;
+  z-index: 31;
 }
 .m-editor-props-panel .m-editor-resizer {
   position: absolute;
@@ -1470,7 +1720,8 @@ fieldset.m-fieldset .m-form-tip {
   padding-left: 10px;
 }
 .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
-  padding-top: 55px;
+  margin-top: var(--el-tabs-header-height);
+  padding-top: 15px;
 }
 .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
   position: absolute;
@@ -1539,7 +1790,7 @@ fieldset.m-fieldset .m-form-tip {
   color: #313a40;
 }
 .magic-editor-content-menu .menu-item.button.active {
-  background-color: #2882e0;
+  background-color: var(--el-color-primary, #2882e0);
 }
 .magic-editor-content-menu .menu-item.button.active .tmagic-design-button,
 .magic-editor-content-menu .menu-item.button.active .tmagic-design-button:active,
@@ -1670,12 +1921,57 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-code-select {
   width: 100%;
 }
+.m-fields-code-select > .el-card.tmagic-design-card--flat {
+  background-color: transparent;
+  margin-bottom: 10px;
+}
+.m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body {
+  padding-left: 0;
+}
+.m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body .code-select-content > .m-fields-group-list > .tmagic-design-card--flat.el-card {
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-bottom: 10px;
+  border: 0 !important;
+}
+.m-fields-code-select .el-card__body .tmagic-design-form-item {
+  margin-bottom: 16px;
+}
+.m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
+  padding: 16px 0;
+}
+.m-fields-code-select .create-button.fullWidth {
+  width: 100%;
+  margin: 0 0 16px 0;
+}
 
 .m-fields-event-select {
   width: 100%;
 }
 .m-fields-event-select .fullWidth {
   width: 100%;
+  box-sizing: border-box;
+}
+.m-fields-event-select .fullWidth.create-button {
+  width: 100%;
+}
+.m-fields-event-select .fullWidth.m-container-ui-event {
+  width: calc(100% - 32px);
+}
+.m-fields-event-select .event-select-container {
+  padding: 0 16px;
+}
+.m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__header {
+  border-bottom: 1px solid #ebeef5;
+}
+.m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body {
+  padding-bottom: 16px;
+}
+.m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
+  justify-content: flex-start !important;
+}
+.m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .el-card__header {
+  padding: 16px 0;
 }
 .m-fields-event-select .event-select-code {
   margin-left: 20px;
@@ -1709,6 +2005,44 @@ fieldset.m-fieldset .m-form-tip {
   margin-right: 5px;
 }
 
+.event-select-container {
+  padding: 0 16px;
+}
+
+.event-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.event-select-header .event-select-title {
+  color: #0f1113;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.event-item-header {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.event-item-header .event-item-title {
+  color: #0f1113;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+.event-item-header .event-item-delete-button {
+  color: #0f1113;
+}
+.event-item-header .el-form-item .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-editor-layout {
   width: 100%;
   display: flex;
@@ -1845,18 +2179,18 @@ fieldset.m-fieldset .m-form-tip {
   color: #313a40;
 }
 .m-editor-tree .m-editor-tree-node .tree-node.selected {
-  background-color: #2882e0;
+  background-color: var(--el-color-primary, #2882e0);
   color: #f3f5f9;
 }
 .m-editor-tree .m-editor-tree-node .tree-node.drag-inner .tree-node-content {
-  background-color: rgba(40, 130, 224, 0.5);
+  background-color: rgba(var(--el-color-primary, #2882e0), 0.5);
   color: #f3f5f9;
 }
 .m-editor-tree .m-editor-tree-node .tree-node.drag-before .tree-node-content {
-  border-top-color: rgba(40, 130, 224, 0.5);
+  border-top-color: rgba(var(--el-color-primary, #2882e0), 0.5);
 }
 .m-editor-tree .m-editor-tree-node .tree-node.drag-after .tree-node-content {
-  border-bottom-color: rgba(40, 130, 224, 0.5);
+  border-bottom-color: rgba(var(--el-color-primary, #2882e0), 0.5);
 }
 .m-editor-tree .m-editor-tree-node .tree-node .expand-icon {
   padding: 4px;
@@ -1921,13 +2255,21 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-float-box .m-editor-float-box-body {
   overflow: auto;
   flex: 1;
-  padding: 0 16px;
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
 
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
 .m-fields-page-fragment-select {
   width: 100%;
 }
@@ -1951,6 +2293,15 @@ fieldset.m-fieldset .m-form-tip {
   display: flex;
   align-items: center;
 }
+.m-fields-data-source-select.data-source-field-img-upload, .m-fields-data-source-select.data-source-field-big-img-upload,
+.m-fields-data-source-field-select.data-source-field-img-upload,
+.m-fields-data-source-field-select.data-source-field-big-img-upload,
+.m-fields-data-source-method-select .data-source-method-select-container.data-source-field-img-upload,
+.m-fields-data-source-method-select .data-source-method-select-container.data-source-field-big-img-upload,
+.m-fields-code-select-col .code-select-container.data-source-field-img-upload,
+.m-fields-code-select-col .code-select-container.data-source-field-big-img-upload {
+  align-items: flex-start;
+}
 .m-fields-data-source-select .m-fields-select-action-button,
 .m-fields-data-source-field-select .m-fields-select-action-button,
 .m-fields-data-source-method-select .data-source-method-select-container .m-fields-select-action-button,
@@ -1977,8 +2328,87 @@ fieldset.m-fieldset .m-form-tip {
   padding: 5px 8px;
 }
 
+.m-container-text.display-conds-title .tmagic-design-form-item .el-form-item__label {
+  color: #111;
+  font-weight: 500;
+  font-size: 16px;
+}
+.m-container-text.display-conds-title .tmagic-design-form-item {
+  line-height: 24px;
+  margin-bottom: 10px;
+}
+
+.m-editor-scroll-bar {
+  position: absolute;
+  background-color: transparent;
+  opacity: 0.3;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+}
+.m-editor-scroll-bar .m-editor-scroll-bar-thumb {
+  background-color: #aaa;
+  border-radius: 6px;
+  position: absolute;
+}
+.m-editor-scroll-bar.horizontal {
+  width: 100%;
+  height: 15px;
+  bottom: 0;
+}
+.m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
+  height: 6px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  bottom: 2px;
+}
+.m-editor-scroll-bar.vertical {
+  height: 100%;
+  width: 15px;
+  right: 5px;
+}
+.m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
+  width: 6px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  right: 2px;
+}
+.m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
+  background-color: #999;
+}
+.m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
+  height: 11px;
+}
+.m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
+  width: 11px;
+}
+
+.m-fields-ui-select {
+  cursor: pointer;
+}
+.m-fields-ui-select i {
+  margin-right: 3px;
+}
+.m-fields-ui-select span {
+  color: var(--el-color-primary, #2882e0);
+}
+
+.m-editor-layer-node-content {
+  display: inline-flex;
+  align-items: center;
+}
+.m-editor-layer-node-content.is-invalid .m-editor-layer-node-label {
+  color: var(--el-color-danger, #f56c6c);
+}
+.m-editor-layer-node-content .m-editor-layer-node-error-icon {
+  margin-left: 4px;
+  color: var(--el-color-danger, #f56c6c);
+  cursor: help;
+}
+
 .border-box-container {
   display: flex;
+  --unuse-border-style: dashed;
 }
 .border-box-container .border-icon-container {
   display: flex;
@@ -2006,25 +2436,31 @@ fieldset.m-fieldset .m-form-tip {
 .border-box-container .border-icon-container .border-icon + .border-icon {
   margin-left: 8px;
 }
+.border-box-container .border-icon-container .border-icon.configured {
+  border-color: var(--el-color-success, var(--td-success-color, #2ba471));
+}
 .border-box-container .border-icon-container .border-icon.active {
-  border-width: 1px;
   border-color: var(--el-color-primary);
+  border-width: 1px;
+}
+.border-box-container .border-icon-container .border-icon.center {
+  border-width: 1px;
 }
 .border-box-container .border-icon-container .border-icon.border-icon-top {
   border-top-width: 2px;
-  border-style: solid dashed dashed dashed;
+  border-style: solid var(--unuse-border-style) var(--unuse-border-style) var(--unuse-border-style);
 }
 .border-box-container .border-icon-container .border-icon.border-icon-right {
   border-right-width: 2px;
-  border-style: dashed solid dashed dashed;
+  border-style: var(--unuse-border-style) solid var(--unuse-border-style) var(--unuse-border-style);
 }
 .border-box-container .border-icon-container .border-icon.border-icon-bottom {
   border-bottom-width: 2px;
-  border-style: dashed dashed solid dashed;
+  border-style: var(--unuse-border-style) var(--unuse-border-style) solid var(--unuse-border-style);
 }
 .border-box-container .border-icon-container .border-icon.border-icon-left {
   border-left-width: 2px;
-  border-style: dashed dashed dashed solid;
+  border-style: var(--unuse-border-style) var(--unuse-border-style) var(--unuse-border-style) solid;
 }
 .border-box-container .border-value-container {
   margin-left: 16px;
@@ -2244,7 +2680,7 @@ fieldset.m-fieldset .m-form-tip {
   border: 1px solid #1d1f24;
 }
 .background-position-container .presets-value-list .position-icon.active {
-  background-color: #2882e0;
+  background-color: var(--el-color-primary, #2882e0);
 }
 .background-position-container .presets-value-list .position-icon.active::after {
   border: 1px solid #fff;