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

① 上传图片一律可裁剪，比例由图位决定
   新增 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>

templates/people/index.php

@@ -1,6 +1,105 @@
+<?php
+/**
+ * 家庭名册 —— 按「关系分组」分栏显示。
+ *
+ * 两个刻意的设计：
+ *   ① **分栏顺序由看的人自己定**（$groups 已经是"按我的习惯排好"的顺序，
+ *      见 App\PersonGroup::orderFor）—— 所以我看到的「家人」在第一栏，
+ *      妈妈可以把「亲戚」挪到第一栏，两个人相安无事。
+ *   ② 分类是全家共用的一套，所以**改一个人的分组是全家的信息**，
+ *      这里只有能写的人（管理员 / 家庭成员）才看得到那一行「调整分组」。
+ *
+ * ⚠️ 卡片结构是 div > a + details，**不能写成 a > form**：
+ *    表单套在链接里是非法 HTML，浏览器会把 DOM 拆开，表单里那个「移动」按钮
+ *    可能连提交机会都没有（或者把整张卡片点成跳转）。
+ */
+$canMove = \App\Auth::canWrite();
+$total   = 0;
+foreach ($grouped as $list) {
+    $total += count($list);
+}
+
+/**
+ * 画一栏人。用闭包是因为"分好组的各栏"和"未分类"两处要画同一套卡片，
+ * 复制一遍迟早会改漏一处。
+ */
+$renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
+    if (!$list) {
+        return;
+    }
+    ?>
+    <div class="people-grid">
+      <?php foreach ($list as $p): ?>
+        <?php
+        // 显示名走「我怎么称呼他」：同一个孩子，爸爸看到"儿子"、妈妈看到"小宝"。
+        // ⚠️ 不要再读 $p['nickname'] —— 那是已废弃的旧列（全家共用一个小名）。
+        $pshow = (string)($p['shown'] ?? '');
+        if ($pshow === '') {
+            $pshow = (string)$p['name'];
+        }
+        $pNick = (string)($p['my_nickname'] ?? '');
+        $pid   = (int)$p['id'];
+        ?>
+        <div class="person">
+          <a class="person-main" href="<?= e(url('people/show', ['id' => $pid])) ?>">
+            <div class="ph"><img src="<?= e(avatar_url($p['avatar'])) ?>" alt=""></div>
+            <div class="pb">
+              <div class="pname">
+                <?= e($pshow) ?>
+                <?php if ($pid === (int)$meId): ?><span class="badge badge-me">我</span><?php endif; ?>
+                <?php if (!empty($p['is_placeholder'])): ?><span class="badge">待确认</span><?php endif; ?>
+              </div>
+              <div class="pmeta">
+                <?php if (!empty($p['label']) && $p['label'] !== '我'): ?>
+                  <span class="rel-label"><?= e($p['label']) ?></span>
+                <?php endif; ?>
+                <?php
+                $r = $p['account_role'] ?? '';
+                if ($r === 'admin' && ($p['account_status'] ?? '') === 'active') {
+                    echo '<span class="badge badge-admin">管理员</span>';
+                } elseif ($r === 'guest') {
+                    echo '<span class="badge">访客</span>';
+                } elseif (!empty($p['account_id'])) {
+                    echo '<span class="badge badge-open">已开通</span>';
+                }
+                // 我叫他别的名字时，把本名再用小字附上，免得自己都认不出这人是谁
+                if ($pNick !== '' && $pNick !== (string)$p['name']) {
+                    echo ' · <span class="muted">' . e((string)$p['name']) . '</span>';
+                }
+                ?>
+              </div>
+            </div>
+          </a>
+          <?php if ($canMove): ?>
+            <details class="person-more">
+              <summary>调整分组</summary>
+              <form method="post" action="<?= e(url('people/group')) ?>" class="person-move">
+                <?= csrf_field() ?>
+                <input type="hidden" name="person_id" value="<?= $pid ?>">
+                <label class="sr-only" for="pg<?= $pid ?>">分组</label>
+                <select class="select" id="pg<?= $pid ?>" name="group_id">
+                  <option value="">未分类</option>
+                  <?php foreach ($groups as $g): $gid = (int)$g['id']; ?>
+                    <option value="<?= $gid ?>"
+                      <?= (int)($p['group_id'] ?? 0) === $gid ? 'selected' : '' ?>>
+                      <?= e((string)$g['name']) ?>
+                    </option>
+                  <?php endforeach; ?>
+                </select>
+                <button class="btn btn-ghost btn-sm" type="submit">移动</button>
+              </form>
+            </details>
+          <?php endif; ?>
+        </div>
+      <?php endforeach; ?>
+    </div>
+    <?php
+};
+?>
+
 <div class="page-head">
   <h1>家庭名册</h1>
