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

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

@@ -53,7 +53,7 @@ $shortKind = ['id' => '身份证生日', 'solar' => '阳历生日', 'lunar' => '
         <span class="motto-from">我的一句话</span>
       <?php endif; ?>
       <?php if ($me): ?>
-        <a class="motto-edit" href="<?= e(url('people/me')) ?>"><?= $mottoIsMine ? '改' : '写一句我自己的' ?></a>
+        <a class="motto-edit" href="<?= e(url('settings/me')) ?>#me-profile"><?= $mottoIsMine ? '改' : '写一句我自己的' ?></a>
       <?php endif; ?>
     </p>
   </div>

templates/layout.php

@@ -41,17 +41,27 @@ $isLoggedIn = \App\Auth::check();
       <?php endforeach; ?>
     </nav>
     <div class="topbar-right">
-      <?php /* 点自己的头像/名字 = 直接编辑自己的资料。
-               ⚠️ 以前这里是个不可点的 <span>：想改自己的信息得绕
-                  「名册 → 找到自己 → 编辑资料」三步，而最该一眼可达的
-                  恰恰是「改我自己」这件事。 */ ?>
-      <a class="who" href="<?= e(url('people/me')) ?>" title="改我自己的资料">
-        <img src="<?= e(avatar_url($_SESSION['avatar'] ?? null)) ?>" alt="">
-        <span class="who-name"><?= e(\App\Auth::name()) ?></span>
-        <?php if (\App\Auth::isGuest()): ?><span class="badge">访客</span><?php endif; ?>
-      </a>
-      <a class="link-quiet who-pwd" href="<?= e(url('auth/password')) ?>">改密码</a>
-      <a class="link-quiet" href="<?= e(url('auth/logout', ['_csrf' => csrf_token()])) ?>">退出</a>
+      <?php /* 姓名 + 头像 = 一个下拉菜单，而不是「点名字改资料」＋旁边两个裸链接。
+               裸链接在窄屏只能靠 display:none 藏起来（一藏入口就没了），
+               收进菜单之后同一个入口在手机上也点得到。
+               用 <details> 实现：不需要 JS 就能展开/收起，app.js 只额外补
+               "点外面"和"Esc"两件事。 */ ?>
+      <details class="menu who-menu">
+        <summary class="who" title="我的">
+          <img src="<?= e(avatar_url($_SESSION['avatar'] ?? null)) ?>" alt="">
+          <span class="who-name"><?= e(\App\Auth::name()) ?></span>
+          <?php if (\App\Auth::isGuest()): ?><span class="badge">访客</span><?php endif; ?>
+          <i class="caret" aria-hidden="true"></i>
+        </summary>
+        <div class="menu-list">
+          <a href="<?= e(url('settings/me')) ?>">个人设置</a>
+          <?php if (\App\Auth::isAdmin()): ?>
+            <a href="<?= e(url('settings')) ?>">系统设置</a>
+          <?php endif; ?>
+          <a href="<?= e(url('auth/password')) ?>">修改密码</a>
+          <a class="menu-exit" href="<?= e(url('auth/logout', ['_csrf' => csrf_token()])) ?>">退出登录</a>
+        </div>
+      </details>
     </div>
   </div>
 </header>

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/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>

templates/settings/_nicknames.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * 「我怎么称呼家人」（个人设置的一块）。
+ *
+ * 称呼是**视角属性**：同一个「小明」，妈妈叫"明明"、姐姐叫"小弟"。
+ * 所以它不属于小明这个人的档案，而是"我 → 他"这一对关系上的一个值，
+ * 只影响我自己看到的页面（顶栏、名册、首页生日条都用它显示）。
+ */
+$myNicks = [];
+foreach ($nicknames as $n) {
+    $myNicks[(int)$n['target_id']] = (string)$n['nickname'];
+}
+?>
+<div class="card card-pad">
+  <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="settings/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/settings/_profile.php

@@ -1,40 +1,26 @@
 <?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'];
-}
+// 裁剪比例由「这个位置显示成什么形状」决定，前后端共用同一份配置（见 App\ImageSlot）
+$avSlot    = \App\ImageSlot::get('avatar');
 ?>
 
-<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')) ?>">
+<form method="post" enctype="multipart/form-data" action="<?= e(url('settings/me_save')) ?>">
   <?= csrf_field() ?>
   <div class="card card-pad">
     <div class="form-grid">
