@tmagic/editor 1.8.0-beta.9 → 1.8.0-manmanyu.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +13 -3
  2. package/dist/es/components/ContentMenu.vue_vue_type_script_setup_true_lang.js +11 -4
  3. package/dist/es/components/FloatingBox.vue_vue_type_script_setup_true_lang.js +9 -4
  4. package/dist/es/fields/Code.vue_vue_type_script_setup_true_lang.js +4 -1
  5. package/dist/es/fields/CodeLink.vue_vue_type_script_setup_true_lang.js +4 -1
  6. package/dist/es/fields/CodeSelect.vue_vue_type_script_setup_true_lang.js +68 -43
  7. package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js +5 -1
  8. package/dist/es/fields/CondOpSelect.vue_vue_type_script_setup_true_lang.js +4 -1
  9. package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js +10 -7
  10. package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +4 -1
  11. package/dist/es/fields/DataSourceInput.vue_vue_type_script_setup_true_lang.js +4 -1
  12. package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +4 -1
  13. package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +4 -1
  14. package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js +4 -1
  15. package/dist/es/fields/DataSourceSelect.vue_vue_type_script_setup_true_lang.js +4 -1
  16. package/dist/es/fields/DisplayConds.vue_vue_type_script_setup_true_lang.js +8 -2
  17. package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js +101 -64
  18. package/dist/es/fields/KeyValue.vue_vue_type_script_setup_true_lang.js +4 -1
  19. package/dist/es/fields/PageFragmentSelect.vue_vue_type_script_setup_true_lang.js +4 -1
  20. package/dist/es/fields/StyleSetter/Index.vue_vue_type_script_setup_true_lang.js +5 -4
  21. package/dist/es/fields/StyleSetter/components/BackgroundPosition.vue_vue_type_script_setup_true_lang.js +4 -1
  22. package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js +1 -1
  23. package/dist/es/fields/StyleSetter/icons/align-items/Center.js +31 -0
  24. package/dist/es/fields/StyleSetter/icons/align-items/FlexEnd.js +31 -0
  25. package/dist/es/fields/StyleSetter/icons/align-items/FlexStart.js +31 -0
  26. package/dist/es/fields/StyleSetter/icons/align-items/SpaceAround.js +50 -0
  27. package/dist/es/fields/StyleSetter/icons/align-items/SpaceBetween.js +50 -0
  28. package/dist/es/fields/StyleSetter/icons/background-repeat/NoRepeat.js +6 -6
  29. package/dist/es/fields/StyleSetter/icons/background-repeat/Repeat.js +5 -2
  30. package/dist/es/fields/StyleSetter/icons/background-repeat/RepeatX.js +28 -5
  31. package/dist/es/fields/StyleSetter/icons/background-repeat/RepeatY.js +31 -5
  32. package/dist/es/fields/StyleSetter/icons/flex-direction/Column.js +10 -2
  33. package/dist/es/fields/StyleSetter/icons/flex-direction/ColumnReverse.js +10 -2
  34. package/dist/es/fields/StyleSetter/icons/flex-direction/Row.js +10 -2
  35. package/dist/es/fields/StyleSetter/icons/flex-direction/RowReverse.js +10 -2
  36. package/dist/es/fields/StyleSetter/icons/justify-content/Center.js +16 -2
  37. package/dist/es/fields/StyleSetter/icons/justify-content/FlexEnd.js +18 -2
  38. package/dist/es/fields/StyleSetter/icons/justify-content/FlexStart.js +18 -2
  39. package/dist/es/fields/StyleSetter/icons/justify-content/SpaceAround.js +36 -2
  40. package/dist/es/fields/StyleSetter/icons/justify-content/SpaceBetween.js +32 -2
  41. package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js +11 -6
  42. package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js +6 -3
  43. package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js +82 -46
  44. package/dist/es/fields/UISelect.vue_vue_type_script_setup_true_lang.js +4 -1
  45. package/dist/es/icons/DatasourceIcon.js +17 -0
  46. package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js +14 -10
  47. package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js +10 -1
  48. package/dist/es/style.css +295 -37
  49. package/dist/es/utils/const.js +1 -1
  50. package/dist/es/utils/props.js +48 -29
  51. package/dist/style.css +295 -37
  52. package/dist/themes/magic-admin.css +2825 -0
  53. package/dist/tmagic-editor.umd.cjs +1028 -436
  54. package/package.json +7 -7
  55. package/src/Editor.vue +13 -1
  56. package/src/components/ContentMenu.vue +10 -2
  57. package/src/components/FloatingBox.vue +13 -2
  58. package/src/editorProps.ts +9 -0
  59. package/src/fields/CodeSelect.vue +51 -40
  60. package/src/fields/CodeSelectCol.vue +1 -0
  61. package/src/fields/DataSourceFieldSelect/Index.vue +14 -5
  62. package/src/fields/DisplayConds.vue +4 -1
  63. package/src/fields/EventSelect.vue +58 -32
  64. package/src/fields/StyleSetter/Index.vue +1 -4
  65. package/src/fields/StyleSetter/components/Border.vue +1 -1
  66. package/src/fields/StyleSetter/icons/align-items/Center.vue +19 -0
  67. package/src/fields/StyleSetter/icons/align-items/FlexEnd.vue +19 -0
  68. package/src/fields/StyleSetter/icons/align-items/FlexStart.vue +19 -0
  69. package/src/fields/StyleSetter/icons/align-items/SpaceAround.vue +34 -0
  70. package/src/fields/StyleSetter/icons/align-items/SpaceBetween.vue +34 -0
  71. package/src/fields/StyleSetter/icons/align-items/index copy.ts +5 -0
  72. package/src/fields/StyleSetter/icons/align-items/index.ts +5 -0
  73. package/src/fields/StyleSetter/icons/background-repeat/NoRepeat.vue +20 -4
  74. package/src/fields/StyleSetter/icons/background-repeat/Repeat.vue +10 -28
  75. package/src/fields/StyleSetter/icons/background-repeat/RepeatX.vue +4 -5
  76. package/src/fields/StyleSetter/icons/background-repeat/RepeatY.vue +4 -5
  77. package/src/fields/StyleSetter/icons/flex-direction/Column.vue +4 -3
  78. package/src/fields/StyleSetter/icons/flex-direction/ColumnReverse.vue +4 -3
  79. package/src/fields/StyleSetter/icons/flex-direction/Row.vue +4 -3
  80. package/src/fields/StyleSetter/icons/flex-direction/RowReverse.vue +4 -3
  81. package/src/fields/StyleSetter/icons/justify-content/Center.vue +5 -2
  82. package/src/fields/StyleSetter/icons/justify-content/FlexEnd.vue +15 -2
  83. package/src/fields/StyleSetter/icons/justify-content/FlexStart.vue +15 -2
  84. package/src/fields/StyleSetter/icons/justify-content/SpaceAround.vue +28 -3
  85. package/src/fields/StyleSetter/icons/justify-content/SpaceBetween.vue +28 -2
  86. package/src/fields/StyleSetter/pro/Background.vue +11 -5
  87. package/src/fields/StyleSetter/pro/Font.vue +3 -3
  88. package/src/fields/StyleSetter/pro/Layout.vue +105 -28
  89. package/src/fields/UISelect.vue +1 -1
  90. package/src/icons/DatasourceIcon.vue +7 -0
  91. package/src/layouts/Framework.vue +7 -1
  92. package/src/layouts/props-panel/PropsPanel.vue +19 -1
  93. package/src/theme/code-block.scss +37 -0
  94. package/src/theme/common/var.scss +1 -1
  95. package/src/theme/component-list-panel.scss +2 -2
  96. package/src/theme/data-source-field.scss +4 -0
  97. package/src/theme/display-conds.scss +11 -0
  98. package/src/theme/event.scss +55 -1
  99. package/src/theme/history-list-panel.scss +9 -9
  100. package/src/theme/props-panel.scss +2 -1
  101. package/src/theme/style-setter/border.scss +14 -5
  102. package/src/theme/theme.scss +1 -0
  103. package/src/theme/themes/magic-admin/index.scss +124 -0
  104. package/src/utils/const.ts +2 -1
  105. package/src/utils/props.ts +30 -9
  106. package/types/index.d.ts +59 -23
