style(fe): 记录页按 preview-v3 收拾干净

## 分组那片色块是个 bug，不是设计
我把 tone-{{item.tone}} 加在分组外层是为了给组标题上色，但 .tone-N 在
app.wxss 里本身就带 background（`.tone-1{background:var(--primary-soft)}`），
于是整组被涂成一片色块——和视觉稿完全不是一回事。

分组着色单独走 g-1..g-4，只管 .tg-head 的文字色。格子的浅色底仍然是
.quick + .tone-N，那是它本来的用途。

## 另外三处
  三列 → 四列（视觉稿是四列，三列一行只放三个，洗护/清洁要多滚一屏）
  去掉组右侧的数量（6/7/6/5 —— 用户不关心一个组里有几项）
  组名去掉「记录」后缀（「日常记录」在标题位置念着啰嗦，「日常」就够）

## 去掉顶部的宠物切换和添加
这页只是个事项目录，点进去才是表单。记哪只宠物在添加页里选（那页第一行
就是「记录宠物」，多宠家庭最容易记错到别的宠物身上，放在表单里才对）。
record.json 跟着去掉 pet-switch 注册。

## .tg 挪回页面级
历史页那份宫格上一批已经删了，现在只有记录页在用，全局层只放真正共用的。
哪天别的页面要用，检查器会报「跨页借用」提醒再挪上去。

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

pets-fe/app.wxss

@@ -428,6 +428,38 @@ page{scrollbar-width:none;-ms-overflow-style:none}
 }
 .follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
 
+/* ===== 关注按钮 =====
+   社区列表和关注/粉丝列表都在用。同上：两页共用的就不能留在任一页的 wxss 里 */
+.follow-btn{
+  flex:none;font-size:var(--fs-cap);font-weight:var(--fw-b);padding:6rpx var(--sp-3);border-radius:var(--r-full);
+  color:var(--primary-dark);background:var(--primary-soft);border:1rpx solid var(--primary-line);
+}
+.follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
+
+/* ===== 记录类型分组宫格 =====
+   记录页和历史页都在用。页面级 wxss 跨不了页，所以放全局。
+   组的着色走 g-1..g-4，不要复用 tone-N —— tone-N 自带背景色，
+   套在分组外层会把整块涂成色块。 */
+.tg{margin-bottom:var(--sp-5)}
+.tg:last-of-type{margin-bottom:0}
+.tg-head{
+  display:flex;align-items:center;gap:var(--sp-2);
+  font-size:var(--fs-md);font-weight:var(--fw-b);margin-bottom:var(--sp-3);
+}
+.tg-bar{width:6rpx;height:26rpx;border-radius:3rpx;background:currentColor}
+.g-1 .tg-head{color:var(--primary-ink)}
+.g-2 .tg-head{color:var(--green-ink)}
+.g-3 .tg-head{color:var(--blue-ink)}
+.g-4 .tg-head{color:var(--purple-ink)}
+
+/* ===== 关注按钮 =====
+   社区列表和关注/粉丝列表都在用。同上：两页共用的就不能留在任一页的 wxss 里 */
+.follow-btn{
+  flex:none;font-size:var(--fs-cap);font-weight:var(--fw-b);padding:6rpx var(--sp-3);border-radius:var(--r-full);
+  color:var(--primary-dark);background:var(--primary-soft);border:1rpx solid var(--primary-line);
+}
+.follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
+
 /* ===== 记录类型分组宫格 =====
    记录页和「快速记录」弹层都在用，页面级 wxss 跨不了页
    四组各一个色系，色值全走 token 的 soft/ink 二件套，没有新色。

pets-fe/pages/record/record.js

@@ -5,6 +5,13 @@ const recordTypes = require('../../utils/recordTypes.js');
 // 原来它还带着健康洞察、体重趋势、健康时间轴——那三块搬到 pages/history 了，
 // 从报告页进。一个「我要记一笔」的页面上摆着三块只读图表，
 // 用户每次都得先滚过去才能找到要点的东西。
+// tone-N 只给格子用（它自带背景色）；组标题的颜色走 g-N。
+// short 是去掉「记录」后缀的组名——「日常记录」在标题位置念着啰嗦
+const G = { 'tone-1': 'g-1', 'tone-2': 'g-2', 'tone-3': 'g-3', 'tone-4': 'g-4' };
+function decorate(g) {
+  return { ...g, g: G[g.tone] || 'g-1', short: (g.label || '').replace(/记录$/, '') };
+}
+
 Page({
   data: { pet: {}, typeGroups: [], sheetShow: false, sheetType: '' },
   onLoad() {
@@ -24,7 +31,7 @@ Page({
     if (this.data.typeGroups.length) return;
     recordTypes
       .load()
-      .then((groups) => this.setData({ typeGroups: groups }))
+      .then((groups) => this.setData({ typeGroups: groups.map(decorate) }))
       .catch(() => {});
   },
   goAdd(e) {

pets-fe/pages/record/record.json

@@ -1,7 +1,6 @@
 {
   "usingComponents": {
     "nav-bar": "/components/nav-bar/nav-bar",
-    "pet-switch": "/components/pet-switch/pet-switch",
     "bottom-sheet": "/components/bottom-sheet/bottom-sheet",
     "pt-icon": "/components/pt-icon/index"
   }

pets-fe/pages/record/record.wxml

@@ -1,7 +1,5 @@
 <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">
@@ -11,21 +9,22 @@
     <view class="btn btn-dark" bindtap="onAddPet"><pt-icon name="plus" size="{{30}}"></pt-icon>建一份档案</view>
   </view>
 
-  <!-- 记一笔：分组来自后端 record_types，后台加一种不用发版。
+  <!-- 分组来自后端 record_types，后台加一种不用发版。
-       每组一个色系，靠浅色圆底 + 分组配色出彩，图标仍是线性的 -->
+       组标记用 g-N 而不是 tone-N：tone-N 在 app.wxss 里自带背景色，
-  <view class="card">
+       加在这一层会把整组涂成一片色块（本来只想给组标题上色）。
-    <view class="section-head"><view class="sh-title">记一笔</view></view>
+       记哪只宠物在添加页里选，这页不放宠物切换——它只是个事项目录。 -->
-    <view wx:for="{{typeGroups}}" wx:key="key" class="tg {{item.tone}}">
+  <block wx:for="{{typeGroups}}" wx:key="key">
-      <view class="tg-head"><view class="tg-bar"></view>{{item.label}}<text class="tg-n">{{item.items.length}}</text></view>
+    <view class="tg {{item.g}}">
-      <view class="quick-grid cols-3">
+      <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>
       </view>
     </view>
-    <view wx:if="{{!typeGroups.length}}" class="empty">还没有配置可记事项</view>
+  </block>
-  </view>
+  <view wx:if="{{!typeGroups.length}}" class="empty lg">还没有配置可记事项</view>
 </view>
 </scroll-view>
 

pets-fe/pages/record/record.wxss

@@ -1,3 +1,3 @@
-/* 分组宫格的样式在 app.wxss（记录页和历史页都用过，页面级 wxss 跨不了页）。
+
-   趋势图和时间轴的样式跟着那三块一起搬到 pages/history 了。
+
-   这页只剩「没建档」的空态，那套也在 app.wxss。 */
+/* 格子里的图标容器就是 .quick + .tone-N（app.wxss），这里不重复定义 */