Blizzard
15b52eebd0
## 首页 原来是任务卡 + 日期带/日历 + 接下来 + AI建议 + 快速记录 + 新手内容的堆叠， 六张聚合卡，唯独看不到「我记了什么」。改成： 宠物名片（品种·年龄·星座 + 性别徽章叠头像 + 一起生活的第 N 天） 两个入口（管理计划 / 记花销） 今日任务（有才显示） 记录时间轴 —— 竖线 + 圆点 + 卡片，往下翻，长按删 日历挪回计划页了：它本来就属于那儿。Phase B 当时把它并进首页是因为计划还是 个 tab；现在计划是二级页，日历跟着回去更合理。 情绪点那几样字段后端早就返回了，只是没人用。抽了 utils/petmeta.js： 星座七个边界（含 12/22 跨年那个）+ 天数（到家日优先于建档日， 「一起生活」说的是它到你家之后的日子）+ 性别徽章，都在 node 里跑过。 顺带 stat-ring 组件和 homeSummary 接口现在没人用了，先留着没删。 ## 两个入口取代竞品那一排 竞品是买商品/上豪车/记花销/领猫砂盆——除了记花销全是电商和广告位。 副标题给了真信息：「还有 5 件没做」「本月 ¥128」，不然就是两个没信息量的图标。 ## 计划页：用户自己能管了 后端原来只有 toggle，节点全靠内置模板生成，用户加不了自己的事。补了 POST /api/pets/:id/plan-tasks PUT /api/plan-tasks/:id DELETE /api/plan-tasks/:id 三件事值得说： **30 天边界硬拦在服务端**（dayOffset）。只在前端拦的话，改个请求就能塞一条 第 200 天的节点，日历上没有那格、它就永远不显示也删不掉。 **归属校验单独抽了 ownedPlanTask**。PUT/DELETE /plan-tasks/:id 这种按资源 id 的路由最容易漏——不校验的话拿到别人的 task id 就能改删别人的计划。验过： 别人的 token 改和删都返回「无权操作」。 **边界差一天，是验证时撞出来的**：内置模板生成到 day=30（第 31 天）， 我一开始按 0-29 卡，结果模板自己的最后一个节点（生成月度报告）落在窗口外—— 日历上没有那一格，用户看得到却改不动也删不掉。前后端都改成 [0,30]， 两边各留了一句注释指向对方，别再单方面改。 日历只画计划覆盖的 31 天，不画整月：整月会多出一堆空白格子、跨月还要翻页。 ## 花销独立成页 写的是同一张表（type='cost'，金额进 num_value、类别进 category）， 报告页的账单聚合照样认——独立页的价值在专门的录入体验和当页就有月度汇总， 不是另存一份数据。 类别预置读 record_types 里 cost 的字段配置，后台改一处这页和 addrecord 同时生效，不会出现两套类别把账单切开。另外允许自定义类别，验过「寄养」 （不在预置里）能落库、账单也认。 ## 检查器又抓到一次跨页借用 我在计划页复用了花销页的 ex-ph（placeholder 类），检查器直接报了位置。 顺手把三个页面的私有 placeholder 类统一到 app.wxss 已有的 .placeholder。 cal-* 现在首页没有了、计划页在用，也提到了 app.wxss。 ## 验证（预生产库实跑） 计划 CRUD 加/改/删 全过；空标题拒；越权改删拒 30 天边界 day=30 通过、day=31 拒、day=-1 拒 模板 day=30 现在能原地改了（修边界前会被自己的规则拒掉） 首页时间轴 8 条记录按 occurred_at 倒序，type/tone/图标都取到 两个入口副标题 「还有 5 件没做」「本月 ¥128」 花销自定义类别 「寄养」落库，账单分类变成 [(医疗,128),(寄养,60)] petmeta 星座 7 个边界 + 天数 3 种情况，node 单测全过 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
74 lines
3.3 KiB
Plaintext
74 lines
3.3 KiB
Plaintext
|
|
/* 门面卡 */
|
|
.hero-card{
|
|
background:
|
|
radial-gradient(circle at 95% 16%, rgba(245,169,71,.22), transparent 32%),
|
|
linear-gradient(135deg,#FFFFFF,#FFF6E9);
|
|
}
|
|
|
|
/* 一周日期条 */
|
|
|
|
|
|
/* ===== 日期带（原计划页「日历」tab 并过来） ===== */
|
|
/* 某天的安排 */
|
|
.dd-title{font-weight:var(--fw-b);font-size:var(--fs-md);margin-bottom:var(--sp-3)}
|
|
|
|
/* ===== 接下来 ===== */
|
|
|
|
/* ===== 门面：宠物名片 ===== */
|
|
.hero-card{padding:var(--sp-5)}
|
|
.hero-row{display:flex;align-items:center;gap:var(--sp-4)}
|
|
.hero-av{
|
|
position:relative;flex:none;width:128rpx;height:128rpx;border-radius:50%;
|
|
background:var(--primary-soft);display:flex;align-items:center;justify-content:center;
|
|
font-size:60rpx;overflow:visible;
|
|
}
|
|
.hero-av-img{width:100%;height:100%;border-radius:50%}
|
|
/* 性别徽章叠在头像右下：一个很省事但很出效果的细节 */
|
|
.hero-sex{
|
|
position:absolute;right:-4rpx;bottom:-4rpx;width:42rpx;height:42rpx;border-radius:50%;
|
|
border:4rpx solid #fff;color:#fff;font-size:22rpx;line-height:1;
|
|
display:flex;align-items:center;justify-content:center;
|
|
}
|
|
.hero-sex.male{background:#5B9BE8}
|
|
.hero-sex.female{background:#EE85A8}
|
|
.hero-main{flex:1;min-width:0}
|
|
.hero-title{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--text)}
|
|
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);margin-top:6rpx}
|
|
.hero-arrow{flex:none;color:var(--muted2);display:flex;align-items:center}
|
|
.hero-days{
|
|
margin-top:var(--sp-4);background:var(--primary-soft);color:var(--primary-ink);
|
|
border-radius:var(--r-md);text-align:center;padding:var(--sp-3);
|
|
font-size:var(--fs-md);font-weight:var(--fw-b);
|
|
}
|
|
.hd-n{font-size:var(--fs-lg);margin:0 4rpx}
|
|
|
|
/* ===== 两个入口 ===== */
|
|
.entry-card{display:flex;padding:var(--sp-5) var(--sp-3)}
|
|
.entry{flex:1;display:flex;flex-direction:column;align-items:center;gap:6rpx}
|
|
.entry-ic{
|
|
width:96rpx;height:96rpx;border-radius:var(--r-md);
|
|
display:flex;align-items:center;justify-content:center;margin-bottom:4rpx;
|
|
}
|
|
.entry-b{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
|
|
.entry-p{font-size:var(--fs-cap);color:var(--muted)}
|
|
|
|
/* ===== 记录时间轴 ===== */
|
|
.tl-head{display:flex;align-items:center;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-3)}
|
|
.tl-item{display:flex;gap:var(--sp-3)}
|
|
.tl-rail{flex:none;width:56rpx;display:flex;flex-direction:column;align-items:center}
|
|
.tl-dot{
|
|
width:56rpx;height:56rpx;border-radius:50%;flex:none;
|
|
display:flex;align-items:center;justify-content:center;
|
|
}
|
|
/* 竖线连起来才像一条时间轴；最后一条的线会被 body 的高度自然截断 */
|
|
.tl-line{flex:1;width:2rpx;background:var(--line);margin:6rpx 0}
|
|
.tl-item:last-of-type .tl-line{display:none}
|
|
.tl-body{flex:1;min-width:0;padding-bottom:var(--sp-4)}
|
|
.tl-when{font-size:var(--fs-cap);color:var(--muted);margin-bottom:6rpx}
|
|
.tl-card{background:#fff;border-radius:var(--r-md);box-shadow:var(--sd-1);padding:var(--sp-4)}
|
|
.tl-title{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
|
|
.tl-desc{font-size:var(--fs-sm);color:var(--text-2);margin-top:6rpx;line-height:1.5}
|
|
.tl-img{width:100%;height:320rpx;border-radius:var(--r-sm);margin-top:var(--sp-3);display:block}
|
|
.tl-more{text-align:center;padding:var(--sp-4);font-size:var(--fs-sm);color:var(--muted)}
|