Skip to content

Commit fb2b04a

Browse files
lymynameliuyue46qkiroc
authored
steps编辑器外观配置 (#11650)
* steps编辑器配置 * fix:更新steps快照 * fix:更新wizard快照 * 去掉步骤条的整体外观配置 --------- Co-authored-by: liuyue46 <[email protected]> Co-authored-by: qinhaoyan <[email protected]>
1 parent e93f917 commit fb2b04a

File tree

7 files changed

+732
-68
lines changed

7 files changed

+732
-68
lines changed

‎packages/amis-editor/src/plugin/Steps.tsx

+167-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
import {registerEditorPlugin} from 'amis-editor-core';
55
import {BasePlugin} from 'amis-editor-core';
66
import {getSchemaTpl} from 'amis-editor-core';
7-
7+
import {
8+
inputStepStateTpl,
9+
inputSwitchStateTpl
10+
} from '../renderer/style-control/helper';
811
export class StepsPlugin extends BasePlugin {
912
static id = 'StepsPlugin';
1013
// 关联渲染器名字
@@ -39,7 +42,6 @@ export class StepsPlugin extends BasePlugin {
3942
previewSchema = {
4043
...this.scaffold
4144
};
42-
4345
panelTitle = 'Steps';
4446
panelBody = [
4547
getSchemaTpl('tabs', [
@@ -136,13 +138,176 @@ export class StepsPlugin extends BasePlugin {
136138
}
137139
]
138140
},
141+
{
142+
name: '__editorStateStep',
143+
type: 'select',
144+
label: '步骤状态',
145+
value: 'Default',
146+
clearable: true,
147+
options: [
148+
{
149+
label: '常规',
150+
value: 'Default'
151+
},
152+
{
153+
label: '完成',
154+
value: 'Finish'
155+
},
156+
{
157+
label: '进行中',
158+
value: 'Process'
159+
},
160+
{
161+
label: '等待',
162+
value: 'Wait'
163+
},
164+
{
165+
label: '出错',
166+
value: 'Error'
167+
}
168+
]
169+
},
139170
getSchemaTpl('switch', {
140171
name: 'iconPosition',
141172
label: '图标文字垂直展示',
142173
value: false
143174
})
144175
]
145176
},
177+
getSchemaTpl('collapseGroup', [
178+
{
179+
title: '图标样式',
180+
body: [
181+
...inputSwitchStateTpl('themeCss.iconControlClassName', {}, [
182+
getSchemaTpl('switch', {
183+
name: 'themeCss.iconControlClassName.display',
184+
label: '隐藏图标',
185+
trueValue: 'none'
186+
})
187+
]),
188+
...inputSwitchStateTpl(
189+
'themeCss.iconControlClassName',
190+
{
191+
hiddenOn:
192+
'themeCss.iconControlClassNameFinish.display ==="none"' +
193+
'||' +
194+
'themeCss.iconControlClassNameDefault.display ==="none"' +
195+
'||' +
196+
'themeCss.iconControlClassNameProcess.display ==="none"' +
197+
'||' +
198+
'themeCss.iconControlClassNameWait.display ==="none"' +
199+
'||' +
200+
'themeCss.iconControlClassNameError.display ==="none"'
201+
},
202+
[
203+
getSchemaTpl('theme:select', {
204+
label: '尺寸',
205+
name: 'themeCss.iconControlClassName.iconSize'
206+
}),
207+
getSchemaTpl('theme:colorPicker', {
208+
label: '颜色',
209+
name: 'themeCss.iconControlClassName.backgroundColor',
210+
labelMode: 'input'
211+
})
212+
]
213+
)
214+
]
215+
}
216+
]),
217+
getSchemaTpl('collapseGroup', [
218+
{
219+
title: '标题样式',
220+
body: [
221+
...inputSwitchStateTpl('themeCss.titleControlClassName', {}, [
222+
getSchemaTpl('switch', {
223+
name: 'themeCss.titleControlClassName.display',
224+
label: '隐藏标题',
225+
trueValue: 'none'
226+
})
227+
]),
228+
...inputStepStateTpl('themeCss.titleControlClassName', '', {
229+
hideFont: false,
230+
hiddenOn:
231+
'themeCss.titleControlClassNameFinish.display ==="none"' +
232+
'||' +
233+
'themeCss.titleControlClassNameDefault.display ==="none"' +
234+
'||' +
235+
'themeCss.titleControlClassNameProcess.display ==="none"' +
236+
'||' +
237+
'themeCss.titleControlClassNameWait.display ==="none"' +
238+
'||' +
239+
'themeCss.titleControlClassNameError.display ==="none"'
240+
})
241+
]
242+
}
243+
]),
244+
getSchemaTpl('collapseGroup', [
245+
{
246+
title: '副标题样式',
247+
body: [
248+
...inputSwitchStateTpl(
249+
'themeCss.subTitleControlClassName',
250+
{},
251+
[
252+
getSchemaTpl('switch', {
253+
name: 'themeCss.subTitleControlClassName.display',
254+
label: '隐藏副标题',
255+
trueValue: 'none'
256+
})
257+
]
258+
),
259+
...inputStepStateTpl('themeCss.subTitleControlClassName', '', {
260+
hideFont: false,
261+
hiddenOn:
262+
'themeCss.subTitleControlClassNameFinish.display ==="none"' +
263+
'||' +
264+
'themeCss.subTitleControlClassNameDefault.display ==="none"' +
265+
'||' +
266+
'themeCss.subTitleControlClassNameProcess.display ==="none"' +
267+
'||' +
268+
'themeCss.subTitleControlClassNameWait.display ==="none"' +
269+
'||' +
270+
'themeCss.subTitleControlClassNameError.display ==="none"'
271+
})
272+
]
273+
}
274+
]),
275+
getSchemaTpl('collapseGroup', [
276+
{
277+
title: '描述样式',
278+
body: [
279+
...inputSwitchStateTpl(
280+
'themeCss.descriptionControlClassName',
281+
{},
282+
[
283+
getSchemaTpl('switch', {
284+
name: 'themeCss.descriptionControlClassName.display',
285+
label: '隐藏描述',
286+
trueValue: 'none'
287+
})
288+
]
289+
),
290+
...inputStepStateTpl(
291+
'themeCss.descriptionControlClassName',
292+
'',
293+
{
294+
hideFont: false,
295+
hiddenOn:
296+
'themeCss.descriptionControlClassNameFinish.display ==="none"' +
297+
'||' +
298+
'themeCss.descriptionControlClassNameDefault.display ==="none"' +
299+
'||' +
300+
'themeCss.descriptionControlClassNameProcess.display ==="none"' +
301+
'||' +
302+
'themeCss.descriptionControlClassNameWait.display ==="none"' +
303+
'||' +
304+
'themeCss.descriptionControlClassNameError.display ==="none"'
305+
}
306+
)
307+
]
308+
}
309+
]),
310+
getSchemaTpl('theme:cssCode'),
146311
getSchemaTpl('style:classNames', {isFormItem: false})
147312
])
148313
}

