feat: 处理成 sar-ui 的tabbar形式

src/components/fg-navbar/fg-navbar.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    leftText?: string
-    rightText?: string
-    leftArrow?: boolean
-    bordered?: boolean
-    fixed?: boolean
-    placeholder?: boolean
-    zIndex?: number
-    safeAreaInsetTop?: boolean
-    leftDisabled?: boolean
-    rightDisabled?: boolean
-  }>(),
-  {
-    leftText: '返回',
-    rightText: '',
-    leftArrow: true,
-    bordered: true,
-    fixed: false,
-    placeholder: true,
-    zIndex: 1,
-    safeAreaInsetTop: true,
-    leftDisabled: false,
-    rightDisabled: false,
-  },
-)
-
-function handleClickLeft() {
-  uni.navigateBack({
-    fail() {
-      uni.reLaunch({
-        url: '/pages/index/index',
-      })
-    },
-  })
-}
-</script>
-
-<template>
-  <wd-navbar
-    :left-text="leftText"
-    :right-text="rightText"
-    :left-arrow="leftArrow"
-    :bordered="bordered"
-    :fixed="fixed"
-    :placeholder="placeholder"
-    :z-index="zIndex"
-    :safe-area-inset-top="safeAreaInsetTop"
-    :left-disabled="leftDisabled"
-    :right-disabled="rightDisabled"
-    @click-left="handleClickLeft"
-  >
-    <template #title>
-      <slot />
-    </template>
-  </wd-navbar>
-</template>

src/layouts/fg-tabbar/fg-tabbar.vue

@@ -3,12 +3,13 @@ import { tabbarStore } from './tabbar'
 // 'i-carbon-code',
 import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy } from './tabbarList'
 
+// @ts-expect-error 预料中的判断
 const customTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
 const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
-function selectTabBar({ value: index }: { value: number }) {
+function selectTabBar(name: number) {
-  const url = tabbarList[index].path
+  const url = tabbarList[name].path
-  tabbarStore.setCurIdx(index)
+  tabbarStore.setCurIdx(name)
   if (cacheTabbarEnable) {
     uni.switchTab({ url })
   }
@@ -18,6 +19,7 @@ function selectTabBar({ value: index }: { value: number }) {
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
+  // @ts-expect-error 预料中的判断
   const hideRedundantTabbarEnable = selectedTabbarStrategy === 1
   hideRedundantTabbarEnable
   && uni.hideTabBar({
@@ -32,23 +34,26 @@ onLoad(() => {
 </script>
 
 <template>
-  <wd-tabbar
+  <sar-tabbar
     v-if="customTabbarEnable"
-
+    v-model:current="tabbarStore.curIdx"
-    v-model="tabbarStore.curIdx"
+    bordered
-
+    safeareainsetbottom
-    bordered safeareainsetbottom placeholder fixed
+    placeholder
+    fixed
     @change="selectTabBar"
   >
     <block v-for="(item, idx) in tabbarList" :key="item.path">
-      <wd-tabbar-item
+      <sar-tabbar-item
-        v-if="item.iconType === 'wot'"
+        v-if="item.iconType === 'sar'"
         :title="item.text"
         :icon="item.icon"
+        :name="idx"
       />
-      <wd-tabbar-item
+      <sar-tabbar-item
         v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
         :title="item.text"
+        :name="idx"
       >
         <template #icon>
           <view
@@ -57,12 +62,12 @@ onLoad(() => {
             :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
           />
         </template>
-      </wd-tabbar-item>
+      </sar-tabbar-item>
-      <wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
+      <sar-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text" :name="idx">
         <template #icon>
           <image :src="item.icon" h-40rpx w-40rpx />
         </template>
-      </wd-tabbar-item>
+      </sar-tabbar-item>
     </block>
-  </wd-tabbar>
+  </sar-tabbar>
 </template>

src/layouts/tabbar.vue

@@ -1,19 +1,10 @@
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
 import FgTabbar from './fg-tabbar/fg-tabbar.vue'
-
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars">
+  <view>
     <slot />
     <FgTabbar />
-    <wd-toast />
+  </view>
-    <wd-message-box />
-  </wd-config-provider>
 </template>