-  <span class="sub">共 <?= count($people) ?> 人</span>
+  <span class="sub">共 <?= $total ?> 人<?= $groups && $q === '' ? '，分 ' . count($groups) . ' 个关系分组' : '' ?></span>
   <div class="actions">
     <?php if (\App\Auth::isAdmin()): ?>
       <a class="btn btn-sm" href="<?= e(url('people/new')) ?>">添加成员</a>
@@ -22,47 +121,42 @@
     <b><?= $q !== '' ? '没有匹配的人' : '名册还是空的' ?></b>
     <?= $q !== '' ? '换个词试试。' : '把家里人加进来，之后观影、旅行的同行人就可以直接从名册里选。' ?>
   </div>
+<?php elseif ($q !== ''): ?>
+  <?php /* 搜索时按"命中的人"平铺 —— 分栏会把一次搜索拆成一堆只有一两个人的碎块，反而更难看 */ ?>
+  <p class="small muted" style="margin:0 0 12px">
+    找到 <?= count($people) ?> 个匹配「<?= e($q) ?>」的人（搜索时不分组）。
+  </p>
+  <?php $renderGrid($people); ?>
 <?php else: ?>
-  <div class="people-grid">
-    <?php foreach ($people as $p): ?>
-      <?php
-      // 显示名走「我怎么称呼他」：同一个孩子，爸爸看到"儿子"、妈妈看到"小宝"。
-      // ⚠️ 不要再读 $p['nickname'] —— 那是已废弃的旧列（全家共用一个小名）。
-      $pshow = (string)($p['shown'] ?? '');
-      if ($pshow === '') {
-          $pshow = (string)$p['name'];
-      }
-      $pNick = (string)($p['my_nickname'] ?? '');
-      ?>
-      <a class="person" href="<?= e(url('people/show', ['id' => (int)$p['id']])) ?>">
-        <div class="ph"><img src="<?= e(avatar_url($p['avatar'])) ?>" alt=""></div>
-        <div class="pb">
-          <div class="pname">
-            <?= e($pshow) ?>
-            <?php if ((int)$p['id'] === (int)$meId): ?><span class="badge badge-me">我</span><?php endif; ?>
-            <?php if (!empty($p['is_placeholder'])): ?><span class="badge">待确认</span><?php endif; ?>
-          </div>
-          <div class="pmeta">
-            <?php if (!empty($p['label']) && $p['label'] !== '我'): ?>
-              <span class="rel-label"><?= e($p['label']) ?></span>
-            <?php endif; ?>
-            <?php
-            $r = $p['account_role'] ?? '';
-            if ($r === 'admin' && ($p['account_status'] ?? '') === 'active') {
-                echo '<span class="badge badge-admin">管理员</span>';
-            } elseif ($r === 'guest') {
-                echo '<span class="badge">访客</span>';
-            } elseif (!empty($p['account_id'])) {
-                echo '<span class="badge badge-open">已开通</span>';
-            }
-            // 我叫他别的名字时，把本名再用小字附上，免得自己都认不出这人是谁
-            if ($pNick !== '' && $pNick !== (string)$p['name']) {
-                echo ' · <span class="muted">' . e((string)$p['name']) . '</span>';
-            }
-            ?>
-          </div>
-        </div>
-      </a>
-    <?php endforeach; ?>
-  </div>
+  <?php foreach ($groups as $g): ?>
+    <?php
+    $gid  = (int)$g['id'];
+    $list = $grouped[$gid] ?? [];
+    // 空分组不画 —— 七个预置分类里家里可能只用到三个，
+    // 把空栏也摊出来会让名册看上去破破烂烂的
+    if (!$list) {
+        continue;
+    }
+    ?>
+    <section class="group-block">
+      <h2 class="group-head">
+        <span class="group-title"><?= e((string)$g['name']) ?></span>
+        <span class="group-n"><?= count($list) ?> 人</span>
+      </h2>
+      <?php $renderGrid($list); ?>
+    </section>
+  <?php endforeach; ?>
+
+  <?php if (!empty($grouped[0])): ?>
+    <section class="group-block">
+      <h2 class="group-head">
+        <span class="group-title">未分类</span>
+        <span class="group-n"><?= count($grouped[0]) ?> 人</span>
+      </h2>
+      <p class="small muted" style="margin:-4px 0 12px">
+        这些人还没归到任何分组里。管理员可以在卡片下面直接选一个分组（或去「编辑成员」里改）。
+      </p>
+      <?php $renderGrid($grouped[0]); ?>
+    </section>
+  <?php endif; ?>
 <?php endif; ?>

templates/people/me.php

