diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx index 59460555b..e3ebc943e 100644 --- a/packages/amis-editor/src/plugin/Form/InputText.tsx +++ b/packages/amis-editor/src/plugin/Form/InputText.tsx @@ -358,11 +358,22 @@ export class TextControlPlugin extends BasePlugin { 'collapseGroup', [ getSchemaTpl('style:formItem', {renderer}), - getSchemaTpl('theme:form-label'), - getSchemaTpl('theme:form-description'), + getSchemaTpl('theme:form-label', { + fontOption: {editorThemePath: 'form.item.default.label.body.font'} + }), + getSchemaTpl('theme:form-description', { + fontOption: { + editorThemePath: 'form.item.default.description.body.font' + } + }), { title: '输入框样式', - body: [...inputStateTpl('css.inputControlClassName')] + body: [ + ...inputStateTpl( + 'css.inputControlClassName', + 'input.base.default' + ) + ] }, { title: 'AddOn样式', diff --git a/packages/amis-editor/src/renderer/style-control/helper.tsx b/packages/amis-editor/src/renderer/style-control/helper.tsx index ce30f2be4..1b5711d7e 100644 --- a/packages/amis-editor/src/renderer/style-control/helper.tsx +++ b/packages/amis-editor/src/renderer/style-control/helper.tsx @@ -1,6 +1,6 @@ import {getSchemaTpl} from 'amis-editor-core'; -export const inputStateTpl = (className: string) => { +export const inputStateTpl = (className: string, path: string = '') => { return [ { type: 'select', @@ -22,13 +22,19 @@ export const inputStateTpl = (className: string) => { } ] }, + { + type: 'hidden', + name: 'editorPath', + value: path + }, ...inputStateFunc( "${editorState == 'default' || !editorState}", 'default', - className + className, + path ), - ...inputStateFunc("${editorState == 'hover'}", 'hover', className), - ...inputStateFunc("${editorState == 'active'}", 'active', className) + ...inputStateFunc("${editorState == 'hover'}", 'hover', className, path), + ...inputStateFunc("${editorState == 'active'}", 'active', className, path) ]; }; @@ -36,32 +42,43 @@ export const inputStateFunc = ( visibleOn: string, state: string, className: string, + path: string, options: any = [] ) => { return [ getSchemaTpl('theme:font', { label: '文字', name: `${className}.font:${state}`, - visibleOn: visibleOn + visibleOn: visibleOn, + editorThemePath: `${path}.${state}.body.font`, + state }), getSchemaTpl('theme:colorPicker', { label: '背景', name: `${className}.background:${state}`, labelMode: 'input', needGradient: true, - visibleOn: visibleOn + visibleOn: visibleOn, + editorThemePath: `${path}.${state}.body.bg-color`, + state }), getSchemaTpl('theme:border', { name: `${className}.border:${state}`, - visibleOn: visibleOn + visibleOn: visibleOn, + editorThemePath: `${path}.${state}.body.border`, + state }), getSchemaTpl('theme:paddingAndMargin', { name: `${className}.padding-and-margin:${state}`, - visibleOn: visibleOn + visibleOn: visibleOn, + editorThemePath: `${path}.${state}.body.padding-and-margin`, + state }), getSchemaTpl('theme:radius', { name: `${className}.radius:${state}`, - visibleOn: visibleOn + visibleOn: visibleOn, + editorThemePath: `${path}.${state}.body.border`, + state }), ...options ]; diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx index e964f6453..c72f0ded4 100644 --- a/packages/amis-editor/src/tpl/style.tsx +++ b/packages/amis-editor/src/tpl/style.tsx @@ -465,33 +465,39 @@ setSchemaTpl( ); // form label -setSchemaTpl('theme:form-label', () => { +setSchemaTpl('theme:form-label', (option: any = {}) => { + const {fontOption = {}, pAmOption = {}} = option; return { title: 'Label样式', body: [ getSchemaTpl('theme:font', { label: '文字', - name: 'css.labelClassName.font' + name: 'css.labelClassName.font', + ...fontOption }), getSchemaTpl('theme:paddingAndMargin', { - name: 'css.labelClassName.padding-and-margin' + name: 'css.labelClassName.padding-and-margin', + ...pAmOption }) ] }; }); // form description -setSchemaTpl('theme:form-description', () => { +setSchemaTpl('theme:form-description', (option: any = {}) => { + const {fontOption = {}, pAmOption = {}} = option; return { title: '描述样式', visibleOn: 'this.description', body: [ getSchemaTpl('theme:font', { label: '文字', - name: 'css.descriptionClassName.font' + name: 'css.descriptionClassName.font', + ...fontOption }), getSchemaTpl('theme:paddingAndMargin', { - name: 'css.descriptionClassName.padding-and-margin' + name: 'css.descriptionClassName.padding-and-margin', + ...pAmOption }) ] };