@@ -137,8 +123,20 @@ foreach ($nicknames as $n) {
 
       <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，相对原图）。不裁/没 JS 就留空 = 居中裁切 */ ?>
+        <input type="hidden" name="avatar_crop" value="">
+        <span class="tip">
+          选好图片后会弹出裁剪框，把要留的部分框住。<b>比例按它在页面上的形状定</b>
+          （头像是 1:1 正方形）。上限 5MB。
+        </span>
+        <?php if (!empty($errors['avatar'])): ?><span class="err"><?= e($errors['avatar']) ?></span><?php endif; ?>
       </div>
       <div class="field">
         <label>当前头像</label>
@@ -153,37 +151,3 @@ foreach ($nicknames as $n) {
     </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/settings/me.php

@@ -0,0 +1,120 @@
+<?php
+/**
+ * 个人设置 —— 「我自己的」设置。
+ *
+ * 与「系统设置」（?r=settings，仅管理员）的分工：
+ *   · 系统设置改一次**全家都变**：家庭 slogan、附件存储、运行环境；
+ *   · 个人设置只影响**我自己看到的样子**：我的资料、我怎么称呼别人、
+ *     名册里分组的先后顺序、以及关系分类的增删改名。
+ *
+ * ⚠️ 关于「顺序」与「分类」这两个都不在系统设置里，理由是：
+ *   分类是全家共用的一套（老杨的同事，对全家来说都是同事），所以它写在共享的表里；
+ *   但**哪一组排前面纯属个人习惯** —— 爸爸把「家人」排第一、妈妈把「亲戚」排第一，
+ *   这种偏好存在 user_settings 里，跟 family 级的 settings 严格分开，
+ *   免得"改一个人的偏好"误伤到全家。
+ */
+$groupCounts = $groupCounts ?? [];
+$groupTotal  = count($groups);
+?>
+<div class="page-head">
+  <h1>个人设置</h1>
+  <span class="sub">只影响你自己看到的样子</span>
+  <div class="actions">
+    <a class="btn btn-ghost btn-sm" href="<?= e(url('people/show', ['id' => (int)$person['id']])) ?>">看我的详情页</a>
+    <?php if (\App\Auth::isAdmin()): ?>
+      <a class="btn btn-ghost btn-sm" href="<?= e(url('settings')) ?>">系统设置</a>
+    <?php endif; ?>
+  </div>
+</div>
+
+<h2 class="section-title" id="me-profile">我的资料 <span class="hint">姓名、头像、生日、联系方式</span></h2>
+<?php require __DIR__ . '/_profile.php'; ?>
+
+<div class="stack-gap"></div>
+<?php require __DIR__ . '/_nicknames.php'; ?>
+
+<!-- ==================== 名册分组的先后顺序 ==================== -->
+<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">
+    名册是按「关系分组」分栏显示的。分组本身是全家共用的一套，
+    但<b>哪一组排前面是你自己的习惯</b> —— 你在这里调，别人看到的顺序不变。
+    <?php if ($groupTotal > 1): ?><br>用 ▲ ▼ 把它挪到你要的位置，挪一下就存一次。<?php endif; ?>
+  </p>
+
+  <?php if (!$groups): ?>
+    <p class="small muted" style="margin:0">还没有分组。</p>
+  <?php else: ?>
+    <ol class="order-list">
+      <?php foreach ($groups as $i => $g): $gid = (int)$g['id']; ?>
+        <li class="order-row">
+          <span class="order-no"><?= $i + 1 ?></span>
+          <span class="order-name"><?= e((string)$g['name']) ?></span>
+          <span class="order-count"><?= (int)($groupCounts[$gid] ?? 0) ?> 人</span>
+          <form method="post" action="<?= e(url('settings/groups/move')) ?>" class="order-move">
+            <?= csrf_field() ?>
+            <input type="hidden" name="id" value="<?= $gid ?>">
+            <button class="btn btn-ghost btn-sm" type="submit" name="dir" value="up"
+                    title="上移一组" <?= $i === 0 ? 'disabled' : '' ?>>▲</button>
+            <button class="btn btn-ghost btn-sm" type="submit" name="dir" value="down"
+                    title="下移一组" <?= $i === $groupTotal - 1 ? 'disabled' : '' ?>>▼</button>
+          </form>
+        </li>
+      <?php endforeach; ?>
+    </ol>
+  <?php endif; ?>
+</div>
+
+<!-- ==================== 关系分类的增删改名 ==================== -->
+<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">
+    预置了「家人 / 亲戚 / 同事 / 朋友 / 合作伙伴 / 认识 / 不熟」七个。
+    <b>不够用就自己加</b>，叫法不合适就改名。
+    分类是全家共用的一套（你加的，家里人都会看到）——
+    因为「老杨的同事」对全家来说都是同事，各人各定一套会让名册没法看。
+    <br>
+    删掉一个分类<b>不会删掉人</b>：那一组人会变成「未分类」，在名册里提醒你重新归类。
+  </p>
+
+  <form method="post" action="<?= e(url('settings/groups/add')) ?>" class="inline-form">
+    <?= csrf_field() ?>
+    <label class="sr-only" for="newGroup">新分类名</label>
+    <input class="input" id="newGroup" name="name" maxlength="20" placeholder="例如：邻居、球友、老同学">
+    <button class="btn btn-sm" type="submit">加一个分类</button>
+  </form>
+
+  <?php if ($groups): ?>
+    <ul class="group-manage">
+      <?php foreach ($groups as $g): $gid = (int)$g['id']; ?>
+        <li class="group-manage-row">
+          <form method="post" action="<?= e(url('settings/groups/rename')) ?>" class="group-rename">
+            <?= csrf_field() ?>
+            <input type="hidden" name="id" value="<?= $gid ?>">
+            <label class="sr-only" for="gname<?= $gid ?>">分类名</label>
+            <input class="input" id="gname<?= $gid ?>" name="name" maxlength="20"
+                   value="<?= e((string)$g['name']) ?>">
+            <button class="btn btn-ghost btn-sm" type="submit">改名</button>
+          </form>
+          <span class="group-count muted small"><?= (int)($groupCounts[$gid] ?? 0) ?> 人</span>
+          <?php /* 删除做成两步（<details>），不用 JS 也能防手滑 —— 一点就没了太容易出事 */ ?>
+          <details class="del-wrap">
+            <summary class="btn btn-ghost btn-sm">删除</summary>
+            <form method="post" action="<?= e(url('settings/groups/delete')) ?>" class="del-confirm">
+              <?= csrf_field() ?>
+              <input type="hidden" name="id" value="<?= $gid ?>">
+              <span class="small muted">这组的人会变成「未分类」，确定？</span>
+              <button class="btn btn-ghost btn-sm danger" type="submit">确认删除</button>
+            </form>
+          </details>
+        </li>
+      <?php endforeach; ?>
+    </ul>
+  <?php endif; ?>
+</div>