@tmagic/editor 1.8.0-manmanyu.17 → 1.8.0-manmanyu.19

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 (16) hide show
  1. package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js +4 -8
  2. package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js +35 -49
  3. package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js +1 -1
  4. package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +3 -3
  5. package/dist/es/style.css +5 -0
  6. package/dist/es/utils/const.js +1 -1
  7. package/dist/style.css +5 -0
  8. package/dist/themes/magic-admin.css +50 -12
  9. package/dist/tmagic-editor.umd.cjs +43 -61
  10. package/package.json +7 -7
  11. package/src/fields/StyleSetter/pro/Background.vue +3 -4
  12. package/src/fields/StyleSetter/pro/Layout.vue +23 -30
  13. package/src/layouts/sidebar/Sidebar.vue +3 -3
  14. package/src/theme/themes/magic-admin/index.scss +45 -0
  15. package/src/utils/const.ts +2 -2
  16. package/types/index.d.ts +1 -1
package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -68,26 +68,22 @@ var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
68
68
  {
69
69
  value: "no-repeat",
70
70
  icon: markRaw(NoRepeat_default),
71
- tooltip: "不重复 no-repeat",
72
- text: "不重复"
71
+ tooltip: "不重复 no-repeat"
73
72
  },
74
73
  {
75
74
  value: "repeat-x",
76
75
  icon: markRaw(RepeatX_default),
77
- tooltip: "水平方向重复 repeat-x",
78
- text: "水平重复"
76
+ tooltip: "水平方向重复 repeat-x"
79
77
  },
80
78
  {
81
79
  value: "repeat-y",
82
80
  icon: markRaw(RepeatY_default),
83
- tooltip: "垂直方向重复 repeat-y",
84
- text: "垂直重复"
81
+ tooltip: "垂直方向重复 repeat-y"
85
82
  },
86
83
  {
87
84
  value: "repeat",
88
85
  icon: markRaw(Repeat_default),
89
- tooltip: "垂直和水平方向重复 repeat",
90
- text: "垂直与水平重复"
86
+ tooltip: "垂直和水平方向重复 repeat"
91
87
  }
92
88
  ]
93
89
  },
package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -42,38 +42,34 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
42
42
  name: "display",
43
43
  text: "模式",
44
44
  type: "radioGroup",
45
- childType: displayTheme.value !== "magic-admin" ? "button" : "default",
46
- labelWidth: "68px",
45
+ childType: "button",
46
+ labelWidth: "90px",
47
+ iconSize: "24px",
47
48
  options: [
48
49
  {
49
50
  value: "inline",
50
- icon: displayTheme.value !== "magic-admin" ? markRaw(Inline_default) : void 0,
51
- tooltip: "内联布局 inline",
52
- text: "内联布局\n inline"
51
+ icon: markRaw(Inline_default),
52
+ tooltip: "内联布局 inline"
53
53
  },
54
54
  {
55
55
  value: "flex",
56
- icon: displayTheme.value !== "magic-admin" ? markRaw(Flex_default) : void 0,
57
- tooltip: "弹性布局 flex",
58
- text: "弹性布局\n flex"
56
+ icon: markRaw(Flex_default),
57
+ tooltip: "弹性布局 flex"
59
58
  },
60
59
  {
61
60
  value: "block",
62
- icon: displayTheme.value !== "magic-admin" ? markRaw(Block_default) : void 0,
63
- tooltip: "块级布局 block",
64
- text: "块级布局\n block"
61
+ icon: markRaw(Block_default),
62
+ tooltip: "块级布局 block"
65
63
  },
66
64
  {
67
65
  value: "inline-block",
68
- icon: displayTheme.value !== "magic-admin" ? markRaw(InlineBlock_default) : void 0,
69
- tooltip: "内联块布局 inline-block",
70
- text: "内联块布局\n inline-block"
66
+ icon: markRaw(InlineBlock_default),
67
+ tooltip: "内联块布局 inline-block"
71
68
  },
72
69
  {
73
70
  value: "none",
74
- icon: displayTheme.value !== "magic-admin" ? markRaw(None_default) : void 0,
75
- tooltip: "隐藏 none",
76
- text: "隐藏\n none"
71
+ icon: markRaw(None_default),
72
+ tooltip: "隐藏 none"
77
73
  }
78
74
  ]
79
75
  },
@@ -82,31 +78,28 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
82
78
  text: "主轴方向",
83
79
  type: "radioGroup",
84
80
  childType: "button",
