feat: add CapsuleSafeArea component for weapp capsule button safe area

src/components/common/CapsuleSafeArea.vue

@@ -0,0 +1,35 @@
+<template>
+  <view :style="safeStyle">
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+const safeWidth = ref(0)
+
+const safeStyle = computed(() => ({
+  marginLeft: `${safeWidth.value}px`,
+}))
+
+onMounted(() => {
+  try {
+    const systemInfo = uni.getSystemInfoSync()
+    const menuButton = uni.getMenuButtonBoundingClientRect()
+
+    if (systemInfo.screenWidth && menuButton && menuButton.left != null) {
+      safeWidth.value = systemInfo.screenWidth - menuButton.left + 8
+    } else {
+      safeWidth.value = Math.round(systemInfo.screenWidth * 0.28)
+    }
+  } catch (e) {
+    try {
+      const systemInfo = uni.getSystemInfoSync()
+      safeWidth.value = Math.round(systemInfo.screenWidth * 0.28)
+    } catch {
+      safeWidth.value = 0
+    }
+  }
+})
+</script>