hookehuyr

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

新增底部导航激活色默认常量与颜色格式化工具函数,在tabbar状态仓库中添加激活色状态并根据接口配置动态更新对应值,更新示例配置文件添加示例颜色,同时优化组件样式:调整容器高度、字体大小与间距,使用动态激活色替代硬编码值,移除冗余的激活态样式类
......@@ -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;
font-size: 38rpx;
color: inherit;
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;
}
.app-tabbar__item.is-active .app-tabbar__item-inner {
color: #a67939;
}
.app-tabbar__item.is-active .app-tabbar__icon {
color: #a67939;
line-height: 1.25;
}
.app-tabbar__fade {
......
......@@ -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',
})
......
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
......
......@@ -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'
......