From 396f5310232a040321f169929a7e80601ee52571 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Thu, 30 Jul 2026 17:57:06 +0800 Subject: [PATCH] =?UTF-8?q?feat(fe):=20=E8=82=89=E5=9E=AB=20FAB=20+=20?= =?UTF-8?q?=E5=86=B7=E5=90=AF=E5=8A=A8=E9=97=AA=E5=B1=8F=EF=BC=9B=E9=A1=B6?= =?UTF-8?q?=E9=83=A8=E7=AD=9B=E9=80=89=E6=94=B9=E7=BA=AF=E6=96=87=E5=AD=97?= =?UTF-8?q?=E5=AF=B9=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - FAB 重设计成肉垫造型（呼应「肉垫计划」），修 fab.js 漏声明 icon 属性导致的兜底文档图标；社区发帖 FAB 保持图标 - onboarding 加冷启动闪屏，登录+拉宠物在闪屏期完成再进首页， 不再闪一下建档向导；欢迎屏 logo 换肉垫、去掉过时 AI 文案 - 顶部宠物筛选去掉头像改纯文字（带图/emoji 时高度对不齐）， 固定高度 + vertical-align:middle 彻底对齐，添加用「＋」文字 Co-Authored-By: Claude Opus 5 --- pets-fe/app.wxss | 4 -- pets-fe/components/fab/fab.js | 7 ++++ pets-fe/components/fab/fab.wxml | 12 +++++- pets-fe/components/fab/fab.wxss | 23 ++++++++++++ pets-fe/components/pet-switch/pet-switch.wxml | 12 ++---- pets-fe/components/pet-switch/pet-switch.wxss | 14 ++++--- pets-fe/pages/home/home.wxml | 2 +- pets-fe/pages/onboarding/onboarding.js | 9 ++++- pets-fe/pages/onboarding/onboarding.wxml | 27 ++++++++++++-- pets-fe/pages/onboarding/onboarding.wxss | 37 ++++++++++++++++++- 10 files changed, 119 insertions(+), 28 deletions(-) diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss index 7eeaada..b418ae5 100644 --- a/pets-fe/app.wxss +++ b/pets-fe/app.wxss @@ -277,10 +277,6 @@ page{scrollbar-width:none;-ms-overflow-style:none} padding:var(--sp-2) var(--sp-4);align-items:center;gap:var(--sp-2);color:var(--muted);font-weight:var(--fw-b);font-size:var(--fs-md); } .pet-chip.active{color:var(--primary-dark);background:var(--primary-soft);border-color:var(--primary-line)} -.pet-chip .mini-avatar{ - width:52rpx;height:52rpx;border-radius:var(--r-sm);display:flex;align-items:center; - justify-content:center;background:#FFE4B7;font-size:30rpx; -} /* 任务列表 */ .task-list{display:flex;flex-direction:column;gap:var(--sp-2)} diff --git a/pets-fe/components/fab/fab.js b/pets-fe/components/fab/fab.js index f8e3323..0a094d5 100644 --- a/pets-fe/components/fab/fab.js +++ b/pets-fe/components/fab/fab.js @@ -1,5 +1,12 @@ Component({ options: { addGlobalClass: true }, + properties: { + // 之前漏声明，icon 一直没传进来，pt-icon 收到空值退到 note 兜底字形， + // 首页那个「文档」图标就是这么来的 + icon: { type: String, value: 'plus' }, + // 首页快速记录用肉垫造型（呼应「肉垫计划」），社区发帖仍用普通图标 + paw: { type: Boolean, value: false }, + }, methods: { onTap() { this.triggerEvent('tap'); diff --git a/pets-fe/components/fab/fab.wxml b/pets-fe/components/fab/fab.wxml index 4305ea7..2b85ff4 100644 --- a/pets-fe/components/fab/fab.wxml +++ b/pets-fe/components/fab/fab.wxml @@ -1 +1,11 @@ - + + + + + + + + + + + diff --git a/pets-fe/components/fab/fab.wxss b/pets-fe/components/fab/fab.wxss index 638868d..5685576 100644 --- a/pets-fe/components/fab/fab.wxss +++ b/pets-fe/components/fab/fab.wxss @@ -8,3 +8,26 @@ z-index:60; } .fab:active{transform:scale(.96)} + +/* 肉垫造型：暖橘圆钮，中间一只奶白肉垫。圆形更像脚印落下的样子， + 阴影带橘调让它从奶白背景上浮起来 */ +.fab-paw{ + width:116rpx;height:116rpx;border-radius:50%; + background:linear-gradient(150deg,#FFB865,#F5943E); + box-shadow:0 12rpx 28rpx rgba(214,138,52,.42),0 2rpx 6rpx rgba(214,138,52,.3); +} +.fab-paw:active{transform:scale(.94)} + +.paw{position:relative;width:66rpx;height:60rpx} +/* 掌垫：上窄下宽的圆角心形块，坐在下方 */ +.paw .pad{ + position:absolute;left:50%;bottom:0;transform:translateX(-50%); + width:44rpx;height:36rpx;background:#FFF7EC; + border-radius:48% 48% 44% 44%/62% 62% 40% 40%; +} +/* 四个脚趾垫，沿上方弧线排开，外侧两个更低、内侧两个更高 */ +.paw .bean{position:absolute;background:#FFF7EC;border-radius:50%} +.paw .bean-1{width:15rpx;height:20rpx;left:0;top:20rpx;transform:rotate(-20deg)} +.paw .bean-2{width:16rpx;height:22rpx;left:18rpx;top:5rpx;transform:rotate(-7deg)} +.paw .bean-3{width:16rpx;height:22rpx;right:18rpx;top:5rpx;transform:rotate(7deg)} +.paw .bean-4{width:15rpx;height:20rpx;right:0;top:20rpx;transform:rotate(20deg)} diff --git a/pets-fe/components/pet-switch/pet-switch.wxml b/pets-fe/components/pet-switch/pet-switch.wxml index 092ec9f..5ddbe39 100644 --- a/pets-fe/components/pet-switch/pet-switch.wxml +++ b/pets-fe/components/pet-switch/pet-switch.wxml @@ -1,13 +1,7 @@ + - - - {{item.emoji}} - {{item.name}} - - - 添加 - + data-id="{{item.id}}" bindtap="onPick">{{item.name}} + ＋ 添加 diff --git a/pets-fe/components/pet-switch/pet-switch.wxss b/pets-fe/components/pet-switch/pet-switch.wxss index 1340857..ea5678c 100644 --- a/pets-fe/components/pet-switch/pet-switch.wxss +++ b/pets-fe/components/pet-switch/pet-switch.wxss @@ -1,9 +1,11 @@ .pet-switch{ - display:block;white-space:nowrap;width:100%; + display:block;white-space:nowrap;width:100%;font-size:0; +} +/* chip 是 inline-flex，行内盒默认按 baseline 对齐，不同内容会高低不齐； + 统一固定高度 + vertical-align:middle，彻底对齐。父级 font-size:0 消掉 chip 间的空白基线 */ +.pet-switch .pet-chip{ + margin-right:20rpx;vertical-align:middle; + height:64rpx;padding-top:0;padding-bottom:0;font-size:var(--fs-md); } -.pet-switch .pet-chip{margin-right:20rpx} .pet-switch .pet-chip:last-child{margin-right:0} -/* flex 子项默认 min-width:auto，图片的固有尺寸(320×240)会把 chip 撑大， - 真机比模拟器更明显。flex:none 锁死成 app.wxss 里定的 52rpx 见方 */ -.mini-avatar{overflow:hidden;flex:none} -.mini-avatar-img{width:52rpx;height:52rpx;display:block} +.pet-chip-add{color:var(--muted)} diff --git a/pets-fe/pages/home/home.wxml b/pets-fe/pages/home/home.wxml index 964ee0e..dc86625 100644 --- a/pets-fe/pages/home/home.wxml +++ b/pets-fe/pages/home/home.wxml @@ -115,4 +115,4 @@ - + diff --git a/pets-fe/pages/onboarding/onboarding.js b/pets-fe/pages/onboarding/onboarding.js index 6959763..593c988 100644 --- a/pets-fe/pages/onboarding/onboarding.js +++ b/pets-fe/pages/onboarding/onboarding.js @@ -44,6 +44,7 @@ function ageFromBirthday(bdayStr) { Page({ data: { + booting: true, // 冷启动先显示闪屏，静默登录 + 拉宠物期间不闪建档向导 step: 0, petType: '猫猫', petEmoji: '🐱', @@ -68,15 +69,19 @@ Page({ }, onLoad() { this.setData({ today: today(), arrivedAt: today() }); - // 已有宠物则直接进首页 + // 闪屏期间就把登录 + 宠物拉完，保证进首页时数据已经到位。 + // 有宠物直接进首页；没有才落到建档向导。登录失败也别卡在闪屏， + // 放用户进向导（提交时会再 store.ready 重试） store .ready() .then(() => { if (store.getPets().length > 0) { wx.switchTab({ url: '/pages/home/home' }); + } else { + this.setData({ booting: false }); } }) - .catch(() => {}); + .catch(() => this.setData({ booting: false })); }, nextStep() { this.setData({ step: Math.min(this.data.step + 1, 5) }); diff --git a/pets-fe/pages/onboarding/onboarding.wxml b/pets-fe/pages/onboarding/onboarding.wxml index a798945..d9e9f93 100644 --- a/pets-fe/pages/onboarding/onboarding.wxml +++ b/pets-fe/pages/onboarding/onboarding.wxml @@ -1,3 +1,17 @@ + + + + + + + + + + 肉垫计划 + 正在准备今天的养护计划… + + + @@ -5,14 +19,20 @@ - + 肉垫计划 新手养宠的养护日历、健康记录和成长报告。先生成计划，再每天照着做。 30天新手计划 - 8类快速记录 - AI观察建议 + 24类快速记录 + 成长报告卡片 先随便看看 @@ -104,3 +124,4 @@ + diff --git a/pets-fe/pages/onboarding/onboarding.wxss b/pets-fe/pages/onboarding/onboarding.wxss index 34ed5ad..907135d 100644 --- a/pets-fe/pages/onboarding/onboarding.wxss +++ b/pets-fe/pages/onboarding/onboarding.wxss @@ -9,13 +9,46 @@ .skip-link{text-align:center;margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-md);padding:var(--sp-2)} @keyframes fade{from{opacity:0;transform:translateY(16rpx)}to{opacity:1;transform:none}} +/* 冷启动闪屏 */ +.boot{ + position:fixed;inset:0;z-index:200; + display:flex;flex-direction:column;align-items:center;justify-content:center; + background: + radial-gradient(circle at 50% 32%, rgba(253,179,92,.28), transparent 55%), + var(--bg); +} +.boot-badge{ + width:184rpx;height:184rpx;border-radius:44rpx; + background:linear-gradient(150deg,#FFB865,#F5943E); + display:flex;align-items:center;justify-content:center; + box-shadow:0 18rpx 42rpx rgba(214,138,52,.4); + animation:boot-pop .5s ease both, boot-breathe 2.4s ease-in-out .5s infinite; +} +.boot-name{margin-top:var(--sp-5);font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-1rpx} +.boot-tip{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-md)} +@keyframes boot-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}} +@keyframes boot-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10rpx)}} + .hero{text-align:center;padding:60rpx 0 var(--sp-5)} .pet-logo{ width:176rpx;height:176rpx;margin:0 auto var(--sp-5);border-radius:var(--r-lg); - background:linear-gradient(135deg,#FFE0AB,#FDB35C); - display:flex;align-items:center;justify-content:center;font-size:88rpx; + background:linear-gradient(135deg,#FFB865,#F5943E); + display:flex;align-items:center;justify-content:center; box-shadow:var(--sd-2); } + +/* 肉垫（呼应「肉垫计划」）——奶白掌垫 + 四趾垫，闪屏和欢迎屏共用 */ +.paw{position:relative;width:100rpx;height:92rpx} +.paw .pad{ + position:absolute;left:50%;bottom:0;transform:translateX(-50%); + width:66rpx;height:54rpx;background:#FFF7EC; + border-radius:48% 48% 44% 44%/62% 62% 40% 40%; +} +.paw .bean{position:absolute;background:#FFF7EC;border-radius:50%} +.paw .bean-1{width:22rpx;height:30rpx;left:0;top:30rpx;transform:rotate(-20deg)} +.paw .bean-2{width:24rpx;height:33rpx;left:27rpx;top:6rpx;transform:rotate(-7deg)} +.paw .bean-3{width:24rpx;height:33rpx;right:27rpx;top:6rpx;transform:rotate(7deg)} +.paw .bean-4{width:22rpx;height:30rpx;right:0;top:30rpx;transform:rotate(20deg)} .hero-h1{font-size:var(--fs-2xl);letter-spacing:-1.2rpx;font-weight:var(--fw-b)} .hero-sub{margin-top:var(--sp-3);line-height:1.65;color:var(--muted);font-size:var(--fs-md)}