amis-saas-7517 主题外观

Change-Id: If6d82ef043334e9ffd5e6472e2c7f3b451ce1411

packages/amis-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis-editor",
-  "version": "5.2.1",
+  "version": "5.2.1-theme.0",
   "description": "amis 可视化编辑器",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "amis-editor-core": "*",
+    "amis-editor-core": "^5.2.1-theme.0",
     "amis-theme-editor": "*",
     "i18n-runtime": "*",
     "lodash": "^4.17.15"
@@ -102,8 +102,8 @@
     "amis": "*",
     "amis-core": "*",
     "amis-formula": "*",
-    "amis-ui": "*",
     "amis-theme-editor": "*",
+    "amis-ui": "*",
     "i18n-runtime": "*"
   }
-}
+}

packages/amis-editor/src/index.tsx

@@ -165,7 +165,7 @@ import './renderer/FeatureControl';
 import './renderer/event-control/index';
 import './renderer/TreeOptionControl';
 import './renderer/TransferTableControl';
-import 'amis-theme-editor/lib/renderers';
+import 'amis-theme-editor';
 
 export * from './component/BaseControl';
 export * from './icons/index';

packages/amis-editor/src/plugin/Button.tsx

@@ -80,37 +80,19 @@ export class ButtonPlugin extends BasePlugin {
 
     const buttonStateFunc = (visibleOn: string, state: string) => {
       return [
-        {
-          mode: 'default',
-          type: 'amis-theme-color-picker',
+        getSchemaTpl('theme:colorPicker', {
           label: '文字颜色',
           name: `css.className.color:${state}`,
           labelMode: 'input',
-          needCustom: true,
           visibleOn: visibleOn
-        },
-        {
-          mode: 'default',
-          type: 'amis-theme-color-picker',
+        }),
+        getSchemaTpl('theme:colorPicker', {
           label: '背景颜色',
-          name: `css.className.background-color:${state}`,
+          name: `css.className.background:${state}`,
           labelMode: 'input',
-          needCustom: true,
+          needGradient: true,
           visibleOn: visibleOn
-        },
-        // {
-        //   type: 'amis-theme-shadow-editor',
-        //   name: `css.className.shadow:${state}`,
-        //   label: '阴影'
-        // },
-        {
-          mode: 'default',
-          label: '边框',
-          type: 'amis-theme-border',
-          name: `css.className.border:${state}`,
-          needColorCustom: true,
-          visibleOn: visibleOn
-        }
+        })
       ];
     };
 
@@ -306,7 +288,7 @@ export class ButtonPlugin extends BasePlugin {
             body: [
               {
                 type: 'select',
-                name: 'state',
+                name: 'editorState',
                 label: '状态',
                 selectFirst: true,
                 options: [
@@ -328,57 +310,19 @@ export class ButtonPlugin extends BasePlugin {
                   }
                 ]
               },
-              ...buttonStateFunc("${state == 'default' || !state}", 'default'),
-              ...buttonStateFunc("${state == 'hover'}", 'hover'),
-              ...buttonStateFunc("${state == 'active'}", 'active'),
-              ...buttonStateFunc("${state == 'disabled'}", 'disabled')
+              ...buttonStateFunc(
+                "${editorState == 'default' || !editorState}",
+                'default'
+              ),
+              ...buttonStateFunc("${editorState == 'hover'}", 'hover'),
+              ...buttonStateFunc("${editorState == 'active'}", 'active')
             ]
           },
           {
             title: '尺寸参数',
-            body: [
-              {
-                mode: 'default',
-                label: '尺寸',
-                type: 'amis-theme-size-editor',
-                name: `css.className.size`,
-                hideWidth: true
-              },
-              {
-                mode: 'default',
-                type: 'amis-theme-font-editor',
-                label: '文字',
-                name: `css.className.font`
-              },
-              {
-                mode: 'default',
-                type: 'amis-theme-radius',
-                label: '圆角',
-                name: `css.className.radius`
-              },
-              {
-                mode: 'default',
-                type: 'amis-theme-padding-and-margin',
-                label: '边距',
-                name: `css.className.radipadding-and-margin`
-              }
-            ]
+            body: [getSchemaTpl('theme:paddingAndMargin')]
           },
-          getSchemaTpl('style:classNames', {
-            isFormItem: false,
-            schema: [
-              getSchemaTpl('className', {
-                name: 'iconClassName',
-                label: '左侧图标',
-                visibleOn: 'this.icon'
-              }),
-              getSchemaTpl('className', {
-                name: 'rightIconClassName',
-                label: '右侧图标',
-                visibleOn: 'this.rightIcon'
-              })
-            ]
-          })
+          getSchemaTpl('theme:classNames')
         ])
       },
       {

packages/amis-editor/src/tpl/style.tsx

@@ -44,12 +44,14 @@ setSchemaTpl(
               label: '控件',
               name: 'inputClassName'
             }),
-            ...unsupportStatic ? [] : [
-              getSchemaTpl('className', {
-                label: '表单项静态',
-                name: 'staticClassName'
-              })
-            ]
+            ...(unsupportStatic
+              ? []
+              : [
+                  getSchemaTpl('className', {
+                    label: '表单项静态',
+                    name: 'staticClassName'
+                  })
+                ])
           ]
         : [
             getSchemaTpl('className', {
@@ -418,3 +420,45 @@ export const styleTpl = {
     }
   ]
 };
+
+/**
+ * 新版主题
+ */
+
+// css类名
+setSchemaTpl('theme:classNames', (option: any = []) => {
+  return {
+    title: 'CSS 类名',
+    body: [
+      {
+        type: 'input-text',
+        label: '外层',
+        name: 'className'
+      },
+      ...option
+    ]
+  };
+});
+
+// 颜色选择器
+setSchemaTpl('theme:colorPicker', (option: any = {}) => {
+  return {
+    mode: 'default',
+    type: 'amis-theme-color-picker',
+    label: '颜色',
+    name: `css.className.color`,
+    needCustom: true,
+    ...option
+  };
+});
+
+// 边距选择器
+setSchemaTpl('theme:paddingAndMargin', (option: any = {}) => {
+  return {
+    mode: 'default',
+    type: 'amis-theme-padding-and-margin',
+    label: '边距',
+    name: `css.className.padding-and-margin`,
+    ...option
+  };
+});