laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

名册每人一份 · 分组两层 · 拖动排序 · 表单合一 · 裁剪可缩放

Browse Source 
按用户十点反馈逐条落地（v5，Schema::VERSION = 5）：

- 名册改成每人一份：新表 person_roster(owner_id, person_id, group_id,
  sort_order, source)。默认只看「我添加的 + 别人分享给我的」；
  source='seeded' 是升级时从老 persons.group_id 播进来的（先播数据再删列）。
- 排序不再手填：名册页直接拖动卡片（整版提交，一次 applyLayout 落库），
  无 JS 时卡片上的「调整分组」表单照旧可用。
- 分组分两层：管理员在「系统设置」维护公共分组（owner_id=0），
  用户在「个人设置」加自己的分组；显示顺序各人各定、互不影响。
- 名册可共享：把名片分享给别的用户（people/share）；添加成员时若系统里
  已有这个人，可直接复用（people/pick），不必重复录入。
- 「编辑成员」与「改我自己的资料」合并为同一张表（templates/people/form.php），
  两个入口 href 完全相同，h1 按改谁切换文案；个人设置页只留
  资料入口 + 称呼 + 我的分组三块，删除 templates/settings/_profile.php。
- 系统设置收进头像下拉，顶栏只剩 首页/家谱/名册。
- 裁剪器加缩放（滑块 1-4x、Ctrl+滚轮、还原）：缩放只改视图大小，
  落库的归一化矩形保持不变。
- 权限：管理员可以改任何人的权限（含自己），只拦「最后一位管理员」被降级。
- 去掉首页「我的一句话」后的链接、家谱说明段、以及「还没归到任何分组」提示。

迁移安全：数据回填（PersonRoster::seedFromPersons）先于删列执行、且不进
tryStep 容错；失败步骤记入 settings.schema_upgrade_warning 并在系统设置页提示。
线上已验证：schema_upgrade_warning 为空，person_roster/person_groups.owner_id
就位，persons.group_id / sort_order 已删。