85
- labelWidth: "68px",
81
+ labelWidth: "90px",
82
+ iconSize: "24px",
86
83
  options: [
87
84
  {
88
85
  value: "row",
89
86
  icon: markRaw(Row_default),
90
- tooltip: "水平方向 起点在左侧 row",
91
- text: "左起点"
87
+ tooltip: "水平方向 起点在左侧 row"
92
88
  },
93
89
  {
94
90
  value: "row-reverse",
95
91
  icon: markRaw(RowReverse_default),
96
- tooltip: "水平方向 起点在右侧 row-reverse",
97
- text: "右起点"
92
+ tooltip: "水平方向 起点在右侧 row-reverse"
98
93
  },
99
94
  {
100
95
  value: "column",
101
96
  icon: markRaw(Column_default),
102
- tooltip: "垂直方向 起点在上沿 column",
103
- text: "顶部起点"
97
+ tooltip: "垂直方向 起点在上沿 column"
104
98
  },
105
99
  {
106
100
  value: "column-reverse",
107
101
  icon: markRaw(ColumnReverse_default),
108
- tooltip: "垂直方向 起点在下沿 column-reverse",
109
- text: "底部起点"
102
+ tooltip: "垂直方向 起点在下沿 column-reverse"
110
103
  }
111
104
  ],
112
105
  display: (_mForm, { model }) => model.display === "flex"
@@ -116,37 +109,33 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
116
109
  text: "主轴对齐",
117
110
  type: "radioGroup",
118
111
  childType: "button",
119
- labelWidth: "68px",
112
+ labelWidth: "90px",
113
+ iconSize: "24px",
120
114
  options: [
121
115
  {
122
116
  value: "flex-start",
123
117
  icon: markRaw(FlexStart_default$1),
124
- tooltip: "左对齐 flex-start",
125
- text: "左对齐"
118
+ tooltip: "左对齐 flex-start"
126
119
  },
127
120
  {
128
121
  value: "flex-end",
129
122
  icon: markRaw(FlexEnd_default$1),
130
- tooltip: "右对齐 flex-end",
131
- text: "右对齐"
123
+ tooltip: "右对齐 flex-end"
132
124
  },
133
125
  {
134
126
  value: "center",
135
127
  icon: markRaw(Center_default$1),
136
- tooltip: "居中 center",
137
- text: "居中"
128
+ tooltip: "居中 center"
138
129
  },
139
130
  {
140
131
  value: "space-between",
141
132
  icon: markRaw(SpaceBetween_default$1),
142
- tooltip: "两端对齐 space-between",
143
- text: "左右对齐"
133
+ tooltip: "两端对齐 space-between"
144
134
  },
145
135
  {
146
136
  value: "space-around",
147
137
  icon: markRaw(SpaceAround_default$1),
148
- tooltip: "横向平分 space-around",
149
- text: "横向等分"
138
+ tooltip: "横向平分 space-around"
150
139
  }
151
140
  ],
152
141
  display: (_mForm, { model }) => model.display === "flex"
@@ -156,37 +145,33 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
156
145
  text: "辅轴对齐",
157
146
  type: "radioGroup",
158
147
  childType: "button",
159
- labelWidth: "68px",
148
+ labelWidth: "90px",
149
+ iconSize: "24px",
160
150
  options: [
161
151
  {
162
152
  value: "flex-start",
163
153
  icon: markRaw(FlexStart_default),
164
- tooltip: "左对齐 flex-start",
165
- text: "上对齐"
154
+ tooltip: "左对齐 flex-start"
166
155
  },
167
156
  {
168
157
  value: "flex-end",
169
158
  icon: markRaw(FlexEnd_default),
170
- tooltip: "右对齐 flex-end",
171
- text: "下对齐"
159
+ tooltip: "右对齐 flex-end"
172
160
  },
173
161
  {
174
162
  value: "center",
175
163
  icon: markRaw(Center_default),
176
- tooltip: "居中 center",
177
- text: "居中"
164
+ tooltip: "居中 center"
178
165
  },
179
166
  {
180
167
  value: "space-between",
181
168
  icon: markRaw(SpaceBetween_default),
182
- tooltip: "两端对齐 space-between",
183
- text: "上下对齐"
169
+ tooltip: "两端对齐 space-between"
184
170
  },
185
171
  {
186
172
  value: "space-around",
187
173
  icon: markRaw(SpaceAround_default),
188
- tooltip: "横向平分 space-around",
189
- text: "纵向等分"
174
+ tooltip: "横向平分 space-around"
190
175
  }
191
176
  ],
192
177
  display: (_mForm, { model }) => model.display === "flex"
@@ -196,7 +181,8 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
196
181
  text: "换行",
197
182
  type: "radioGroup",
198
183
  childType: displayTheme.value !== "magic-admin" ? "button" : "default",
