From e3aa58e892fc85a316e1e53547a4d970766f614b Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Wed, 11 Jun 2025 10:08:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20`FaTabs`=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=20`listClass`=20=E5=92=8C=20`conten?=
 =?UTF-8?q?tClass`=20=E5=B1=9E=E6=80=A7=EF=BC=8C=E4=BB=A5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaTabs/index.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/ui/components/FaTabs/index.vue b/src/ui/components/FaTabs/index.vue
index 75d8d7c5..3bdc465e 100644
--- a/src/ui/components/FaTabs/index.vue
+++ b/src/ui/components/FaTabs/index.vue
@@ -13,8 +13,11 @@ const props = defineProps<{
     icon?: string
     label: string
     value: string | number
+    class?: HTMLAttributes['class']
   }[]
   class?: HTMLAttributes['class']
+  listClass?: HTMLAttributes['class']
+  contentClass?: HTMLAttributes['class']
 }>()
 
 const emits = defineEmits<{
@@ -35,15 +38,15 @@ function handleChange(value: string | number) {
 
 <template>
   <Tabs v-model="activeTab" :class="cn('flex flex-col', props.class)" @update:model-value="handleChange">
-    <TabsList class="flex items-center justify-center">
-      <TabsTrigger v-for="item in list" :key="item.value" :value="item.value" class="w-full">
+    <TabsList :class="cn('flex items-center justify-center', props.listClass)">
+      <TabsTrigger v-for="item in list" :key="item.value" :value="item.value" :class="cn('w-full', item.class)">
         <div class="flex-center gap-1">
           <FaIcon v-if="item.icon" :name="item.icon" class="flex-shrink-0" />
           {{ item.label }}
         </div>
       </TabsTrigger>
     </TabsList>
-    <TabsContent v-for="item in list" :key="item.value" :value="item.value">
+    <TabsContent v-for="item in list" :key="item.value" :value="item.value" :class="props.contentClass">
       <slot :name="item.value" />
     </TabsContent>
   </Tabs>