package/dist/style.css CHANGED
@@ -48,7 +48,7 @@
48
48
  margin-right: 3px;
49
49
  }
50
50
  .m-fields-ui-select span {
51
- color: #2882e0;
51
+ color: var(--el-color-primary, #2882e0);
52
52
  }
53
53
  .tmagic-design-popper {
54
54
  min-width: 150px;
@@ -101,6 +101,54 @@
101
101
  transform: rotate(45deg);
102
102
  }
103
103
 
104
+ .tmagic-design-card.tmagic-design-card--flat {
105
+ background: #fff;
106
+ box-shadow: none !important;
107
+ border-top: 0;
108
+ border-left: 0;
109
+ border-right: 0;
110
+ border-radius: 0;
111
+ border-bottom: 0;
112
+ }
113
+ .tmagic-design-card.tmagic-design-card--flat.m-fields-group-list-item {
114
+ margin-bottom: 0;
115
+ }
116
+ .tmagic-design-card.tmagic-design-card--flat.is-always-shadow {
117
+ box-shadow: none;
118
+ }
119
+ .tmagic-design-card.tmagic-design-card--flat .el-card__header {
120
+ border-bottom: none;
121
+ padding: 16px;
122
+ }
123
+ .tmagic-design-card.tmagic-design-card--flat .el-card__header:hover {
124
+ background: transparent;
125
+ box-shadow: none;
126
+ cursor: default;
127
+ }
128
+ .tmagic-design-card.tmagic-design-card--flat .el-card__body {
129
+ padding: 0 16px 0 16px;
130
+ }
131
+ .tmagic-design-card.tmagic-design-card--flat .el-card__body .tmagic-design-form-item:not(tbody .tmagic-design-form-item) {
132
+ margin-bottom: 16px;
133
+ }
134
+ .tmagic-design-card.tmagic-design-card--flat .el-card__body > .m-container-row {
135
+ overflow-x: hidden;
136
+ }
137
+ .m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat {
138
+ background-color: transparent;
139
+ }
140
+ .m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat > .el-card__header {
141
+ margin-bottom: 10px;
142
+ padding: 0;
143
+ font-size: 16px;
144
+ font-weight: 500;
145
+ line-height: 24px;
146
+ }
147
+ .m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat > .el-card__body {
148
+ background-color: #fff;
149
+ padding-top: 16px;
150
+ }
151
+
104
152
  .m-table .el-button.action-btn + .el-button.action-btn {
105
153
  margin-left: 0;
106
154
  }
@@ -132,6 +180,9 @@
132
180
  .m-form-container .tmagic-design-form-item.show-before-diff {
133
181
  background: #f7dadd;
134
182
  }
183
+ .m-form-container .m-form-title-extra {
184
+ margin-left: 8px;
185
+ }
135
186
 
136
187
  .m-form-dialog .el-dialog__body {
137
188
  padding: 0 !important;
@@ -192,6 +243,10 @@
192
243
  margin-bottom: var(--td-comp-margin-xxl);
193
244
  }
194
245
 
246
+ .m-form-container .m-form-container-expand {
247
+ text-align: center;
248
+ }
249
+
195
250
  .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
196
251
  display: none;
197
252
  }
