图片可裁剪 · 名册按关系分组 · 个人设置独立 · 顶栏下拉菜单

① 上传图片一律可裁剪，比例由图位决定
   新增 app/ImageSlot.php 统一配置（头像 1:1/512×512；题图 16:9 只留注释，
   将来启用只加一行）。前端只挑区域、写回归一化矩形 "x,y,w,h"，真正裁剪在服务端
   Upload::fitRegion()：夹回图内 → 在框内居中收缩到目标比例（不外扩）→ 钉住 sx+sw ≤ w。
   比例解析单独写 parseRatioAttr()：parseFloat('16:9') 得 16，会把题图裁成细长条且不报错。

② 名册按关系分组，顺序每人可自定
   分类全家共用（person_groups，另一个人可以自己加分类）；「自己的」只体现在顺序上
   （user_settings.group_order，每人一份）。persons.group_id 故意不加外键（老库只能
   ADD COLUMN），完整性由 PersonGroup 保证：删分类把人置回未分类，人不会从名册消失。

③ 设置分两级：系统设置 / 个人设置
   个人设置拆成 templates/settings/me.php + _profile.php + _nicknames.php，
   取代 templates/people/me.php（旧路由与旧表单仍兼容）。

④ 右上角「姓名/头像 + 下拉菜单」
   原来是两个裸链接，窄屏会被 CSS 藏掉导致改密码/退出不可达；改成 <details> 零 JS 菜单
   （app.js 只补「点外面 / Esc」）。菜单项：个人设置 / 系统设置（管理员）/ 修改密码 / 退出登录。

Schema 版本 3 → 4；安装与老库升级共用 PersonGroup::backfillMissing() 一条回填路径。

验证：php -l 全量；e2e 202/0（新增「关系分组」与「图片裁剪」两节）；老库升级 49/0；
桌面几何 108/0；移动端几何 192/0（360/375/390/414）；交互 76/0；
反向验证 31/31（逐条把修复改回旧写法，指定的目标断言必须变红）；
部署后本地↔线上 72 个文件 sha256 逐字节一致。

templates/people/form.php

@@ -72,6 +72,24 @@ $idBd = trim((string)($person['birthday_id_card'] ?? ''));
         <span class="tip">小的排前面。</span>
       </div>
 
+      <?php /* 一个人只属于一个关系分组；分组是全家共用的一套（名册按它分栏显示），
+               但「哪一组排前面」是各人自己的习惯，在「个人设置」里调。 */ ?>
+      <div class="field">
+        <label for="group_id">关系分组</label>
+        <select class="select" id="group_id" name="group_id">
+          <option value="">未分类</option>
+          <?php foreach (($groups ?? []) as $g): $gid = (int)$g['id']; ?>
+            <option value="<?= $gid ?>"
+              <?= (int)old('group_id', $person['group_id'] ?? 0) === $gid ? 'selected' : '' ?>>
+              <?= e((string)$g['name']) ?>
+            </option>
+          <?php endforeach; ?>
+        </select>
+        <span class="tip">
+          名册会按这个分组分栏显示。分组不够用就自己在「<a href="<?= e(url('settings/me')) ?>">个人设置</a>」里加。
+        </span>
+      </div>
+
       <!-- ==================== 三个生日 ==================== -->
       <div class="field full">
         <label>生日</label>
@@ -173,10 +191,23 @@ $idBd = trim((string)($person['birthday_id_card'] ?? ''));
         <textarea class="input" id="note" name="note" placeholder="爱吃辣、对芒果过敏、怕坐过山车……"><?= e(old('note', $person['note'] ?? '')) ?></textarea>
       </div>
 
+      <?php
+      // 裁剪比例不是拍脑袋定的，而是由「这个位置显示成什么形状」决定（见 App\ImageSlot）。
+      // 前端拿这些 data-* 去生成裁剪框，服务端拿同一个槽位去最终裁切 —— 一处定义、两处使用。
+      $avSlot = \App\ImageSlot::get('avatar');
+      ?>
       <div class="field">
         <label for="avatar">头像</label>
-        <input class="input" id="avatar" name="avatar" type="file" accept="image/*">
-        <span class="tip">会自动裁成正方形，上限 5MB。</span>
+        <input class="input" id="avatar" name="avatar" type="file" accept="image/*"
+               data-crop-ratio="<?= e((string)$avSlot['ratio']) ?>"
+               data-crop-w="<?= (int)$avSlot['w'] ?>"
+               data-crop-h="<?= (int)$avSlot['h'] ?>"
+               data-crop-label="<?= e((string)$avSlot['label']) ?>"
+               data-crop-hint="<?= e((string)$avSlot['hint']) ?>"
+               data-crop-preview="#avatar-preview">
+        <?php /* 用户挑的裁剪框（归一化的，相对原图 0..1）；不裁就留空 = 居中裁切 */ ?>
+        <input type="hidden" name="avatar_crop" value="">
+        <span class="tip">选好图片后会弹出裁剪框，把要留的部分框住。<b>比例按它在页面上的形状定</b>（头像是 1:1 正方形）。上限 5MB。</span>
       </div>
       <div class="field">
         <label>当前头像</label>