@tmagic/editor 1.2.13 → 1.2.15

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 (97) hide show
  1. package/dist/style.css +161 -69
  2. package/dist/tmagic-editor.js +784 -419
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +802 -444
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +14 -13
  7. package/src/components/CodeDraftEditor.vue +20 -17
  8. package/src/components/ContentMenu.vue +1 -1
  9. package/src/components/FunctionEditor.vue +10 -10
  10. package/src/components/Layout.vue +1 -1
  11. package/src/components/ScrollViewer.vue +2 -2
  12. package/src/components/SearchInput.vue +6 -3
  13. package/src/fields/CodeSelect.vue +18 -101
  14. package/src/fields/CodeSelectCol.vue +21 -3
  15. package/src/fields/EventSelect.vue +5 -3
  16. package/src/fields/UISelect.vue +1 -1
  17. package/src/icons/AppManageIcon.vue +11 -0
  18. package/src/icons/CodeIcon.vue +26 -0
  19. package/src/layouts/AddPageBox.vue +3 -3
  20. package/src/layouts/Framework.vue +4 -4
  21. package/src/layouts/NavMenu.vue +2 -2
  22. package/src/layouts/PropsPanel.vue +1 -1
  23. package/src/layouts/sidebar/ComponentListPanel.vue +3 -3
  24. package/src/layouts/sidebar/LayerMenu.vue +2 -2
  25. package/src/layouts/sidebar/LayerPanel.vue +4 -4
  26. package/src/layouts/sidebar/Sidebar.vue +13 -12
  27. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +15 -6
  28. package/src/layouts/sidebar/code-block/CodeBlockList.vue +28 -15
  29. package/src/layouts/workspace/Breadcrumb.vue +1 -1
  30. package/src/layouts/workspace/PageBar.vue +2 -2
  31. package/src/layouts/workspace/PageBarScrollContainer.vue +3 -3
  32. package/src/layouts/workspace/Stage.vue +3 -3
  33. package/src/layouts/workspace/ViewerMenu.vue +4 -4
  34. package/src/layouts/workspace/Workspace.vue +1 -1
  35. package/src/services/BaseService.ts +1 -1
  36. package/src/services/codeBlock.ts +3 -3
  37. package/src/services/componentList.ts +1 -1
  38. package/src/services/editor.ts +6 -6
  39. package/src/services/events.ts +1 -1
  40. package/src/services/history.ts +2 -2
  41. package/src/services/props.ts +4 -17
  42. package/src/services/ui.ts +2 -2
  43. package/src/theme/code-block.scss +11 -49
  44. package/src/theme/dep-list.scss +59 -0
  45. package/src/theme/event.scss +12 -0
  46. package/src/theme/sidebar.scss +26 -6
  47. package/src/theme/theme.scss +1 -0
  48. package/src/utils/config.ts +1 -1
  49. package/src/utils/dep.ts +2 -2
  50. package/src/utils/editor.ts +1 -1
  51. package/src/utils/operator.ts +4 -4
  52. package/src/utils/stage.ts +3 -3
  53. package/tsconfig.build.json +4 -1
  54. package/types/components/CodeDraftEditor.vue.d.ts +7 -4
  55. package/types/components/ContentMenu.vue.d.ts +3 -3
  56. package/types/components/FunctionEditor.vue.d.ts +140 -8
  57. package/types/components/Icon.vue.d.ts +2 -2
  58. package/types/components/Layout.vue.d.ts +28 -113
  59. package/types/components/ScrollBar.vue.d.ts +2 -2
  60. package/types/components/ScrollViewer.vue.d.ts +32 -135
  61. package/types/components/ToolButton.vue.d.ts +3 -3
  62. package/types/fields/Code.vue.d.ts +2 -2
  63. package/types/fields/CodeLink.vue.d.ts +2 -2
  64. package/types/fields/CodeSelect.vue.d.ts +8 -27
  65. package/types/fields/CodeSelectCol.vue.d.ts +3 -3
  66. package/types/fields/EventSelect.vue.d.ts +3 -3
  67. package/types/fields/UISelect.vue.d.ts +2 -2
  68. package/types/icons/AppManageIcon.vue.d.ts +2 -0
  69. package/types/icons/CodeIcon.vue.d.ts +2 -0
  70. package/types/layouts/CodeEditor.vue.d.ts +4 -4
  71. package/types/layouts/Framework.vue.d.ts +23 -74
  72. package/types/layouts/NavMenu.vue.d.ts +3 -3
  73. package/types/layouts/PropsPanel.vue.d.ts +11 -60
  74. package/types/layouts/Resizer.vue.d.ts +9 -54
  75. package/types/layouts/sidebar/ComponentListPanel.vue.d.ts +11 -50
  76. package/types/layouts/sidebar/LayerMenu.vue.d.ts +2 -2
  77. package/types/layouts/sidebar/LayerPanel.vue.d.ts +17 -60
  78. package/types/layouts/sidebar/Sidebar.vue.d.ts +39 -104
  79. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +15 -58
  80. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +21 -66
  81. package/types/layouts/workspace/PageBar.vue.d.ts +13 -52
  82. package/types/layouts/workspace/PageBarScrollContainer.vue.d.ts +8 -48
  83. package/types/layouts/workspace/Stage.vue.d.ts +2 -2
  84. package/types/layouts/workspace/ViewerMenu.vue.d.ts +3 -3
  85. package/types/layouts/workspace/Workspace.vue.d.ts +20 -63
  86. package/types/services/codeBlock.d.ts +1 -1
  87. package/types/services/componentList.d.ts +1 -1
  88. package/types/services/dep.d.ts +2 -2
  89. package/types/services/editor.d.ts +1 -1
  90. package/types/services/events.d.ts +1 -1
  91. package/types/services/history.d.ts +2 -2
  92. package/types/services/props.d.ts +90 -7
  93. package/types/services/storage.d.ts +1 -1
  94. package/types/services/ui.d.ts +2 -2
  95. package/types/type.d.ts +8 -8
  96. package/types/utils/operator.d.ts +1 -1
  97. package/types/utils/props.d.ts +78 -1
