Respect mini program status bar and menu safe area

pets-fe/app.json

@@ -1,6 +1,7 @@
 {
   "pages": ["pages/home/home", "pages/meetups/meetups", "pages/walk/walk", "pages/tasks/tasks", "pages/pets/pets", "pages/pet-edit/pet-edit", "pages/meetup-edit/meetup-edit", "pages/share/share", "pages/walk-records/walk-records"],
   "window": { "navigationStyle": "custom", "backgroundColor": "#f6f9f6", "backgroundTextStyle": "dark" },
+  "usingComponents": { "safe-top": "/components/safe-top/index" },
   "permission": { "scope.userLocation": { "desc": "遛狗时记录轨迹，并在你主动开启分享后展示实时位置" } },
   "requiredPrivateInfos": ["getLocation", "chooseLocation"],
   "sitemapLocation": "sitemap.json",

pets-fe/app.wxss

@@ -25,7 +25,7 @@ button::after {
 }
 .screen {
   min-height: 100vh;
-  padding: calc(env(safe-area-inset-top) + 36rpx) 32rpx calc(170rpx + env(safe-area-inset-bottom));
+  padding: 0 32rpx calc(170rpx + env(safe-area-inset-bottom));
 }
 .eyebrow {
   color: #8fa39b;

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;
+}

pets-fe/pages/home/home.wxml

@@ -1,7 +1,8 @@
 <view class="screen">
+  <safe-top />
   <view class="eyebrow">你好，今天也一起好好生活</view>
   <view class="row top">
-    <view class="title">早安，{{name}} ☀️</view>
+    <view class="title">早安，{{name}}</view>
     <image src="/assets/logo-corgi-v2.png" class="avatar" />
   </view>
   <view class="hero">

pets-fe/pages/home/home.wxss

@@ -1,9 +1,16 @@
 .top {
   margin-top: 10rpx;
 }
+.top .title {
+  flex: 1;
+  min-width: 0;
+  margin-right: 16rpx;
+  overflow-wrap: anywhere;
+}
 .avatar {
   width: 70rpx;
   height: 70rpx;
+  flex-shrink: 0;
   border-radius: 50%;
   border: 6rpx solid white;
   box-shadow: 0 5rpx 22rpx #174b3520;

pets-fe/pages/meetup-edit/meetup-edit.wxml

@@ -1,7 +1,8 @@
 <view class="screen">
+  <safe-top />
   <page-back />
   <view class="eyebrow">HOST A WALK</view>
-  <view class="title">发起约遛 🌿</view>
+  <view class="title">发起约遛</view>
   <view class="field">
     <view class="field-label">活动名称</view>
     <input

pets-fe/pages/meetups/meetups.wxml

@@ -1,6 +1,7 @@
 <view class="screen">
+  <safe-top />
   <view class="eyebrow">LET'S WALK TOGETHER</view>
-  <view class="title">约个伴一起遛 🌿</view>
+  <view class="title">约个伴一起遛</view>
   <view class="banner">
     <view class="banner-copy">
       <text>好天气，和新朋友一起走走</text>

pets-fe/pages/pet-edit/pet-edit.wxml

@@ -1,7 +1,8 @@
 <view class="screen">
+  <safe-top />
   <page-back />
   <view class="eyebrow">PET PROFILE</view>
-  <view class="title">{{id?'编辑档案':'认识新朋友'}} 🐶</view>
+  <view class="title">{{id?'编辑档案':'认识新朋友'}}</view>
   <view class="photo" bindtap="choose">
     <image wx:if="{{avatar_url}}" src="{{avatar_url}}" mode="aspectFill" />
     <text wx:else>🐕</text>

pets-fe/pages/pets/pets.wxml

@@ -1,6 +1,7 @@
 <view class="screen">
+  <safe-top />
   <view class="eyebrow">MY LITTLE FAMILY</view>
-  <view class="title">我的毛孩子 🐕</view>
+  <view class="title">我的毛孩子</view>
   <view class="family">
     <view>
       <text>五只柯基，也能一起遛</text>

pets-fe/pages/share/share.wxml

@@ -1,7 +1,8 @@
 <view class="screen">
+  <safe-top />
   <page-back />
   <view class="eyebrow">肉垫计划 · 位置分享</view>
-  <view class="title">找到小短腿的脚印 🐾</view>
+  <view class="title">找到小短腿的脚印</view>
   <map wx:if="{{markers.length}}"
     latitude="{{latitude}}"
     longitude="{{longitude}}"

pets-fe/pages/tasks/tasks.wxml

@@ -1,6 +1,7 @@
 <view class="screen">
+  <safe-top />
   <view class="eyebrow">LITTLE THINGS, BIG LOVE</view>
-  <view class="title">今日小任务 ☑</view>
+  <view class="title">今日小任务</view>
   <view class="summary">
     <view>这一天也要照顾好它们</view>
     <strong>

pets-fe/pages/walk-records/walk-records.wxml

@@ -1,8 +1,9 @@
 <view class="screen">
+  <safe-top />
   <page-back />
   <text wx:if="{{selected}}" class="back" bindtap="close">‹ 全部记录</text>
   <view class="eyebrow">OUR LITTLE FOOTPRINTS</view>
-  <view class="title">{{selected?'这次的脚印':'遛狗记录'}} 🐾</view>
+  <view class="title">{{selected?'这次的脚印':'遛狗记录'}}</view>
   <view wx:if="{{selected}}">
     <view class="card detail">
       <strong>{{selected.date}}</strong>

pets-fe/pages/walk/walk.wxml

@@ -1,6 +1,7 @@
 <view class="screen walk-screen">
+  <safe-top />
   <view class="eyebrow">PAWPRINT WALK</view>
-  <view class="title">一起去兜风 🐾</view>
+  <view class="title">一起去兜风</view>
   <view class="map-box">
     <map
       id="walk-map"