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

v24 第 9 批：名册九条（分组按钮/加入名册/生日月日/地址四级/千人性能/拖动修复/删除人员/返回名册/Semi DatePicker）

Browse Source 
- #131 名册卡片加「分组」按钮（details+radio，显示当前分组，选中即改）
- #132 修复「从已有人里加入名册」无反应
- #133 生日只显示月和日（阳历 MM-DD / 农历中文名），PersonQuery::birthdaysOf 取代 birthdayOf
- #134 地址结构化为 国家/省/市/区+详细：regions 表（3429 行全国区划）+ Region.php +
  ?r=regions 级联接口 + 表单 .addr-grid + 老地址回填（Schema v16）
- #135 千人名册性能：.person content-visibility:auto + 名册页 ob_gzhandler
  （实测 服务端 1.15s/3.8MB → 0.17s/87KB；客户端导航→load 1.35s → 0.37s）
- #136 拖动排序改 Pointer Events（Chrome 下 HTML5 DnD 在 DOM 变动时断）
- #137 个人详情页底部「删除人员」
- #138 编辑资料页加「返回名册」
- #139 所有日期选择换 Semi Design DatePicker（渐进增强：原生四字段保 POST 契约，
  懒加载 vendor semi UMD，值回写原字段；工作经历 type=month 一并升级；宣纸主题对齐）

