From 6251618c9506a820b80bcebebaeffffb421877d9 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 21 Nov 2024 18:27:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(Tabbar):=20harmony=20=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json                             |  2 +-
 src/packages/tabbaritem/tabbaritem.scss     | 10 ++++++++
 src/packages/tabbaritem/tabbaritem.taro.tsx | 26 ++++++++++++++++++---
 src/utils/add-color-for-harmony.ts          |  2 +-
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/config.json b/src/config.json
index 25f5c94798..6b91c04c2e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -353,7 +353,7 @@
           "author": "hx"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Tabbar",
           "type": "component",
           "cName": "标签栏",
diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss
index 2a47107643..f096cb8a33 100644
--- a/src/packages/tabbaritem/tabbaritem.scss
+++ b/src/packages/tabbaritem/tabbaritem.scss
@@ -42,10 +42,20 @@
     color: $tabbar-active-color;
 
     .nut-tabbar-item-icon-box {
+      /* #ifdef harmony*/
+      color: $tabbar-active-color;
+      /* #endif*/
+      /* #ifndef harmony*/
       color: inherit;
+      /* #endif*/
 
       .nut-icon {
+        /* #ifdef harmony*/
+        color: $tabbar-active-color;
+        /* #endif*/
+        /* #ifndef harmony*/
         color: inherit;
+        /* #endif*/
       }
     }
   }
diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx
index b6882312ee..a43d76d403 100644
--- a/src/packages/tabbaritem/tabbaritem.taro.tsx
+++ b/src/packages/tabbaritem/tabbaritem.taro.tsx
@@ -4,6 +4,7 @@ import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Badge from '@/packages/badge/index.taro'
 import TabbarContext from '@/packages/tabbar/context'
+import addColorForHarmony from '@/utils/add-color-for-harmony'
 
 export interface TabbarItemProps extends BasicComponent {
   title: ReactNode
@@ -83,13 +84,32 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
       {icon ? (
         <>
           <Badge {...badgeProps}>
-            <View className={boxPrefix}>{icon}</View>
+            <View className={boxPrefix}>
+              {addColorForHarmony(
+                icon,
+                active ? ctx?.activeColor : ctx?.inactiveColor
+              )}
+            </View>
           </Badge>
-          <View className={titleClass}>{title}</View>
+          <View
+            className={titleClass}
+            style={{
+              color: active ? ctx?.activeColor : ctx?.inactiveColor,
+            }}
+          >
+            {title}
+          </View>
         </>
       ) : (
         <Badge {...badgeProps}>
-          <View className={titleClass}>{title}</View>
+          <View
+            className={titleClass}
+            style={{
+              color: active ? ctx?.activeColor : ctx?.inactiveColor,
+            }}
+          >
+            {title}
+          </View>
         </Badge>
       )}
     </View>
diff --git a/src/utils/add-color-for-harmony.ts b/src/utils/add-color-for-harmony.ts
index 471f7b3f80..e51e4cf96f 100644
--- a/src/utils/add-color-for-harmony.ts
+++ b/src/utils/add-color-for-harmony.ts
@@ -11,7 +11,7 @@ interface ColorProps {
  * @param color - 要添加的颜色值（如：'#ff0000'）
  * @returns 处理后的 React 节点
  */
-function addColorForHarmony(maybeElement: ReactNode, color: string) {
+function addColorForHarmony(maybeElement: ReactNode, color?: string) {
   if (React.isValidElement(maybeElement) && harmony()) {
     return React.cloneElement<ColorProps>(maybeElement as ReactElement, {
       color,