feat: 添加记录独立成页，表单字段由后端配置驱动

## 弹层里塞 24 个表单是走不通的弹层高度受 .sheet-scroll 的 78vh 限制，字段一多就变成内滚；24 项的选择器挤在弹层里更难看（用户原话「很丑」）。整体搬成页面。 ## pages/addrecord —— 一个页面吃掉全部 24 种形态：记录宠物 / 记录时间 / 类型专属字段 / 描述 + 照片 / 底部固定保存键。关键在「类型专属字段」整段是后端驱动的：前端不认识「体重」「金额」这些业务词，只认识 number / options / text 三种渲染方式，以及每个字段的值该落到哪儿。 record_types 加了 fields 列，后台用紧凑写法配（一行一个）： number:体重:kg 数值 → num_value options:状态:正常|软便|拉稀单选 → category options:症状:呕吐|拉稀|精神差:- 末尾 - 表示不落 category，只进标题 text:吃了什么文本 → 只进标题（空）只要时间+描述+照片解析放服务端不放前端：配错了要在后台保存时就报出来（第几行、错在哪），不能等用户点开表单才发现渲染不出东西。读取时解析失败只让这一种事项没有额外字段并打 warn，不让一条烂配置把整个记录页打空。 ## 那个 - 开关不是过度设计异常观察有两个单选（症状 + 严重程度），而 category 只有一个坑，周报的高风险数按 category='高' 统计（report.go:46）——必须能指定谁占这个坑。同理账单按 cost 的 category 分组聚合（report.go:134），食便相关性排除 poop 的 category='正常'。这三处口径都得严丝合缝对上。 ## 记录页瘦成纯列表只留分组宫格。健康洞察 / 体重趋势 / 健康时间轴整页搬到 pages/history，从报告页「记录与趋势」进——报告页才是看数据的地方，而一个「我要记一笔」的页面上摆三块只读图表，用户每次都得先滚过去才能找到要点的东西。 **没有直接删掉那三块**：时间轴是唯一能看和删历史记录的地方，报告页只有周报/账单这些聚合。删了用户就再也看不到自己记过什么。搬页面用的是 git 里改动前的完整版复制，比往 report.js 里合并代码安全。 ## 弹层瘦了一圈 9 个记录分支删掉，连带 17 个方法、SIMPLE_HINT、buildRecord 的 7 个 case 和一批只有它们在用的 data 字段。 js 1089 → 857 行 wxml 480 → 335 行弹层现在只管「不是记一笔」的事：提醒、海报、档案、发帖、评论、导出、反馈。 buildRecord 只剩 vetSummary 一个分支（它写一条 note 留痕，不是用户填的表单）。 ## 验证（预生产库实跑） 24 种的字段配置逐个核对解析结果，然后照 addrecord 的 buildBody 组装落库：体重 title='体重：4.6kg' num=4.6 → 宠物档案回写成 4.6kg ✓ 记账 title='记账：128元医疗' num=128 cat=医疗 → 账单 total=128 分类[(医疗,128)] ✓ 异常 title='异常：呕吐高' cat=高 → 周报 high_risk_count=1 ✓ 排便 cat=软便食便相关性口径保住饮食 title='饮食：幼猫粮 45g 偏少' cat=偏少喝水 num=180（新类型带数值，老代码没有它的分支也不影响）洗澡 title='洗澡'（无额外字段）看病 num=320（两个字段：文本+数值）体重趋势 1 个点、值 4.6，没被其他 7 条污染。回填踩过一次坑：fields 列是服务启动时 AutoMigrate 才建的，我在启动前就跑了回填，Update 报错被忽略、13 行静默没写进去。第二版加了 HasColumn 前置检查和逐行错误统计才发现。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-30 10:25:42 +08:00
parent 29d2cd3faf
commit 3ea50efb7d
23 changed files with 906 additions and 777 deletions
@@ -0,0 +1,264 @@
+const store = require('../../utils/store.js');
+const api = require('../../utils/api.js');
+const { toastErr } = require('../../utils/ui.js');
+
+function pad(n) {
+  return n < 10 ? '0' + n : '' + n;
+}
+function fmtTime(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  const now = new Date();
+  const hm = pad(d.getHours()) + ':' + pad(d.getMinutes());
+  if (d.toDateString() === now.toDateString()) return '今天 ' + hm;
+  const y = new Date(now.getTime() - 86400000);
+  if (d.toDateString() === y.toDateString()) return '昨天 ' + hm;
+  return d.getMonth() + 1 + '月' + d.getDate() + '日';
+}
+// 记录类型 → 配色。和首页快速记录入口用同一套分组：
+// 体重/疫苗=橙、便便/饮食=绿、异常/用药=蓝、消费/照片=紫
+// 时间轴每条记录的色调。这页只读历史，不需要整份类型表，
+// 但仍要按分组着色——所以引一份轻量的 code→组 映射
+const recordTypes = require('../../utils/recordTypes.js');
+function toneOf(type) {
+  const t = recordTypes.get(type);
+  return (t && t.tone) || 'tone-1';
+}
+
+// 「记一笔」的入口不再写死在这里：类型和分组由后端 record_types 表提供
+// （后台可配），前端只负责渲染。utils/recordTypes.js 是两处共用的缓存。
+
+function mapRecord(r) {
+  return {
+    id: r.id,
+    // 图标按 type 取（9 值枚举，可靠）；老数据 icon 字段里的 emoji 只作兜底
+    type: r.type || r.icon || '',
+    tone: toneOf(r.type),
+    title: r.title,
+    desc: fmtTime(r.occurred_at) + (r.description ? '｜' + r.description : ''),
+    image: r.image_url || '',
+  };
+}
+
+// 时间轴类型筛选
+const REC_FILTERS = [
+  { key: '', label: '全部' },
+  { key: 'weight', label: '体重' },
+  { key: 'poop', label: '便便' },
+  { key: 'food', label: '饮食' },
+  { key: 'symptom', label: '异常' },
+  { key: 'medicine', label: '用药' },
+  { key: 'vaccine', label: '疫苗' },
+  { key: 'cost', label: '消费' },
+  { key: 'photo', label: '照片' },
+];
+
+function fmtDay(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  return d.getMonth() + 1 + '月' + d.getDate() + '日';
+}
+
+// 用真实体重点生成趋势图：返回 { svg(折线), dots(可点圆点，坐标为百分比) }
+function buildChart(points) {
+  const vals = points.map((p) => Number(p.value) || 0);
+  const W = 300, H = 100, pad = 12, n = vals.length;
+  let min = Math.min.apply(null, vals);
+  let max = Math.max.apply(null, vals);
+  if (max === min) max = min + 1;
+  const xs = (i) => (n === 1 ? W / 2 : pad + ((W - 2 * pad) * i) / (n - 1));
+  const ys = (v) => H - pad - ((H - 2 * pad) * (v - min)) / (max - min);
+  const pts = vals.map((v, i) => xs(i).toFixed(1) + ',' + ys(v).toFixed(1)).join(' ');
+  const svg =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">' +
+    '<polyline points="' + pts + '" fill="none" stroke="#73BE9D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>' +
+    '</svg>';
+  const dots = points.map((p, i) => ({
+    xp: Number(((xs(i) / W) * 100).toFixed(2)),
+    yp: Number(((ys(vals[i]) / H) * 100).toFixed(2)),
+    value: vals[i],
+    date: fmtDay(p.occurred_at),
+    note: p.note || '',
+    delta: i > 0 ? Number((vals[i] - vals[i - 1]).toFixed(2)) : null,
+  }));
+  return { svg: 'data:image/svg+xml,' + encodeURIComponent(svg), dots };
+}
+
+// 洞察等级 → 图标。alert 用警告号，其余按类别给
+const INS_ICON = { alert: 'warn', warn: 'warn', info: 'trend' };
+function mapInsight(i) {
+  return { ...i, icon: i.level === 'info' ? (INS_ICON.info) : INS_ICON.alert };
+}
+
+const REC_PAGE = 6;
+
+Page({
+  data: {
+    pet: {},
+    timeline: [],
+    recPage: 1,
+    recTotal: 0,
+    recHasMore: false,
+    recFilters: REC_FILTERS,
+    recFilterIdx: 0,
+    insights: [],
+    trendSvg: '',
+    trendStats: null,
+    trendDots: [],
+    selDot: null,
+    selIdx: -1,
+    sheetShow: false,
+    sheetType: '',
+  },
+  onLoad() {
+    this._unsub = store.subscribe((pet) => {
+      this.setData({ pet });
+      if (!this._inited) return; // 首次由 onShow 加载
+      this.loadRecords();
+    });
+  },
+  onUnload() {
+    if (this._unsub) this._unsub();
+  },
+  onShow() {
+    // 时间轴的分组配色要读类型缓存。这页可能是从报告页直接进来的，
+    // 缓存没经过首页/记录页热过，所以自己拉一次（load 内部只会真请求一次）
+    recordTypes.load().then(() => this.setData({ timeline: this.data.timeline })).catch(() => {});
+    store
+      .ready()
+      .then(() => {
+        this._inited = true;
+        this.setData({ pet: store.getPet() });
+        this.loadRecords();
+      })
+      .catch((e) => wx.showToast({ title: e.message || '加载失败', icon: 'none' }));
+  },
+  curFilter() {
+    return this.data.recFilters[this.data.recFilterIdx].key;
+  },
+  // 来自 seg-tabs 的 change 事件
+  onFilterTap(e) {
+    const i = Number(e.detail.index);
+    if (i === this.data.recFilterIdx) return;
+    this.setData({ recFilterIdx: i }, () => this.loadRecords());
+  },
+  // 长按删除一条记录
+  onDeleteRecord(e) {
+    const r = this.data.timeline[e.currentTarget.dataset.index];
+    if (!r || !r.id) return;
+    wx.showModal({
+      title: '删除记录',
+      content: '确定删除「' + r.title + '」？删除后不可恢复。',
+      confirmColor: '#D9534F',
+      success: (res) => {
+        if (!res.confirm) return;
+        api
+          .deleteRecord(r.id)
+          .then(() => {
+            wx.showToast({ title: '已删除', icon: 'success' });
+            this.loadRecords();
+          })
+          .catch((err) => wx.showToast({ title: err.message || '删除失败', icon: 'none' }));
+      },
+    });
+  },
+  // 健康洞察：把散落的记录变成结论。点一条直接跳到对应的记录入口
+  loadInsights() {
+    const id = store.currentPetId();
+    if (!id) return this.setData({ insights: [] });
+    api
+      .petInsights(id)
+      .then((list) => this.setData({ insights: (list || []).map(mapInsight) }))
+      .catch(() => this.setData({ insights: [] }));
+  },
+  onTapInsight(e) {
+    const it = this.data.insights[e.currentTarget.dataset.index];
+    if (it && it.action) this.openSheetType(it.action);
+  },
+  loadRecords() {
+    const id = store.currentPetId();
+    if (!id) return;
+    api
+      .getRecords(id, { page: 1, pageSize: REC_PAGE, type: this.curFilter() })
+      .then((res) => {
+        const list = (res.list || []).map(mapRecord);
+        this.setData({ timeline: list, recPage: 1, recTotal: res.total || 0, recHasMore: list.length < (res.total || 0) });
+      })
+      .catch((e) => toastErr(e));
+    this.loadTrend();
+    this.loadInsights();
+  },
+  loadMoreRecords() {
+    const id = store.currentPetId();
+    if (!id) return;
+    const next = this.data.recPage + 1;
+    api
+      .getRecords(id, { page: next, pageSize: REC_PAGE, type: this.curFilter() })
+      .then((res) => {
+        const merged = this.data.timeline.concat((res.list || []).map(mapRecord));
+        this.setData({ timeline: merged, recPage: next, recTotal: res.total || 0, recHasMore: merged.length < (res.total || 0) });
+      })
+      .catch(() => {});
+  },
+  collapseRecords() {
+    this.loadRecords();
+  },
+  loadTrend() {
+    const id = store.currentPetId();
+    if (!id) {
+      this.setData({ trendSvg: '', trendStats: null, trendDots: [], selDot: null, selIdx: -1 });
+      return;
+    }
+    api
+      .weightTrend(id)
+      .then((points) => {
+        points = points || [];
+        if (points.length < 2) {
+          this.setData({ trendSvg: '', trendStats: null, trendDots: [], selDot: null, selIdx: -1 });
+          return;
+        }
+        const vals = points.map((p) => Number(p.value) || 0);
+        const latest = vals[vals.length - 1];
+        const delta = Number((latest - vals[0]).toFixed(2));
+        const chart = buildChart(points);
+        const lastIdx = chart.dots.length - 1;
+        this.setData({
+          trendSvg: chart.svg,
+          trendDots: chart.dots,
+          selDot: chart.dots[lastIdx], // 默认选中最新一次
+          selIdx: lastIdx,
+          trendStats: { latest, delta, count: points.length },
+        });
+      })
+      .catch(() => {});
+  },
+  onTapPoint(e) {
+    const i = e.currentTarget.dataset.index;
+    this.setData({ selDot: this.data.trendDots[i], selIdx: i });
+  },
+  previewImage(e) {
+    const src = e.currentTarget.dataset.src;
+    if (src) wx.previewImage({ urls: [src], current: src });
+  },
+  openSheet(e) {
+    this.openSheetType(e.currentTarget.dataset.type);
+  },
+  openSheetType(type) {
+    this.setData({ sheetType: type, sheetShow: true });
+  },
+  closeSheet() {
+    this.setData({ sheetShow: false });
+  },
+  onSheetSaved() {
+    this.loadRecords();
+  },
+  onAddPet() {
+    this.openSheetType('addPet');
+  },
+  onShareAppMessage() {
+    return { title: '用肉垫计划记录毛孩子的成长', path: '/pages/record/record' };
+  },
+  onShareTimeline() {
+    return { title: '用肉垫计划记录毛孩子的成长' };
+  },
+});
@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "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",
+    "pt-icon": "/components/pt-icon/index",
+    "seg-tabs": "/components/seg-tabs/index"
+  }
+}
@@ -0,0 +1,75 @@
+<nav-bar title="记录与趋势" show-back="{{true}}"></nav-bar>
+
+<view class="top-bar"><pet-switch bind:add="onAddPet"></pet-switch></view>
+
+<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
+<view class="page-body no-fab">
+  <view wx:if="{{!pet.id}}" class="no-pet">
+    <view class="no-pet-ic"><pt-icon name="community" size="{{52}}"></pt-icon></view>
+    <view class="no-pet-b">还没有毛孩子的档案</view>
+    <view class="no-pet-p">建好档并记上几笔，这里就会长出趋势和洞察。</view>
+    <view class="btn btn-dark" bindtap="onAddPet"><pt-icon name="plus" size="{{30}}"></pt-icon>建一份档案</view>
+  </view>
+
+  <view wx:if="{{insights.length}}" class="card">
+    <view class="section-head"><view class="sh-title">健康洞察</view><view class="tiny">来自你的记录</view></view>
+    <view wx:for="{{insights}}" wx:key="title" class="ins ins-{{item.level}}" data-index="{{index}}" bindtap="onTapInsight">
+      <view class="ins-head">
+        <view class="ins-ic"><pt-icon name="{{item.icon}}" size="{{30}}"></pt-icon></view>
+        <view class="ins-title">{{item.title}}</view>
+      </view>
+      <view class="ins-detail">{{item.detail}}</view>
+      <view class="ins-ev">{{item.evidence}}</view>
+    </view>
+  </view>
+
+  <view class="card">
+    <view class="section-head"><view class="sh-title">体重趋势</view><view class="link" data-type="weight" bindtap="openSheet">记录</view></view>
+    <view wx:if="{{trendStats}}" class="trend-stats">最新 {{trendStats.latest}}kg · 较首次 {{trendStats.delta >= 0 ? '+' : ''}}{{trendStats.delta}}kg · 共 {{trendStats.count}} 次</view>
+    <block wx:if="{{trendSvg}}">
+      <view class="mini-chart">
+        <image class="chart-line" mode="scaleToFill" src="{{trendSvg}}"></image>
+        <view class="dot-layer">
+          <view wx:for="{{trendDots}}" wx:key="index"
+                class="dot {{selIdx === index ? 'on' : ''}}"
+                style="left:{{item.xp}}%;top:{{item.yp}}%"
+                data-index="{{index}}" bindtap="onTapPoint"></view>
+        </view>
+      </view>
+      <view wx:if="{{selDot}}" class="point-detail">
+        <view class="pd-main">
+          <text class="pd-date">{{selDot.date}}</text>
+          <text class="pd-weight">{{selDot.value}}kg</text>
+          <text wx:if="{{selDot.delta !== null}}" class="pd-delta {{selDot.delta > 0 ? 'up' : (selDot.delta < 0 ? 'down' : '')}}">{{selDot.delta > 0 ? '+' : ''}}{{selDot.delta}}kg</text>
+        </view>
+        <view wx:if="{{selDot.note}}" class="pd-note"><pt-icon name="note" size="{{26}}"></pt-icon> {{selDot.note}}</view>
+        <view wx:else class="pd-note muted">这次没有填备注</view>
+      </view>
+      <view class="chart-hint">点击圆点查看每次记录</view>
+    </block>
+    <view wx:else class="empty">先记录几次体重，这里会自动画出趋势曲线</view>
+  </view>
+
+  <view class="card">
+    <view class="section-head"><view class="sh-title">健康时间轴</view><view class="link" data-type="vetSummary" bindtap="openSheet">摘要</view></view>
+    <seg-tabs items="{{recFilters}}" current="{{recFilterIdx}}" bind:change="onFilterTap"></seg-tabs>
+
+    <view class="health-timeline">
+      <view wx:for="{{timeline}}" wx:key="id" class="health-event"
+            bindlongpress="onDeleteRecord" data-index="{{index}}">
+        <view class="event-dot {{item.tone}}"><pt-icon name="{{item.type}}" size="{{34}}" fallback="note"></pt-icon></view>
+        <view class="he-body">
+          <text class="he-b">{{item.title}}</text><view class="he-p">{{item.desc}}</view>
+          <image wx:if="{{item.image}}" class="he-img" src="{{item.image}}" mode="aspectFill" catchtap="previewImage" data-src="{{item.image}}"></image>
+        </view>
+      </view>
+      <view wx:if="{{timeline.length === 0}}" class="empty">这个分类下还没有记录</view>
+    </view>
+    <view wx:if="{{timeline.length}}" class="tl-tip">长按任意一条可删除</view>
+    <view wx:if="{{recHasMore}}" class="tl-more" bindtap="loadMoreRecords">查看更多（共 {{recTotal}} 条）</view>
+    <view wx:elif="{{recPage > 1}}" class="tl-more" bindtap="collapseRecords">收起</view>
+  </view>
+</view>
+</scroll-view>
+
+<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet" bind:saved="onSheetSaved"></bottom-sheet>
@@ -0,0 +1,59 @@
+.mini-chart{
+  height:256rpx;border-radius:var(--r-md);margin-top:var(--sp-4);position:relative;overflow:hidden;
+  background:
+    linear-gradient(180deg,rgba(115,190,157,.16),rgba(115,190,157,0)),
+    repeating-linear-gradient(0deg,#fff,#fff 60rpx,#EFE8DE 62rpx);
+}
+.chart-line{position:absolute;left:36rpx;right:36rpx;top:44rpx;bottom:44rpx;width:auto;height:auto}
+.dot-layer{position:absolute;left:36rpx;right:36rpx;top:44rpx;bottom:44rpx}
+.dot{position:absolute;width:40rpx;height:40rpx;margin:-20rpx 0 0 -20rpx;border-radius:50%;}
+.dot::after{content:'';position:absolute;left:50%;top:50%;width:18rpx;height:18rpx;margin:-9rpx 0 0 -9rpx;border-radius:50%;background:#fff;border:4rpx solid var(--green);box-sizing:border-box}
+.dot.on::after{width:26rpx;height:26rpx;margin:-13rpx 0 0 -13rpx;background:var(--green);box-shadow:0 0 0 6rpx rgba(115,190,157,.25)}
+.trend-stats{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
+
+.point-detail{
+  margin-top:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);
+  background:var(--green-soft);border:1rpx solid #DCEFE4;
+}
+.pd-main{display:flex;align-items:baseline;gap:var(--sp-3)}
+.pd-date{font-size:var(--fs-sm);color:var(--muted)}
+.pd-weight{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--green-ink)}
+.pd-delta{font-size:var(--fs-sm);font-weight:var(--fw-b)}
+.pd-delta.up{color:var(--red-ink)}
+.pd-delta.down{color:var(--green-ink)}
+.pd-note{margin-top:var(--sp-2);font-size:var(--fs-md);color:var(--text-2);line-height:1.5}
+.pd-note.muted{color:var(--muted)}
+.chart-hint{margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--muted);text-align:center}
+
+.health-timeline{display:flex;flex-direction:column;gap:var(--sp-2)}
+.health-event{display:flex;gap:var(--sp-3);background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-4)}
+/* 底色和文字色由 .tone-N 提供（记录类型决定），这里只管形状 */
+.event-dot{
+  width:64rpx;height:64rpx;border-radius:var(--r-sm);flex:none;
+  display:flex;align-items:center;justify-content:center;
+}
+.he-b{font-size:var(--fs-md);font-weight:var(--fw-b)}
+.he-p{color:var(--muted);font-size:var(--fs-sm);line-height:1.45;margin-top:6rpx}
+.he-body{flex:1;min-width:0}
+.he-img{margin-top:var(--sp-2);width:220rpx;height:220rpx;border-radius:var(--r-sm)}
+
+.tl-tip{margin-top:var(--sp-3);text-align:center;color:var(--muted);font-size:var(--fs-cap)}
+.tl-more{
+  margin-top:var(--sp-3);padding:var(--sp-3);text-align:center;color:var(--primary-dark);
+  background:var(--surface-2);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-b);
+}
+
+/* 健康洞察 */
+.ins{border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-2)}
+.ins:last-child{margin-bottom:0}
+.ins-info{background:var(--surface-2)}
+.ins-warn{background:var(--primary-soft)}
+.ins-alert{background:var(--red-soft)}
+.ins-head{display:flex;align-items:flex-start;gap:var(--sp-2)}
+.ins-ic{flex:none;margin-top:2rpx}
+.ins-info .ins-ic{color:var(--green-ink)}
+.ins-warn .ins-ic{color:var(--primary-ink)}
+.ins-alert .ins-ic{color:var(--red-ink)}
+.ins-title{flex:1;font-size:var(--fs-md);font-weight:var(--fw-b);line-height:1.4}
+.ins-detail{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;margin-top:var(--sp-2)}
+.ins-ev{color:var(--muted);font-size:var(--fs-cap);margin-top:var(--sp-2)}