hookehuyr

feat(tabbar): 为标签栏项目添加字体图标支持

将图标组件替换为字体图标,以提供更灵活的图标定制能力。更新了标签栏配置、工具函数和组件逻辑,使其支持从配置中读取字体图标类名,并回退到默认图标。同时移除了对 @nutui/icons-vue-taro 的硬编码依赖。
......@@ -13,11 +13,10 @@
>
<view class="app-tabbar__item-inner">
<view class="app-tabbar__icon">
<component
:is="item.icon"
size="18"
:color="isActive(item.key) ? activeColor : inactiveColor"
/>
<i
class="app-tabbar__icon-font"
:class="getIconClass(item)"
></i>
</view>
<text class="app-tabbar__label">{{ item.title }}</text>
</view>
......@@ -30,7 +29,6 @@
<script setup>
import { computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Category, Home, My, Notice, Service } from '@nutui/icons-vue-taro'
import { useTabbarStore } from '@/stores/tabbar'
const props = defineProps({
......@@ -42,25 +40,19 @@ const props = defineProps({
const activeColor = '#a67939'
const inactiveColor = '#8b95a7'
const defaultIcon = 'fa-circle-o'
const tabbarStore = useTabbarStore()
const tabIconMap = {
home: Home,
message: Notice,
application: Category,
mine: My,
}
const tabItems = computed(() => (
tabbarStore.visibleTabItems.map((item) => ({
...item,
icon: tabIconMap[item.key] || Service,
}))
))
const tabItems = computed(() => tabbarStore.visibleTabItems)
const isActive = (name) => name === props.current
const getIconClass = (item) => {
const icon = String(item?.class || item?.icon || defaultIcon).trim() || defaultIcon
const fontClass = icon.startsWith('fa-') ? 'fa' : 'iconfont'
return [fontClass, icon]
}
const handleTabClick = (item) => {
if (!item?.page_url || item.key === props.current) {
return
......@@ -123,6 +115,12 @@ onMounted(() => {
align-items: center;
justify-content: center;
line-height: 1;
color: #8b95a7;
font-size: 38rpx;
}
.app-tabbar__icon-font {
line-height: 1;
}
.app-tabbar__label {
......@@ -134,5 +132,9 @@ onMounted(() => {
.app-tabbar__item.is-active .app-tabbar__item-inner {
color: #a67939;
}
.app-tabbar__item.is-active .app-tabbar__icon {
color: #a67939;
}
}
</style>
......
......@@ -3,11 +3,13 @@ export const getTabbarConfigFixture = () => ({
{
key: 'home',
title: '首页',
class: 'fa-home',
visible: true,
},
{
key: 'message',
title: '资讯',
class: 'fa-newspaper-o',
visible: true,
webview_url: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=news_list',
webview_title: '资讯',
......@@ -15,6 +17,7 @@ export const getTabbarConfigFixture = () => ({
{
key: 'application',
title: '应用',
class: 'fa-th-large',
visible: true,
webview_url: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=futian_list',
webview_title: '应用',
......@@ -22,6 +25,7 @@ export const getTabbarConfigFixture = () => ({
{
key: 'mine',
title: '我的',
class: 'fa-user',
visible: true,
webview_url: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=futian_list',
webview_title: '我的',
......
......@@ -2,6 +2,7 @@ const defaultTabbarItemMap = {
home: {
key: 'home',
title: '首页',
class: 'fa-home',
visible: true,
page_url: '/pages/index/index',
webview_url: '',
......@@ -10,6 +11,7 @@ const defaultTabbarItemMap = {
message: {
key: 'message',
title: '资讯',
class: 'fa-newspaper-o',
visible: true,
page_url: '/pages/message/index',
webview_url: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=news_list',
......@@ -18,6 +20,7 @@ const defaultTabbarItemMap = {
application: {
key: 'application',
title: '应用',
class: 'fa-th-large',
visible: true,
page_url: '/pages/application/index',
webview_url: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=futian_list',
......@@ -26,6 +29,7 @@ const defaultTabbarItemMap = {
mine: {
key: 'mine',
title: '我的',
class: 'fa-user',
visible: true,
page_url: '/pages/mine/index',
webview_url: 'https://oa-dev.onwall.cn/f/futian_home/?f=f&p=futian_list',
......@@ -83,6 +87,7 @@ export const normalizeTabbarItem = (rawItem = {}) => {
...rawItem,
key: fallbackItem.key,
title: String(rawItem.title || fallbackItem.title),
class: String(rawItem.class || rawItem.icon_class || rawItem.icon || fallbackItem.class || ''),
page_url: String(rawItem.page_url || fallbackItem.page_url || ''),
webview_url: String(rawItem.webview_url || rawItem.link_url || rawItem.url || fallbackItem.webview_url || ''),
webview_title: String(rawItem.webview_title || rawItem.link_title || rawItem.title || fallbackItem.webview_title || ''),
......