199
- labelWidth: "68px",
184
+ labelWidth: "90px",
185
+ iconSize: "24px",
200
186
  options: [
201
187
  {
202
188
  value: "nowrap",
package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -95,7 +95,7 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
95
95
  "right-class": "m-editor-framework-right",
96
96
  left: __props.hideSidebar ? void 0 : columnWidth.value.left,
97
97
  right: columnWidth.value.right,
98
- "min-left": __props.hideSidebar ? 0 : unref(238),
98
+ "min-left": __props.hideSidebar ? 0 : unref(248),
99
99
  "min-right": unref(300),
100
100
  "min-center": unref(400),
101
101
  width: frameworkRect.value.width,
package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -9,7 +9,7 @@ import DataSourceListPanel_default from "./data-source/DataSourceListPanel.js";
9
9
  import LayerPanel_default from "./layer/LayerPanel.js";
10
10
  import ComponentListPanel_default from "./ComponentListPanel.js";
11
11
  import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
12
- import { Close, Coin, EditPen, Goods, List } from "@element-plus/icons-vue";
12
+ import { Box, Close, Coin, EditPen, Finished } from "@element-plus/icons-vue";
13
13
  //#region packages/editor/src/layouts/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
14
14
  var _hoisted_1 = {
15
15
  key: 0,
@@ -81,7 +81,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
81
81
  [SideItemKey.COMPONENT_LIST]: {
82
82
  $key: SideItemKey.COMPONENT_LIST,
83
83
  type: "component",
84
- icon: Goods,
84
+ icon: Box,
85
85
  text: "组件",
86
86
  component: ComponentListPanel_default,
87
87
  slots: {}
@@ -89,7 +89,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
89
89
  layer: {
90
90
  $key: SideItemKey.LAYER,
91
91
  type: "component",
92
- icon: List,
92
+ icon: Finished,
93
93
  text: "已选组件",
94
94
  props: {
95
95
  layerContentMenu: props.layerContentMenu,
package/dist/es/style.css CHANGED
@@ -149,6 +149,11 @@
149
149
  padding-top: 16px;
150
150
  }
151
151
 
152
+ .tmagic-design-color-picker-input {
153
+ margin-left: 8px;
154
+ width: calc(var(--el-input-width, 100%) - 40px);
155
+ }
156
+
152
157
  .m-table .el-button.action-btn + .el-button.action-btn {
153
158
  margin-left: 0;
154
159
  }
package/dist/es/utils/const.js CHANGED
@@ -6,7 +6,7 @@ var RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
6
6
  var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
7
7
  var DEFAULT_LEFT_COLUMN_WIDTH = 310;
8
8
  var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
9
- var MIN_LEFT_COLUMN_WIDTH = 238;
9
+ var MIN_LEFT_COLUMN_WIDTH = 248;
10
10
  var MIN_CENTER_COLUMN_WIDTH = 400;
11
11
  var MIN_RIGHT_COLUMN_WIDTH = 300;
12
12
  var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
package/dist/style.css CHANGED
@@ -149,6 +149,11 @@
149
149
  padding-top: 16px;
150
150
  }
151
151
 
152
+ .tmagic-design-color-picker-input {
153
+ margin-left: 8px;
154
+ width: calc(var(--el-input-width, 100%) - 40px);
155
+ }
156
+
152
157
  .m-table .el-button.action-btn + .el-button.action-btn {
153
158
  margin-left: 0;
154
159
  }
package/dist/themes/magic-admin.css CHANGED
@@ -98,6 +98,11 @@
98
98
  padding-top: 16px;
99
99
  }
100
100
 
101
+ .tmagic-design-color-picker-input {
102
+ margin-left: 8px;
103
+ width: calc(var(--el-input-width, 100%) - 40px);
104
+ }
105
+
101
106
  .m-form.m-form--magic-admin .el-collapse-item__header {
102
107
  background-color: transparent;
103
108
  padding: 0;
@@ -606,23 +611,15 @@ fieldset.m-fieldset .m-form-tip {
606
611
  white-space: pre-line;
607
612
  line-height: 20px;
608
613
  }
609
- .m-form.m-form--magic-admin .el-form-item__content .tmagic-design-radio-group {
610
- row-gap: 10px;
611
- }
612
614
  .m-form.m-form--magic-admin .el-form-item__content .tmagic-design-radio-group .tmagic-design-radio-button {
613
- margin-right: 8px;
614
615
  height: 32px;
615
616
  }
616
617
  .m-form.m-form--magic-admin .el-form-item__content .tmagic-design-radio-group .tmagic-design-radio-button .el-radio-button__inner {
617
- outline: none !important;
618
- border: 0 !important;
619
- height: 32px;
620
618
  height: 32px;
621
- border-radius: 16px;
622
- padding: 0 16px;
623
- display: inline-flex;
619
+ display: flex;
620
+ padding-top: 0;
621
+ padding-bottom: 0;
624
622
  align-items: center;
625
- justify-content: center;
626
623
  }
627
624
  .m-form.m-form--magic-admin .m-fields-data-source-field-select .tmagic-design-button {
628
625
  margin-left: 8px;
@@ -2755,7 +2752,48 @@ fieldset.m-fieldset .m-form-tip {
2755
2752
  opacity: 0;
2756
2753
  }
2757
2754
 
2758
- .m-editor.m-editor--magic-admin .m-editor-props-panel .el-input__wrapper {
2755
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header {
2756
+ padding: 8px 0;
2757
+ width: 48px;
2758
+ display: flex;
2759
+ flex-direction: column;
2760
+ align-items: center;
2761
+ }
2762
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item {
2763
+ display: flex;
2764
+ flex-direction: column;
2765
+ align-items: center;
2766
+ padding: 8px 0;
2767
+ width: 40px;
2768
+ margin-bottom: 4px;
2769
+ background-color: transparent;
2770
+ }
2771
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item:hover {
2772
+ background-color: rgba(0, 0, 0, 0.1);
2773
+ }
2774
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item > i {
2775
+ color: #ffffff;
2776
+ }
2777
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active {
2778
+ background-color: #fff;
2779
+ border-radius: 4px;
2780
+ color: var(--el-color-primary);
2781
+ }
2782
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active:hover {
2783
+ background-color: #fff;
2784
+ }
2785
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active > i {
2786
+ color: var(--el-color-primary);
2787
+ }
2788
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active .magic-editor-tab-panel-title {
2789
+ color: var(--el-color-primary);
2790
+ }
2791
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item .magic-editor-tab-panel-title {
2792
+ font-size: 10px;
2793
+ line-height: 14px;
2794
+ font-weight: 600;
2795
+ }
2796
+ .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item .m-editor-props-panel .el-input__wrapper {
2759
2797
  border-radius: 4px;
2760
2798
  }
2761
2799
  .m-editor.m-editor--magic-admin .border-box-container .border-icon-container .border-icon {
package/dist/tmagic-editor.umd.cjs CHANGED
@@ -8182,7 +8182,7 @@
8182
8182
  var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
8183
8183
  var DEFAULT_LEFT_COLUMN_WIDTH = 310;
8184
8184
  var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
8185
- var MIN_LEFT_COLUMN_WIDTH = 238;
8185
+ var MIN_LEFT_COLUMN_WIDTH = 248;
8186
8186
  var MIN_CENTER_COLUMN_WIDTH = 400;
8187
8187
  var MIN_RIGHT_COLUMN_WIDTH = 300;
8188
8188
  var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
@@ -10426,7 +10426,7 @@
10426
10426
  "right-class": "m-editor-framework-right",
10427
10427
  left: __props.hideSidebar ? void 0 : columnWidth.value.left,
10428
10428
  right: columnWidth.value.right,
10429
- "min-left": __props.hideSidebar ? 0 : (0, vue.unref)(238),
10429
+ "min-left": __props.hideSidebar ? 0 : (0, vue.unref)(248),
10430
10430
  "min-right": (0, vue.unref)(300),
10431
10431
  "min-center": (0, vue.unref)(400),
10432
10432
  width: frameworkRect.value.width,
@@ -15794,7 +15794,7 @@
15794
15794
  [SideItemKey.COMPONENT_LIST]: {
15795
15795
  $key: SideItemKey.COMPONENT_LIST,
15796
15796
  type: "component",
15797
- icon: _element_plus_icons_vue.Goods,
15797
+ icon: _element_plus_icons_vue.Box,
15798
15798
  text: "组件",
15799
15799
  component: ComponentListPanel_default,
15800
15800
  slots: {}
@@ -15802,7 +15802,7 @@
15802
15802
  layer: {
15803
15803
  $key: SideItemKey.LAYER,
15804
15804
  type: "component",
15805
- icon: _element_plus_icons_vue.List,
15805
+ icon: _element_plus_icons_vue.Finished,
15806
15806
  text: "已选组件",
15807
15807
  props: {
15808
15808
  layerContentMenu: props.layerContentMenu,
@@ -22575,26 +22575,22 @@
22575
22575
  {
22576
22576
  value: "no-repeat",
22577
22577
  icon: (0, vue.markRaw)(NoRepeat_default),
22578
- tooltip: "不重复 no-repeat",
22579
- text: "不重复"
22578
+ tooltip: "不重复 no-repeat"
22580
22579
  },
22581
22580
  {
22582
22581
  value: "repeat-x",
22583
22582
  icon: (0, vue.markRaw)(RepeatX_default),
22584
- tooltip: "水平方向重复 repeat-x",
22585
- text: "水平重复"
22583
+ tooltip: "水平方向重复 repeat-x"
22586
22584
  },
22587
22585
  {
22588
22586
  value: "repeat-y",
22589
22587
  icon: (0, vue.markRaw)(RepeatY_default),
22590
- tooltip: "垂直方向重复 repeat-y",
22591
- text: "垂直重复"
22588
+ tooltip: "垂直方向重复 repeat-y"
22592
22589
  },
22593
22590
  {
22594
22591
  value: "repeat",
22595
22592
  icon: (0, vue.markRaw)(Repeat_default),
22596
- tooltip: "垂直和水平方向重复 repeat",
22597
- text: "垂直与水平重复"
22593
+ tooltip: "垂直和水平方向重复 repeat"
22598
22594
  }
22599
22595
  ]
22600
22596
  },
@@ -23354,38 +23350,34 @@
23354
23350
  name: "display",
23355
23351
  text: "模式",
23356
23352
  type: "radioGroup",
23357
- childType: displayTheme.value !== "magic-admin" ? "button" : "default",
23358
- labelWidth: "68px",
23353
+ childType: "button",
23354
+ labelWidth: "90px",
23355
+ iconSize: "24px",
23359
23356
  options: [
23360
23357
  {
23361
23358
  value: "inline",
23362
- icon: displayTheme.value !== "magic-admin" ? (0, vue.markRaw)(Inline_default) : void 0,
23363
- tooltip: "内联布局 inline",
23364
- text: "内联布局\n inline"
23359
+ icon: (0, vue.markRaw)(Inline_default),
23360
+ tooltip: "内联布局 inline"
23365
23361
  },
23366
23362
  {
23367
23363
  value: "flex",
23368
- icon: displayTheme.value !== "magic-admin" ? (0, vue.markRaw)(Flex_default) : void 0,
23369
- tooltip: "弹性布局 flex",
23370
- text: "弹性布局\n flex"
23364
+ icon: (0, vue.markRaw)(Flex_default),
23365
+ tooltip: "弹性布局 flex"
23371
23366
  },
23372
23367
  {
23373
23368
  value: "block",
23374
- icon: displayTheme.value !== "magic-admin" ? (0, vue.markRaw)(Block_default) : void 0,
23375
- tooltip: "块级布局 block",
23376
- text: "块级布局\n block"
23369
+ icon: (0, vue.markRaw)(Block_default),
23370
+ tooltip: "块级布局 block"
23377
23371
  },
23378
23372
  {
23379
23373
  value: "inline-block",
23380
- icon: displayTheme.value !== "magic-admin" ? (0, vue.markRaw)(InlineBlock_default) : void 0,
23381
- tooltip: "内联块布局 inline-block",
23382
- text: "内联块布局\n inline-block"
23374
+ icon: (0, vue.markRaw)(InlineBlock_default),
23375
+ tooltip: "内联块布局 inline-block"
23383
23376
  },
23384
23377
  {
23385
23378
  value: "none",
23386
- icon: displayTheme.value !== "magic-admin" ? (0, vue.markRaw)(None_default) : void 0,
23387
- tooltip: "隐藏 none",
23388
- text: "隐藏\n none"
23379
+ icon: (0, vue.markRaw)(None_default),
23380
+ tooltip: "隐藏 none"
23389
23381
  }
23390
23382
  ]
23391
23383
  },
@@ -23394,31 +23386,28 @@
23394
23386
  text: "主轴方向",
23395
23387
  type: "radioGroup",
23396
23388
  childType: "button",
23397
- labelWidth: "68px",
23389
+ labelWidth: "90px",
23390
+ iconSize: "24px",
23398
23391
  options: [
23399
23392
  {
23400
23393
  value: "row",
23401
23394
  icon: (0, vue.markRaw)(Row_default),
23402
- tooltip: "水平方向 起点在左侧 row",
23403
- text: "左起点"
23395
+ tooltip: "水平方向 起点在左侧 row"
23404
23396
  },
23405
23397
  {
23406
23398
  value: "row-reverse",
23407
23399
  icon: (0, vue.markRaw)(RowReverse_default),
23408
- tooltip: "水平方向 起点在右侧 row-reverse",
23409
- text: "右起点"
23400
+ tooltip: "水平方向 起点在右侧 row-reverse"
23410
23401
  },
23411
23402
  {
23412
23403
  value: "column",
23413
23404
  icon: (0, vue.markRaw)(Column_default),
23414
- tooltip: "垂直方向 起点在上沿 column",
23415
- text: "顶部起点"
23405
+ tooltip: "垂直方向 起点在上沿 column"
23416
23406
  },
23417
23407
  {
23418
23408
  value: "column-reverse",
23419
23409
  icon: (0, vue.markRaw)(ColumnReverse_default),
23420
- tooltip: "垂直方向 起点在下沿 column-reverse",
23421
- text: "底部起点"
23410
+ tooltip: "垂直方向 起点在下沿 column-reverse"
23422
23411
  }
23423
23412
  ],
23424
23413
  display: (_mForm, { model }) => model.display === "flex"
@@ -23428,37 +23417,33 @@
23428
23417
  text: "主轴对齐",
23429
23418
  type: "radioGroup",
23430
23419
  childType: "button",
23431
- labelWidth: "68px",
23420
+ labelWidth: "90px",
23421
+ iconSize: "24px",
23432
23422
  options: [
23433
23423
  {
23434
23424
  value: "flex-start",
23435
23425
  icon: (0, vue.markRaw)(FlexStart_default),
23436
- tooltip: "左对齐 flex-start",
23437
- text: "左对齐"
23426
+ tooltip: "左对齐 flex-start"
23438
23427
  },
23439
23428
  {
23440
23429
  value: "flex-end",
23441
23430
  icon: (0, vue.markRaw)(FlexEnd_default),
23442
- tooltip: "右对齐 flex-end",
23443
- text: "右对齐"
23431
+ tooltip: "右对齐 flex-end"
23444
23432
  },
23445
23433
  {
23446
23434
  value: "center",
23447
23435
  icon: (0, vue.markRaw)(Center_default),
23448
- tooltip: "居中 center",
23449
- text: "居中"
23436
+ tooltip: "居中 center"
23450
23437
  },
23451
23438
  {
23452
23439
  value: "space-between",
23453
23440
  icon: (0, vue.markRaw)(SpaceBetween_default),
23454
- tooltip: "两端对齐 space-between",
23455
- text: "左右对齐"
23441
+ tooltip: "两端对齐 space-between"
23456
23442
  },
23457
23443
  {
23458
23444
  value: "space-around",
23459
23445
  icon: (0, vue.markRaw)(SpaceAround_default),
23460
- tooltip: "横向平分 space-around",
23461
- text: "横向等分"
23446
+ tooltip: "横向平分 space-around"
23462
23447
  }
23463
23448
  ],
23464
23449
  display: (_mForm, { model }) => model.display === "flex"
@@ -23468,37 +23453,33 @@
23468
23453
  text: "辅轴对齐",
23469
23454
  type: "radioGroup",
23470
23455
  childType: "button",
23471
- labelWidth: "68px",
23456
+ labelWidth: "90px",
23457
+ iconSize: "24px",
23472
23458
  options: [
23473
23459
  {
23474
23460
  value: "flex-start",
23475
23461
  icon: (0, vue.markRaw)(FlexStart_default$1),
23476
- tooltip: "左对齐 flex-start",
23477
- text: "上对齐"
23462
+ tooltip: "左对齐 flex-start"
23478
23463
  },
23479
23464
  {
23480
23465
  value: "flex-end",
23481
23466
  icon: (0, vue.markRaw)(FlexEnd_default$1),
23482
- tooltip: "右对齐 flex-end",
23483
- text: "下对齐"
23467
+ tooltip: "右对齐 flex-end"
23484
23468
  },
23485
23469
  {
23486
23470
  value: "center",
23487
23471
  icon: (0, vue.markRaw)(Center_default$1),
23488
- tooltip: "居中 center",
23489
- text: "居中"
23472
+ tooltip: "居中 center"
23490
23473
  },
23491
23474
  {
23492
23475
  value: "space-between",
23493
23476
  icon: (0, vue.markRaw)(SpaceBetween_default$1),
23494
- tooltip: "两端对齐 space-between",
23495
- text: "上下对齐"
23477
+ tooltip: "两端对齐 space-between"
23496
23478
  },
23497
23479
  {
23498
23480
  value: "space-around",
23499
23481
  icon: (0, vue.markRaw)(SpaceAround_default$1),
23500
- tooltip: "横向平分 space-around",
23501
- text: "纵向等分"
23482
+ tooltip: "横向平分 space-around"
23502
23483
  }
23503
23484
  ],
23504
23485
  display: (_mForm, { model }) => model.display === "flex"
@@ -23508,7 +23489,8 @@
23508
23489
  text: "换行",
23509
23490
  type: "radioGroup",
23510
23491
  childType: displayTheme.value !== "magic-admin" ? "button" : "default",
23511
- labelWidth: "68px",
23492
+ labelWidth: "90px",
23493
+ iconSize: "24px",
23512
23494
  options: [
23513
23495
  {
23514
23496
  value: "nowrap",
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.8.0-manmanyu.17",
2
+ "version": "1.8.0-manmanyu.19",
3
3
  "name": "@tmagic/editor",
4
4
  "type": "module",
5
5
  "sideEffects": [
@@ -58,11 +58,11 @@
58
58
  "moveable": "^0.53.0",
59
59
  "serialize-javascript": "^7.0.0",
60
60
  "sortablejs": "^1.15.6",
61
- "@tmagic/form": "1.8.0-manmanyu.17",
62
- "@tmagic/table": "1.8.0-manmanyu.17",
63
- "@tmagic/design": "1.8.0-manmanyu.17",
64
- "@tmagic/utils": "1.8.0-manmanyu.17",
65
- "@tmagic/stage": "1.8.0-manmanyu.17"
61
+ "@tmagic/design": "1.8.0-manmanyu.19",
62
+ "@tmagic/form": "1.8.0-manmanyu.19",
63
+ "@tmagic/table": "1.8.0-manmanyu.19",
64
+ "@tmagic/utils": "1.8.0-manmanyu.19",
65
+ "@tmagic/stage": "1.8.0-manmanyu.19"
66
66
  },
67
67
  "devDependencies": {
68
68
  "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
76
76
  "type-fest": "^5.2.0",
77
77
  "typescript": "^6.0.3",
78
78
  "vue": "^3.5.38",
79
- "@tmagic/core": "1.8.0-manmanyu.17"
79
+ "@tmagic/core": "1.8.0-manmanyu.19"
80
80
  },
81
81
  "peerDependenciesMeta": {
82
82
  "typescript": {
package/src/fields/StyleSetter/pro/Background.vue CHANGED
@@ -73,14 +73,13 @@ const config = defineFormItem({
73
73
  childType: 'button',
74
74
  labelWidth: '68px',
75
75
  options: [
76
- { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat', text: '不重复' },
77
- { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x', text: '水平重复' },
78
- { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y', text: '垂直重复' },
76
+ { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
77
+ { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
78
+ { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
79
79
  {
80
80
  value: 'repeat',
81
81
  icon: markRaw(BackgroundRepeat),
82
82
  tooltip: '垂直和水平方向重复 repeat',
83
- text: '垂直与水平重复',
84
83
  },
85
84
  ],
86
85
  },
package/src/fields/StyleSetter/pro/Layout.vue CHANGED
@@ -73,38 +73,34 @@ const config = defineFormItem({
73
73
  name: 'display',
74
74
  text: '模式',
75
75
  type: 'radioGroup',
76
- childType: displayTheme.value !== 'magic-admin' ? 'button' : 'default',
77
- labelWidth: '68px',
76
+ childType: 'button',
77
+ labelWidth: '90px',
78
+ iconSize: '24px',
78
79
  options: [
79
80
  {
80
81
  value: 'inline',
81
- icon: displayTheme.value !== 'magic-admin' ? markRaw(DisplayInline) : undefined,
82
+ icon: markRaw(DisplayInline),
82
83
  tooltip: '内联布局 inline',
83
- text: '内联布局\n inline',
84
84
  },
85
85
  {
86
86
  value: 'flex',
87
- icon: displayTheme.value !== 'magic-admin' ? markRaw(DisplayFlex) : undefined,
87
+ icon: markRaw(DisplayFlex),
88
88
  tooltip: '弹性布局 flex',
89
- text: '弹性布局\n flex',
90
89
  },
91
90
  {
92
91
  value: 'block',
93
- icon: displayTheme.value !== 'magic-admin' ? markRaw(DisplayBlock) : undefined,
92
+ icon: markRaw(DisplayBlock),
94
93
  tooltip: '块级布局 block',
95
- text: '块级布局\n block',
96
94
  },
97
95
  {
98
96
  value: 'inline-block',
99
- icon: displayTheme.value !== 'magic-admin' ? markRaw(DisplayInlineBlock) : undefined,
97
+ icon: markRaw(DisplayInlineBlock),
100
98
  tooltip: '内联块布局 inline-block',
101
- text: '内联块布局\n inline-block',
102
99
  },
103
100
  {
104
101
  value: 'none',
105
- icon: displayTheme.value !== 'magic-admin' ? markRaw(DisplayNone) : undefined,
102
+ icon: markRaw(DisplayNone),
106
103
  tooltip: '隐藏 none',
107
- text: '隐藏\n none',
108
104
  },
109
105
  ],
110
106
  },
@@ -113,26 +109,24 @@ const config = defineFormItem({
113
109
  text: '主轴方向',
114
110
  type: 'radioGroup',
115
111
  childType: 'button',
116
- labelWidth: '68px',
112
+ labelWidth: '90px',
113
+ iconSize: '24px',
117
114
  options: [
118
- { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row', text: '左起点' },
115
+ { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
119
116
  {
120
117
  value: 'row-reverse',
121
118
  icon: markRaw(FlexDirectionRowReverse),
122
119
  tooltip: '水平方向 起点在右侧 row-reverse',
123
- text: '右起点',
124
120
  },
125
121
  {
126
122
  value: 'column',
127
123
  icon: markRaw(FlexDirectionColumn),
128
124
  tooltip: '垂直方向 起点在上沿 column',
129
- text: '顶部起点',
130
125
  },
131
126
  {
132
127
  value: 'column-reverse',
133
128
  icon: markRaw(FlexDirectionColumnReverse),
134
129
  tooltip: '垂直方向 起点在下沿 column-reverse',
135
- text: '底部起点',
136
130
  },
137
131
  ],
138
132
  display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
@@ -142,22 +136,21 @@ const config = defineFormItem({
142
136
  text: '主轴对齐',
143
137
  type: 'radioGroup',
144
138
  childType: 'button',
145
- labelWidth: '68px',
139
+ labelWidth: '90px',
140
+ iconSize: '24px',
146
141
  options: [
147
- { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start', text: '左对齐' },
148
- { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end', text: '右对齐' },
149
- { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center', text: '居中' },
142
+ { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
143
+ { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
144
+ { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
150
145
  {
151
146
  value: 'space-between',
152
147
  icon: markRaw(JustifyContentSpaceBetween),
153
148
  tooltip: '两端对齐 space-between',
154
- text: '左右对齐',
155
149
  },
156
150
  {
157
151
  value: 'space-around',
158
152
  icon: markRaw(JustifyContentSpaceAround),
159
153
  tooltip: '横向平分 space-around',
160
- text: '横向等分',
161
154
  },
162
155
  ],
163
156
  display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
@@ -167,22 +160,21 @@ const config = defineFormItem({
167
160
  text: '辅轴对齐',
168
161
  type: 'radioGroup',
169
162
  childType: 'button',
170
- labelWidth: '68px',
163
+ labelWidth: '90px',
164
+ iconSize: '24px',
171
165
  options: [
172
- { value: 'flex-start', icon: markRaw(AlignItemsFlexStart), tooltip: '左对齐 flex-start', text: '上对齐' },
173
- { value: 'flex-end', icon: markRaw(AlignItemsFlexEnd), tooltip: '右对齐 flex-end', text: '下对齐' },
174
- { value: 'center', icon: markRaw(AlignItemsCenter), tooltip: '居中 center', text: '居中' },
166
+ { value: 'flex-start', icon: markRaw(AlignItemsFlexStart), tooltip: '左对齐 flex-start' },
167
+ { value: 'flex-end', icon: markRaw(AlignItemsFlexEnd), tooltip: '右对齐 flex-end' },
168
+ { value: 'center', icon: markRaw(AlignItemsCenter), tooltip: '居中 center' },
175
169
  {
176
170
  value: 'space-between',
177
171
  icon: markRaw(AlignItemsSpaceBetween),
178
172
  tooltip: '两端对齐 space-between',
179
- text: '上下对齐',
180
173
  },
181
174
  {
182
175
  value: 'space-around',
183
176
  icon: markRaw(AlignItemsSpaceAround),
184
177
  tooltip: '横向平分 space-around',
185
- text: '纵向等分',
186
178
  },
187
179
  ],
188
180
  display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
@@ -192,7 +184,8 @@ const config = defineFormItem({
192
184
  text: '换行',
193
185
  type: 'radioGroup',
194
186
  childType: displayTheme.value !== 'magic-admin' ? 'button' : 'default',
195
- labelWidth: '68px',
187
+ labelWidth: '90px',
188
+ iconSize: '24px',
196
189
  options: [
197
190
  { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
198
191
  { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
package/src/layouts/sidebar/Sidebar.vue CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
  <script setup lang="ts">
156
156
  import { computed, nextTick, ref, watch } from 'vue';
157
- import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
157
+ import { Box, Close, Coin, EditPen, Finished } from '@element-plus/icons-vue';
158
158
 
159
159
  import FloatingBox from '@editor/components/FloatingBox.vue';
160
160
  import MIcon from '@editor/components/Icon.vue';
@@ -251,7 +251,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
251
251
  [SideItemKey.COMPONENT_LIST]: {
252
252
  $key: SideItemKey.COMPONENT_LIST,
253
253
  type: 'component',
254
- icon: Goods,
254
+ icon: Box,
255
255
  text: '组件',
256
256
  component: ComponentListPanel,
257
257
  slots: {},
@@ -259,7 +259,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
259
259
  layer: {
260
260
  $key: SideItemKey.LAYER,
261
261
  type: 'component',
262
- icon: List,
262
+ icon: Finished,
263
263
  text: '已选组件',
264
264
  props: {
265
265
  layerContentMenu: props.layerContentMenu,
package/src/theme/themes/magic-admin/index.scss CHANGED
@@ -17,6 +17,51 @@
17
17
  // 仅作用于编辑器内部 DOM 的具体样式仍保留「双类」，避免误中 portal 上只挂 `m-theme--*`
18
18
  // 的节点。
19
19
  .m-editor.m-editor--magic-admin {
20
+ .m-editor-sidebar {
21
+ .m-editor-sidebar-header {
22
+ padding: 8px 0;
23
+ width: 48px;
24
+ display: flex;
25
+ flex-direction: column;
26
+ align-items: center;
27
+ .m-editor-sidebar-header-item {
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: center;
31
+ padding: 8px 0;
32
+ width: 40px;
33
+ margin-bottom: 4px;
34
+ background-color: transparent;
35
+ &:hover {
36
+ background-color: rgba(0, 0, 0, 0.1);
37
+ }
38
+ > i {
39
+ color: #ffffff;
40
+ }
41
+ &.is-active {
42
+ background-color: #fff;
43
+ border-radius: 4px;
44
+ color: var(--el-color-primary);
45
+ &:hover {
46
+ background-color: #fff;
47
+ }
48
+ > i {
49
+ color: var(--el-color-primary);
50
+ }
51
+ .magic-editor-tab-panel-title {
52
+ color: var(--el-color-primary);
53
+ }
54
+ }
55
+ .magic-editor-tab-panel-title {
56
+ font-size: 10px;
57
+ line-height: 14px;
58
+ font-weight: 600;
59
+ }
60
+ }
61
+ }
62
+ }
63
+ .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item
64
+
20
65
  // 属性面板内的 input 圆角覆写：
21
66
  // - 原默认主题里 `.m-editor-props-panel .el-input__wrapper { border-radius: 0; }`
22
67
  // specificity 为 (0, 2, 0)，已迁出（见 ../../props-panel.scss）；
package/src/utils/const.ts CHANGED
@@ -8,8 +8,8 @@ export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
8
8
  export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
9
9
  export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
10
10
 
11
- // 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为238px
12
- export const MIN_LEFT_COLUMN_WIDTH = 238;
11
+ // 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为246px
12
+ export const MIN_LEFT_COLUMN_WIDTH = 248;
13
13
  export const MIN_CENTER_COLUMN_WIDTH = 400;
14
14
  export const MIN_RIGHT_COLUMN_WIDTH = 300;
15
15
 
package/types/index.d.ts CHANGED
@@ -3279,7 +3279,7 @@ declare const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData
3279
3279
  declare const PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
3280
3280
  declare const DEFAULT_LEFT_COLUMN_WIDTH = 310;
3281
3281
  declare const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
3282
- declare const MIN_LEFT_COLUMN_WIDTH = 238;
3282
+ declare const MIN_LEFT_COLUMN_WIDTH = 248;
3283
3283
  declare const MIN_CENTER_COLUMN_WIDTH = 400;
3284
3284
  declare const MIN_RIGHT_COLUMN_WIDTH = 300;
3285
3285
  declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";