style(fe): 记录页从「肥色块」改成白卡收纳

截图那个真的丑：.quick 是 128rpx 的大方块，整格铺 tone-N 的浅色底，
四个排一行就是一片肥色块，还直接浮在页面渐变上、没有卡片收纳，
不完整的行还留大缺口，整体像一张配色测试表。

改成 preview-v3（你当时认可的那版）的做法：
  每组一张白卡收纳（.card）
  颜色只集中在图标那个 96rpx 小圆角块上（.rec-ic + tone-N）
  标签用纯深色，不跟 tone 变 —— 四组底下的字统一深灰，才不花
  组标题一根同色系竖条 + 组名

.quick / .quick-grid / .tg 现在只有记录页用，直接换成 record 页私有的
.rec-* 类，不动全局。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

pets-fe/pages/record/record.wxml

@@ -10,21 +10,21 @@
   </view>
 
   <!-- 分组来自后端 record_types，后台加一种不用发版。
-       组标记用 g-N 而不是 tone-N：tone-N 在 app.wxss 里自带背景色，
-       加在这一层会把整组涂成一片色块（本来只想给组标题上色）。
-       记哪只宠物在添加页里选，这页不放宠物切换——它只是个事项目录。 -->
+       每组一张白卡，图标收进小圆角色块（.rec-ic + .tone-N），标签用纯深色。
+       原来是整格铺 tone 底 + 浮在页面渐变上，一片肥色块。 -->
   <block wx:for="{{typeGroups}}" wx:key="key">
-    <view class="tg {{item.g}}">
-      <view class="tg-head"><view class="tg-bar"></view>{{item.short}}</view>
-      <view class="quick-grid">
-        <view wx:for="{{item.items}}" wx:for-item="t" wx:key="code" class="quick {{item.tone}}"
-              data-type="{{t.code}}" bindtap="goAdd">
-          <pt-icon name="{{t.icon}}" size="{{44}}" fallback="note"></pt-icon>{{t.label}}
+    <view class="rec-group card {{item.g}}">
+      <view class="rec-ghead"><view class="rec-bar"></view>{{item.short}}</view>
+      <view class="rec-grid">
+        <view wx:for="{{item.items}}" wx:for-item="t" wx:key="code" class="rec-item"
+              data-type="{{t.code}}" bindtap="goAdd" hover-class="rec-item-hover" hover-stay-time="60">
+          <view class="rec-ic {{item.tone}}"><pt-icon name="{{t.icon}}" size="{{46}}" fallback="note"></pt-icon></view>
+          <text class="rec-label">{{t.label}}</text>
         </view>
       </view>
     </view>
   </block>
-  <view wx:if="{{!typeGroups.length}}" class="empty lg">还没有配置可记事项</view>
+  <view wx:if="{{!typeGroups.length && pet.id}}" class="empty lg">还没有配置可记事项</view>
 </view>
 </scroll-view>
 

pets-fe/pages/record/record.wxss

@@ -1,3 +1,38 @@
+/* 记录页只有这一页在用这套分组宫格，样式就放这里（不进 app.wxss）。
+   原来是整格铺 tone 浅色底 + 直接浮在页面渐变上，四个一行是一片肥色块。
+   改成：每组一张白卡收纳，颜色只集中在图标那个小圆角块上，标签用纯深色。 */
 
+/* .card 自带 --sp-5 padding 和 margin-bottom，这里只把上下内边距收紧一点，
+   底部留白靠 card 的 margin-bottom，不再叠 margin-top */
+.rec-group{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
 
-/* 格子里的图标容器就是 .quick + .tone-N（app.wxss），这里不重复定义 */
+/* 组标题：一根同色系竖条 + 组名。颜色由外层 .g-N 决定 */
+.rec-ghead{
+  display:flex;align-items:center;gap:var(--sp-2);
+  font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);
+  margin-bottom:var(--sp-3);
+}
+.rec-bar{width:6rpx;height:28rpx;border-radius:3rpx;background:currentColor}
+.g-1 .rec-bar{color:var(--primary)}
+.g-2 .rec-bar{color:var(--green)}
+.g-3 .rec-bar{color:var(--purple)}
+.g-4 .rec-bar{color:var(--blue)}
+
+.rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4) var(--sp-2)}
+
+.rec-item{
+  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
+  padding-bottom:var(--sp-2);border-radius:var(--r-md);
+  transition:transform .06s;
+}
+.rec-item-hover{transform:scale(.94)}
+
+/* 图标的小圆角色块。tone-N（app.wxss）给它浅色底 + 深色 ink，
+   pt-icon 走 currentColor 正好染成 ink 色 */
+.rec-ic{
+  width:96rpx;height:96rpx;border-radius:26rpx;
+  display:flex;align-items:center;justify-content:center;
+}
+
+/* 标签用纯深色，不跟着 tone 变 —— 四组底下的字统一是深灰，才不花 */
+.rec-label{font-size:var(--fs-sm);color:var(--text-2);line-height:1.2}