fix(tabbar): 新图标和性能改进

src/assets/svgs/home.svg

@@ -0,0 +1,6 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M19.35 8.85205V15.8446C19.35 17.2242 18.2229 18.35 16.8235 18.35H5.17647C3.77705 18.35 2.65 17.2242 2.65 15.8446V8.85205C2.65 8.14715 2.96643 7.47948 3.51202 7.03314L9.39226 2.22275C10.3258 1.45908 11.6742 1.45908 12.6077 2.22275L18.488 7.03314C19.0336 7.47947 19.35 8.14715 19.35 8.85205Z" stroke="black" stroke-opacity="0.45" stroke-width="1.3"/>
+<path id="Vector_2" d="M10.0004 13.9448L10.0004 8.805C10.0004 8.35995 10.3603 8 10.8054 8C11.2504 8 11.6104 8.35995 11.6104 8.805L11.6104 13.9448C11.6104 14.3899 11.2504 14.7499 10.8054 14.7499C10.3603 14.7499 10.0004 14.3899 10.0004 13.9448Z" fill="black" fill-opacity="0.45"/>
+</g>
+</svg>

src/assets/svgs/icon-camera.svg

@@ -1,35 +0,0 @@
-<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Camera">
-<path id="Body" d="M17.4401 23.0154C18.051 18.1286 18.3564 15.6853 20.0175 14.2188C21.6786 12.7524 24.141 12.7524 29.0658 12.7524H37.6706C42.5954 12.7524 45.0578 12.7524 46.7189 14.2188C48.38 15.6853 48.6854 18.1286 49.2963 23.0154C50.0635 29.1534 50.4472 32.2224 48.6982 34.2036C46.9492 36.1848 43.8564 36.1848 37.6706 36.1848H29.0658C22.88 36.1848 19.7872 36.1848 18.0382 34.2036C16.2892 32.2224 16.6729 29.1534 17.4401 23.0154Z" fill="url(#paint0_linear_460_8000)"/>
-<g id="Shape 1" filter="url(#filter0_b_460_8000)">
-<rect x="9.93555" y="18.6104" width="46.8647" height="35.1485" rx="8.78712" fill="#F8B77B" fill-opacity="0.6"/>
-<rect x="10.0728" y="18.7476" width="46.5901" height="34.874" rx="8.64986" stroke="url(#paint1_linear_460_8000)" stroke-width="0.274535"/>
-</g>
-<path id="Shape 2" fill-rule="evenodd" clip-rule="evenodd" d="M33.3687 29.5942C29.7289 29.5942 26.7783 32.5448 26.7783 36.1846C26.7783 39.8243 29.7289 42.7749 33.3687 42.7749C37.0084 42.7749 39.959 39.8243 39.959 36.1846C39.959 32.5448 37.0084 29.5942 33.3687 29.5942ZM22.3848 36.1846C22.3848 30.1183 27.3024 25.2007 33.3687 25.2007C39.4349 25.2007 44.3526 30.1183 44.3526 36.1846C44.3526 42.2508 39.4349 47.1685 33.3687 47.1685C27.3024 47.1685 22.3848 42.2508 22.3848 36.1846Z" fill="url(#paint2_linear_460_8000)" fill-opacity="0.9"/>
-<rect id="Shape 3" x="45.084" y="24.4688" width="5.85808" height="2.92904" rx="1.46452" fill="url(#paint3_linear_460_8000)" fill-opacity="0.9"/>
-</g>
-<defs>
-<filter id="filter0_b_460_8000" x="4.07746" y="12.7523" width="58.5804" height="46.8646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.92904"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_460_8000"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_460_8000" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_460_8000" x1="25.9329" y1="17.8783" x2="49.7532" y2="30.1656" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FBA47F"/>
-<stop offset="1" stop-color="#DF6B00"/>
-</linearGradient>
-<linearGradient id="paint1_linear_460_8000" x1="6.58807" y1="21.8057" x2="63.4954" y2="60.9827" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_460_8000" x1="22.3143" y1="36.108" x2="52.8234" y2="44.1839" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_460_8000" x1="43.1763" y1="25.7891" x2="58.6551" y2="33.6407" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>

