u

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

@@ -3,36 +3,66 @@
 
 $group-prefix: #{$prefix}-group;
 
+.#{$group-prefix}-size {
+  &-small {
+    height: $size-height-small;
+    font-size: $size-font-small;
+  }
+
+  &-medium {
+    height: $size-height-medium;
+    font-size: $size-font-medium;
+  }
+
+  &-large {
+    height: $size-height-large;
+    font-size: $size-font-large;
+  }
+}
+
 .#{$group-prefix}-wrapper {
   display: flex;
   width: 100%;
   border-radius: $border-radius;
   overflow: hidden;
+  position: relative;
+
+  .#{$group-prefix}-prepend,
+  .#{$group-prefix}-append {
+    background-color: $default-color;
+    color: $text-color-base;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $border-color;
+  }
 
   > * {
     flex: 1;
     margin: 0;
-    border-radius: 0;
     position: relative;
+    border-radius: 0;
+    z-index: 0;
 
-    border: $border-outline-color;
-    border-left: none;
-    box-shadow: none;
-    &:hover {
-      border-left: $brand-color;
-      z-index: 1;
-      box-shadow: none;
+    // 抵消左边 border，避免叠加
+    & + * {
+      margin-left: -1px;
     }
+
+    // hover / focus / active 高亮
+    &:hover,
     &:focus-within,
     &:active {
-      border-left: $brand-color;
       z-index: 1;
-      box-shadow: none;
+
+      // 高亮边框
+      outline: 1px solid $primary-color;
+      outline-offset: -1px;
     }
   }
 
+  // 首尾圆角
   > *:first-child {
-    border-left: $border-outline-color;
     border-top-left-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
   }

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>
     )
   },