From 942090e4b0219c345858388670cd0a1735787293 Mon Sep 17 00:00:00 2001
From: Ce1ling <2134045201@qq.com>
Date: Wed, 4 Oct 2023 23:55:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20[tabs]=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/Tabs/TabHeader.vue | 21 ++++++++++++---------
 packages/components/Tabs/Tabs.vue      |  1 +
 packages/components/Tabs/tabs.ts       |  3 +++
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/components/Tabs/TabHeader.vue b/packages/components/Tabs/TabHeader.vue
index df5a314..7e3e1be 100644
--- a/packages/components/Tabs/TabHeader.vue
+++ b/packages/components/Tabs/TabHeader.vue
@@ -63,8 +63,8 @@ const getNavbarOffset = computed(() => {
 })
 
 const getBarStyles = computed(() => ({
-  width: `${getNavbarWidth.value}px`,
-  maxWidth: `${getNavbarWidth.value}px`,
+  width: tabsProps.barWidth ?? `${getNavbarWidth.value}px`,
+  maxWidth: tabsProps.barWidth ?? `${getNavbarWidth.value}px`,
   height: getNavbarHeight.value,
   backgroundColor: tabsProps.activeBgColor,
   transform: `translateX(${getNavbarOffset.value}px)`,
@@ -159,17 +159,20 @@ const handleNavbar = (el: TabsHeaderRefEl) => {
 
 const hRenderTabHeader = (type: string, vNode: VNode, idx: number) => {
   const isActive = tabsProps.modelValue === vNode.props?.name
+  const style: { [k: string]: string } = {}
+
+  if (isActive && tabsProps.activeColor) {
+    style['--vi-tabs-active-color'] = tabsProps.activeColor
+  } else if (isActive && !tabsProps.showBar) {
+    style['--vi-tabs-active-color'] = 'var(--vi-color-primary)'
+  }
 
   return h(
     type,
     {
       ...vNode.props,
-      class: [
-        'vi-tabs__header-item',
-        {
-          'is-active': isActive,
-        },
-      ],
+      style,
+      class: ['vi-tabs__header-item', { 'is-active': isActive }],
       ref: tabsHeaderNodes[idx].ref,
       onClick: (e: MouseEvent) => {
         const { name } = vNode.props ?? {}
@@ -216,7 +219,7 @@ onBeforeUnmount(() => unobserve(tabsHeader.value!))
     v-bind="$attrs"
     ref="tabsHeader"
   >
-    <div class="vi-tabs__bar" :style="getBarStyles" />
+    <div v-if="tabsProps.showBar" class="vi-tabs__bar" :style="getBarStyles" />
     <RenderTabHeader />
   </div>
 </template>
diff --git a/packages/components/Tabs/Tabs.vue b/packages/components/Tabs/Tabs.vue
index 76d4afa..2db6119 100644
--- a/packages/components/Tabs/Tabs.vue
+++ b/packages/components/Tabs/Tabs.vue
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<TabsProps>(), {
   headerPadding: '6px',
   barHeight: '2px',
   center: false,
+  showBar: true,
 })
 const emit = defineEmits<TabsEmits>()
 const slots = useSlots()
diff --git a/packages/components/Tabs/tabs.ts b/packages/components/Tabs/tabs.ts
index c0a9da1..8d18ba1 100644
--- a/packages/components/Tabs/tabs.ts
+++ b/packages/components/Tabs/tabs.ts
@@ -13,6 +13,9 @@ export interface TabsProps {
   barHeight?: string
   center?: boolean
   barHalf?: boolean
+  barWidth?: string
+  showBar?: boolean
+  activeColor?: string
 }
 
 export interface TabsEmits {