u

code/base-project/base-vue/packages/ao-design/src/radio/radio-group.tsx

@@ -36,6 +36,10 @@ export default defineComponent({
       type: String,
       default: 'value',
     },
+    extraField: {
+      type: String,
+      default: 'extra',
+    },
     options: {
       type: Array as PropType<Array<string | number | RadioOption>>,
       default: [],
@@ -44,6 +48,14 @@ export default defineComponent({
       type: Object as PropType<Record<string, any>>,
       default: () => ({}),
     },
+    type: {
+      type: String as PropType<'default' | 'filled' | 'primaryFilled' | 'card' | 'pureCard' | 'outline'>,
+      default: 'default',
+    },
+    size: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+      default: 'medium',
+    },
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit, slots }) {
@@ -64,12 +76,13 @@ export default defineComponent({
       emit('change', val, e)
     }
     const groupDisabled = computed(() => props.disabled)
-
+    const groupType = computed(() => props.type)
     // 提供 context 给 Radio 使用
     provide(radioGroupKey, reactive({
       name: 'AoRadioGroup' as const,
       value: _value,
       disabled: groupDisabled,
+      type: groupType,
       slots,
       handleChange,
     }))
@@ -88,12 +101,31 @@ export default defineComponent({
             ? opt[props.labelField]()
             : opt[props.labelField]
 
+        const extraContent = slots.extra
+          ? slots.extra({ data: opt })
+          : typeof opt[props.extraField] === 'function'
+            ? opt[props.extraField]()
+            : opt[props.extraField]
+
+        if (slots.radio) {
+          return (
+            <div
+              key={opt[props.valueField]}
+              onClick={e => handleChange(opt[props.valueField], e)} // 内部统一处理点击
+            >
+              {slots.radio({ data: opt, checked: _value.value === opt[props.valueField] })}
+            </div>
+          )
+        }
+
         return (
           <Radio
             key={opt[props.valueField]}
             value={opt[props.valueField]}
             disabled={opt.disabled ?? props.disabled}
             modelValue={_value.value === opt[props.valueField]}
+            extra={extraContent}
+            type={props.type}
           >
             {labelContent}
           </Radio>
@@ -101,12 +133,30 @@ export default defineComponent({
       })
     }
 
+    const spaceSize
+    = ['default', 'card', 'pureCard'].includes(groupType.value)
+      ? [6, 6]
+      : props.spaceProps.size ?? 0
+
+    const sizeClass = computed(() => {
+      if (['filled', 'primaryFilled', 'outline'].includes(groupType.value)) {
+        return `${prefixCls}-${props.size}`
+      }
+      return null
+    })
+
     return () => (
-      <div class={[prefixCls]}>
-        <Space {...props.spaceProps}>
-          {props.options.length > 0 ? renderOptions() : slots.default?.()}
-        </Space>
-      </div>
+      <Space
+        align="start"
+        size={spaceSize}
+        {...props.spaceProps}
+        class={[
+          `${prefixCls}-${groupType.value}`,
+          sizeClass.value,
+        ]}
+      >
+        {props.options.length > 0 ? renderOptions() : slots.default?.()}
+      </Space>
     )
   },
 })