From e553fefffbb5505d56eea909e284b39dd3246cdf Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Sat, 7 Jun 2025 16:54:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=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 ++++++++++++++++++++
 3 files changed, 62 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 422bc675..dbd056ce 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>