feat(tabbar): 新增底部导航激活态颜色自定义功能并优化UI样式

新增底部导航激活色默认常量与颜色格式化工具函数，在tabbar状态仓库中添加激活色状态并根据接口配置动态更新对应值，更新示例配置文件添加示例颜色，同时优化组件样式：调整容器高度、字体大小与间距，使用动态激活色替代硬编码值，移除冗余的激活态样式类

feat(tabbar): 新增底部导航激活态颜色自定义功能并优化UI样式
新增底部导航激活色默认常量与颜色格式化工具函数，在tabbar状态仓库中添加激活色状态并根据接口配置动态更新对应值，更新示例配置文件添加示例颜色，同时优化组件样式：调整容器高度、字体大小与间距，使用动态激活色替代硬编码值，移除冗余的激活态样式类
hookehuyr
Commit c9fb87e231e75cfe055a7fea61264ce607b8f1c6 c9fb87e2 1 parent 2ce29bdd
Showing 4 changed files with 39 additions and 15 deletions
src/components/AppTabbar.vue
src/mock/fixtures/tabbar.fixture.js
src/stores/tabbar.js
src/utils/tabbar.js
--- a/src/components/AppTabbar.vue
View file @c9fb87e
+++ b/src/components/AppTabbar.vue
View file @c9fb87e
@@ -21,7 +21,7 @@
             :style="itemStyle"
             @tap="handleTabClick(item)"
           >
-            <view class="app-tabbar__item-inner">
+            <view class="app-tabbar__item-inner" :style="getItemInnerStyle(item)">
               <view class="app-tabbar__icon">
                 <i
                   class="app-tabbar__icon-font"
@@ -63,6 +63,7 @@ const scrollableSidePadding = 60
 const tabbarStore = useTabbarStore()
 const tabItems = computed(() => tabbarStore.visibleTabItems)
+const activeColor = computed(() => tabbarStore.activeColor)
 const currentKey = computed(() => normalizeTabbarKey(props.current))
 const isScrollable = computed(() => tabItems.value.length > 4)
 const showScrollHint = computed(() => isScrollable.value)
@@ -98,6 +99,16 @@ let scrollHintResetTimer = null
 const isActive = (key) => key === currentKey.value
+const getItemInnerStyle = (item) => {
+  if (!isActive(item?.key)) {
+    return null
+  }
+
+  return {
+    color: activeColor.value,
+  }
+}
+
 const getIconClass = (item) => {
   const icon = String(item?.class || item?.icon || defaultIcon).trim() || defaultIcon
   const fontClass = icon.startsWith('fa-') ? 'fa' : 'iconfont'
@@ -199,7 +210,7 @@ onBeforeUnmount(() => {
   }
   .app-tabbar__panel {
-    height: 132rpx;
+    height: 140rpx;
     border-top: 2rpx solid rgba(166, 121, 57, 0.12);
     background: rgba(255, 255, 255, 0.98);
     box-sizing: border-box;
@@ -237,7 +248,7 @@ onBeforeUnmount(() => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 10rpx;
+    gap: 12rpx;
     min-height: 100rpx;
     border-radius: 20rpx;
     color: #8b95a7;
@@ -249,8 +260,8 @@ onBeforeUnmount(() => {
     align-items: center;
     justify-content: center;
     line-height: 1;
-    color: #8b95a7;
+    color: inherit;
-    font-size: 38rpx;
+    font-size: 48rpx;
   }
   .app-tabbar__icon-font {
@@ -258,17 +269,9 @@ onBeforeUnmount(() => {
   }
   .app-tabbar__label {
-    font-size: 22rpx;
+    font-size: 28rpx;
     font-weight: 600;
-    line-height: 1.2;
+    line-height: 1.25;
-  }
-
-  .app-tabbar__item.is-active .app-tabbar__item-inner {
-    color: #a67939;
-  }
-
-  .app-tabbar__item.is-active .app-tabbar__icon {
-    color: #a67939;
   }
   .app-tabbar__fade {
--- a/src/mock/fixtures/tabbar.fixture.js
View file @c9fb87e
+++ b/src/mock/fixtures/tabbar.fixture.js
View file @c9fb87e
@@ -19,4 +19,5 @@ export const getTabbarConfigFixture = () => ({
     icon: 'fa-user',
     link: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=futian_list',
   },
+  color: '#86190C',
 })
--- a/src/stores/tabbar.js
View file @c9fb87e
+++ b/src/stores/tabbar.js
View file @c9fb87e
 import { defineStore } from 'pinia'
 import { getTabbarConfigAPI } from '@/api/tabbar'
 import {
+  getDefaultTabbarActiveColor,
   getDefaultTabbarItem,
   getHomeOnlyTabbarItems,
   normalizeTabbarKey,
+  normalizeTabbarColor,
   normalizeTabbarPayload,
 } from '@/utils/tabbar'
@@ -12,6 +14,7 @@ let tabbarRequestPromise = null
 export const useTabbarStore = defineStore('tabbar', {
   state: () => ({
     tabItems: getHomeOnlyTabbarItems(),
+    activeColor: getDefaultTabbarActiveColor(),
     loaded: false,
     loading: false,
   }),
@@ -40,12 +43,15 @@ export const useTabbarStore = defineStore('tabbar', {
           if (response?.code === 1) {
             this.tabItems = normalizeTabbarPayload(response?.data)
+            this.activeColor = normalizeTabbarColor(response?.data)
           } else {
             this.tabItems = getHomeOnlyTabbarItems()
+            this.activeColor = getDefaultTabbarActiveColor()
           }
         } catch (error) {
           console.error('获取底部导航配置失败:', error)
           this.tabItems = getHomeOnlyTabbarItems()
+          this.activeColor = getDefaultTabbarActiveColor()
         } finally {
           this.loaded = true
           this.loading = false
--- a/src/utils/tabbar.js
View file @c9fb87e
+++ b/src/utils/tabbar.js
View file @c9fb87e
@@ -47,6 +47,7 @@ const KNOWN_TABBAR_ITEM_MAP = {
 export const TABBAR_ORDER = ['home', 'news', 'list', 'user']
 const DEFAULT_ICON_CLASS = 'fa-circle-o'
+const DEFAULT_TABBAR_ACTIVE_COLOR = '#a67939'
 const normalizeVisibleValue = (rawValue, fallbackValue = true) => {
   if (typeof rawValue === 'boolean') {
@@ -100,6 +101,19 @@ export const getDefaultTabbarItems = () => (
 export const getHomeOnlyTabbarItems = () => [getDefaultTabbarItem('home')]
+export const getDefaultTabbarActiveColor = () => DEFAULT_TABBAR_ACTIVE_COLOR
+
+export const normalizeTabbarColor = (rawPayload = null) => {
+  const rawColor = rawPayload?.color
+
+  if (typeof rawColor !== 'string') {
+    return DEFAULT_TABBAR_ACTIVE_COLOR
+  }
+
+  const normalizedColor = rawColor.trim()
+  return normalizedColor || DEFAULT_TABBAR_ACTIVE_COLOR
+}
+
 const buildTabbarPageUrl = (key, webviewUrl, webviewTitle, rawPageUrl = '') => {
   if (key === 'home') {
     return rawPageUrl || '/pages/index/index'