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

将图标组件替换为字体图标，以提供更灵活的图标定制能力。更新了标签栏配置、工具函数和组件逻辑，使其支持从配置中读取字体图标类名，并回退到默认图标。同时移除了对 @nutui/icons-vue-taro 的硬编码依赖。

feat(tabbar): 为标签栏项目添加字体图标支持
将图标组件替换为字体图标，以提供更灵活的图标定制能力。更新了标签栏配置、工具函数和组件逻辑，使其支持从配置中读取字体图标类名，并回退到默认图标。同时移除了对 @nutui/icons-vue-taro 的硬编码依赖。
hookehuyr
Commit d07a38cc6c96408fef2aa882e82e680a6ca89e5e d07a38cc 1 parent a443a1dd
Showing 3 changed files with 31 additions and 20 deletions
src/components/AppTabbar.vue
src/mock/fixtures/tabbar.fixture.js
src/utils/tabbar.js
--- a/src/components/AppTabbar.vue
View file @d07a38c
+++ b/src/components/AppTabbar.vue
View file @d07a38c
@@ -13,11 +13,10 @@
         >
           <view class="app-tabbar__item-inner">
             <view class="app-tabbar__icon">
-              <component
+              <i
-                :is="item.icon"
+                class="app-tabbar__icon-font"
-                size="18"
+                :class="getIconClass(item)"
-                :color="isActive(item.key) ? activeColor : inactiveColor"
+              ></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 tabItems = computed(() => tabbarStore.visibleTabItems)
-const tabIconMap = {
-  home: Home,
-  message: Notice,
-  application: Category,
-  mine: My,
-}
-
-const tabItems = computed(() => (
-  tabbarStore.visibleTabItems.map((item) => ({
-    ...item,
-    icon: tabIconMap[item.key] || Service,
-  }))
-))
 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>
--- a/src/mock/fixtures/tabbar.fixture.js
View file @d07a38c
+++ b/src/mock/fixtures/tabbar.fixture.js
View file @d07a38c
@@ -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: '我的',
--- a/src/utils/tabbar.js
View file @d07a38c
+++ b/src/utils/tabbar.js
View file @d07a38c
@@ -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 || ''),