Merge pull request #225 from GreatAuk/feat-tabbar

refactor: 优化 tabbar

src/tabbar/config.ts

@@ -22,7 +22,8 @@ export const TABBAR_STRATEGY_MAP = {
 // 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 customTabbarList，nativeTabbarList 不生效
 export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.NATIVE_TABBAR
 
-type NativeTabBarItem = TabBar['list'][0]
+type NativeTabBarItem = TabBar['list'][number]
+
 // TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
 export const nativeTabbarList: NativeTabBarItem[] = [
   {
@@ -39,7 +40,7 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
-interface CustomTabBarItem {
+export interface CustomTabBarItem {
   text: string
   pagePath: string
   iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图

src/tabbar/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 'i-carbon-code',
+import type { CustomTabBarItem } from './config'
 import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
 import { tabbarList, tabbarStore } from './store'
 
@@ -29,7 +29,7 @@ function handleClick(index: number) {
     handleClickBulge()
     return
   }
-  const url = tabbarList[index].path
+  const url = tabbarList[index].pagePath
   tabbarStore.setCurIdx(index)
   if (tabbarCacheEnable) {
     uni.switchTab({ url })
@@ -56,12 +56,12 @@ function getColorByIndex(index: number) {
   return tabbarStore.curIdx === index ? activeColor : inactiveColor
 }
 
-function getImageByIndex(index: number, item: { iconActive?: string, icon: string }) {
-  if (!item.iconActive) {
+function getImageByIndex(index: number, item: CustomTabBarItem) {
+  if (!item.activeIcon) {
     console.warn('image 模式下，需要配置 iconActive (高亮时的图片），否则无法切换高亮图片')
     return item.icon
   }
-  return tabbarStore.curIdx === index ? item.iconActive : item.icon
+  return tabbarStore.curIdx === index ? item.activeIcon : item.icon
 }
 </script>
 

src/tabbar/store.ts

@@ -1,27 +1,27 @@
+import type { CustomTabBarItem } from './config'
 import { tabbarList as _tabbarList } from './config'
 
 // TODO 1/2: 中间的鼓包tabbarItem的开关
 const BULGE_ENABLE = true
 
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
-const tabbarList = _tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
+const tabbarList: CustomTabBarItem[] = _tabbarList.map(item => ({ ...item, pagePath: item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}` }))
+
 if (BULGE_ENABLE) {
   if (tabbarList.length % 2 === 1) {
     console.error('tabbar 数量必须是偶数，否则样式很奇怪！！')
   }
   tabbarList.splice(tabbarList.length / 2, 0, {
     isBulge: true,
-  } as any)
+  } as CustomTabBarItem)
 }
 
-export { tabbarList }
-
 /**
  * 自定义 tabbar 的状态管理，原生 tabbar 无需关注本文件
  * tabbar 状态，增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
  * 使用reactive简单状态，而不是 pinia 全局状态
  */
-export const tabbarStore = reactive({
+const tabbarStore = reactive({
   curIdx: uni.getStorageSync('app-tabbar-index') || 0,
   prevIdx: uni.getStorageSync('app-tabbar-index') || 0,
   setCurIdx(idx: number) {
@@ -46,3 +46,5 @@ export const tabbarStore = reactive({
     this.prevIdx = uni.getStorageSync('app-tabbar-index') || 0
   },
 })
+
+export { tabbarList, tabbarStore }