refactor(app): 使用 getWindowInfo 优化菜单按钮样式计算

packages/app/src/components/nav-bar.vue

@@ -0,0 +1,4 @@
+<script setup lang="ts"></script>
+<template>
+  <div></div>
+</template>

packages/app/src/components/start-menu-button.vue

@@ -11,11 +11,12 @@ const menuBtnClientRect = ref<UniNamespace.GetMenuButtonBoundingClientRectRes>({
 const startMenuBtnStyle = ref({
   width: '0px',
   height: '0px',
-  marginLeft: '0px',
+  left: '0px',
+  top: '0px',
 })
 // 获取小程序胶囊距离
 onMounted(async () => {
-  const { windowHeight, windowWidth } = await uni.getSystemInfo()
+  const { windowWidth } = await uni.getWindowInfo()
   //   console.log(windowHeight, windowWidth)
   // #ifdef MP-WEIXIN
   menuBtnClientRect.value = await uni.getMenuButtonBoundingClientRect()
@@ -23,7 +24,8 @@ onMounted(async () => {
   startMenuBtnStyle.value = {
     width: menuBtnClientRect.value.width + 'px',
     height: menuBtnClientRect.value.height + 'px',
-    marginLeft: `${windowWidth - menuBtnClientRect.value.right}px`,
+    top: `${menuBtnClientRect.value.top}px`,
+    left: `${windowWidth - menuBtnClientRect.value.right}px`,
   }
   //   console.log(startMenuBtnStyle.value)
   // #endif
@@ -31,8 +33,11 @@ onMounted(async () => {
 </script>
 <template>
   <div>
-    <div :style="{ height: menuBtnClientRect.top + 'px' }"></div>
-    <div class="rounded-full flex items-center px-3 box-border" :style="startMenuBtnStyle">
+    <!-- <div :style="{ height: menuBtnClientRect.top + 'px' }"></div> -->
+    <div
+      class="fixed rounded-full flex items-center px-3 box-border bg-green z-1"
+      :style="startMenuBtnStyle"
+    >
       <slot></slot>
     </div>
   </div>

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { currRoute, getIsTabbar } from '@/utils'
 import { onMounted, ref } from 'vue'
 const props = defineProps({
   items: {
@@ -40,7 +39,7 @@ const handleClick = (path: string) => {
 onMounted(async () => {
   if (props.safeAreaInsetBottom) {
     // uniapp 获取safeAreaInsetBottom
-    const res = await uni.getSystemInfoSync()
+    const res = await uni.getWindowInfo()
     safeAreaInsets.value = res.safeAreaInsets
     // 获取到tabbar的dom计算过的margin
     if (tabbar.value) {

packages/app/src/layouts/back.vue

@@ -21,7 +21,7 @@ const startMenuBtnStyle = ref({
 const navHeight = ref('0px')
 onMounted(async () => {
   menuBtnClientRect.value = await uni.getMenuButtonBoundingClientRect()
-  const { windowHeight, windowWidth } = await uni.getSystemInfo()
+  const { windowWidth } = await uni.getWindowInfo()
   startMenuBtnStyle.value = {
     width: menuBtnClientRect.value.width + 'px',
     height: menuBtnClientRect.value.height + 'px',

packages/app/src/layouts/tabbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import TabbarEvo from '@/components/tabbar-evo.vue'
-import { iconCamera, iconWallet } from '@/core/libs/pngs'
+import { iconCamera, iconWallet } from '../core/libs/pngs'
 import {
   home,
   homeActive,
@@ -11,9 +11,9 @@ import {
   mine,
   mineActive,
   publish,
-} from '@/core/libs/svgs'
-import { currRoute } from '@/utils'
-import {defaultThemeVars} from "@/core/themes/default";
+} from '../core/libs/svgs'
+import { currRoute } from '../utils'
+import { defaultThemeVars } from '../core/themes/default'
 
 const publishState = ref(false)
 const items = [

packages/app/src/pages/mine/index.vue

@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+
 import CardMenu from '@/components/card-menu.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import StartMenuButton from '@/components/start-menu-button.vue'
@@ -80,18 +81,38 @@ onMounted(async () => {
   // console.log(data.value)
   await getTaskData()
 })
+const navBarProps = ref({ customClass: 'bg-transparent!' })
+onPageScroll(({ scrollTop }: { scrollTop: number }) => {
+  console.log(scrollTop)
+  navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
+})
 </script>
 
 <template>
   <view>
-    <div class="bg-black/30 backdrop-blur-[60px] aspect-[1.15/1]">
-      <StartMenuButton>
-        <div class="flex">
-          <wd-button type="text" size="small" custom-class="p-0!" :round="false">
-            <wd-img width="25" height="25" :src="scan" custom-class="vertical-bottom"></wd-img>
-          </wd-button>
-        </div>
-      </StartMenuButton>
+    <wd-navbar
+      fixed
+      safeAreaInsetTop
+      custom-class="bg-transparent!"
+      :bordered="false"
+      v-bind="navBarProps"
+    >
+      <template #left>
+        <wd-button type="text" size="small" custom-class="p-0!" :round="false">
+          <wd-img width="25" height="25" :src="scan" custom-class="vertical-bottom"></wd-img>
+        </wd-button>
+      </template>
+    </wd-navbar>
+    <!-- <StartMenuButton>
+      <div class="flex">
+        <wd-button type="text" size="small" custom-class="p-0!" :round="false">
+          <wd-img width="25" height="25" :src="scan" custom-class="vertical-bottom"></wd-img>
+        </wd-button>
+      </div>
+    </StartMenuButton> -->
+    <div
+      class="bg-black/30 backdrop-blur-[60px] aspect-[1.15/1] flex flex-col justify-end pb-20 box-border"
+    >
       <div class="my-6.5 px-3.5 flex">
         <img class="w-[72px] h-[72px] rounded-full border border-white" :src="avatar" />
         <div class="ms-3.5 ml-3.5">