@@ -201,6 +256,24 @@
201
256
  align-items: center;
202
257
  width: 100%;
203
258
  }
259
+ .m-fields-text--static {
260
+ gap: 6px;
261
+ min-height: 32px;
262
+ }
263
+ .m-fields-text--static .m-fields-text__prepend {
264
+ color: var(--el-text-color-secondary, #909399);
265
+ }
266
+ .m-fields-text--static .m-fields-text__value {
267
+ color: var(--el-text-color-regular, #606266);
268
+ overflow: hidden;
269
+ text-overflow: ellipsis;
270
+ white-space: nowrap;
271
+ }
272
+ .m-fields-text--static .m-fields-text__icon {
273
+ width: 16px;
274
+ height: 16px;
275
+ cursor: pointer;
276
+ }
204
277
 
205
278
  .m-form-validate__warning {
206
279
  color: var(--el-color-warning);
@@ -226,6 +299,16 @@
226
299
  outline: none;
227
300
  }
228
301
 
302
+ .m-container-text.m-fields-title-container .tmagic-design-form-item .el-form-item__label {
303
+ color: #0f1113;
304
+ font-weight: 500;
305
+ font-size: 16px;
306
+ }
307
+ .m-container-text.m-fields-title-container .tmagic-design-form-item {
308
+ line-height: 24px;
309
+ margin-bottom: 16px;
310
+ }
311
+
229
312
  .tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
230
313
  bottom: -4px;
231
314
  }
@@ -264,6 +347,65 @@ div.m-fields-link {
264
347
  width: fit-content;
265
348
  }
266
349
 
350
+ a.magic-admin-link {
351
+ width: 100%;
352
+ box-sizing: border-box;
353
+ border-radius: 4px;
354
+ border: 1px solid #e6e6e6;
355
+ background-color: #fafafa;
356
+ padding: 0 8px;
357
+ height: 28px;
358
+ display: inline-flex;
359
+ gap: 4px;
360
+ align-items: center;
361
+ text-decoration: none;
362
+ }
363
+ a.magic-admin-link i {
364
+ margin-right: 4px;
365
+ }
366
+
367
+ .m-container-fieldset.no-border-fieldset.fieldset-in-row > fieldset.m-fieldset legend {
368
+ left: 0;
369
+ }
370
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset {
371
+ border: 0;
372
+ }
373
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset legend {
374
+ position: relative;
375
+ left: -5px;
376
+ font-size: 16px;
377
+ font-weight: 500;
378
+ line-height: 24px;
379
+ padding: 0;
380
+ }
381
+ .m-container-fieldset.fieldset-in-card-fit {
382
+ border-bottom: 1px solid #e6e6e6;
383
+ }
384
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset {
385
+ padding: 16px 0 16px 0 !important;
386
+ border: 0;
387
+ margin-top: 0;
388
+ margin-bottom: 0;
389
+ }
390
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
391
+ position: relative;
392
+ top: 10px;
393
+ }
394
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
395
+ padding-bottom: 0 !important;
396
+ border-bottom: 0;
397
+ }
398
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-first {
399
+ padding-top: 0 !important;
400
+ }
401
+ .m-container-fieldset.fieldset-in-card-fit:last-child {
402
+ padding-bottom: 0 !important;
403
+ border-bottom: 0;
404
+ }
405
+ .m-container-fieldset.fieldset-in-card-fit:first {
406
+ padding-top: 0 !important;
407
+ }
408
+
267
409
  fieldset.m-fieldset {
268
410
  position: relative;
269
411
  border: 1px solid rgb(229, 229, 229);
@@ -290,6 +432,9 @@ fieldset.m-fieldset .m-form-tip {
290
432
  margin-left: 5px;
291
433
  }
292
434
 
435
+ .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
436
+ border: 0;
437
+ }
293
438
  .m-fields-group-list .el-button--text {
294
439
  padding: 0;
295
440
  margin-bottom: 7px;
@@ -308,23 +453,23 @@ fieldset.m-fieldset .m-form-tip {
308
453
  .m-fields-group-list .m-fields-group-list-item:last-of-type {
309
454
  border-bottom: 0;
310
455
  }
311
- .m-fields-group-list .tmagic-design-card .el-card__header {
312
- padding: 5px 20px;
313
- }
314
- .m-fields-group-list .tmagic-design-card .t-card__header {
315
- padding: 5px 0;
456
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
457
+ display: flex;
458
+ align-items: center;
459
+ gap: 8px;
316
460
  }
317
461
  .m-fields-group-list .m-fields-group-list-footer {
318
462
  display: flex;
319
463
  justify-content: space-between;
320
464
  margin-top: 10px;
465
+ margin-bottom: 16px;
321
466
  }
322
467
 
323
468
  .m-form-panel .el-card__header:hover {
324
469
  background: #f2f6fc;
325
470
  }
326
471
  .m-form-panel .el-card__header a {
327
- color: #409eff;
472
+ color: var(--el-color-primary, #409eff);
328
473
  }
329
474
  .m-form-panel .el-card__body {
330
475
  padding: 10px;
@@ -403,8 +548,8 @@ fieldset.m-fieldset .m-form-tip {
403
548
  margin-right: auto;
404
549
  min-width: 50px;
405
550
  outline: none;
406
- border-color: #409eff;
407
- color: #409eff;
551
+ border-color: var(--el-color-primary, #409eff);
552
+ color: var(--el-color-primary, #409eff);
408
553
  width: 10px;
409
554
  }
410
555
  .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab::before {
@@ -443,6 +588,22 @@ fieldset.m-fieldset .m-form-tip {
443
588
  justify-content: space-between;
444
589
  }
445
590
 
591
+ .m-fields-radio-group__option {
592
+ display: flex;
593
+ align-items: center;
594
+ }
595
+
596
+ .m-fields-radio-group__text {
597
+ display: inline-block;
598
+ vertical-align: middle;
599
+ white-space: pre-line;
600
+ line-height: 20px;
601
+ }
602
+
603
+ .m-fields-radio-group__icon_with_text {
604
+ margin-right: 8px;
605
+ }
606
+
446
607
  .tmagic-design-input.search-input {
447
608
  background: #fff;
448
609
  color: #bbbbbb;
@@ -600,7 +761,7 @@ fieldset.m-fieldset .m-form-tip {
600
761
  color: #909399;
601
762
  }
602
763
  .m-editor-history-list-popover .m-editor-history-list-close:hover {
603
- color: #409eff;
764
+ color: var(--el-color-primary, #409eff);
604
765
  }
605
766
  .m-editor-history-list-popover .m-editor-history-list-tabs .el-tabs__header,
606
767
  .m-editor-history-list-popover .m-editor-history-list-tabs .t-tabs__header {
@@ -656,14 +817,14 @@ fieldset.m-fieldset .m-form-tip {
656
817
  }
657
818
  .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) {
658
819
  background-color: rgba(64, 158, 255, 0.1);
659
- box-shadow: inset 2px 0 0 #409eff;
820
+ box-shadow: inset 2px 0 0 var(--el-color-primary, #409eff);
660
821
  }
661
822
  .m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged):hover {
662
823
  background-color: rgba(64, 158, 255, 0.16);
663
824
  }
664
825
  .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 {
665
826
  font-weight: 600;
666
- color: #409eff;
827
+ color: var(--el-color-primary, #409eff);
667
828
  }
668
829
  .m-editor-history-list-popover .m-editor-history-list-group {
669
830
  flex-direction: column;
@@ -718,11 +879,11 @@ fieldset.m-fieldset .m-form-tip {
718
879
  .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current {
719
880
  background-color: rgba(64, 158, 255, 0.08);
720
881
  border-color: rgba(64, 158, 255, 0.3);
721
- border-left-color: #409eff;
882
+ border-left-color: var(--el-color-primary, #409eff);
722
883
  box-shadow: none;
723
884
  }
724
885
  .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current .m-editor-history-list-group-head {
725
- color: #409eff;
886
+ color: var(--el-color-primary, #409eff);
726
887
  }
727
888
  .m-editor-history-list-popover .m-editor-history-list-substeps {
728
889
  margin: 6px 0 0 6px;
@@ -750,7 +911,7 @@ fieldset.m-fieldset .m-form-tip {
750
911
  color: #c0c4cc;
751
912
  }
752
913
  .m-editor-history-list-popover .m-editor-history-list-substeps li.is-current {
753
- color: #409eff;
914
+ color: var(--el-color-primary, #409eff);
754
915
  font-weight: 600;
755
916
  background-color: rgba(64, 158, 255, 0.08);
756
917
  border-radius: 3px;
@@ -762,7 +923,7 @@ fieldset.m-fieldset .m-form-tip {
762
923
  font-size: 10px;
763
924
  line-height: 16px;
764
925
  color: #fff;
765
- background-color: #409eff;
926
+ background-color: var(--el-color-primary, #409eff);
766
927
  font-weight: 500;
767
928
  }
768
929
  .m-editor-history-list-popover .m-editor-history-list-item-index {
@@ -891,7 +1052,7 @@ fieldset.m-fieldset .m-form-tip {
891
1052
  border-radius: 2px;
892
1053
  font-size: 10px;
893
1054
  line-height: 16px;
894
- color: #409eff;
1055
+ color: var(--el-color-primary, #409eff);
895
1056
  background-color: rgba(64, 158, 255, 0.1);
896
1057
  cursor: pointer;
897
1058
  user-select: none;
@@ -954,7 +1115,7 @@ fieldset.m-fieldset .m-form-tip {
954
1115
  flex: 1 1 auto;
955
1116
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
956
1117
  font-size: 11px;
957
- color: #409eff;
1118
+ color: var(--el-color-primary, #409eff);
958
1119
  overflow: hidden;
959
1120
  text-overflow: ellipsis;
960
1121
  white-space: nowrap;
@@ -1080,8 +1241,8 @@ fieldset.m-fieldset .m-form-tip {
1080
1241
  margin-top: 5px;
1081
1242
  }
1082
1243
  .m-editor-empty-button:hover {
1083
- border-color: #2882e0;
1084
- color: #2882e0;
1244
+ border-color: var(--el-color-primary, #2882e0);
1245
+ color: var(--el-color-primary, #2882e0);
1085
1246
  }
1086
1247
 
1087
1248
  .m-editor-sidebar {
@@ -1090,7 +1251,7 @@ fieldset.m-fieldset .m-form-tip {
1090
1251
  position: relative;
1091
1252
  }
1092
1253
  .m-editor-sidebar .m-editor-sidebar-header {
1093
- background: #2882e0;
1254
+ background: var(--el-color-primary, #2882e0);
1094
1255
  height: 100%;
1095
1256
  width: 40px;
1096
1257
  }
@@ -1272,9 +1433,9 @@ fieldset.m-fieldset .m-form-tip {
1272
1433
  }
1273
1434
  .ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item i:hover,
1274
1435
  .ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item i:hover {
1275
- background: #2882e0;
1436
+ background: var(--el-color-primary, #2882e0);
1276
1437
  color: #fff;
1277
- border-color: #4e8be1;
1438
+ border-color: var(--el-color-primary, #4e8be1);
1278
1439
  }
1279
1440
  .ui-component-panel.tmagic-design-collapse .el-collapse-item__wrap .component-item span,
1280
1441
  .ui-component-panel.tmagic-design-collapse .t-collapse-panel__body .component-item span {
@@ -1424,7 +1585,7 @@ fieldset.m-fieldset .m-form-tip {
1424
1585
  }
1425
1586
  .m-editor-page-bar-item-icon .icon-active {
1426
1587
  font-weight: bold;
1427
- color: #2882e0;
1588
+ color: var(--el-color-primary, #2882e0);
1428
1589
  }
1429
1590
  .m-editor-page-bar-item-title {
1430
1591
  max-width: 150px;
@@ -1458,7 +1619,7 @@ fieldset.m-fieldset .m-form-tip {
1458
1619
  background-color: #f3f5f9;
1459
1620
  }
1460
1621
  .page-bar-popover .menu-item.active .tmagic-design-button {
1461
- color: #2882e0;
1622
+ color: var(--el-color-primary, #2882e0);
1462
1623
  }
1463
1624
 
1464
1625
  .m-editor-page-bar-search-panel {
@@ -1569,7 +1730,8 @@ fieldset.m-fieldset .m-form-tip {
1569
1730
  padding-left: 10px;
1570
1731
  }
1571
1732
  .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
1572
- padding-top: 55px;
1733
+ margin-top: var(--el-tabs-header-height);
1734
+ padding-top: 15px;
1573
1735
  }
1574
1736
  .m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
1575
1737
  position: absolute;
@@ -1638,7 +1800,7 @@ fieldset.m-fieldset .m-form-tip {
1638
1800
  color: #313a40;
1639
1801
  }
1640
1802
  .magic-editor-content-menu .menu-item.button.active {
1641
- background-color: #2882e0;
1803
+ background-color: var(--el-color-primary, #2882e0);
1642
1804
  }
1643
1805
  .magic-editor-content-menu .menu-item.button.active .tmagic-design-button,
1644
1806
  .magic-editor-content-menu .menu-item.button.active .tmagic-design-button:active,
@@ -1769,12 +1931,51 @@ fieldset.m-fieldset .m-form-tip {
1769
1931
  .m-fields-code-select {
1770
1932
  width: 100%;
1771
1933
  }
1934
+ .m-fields-code-select > .el-card.tmagic-design-card--flat {
1935
+ background-color: transparent;
1936
+ margin-bottom: 10px;
1937
+ }
1938
+ .m-fields-code-select > .el-card.tmagic-design-card--flat > .el-card__body {
1939
+ padding-left: 0;
1940
+ }
1941
+ .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 {
1942
+ padding-left: 16px;
1943
+ padding-right: 16px;
1944
+ margin-bottom: 10px;
1945
+ border: 0 !important;
1946
+ }
1947
+ .m-fields-code-select .el-card__body .tmagic-design-form-item {
1948
+ margin-bottom: 18px;
1949
+ }
1950
+ .m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
1951
+ padding: 16px 0;
1952
+ }
1953
+ .m-fields-code-select .create-button.fullWidth {
1954
+ width: 100%;
1955
+ margin: 0 0 16px 0;
1956
+ }
1772
1957
 
1773
1958
  .m-fields-event-select {
1774
1959
  width: 100%;
1775
1960
  }
1776
1961
  .m-fields-event-select .fullWidth {
1777
1962
  width: 100%;
1963
+ box-sizing: border-box;
1964
+ }
1965
+ .m-fields-event-select .event-select-container {
1966
+ padding: 0 16px;
1967
+ }
1968
+ .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__header {
1969
+ border-bottom: 1px solid #ebeef5;
1970
+ }
1971
+ .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body {
1972
+ padding-bottom: 16px;
1973
+ }
1974
+ .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
1975
+ justify-content: flex-start !important;
1976
+ }
1977
+ .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 {
1978
+ padding: 16px 0;
1778
1979
  }
1779
1980
  .m-fields-event-select .event-select-code {
1780
1981
  margin-left: 20px;
@@ -1808,6 +2009,40 @@ fieldset.m-fieldset .m-form-tip {
1808
2009
  margin-right: 5px;
1809
2010
  }
1810
2011
 
2012
+ .event-select-container {
2013
+ padding: 0 16px;
2014
+ }
2015
+
2016
+ .event-select-header {
2017
+ display: flex;
2018
+ align-items: center;
2019
+ justify-content: space-between;
2020
+ margin-bottom: 8px;
2021
+ }
2022
+ .event-select-header .event-select-title {
2023
+ color: #0f1113;
2024
+ font-size: 16px;
2025
+ font-weight: 500;
2026
+ line-height: 24px;
2027
+ }
2028
+
2029
+ .event-item-header {
2030
+ position: relative;
2031
+ width: 100%;
2032
+ }
2033
+ .event-item-header .event-item-title {
2034
+ color: #0f1113;
2035
+ font-size: 16px;
2036
+ font-weight: 500;
2037
+ line-height: 24px;
2038
+ margin-bottom: 16px;
2039
+ }
2040
+ .event-item-header .event-item-delete-button {
2041
+ position: absolute;
2042
+ right: 0;
2043
+ top: 0;
2044
+ }
2045
+
1811
2046
  .m-editor-layout {
1812
2047
  width: 100%;
1813
2048
  display: flex;
@@ -1944,18 +2179,18 @@ fieldset.m-fieldset .m-form-tip {
1944
2179
  color: #313a40;
1945
2180
  }
1946
2181
  .m-editor-tree .m-editor-tree-node .tree-node.selected {
1947
- background-color: #2882e0;
2182
+ background-color: var(--el-color-primary, #2882e0);
1948
2183
  color: #f3f5f9;
1949
2184
  }
1950
2185
  .m-editor-tree .m-editor-tree-node .tree-node.drag-inner .tree-node-content {
1951
- background-color: rgba(40, 130, 224, 0.5);
2186
+ background-color: rgba(var(--el-color-primary, #2882e0), 0.5);
1952
2187
  color: #f3f5f9;
1953
2188
  }
1954
2189
  .m-editor-tree .m-editor-tree-node .tree-node.drag-before .tree-node-content {
1955
- border-top-color: rgba(40, 130, 224, 0.5);
2190
+ border-top-color: rgba(var(--el-color-primary, #2882e0), 0.5);
1956
2191
  }
1957
2192
  .m-editor-tree .m-editor-tree-node .tree-node.drag-after .tree-node-content {
1958
- border-bottom-color: rgba(40, 130, 224, 0.5);
2193
+ border-bottom-color: rgba(var(--el-color-primary, #2882e0), 0.5);
1959
2194
  }
1960
2195
  .m-editor-tree .m-editor-tree-node .tree-node .expand-icon {
1961
2196
  padding: 4px;
@@ -2050,6 +2285,15 @@ fieldset.m-fieldset .m-form-tip {
2050
2285
  display: flex;
2051
2286
  align-items: center;
2052
2287
  }
2288
+ .m-fields-data-source-select.data-source-field-img-upload, .m-fields-data-source-select.data-source-field-big-img-upload,
2289
+ .m-fields-data-source-field-select.data-source-field-img-upload,
2290
+ .m-fields-data-source-field-select.data-source-field-big-img-upload,
2291
+ .m-fields-data-source-method-select .data-source-method-select-container.data-source-field-img-upload,
2292
+ .m-fields-data-source-method-select .data-source-method-select-container.data-source-field-big-img-upload,
2293
+ .m-fields-code-select-col .code-select-container.data-source-field-img-upload,
2294
+ .m-fields-code-select-col .code-select-container.data-source-field-big-img-upload {
2295
+ align-items: flex-start;
2296
+ }
2053
2297
  .m-fields-data-source-select .m-fields-select-action-button,
2054
2298
  .m-fields-data-source-field-select .m-fields-select-action-button,
2055
2299
  .m-fields-data-source-method-select .data-source-method-select-container .m-fields-select-action-button,
@@ -2076,8 +2320,19 @@ fieldset.m-fieldset .m-form-tip {
2076
2320
  padding: 5px 8px;
2077
2321
  }
2078
2322
 
2323
+ .m-container-text.display-conds-title .tmagic-design-form-item .el-form-item__label {
2324
+ color: #111;
2325
+ font-weight: 500;
2326
+ font-size: 16px;
2327
+ }
2328
+ .m-container-text.display-conds-title .tmagic-design-form-item {
2329
+ line-height: 24px;
2330
+ margin-bottom: 10px;
2331
+ }
2332
+
2079
2333
  .border-box-container {
2080
2334
  display: flex;
2335
+ --unuse-border-style: dashed;
2081
2336
  }
2082
2337
  .border-box-container .border-icon-container {
2083
2338
  display: flex;
@@ -2109,24 +2364,27 @@ fieldset.m-fieldset .m-form-tip {
2109
2364
  border-color: var(--el-color-success, var(--td-success-color, #2ba471));
2110
2365
  }
2111
2366
  .border-box-container .border-icon-container .border-icon.active {
2367
+ border-color: var(--el-color-primary);
2368
+ border-width: 1px;
2369
+ }
2370
+ .border-box-container .border-icon-container .border-icon.center {
2112
2371
  border-width: 1px;
2113
- border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
2114
2372
  }
2115
2373
  .border-box-container .border-icon-container .border-icon.border-icon-top {
2116
2374
  border-top-width: 2px;
2117
- border-style: solid dashed dashed dashed;
2375
+ border-style: solid var(--unuse-border-style) var(--unuse-border-style) var(--unuse-border-style);
2118
2376
  }
2119
2377
  .border-box-container .border-icon-container .border-icon.border-icon-right {
2120
2378
  border-right-width: 2px;
2121
- border-style: dashed solid dashed dashed;
2379
+ border-style: var(--unuse-border-style) solid var(--unuse-border-style) var(--unuse-border-style);
2122
2380
  }
2123
2381
  .border-box-container .border-icon-container .border-icon.border-icon-bottom {
2124
2382
  border-bottom-width: 2px;
2125
- border-style: dashed dashed solid dashed;
2383
+ border-style: var(--unuse-border-style) var(--unuse-border-style) solid var(--unuse-border-style);
2126
2384
  }
2127
2385
  .border-box-container .border-icon-container .border-icon.border-icon-left {
2128
2386
  border-left-width: 2px;
2129
- border-style: dashed dashed dashed solid;
2387
+ border-style: var(--unuse-border-style) var(--unuse-border-style) var(--unuse-border-style) solid;
2130
2388
  }
2131
2389
  .border-box-container .border-value-container {
2132
2390
  margin-left: 16px;
@@ -2346,7 +2604,7 @@ fieldset.m-fieldset .m-form-tip {
2346
2604
  border: 1px solid #1d1f24;
2347
2605
  }
2348
2606
  .background-position-container .presets-value-list .position-icon.active {
2349
- background-color: #2882e0;
2607
+ background-color: var(--el-color-primary, #2882e0);
2350
2608
  }
2351
2609
  .background-position-container .presets-value-list .position-icon.active::after {
2352
2610
  border: 1px solid #fff;