Redesign mini program navigation and add back controls

pets-fe/app.wxss

@@ -4,6 +4,12 @@ page {
   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
   font-size: 28rpx;
 }
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
 view,
 text,
 button,
@@ -19,7 +25,7 @@ button::after {
 }
 .screen {
   min-height: 100vh;
-  padding: calc(env(safe-area-inset-top) + 36rpx) 32rpx 170rpx;
+  padding: calc(env(safe-area-inset-top) + 36rpx) 32rpx calc(170rpx + env(safe-area-inset-bottom));
 }
 .eyebrow {
   color: #8fa39b;

pets-fe/components/page-back/index.js

@@ -0,0 +1,11 @@
+Component({
+  methods: {
+    goBack() {
+      if (getCurrentPages().length > 1) {
+        wx.navigateBack({ delta: 1 });
+      } else {
+        wx.reLaunch({ url: "/pages/home/home" });
+      }
+    },
+  },
+});

pets-fe/components/page-back/index.json

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

pets-fe/components/page-back/index.wxml

@@ -0,0 +1,4 @@
+<view class="page-back" bindtap="goBack" aria-role="button" aria-label="返回">
+  <view class="page-back-arrow"></view>
+  <text>返回</text>
+</view>

pets-fe/components/page-back/index.wxss

@@ -0,0 +1,18 @@
+.page-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 12rpx;
+  min-height: 58rpx;
+  margin-bottom: 22rpx;
+  color: #2a7357;
+  font-size: 26rpx;
+  font-weight: 700;
+}
+.page-back-arrow {
+  width: 17rpx;
+  height: 17rpx;
+  border-left: 4rpx solid currentColor;
+  border-bottom: 4rpx solid currentColor;
+  transform: rotate(45deg);
+  margin-left: 5rpx;
+}

pets-fe/components/tab-bar/index.js

