refactor(tabbar): 组件并优化图标显示逻辑

packages/app/src/components/tabbar-evo.vue

@@ -50,15 +50,6 @@ onMounted(async () => {
 </script>
 <template>
   <div>
-    <!-- <wd-tabbar fixed shape="round" safeAreaInsetBottom>
-      <template v-for="it of items" :key="it.id">
-        <wd-tabbar-item :title="it.title" :icon="it.icon">
-          <template #icon v-if="it.iconPath">
-            <wd-img round height="40rpx" width="40rpx" :src="it.iconPath"></wd-img>
-          </template>
-        </wd-tabbar-item>
-      </template>
-    </wd-tabbar> -->
     <div>
       <div
         ref="tabbar"
@@ -71,14 +62,13 @@ onMounted(async () => {
         >
           <div class="w-full flex flex-col items-center justify-center" @click="handleClick(path)">
             <wd-img
-              round
               :height="hiddenTitle ? 40 : 22"
               :width="hiddenTitle ? 40 : 22"
-              :src="currentPath === path ? selectedIconPath : iconPath"
+              :src="`/${currentPath}` === path ? selectedIconPath : iconPath"
             ></wd-img>
             <span
               class="mt-1 text-center text-[10px] font-normal leading-none"
-              :class="[currentPath === path ? 'text-black' : 'text-[#8c8c8c]']"
+              :class="[`/${currentPath}` === path ? 'text-black' : 'text-[#8c8c8c]']"
               v-if="!hiddenTitle"
             >
               {{ title }}

packages/merchant/src/components/tabbar-evo.vue

@@ -10,6 +10,7 @@ const props = defineProps({
         selectedIconPath: string
         path: string
         hiddenTitle?: boolean
+        main?: boolean
       }[]
     >,
     default: () => [],
@@ -63,22 +64,27 @@ onMounted(async () => {
       <div
         ref="tabbar"
         :class="[fixed ? 'fixed bottom-0 left-0 right-0' : '']"
-        class="m-3.5 h-[60px] bg-white/70 rounded-[60px] border border-white backdrop-blur-[25px] flex items-center justify-around"
+        class="h-[60px] bg-white border border-white backdrop-blur-[25px] flex items-center justify-around"
       >
         <template
-          v-for="({ iconPath, selectedIconPath, title, hiddenTitle, path }, i) in items"
+          v-for="({ iconPath, selectedIconPath, title, hiddenTitle, path, main }, i) in items"
           :key="i"
         >
-          <div class="flex flex-col items-center justify-center" @click="handleClick(path)">
-            <wd-img
-              round
-              :height="hiddenTitle ? 40 : 22"
-              :width="hiddenTitle ? 40 : 22"
-              :src="currentPath === path ? selectedIconPath : iconPath"
-            ></wd-img>
+          <div
+            class="relative flex flex-col items-center justify-center"
+            @click="handleClick(path)"
+          >
+            <div :class="[main ? 'absolute top--6' : '']">
+              <wd-img
+                :height="hiddenTitle || main ? 42 : 22"
+                :width="hiddenTitle || main ? 42 : 22"
+                :src="`/${currentPath}` === path ? selectedIconPath : iconPath"
+              ></wd-img>
+            </div>
+            <div v-if="main" class="h-5.5"></div>
             <span
               class="mt-1 text-center text-[10px] font-normal leading-none"
-              :class="[currentPath === path ? 'text-black' : 'text-[#8c8c8c]']"
+              :class="[`/${currentPath}` === path ? 'text-[#2357e9]' : 'text-[#8c8c8c]']"
               v-if="!hiddenTitle"
             >
               {{ title }}

packages/merchant/src/layouts/tabbar.vue

@@ -30,7 +30,8 @@ const items = computed(() => {
         iconPath: addBlue,
         selectedIconPath: addBlue,
         path: '/pages/publish/index',
-        hiddenTitle: true,
+        // hiddenTitle: true,
+        main: true,
       },
       {
         title: '我的',
@@ -56,6 +57,7 @@ const items = computed(() => {
     },
   ]
 })
+
 const schema = ref({
   user: {
     type: 'TextField',

packages/merchant/src/types/auto-import.d.ts

@@ -93,7 +93,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 // for vue template auto import