验证：php -l 48 文件；本地 e2e 277/0、老库升级 81/0、桌面几何 108/0、
移动端几何 180/0、交互 96/0；反向验证 38 条注入 + 2 条缩放注入全部命中；
部署静态断言 53/0，站点自检 7/7（--resolve 锁本机走 443，探针真的进 PHP）。
This commit is contained in:
laoyang
2026-09-30 13:24:26 +08:00
parent 1c460a0e83
commit ed38a40c08
21 changed files with 1780 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/people/index.php
+107 -52
View File
@@ -1,20 +1,24 @@
<?php
/**
* 家庭名册 —— 按「关系分组」分栏显示。
* 家庭名册 —— 按「关系分组」分栏显示，卡片可以拖动。
*
* 两个刻意的设计：
* ① **分栏顺序由看的人自己定**（$groups 已经是"按我的习惯排好"的顺序，
* 见 App\PersonGroup::orderFor）—— 所以我看到的「家人」在第一栏，
* 妈妈可以把「亲戚」挪到第一栏，两个人相安无事。
* ② 分类是全家共用的一套，所以**改一个人的分组是全家的信息**，
* 这里只有能写的人（管理员 / 家庭成员）才看得到那一行「调整分组」。
* 三处刻意的设计：
* ① **名册是每人一份的**（v5 起，见 App\PersonRoster）：这里只显示"我加的人 +
* 别人分享给我的"，归到哪一组、排第几也都只影响我自己。所以"改分组"不再是
* 改全家的信息，而是改我自己那份 —— 于是顺手就能做成拖动。
* ② **拖动改分组、拖动改顺序**（需求原话：「拖动一个人的卡片进行排序…通过拖动
* 改变分组」）：拖动本身是 JS，但**每个分组栏也是空的时候照样存在**，
* 拖动时统一露出来当落点，否则"想拖到一个现在没人的分组里"就没地方放。
* ③ **没有 JS 也完全能用**：卡片上的 `<details>调整分组</details>` 还在，
* 而且手机上的 HTML5 拖放本来就不生效，那套表单就是窄屏的正路。
*
* ⚠️ 卡片结构是 div > a + details，**不能写成 a > form**：
* 表单套在链接里是非法 HTML，浏览器会把 DOM 拆开，表单里那个「移动」按钮
* 可能连提交机会都没有（或者把整张卡片点成跳转）。
*/
$canMove = \App\Auth::canWrite();
$total = 0;
$canMove = \App\Auth::canWrite();
$pickable = $pickable ?? 0;
$total = 0;
foreach ($grouped as $list) {
$total += count($list);
}
@@ -22,11 +26,13 @@ foreach ($grouped as $list) {
/**
* 画一栏人。用闭包是因为"分好组的各栏"和"未分类"两处要画同一套卡片，
* 复制一遍迟早会改漏一处。
*
* ⚠️ `$groups` 必须写进 `use (...)`：卡片里的「调整分组」下拉要列出我能用的分组。
* 漏掉它的后果**不会报错**（PHP 8 只 warning 一句"未定义变量"，
* 而 foreach 拿到 null 就是零次循环）—— 于是每张卡片的那个下拉里
* 只剩「未分类」一项，看着像"分组功能没做"，其实是变量没传进来。
*/
$renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
if (!$list) {
return;
}
$renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
?>
<div class="people-grid">
<?php foreach ($list as $p): ?>
@@ -40,9 +46,14 @@ $renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
$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="person" data-person="<?= $pid ?>" <?= $canMove ? 'draggable="true"' : '' ?>>
<?php if ($canMove): ?>
<span class="drag-handle" title="拖到我想要的位置 / 那一栏" aria-hidden="true">⠿</span>
<?php endif; ?>
<?php /* draggable="false" 很重要：链接与图片浏览器默认就是可拖的，
不关掉的话拖起来会变成"拖一个网址"，父卡片反而拿不到这次拖动。 */ ?>
<a class="person-main" href="<?= e(url('people/show', ['id' => $pid])) ?>" draggable="false">
<div class="ph"><img src="<?= e(avatar_url($p['avatar'])) ?>" alt="" draggable="false"></div>
<div class="pb">
<div class="pname">
<?= e($pshow) ?>
@@ -71,13 +82,13 @@ $renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
</div>
</a>
<?php if ($canMove): ?>
<details class="person-more">
<summary>调整分组</summary>
<details class="person-more" data-no-drag>
<summary aria-label="调整分组">⋯</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">
<select class="select" id="pg<?= $pid ?>" name="group_id" data-no-drag>
<option value="">未分类</option>
<?php foreach ($groups as $g): $gid = (int)$g['id']; ?>
<option value="<?= $gid ?>"
@@ -86,7 +97,12 @@ $renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
</option>
<?php endforeach; ?>
</select>
<button class="btn btn-ghost btn-sm" type="submit">移动</button>
<button class="btn btn-ghost btn-sm" type="submit" data-no-drag>移动</button>
</form>
<form method="post" action="<?= e(url('people/forget')) ?>" class="person-move">
<?= csrf_field() ?>
<input type="hidden" name="person_id" value="<?= $pid ?>">
<button class="btn btn-ghost btn-sm" type="submit" data-no-drag>从我的名册移走</button>
</form>
</details>
<?php endif; ?>
@@ -95,18 +111,46 @@ $renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
</div>
<?php
};
/** 一栏（含空栏）。空栏平时收起来，拖动时由 JS 加 is-dragging 露出来当落点。 */
$renderBlock = function (int $gid, string $name, array $list) use ($renderGrid): void {
?>
<section class="group-block<?= $list ? '' : ' is-empty' ?>" data-group="<?= $gid ?>">
<h2 class="group-head">
<span class="group-title"><?= e($name) ?></span>
<span class="group-n"><span class="n"><?= count($list) ?></span> 人</span>
<span class="group-drop-hint">放到这里</span>
</h2>
<?php $renderGrid($list); ?>
</section>
<?php
};
?>
<div class="page-head">
<h1>家庭名册</h1>
<span class="sub">共 <?= $total ?> 人<?= $groups && $q === '' ? '，分 ' . count($groups) . ' 个关系分组' : '' ?></span>
<span class="sub">
共 <?= $total ?> 人<?= $groups && $q === '' ? '，分 ' . count($groups) . ' 个关系分组' : '' ?>
</span>
<div class="actions">
<?php if ($canMove && $pickable > 0): ?>
<a class="btn btn-ghost btn-sm" href="<?= e(url('people/pick')) ?>">
从家里已有的人里挑（<?= $pickable ?>）
</a>
<?php endif; ?>
<?php if (\App\Auth::isAdmin()): ?>
<a class="btn btn-sm" href="<?= e(url('people/new')) ?>">添加成员</a>
<?php endif; ?>
</div>
</div>
<?php if ($canMove && $q === '' && $total > 0): ?>
<p class="small muted roster-tip" style="margin:0 0 12px">
拖动卡片（左边那个 <span class="drag-handle-inline">⠿</span>）就能改顺序，
拖到别的一栏里就是改分组。改的是<b>你自己那份名册</b>，不影响家里其他人。
</p>
<?php endif; ?>
<form class="search" method="get" action="index.php">
<input type="hidden" name="r" value="people">
<input class="input" name="q" value="<?= e($q) ?>" placeholder="按姓名、称呼或邮箱搜索">
@@ -118,8 +162,29 @@ $renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
<?php if (!$people): ?>
<div class="empty">
<b><?= $q !== '' ? '没有匹配的人' : '名册还是空的' ?></b>
<?= $q !== '' ? '换个词试试。' : '把家里人加进来，之后观影、旅行的同行人就可以直接从名册里选。' ?>
<?php if ($q !== ''): ?>
<b>没有匹配的人</b>
换个词试试。
<?php elseif ($pickable > 0): ?>
<b>你的名册还是空的</b>
家里已经有 <?= (int)$pickable ?> 个人了 —— 直接挑过来就行，不用重新录一遍。
<div class="btn-row" style="justify-content:center;margin-top:14px">
<a class="btn" href="<?= e(url('people/pick')) ?>">从家里已有的人里挑</a>
<?php if (\App\Auth::isAdmin()): ?>
<a class="btn btn-ghost" href="<?= e(url('people/new')) ?>">添加一个新人</a>
<?php endif; ?>
</div>
<?php else: ?>
<b>名册还是空的</b>
<?php if (\App\Auth::isAdmin()): ?>
把家里人加进来，之后观影、旅行的同行人就可以直接从名册里选。
<div class="btn-row" style="justify-content:center;margin-top:14px">
<a class="btn" href="<?= e(url('people/new')) ?>">添加成员</a>
</div>
<?php else: ?>
等家里人把你加进来，或者让管理员给你开个账号。
<?php endif; ?>
<?php endif; ?>
</div>
<?php elseif ($q !== ''): ?>
<?php /* 搜索时按"命中的人"平铺 —— 分栏会把一次搜索拆成一堆只有一两个人的碎块，反而更难看 */ ?>
@@ -128,35 +193,25 @@ $renderGrid = function (array $list) use ($groups, $meId, $canMove): void {
</p>
<?php $renderGrid($people); ?>
<?php else: ?>
<?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; ?>
<div class="roster<?= $canMove ? ' is-droppable' : '' ?>"
data-reorder="<?= e(url('people/reorder')) ?>"
data-csrf="<?= e(csrf_token()) ?>">
<?php foreach ($groups as $g): ?>
<?php $gid = (int)$g['id']; ?>
<?php $renderBlock($gid, (string)$g['name'], $grouped[$gid] ?? []); ?>
<?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">
这些人还没归到任何分组里。管理员可以在卡片下面直接选一个分组（或去「编辑成员」里改）。
<?php
// 「未分类」栏永远画出来（哪怕是空的）—— 它是把卡片从某个分组里拖出来的落点。
// 提示语按需求删掉了（用户原话：「这些人还没归到任何分组里…这些提示，都去掉」）。
$renderBlock(0, '未分类', $grouped[0] ?? []);
?>
<?php if (!$groups): ?>
<p class="small muted" style="margin:0">
还没有任何分组。管理员可以在「系统设置 → 公共分组」里建一套全家共用的，
你也可以在「个人设置 → 我的分组」里加只给自己看的。
</p>
<?php $renderGrid($grouped[0]); ?>
</section>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>