新增 FaButtonGroup 组件

Author: hooray

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;

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']

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>

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>