Add immediate startup login and loading states for mini program home

pets-fe/app.js

@@ -2,22 +2,33 @@ App({
   globalData: { token: "", user: null },
   onLaunch() {
     this.globalData.token = wx.getStorageSync("pet_token") || "";
+    // Start immediately; pages await the same promise and display failures themselves.
+    this.login().catch(() => {});
   },
   async login() {
+    if (this.loginPromise) return this.loginPromise;
     if (this.globalData.token) return this.globalData.token;
-    if (!this.loginPromise)
-      this.loginPromise = (async () => {
-        const { request } = require("./utils/api");
-        const { code } = await wx.login();
-        if (!code) throw new Error("微信登录未取得凭证，请重试");
-        const data = await request("/auth/login", "POST", { code }, false);
-        this.globalData.token = data.token;
-        this.globalData.user = data.user;
-        wx.setStorageSync("pet_token", data.token);
-        return data.token;
-      })().finally(() => {
-        this.loginPromise = null;
-      });
+    this.loginPromise = (async () => {
+      const { request } = require("./utils/api");
+      const { code } = await new Promise((resolve, reject) =>
+        wx.login({
+          timeout: 10000,
+          success: resolve,
+          fail: () => reject(new Error("暂时无法连接微信，请重新连接")),
+        }),
+      );
+      if (!code) throw new Error("微信登录未取得凭证，请重新连接");
+      const data = await request("/auth/login", "POST", { code }, false);
+      if (!data || typeof data.token !== "string" || !data.token) {
+        throw new Error("登录未完成，请重新连接");
+      }
+      this.globalData.token = data.token;
+      this.globalData.user = data.user;
+      wx.setStorageSync("pet_token", data.token);
+      return data.token;
+    })().finally(() => {
+      this.loginPromise = null;
+    });
     return this.loginPromise;
   },
 });

pets-fe/components/home-skeleton/index.js

@@ -0,0 +1 @@
+Component({});

pets-fe/components/home-skeleton/index.json

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

pets-fe/components/home-skeleton/index.wxml

@@ -0,0 +1,9 @@
+<view class="skeleton" aria-label="正在准备首页内容">
+  <view class="hero-placeholder"><view class="bone line short"></view><view class="bone line title"></view><view class="bone line"></view><view class="bone art"></view></view>
+  <view class="bone heading"></view>
+  <view class="card-placeholder"><view class="bone line title"></view><view class="bone line"></view><view class="bone action"></view></view>
+  <view class="stats-placeholder"><view class="bone"></view><view class="bone"></view><view class="bone"></view></view>
+  <view class="bone heading"></view>
+  <view class="card-placeholder"><view class="bone line"></view><view class="bone line short"></view></view>
+  <view class="loading-copy">正在准备今天的小日常…</view>
+</view>

pets-fe/components/home-skeleton/index.wxss

@@ -0,0 +1,73 @@
+.bone {
+  background: linear-gradient(100deg, #f3e7dc 20%, #fff8ef 45%, #f3e7dc 70%);
+  background-size: 220% 100%;
+  animation: shimmer 1.6s ease-in-out infinite;
+  border-radius: 15rpx;
+}
+.hero-placeholder {
+  position: relative;
+  min-height: 330rpx;
+  background: #fff0e2;
+  border-radius: 38rpx;
+  padding: 45rpx 35rpx;
+  box-sizing: border-box;
+}
+.line {
+  height: 22rpx;
+  width: 65%;
+  margin: 24rpx 0;
+}
+.short {
+  width: 25%;
+}
+.title {
+  height: 38rpx;
+  width: 48%;
+}
+.art {
+  position: absolute;
+  right: 35rpx;
+  top: 62rpx;
+  width: 170rpx;
+  height: 190rpx;
+  border-radius: 40rpx;
+}
+.heading {
+  width: 230rpx;
+  height: 33rpx;
+  margin: 48rpx 0 28rpx;
+}
+.card-placeholder {
+  padding: 28rpx;
+  background: white;
+  border-radius: 35rpx;
+}
+.action {
+  height: 80rpx;
+  margin-top: 42rpx;
+  border-radius: 24rpx;
+}
+.stats-placeholder {
+  display: flex;
+  gap: 14rpx;
+  margin-top: 20rpx;
+}
+.stats-placeholder view {
+  height: 140rpx;
+  flex: 1;
+  border-radius: 28rpx;
+}
+.loading-copy {
+  text-align: center;
+  color: #a48d7e;
+  font-size: 22rpx;
+  margin-top: 32rpx;
+}
+@keyframes shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}

