Fix capsule-aligned navigation and refresh mini program typography

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

@@ -3,7 +3,7 @@ Page({
   data: {
     id: "",
     name: "",
-    breed: "柯基",
+    breed: "",
     gender: "male",
     birth_date: "",
     weight_kg: "",

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

@@ -1 +1,4 @@
-{ "disableScroll": true, "usingComponents": { "page-back": "/components/page-back/index" } }
+{
+  "disableScroll": true,
+  "usingComponents": {}
+}

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

@@ -1,13 +1,9 @@
-<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
+<page-layout id="page-layout" title="{{id?'编辑档案':'认识新朋友'}}" back="{{true}}">
 <view class="screen">
-  <safe-top />
-  <page-back />
-  <view class="eyebrow">PET PROFILE</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>
-    <view>点击上传照片</view>
+    <app-icon wx:else size="70" />
+    <view class="photo-caption">点击上传照片</view>
   </view>
   <view class="field">
     <view class="field-label">名字 *</view>
@@ -20,7 +16,7 @@
   </view>
   <view class="field">
     <view class="field-label">品种</view>
-    <input value="{{breed}}" data-key="breed" bindinput="field" />
+    <input placeholder="填写它的品种" value="{{breed}}" data-key="breed" bindinput="field" />
   </view>
   <view class="field">
     <view class="field-label">性别</view>
@@ -65,4 +61,4 @@
   <button class="primary" bindtap="save" disabled="{{saving}}">保存档案</button>
   <button wx:if="{{id}}" class="archive" bindtap="archive">归档这只宠物</button>
 </view>
-</scroll-view>
+</page-layout>

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

@@ -14,7 +14,7 @@
   width: 100%;
   height: 100%;
 }
-.photo view {
+.photo-caption {
   position: absolute;
   bottom: 0;
   left: 0;