refactor(tabbar): 使用icon按钮替换文字链接

src/assets/svgs/icon-camera.svg

@@ -0,0 +1,35 @@
+<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/components/tabbar-evo.vue

@@ -22,11 +22,13 @@ const props = defineProps({
     default: false,
   },
 })
+const emits = defineEmits<{ click: [path: string] }>()
 const safeAreaInsets = ref({ bottom: 0 })
 const tabbar = ref<HTMLElement | undefined>()
 
 const handleClick = (path: string) => {
-  uni.switchTab({ url: path })
+  // uni.switchTab({ url: path })
+  emits('click', path)
 }
 
 onMounted(async () => {
@@ -60,8 +62,18 @@ onMounted(async () => {
       >
         <template v-for="({ iconPath, title, hiddenTitle, path }, i) in items" :key="i">
           <div class="flex flex-col items-center justify-center" @click="handleClick(path)">
-            <wd-img round height="40rpx" width="40rpx" :src="iconPath"></wd-img>
-            <span v-if="!hiddenTitle">{{ title }}</span>
+            <wd-img
+              round
+              :height="hiddenTitle ? 40 : 22"
+              :width="hiddenTitle ? 40 : 22"
+              :src="iconPath"
+            ></wd-img>
+            <span
+              class="mt-1 text-center text-[#8c8c8c] text-[10px] font-normal font-['PingFang SC'] leading-none"
+              v-if="!hiddenTitle"
+            >
+              {{ title }}
+            </span>
           </div>
         </template>
       </div>

src/core/libs/pngs.ts

@@ -6,6 +6,8 @@ import treaty from '@/assets/pngs/treaty.png'
 import settled from '@/assets/pngs/settled.png'
 import designer from '@/assets/pngs/designer.png'
 import taskCenterBg from '@/assets/pngs/task-center-bg.png'
+import iconCamera from '@/assets/pngs/icon-camera.png'
+import iconWallet from '@/assets/pngs/icon-wallet.png'
 
 export {
   scheduleCardBg,
@@ -16,4 +18,6 @@ export {
   settled,
   designer,
   taskCenterBg,
+  iconCamera,
+  iconWallet,
 }

src/core/libs/svgs.ts

@@ -15,6 +15,7 @@ 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'
 export {
   polygon16,
   frame,
@@ -33,4 +34,5 @@ export {
   setting,
   logo,
   vip,
+  iconCamera,
 }

src/layouts/tabbar.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import TabbarEvo from '@/components/tabbar-evo.vue'
+import { iconCamera, iconWallet } from '@/core/libs/pngs'
 import type { ConfigProviderThemeVars } from 'wot-design-uni'
-// import TabbarEvo from 'ano-ui/components/TabbarEvo/TabbarEvo.vue'
 
 const themeVars: ConfigProviderThemeVars = {
   // colorTheme: 'red',
   buttonPrimaryBgColor: '#000',
   // buttonPrimaryColor: '#07c160',
 }
+const publishState = ref(false)
 const items = [
   { title: '首页', icon: 'home', iconPath: '/static/tabbar/home.svg', path: '/pages/home/index' },
   {
@@ -31,6 +32,13 @@ const items = [
   },
   { title: '我的', icon: 'home', iconPath: '/static/tabbar/mine.svg', path: '/pages/mine/index' },
 ]
+const handleTabbarItemClick = (path: string) => {
+  if (path === '/pages/publish/index') {
+    publishState.value = true
+    return
+  }
+  uni.switchTab({ url: path })
+}
 </script>
 
 <template>
@@ -39,7 +47,41 @@ const items = [
       <slot />
     </view>
 
-    <TabbarEvo :items="items" fixed safeAreaInsetBottom />
+    <TabbarEvo :items="items" fixed safeAreaInsetBottom @click="handleTabbarItemClick" />
+    <div
+      v-if="publishState"
+      class="bg-white/80 backdrop-blur-[100px] fixed top-0 left-0 right-0 bottom-0 z-1"
+    >
+      <div class="w-full h-full flex flex-col justify-around px-7 box-border">
+        <div class="text-black/40 text-3xl font-normal font-['PingFang SC'] leading-[45px]">
+          发布记录，
+          <br />
+          成为更好的自己！
+        </div>
+        <div class="flex flex-col">
+          <div class="flex justify-around">
+            <div class="flex flex-col items-center">
+              <wd-img :src="iconCamera" width="66" mode="widthFix"></wd-img>
+              <div class="text-black text-sm font-normal font-['PingFang SC'] leading-[21px]">
+                个人动态
+              </div>
+            </div>
+            <div class="flex flex-col items-center">
+              <wd-img :src="iconWallet" width="66" mode="widthFix"></wd-img>
+              <div class="text-black text-sm font-normal font-['PingFang SC'] leading-[21px]">
+                设计案例
+              </div>
+            </div>
+          </div>
+          <wd-button
+            custom-class="mt-15"
+            type="icon"
+            icon="close"
+            @click="publishState = false"
+          ></wd-button>
+        </div>
+      </div>
+    </div>
     <wd-toast />
     <wd-message-box />
   </wd-config-provider>

src/pages.json

@@ -112,7 +112,8 @@
       "type": "page",
       "layout": "tabbar",
       "style": {
-        "navigationBarTitleText": "发布"
+        "navigationBarTitleText": "发布",
+        "navigationStyle": "custom"
       }
     },
     {

src/pages/publish/index.vue

@@ -1,5 +1,5 @@
 <route lang="json5">
-{ layout: 'tabbar', style: { navigationBarTitleText: '发布' } }
+{ layout: 'tabbar', style: { navigationBarTitleText: '发布', navigationStyle: 'custom' } }
 </route>
 
 <script setup lang="ts"></script>