@@ -1,189 +0,0 @@
-<?php
-/**
- * 「我的资料」—— 每个人自己的页面。
- *
- * 从顶栏的头像/名字一点就到，不用再绕「名册 → 找到自己 → 编辑资料」三步。
- *
- * 这里只放**属于我自己的**东西：
- *   · 我的姓名、性别、头像、联系方式、备注
- *   · 我的三个生日（身份证生日只读，由证件推导）
- *   · 我的 slogan（没填就用家庭统一的那句）
- *   · **我怎么称呼别人** —— 这是视角属性，只有我自己能定，改了也只影响我自己看到的
- * 排行、排序号、虚拟人物标记、以及会牵动身份证生日的身份证号，
- * 都属于"管理员编名册"，不在这里（这也是为了不让一次自助提交悄悄改掉这些）。
- */
-$p         = $person;
-$isSelf    = true;
-$avatarUrl = avatar_url($p['avatar'] ?? null);
-$bdSource  = old('birthday_source', 'solar');
-$idBd      = trim((string)($p['birthday_id_card'] ?? ''));
-
-// 我已设过的称呼：target_id => nickname
-$myNicks = [];
-foreach ($nicknames as $n) {
-    $myNicks[(int)$n['target_id']] = (string)$n['nickname'];
-}
-?>
-
-<div class="page-head">
-  <h1>我的资料</h1>
-  <span class="sub">你自己看到的样子 · 别人看到你的名字不变</span>
-  <div class="actions">
-    <a class="btn btn-ghost btn-sm" href="<?= e(url('auth/password')) ?>">改密码</a>
-    <a class="btn btn-ghost btn-sm" href="<?= e(url('people/show', ['id' => (int)$p['id']])) ?>">看我的详情页</a>
-  </div>
-</div>
-
-<form method="post" enctype="multipart/form-data" action="<?= e(url('people/me_save')) ?>">
-  <?= csrf_field() ?>
-  <div class="card card-pad">
-    <div class="form-grid">
-
-      <div class="field">
-        <label for="name">姓名 *</label>
-        <input class="input" id="name" name="name" value="<?= e(old('name', $p['name'])) ?>" required>
-        <?php if (!empty($errors['name'])): ?><span class="err"><?= e($errors['name']) ?></span><?php endif; ?>
-      </div>
-
-      <div class="field">
-        <label for="gender">性别</label>
-        <select class="select" id="gender" name="gender">
-          <?php $g = old('gender', $p['gender'] ?? ''); ?>
-          <option value=""   <?= $g === ''  ? 'selected' : '' ?>>不填</option>
-          <option value="m"  <?= $g === 'm' ? 'selected' : '' ?>>男</option>
-          <option value="f"  <?= $g === 'f' ? 'selected' : '' ?>>女</option>
-        </select>
-      </div>
-
-      <div class="field full">
-        <label for="slogan">我的一句话</label>
-        <input class="input" id="slogan" name="slogan" maxlength="200"
-               value="<?= e(old('slogan', $p['slogan'] ?? '')) ?>"
-               placeholder="留空就用家庭统一的那句：<?= e($familyMotto !== '' ? $familyMotto : '（还没设）') ?>">
-        <span class="tip">显示在你自己的首页标题下面。</span>
-        <?php if (!empty($errors['slogan'])): ?><span class="err"><?= e($errors['slogan']) ?></span><?php endif; ?>
-      </div>
-
-      <!-- ==================== 我的三个生日 ==================== -->
-      <div class="field full">
-        <label>我的生日</label>
-        <p class="small muted" style="margin:0 0 12px">
-          身份证上的那个由证件推导，<b>系统永远不会改它</b>；
-          下面两个是"实际过的阳历生日"和"长辈记的农历生日"。
-          改其中任意一个，另一个会自动跟着变。
-        </p>
-
-        <div class="field" style="margin-bottom:12px">
-          <label>身份证生日（只读）</label>
-          <span class="bd-readonly"><?= $idBd !== '' ? e($idBd) : '名册里还没填身份证号' ?></span>
-        </div>
-
-        <div class="bd-source">
-          <label for="bdSource">我这次改的是</label>
-          <select class="select" id="bdSource" name="birthday_source" style="width:auto">
-            <option value="solar" <?= $bdSource === 'solar' ? 'selected' : '' ?>>阳历（公历）</option>
-            <option value="lunar" <?= $bdSource === 'lunar' ? 'selected' : '' ?>>农历（阴历）</option>
-          </select>
-          <span class="small muted">选中的那一边为准，另一边自动算</span>
-        </div>
-
-        <div class="bd-pane" id="bdSolarWrap">
-          <p class="bd-pane-k">阳历生日</p>
-          <?php
-          $dtName    = 'birthday_solar';
-          $dtValue   = old('birthday_solar', \App\Birthday::pretty(\App\Birthday::solarOf($p)));
-          $dtId      = 'birthday_solar_date';
-          $dtRequired = false;
-          require __DIR__ . '/../_datetime.php';
-          ?>
-          <?php if (!empty($errors['birthday_solar'])): ?><span class="err"><?= e($errors['birthday_solar']) ?></span><?php endif; ?>
-        </div>
-
-        <div class="bd-pane" id="bdLunarWrap">
-          <p class="bd-pane-k">农历生日</p>
-          <?php
-          $dtName    = 'birthday_lunar';
-          $dtValue   = old('birthday_lunar', (string)($p['birthday_lunar'] ?? ''));
-          $dtId      = 'birthday_lunar_date';
-          $dtRequired = false;
-          require __DIR__ . '/../_datetime.php';
-          ?>
-          <label class="check-item" style="margin-top:8px">
-            <input type="checkbox" name="birthday_lunar_leap" value="1"
-                   <?= old('birthday_lunar_leap', $p['birthday_lunar_leap'] ?? 0) ? 'checked' : '' ?>>
-            <span>这个月是<b>闰月</b>（如「闰六月」）</span>
-          </label>
-          <?php if (!empty($errors['birthday_lunar'])): ?><span class="err"><?= e($errors['birthday_lunar']) ?></span><?php endif; ?>
-        </div>
-      </div>
-
-      <div class="field">
-        <label for="email">邮箱</label>
-        <input class="input" id="email" name="email" type="email"
-               value="<?= e(old('email', $p['email'] ?? '')) ?>">
-        <?php if (!empty($errors['email'])): ?><span class="err"><?= e($errors['email']) ?></span><?php endif; ?>
-      </div>
-
-      <div class="field">
-        <label for="address">住址</label>
-        <input class="input" id="address" name="address"
-               value="<?= e(old('address', $p['address'] ?? '')) ?>">
-      </div>
-
-      <div class="field full">
-        <label for="note">备注</label>
-        <textarea class="input" id="note" name="note"><?= e(old('note', $p['note'] ?? '')) ?></textarea>
-      </div>
-
-      <div class="field">
-        <label for="avatar">换头像</label>
-        <input class="input" id="avatar" name="avatar" type="file" accept="image/*">
-        <span class="tip">会自动裁成正方形，上限 5MB。</span>
-      </div>
-      <div class="field">
-        <label>当前头像</label>
-        <img id="avatar-preview" src="<?= e($avatarUrl) ?>" alt=""
-             style="width:88px;height:88px;border-radius:12px;object-fit:cover;border:1px solid var(--line)">
-      </div>
-
-    </div>
-
-    <div class="btn-row">
-      <button class="btn" type="submit">保存我的资料</button>
-    </div>
-  </div>
-</form>
-
-<!-- ==================== 我怎么称呼别人 ==================== -->
-<div class="card card-pad" style="margin-top:20px">
-  <h2 class="section-title">
-    我怎么称呼家人
-    <span class="hint">只影响你自己看到的叫法</span>
-  </h2>
-  <p class="small muted" style="margin:0 0 16px">
-    同一个「小明」，妈妈叫"明明"、姐姐叫"小弟" —— 称呼是**每个人各自定的**，
-    不是这个人自带的属性。所以这里改的只影响你自己的页面，别人看到的还是他们自己的叫法。
-    留空 = 恢复成用姓名显示。
-  </p>
-
-  <?php if (!$options): ?>
-    <p class="small muted" style="margin:0">名册里还没有别人。</p>
-  <?php else: ?>
-    <div class="nick-list">
-      <?php foreach ($options as $o): $oid = (int)$o['id']; ?>
-        <form method="post" action="<?= e(url('nickname/save')) ?>" class="nick-row">
-          <?= csrf_field() ?>
-          <input type="hidden" name="target_id" value="<?= $oid ?>">
-          <input type="hidden" name="back" value="people/me">
-          <span class="nick-who">
-            <img src="<?= e(avatar_url($o['avatar'] ?? '')) ?>" alt="">
-            <span><?= e((string)$o['name']) ?></span>
-          </span>
-          <input class="input" name="nickname" maxlength="50"
-                 value="<?= e($myNicks[$oid] ?? '') ?>" placeholder="我叫他/她…">
-          <button class="btn btn-ghost btn-sm" type="submit">记下</button>
-        </form>
-      <?php endforeach; ?>
-    </div>
-  <?php endif; ?>
-</div>

templates/people/show.php

@@ -52,7 +52,7 @@ $shortKind    = ['id' => '身份证生日', 'solar' => '阳历生日', 'lunar' =
   </span>
   <div class="actions">
     <?php if ($isSelf): ?>
-      <a class="btn btn-sm" href="<?= e(url('people/me')) ?>">改我自己的资料</a>
+      <a class="btn btn-sm" href="<?= e(url('settings/me')) ?>#me-profile">改我自己的资料</a>
     <?php endif; ?>
     <?php if ($canW): ?>
       <a class="btn btn-ghost btn-sm" href="<?= e(url('people/edit', ['id' => $pid])) ?>">编辑资料</a>