验证：e2e 785/0、batch9 37/0、upgrade 126/0、picker 28/0、mobile 688/0、interact 97/0、
batch_e 91/0、import 21/0、douban 22/0、drag 5/0、semi-integrate 28/0、semi-probe 17/0、
geom 5/5；部署后线上自检 16/16（含 4 个 semi 资源 200 + regions 路由）。
This commit is contained in:
laoyang
2026-10-04 08:56:40 +08:00
parent 864e281265
commit 52cc1ecccb
19 changed files with 1629 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/people/index.php
+69 -35
View File
@@ -65,8 +65,16 @@ $renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
$metaBits[] = ['家谱', '他在你的家谱树上（配偶/父母/子女/祖孙…），自动加入你的名册'];
}
if (!empty($p['is_placeholder'])) { $metaBits[] = ['待确认', '']; }
// 当前分组：行上那个「分组」按钮要**显示它**（用户 2026-10-04 第 1 条）。
// ⚠️ 只认「我能用的分组」里那几个 —— 挂在一个别人家的私自分组上时，
// 这里取不到名字，就按"未分类"显示（按钮照样能改成一个正常的分组）。
$curGid = (int)($p['group_id'] ?? 0);
$grpName = '';
foreach ($groups as $g) {
if ((int)$g['id'] === $curGid) { $grpName = (string)$g['name']; break; }
}
?>
<div class="person" data-person="<?= $pid ?>" <?= $canMove ? 'draggable="true"' : '' ?>
<div class="person" data-person="<?= $pid ?>"
data-search="<?= e($pshow . ' ' . $pReal . ' ' . (string)($p['email'] ?? '') . ' ' . (string)($p['org'] ?? '') . ' ' . (string)($p['phone_plain'] ?? '')) ?>"
<?php /* ⚠️ 首字母**分字段**、用空格隔开（前端逐段独立判子序列）。
把"姓名+称呼"拼成一串会造出跨字段巧合：用户实测「输 yy 搜出岳父」
@@ -79,7 +87,12 @@ $renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
<?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>
<?php /* ⚠️ loading="lazy" 是名册加载一千人还不卡的**关键**：
头像全部走 media.php（每个都要启一次 PHP、查一次库、读一次存储），
一千个并发拉下来页面就是"点了没反应"。懒加载之后只拉视口里那十几个。
⚠️ 别写成 JS 的 data-src 懒加载：那样没有 JS 就一张头像都没有。 */ ?>
<div class="ph"><img src="<?= e(avatar_url($p['avatar'])) ?>" alt="" draggable="false"
loading="lazy" decoding="async" width="52" height="52"></div>
<div class="pb">
<div class="pname">
<?php /* ⚠️ 姓名必须是 .pname 里的**第一段裸文本**，不要包 <span>。
@@ -100,15 +113,15 @@ $renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
<?php endforeach; ?>
</div>
<?php
// 用户第 3 条：一行放齐「手机号 / 阴历+阳历生日（带年份）/ 邮箱 / 工作单位」。
// 用户第 3 条：一行放齐「手机号 / 生日 / 邮箱 / 工作单位」。
// 没填的项**整个 <span> 都不画** —— 留一个空标签只会让每行都长一截。
// 生日优先阳历、其次农历，用 [阳历]/[农历] 小字标明是哪一个。
// 用户 2026-10-04 第 3 条：生日**阴历阳历都列**，且只显示月和日（不显示年）。
$facts = [];
if (($p['phone_plain'] ?? '') !== '') {
$facts[] = ['手机', (string)$p['phone_plain']];
}
if (($p['birthday_show'] ?? '') !== '') {
$facts[] = [(string)$p['birthday_kind'], (string)$p['birthday_show']];
foreach ((array)($p['birthdays'] ?? []) as [$bk, $bv]) {
$facts[] = [(string)$bk, (string)$bv];
}
if (trim((string)($p['email'] ?? '')) !== '') {
$facts[] = ['邮箱', (string)$p['email']];
@@ -131,38 +144,59 @@ $renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
藏进 ⋯ 里要点两下；而 ⋯ 里放的是"调整分组/移出名册"这类低频动作。
⚠️ 它是 <a>，且必须在 person-main 这个 <a> **外面**
—— a 套 a 是非法 HTML，浏览器会把 DOM 拆开。 */ ?>
<a class="btn btn-ghost btn-sm person-edit" data-no-drag
href="<?= e(url('people/edit', ['id' => $pid])) ?>"
title="编辑 <?= e($pshow) ?> 的资料">编辑</a>
<?php if ($canMove): ?>
<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" data-no-drag>
<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" data-no-drag>移动</button>
</form>
<?php if (($p['roster_source'] ?? '') === 'kin'): ?>
<p class="small muted person-move" style="margin:4px 0 0">因家谱关系自动加入；解除关系后自动移出。</p>
<?php else: ?>
<form method="post" action="<?= e(url('people/forget')) ?>" class="person-move">
<?php /* ⚠️ 行右侧三个动作收在一个 flex 容器里，**不再各自绝对定位**：
原来「编辑」写死 right:46px、「⋯」写死 right:8px，再来第三个按钮
就得继续猜偏移；而且「分组」按钮的宽度随分组名变化，写死必然重叠。
容器贴右、内部自然排开，.person-main 也就不用再靠 padding 让位。 */ ?>
<div class="person-actions">
<?php if ($canMove): ?>
<?php /* 用户 2026-10-04 第 1 条：名册没有地方改分组了 → 加一个按钮，
**直接显示当前分组**，点开就是分组列表，选中即改。
⚠️ 用 <details> 而不是新写一套弹窗 JS：没有 JS 时它照样能开、
照样能提交（里面的「保存」按钮），开了 JS 只是"选中即提交"。
⚠️ 值是原生 radio，**提交的是 form** —— 与名册页原来的
「移动」是同一个路由（people/group），服务端不用改。 */ ?>
<details class="person-group menu" data-no-drag>
<summary class="btn btn-ghost btn-sm person-group-btn<?= $grpName === '' ? ' is-none' : '' ?>"
title="改 <?= e($pshow) ?> 的分组"><?= e($grpName !== '' ? $grpName : '分组') ?></summary>
<form method="post" action="<?= e(url('people/group')) ?>" class="pg-menu">
<?= csrf_field() ?>
<input type="hidden" name="person_id" value="<?= $pid ?>">
<button class="btn btn-ghost btn-sm" type="submit" data-no-drag>从我的名册移走</button>
<p class="pg-title">把「<?= e($pshow) ?>」分到</p>
<label class="pg-item">
<input type="radio" name="group_id" value=""<?= $curGid === 0 ? ' checked' : '' ?>>
<span>未分类</span>
</label>
<?php foreach ($groups as $g): $gid = (int)$g['id']; ?>
<label class="pg-item">
<input type="radio" name="group_id" value="<?= $gid ?>"<?= $curGid === $gid ? ' checked' : '' ?>>
<span><?= e((string)$g['name']) ?></span>
</label>
<?php endforeach; ?>
<button class="btn btn-sm pg-save" type="submit">保存</button>
</form>
<?php endif; ?>
</details>
<?php endif; ?>
</details>
<?php endif; ?>
<a class="btn btn-ghost btn-sm person-edit" data-no-drag
href="<?= e(url('people/edit', ['id' => $pid])) ?>"
title="编辑 <?= e($pshow) ?> 的资料">编辑</a>
<?php if ($canMove): ?>
<details class="person-more menu" data-no-drag>
<summary aria-label="更多操作">⋯</summary>
<?php /* 「调整分组」那个下拉已经搬到上面的「分组」按钮里 —— 同一件事
不做两处（留着反而会让人以为改了这边、那边没跟上）。 */ ?>
<?php if (($p['roster_source'] ?? '') === 'kin'): ?>
<p class="small muted person-move" style="margin:0">因家谱关系自动加入；解除关系后自动移出。</p>
<?php else: ?>
<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>
<?php endif; ?>
</details>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>