u

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

@@ -0,0 +1,44 @@
+@use '../_styles/theme/index' as *;
+@use 'sass:color';
+
+$group-prefix: #{$prefix}-group;
+
+.#{$group-prefix}-wrapper {
+  display: flex;
+  width: 100%;
+  border-radius: $border-radius;
+  overflow: hidden;
+
+  > * {
+    flex: 1;
+    margin: 0;
+    border-radius: 0;
+    position: relative;
+
+    border: $input-border;
+    border-left: none;
+    box-shadow: none;
+    &:hover {
+      border-left: $input-hover-border;
+      z-index: 1;
+      box-shadow: none;
+    }
+    &:focus-within,
+    &:active {
+      border-left: $input-focus-border;
+      z-index: 1;
+      box-shadow: none;
+    }
+  }
+
+  > *:first-child {
+    border-left: $input-border;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  > *:last-child {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+
+export default defineComponent({
+  name: 'Group',
+  props: {},
+  setup(props, { slots }) {
+    const prefixCls = getPrefixCls('group')
+
+    return () => (
+      <div class={[`${prefixCls}-wrapper`]}>
+        {slots.default?.()}
+      </div>
+    )
+  },
+})