amis-saas-9429 页面编辑器外观继承

Change-Id: Ief1c25788164b1c24855bfee6863df6740696f2f

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样式',

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
   ];

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
       })
     ]
   };