feat: checkbox\radios支持外观配置 (#11095)

Co-authored-by: qinhaoyan <[email protected]>
baidu · Oct 28, 2024 · 75b3e03 · 75b3e03
1 parent dc8dcc6
commit 75b3e03
Show file tree

Hide file tree

Showing 7 changed files with 451 additions and 48 deletions.
diff --git a/packages/amis-editor/src/plugin/Form/Checkbox.tsx b/packages/amis-editor/src/plugin/Form/Checkbox.tsx
@@ -21,6 +21,7 @@ import {ValidatorTag} from '../../validator';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import {getEventControlConfig} from '../../renderer/event-control/helper';
 import omit from 'lodash/omit';
+import {inputStateTpl} from '../../renderer/style-control/helper';
 
 setSchemaTpl('option', {
   name: 'option',
@@ -45,7 +46,8 @@ export class CheckboxControlPlugin extends BasePlugin {
   scaffold = {
     type: 'checkbox',
     option: '勾选框',
-    name: 'checkbox'
+    name: 'checkbox',
+    label: '勾选框'
   };
   previewSchema: any = {
     type: 'form',
@@ -227,7 +229,70 @@ export class CheckboxControlPlugin extends BasePlugin {
         title: '外观',
         body: [
           getSchemaTpl('collapseGroup', [
-            getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
+            getSchemaTpl('theme:formItem', {hidSize: true}),
+            getSchemaTpl('theme:form-label'),
+            getSchemaTpl('theme:form-description'),
+            {
+              title: '勾选框样式',
+              body: [
+                ...inputStateTpl('themeCss.checkboxClassName', '--checkbox', {
+                  hideFont: true,
+                  hideMargin: true,
+                  hidePadding: true,
+                  state: [
+                    {
+                      label: '常规',
+                      value: 'checkbox-default'
+                    },
+                    {
+                      label: '悬浮',
+                      value: 'checkbox-hover'
+                    },
+                    {
+                      label: '禁用',
+                      value: 'checkbox-disabled'
+                    },
+                    {
+                      label: '选中',
+                      value: 'checked-default'
+                    },
+                    {
+                      label: '选中态悬浮',
+                      value: 'checked-hover'
+                    },
+                    {
+                      label: '选中禁用',
+                      value: 'checked-disabled'
+                    }
+                  ]
+                })
+              ]
+            },
+            {
+              title: '选项说明样式',
+              body: [
+                ...inputStateTpl('themeCss.checkboxLabelClassName', '', {
+                  hidePadding: true,
+                  hideRadius: true,
+                  hideBorder: true,
+                  state: [
+                    {
+                      label: '常规',
+                      value: 'default'
+                    },
+                    {
+                      label: '悬浮',
+                      value: 'hover'
+                    },
+                    {
+                      label: '禁用',
+                      value: 'disabled'
+                    }
+                  ]
+                })
+              ]
+            },
+            getSchemaTpl('theme:cssCode'),
             getSchemaTpl('style:classNames')
           ])
         ]

diff --git a/packages/amis-editor/src/plugin/Form/Radios.tsx b/packages/amis-editor/src/plugin/Form/Radios.tsx
@@ -13,6 +13,7 @@ import {getEventControlConfig} from '../../renderer/event-control/helper';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import type {Schema, SchemaType} from 'amis';
+import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class RadiosControlPlugin extends BasePlugin {
   static id = 'RadiosControlPlugin';
@@ -157,8 +158,8 @@ export class RadiosControlPlugin extends BasePlugin {
         title: '外观',
         body: [
           getSchemaTpl('collapseGroup', [
-            getSchemaTpl('style:formItem', {
-              renderer: context.info.renderer,
+            getSchemaTpl('theme:formItem', {
+              hidSize: true,
               schema: [
                 getSchemaTpl('switch', {
                   label: '一行选项显示',
@@ -177,6 +178,92 @@ export class RadiosControlPlugin extends BasePlugin {
                 }
               ]
             }),
+            getSchemaTpl('theme:form-label'),
+            getSchemaTpl('theme:form-description'),
+            {
+              title: '单选框样式',
+              body: [
+                ...inputStateTpl('themeCss.radiosClassName', '--radio', {
+                  hideFont: true,
+                  hideMargin: true,
+                  hidePadding: true,
+                  state: [
+                    {
+                      label: '常规',
+                      value: 'radios-default'
+                    },
+                    {
+                      label: '悬浮',
+                      value: 'radios-hover'
+                    },
+                    {
+                      label: '禁用',
+                      value: 'radios-disabled'
+                    },
+                    {
+                      label: '选中',
+                      value: 'checked-default'
+                    },
+                    {
+                      label: '选中态悬浮',
+                      value: 'checked-hover'
+                    },
+                    {
+                      label: '选中禁用',
+                      value: 'checked-disabled'
+                    }
+                  ],
+                  schema: [
+                    getSchemaTpl('theme:colorPicker', {
+                      name: 'themeCss.radiosCheckedInnerClassName.background:default',
+                      labelMode: 'input',
+                      label: '圆点颜色',
+                      visibleOn:
+                        "${__editorStatethemeCss.radiosClassName == 'checked-default'}"
+                    }),
+                    getSchemaTpl('theme:colorPicker', {
+                      name: 'themeCss.radiosCheckedInnerClassName.background:hover',
+                      labelMode: 'input',
+                      label: '圆点颜色',
+                      visibleOn:
+                        "${__editorStatethemeCss.radiosClassName == 'checked-hover'}"
+                    }),
+                    getSchemaTpl('theme:colorPicker', {
+                      name: 'themeCss.radiosCheckedInnerClassName.background:disabled',
+                      labelMode: 'input',
+                      label: '圆点颜色',
+                      visibleOn:
+                        "${__editorStatethemeCss.radiosClassName == 'checked-disabled'}"
+                    })
+                  ]
+                })
+              ]
+            },
+            {
+              title: '选项说明样式',
+              body: [
+                ...inputStateTpl('themeCss.radiosLabelClassName', '', {
+                  hidePadding: true,
+                  hideRadius: true,
+                  hideBorder: true,
+                  state: [
+                    {
+                      label: '常规',
+                      value: 'default'
+                    },
+                    {
+                      label: '悬浮',
+                      value: 'hover'
+                    },
+                    {
+                      label: '禁用',
+                      value: 'disabled'
+                    }
+                  ]
+                })
+              ]
+            },
+            getSchemaTpl('theme:cssCode'),
             getSchemaTpl('style:classNames', {
               schema: [
                 getSchemaTpl('className', {

diff --git a/packages/amis-editor/src/renderer/style-control/helper.tsx b/packages/amis-editor/src/renderer/style-control/helper.tsx
@@ -1,21 +1,23 @@
 import {getSchemaTpl} from 'amis-editor-core';
+interface InputStateOptions {
+  state?: {
+    label: string;
+    value: string;
+    token?: string;
+  }[];
+  hideFont?: boolean;
+  hidePadding?: boolean;
+  hideMargin?: boolean;
+  hideRadius?: boolean;
+  hideBackground?: boolean;
+  hideBorder?: boolean;
+  schema?: any[];
+}
 
 export const inputStateTpl = (
   className: string,
   token: string = '',
-  options?: {
-    state?: {
-      label: string;
-      value: string;
-      token?: string;
-    }[];
-    hideFont?: boolean;
-    hidePadding?: boolean;
-    hideMargin?: boolean;
-    hideRadius?: boolean;
-    hideBackground?: boolean;
-    hideBorder?: boolean;
-  }
+  options?: InputStateOptions
 ) => {
   const stateOptions = options?.state || [
     {
@@ -67,7 +69,7 @@ export const inputStateFunc = (
   state: string,
   className: string,
   token: string,
-  options: any
+  options?: InputStateOptions
 ) => {
   const cssTokenState = state === 'focused' ? 'active' : state;
 

diff --git a/packages/amis-ui/scss/components/form/_form.scss b/packages/amis-ui/scss/components/form/_form.scss
@@ -127,6 +127,13 @@
     vertical-align: top;
   }
 
+  &--flex {
+    margin: calc(var(--Form-item-gap) / 2);
+    &:last-child {
+      margin-bottom: calc(var(--Form-item-gap) / 2);
+    }
+  }
+
   &--inline {
     margin-right: var(--Form-mode-inline-item-gap);
   }
@@ -428,7 +435,6 @@
     flex-basis: 0;
     flex-grow: 1;
     flex-shrink: 1;
-    padding: calc(var(--Form-item-gap) / 2);
     min-width: 0;
     min-height: 0;
   }