@@ -1,9 +1,9 @@
 const tabs = [
-  { path: "/pages/home/home", label: "首页", icon: "⌂" },
+  { path: "/pages/home/home", label: "首页", key: "home" },
-  { path: "/pages/meetups/meetups", label: "约遛", icon: "♡" },
+  { path: "/pages/meetups/meetups", label: "约遛", key: "meetups" },
-  { path: "/pages/walk/walk", label: "遛狗", icon: "🐾" },
+  { path: "/pages/walk/walk", label: "遛狗", key: "walk" },
-  { path: "/pages/tasks/tasks", label: "任务", icon: "☑" },
+  { path: "/pages/tasks/tasks", label: "任务", key: "tasks" },
-  { path: "/pages/pets/pets", label: "宠物", icon: "♙" },
+  { path: "/pages/pets/pets", label: "宠物", key: "pets" },
 ];
 Component({
   properties: { current: String },

pets-fe/components/tab-bar/index.wxml

@@ -2,11 +2,35 @@
   <view
     wx:for="{{tabs}}"
     wx:key="path"
-    class="item {{current===item.path?'active':''}} {{item.label==='遛狗'?'walk':''}}"
+    class="item {{current===item.path?'active':''}} {{item.key==='walk'?'walk':''}}"
     data-path="{{item.path}}"
     bindtap="go"
+    aria-role="button"
+    aria-label="{{item.label}}"
   >
-    <view class="icon">{{item.icon}}</view>
+    <view wx:if="{{item.key==='walk'}}" class="walk-bubble">
-    <text>{{item.label}}</text>
+      <view class="paw">
+        <view class="toe toe-one"></view>
+        <view class="toe toe-two"></view>
+        <view class="toe toe-three"></view>
+        <view class="toe toe-four"></view>
+        <view class="pad"></view>
+      </view>
+    </view>
+    <view wx:else class="icon-wrap">
+      <view wx:if="{{item.key==='home'}}" class="home-icon">
+        <view class="home-roof"></view>
+        <view class="home-body"></view>
+        <view class="home-door"></view>
+      </view>
+      <view wx:elif="{{item.key==='meetups'}}" class="friends-icon">
+        <view class="friend friend-left"></view>
+        <view class="friend friend-right"></view>
+      </view>
+      <view wx:elif="{{item.key==='tasks'}}" class="task-icon"><view class="task-tick"></view></view>
+      <image wx:else class="pet-icon" src="/assets/logo-corgi-v2.png" mode="aspectFill" />
+    </view>
+    <text class="label">{{item.label}}</text>
+    <view wx:if="{{current===item.path && item.key!=='walk'}}" class="active-dot"></view>
   </view>
 </view>

pets-fe/components/tab-bar/index.wxss

@@ -1,47 +1,191 @@
 .bar {
   position: fixed;
-  bottom: 0;
+  left: 24rpx;
-  left: 0;
+  right: 24rpx;
-  right: 0;
+  bottom: calc(env(safe-area-inset-bottom) + 20rpx);
-  height: calc(124rpx + env(safe-area-inset-bottom));
+  height: 112rpx;
-  padding-bottom: env(safe-area-inset-bottom);
-  background: #fff;
   display: flex;
-  justify-content: space-around;
+  align-items: stretch;
-  align-items: center;
+  background: rgba(255, 255, 255, 0.98);
-  box-shadow: 0 -8rpx 35rpx rgba(32, 68, 50, 0.06);
+  border: 2rpx solid #e7eee8;
+  border-radius: 42rpx;
+  box-shadow: 0 12rpx 42rpx rgba(26, 74, 58, 0.13);
   z-index: 20;
 }
 .item {
+  position: relative;
   width: 20%;
+  min-height: 112rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4rpx;
+  justify-content: center;
-  color: #9eafa4;
+  color: #9aaa9e;
-  font-size: 21rpx;
-  font-weight: 600;
 }
 .item.active {
-  color: #174d40;
+  color: #194f42;
 }
-.icon {
+.icon-wrap {
-  font-size: 46rpx;
+  width: 58rpx;
-  height: 52rpx;
+  height: 58rpx;
-  line-height: 52rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 22rpx;
 }
-.walk .icon {
+.active .icon-wrap {
-  width: 82rpx;
+  background: #e7f3e9;
-  height: 82rpx;
+  transform: translateY(-4rpx);
-  line-height: 82rpx;
-  text-align: center;
-  background: #174d40;
-  color: #fff;
-  border-radius: 27rpx;
-  box-shadow: 0 10rpx 23rpx rgba(24, 74, 59, 0.23);
-  margin-top: -30rpx;
-  font-size: 39rpx;
 }
-.walk.active .icon {
+.label {
-  background: #eaaa69;
+  font-size: 21rpx;
+  line-height: 27rpx;
+  font-weight: 600;
+}
+.active-dot {
+  position: absolute;
+  bottom: 4rpx;
+  width: 7rpx;
+  height: 7rpx;
+  border-radius: 50%;
+  background: #65b88f;
+}
+.home-icon {
+  position: relative;
+  width: 42rpx;
+  height: 42rpx;
+}
+.home-roof {
+  position: absolute;
+  top: 3rpx;
+  left: 10rpx;
+  width: 25rpx;
+  height: 25rpx;
+  border-left: 4rpx solid currentColor;
+  border-top: 4rpx solid currentColor;
+  border-radius: 3rpx;
+  transform: rotate(45deg);
+}
+.home-body {
+  position: absolute;
+  left: 6rpx;
+  right: 6rpx;
+  bottom: 1rpx;
+  height: 24rpx;
+  border-left: 4rpx solid currentColor;
+  border-right: 4rpx solid currentColor;
+  border-bottom: 4rpx solid currentColor;
+  border-radius: 0 0 5rpx 5rpx;
+}
+.home-door {
+  position: absolute;
+  left: 18rpx;
+  bottom: 2rpx;
+  width: 10rpx;
+  height: 15rpx;
+  border-left: 3rpx solid currentColor;
+  border-right: 3rpx solid currentColor;
+  border-top: 3rpx solid currentColor;
+  border-radius: 5rpx 5rpx 0 0;
+}
+.friends-icon {
+  position: relative;
+  width: 48rpx;
+  height: 45rpx;
+}
+.friend {
+  position: absolute;
+  bottom: 2rpx;
+  width: 25rpx;
+  height: 16rpx;
+  border: 4rpx solid currentColor;
+  border-radius: 18rpx 18rpx 5rpx 5rpx;
+}
+.friend::before {
+  content: "";
+  position: absolute;
+  top: -25rpx;
+  left: 3rpx;
+  width: 13rpx;
+  height: 13rpx;
+  border: 4rpx solid currentColor;
+  border-radius: 50%;
+}
+.friend-left { left: 1rpx; }
+.friend-right { right: 1rpx; background: #fff; }
+.active .friend-right { background: #e7f3e9; }
+.task-icon {
+  position: relative;
+  width: 35rpx;
+  height: 35rpx;
+  border: 4rpx solid currentColor;
+  border-radius: 9rpx;
+}
+.task-tick {
+  position: absolute;
+  left: 8rpx;
+  top: 6rpx;
+  width: 13rpx;
+  height: 18rpx;
+  border-right: 4rpx solid currentColor;
+  border-bottom: 4rpx solid currentColor;
+  transform: rotate(45deg);
+}
+.pet-icon {
+  width: 46rpx;
+  height: 46rpx;
+  border-radius: 50%;
+  opacity: 0.55;
+}
+.active .pet-icon { opacity: 1; }
+.walk-bubble {
+  position: absolute;
+  top: -43rpx;
+  width: 104rpx;
+  height: 104rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 8rpx solid #f6f9f6;
+  border-radius: 38rpx;
+  background: linear-gradient(145deg, #f8bd8e, #e38e69);
+  box-shadow: 0 10rpx 24rpx rgba(178, 105, 72, 0.26);
+  transform: rotate(-8deg);
+}
+.walk.active .walk-bubble {
+  background: linear-gradient(145deg, #276a55, #174d40);
+  box-shadow: 0 10rpx 24rpx rgba(24, 74, 59, 0.25);
+}
+.walk .label {
+  position: absolute;
+  bottom: 13rpx;
+  color: #aa7356;
+}
+.walk.active .label { color: #174d40; }
+.paw {
+  position: relative;
+  width: 62rpx;
+  height: 62rpx;
+  transform: rotate(8deg);
+}
+.toe,
+.pad {
+  position: absolute;
+  background: #fff;
+}
+.toe {
+  width: 11rpx;
+  height: 16rpx;
+  border-radius: 50%;
+}
+.toe-one { left: 3rpx; top: 19rpx; transform: rotate(-28deg); }
+.toe-two { left: 17rpx; top: 5rpx; transform: rotate(-12deg); }
+.toe-three { right: 17rpx; top: 5rpx; transform: rotate(12deg); }
+.toe-four { right: 3rpx; top: 19rpx; transform: rotate(28deg); }
+.pad {
+  left: 15rpx;
+  top: 30rpx;
+  width: 32rpx;
+  height: 26rpx;
+  border-radius: 50% 50% 45% 45%;
 }

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

@@ -1 +1 @@
-{ "usingComponents": { "pet-picker": "/components/pet-picker/index" } }
+{ "usingComponents": { "pet-picker": "/components/pet-picker/index", "page-back": "/components/page-back/index" } }

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

@@ -1,4 +1,5 @@
 <view class="screen">
+  <page-back />
   <view class="eyebrow">HOST A WALK</view>
   <view class="title">发起约遛 🌿</view>
   <view class="field">

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

@@ -1 +1 @@
-{}
+{ "usingComponents": { "page-back": "/components/page-back/index" } }

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

@@ -1,4 +1,5 @@
 <view class="screen">
+  <page-back />
   <view class="eyebrow">PET PROFILE</view>
   <view class="title">{{id?'编辑档案':'认识新朋友'}} 🐶</view>
   <view class="photo" bindtap="choose">

pets-fe/pages/share/share.json

@@ -1 +1 @@
-{}
+{ "usingComponents": { "page-back": "/components/page-back/index" } }

pets-fe/pages/share/share.wxml

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

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

@@ -41,7 +41,4 @@ Page({
   close() {
     this.setData({ selected: null });
   },
-  back() {
-    wx.navigateBack();
-  },
 });

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

@@ -1 +1 @@
-{}
+{ "usingComponents": { "page-back": "/components/page-back/index" } }

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

@@ -1,6 +1,6 @@
 <view class="screen">
+  <page-back />
   <text wx:if="{{selected}}" class="back" bindtap="close">‹ 全部记录</text>
-  <text wx:else class="back" bindtap="back">‹ 返回</text>
   <view class="eyebrow">OUR LITTLE FOOTPRINTS</view>
   <view class="title">{{selected?'这次的脚印':'遛狗记录'}} 🐾</view>
   <view wx:if="{{selected}}">