package/dist/style.css CHANGED
@@ -188,66 +188,133 @@
188
188
  border-color: #2882e0;
189
189
  color: #2882e0;
190
190
  }
191
- .m-editor-sidebar {
191
+ .m-editor-sidebar.tmagic-design-tabs {
192
192
  height: 100%;
193
193
  }
194
- .m-editor-sidebar.el-tabs--left .el-tabs__header {
194
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header,
195
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header {
195
196
  background: #2882e0;
196
197
  border: 0;
198
+ height: 100%;
199
+ }
200
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card,
201
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card {
202
+ background-color: transparent;
197
203
  }
198
- .m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {
204
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover,
205
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover {
206
+ background-color: transparent;
207
+ }
208
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.is-left, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.t-is-left,
209
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header.is-left,
210
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header.t-is-left {
199
211
  width: 40px;
200
212
  margin-right: 0;
201
213
  }
202
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {
214
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav-wrap,
215
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav-wrap {
203
216
  margin: 0;
204
217
  }
205
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {
218
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav,
219
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav {
206
220
  border: 0;
207
221
  border-radius: 0;
208
222
  }
209
- .m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {
223
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .tab-label,
224
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .tab-label {
210
225
  margin-left: 2px;
211
226
  }
212
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {
227
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left,
228
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
229
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left,
230
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
213
231
  line-height: 15px;
214
232
  border: 0;
215
233
  height: auto;
216
234
  padding: 8px;
217
- color: rgb(255, 255, 255);
235
+ color: white;
218
236
  box-sizing: border-box;
219
237
  }
220
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
238
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
239
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active,
240
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active,
241
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active,
242
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active,
243
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active,
244
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active,
245
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active,
246
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
247
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active,
248
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active,
249
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active,
250
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active {
221
251
  background: #ffffff;
222
252
  border: 0;
223
253
  }
224
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {
254
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
255
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active i,
256
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
257
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
258
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i,
259
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active i,
260
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active i,
261
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active i,
262
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
263
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active i,
264
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
265
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
266
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i {
225
267
  color: #353140;
226
268
  }
227
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {
269
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
270
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
271
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
272
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
273
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title,
274
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title,
275
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title,
276
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title,
277
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
278
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
279
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
280
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
281
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title {
228
282
  color: #353140;
229
283
  }
230
- .m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {
284
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left:first-child, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
285
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left:first-child,
286
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left:first-child,
287
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left:first-child,
288
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
289
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left:first-child,
290
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left:first-child {
231
291
  border-right: 0;
232
292
  }
233
- .m-editor-sidebar.el-tabs--left .el-tabs__header i {
293
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
294
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
295
+ padding: 7px;
296
+ }
297
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header i,
298
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header i {
234
299
  font-size: 25px;
235
300
  color: rgba(255, 255, 255, 0.6);
236
301
  }
237
- .m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {
238
- color: rgb(255, 255, 255);
302
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header i:hover,
303
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header i:hover {
304
+ color: white;
239
305
  }
240
- .m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {
306
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .magic-editor-tab-panel-title,
307
+ .m-editor-sidebar.tmagic-design-tabs .t-tabs__header .magic-editor-tab-panel-title {
241
308
  font-size: 12px;
242
309
  white-space: normal;
243
310
  }
244
- .m-editor-sidebar .el-scrollbar {
311
+ .m-editor-sidebar.tmagic-design-tabs .el-scrollbar {
245
312
  height: 100%;
246
313
  }
247
- .m-editor-sidebar .el-tree {
314
+ .m-editor-sidebar.tmagic-design-tabs .el-tree {
248
315
  min-height: 100%;
249
316
  }
250
- .m-editor-sidebar .fold-icon {
317
+ .m-editor-sidebar.tmagic-design-tabs .fold-icon {
251
318
  position: absolute;
252
319
  bottom: 8px;
253
320
  left: 0px;
@@ -258,11 +325,11 @@
258
325
  opacity: 0.8;
259
326
  cursor: pointer;
260
327
  }
261
- .m-editor-sidebar .fold-icon:hover {
328
+ .m-editor-sidebar.tmagic-design-tabs .fold-icon:hover {
262
329
  background: rgba(0, 0, 0, 0.2);
263
330
  }
264
- .m-editor-sidebar .el-tabs__content,
265
- .m-editor-sidebar .el-tab-pane {
331
+ .m-editor-sidebar.tmagic-design-tabs .el-tabs__content,
332
+ .m-editor-sidebar.tmagic-design-tabs .el-tab-pane {
266
333
  height: 100%;
267
334
  }
268
335
  .magic-editor-layer-panel {
@@ -618,58 +685,21 @@
618
685
  .m-editor-code-block-list {
619
686
  height: 100%;
620
687
  }
621
- .m-editor-code-block-list .magic-editor-layer-tree {
622
- padding-top: 48px;
623
- }
624
- .m-editor-code-block-list .code-header-wrapper {
625
- display: flex;
626
- align-items: center;
627
- justify-content: center;
628
- position: absolute;
629
- top: 0;
630
- width: 100%;
631
- z-index: 1;
632
- }
633
- .m-editor-code-block-list .code-header-wrapper .search-input {
634
- flex: 1;
635
- position: relative;
636
- }
637
- .m-editor-code-block-list .code-header-wrapper .create-code-button {
638
- margin-left: 2px;
639
- margin-right: 10px;
640
- }
641
- .m-editor-code-block-list .divider {
642
- margin: 10px 0 0 0;
643
- }
644
- .m-editor-code-block-list .list-container {
645
- width: 100%;
646
- overflow: hidden;
647
- }
648
- .m-editor-code-block-list .list-container .list-item {
649
- display: flex;
650
- width: 100%;
651
- }
652
- .m-editor-code-block-list .list-container .list-item .right-tool {
653
- display: flex;
654
- width: fit-content !important;
655
- }
656
- .m-editor-code-block-list .list-container .list-item .right-tool .edit-icon {
657
- margin: 0 5px;
688
+ .m-editor-code-block-list .list-container .list-item .codeIcon {
689
+ width: 22px;
690
+ height: 22px;
691
+ margin-right: 5px;
658
692
  }
659
- .m-editor-code-block-list .list-container .list-item .code-name {
660
- white-space: nowrap;
661
- overflow: hidden;
662
- text-overflow: ellipsis;
663
- width: 0 !important;
664
- flex: 1;
665
- line-height: 18px;
693
+ .m-editor-code-block-list .list-container .list-item .compIcon {
694
+ width: 22px;
695
+ height: 22px;
696
+ margin-right: 5px;
666
697
  }
667
698
  .m-fields-code-select {
668
699
  width: 100%;
669
700
  }
670
- .m-fields-code-select .edit-icon {
671
- cursor: pointer;
672
- margin-right: 5px;
701
+ .m-fields-code-select .el-card__header {
702
+ display: none;
673
703
  }
674
704
  .el-dialog.is-fullscreen.code-editor-dialog {
675
705
  overflow: hidden;
@@ -801,6 +831,18 @@
801
831
  .m-fields-code-select-col {
802
832
  width: 100%;
803
833
  }
834
+ .m-fields-code-select-col .code-select-container {
835
+ display: flex;
836
+ align-items: center;
837
+ }
838
+ .m-fields-code-select-col .code-select-container .select {
839
+ flex: 10 0 100px;
840
+ }
841
+ .m-fields-code-select-col .code-select-container .icon {
842
+ flex: 1 0 20px;
843
+ cursor: pointer;
844
+ margin-right: 5px;
845
+ }
804
846
  .m-editor-layout {
805
847
  width: 100%;
806
848
  display: flex;
@@ -811,4 +853,54 @@
811
853
  left: 5px;
812
854
  top: 5px;
813
855
  z-index: 10;
856
+ }
857
+ .m-editor-dep-list-panel .magic-editor-layer-tree {
858
+ padding-top: 48px;
859
+ }
860
+ .m-editor-dep-list-panel .search-wrapper {
861
+ display: flex;
862
+ align-items: center;
863
+ justify-content: center;
864
+ position: absolute;
865
+ top: 0;
866
+ width: 100%;
867
+ z-index: 1;
868
+ }
869
+ .m-editor-dep-list-panel .search-wrapper .search-input {
870
+ flex: 1;
871
+ position: relative;
872
+ }
873
+ .m-editor-dep-list-panel .search-wrapper .tmagic-design-button {
874
+ margin-right: 10px;
875
+ }
876
+ .m-editor-dep-list-panel .list-container {
877
+ width: 100%;
878
+ overflow: hidden;
879
+ }
880
+ .m-editor-dep-list-panel .list-container .list-item {
881
+ display: flex;
882
+ width: 100%;
883
+ align-items: center;
884
+ }
885
+ .m-editor-dep-list-panel .list-container .list-item .right-tool {
886
+ display: flex;
887
+ width: fit-content !important;
888
+ align-items: center;
889
+ }
890
+ .m-editor-dep-list-panel .list-container .list-item .right-tool .edit-icon {
891
+ margin: 0 5px;
892
+ }
893
+ .m-editor-dep-list-panel .list-container .list-item .name {
894
+ white-space: nowrap;
895
+ overflow: hidden;
896
+ text-overflow: ellipsis;
897
+ width: 0 !important;
898
+ flex: 1;
899
+ line-height: 22px;
900
+ }
901
+ .m-editor-dep-list-panel .list-container .list-item .name.code {
902
+ color: #000;
903
+ }
904
+ .m-editor-dep-list-panel .list-container .list-item .name.hook {
905
+ color: #909399;
814
906
  }