From c076968b2cca9606e9abb950bcd5e9b6803222fc Mon Sep 17 00:00:00 2001 From: Blizzard Date: Wed, 29 Jul 2026 10:40:09 +0800 Subject: [PATCH] =?UTF-8?q?feat(fe):=20=E9=A6=96=E9=A1=B5=E6=94=B9?= =?UTF-8?q?=E6=88=90=E5=93=81=E7=89=8C=E6=B4=BB=E6=B3=BC=E7=89=88=EF=BC=88?= =?UTF-8?q?=E6=9C=AC=E6=AC=A1=E8=AE=BE=E8=AE=A1=E8=AF=AD=E8=A8=80=E7=9A=84?= =?UTF-8?q?=E6=A0=B7=E6=9D=BF=E9=A1=B5=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 门面换成完成度环 + 状态 chip：一眼能看到「今天还剩几件事」， 原来的 hero 卡只是把宠物信息平铺，占了 340rpx 却没给出任何判断 - 快速记录 8 宫格从 emoji 换成图标 + 4 色分类（体重/疫苗=橙、 便便/饮食=绿、异常/用药=蓝、消费/照片=紫），靠颜色分组而不是靠认 emoji - AI 建议卡底部加深色 CTA，全页唯一的深色块，指明主操作 - 顶部 🔔⚙ 换成图标；日期条、任务卡、空态全部走 token - 任务列表落地时顺手算未完成数，门面文案由它驱动 后 8 页按这套语言套用，不再重新发明。 Co-Authored-By: Claude Opus 5 --- pets-fe/pages/home/home.js | 48 ++++++++++++++++++++++-- pets-fe/pages/home/home.json | 4 +- pets-fe/pages/home/home.wxml | 59 ++++++++++++++--------------- pets-fe/pages/home/home.wxss | 72 ++++++++++++++++++------------------ 4 files changed, 112 insertions(+), 71 deletions(-) diff --git a/pets-fe/pages/home/home.js b/pets-fe/pages/home/home.js index 819e3f3..22f96a7 100644 --- a/pets-fe/pages/home/home.js +++ b/pets-fe/pages/home/home.js @@ -19,11 +19,39 @@ function mapTask(t) { }; } +// 快速记录入口。颜色按类别分组（体重/疫苗=橙、便便/饮食=绿、异常/用药=蓝、消费/照片=紫）， +// 靠颜色和图标区分，不再靠 emoji。 +const QUICK_ITEMS = [ + { type: 'weight', icon: 'weight', label: '体重', tone: 'tone-1' }, + { type: 'poop', icon: 'poop', label: '便便', tone: 'tone-2' }, + { type: 'food', icon: 'food', label: '饮食', tone: 'tone-2' }, + { type: 'symptom', icon: 'symptom', label: '异常', tone: 'tone-3' }, + { type: 'cost', icon: 'cost', label: '消费', tone: 'tone-4' }, + { type: 'medicine', icon: 'medicine', label: '用药', tone: 'tone-3' }, + { type: 'photo', icon: 'photo', label: '照片', tone: 'tone-4' }, + { type: 'vaccine', icon: 'vaccine', label: '疫苗', tone: 'tone-1' }, +]; + +// 门面上的状态 chip：健康状态 + 最多两条洞察 +function heroChips(summary) { + const chips = []; + if (summary.health_status) { + chips.push({ text: summary.health_status, icon: 'check', tone: 'green' }); + } + (summary.insights || []).slice(0, 2).forEach((it) => { + if (it && it.bold) chips.push({ text: it.bold, icon: 'trend', tone: '' }); + }); + return chips; +} + Page({ data: { pet: {}, summary: { greeting: '', insights: [], week: [], advice: '', health_pct: 0, health_status: '正常' }, tasks: [], + quickItems: QUICK_ITEMS, + heroChips: [], + undoneText: '', firstArticle: null, selectedDate: '', taskLabel: '今日任务', @@ -75,7 +103,7 @@ Page({ if (!id) return; api .homeSummary(id) - .then((summary) => this.setData({ summary })) + .then((summary) => this.setData({ summary, heroChips: heroChips(summary) })) .catch((e) => toastErr(e)); }, loadTasks() { @@ -84,9 +112,19 @@ Page({ const date = this.data.selectedDate || this.data.todayDate; api .getTasks(id, date) - .then((tasks) => this.setData({ tasks: (tasks || []).map(mapTask) })) + .then((tasks) => this.setTasks((tasks || []).map(mapTask))) .catch((e) => toastErr(e)); }, + // 任务列表落地时顺手算「还有几件事没做完」，门面上要用 + setTasks(tasks) { + const undone = tasks.filter((t) => !t.done).length; + this.setData({ + tasks, + undoneText: tasks.length === 0 + ? '这天还没有安排' + : undone > 0 ? '还有 ' + undone + ' 件事没做完' : '今天的事都做完啦', + }); + }, onTapDay(e) { const { date, active } = e.currentTarget.dataset; if (!date) return; @@ -111,7 +149,9 @@ Page({ api .toggleTask(t.id) .then((res) => { - this.setData({ [`tasks[${i}].done`]: res.done }); + const tasks = this.data.tasks.slice(); + tasks[i] = Object.assign({}, tasks[i], { done: res.done }); + this.setTasks(tasks); this.loadSummary(); }) .catch(() => {}); @@ -122,7 +162,7 @@ Page({ api .completeAllTasks(id) .then((tasks) => { - this.setData({ tasks: (tasks || []).map(mapTask) }); + this.setTasks((tasks || []).map(mapTask)); this.loadSummary(); }) .catch(() => {}); diff --git a/pets-fe/pages/home/home.json b/pets-fe/pages/home/home.json index 075a8b2..55fda31 100644 --- a/pets-fe/pages/home/home.json +++ b/pets-fe/pages/home/home.json @@ -3,6 +3,8 @@ "nav-bar": "/components/nav-bar/nav-bar", "pet-switch": "/components/pet-switch/pet-switch", "bottom-sheet": "/components/bottom-sheet/bottom-sheet", - "fab": "/components/fab/fab" + "fab": "/components/fab/fab", + "pt-icon": "/components/pt-icon/index", + "stat-ring": "/components/stat-ring/index" } } diff --git a/pets-fe/pages/home/home.wxml b/pets-fe/pages/home/home.wxml index 558e5ac..4f2ff22 100644 --- a/pets-fe/pages/home/home.wxml +++ b/pets-fe/pages/home/home.wxml @@ -5,30 +5,34 @@ {{summary.greeting || '你好'}} - 今天也要照顾好 {{pet.name}} 🐾 + 今天也要照顾好 {{pet.name}} - 🔔 - ⚙ + + - - - {{pet.emoji}} - - {{pet.name}} - {{pet.age}}｜{{pet.weight}}｜{{pet.stage}} + + + + + {{summary.health_pct}}% + 完成度 + + + {{pet.name || '还没有毛孩子'}} + {{undoneText}} + + + {{item.text}} + + - {{summary.health_status || '正常'}} - 本周健康完成度{{summary.health_pct}}% - - - {{item.bold}}{{item.text}} - + {{pet.age}}｜{{pet.weight}}｜{{pet.stage}} @@ -50,11 +54,11 @@ - ✓ - {{item.title}}{{item.sub}} + + {{item.title}}{{item.sub}} {{item.priority}} - 这天没有任务记录 + 这天没有任务记录 @@ -64,23 +68,20 @@ 更多 - ⚖️体重 - 💩便便 - 🍽️饮食 - 🤒异常 - 💰消费 - 💊用药 - 📷照片 - 💉疫苗 + + {{item.label}} + - + AI 今日建议 - 问问 AI {{summary.advice || '正在生成今日建议…'}} + + 问问 AI 养宠助手 + @@ -89,7 +90,7 @@ 查看 - {{firstArticle.icon}} + {{firstArticle.title}}{{firstArticle.desc}} diff --git a/pets-fe/pages/home/home.wxss b/pets-fe/pages/home/home.wxss index 331d950..e925d76 100644 --- a/pets-fe/pages/home/home.wxss +++ b/pets-fe/pages/home/home.wxss @@ -1,51 +1,49 @@ -.top-row{display:flex;align-items:center;justify-content:space-between;margin:4rpx 0 28rpx} -.greet-h2{font-size:44rpx;line-height:1.15;letter-spacing:-.8rpx;font-weight:800} -.greet-p{font-size:26rpx;color:var(--muted);margin-top:10rpx} -.icon-stack{display:flex;gap:18rpx} +.top-row{display:flex;align-items:center;justify-content:space-between;margin:4rpx 0 var(--sp-4)} +.greet-h2{font-size:var(--fs-xl);line-height:1.15;letter-spacing:-.8rpx;font-weight:var(--fw-b)} +.greet-p{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)} +.icon-stack{display:flex;gap:var(--sp-2)} .icon-btn{ - width:80rpx;height:80rpx;border-radius:50%;background:#fff;box-shadow:var(--shadow); - font-size:36rpx;display:flex;align-items:center;justify-content:center; + width:76rpx;height:76rpx;border-radius:50%;background:#fff;box-shadow:var(--sd-1); + color:var(--text-2);display:flex;align-items:center;justify-content:center; } +/* 门面卡 */ .hero-card{ background: - radial-gradient(circle at 95% 16%, rgba(245,169,71,.25), transparent 30%), - linear-gradient(135deg,#FFFFFF,#FFF5E6); - min-height:340rpx; + radial-gradient(circle at 95% 16%, rgba(245,169,71,.22), transparent 32%), + linear-gradient(135deg,#FFFFFF,#FFF6E9); } -.pet-row{display:flex;align-items:center;gap:26rpx;margin-bottom:28rpx} -.pet-main{flex:1} -.pet-name-b{font-size:42rpx;letter-spacing:-.4rpx;font-weight:800} -.pet-meta{color:var(--muted);font-size:26rpx;margin-top:8rpx} - -.insight-row{white-space:nowrap;margin-top:24rpx} -.insight{ - display:inline-block;min-width:224rpx;border-radius:32rpx; - background:rgba(255,255,255,.72);border:1rpx solid rgba(255,255,255,.9); - padding:20rpx;font-size:24rpx;margin-right:16rpx;vertical-align:top; +.hero-row{display:flex;align-items:center;gap:var(--sp-4)} +.ring-num{font-size:var(--fs-xl);font-weight:var(--fw-b);line-height:1} +.ring-unit{font-size:var(--fs-cap)} +.ring-cap{font-size:var(--fs-cap);color:var(--muted);margin-top:4rpx} +.hero-main{flex:1;min-width:0} +.hero-title{font-size:var(--fs-lg);font-weight:var(--fw-b);letter-spacing:-.4rpx} +.hero-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:4rpx} +.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)} +.hero-meta{ + color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-3); + padding-top:var(--sp-3);border-top:1rpx solid rgba(238,230,220,.8); } -.insight-b{display:block;font-size:28rpx;margin-bottom:8rpx;font-weight:900} -.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:14rpx;margin-bottom:28rpx} +/* 一周日期条 */ +.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);margin-bottom:var(--sp-4)} .day{ - background:#fff;border-radius:32rpx;min-height:116rpx;text-align:center;padding:16rpx 8rpx; - border:1rpx solid var(--line);color:var(--muted);font-size:22rpx; + background:#fff;border-radius:var(--r-md);min-height:112rpx;text-align:center;padding:var(--sp-3) 4rpx; + border:1rpx solid var(--line);color:var(--muted);font-size:var(--fs-cap); } -.day-b{display:block;color:var(--text);font-size:30rpx;margin-top:8rpx;font-weight:700} -.day.active{border-color:#FFD39A;background:#FFF4E4;color:var(--primary-dark)} -.day.sel{border-color:var(--primary);background:#FFEFD6;color:var(--primary-dark);box-shadow:0 0 0 2rpx rgba(245,169,71,.35)} -.day.has-dot::after{content:"";display:block;width:10rpx;height:10rpx;border-radius:50%;background:var(--green);margin:8rpx auto 0} -.task-empty{padding:36rpx 8rpx;text-align:center;color:var(--muted);font-size:26rpx} +.day-b{display:block;color:var(--text);font-size:var(--fs-md);margin-top:6rpx;font-weight:var(--fw-b)} +.day.active{border-color:var(--primary-line);background:var(--primary-soft);color:var(--primary-dark)} +.day.sel{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark);box-shadow:0 0 0 2rpx rgba(245,169,71,.35)} +.day.has-dot::after{content:"";display:block;width:8rpx;height:8rpx;border-radius:50%;background:var(--green);margin:6rpx auto 0} -.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18rpx} +/* 快速记录：靠颜色分类，不靠 emoji */ +.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)} .quick{ - background:#FBFAF8;border-radius:32rpx;min-height:132rpx; - display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12rpx; - font-weight:900;color:var(--text);font-size:24rpx; + border-radius:var(--r-md);min-height:128rpx; + display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1); + font-weight:var(--fw-b);font-size:var(--fs-sm); } -.q-ic{font-size:44rpx} -.ai-banner{background:linear-gradient(135deg,#F2FAF6,#FFFFFF)} -.ai-text{color:#59635D;font-size:28rpx;line-height:1.6} - -/* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ +.ai-text{color:var(--text-2);font-size:var(--fs-md);line-height:1.6} +.ai-cta{margin-top:var(--sp-4)}