feat: button-select-group角标可视化配置对齐Nav组件

packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx

@@ -126,7 +126,10 @@ export class ButtonGroupControlPlugin extends BasePlugin {
             },
             {
               title: '按钮管理',
-              body: [getSchemaTpl('optionControlV2')]
+              body: [
+                getSchemaTpl('nav-badge'),
+                getSchemaTpl('optionControlV2')
+              ]
             },
             getSchemaTpl('status', {
               isFormItem: true

packages/amis-editor/src/renderer/BadgeControl.tsx

@@ -72,11 +72,6 @@ export interface BadgeControlProps extends FormControlProps {
    * 提示类型
    */
   level?: 'info' | 'warning' | 'success' | 'danger' | SchemaExpression;
-
-  /**
-   * 作为option属性时，角标配置变化绑定事件
-   */
-  onOptionChange?: (value: boolean | BadgeForm) => void
 }
 
 interface BadgeControlState {
@@ -180,25 +175,19 @@ export default class BadgeControl extends React.Component<
 
   @autobind
   handleSwitchChange(checked: boolean): void {
-    const {onChange,onOptionChange, disabled} = this.props;
+    const {onChange, disabled} = this.props;
     if (disabled) {
       return;
     }
 
     this.setState({checked});
-    if (onOptionChange) {
-      return onOptionChange(checked);
-    }
     onChange?.(checked ? {mode: 'dot'} : undefined);
   }
 
   handleSubmit(form: BadgeForm, action: any): void {
-    const {onBulkChange, onOptionChange} = this.props;
+    const {onBulkChange} = this.props;
 
     if (action?.type === 'submit') {
-      if (onOptionChange) {
-        return onOptionChange(this.normalizeBadgeValue(form));
-      }
       onBulkChange?.({badge: this.normalizeBadgeValue(form)});
     }
   }

packages/amis-editor/src/renderer/OptionControl.tsx

@@ -383,19 +383,9 @@ export default class OptionControl extends React.Component<
   /**
    * 编辑角标
    */
-  toggleBadge(index: number, value: boolean | {}) {
+  toggleBadge(index: number, value: string) {
     const {options} = this.state;
-    // visible
-    if (typeof value === 'boolean') {
-      if (value) {
-        options[index].badge = {mode: 'dot'};
-      } else {
-        delete options[index].badge;
-      }
-    } else {
-      // 角标配置
-      options[index].badge = value;
-    }
+    options[index].badge = value;
 
     this.setState({options}, () => this.onChange());
   }
@@ -645,10 +635,16 @@ export default class OptionControl extends React.Component<
                 onChange: (v: string) => this.handleHiddenValueChange(index, v)
               },
               {
-                type: 'ae-badge',
+                type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+                placeholder: '请输入角标文本',
+                label: '角标',
+                mode: 'horizontal',
                 visible: showBadge,
                 value: props?.badge,
-                onOptionChange: v => this.toggleBadge(index, v)
+                name: 'optionBadge',
+                labelClassName: 'ae-OptionControlItem-EditLabel',
+                valueClassName: 'ae-OptionControlItem-EditValue',
+                onChange: (v: string) => this.toggleBadge(index, v)
               }
             ]
           },

packages/amis/src/renderers/Form/ButtonGroupSelect.tsx

@@ -5,7 +5,8 @@ import {
   FormOptionsControl
 } from 'amis-core';
 import type {Option} from 'amis-core';
-import {ActionObject} from 'amis-core';
+import {ActionObject, isObject} from 'amis-core';
+import type {BadgeObject} from 'amis-ui';
 import {getLevelFromClassName, autobind, isEmpty} from 'amis-core';
 import {ButtonGroupSchema} from '../ButtonGroup';
 import {supportStatic} from './StaticHoc';
@@ -68,6 +69,16 @@ export default class ButtonGroupControl extends React.Component<
     reload && reload();
   }
 
+  getBadgeConfig(config: BadgeObject, item: Option) {
+    return config
+      ? item?.badge && (typeof item.badge === 'string' || typeof item.badge === 'number')
+        ? {...config, text: item.badge}
+        : item?.badge && isObject(item.badge)
+        ? {...config, ...item.badge}
+        : null
+      : item.badge;
+  }
+
   @supportStatic()
   render(props = this.props) {
     const {
@@ -89,6 +100,7 @@ export default class ButtonGroupControl extends React.Component<
       block,
       vertical,
       tiled,
+      badge,
       translate: __
     } = props;
 
@@ -103,13 +115,15 @@ export default class ButtonGroupControl extends React.Component<
     if (options && options.length) {
       body = options.map((option, key) => {
         const active = !!~selectedOptions.indexOf(option);
+        const optionBadge = this.getBadgeConfig(badge, option);
+
         return render(
           `option/${key}`,
           {
             label: option[labelField || 'label'],
             icon: option.icon,
             size: option.size || size,
-            badge: option.badge,
+            badge: optionBadge,
             type: 'button',
             block: block
           },
@@ -130,8 +144,10 @@ export default class ButtonGroupControl extends React.Component<
         );
       });
     } else if (Array.isArray(buttons)) {
-      body = buttons.map((button, key) =>
-        render(
+      body = buttons.map((button, key) => {
+        const buttonBadge = this.getBadgeConfig(badge, button);
+
+        return render(
           `button/${key}`,
           {
             size: size,
@@ -139,14 +155,15 @@ export default class ButtonGroupControl extends React.Component<
             activeLevel: btnActiveLevel,
             level: btnLevel,
             disabled,
-            ...button
+            ...button,
+            badge: buttonBadge
           },
           {
             key,
             className: cx(button.className, btnClassName)
           }
-        )
-      );
+        );
+      });
     }
 
     return (