【fix】优化代码

components/Header/index.vue

@@ -31,9 +31,9 @@ const {goBack} = useRouter()
  *
  */
 const props = defineProps({
-  scrollTop:{
-    type:Number,
-    default:()=>0
+  scrollTop: {
+    type: Number,
+    default: () => 0
   },
   systemBarAreaBg: {
     type: String,
@@ -57,7 +57,7 @@ const props = defineProps({
   },
   returnSize: {
     type: Number,
-    default: () => 22
+    default: () => 16
   },
   textShadow: {
     type: [Boolean, String],
@@ -82,6 +82,10 @@ const props = defineProps({
   leftWidth: {
     type: Number,
     default: () => 0
+  },
+  circleBack: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -98,7 +102,8 @@ const {
   propUp,
   showRight,
   leftWidth,
-  scrollTop
+  scrollTop,
+  circleBack
 } = toRefs(props)
 
 const emits = defineEmits(['getSystemInfo', 'animation'])
@@ -118,6 +123,7 @@ const heightInfo = ref({
 function getSystemInfo() {
   const res = uni.getSystemInfoSync();
   const heightObj = unref(heightInfo)
+  console.log(heightObj)
   heightObj.safeAreaInsets = res.safeAreaInsets
   heightObj.statusBarHeight = res.statusBarHeight
   heightObj.screenWidth = res.screenWidth || res.windowWidth
@@ -141,6 +147,7 @@ function getMenuInfo() {
   const menuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect();
   if (menuButtonBoundingClientRect) {
     menuInfo.value = {...menuButtonBoundingClientRect}
+    console.log(menuInfo.value)
   }
 }
 
@@ -155,7 +162,7 @@ const scssVarStyle = computed(() => {
 const systemBarAreaStyle = computed(() => {
   return {
     width: '100%',
-    height: `${ unref(heightInfo).statusBarHeight * 2 }rpx`,
+    height: `${ unref(heightInfo).statusBarHeight }px`,
     background: unref(systemBarAreaBg)
   }
 })
@@ -164,7 +171,12 @@ const systemBarAreaStyle = computed(() => {
 const headerAreaStyle = computed(() => {
   // 计算margin top
   // margin-top (导航条高度 - 胶囊高度) / 2 永远确保胶囊在header中央
-  const marginTop = unref(menuInfo).height > 0 ? `-${((HEADER_HEIGHT - unref(menuInfo).height))/2}px` : 0
+  let marginTop = 0
+  if (unref(menuInfo).height > 0) {
+    // buttonMarginTopDiff 此处 胶囊和statusBar是由一个距离的
+    const buttonMarginTopDiff = unref(menuInfo).top - unref(heightInfo).statusBarHeight
+    marginTop = `${ (-1 * ((HEADER_HEIGHT - unref(menuInfo).height) / 2)) + buttonMarginTopDiff }px`
+  }
   return {
     width: '100%',
     background: unref(headerAreaBg),
@@ -173,6 +185,12 @@ const headerAreaStyle = computed(() => {
   }
 })
 
+const circleBackStyle = computed(() => {
+  return {
+    height: menuInfo.value.height > 0 ? menuInfo.value.height + 'px' : '32px'
+  }
+})
+
 // 文本样式
 const textShadowStyle = computed(() => {
   return {
@@ -193,6 +211,15 @@ const titleStyle = computed(() => {
   }
 })
 
+const rightStyle = computed(() => {
+  if (menuInfo.value.left > 0) {
+    return {
+      right: `${ (heightInfo.value.screenWidth - menuInfo.value.right) + menuInfo.value.width + 5 }px`
+    }
+  }
+  return {}
+})
+
 // 滚动后背景样式
 const scrollMaskStyle = computed(() => {
   return {
@@ -203,7 +230,7 @@ const scrollMaskStyle = computed(() => {
 
 // 总高度
 const containerHeight = computed(() => {
-  const marginTop = unref(menuInfo).height > 0 ? `${((HEADER_HEIGHT - unref(menuInfo).height))/2}` : 0
+  const marginTop = unref(menuInfo).height > 0 ? `${ ((HEADER_HEIGHT - unref(menuInfo).height)) / 2 }` : 0
   return (unref(heightInfo).statusBarHeight + HEADER_HEIGHT - marginTop)
 })
 
@@ -222,7 +249,7 @@ watch(scrollTop, () => {
 })
 
 
-defineExpose({containerHeight, heightInfo})
+defineExpose({containerHeight, heightInfo, menuInfo})
 
 onLoad(() => {
   getSystemInfo()
@@ -257,7 +284,19 @@ onLoad(() => {
             v-if="showReturn"
         >
           <slot name="left">
+            <view
+                v-if="circleBack"
+                class="circle-back"
+                :style="circleBackStyle">
+              <uv-icon
+                  name="arrow-left"
+                  :color="returnColor"
+                  :size="returnSize"
+                  @click="goBack"
+              />
+            </view>
             <uv-icon
+                v-else
                 name="arrow-left"
                 :color="returnColor"
                 :size="returnSize"
@@ -274,6 +313,7 @@ onLoad(() => {
         </view>
         <view
             class="right"
+            :style="rightStyle"
             v-if="showRight"
         >
           <slot name="right">
@@ -367,4 +407,15 @@ onLoad(() => {
   }
 }
 
+.circle-back {
+  aspect-ratio: 1/1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 50%;
+  box-shadow: 0 0 10rpx rgba(225, 225, 225, 0.48);
+  border: 1rpx solid rgba(225, 225, 225, 0.8);
+}
+
 </style>