feat: VerticalButtonGroup style

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -108,9 +108,11 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
-        <VerticalButtonGroup type="primary">
+        <VerticalButtonGroup size="small">
           <Button
             :disabled="!canMoveUp"
+            type="primary"
+            size="small"
             @click.stop="handleMoveComponent(-1)"
             v-tippy="{
               content: '上移',
@@ -123,6 +125,8 @@ const handleDeleteComponent = () => {
           </Button>
           <Button
             :disabled="!canMoveDown"
+            type="primary"
+            size="small"
             @click.stop="handleMoveComponent(1)"
             v-tippy="{
               content: '下移',
@@ -134,6 +138,8 @@ const handleDeleteComponent = () => {
             <IconifyIcon icon="lucide:arrow-down" />
           </Button>
           <Button
+            type="primary"
+            size="small"
             @click.stop="handleCopyComponent()"
             v-tippy="{
               content: '复制',
@@ -145,6 +151,8 @@ const handleDeleteComponent = () => {
             <IconifyIcon icon="lucide:copy" />
           </Button>
           <Button
+            type="primary"
+            size="small"
             @click.stop="handleDeleteComponent()"
             v-tippy="{
               content: '删除',

apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ButtonGroup } from 'ant-design-vue';
-
+import { Space } from 'ant-design-vue';
 /**
  * 垂直按钮组
  * Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
@@ -9,31 +8,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <ButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
-    <slot></slot>
-  </ButtonGroup>
+  <Space v-bind="$attrs">
+    <Space.Compact direction="vertical">
+      <slot></slot>
+    </Space.Compact>
+  </Space>
 </template>
-
-<style scoped lang="scss">
-// TODO @AI:圆角的样式不太对！
-.ant-btn-group > :deep(.ant-btn:first-child) {
-  border-bottom-color: transparent;
-  border-radius: hsl(var(--radius)) hsl(var(--radius)) 0 0;
-}
-
-.ant-btn-group > :deep(.ant-btn:last-child) {
-  border-top-color: transparent;
-  border-radius: 0 0 hsl(var(--radius)) hsl(var(--radius));
-}
-
-.ant-btn-group :deep(.ant-btn:not(:first-child):not(:last-child)) {
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-radius: 0;
-}
-
-.ant-btn-group > :deep(.ant-btn:not(:last-child)) {
-  margin-right: 0;
-  margin-bottom: -1px;
-}
-</style>