Add immediate startup login and loading states for mini program home

2026-10-05 11:03:33 +08:00
parent 4916c31edd
commit 42aea10101
15 changed files with 623 additions and 44 deletions
@@ -0,0 +1 @@
+Component({});
@@ -0,0 +1 @@
+{ "component": true }
@@ -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>
@@ -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;
+  }
+}
@@ -0,0 +1,8 @@
+Component({
+  properties: { error: String },
+  methods: {
+    retry() {
+      this.triggerEvent("retry");
+    },
+  },
+});
@@ -0,0 +1 @@
+{ "component": true }
@@ -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>
@@ -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);
+  }
+}