pets-fe/components/startup-state/index.js

@@ -0,0 +1,8 @@
+Component({
+  properties: { error: String },
+  methods: {
+    retry() {
+      this.triggerEvent("retry");
+    },
+  },
+});

pets-fe/components/startup-state/index.json

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

pets-fe/components/startup-state/index.wxml

@@ -0,0 +1,16 @@
+<view class="startup {{error?'failed':''}}">
+  <view class="glow"></view>
+  <view class="brand-wrap"><image class="brand" src="/assets/logo-corgi-v2.png" mode="aspectFit" /></view>
+  <view class="brand-name">肉垫计划</view>
+  <view class="brand-tagline">给陪伴一个温暖的地方</view>
+  <view wx:if="{{error}}" class="connection-error">
+    <view class="message">暂时没能连接</view>
+    <view class="error-copy">{{error}}</view>
+    <button class="retry" bindtap="retry">重新连接</button>
+  </view>
+  <view wx:else class="preparing" role="status">
+    <view class="dots"><view></view><view></view><view></view></view>
+    <view class="message">正在准备今天的小日常</view>
+  </view>
+  <view class="footer">陪伴它们的每一天，都值得记录</view>
+</view>

pets-fe/components/startup-state/index.wxss

@@ -0,0 +1,128 @@
+.startup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  background: linear-gradient(160deg, #fff9f3, #fff0e2 65%, #f7edf7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: #694c3f;
+}
+.glow {
+  position: absolute;
+  width: 520rpx;
+  height: 520rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, #ffe1c2, transparent 70%);
+  top: 18%;
+  pointer-events: none;
+}
+.brand-wrap {
+  position: relative;
+  animation: breathe 2.4s ease-in-out infinite;
+}
+.brand {
+  width: 172rpx;
+  height: 172rpx;
+  border-radius: 55rpx;
+  box-shadow: 0 20rpx 60rpx #bd84551c;
+}
+.brand-name {
+  font-size: 45rpx;
+  font-weight: 600;
+  letter-spacing: 5rpx;
+  margin-top: 34rpx;
+}
+.brand-tagline {
+  font-size: 23rpx;
+  color: #9d7965;
+  margin-top: 14rpx;
+  letter-spacing: 2rpx;
+}
+.preparing,
+.connection-error {
+  min-height: 170rpx;
+  margin-top: 64rpx;
+  text-align: center;
+  position: relative;
+}
+.message {
+  font-size: 25rpx;
+  color: #886c5f;
+}
+.dots {
+  display: flex;
+  justify-content: center;
+  gap: 12rpx;
+  margin-bottom: 25rpx;
+}
+.dots view {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: #d99a75;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.dots view:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.dots view:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.error-copy {
+  font-size: 23rpx;
+  line-height: 1.8;
+  color: #9d7965;
+  margin-top: 15rpx;
+  max-width: 570rpx;
+  overflow-wrap: break-word;
+}
+.retry {
+  font-size: 25rpx;
+  background: #b95738;
+  color: white;
+  border-radius: 24rpx;
+  padding: 0 44rpx;
+  margin-top: 26rpx;
+  line-height: 82rpx;
+}
+.retry::after {
+  border: 0;
+}
+.failed .brand-wrap {
+  animation: none;
+}
+.footer {
+  position: absolute;
+  bottom: calc(65rpx + env(safe-area-inset-bottom));
+  font-size: 20rpx;
+  color: #a88c78;
+  letter-spacing: 1rpx;
+}
+@keyframes breathe {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-10rpx) scale(1.025);
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.85);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}

