u

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

@@ -1,16 +1,30 @@
-import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
   name: 'Group',
-  props: {},
+  props: {
+    prepend: { type: String, default: '' },
+    append: { type: String, default: '' },
+    size: { type: String as () => 'small' | 'medium' | 'large', default: 'medium' },
+  },
   setup(props, { slots }) {
     const prefixCls = getPrefixCls('group')
 
+    const renderNode = (slotName: 'prepend' | 'append', propValue: string) => {
+      // slot 优先
+      if (slots[slotName])
+        return slots[slotName]!()
+      if (propValue)
+        return <div class={`${prefixCls}-${slotName}`}>{propValue}</div>
+      return null
+    }
+
     return () => (
-      <div class={[`${prefixCls}-wrapper`]}>
+      <div class={[`${prefixCls}-wrapper`, `${prefixCls}-size-${props.size}`]}>
+        {renderNode('prepend', props.prepend)}
         {slots.default?.()}
+        {renderNode('append', props.append)}
       </div>
     )
   },