From 46ac8f8a47353bb9d85cc7a6f13ec4d2f1a70502 Mon Sep 17 00:00:00 2001
From: Blizzard <blizzardzhang@icloud.com>
Date: Sun, 4 Oct 2026 09:53:07 +0800
Subject: [PATCH] Respect mini program status bar and menu safe area

---
 pets-fe/app.json                             |  1 +
 pets-fe/app.wxss                             |  2 +-
 pets-fe/components/safe-top/index.js         | 21 ++++++++++++++++++++
 pets-fe/components/safe-top/index.json       |  1 +
 pets-fe/components/safe-top/index.wxml       |  1 +
 pets-fe/components/safe-top/index.wxss       |  4 ++++
 pets-fe/pages/home/home.wxml                 |  3 ++-
 pets-fe/pages/home/home.wxss                 |  7 +++++++
 pets-fe/pages/meetup-edit/meetup-edit.wxml   |  3 ++-
 pets-fe/pages/meetups/meetups.wxml           |  3 ++-
 pets-fe/pages/pet-edit/pet-edit.wxml         |  3 ++-
 pets-fe/pages/pets/pets.wxml                 |  3 ++-
 pets-fe/pages/share/share.wxml               |  3 ++-
 pets-fe/pages/tasks/tasks.wxml               |  3 ++-
 pets-fe/pages/walk-records/walk-records.wxml |  3 ++-
 pets-fe/pages/walk/walk.wxml                 |  3 ++-
 16 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 pets-fe/components/safe-top/index.js
 create mode 100644 pets-fe/components/safe-top/index.json
 create mode 100644 pets-fe/components/safe-top/index.wxml
 create mode 100644 pets-fe/components/safe-top/index.wxss

diff --git a/pets-fe/app.json b/pets-fe/app.json
index 501cfe2..4cd974d 100644
--- a/pets-fe/app.json
+++ b/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",
diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss
index c0966db..b717c2b 100644
--- a/pets-fe/app.wxss
+++ b/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;
diff --git a/pets-fe/components/safe-top/index.js b/pets-fe/components/safe-top/index.js
new file mode 100644
index 0000000..e5d1284
--- /dev/null
+++ b/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() });
+    },
+  },
+});
diff --git a/pets-fe/components/safe-top/index.json b/pets-fe/components/safe-top/index.json
new file mode 100644
index 0000000..67f8e03
--- /dev/null
+++ b/pets-fe/components/safe-top/index.json
@@ -0,0 +1 @@
+{ "component": true }
diff --git a/pets-fe/components/safe-top/index.wxml b/pets-fe/components/safe-top/index.wxml
new file mode 100644
index 0000000..767c21f
--- /dev/null
+++ b/pets-fe/components/safe-top/index.wxml
@@ -0,0 +1 @@
+<view class="safe-top" style="height: {{height}}px"></view>
diff --git a/pets-fe/components/safe-top/index.wxss b/pets-fe/components/safe-top/index.wxss
new file mode 100644
index 0000000..138cbad
--- /dev/null
+++ b/pets-fe/components/safe-top/index.wxss
@@ -0,0 +1,4 @@
+.safe-top {
+  width: 100%;
+  flex-shrink: 0;
+}
diff --git a/pets-fe/pages/home/home.wxml b/pets-fe/pages/home/home.wxml
index afb4d1f..4b97aec 100644
--- a/pets-fe/pages/home/home.wxml
+++ b/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">
diff --git a/pets-fe/pages/home/home.wxss b/pets-fe/pages/home/home.wxss
index b5b5975..6841aec 100644
--- a/pets-fe/pages/home/home.wxss
+++ b/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;
diff --git a/pets-fe/pages/meetup-edit/meetup-edit.wxml b/pets-fe/pages/meetup-edit/meetup-edit.wxml
index 1d50ad5..1b87505 100644
--- a/pets-fe/pages/meetup-edit/meetup-edit.wxml
+++ b/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
diff --git a/pets-fe/pages/meetups/meetups.wxml b/pets-fe/pages/meetups/meetups.wxml
index 21dddc0..49123bc 100644
--- a/pets-fe/pages/meetups/meetups.wxml
+++ b/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>
diff --git a/pets-fe/pages/pet-edit/pet-edit.wxml b/pets-fe/pages/pet-edit/pet-edit.wxml
index 59562e0..5e71043 100644
--- a/pets-fe/pages/pet-edit/pet-edit.wxml
+++ b/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>
diff --git a/pets-fe/pages/pets/pets.wxml b/pets-fe/pages/pets/pets.wxml
index d1d7a22..f1cf7bb 100644
--- a/pets-fe/pages/pets/pets.wxml
+++ b/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>
diff --git a/pets-fe/pages/share/share.wxml b/pets-fe/pages/share/share.wxml
index 091a66d..1af1419 100644
--- a/pets-fe/pages/share/share.wxml
+++ b/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}}"
diff --git a/pets-fe/pages/tasks/tasks.wxml b/pets-fe/pages/tasks/tasks.wxml
index b702003..d8b903f 100644
--- a/pets-fe/pages/tasks/tasks.wxml
+++ b/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>
diff --git a/pets-fe/pages/walk-records/walk-records.wxml b/pets-fe/pages/walk-records/walk-records.wxml
index 9d90826..f2d2856 100644
--- a/pets-fe/pages/walk-records/walk-records.wxml
+++ b/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>
diff --git a/pets-fe/pages/walk/walk.wxml b/pets-fe/pages/walk/walk.wxml
index 95cda47..cd891c2 100644
--- a/pets-fe/pages/walk/walk.wxml
+++ b/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"