From e4040520e09c7ef9032091563dde42bef2f41612 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Wed, 5 Nov 2025 20:08:46 +0800
Subject: [PATCH] feat: VerticalButtonGroup style

---
 .../components/component-container.vue        | 10 +++++-
 .../vertical-button-group/index.vue           | 35 ++++---------------
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index a33031597..6f05d921a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/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: '删除',
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
index 78ac6e306..99d7d194c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/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>