为 FaTabs 组件添加 listClass 和 contentClass 属性，以支持自定义样式

Author: hooray

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>