pets-fe/pages/home/home.js

@@ -14,16 +14,22 @@ Page({
     walkCount: 0,
     name: "铲屎官",
     loading: true,
+    ready: false,
+    phase: "auth",
+    error: "",
   },
   onShow() {
-    this.load();
     this.updateEnvironmentLabel();
-    if (!this.environmentAt || Date.now() - this.environmentAt > 15 * 60 * 1000) {
-      this.refreshEnvironment();
-    }
+    this.load();
+  },
+  onUnload() {
+    this.disposed = true;
   },
   updateEnvironmentLabel() {
-    this.setData({ headerSubtitle: dateLabel() + " · " + (this.weatherLabel || "轻触获取天气") });
+    this.setData({
+      headerSubtitle:
+        dateLabel() + " · " + (this.weatherLabel || "轻触获取天气"),
+    });
   },
   async refreshEnvironment(event) {
     if (this.environmentBusy) return;
@@ -31,44 +37,84 @@ Page({
     const tapped = !!event;
     let positioned = false;
     try {
-      const settings = await new Promise((resolve, reject) => wx.getSetting({ success: resolve, fail: reject }));
+      const settings = await new Promise((resolve, reject) =>
+        wx.getSetting({ success: resolve, fail: reject }),
+      );
       if (settings.authSetting["scope.userLocation"] === false) {
         if (!tapped) throw new Error("location-denied");
-        const enabled = await new Promise((resolve, reject) => wx.openSetting({ success: resolve, fail: reject }));
-        if (!enabled.authSetting["scope.userLocation"]) throw new Error("location-denied");
+        const enabled = await new Promise((resolve, reject) =>
+          wx.openSetting({ success: resolve, fail: reject }),
+        );
+        if (!enabled.authSetting["scope.userLocation"])
+          throw new Error("location-denied");
       }
       this.weatherLabel = "正在获取天气";
       this.updateEnvironmentLabel();
-      const point = await new Promise((resolve, reject) => wx.getLocation({
-        type: "gcj02",
-        success: resolve,
-        fail: reject,
-      }));
+      const point = await new Promise((resolve, reject) =>
+        wx.getLocation({
+          type: "gcj02",
+          success: resolve,
+          fail: reject,
+        }),
+      );
       positioned = true;
-      const result = await secure("/environment", "GET", { latitude: point.latitude, longitude: point.longitude });
+      const result = await secure("/environment", "GET", {
+        latitude: point.latitude,
+        longitude: point.longitude,
+      });
       this.setData({ locationName: result.location_name });
       this.weatherLabel = result.weather
         ? `${result.weather.description} ${result.weather.temperature}°C`
         : "天气暂不可用";
       this.environmentAt = result.weather ? Date.now() : 0;
     } catch (error) {
-      const denied = /denied|deny|auth/.test(error.errMsg || error.message || "");
-      this.setData({ locationName: positioned ? "位置暂不可用" : denied ? "开启定位" : "定位暂不可用" });
+      const denied = /denied|deny|auth/.test(
+        error.errMsg || error.message || "",
+      );
+      this.setData({
+        locationName: positioned
+          ? "位置暂不可用"
+          : denied
+            ? "开启定位"
+            : "定位暂不可用",
+      });
       this.weatherLabel = denied ? "轻触开启定位" : "轻触重试";
-      if (tapped && !denied) wx.showToast({ title: positioned ? "位置和天气获取失败，请重试" : "定位失败，请重试", icon: "none" });
+      if (tapped && !denied)
+        wx.showToast({
+          title: positioned ? "位置和天气获取失败，请重试" : "定位失败，请重试",
+          icon: "none",
+        });
     } finally {
       this.environmentBusy = false;
       this.updateEnvironmentLabel();
     }
   },
   async load() {
+    if (this.loadPromise) return this.loadPromise;
+    this.loadPromise = this.loadHome().finally(() => {
+      this.loadPromise = null;
+    });
+    return this.loadPromise;
+  },
+  async loadHome() {
+    this.setData({
+      loading: true,
+      error: "",
+      phase: this.data.ready ? "data" : "auth",
+    });
+    let authenticated = false;
     try {
+      await getApp().login();
+      authenticated = true;
+      if (this.disposed) return;
+      this.setData({ phase: "data" });
       const [pets, tasks, walks, me] = await Promise.all([
         secure("/pets"),
         secure("/tasks"),
         secure("/walks"),
         secure("/me"),
       ]);
+      if (this.disposed) return;
       const chosen = wx.getStorageSync("walk_pet_ids") || [],
         month = localDate().slice(0, 7);
       this.setData({
@@ -77,14 +123,30 @@ Page({
         tasks: tasks.items,
         walkCount: walks.filter((w) => w.started_at.slice(0, 7) === month)
           .length,
-        name: me.nickname || "铲屎官",
+        name: me.nickname || "毛孩家长",
         loading: false,
+        ready: true,
+        phase: "ready",
+      });
+      // Location permission and weather never hold up the first usable screen.
+      if (
+        !this.environmentAt ||
+        Date.now() - this.environmentAt > 15 * 60 * 1000
+      ) {
+        this.refreshEnvironment();
+      }
+    } catch (error) {
+      if (this.disposed) return;
+      this.setData({
+        loading: false,
+        phase: !authenticated && !this.data.ready ? "auth-error" : "data-error",
+        error: error.message || "暂时没能连接，请稍后重试",
       });
-    } catch (e) {
-      this.setData({ loading: false });
-      toast(e);
     }
   },
+  addPet() {
+    wx.navigateTo({ url: "/pages/pet-edit/pet-edit" });
+  },
   pick(e) {
     this.setData({ selected: e.detail.selected });
     wx.setStorageSync("walk_pet_ids", e.detail.selected);

pets-fe/pages/home/home.json

@@ -2,6 +2,8 @@
   "disableScroll": true,
   "usingComponents": {
     "tab-bar": "/components/tab-bar/index",
-    "pet-picker": "/components/pet-picker/index"
+    "pet-picker": "/components/pet-picker/index",
+    "startup-state": "/components/startup-state/index",
+    "home-skeleton": "/components/home-skeleton/index"
   }
 }

pets-fe/pages/home/home.wxml

@@ -1,5 +1,16 @@
-<page-layout id="page-layout" title="{{locationName}}" subtitle="{{headerSubtitle}}" location="{{true}}" bind:locationtap="refreshEnvironment">
+<startup-state wx:if="{{phase==='auth' || phase==='auth-error'}}" error="{{error}}" bind:retry="load" />
+<page-layout wx:else id="page-layout" title="{{locationName}}" subtitle="{{headerSubtitle}}" location="{{true}}" bind:locationtap="refreshEnvironment">
 <view class="screen">
+  <home-skeleton wx:if="{{loading && !ready}}" />
+  <view wx:elif="{{!ready && error}}" class="card home-error">
+    <app-icon kind="paw" size="54" />
+    <view class="error-title">暂时没能准备好首页</view>
+    <view class="muted">{{error}}</view>
+    <button class="primary" bindtap="load">重新加载</button>
+  </view>
+  <block wx:else>
+  <view wx:if="{{error}}" class="refresh-error"><text>更新失败，保留上次的日常记录</text><text class="link" bindtap="load">重试</text></view>
+  <view wx:elif="{{loading}}" class="refresh-hint">正在更新今天的小日常…</view>
   <view class="hero">
     <view class="hero-copy">
       <text class="hero-small">今日的主角</text>
@@ -21,9 +32,16 @@
         <view class="muted">选择同行的狗狗，一起出门转转。</view>
       </view>
     </view>
+    <view wx:if="{{!pets.length}}" class="first-pet">
+      <view class="first-pet-title">认识你的第一位毛孩子</view>
+      <view class="muted">先建立档案，再一起出门收集小快乐。</view>
+      <button class="primary start" bindtap="addPet">添加毛孩子</button>
+    </view>
+    <block wx:else>
     <view class="picker-label">这次带谁？可以多选</view>
     <pet-picker pets="{{pets}}" selected="{{selected}}" bind:change="pick" />
     <button class="primary start" bindtap="start">开始遛狗 →</button>
+    </block>
   </view>
   <view class="stats">
     <view>
@@ -75,6 +93,7 @@
       今天还没有任务，给狗狗安排一件小事吧
     </view>
   </view>
+  </block>
 </view>
 </page-layout>
-<tab-bar current="/pages/home/home" />
+<tab-bar wx:if="{{ready}}" current="/pages/home/home" />

pets-fe/pages/home/home.wxss

@@ -157,3 +157,53 @@
 .task-main .muted {
   font-size: 22rpx;
 }
+.home-error {
+  text-align: center;
+  padding: 70rpx 35rpx;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 26rpx;
+  margin-top: 40rpx;
+}
+.error-title {
+  font-size: 30rpx;
+  font-weight: 600;
+}
+.home-error .muted {
+  font-size: 24rpx;
+  line-height: 1.8;
+}
+.home-error button {
+  margin-top: 15rpx;
+  min-width: 300rpx;
+}
+.refresh-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 22rpx;
+  background: #fff0e2;
+  color: #886c5f;
+  padding: 20rpx 24rpx;
+  border-radius: 22rpx;
+  margin-bottom: 20rpx;
+}
+.refresh-hint {
+  text-align: center;
+  font-size: 22rpx;
+  color: #a48d7e;
+  margin-bottom: 20rpx;
+}
+.first-pet {
+  padding-top: 30rpx;
+}
+.first-pet-title {
+  font-size: 27rpx;
+  font-weight: 600;
+  margin-bottom: 12rpx;
+}
+.first-pet .muted {
+  font-size: 23rpx;
+  line-height: 1.8;
+}

pets-fe/utils/api.js

@@ -6,23 +6,29 @@ function request(path, method = "GET", data, auth = true) {
       url: baseURL + path,
       method,
       data,
+      timeout: 15000,
       header: token && auth ? { Authorization: "Bearer " + token } : {},
       success(res) {
         if (res.data && res.data.code === 0) resolve(res.data.data);
         else {
-          if (res.statusCode === 401) {
-            wx.removeStorageSync("pet_token");
-            getApp().globalData.token = "";
-          }
+          if (res.statusCode === 401 && auth) invalidateToken(token);
           const error = new Error((res.data && res.data.message) || "请求失败");
           error.status = res.statusCode;
           reject(error);
         }
       },
-      fail: reject,
+      fail: () => reject(new Error("网络连接失败，请检查网络后重试")),
     });
   });
 }
+function invalidateToken(usedToken) {
+  const app = getApp();
+  // A late response using the old token must not clear a newly refreshed session.
+  if (app.globalData.token && app.globalData.token !== usedToken) return;
+  wx.removeStorageSync("pet_token");
+  app.globalData.token = "";
+  app.globalData.user = null;
+}
 async function secure(path, method, data) {
   await getApp().login();
   try {
@@ -53,6 +59,7 @@ function uploadOnce(path) {
           else {
             const error = new Error(body.message || "上传失败");
             error.status = res.statusCode;
+            if (res.statusCode === 401) invalidateToken(token);
             reject(error);
           }
         } catch (e) {
@@ -69,8 +76,6 @@ async function upload(path) {
     return await uploadOnce(path);
   } catch (error) {
     if (error.status !== 401) throw error;
-    wx.removeStorageSync("pet_token");
-    getApp().globalData.token = "";
     await getApp().login();
     return uploadOnce(path);
   }