src/assets/svgs/material-active.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M6.20075 11.97H6.05387C4.90821 11.97 3.82131 11.5078 3.05753 10.7566C2.35251 10.0343 2 9.10985 2 8.18536C2 7.80978 2.05875 7.43421 2.20563 7.05864L2.23501 7.00085L3.88006 3.47623C4.26195 2.55174 5.26073 1.94504 6.31826 2.00282H16.7467C17.863 1.94504 18.8618 2.58063 19.273 3.53401L20.7125 6.76973C20.7418 6.82751 20.7712 6.91418 20.8006 6.97196L20.83 7.05864V7.11642C21.3881 8.84984 20.5362 10.6988 18.803 11.5655C18.1861 11.8544 17.4811 11.9989 16.8055 11.9989C15.8361 11.9989 14.896 11.6811 14.1322 11.1322C12.5753 12.3167 10.3428 12.2589 8.84459 11.1322C8.11019 11.6522 7.17016 11.97 6.20075 11.97ZM8.84459 9.19652L9.34398 9.71655C10.3428 10.7855 12.1053 10.9299 13.3097 10.0055C13.4272 9.91878 13.5447 9.80322 13.6622 9.68766L14.1616 9.16763L14.661 9.68766C15.2192 10.2655 16.0123 10.5833 16.8642 10.5833C17.3342 10.5833 17.8042 10.4677 18.2155 10.2944C19.3612 9.74544 19.8899 8.53204 19.5374 7.43421L19.508 7.34754L19.4493 7.28976L17.9805 4.02515C17.8042 3.5629 17.3048 3.274 16.7761 3.30289H6.25951C5.76012 3.274 5.2901 3.53401 5.11385 3.96737L5.08447 3.99626L3.49817 7.43421C3.41004 7.69422 3.35129 7.95424 3.35129 8.18536C3.35129 8.79206 3.5863 9.36986 4.02694 9.80322C4.52633 10.3232 5.2901 10.6122 6.05387 10.6122H6.17138C7.02328 10.6122 7.78705 10.2944 8.3452 9.71655L8.84459 9.19652Z" fill="black"/>
+<path id="Vector_2" d="M15.9753 6.50505H7.02473C6.60424 6.50505 6.27385 6.17372 6.27385 5.75204C6.27385 5.33035 6.60424 4.99902 7.02473 4.99902H15.9753C16.3958 4.99902 16.7261 5.33035 16.7261 5.75204C16.7261 6.1436 16.3958 6.50505 15.9753 6.50505ZM18.1078 19.999H4.89223C3.84099 19.999 3 19.1255 3 18.0713V10.2701H4.38163V18.0713C4.38163 18.3725 4.62191 18.6135 4.89223 18.6135H18.1078C18.3781 18.6135 18.6184 18.3725 18.6184 18.0713V10.2701H20V18.0713C20 19.1255 19.159 19.999 18.1078 19.999Z" fill="black"/>
+</g>
+</svg>

src/assets/svgs/message-active.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector 2" d="M6 10H14.5M6 13H10" stroke="black" stroke-width="1.4"/>
+<path id="Rectangle 1122" d="M2 7C2 5.34315 3.34315 4 5 4H16C17.6569 4 19 5.34315 19 7V16C19 17.6569 17.6569 19 16 19H2V7Z" stroke="black" stroke-width="1.4"/>
+</g>
+</svg>

src/assets/svgs/mine-active.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<circle id="Ellipse 38" cx="11" cy="11" r="9" stroke="black" stroke-width="1.4"/>
+<path id="Ellipse 39" d="M14 11C13.5 12 12.6569 13 11 13C9.34315 13 8.5 12 8 11" stroke="black" stroke-width="1.4" stroke-linecap="round"/>
+</g>
+</svg>

src/components/tabbar-evo.vue

@@ -1,18 +1,24 @@
 <script lang="ts" setup>
