From db804c2602d2b279cfdf529142549d48c7b9275f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 5 Nov 2025 00:31:10 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mal?=
 =?UTF-8?q?l=E3=80=91diy-editor=20=E7=9A=84=20vertical-button-group=20?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vertical-button-group/index.vue           | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

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 f7b609c1d..2b081b5b5 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
@@ -3,15 +3,37 @@ import { ButtonGroup } from 'ant-design-vue';
 
 /**
  * 垂直按钮组
- * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ * Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
  */
 defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <ButtonGroup direction="vertical" v-bind="$attrs">
+  <ButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
     <slot></slot>
   </ButtonGroup>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+// TODO @AI:圆角的样式不太对！
+.ant-btn-group > :deep(.ant-btn:first-child) {
+  border-bottom-color: transparent;
+  border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
+}
+
+.ant-btn-group > :deep(.ant-btn:last-child) {
+  border-top-color: transparent;
+  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-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>