Respect mini program status bar and menu safe area

pets-fe/components/safe-top/index.js

@@ -0,0 +1,21 @@
+function topHeight() {
+  const windowInfo = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
+  const statusHeight = windowInfo.statusBarHeight || 24;
+  let menuBottom = 0;
+  try {
+    const menu = wx.getMenuButtonBoundingClientRect();
+    menuBottom = menu && menu.bottom ? menu.bottom : 0;
+  } catch (_) {
+    // Some development environments do not expose the menu geometry.
+  }
+  return Math.ceil(Math.max(menuBottom, statusHeight + 44) + 12);
+}
+
+Component({
+  data: { height: 100 },
+  lifetimes: {
+    attached() {
+      this.setData({ height: topHeight() });
+    },
+  },
+});

pets-fe/components/safe-top/index.json

@@ -0,0 +1 @@
+{ "component": true }

pets-fe/components/safe-top/index.wxml

@@ -0,0 +1 @@
+<view class="safe-top" style="height: {{height}}px"></view>

pets-fe/components/safe-top/index.wxss

@@ -0,0 +1,4 @@
+.safe-top {
+  width: 100%;
+  flex-shrink: 0;
+}