+import { currRoute, getIsTabbar } from '@/utils'
 import { onMounted, ref } from 'vue'
 const props = defineProps({
   items: {
     type: Array as PropType<
       {
         title: string
-        icon: string
+        icon?: string
         iconPath: string
+        selectedIconPath: string
         path: string
         hiddenTitle?: boolean
       }[]
     >,
     default: () => [],
   },
+  currentPath: {
+    type: String,
+    default: '',
+  },
   fixed: {
     type: Boolean,
     default: false,
@@ -60,16 +66,20 @@ onMounted(async () => {
         :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"
       >
-        <template v-for="({ iconPath, title, hiddenTitle, path }, i) in items" :key="i">
+        <template
+          v-for="({ iconPath, selectedIconPath, title, hiddenTitle, path }, 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="iconPath"
+              :src="currentPath === path ? selectedIconPath : iconPath"
             ></wd-img>
             <span
-              class="mt-1 text-center text-[#8c8c8c] text-[10px] font-normal font-['PingFang SC'] leading-none"
+              class="mt-1 text-center text-[10px] font-normal font-['PingFang SC'] leading-none"
+              :class="[currentPath === path ? 'text-black' : 'text-[#8c8c8c]']"
               v-if="!hiddenTitle"
             >
               {{ title }}

src/core/libs/svgs.ts

@@ -10,12 +10,20 @@ import map from '@/assets/svgs/map.svg'
 import thumbsUp from '@/assets/svgs/thumbs-up.svg'
 import integral from '@/assets/svgs/integral.svg'
 import coupon from '@/assets/svgs/coupon.svg'
-import order from '@/assets/svgs/order.svg'
 import agent from '@/assets/svgs/agent.svg'
 import setting from '@/assets/svgs/setting.svg'
 import logo from '@/assets/svgs/logo.svg'
 import vip from '@/assets/svgs/vip.svg'
-import iconCamera from '@/assets/svgs/icon-camera.svg'
+import materialActive from '@/assets/svgs/material-active.svg'
+import material from '@/assets/svgs/material.svg'
+import homeActive from '@/assets/svgs/home-active.svg'
+import home from '@/assets/svgs/home.svg'
+import messageActive from '@/assets/svgs/message-active.svg'
+import message from '@/assets/svgs/message.svg'
+import mineActive from '@/assets/svgs/mine-active.svg'
+import mine from '@/assets/svgs/mine.svg'
+import publish from '@/assets/svgs/publish.svg'
+import order from '@/assets/svgs/order.svg'
 export {
   polygon16,
   frame,
@@ -29,10 +37,18 @@ export {
   thumbsUp,
   integral,
   coupon,
-  order,
   agent,
   setting,
   logo,
   vip,
-  iconCamera,
+  materialActive,
+  material,
+  homeActive,
+  home,
+  messageActive,
+  message,
+  mineActive,
+  mine,
+  publish,
+  order,
 }

src/layouts/tabbar.vue

@@ -1,6 +1,19 @@
 <script setup lang="ts">
 import TabbarEvo from '@/components/tabbar-evo.vue'
 import { iconCamera, iconWallet } from '@/core/libs/pngs'
+import {
+  home,
+  homeActive,
+  material,
+  materialActive,
+  message,
+  messageActive,
+  mine,
+  mineActive,
+  publish,
+} from '@/core/libs/svgs'
+import { currRoute } from '@/utils'
+import { select } from 'radash'
 import type { ConfigProviderThemeVars } from 'wot-design-uni'
 
 const themeVars: ConfigProviderThemeVars = {
@@ -10,27 +23,37 @@ const themeVars: ConfigProviderThemeVars = {
 }
 const publishState = ref(false)
 const items = [
-  { title: '首页', icon: 'home', iconPath: '/static/tabbar/home.svg', path: '/pages/home/index' },
+  {
+    title: '首页',
+    iconPath: home,
+    selectedIconPath: homeActive,
+    path: '/pages/home/index',
+  },
   {
     title: '材料',
-    icon: 'home',
-    iconPath: '/static/tabbar/material.svg',
+    iconPath: material,
+    selectedIconPath: materialActive,
     path: '/pages/material/index',
   },
   {
     title: '发布',
-    icon: 'home',
-    iconPath: '/static/tabbar/publish.svg',
+    iconPath: publish,
+    selectedIconPath: publish,
     path: '/pages/publish/index',
     hiddenTitle: true,
   },
   {
     title: '消息',
-    icon: 'home',
-    iconPath: '/static/tabbar/message.svg',
+    iconPath: message,
+    selectedIconPath: messageActive,
     path: '/pages/messages/index',
   },
-  { title: '我的', icon: 'home', iconPath: '/static/tabbar/mine.svg', path: '/pages/mine/index' },
+  {
+    title: '我的',
+    iconPath: mine,
+    selectedIconPath: mineActive,
+    path: '/pages/mine/index',
+  },
 ]
 const handleTabbarItemClick = (path: string) => {
   if (path === '/pages/publish/index') {
@@ -47,7 +70,13 @@ const handleTabbarItemClick = (path: string) => {
       <slot />
     </view>
 
-    <TabbarEvo :items="items" fixed safeAreaInsetBottom @click="handleTabbarItemClick" />
+    <TabbarEvo
+      :items="items"
+      fixed
+      safeAreaInsetBottom
+      :current-path="currRoute().path"
+      @click="handleTabbarItemClick"
+    />
     <div
       v-if="publishState"
       class="bg-white/80 backdrop-blur-[100px] fixed top-0 left-0 right-0 bottom-0 z-1"