‎packages/amis-editor/src/renderer/style-control/helper.tsx

+99-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,105 @@ interface InputStateOptions {
2020
borderToken?: (state: string) => string | object;
2121
}
2222

23+
export const inputSwitchStateTpl = (
24+
className: string,
25+
options?: InputStateOptions,
26+
body?: any[]
27+
) => {
28+
const stateOptions = [
29+
{
30+
label: '常规',
31+
value: 'Default'
32+
},
33+
{
34+
label: '完成',
35+
value: 'Finish'
36+
},
37+
{
38+
label: '进行中',
39+
value: 'Process'
40+
},
41+
{
42+
label: '等待',
43+
value: 'Wait'
44+
},
45+
{
46+
label: '出错',
47+
value: 'Error'
48+
}
49+
];
50+
const hiddenOnCondition = options?.hiddenOn
51+
? ` && !(${options.hiddenOn})`
52+
: '';
53+
const res: any = [
54+
...stateOptions.map((item: any) => {
55+
return {
56+
type: 'container',
57+
visibleOn:
58+
`\${__editorStateStep == '${item.value}'` +
59+
(item.value === 'Default' ? ` || !__editorStateStep` : '') +
60+
hiddenOnCondition +
61+
`}`,
62+
body: body?.map((b: any) => ({
63+
...b,
64+
name: b.name.replace(/name/gi, (match: any) => match + item.value)
65+
}))
66+
};
67+
})
68+
];
69+
return res;
70+
};
71+
export const inputStepStateTpl = (
72+
className: string,
73+
token: string,
74+
options?: InputStateOptions,
75+
body?: any[]
76+
) => {
77+
const stateOptions = options?.state || [
78+
{
79+
label: '常规',
80+
value: 'Default'
81+
},
82+
{
83+
label: '完成',
84+
value: 'Finish'
85+
},
86+
{
87+
label: '进行中',
88+
value: 'Process'
89+
},
90+
{
91+
label: '等待',
92+
value: 'Wait'
93+
},
94+
{
95+
label: '出错',
96+
value: 'Error'
97+
}
98+
];
99+
const hiddenOnCondition = options?.hiddenOn
100+
? ` && !(${options.hiddenOn})`
101+
: '';
102+
const res: any = [
103+
...stateOptions.map((item: any) => {
104+
return {
105+
type: 'container',
106+
visibleOn:
107+
`\${__editorStateStep == '${item.value}'` +
108+
(item.value === 'Default' ? ` || !__editorStateStep` : '') +
109+
hiddenOnCondition +
110+
`}`,
111+
body: inputStateFunc(
112+
'default',
113+
className + item.value,
114+
item.token || token,
115+
options
116+
)
117+
};
118+
})
119+
];
120+
return res;
121+
};
23122
export const inputStateTpl = (
24123
className: string,
25124
token: string = '',
@@ -87,7 +186,6 @@ export const inputStateFunc = (
87186
token = `${token}-${cssTokenState}`;
88187
}
89188
}
90-
91189
return [
92190
!options?.hideFont &&
93191
getSchemaTpl('theme:font', {

‎packages/amis-ui/scss/components/_steps.scss

+17-2
Original file line numberDiff line numberDiff line change
@@ -407,13 +407,27 @@
407407

408408
.#{$ns}Steps-mobile.#{$ns}Steps--horizontal {
409409
.#{$ns}StepsItem {
410+
overflow: visible;
410411
&-container {
412+
&Tail:after {
413+
display: none;
414+
}
411415
&Wrapper {
416+
transform: translateX(px2rem(-5px));
412417
.#{$ns}StepsItem-body {
413418
.#{$ns}StepsItem-title {
419+
flex-direction: column;
420+
justify-content: center;
421+
align-items: center;
414422
&::after {
415423
display: none !important;
416424
}
425+
span {
426+
left: 0;
427+
}
428+
}
429+
.#{$ns}StepsItem-description {
430+
min-width: px2rem(140px);
417431
}
418432
}
419433

@@ -429,15 +443,16 @@
429443
&Icon {
430444
position: relative;
431445
display: block;
446+
margin-left: px2rem(40px);
432447

433448
&:after {
434449
content: '';
435450
position: absolute;
436451
right: 0;
437452
top: px2rem(15px);
438453
height: 1px;
439-
left: px2rem(40px);
440-
width: 99999px;
454+
left: px2rem(35px);
455+
width: px2rem(80px);
441456
background-color: var(--Steps-line-bg);
442457
}
443458
}

0 commit comments

Comments
 (0)