From 4af458f067ba1571c484b3e267602276d4f81be4 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Sat, 7 Jun 2025 16:54:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20`FaButtonGroup`=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/MainSidebar/index.vue  |  4 +-
 src/types/components.d.ts                     |  1 +
 src/ui/components/FaButtonGroup/index.vue     | 60 +++++++++++++++++++
 .../component_built_in_example/button.vue     | 32 ++++++++++
 4 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/ui/components/FaButtonGroup/index.vue

diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue
index 295b0b3f..779ff9f8 100755
--- a/src/layouts/components/MainSidebar/index.vue
+++ b/src/layouts/components/MainSidebar/index.vue
@@ -40,7 +40,7 @@ onUnmounted(() => {
       <component :is="useSlots('main-sidebar-top')" />
       <Logo :show-title="false" class="sidebar-logo" />
       <component :is="useSlots('main-sidebar-after-logo')" />
-      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu">
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu flex-1">
         <!-- 侧边栏模式（含主导航） -->
         <div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
           <template v-for="(item, index) in menuStore.allMenus" :key="index">
@@ -92,8 +92,6 @@ onUnmounted(() => {
   }
 
   .menu {
-    flex: 1;
-
     :deep(.menu-item) {
       .menu-item-container {
         padding-block: 8px;
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 9bdeced2..dce63eb4 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     FaAvatar: typeof import('./../ui/components/FaAvatar/index.vue')['default']
     FaBackToTop: typeof import('./../ui/components/FaBackToTop/index.vue')['default']
     FaButton: typeof import('./../ui/components/FaButton/index.vue')['default']
+    FaButtonGroup: typeof import('./../ui/components/FaButtonGroup/index.vue')['default']
     FaCard: typeof import('./../ui/components/FaCard/index.vue')['default']
     FaCheckbox: typeof import('./../ui/components/FaCheckbox/index.vue')['default']
     FaContextMenu: typeof import('./../ui/components/FaContextMenu/index.vue')['default']
diff --git a/src/ui/components/FaButtonGroup/index.vue b/src/ui/components/FaButtonGroup/index.vue
new file mode 100644
index 00000000..89797154
--- /dev/null
+++ b/src/ui/components/FaButtonGroup/index.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+
+defineOptions({
+  name: 'FaButtonGroup',
+})
+
+const props = defineProps<{
+  vertical?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('inline-flex gap-[1px] items-stretch', {
+      'horizontal-group flex-row': !props.vertical,
+      'vertical-group flex-col': props.vertical,
+    })"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.horizontal-group {
+  :deep(> button) {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+  }
+}
+
+.vertical-group {
+  :deep(> button) {
+    &:first-child {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/component_built_in_example/button.vue b/src/views/component_built_in_example/button.vue
index b68a05b2..bd786468 100644
--- a/src/views/component_built_in_example/button.vue
+++ b/src/views/component_built_in_example/button.vue
@@ -34,5 +34,37 @@ meta:
         </FaButton>
       </div>
     </FaPageMain>
+    <FaPageMain title="按钮组">
+      <div class="flex flex-col items-start gap-4">
+        <FaButtonGroup>
+          <FaButton variant="secondary">
+            <FaIcon name="i-mdi:eye" class="size-4" />
+            查看详情
+          </FaButton>
+          <FaButton>
+            <FaIcon name="i-mdi:pencil" class="size-4" />
+            编辑
+          </FaButton>
+          <FaButton variant="destructive">
+            <FaIcon name="i-mdi:delete" class="size-4" />
+            删除
+          </FaButton>
+        </FaButtonGroup>
+        <FaButtonGroup vertical>
+          <FaButton variant="secondary">
+            <FaIcon name="i-mdi:eye" class="size-4" />
+            查看详情
+          </FaButton>
+          <FaButton>
+            <FaIcon name="i-mdi:pencil" class="size-4" />
+            编辑
+          </FaButton>
+          <FaButton variant="destructive">
+            <FaIcon name="i-mdi:delete" class="size-4" />
+            删除
+          </FaButton>
+        </FaButtonGroup>
+      </div>
+    </FaPageMain>
   </div>
 </template>