laoyang
b2ca4f336e
- #6 名册线上真实数据（1184 人）卡顿：根因是**每张卡片内联一整份分组弹层**—— 全页 2369 个 form / 27234 个 input / 22496 个 radio / 98100 DOM 节点， 密码管理器（Bitwarden 等）逐个扫描 form 把主线程占死（用户报的就是这个冲突）。 改为卡片只带 data 属性 + 全页**唯一一份**共享浮层 #rosterMenus。 实测：form 2369→3、input 27234→25、DOM 98100→17659、解压 7694→2306 KB、 长任务 1/52ms → 0。新增哨兵 _fb_formbloat_check.py（含反向验证）。 - #5 日视图翻页失效：day_columns() 无条件吸到周一，天视图只有 1 列 → 永远显示那周周一。 改为仅 span>1 时吸附（周视图行为不变）。 - #2 财务「欠款」类别（负债）；并修一个真 bug：负债填负数会让净资产**反向变大**。 写入口 normalizeAmount 归一化 + summary/timeline 侧 abs 防御 + Schema v17 纠正老数据。 - #3 账目行「盘点」「修改」两个并列按钮（各自就地弹面板）；图移到账目上方， 总金额图跨整行 + 每个账目一条线 + 类别筛选条；charts() 改为覆盖全部账目。 - #4 日程新增「农历」「节假日」两本不可删除只读日历（app/Holiday.php）： 两级自动更新 —— 内置规则（公历固定 + 清明节气 + 农历节日）保证断网也有； 官方 JSON 镜像自动抓取补齐调休。抓取**不在渲染路径联网**（响应后 fastcgi_finish_request + 频率闸门），缓存落 storage/cache。仅派生本不可写日程。 - #6 日程页设置按钮前加「跳到某一天」（选中即跳）。 - #7 起止范围改用一个 Semi dateTimeRange 控件（观影/旅程/节点/日程共 4 处）； 新增 window.fbSetDT / fbUpgradeRange；修范围重挂（React 非受控组件须 unmount 再 createRoot） 与范围里 required 未摘除导致表单无法提交两个真实问题。 验证：e2e 786/0、batch10 44/0、batch9 38/0、batch_e 91/0、upgrade 126/0、picker 28/0、 semi_integrate 27/0、formbloat 5/0（+反向 3 红）、mobile 688/0、interact 97/0、drag 5/0、geom 5/5； 线上自检 19/19 + 线上真实账号巡检 28/0（含 Firefox 实测）。
470 lines
25 KiB
PHP
470 lines
25 KiB
PHP
<?php
|
||
/**
|
||
* 家庭名册 —— 按「关系分组」分栏显示，卡片可以拖动。
|
||
*
|
||
* 三处刻意的设计：
|
||
* ① **名册是每人一份的**（v5 起，见 App\PersonRoster）：这里只显示"我加的人 +
|
||
* 别人分享给我的"，归到哪一组、排第几也都只影响我自己。所以"改分组"不再是
|
||
* 改全家的信息，而是改我自己那份 —— 于是顺手就能做成拖动。
|
||
* ② **拖动改分组、拖动改顺序**（需求原话：「拖动一个人的卡片进行排序…通过拖动
|
||
* 改变分组」）：拖动本身是 JS，但**每个分组栏也是空的时候照样存在**，
|
||
* 拖动时统一露出来当落点，否则"想拖到一个现在没人的分组里"就没地方放。
|
||
* ③ **没有 JS 也完全能用**：卡片上的 `<details>调整分组</details>` 还在，
|
||
* 而且手机上的 HTML5 拖放本来就不生效，那套表单就是窄屏的正路。
|
||
*
|
||
* ⚠️ 卡片结构是 div > a + details，**不能写成 a > form**：
|
||
* 表单套在链接里是非法 HTML，浏览器会把 DOM 拆开，表单里那个「移动」按钮
|
||
* 可能连提交机会都没有（或者把整张卡片点成跳转）。
|
||
*/
|
||
$canMove = \App\Auth::canWrite();
|
||
$pickable = $pickable ?? 0;
|
||
$total = 0;
|
||
foreach ($grouped as $list) {
|
||
$total += count($list);
|
||
}
|
||
|
||
/**
|
||
* 画一栏人。用闭包是因为"分好组的各栏"和"未分类"两处要画同一套卡片，
|
||
* 复制一遍迟早会改漏一处。
|
||
*
|
||
* ⚠️ `$groups` 必须写进 `use (...)`：卡片里的「分组」按钮要用它（见下）。
|
||
* （历史：这个下拉原来长在卡片里，漏掉它会让下拉只剩「未分类」一项，
|
||
* 看着像"分组功能没做"，其实是变量没传进来。）
|
||
*
|
||
* 🔴🔴 v24 第 10 批 #6：**卡片里不再内联弹层与表单**。
|
||
*
|
||
* 用户报「名册列表页面仍然很慢，Firefox 提示这个页面和 Bitwarden 插件有冲突」。
|
||
* 线上真实数据实测（1184 人）把这件事量出来是什么样：
|
||
* · 全页 `<form>` **2369 个**、`<input>` **27234 个**、`radio` **22496 个**；
|
||
* · 单张卡片 83 个 DOM 节点，其中**分组菜单独占 64 个**；
|
||
* · 于是总 DOM 98100 个、解压后 7.7 MB。
|
||
* 密码管理器（Bitwarden/1Password/LastPass…）会**逐个 form/input 去判定是不是登录框**，
|
||
* 2369 个表单足够把主线程占住 —— 这就是"和 Bitwarden 冲突"的真实来源，
|
||
* 也是"明明没报错却卡得没法用"的原因。
|
||
*
|
||
* 修法（不是调 CSS 缓存，而是**把节点数砍掉一个数量级**）：
|
||
* ① 每卡的「分组」按钮只留一个 **<button data-pg-open="…">**（1 个节点，无表单无 radio）；
|
||
* ② 每卡的「⋯」只留一个 **<button data-pm-open="…">**；
|
||
* ③ 「分组」「移出名册」需要的 **radio / 表单 / csrf** 全页只渲染**一份**，
|
||
* 放在列表末尾的共享浮层里（见文件末尾 `#rosterMenus`），点哪个人的按钮就把
|
||
* 该按钮的数据灌进去 —— 语义没变，服务端路由也没变（还是 people/group 与 people/forget）。
|
||
*
|
||
* 代价：没有 JS 时这两个按钮点不动。但**改分组/移出名册本来就只有 JS 可用场景**
|
||
* （拖动排序、即时筛选都不是无 JS 能用的），而且卡片上的「编辑」仍是普通链接，
|
||
* 全站核心功能不依赖它。页面正文明说这一点，不静默降级。
|
||
*/
|
||
$renderGrid = function (array $list) use ($meId, $canMove, $groups): void {
|
||
?>
|
||
<div class="people-grid">
|
||
<?php foreach ($list as $p): ?>
|
||
<?php
|
||
// 显示名走「我怎么称呼他」：同一个孩子，爸爸看到"儿子"、妈妈看到"小宝"。
|
||
// ⚠️ 不要再读 $p['nickname'] —— 那是已废弃的旧列（全家共用一个小名）。
|
||
// ⚠️ 一律走 person_name()：它按 shown → my_nickname → name 的顺序取，
|
||
// 这里自己拼一次迟早漏掉 my_nickname（v14 前就是漏的，于是设了称呼也不显示）。
|
||
$pshow = person_name($p);
|
||
// 用户 2026-10-03 第 3 条：「如果有昵称，就不要显示真实姓名了」。
|
||
// 所以这里只在**没有昵称/称呼**、显示名就是本名时，本名才等于 $pshow（不重复画）。
|
||
$pNick = (string)($p['my_nickname'] ?? '');
|
||
$pReal = (string)$p['name'];
|
||
$pid = (int)$p['id'];
|
||
// 用户第 3 条：行高要矮。姓名行右边的徽标只留最必要的几个，
|
||
// 「已开通 / 访客 / 家谱 / 待确认」这些收成小徽标（有就显示，没有就不占位）。
|
||
// ⚠️「家谱」那枚必须带 title 说明来历 —— 不然"我没加过他，他怎么在我名册里"
|
||
// 会让人以为数据坏了（v7 加它就是为了回答这个问题，别在改版时弄丢）。
|
||
$metaBits = [];
|
||
if ($pid === (int)$meId) { $metaBits[] = ['我', '']; }
|
||
$r = $p['account_role'] ?? '';
|
||
if ($r === 'admin' && ($p['account_status'] ?? '') === 'active') {
|
||
$metaBits[] = ['管理员', ''];
|
||
} elseif ($r === 'guest') {
|
||
$metaBits[] = ['访客', ''];
|
||
} elseif (!empty($p['account_id'])) {
|
||
$metaBits[] = ['已开通', ''];
|
||
}
|
||
if (($p['roster_source'] ?? '') === 'kin') {
|
||
$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 ?>"
|
||
data-search="<?= e($pshow . ' ' . $pReal . ' ' . (string)($p['email'] ?? '') . ' ' . (string)($p['org'] ?? '') . ' ' . (string)($p['phone_plain'] ?? '')) ?>"
|
||
<?php /* ⚠️ 首字母**分字段**、用空格隔开（前端逐段独立判子序列）。
|
||
把"姓名+称呼"拼成一串会造出跨字段巧合：用户实测「输 yy 搜出岳父」
|
||
—— 洪勇的称呼是"岳父" → hy + yf = hyyf → yy 跨边界命中。
|
||
服务端 Pinyin::matches 本来就是逐字段判的，这样两边口径一致。 */ ?>
|
||
data-initials="<?= e(trim(\App\Pinyin::initials($pReal) . ' ' . \App\Pinyin::initials($pNick))) ?>">
|
||
<?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">
|
||
<?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>。
|
||
① 现有的 e2e 断言就是按这个形状读「这一行显示的是谁」
|
||
（person_names()：只认 <div class="pname"> 内的第一段文本）——
|
||
包一层 span 会让它读到空串，6 条断言齐刷刷变红，
|
||
而页面看着完全正常（这种"改样式把测试打挂"最难查）；
|
||
② 包起来也没有任何用处：.pname 本身已经带字重与字号，
|
||
下面的关系标签/徽标都在姓名**之后**，不需要靠 span 定位。 */ ?>
|
||
<?= e($pshow) ?>
|
||
<?php /* 用户第 4 条：与我的关系放姓名右边（列表里一眼能看到） */ ?>
|
||
<?php if (!empty($p['label']) && $p['label'] !== '我'): ?>
|
||
<span class="rel-label"><?= e($p['label']) ?></span>
|
||
<?php endif; ?>
|
||
<?php foreach ($metaBits as [$b, $bTitle]): ?>
|
||
<span class="badge<?= $b === '我' ? ' badge-me' : ($b === '已开通' ? ' badge-open' : '') ?>"
|
||
<?= $bTitle !== '' ? 'title="' . e($bTitle) . '"' : '' ?>><?= e($b) ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php
|
||
// 用户第 3 条：一行放齐「手机号 / 生日 / 邮箱 / 工作单位」。
|
||
// 没填的项**整个 <span> 都不画** —— 留一个空标签只会让每行都长一截。
|
||
// 用户 2026-10-04 第 3 条：生日**阴历阳历都列**，且只显示月和日（不显示年）。
|
||
$facts = [];
|
||
if (($p['phone_plain'] ?? '') !== '') {
|
||
$facts[] = ['手机', (string)$p['phone_plain']];
|
||
}
|
||
foreach ((array)($p['birthdays'] ?? []) as [$bk, $bv]) {
|
||
$facts[] = [(string)$bk, (string)$bv];
|
||
}
|
||
if (trim((string)($p['email'] ?? '')) !== '') {
|
||
$facts[] = ['邮箱', (string)$p['email']];
|
||
}
|
||
if (trim((string)($p['org'] ?? '')) !== '') {
|
||
$facts[] = ['单位', (string)$p['org']];
|
||
}
|
||
?>
|
||
<?php if ($facts): ?>
|
||
<div class="pfacts">
|
||
<?php foreach ($facts as [$k, $v]): ?>
|
||
<span class="pfact"><span class="pfact-k"><?= e($k) ?></span><?= e($v) ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</a>
|
||
<?php /* 用户 2026-10-03 第 7 条：在 ⋯ 前面加一个「编辑」按钮，快速进这个人的编辑页。
|
||
为什么不做进 ⋯ 菜单里：改资料是**高频**操作（补生日、补电话），
|
||
藏进 ⋯ 里要点两下；而 ⋯ 里放的是"调整分组/移出名册"这类低频动作。
|
||
⚠️ 它是 <a>，且必须在 person-main 这个 <a> **外面**
|
||
—— a 套 a 是非法 HTML，浏览器会把 DOM 拆开。 */ ?>
|
||
<?php /* ⚠️ 行右侧三个动作收在一个 flex 容器里，**不再各自绝对定位**：
|
||
原来「编辑」写死 right:46px、「⋯」写死 right:8px，再来第三个按钮
|
||
就得继续猜偏移；而且「分组」按钮的宽度随分组名变化，写死必然重叠。
|
||
容器贴右、内部自然排开，.person-main 也就不用再靠 padding 让位。 */ ?>
|
||
<div class="person-actions">
|
||
<?php if ($canMove): ?>
|
||
<?php /* 用户 2026-10-04 第 1 条：名册要有地方改分组 → 「分组」按钮，
|
||
**直接显示当前分组**，点开就是分组列表，选中即改。
|
||
v24 第 10 批 #6：按钮本身不再内联 <details>+<form>+11 个 radio，
|
||
只带数据、交给全页共享的那一份浮层（理由见 $renderGrid 的注释）。 */ ?>
|
||
<button type="button" class="btn btn-ghost btn-sm person-group-btn<?= $grpName === '' ? ' is-none' : '' ?>"
|
||
data-pg-open="<?= $pid ?>"
|
||
data-pg-name="<?= e($pshow) ?>"
|
||
data-pg-cur="<?= $curGid ?>"
|
||
title="改 <?= e($pshow) ?> 的分组"><?= e($grpName !== '' ? $grpName : '分组') ?></button>
|
||
<?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): ?>
|
||
<button type="button" class="btn btn-ghost btn-sm person-more-btn"
|
||
data-pm-open="<?= $pid ?>"
|
||
data-pm-hint="<?= ($p['roster_source'] ?? '') === 'kin' ? '1' : '' ?>"
|
||
aria-label="更多操作" title="更多操作">⋯</button>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</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 ?>" data-filter-group>
|
||
<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>
|
||
<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 ($canMove): ?>
|
||
<?php /* 用户 2026-10-03 第 1 条：名册导入入口。
|
||
⚠️ 放在「添加成员」**左边**（次要动作在左、主要动作在右）——
|
||
日常还是一个个加，导入是换手机/换号时的一次性动作。 */ ?>
|
||
<a class="btn btn-ghost btn-sm" href="<?= e(url('people/import')) ?>">导入联系人</a>
|
||
<?php endif; ?>
|
||
<?php if (\App\Auth::isAdmin()): ?>
|
||
<a class="btn btn-sm" href="<?= e(url('people/new')) ?>">添加成员</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<?php /* 用户第 4 条：这句拖动提示**去掉**（用户直接点名要删）。
|
||
功能本身不变，只是不再占版面。 */ ?>
|
||
|
||
<?php /* 用户 2026-10-03 第 2 条：**输入即筛选**，不需要按回车。
|
||
第 3 条：搜索后的「清除」按钮要与搜索保持一致（同款 .btn 尺寸、同一行）。
|
||
⚠️ 这里仍然是个 form（没有 JS 时按回车照样能搜）——有 JS 时 filter.js 会把
|
||
提交拦下来，改成即时筛，避免整页刷新把焦点弹走。 */ ?>
|
||
<form class="search" method="get" action="index.php" data-roster-search>
|
||
<input type="hidden" name="r" value="people">
|
||
<input class="input" name="q" id="rosterSearch" data-filter="#rosterBox"
|
||
data-filter-empty="#rosterEmpty" data-filter-clear=".js-roster-clear"
|
||
value="<?= e($q) ?>" autocomplete="off"
|
||
placeholder="姓名 / 称呼 / 邮箱 / 手机号，或姓名首字母（如 yyq）">
|
||
<button class="btn btn-ghost btn-sm" type="submit">搜索</button>
|
||
<button class="btn btn-ghost btn-sm js-roster-clear<?= $q === '' ? ' is-hidden' : '' ?>"
|
||
type="button" data-href="<?= e(url('people')) ?>">清除</button>
|
||
</form>
|
||
<p class="small muted search-count" id="rosterCount" style="margin:-8px 0 10px"></p>
|
||
<p class="small muted" id="rosterEmpty" hidden>没有匹配的人。</p>
|
||
|
||
<?php if (!$people): ?>
|
||
<div class="empty">
|
||
<?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 else: ?>
|
||
<?php /* ⚠️ 搜索与否**都走同一张列表**（v24 用户第 2 条之后）。
|
||
原来搜索时会把分组拆掉、平铺成一堆卡片，看着"搜的时候样式变了"；
|
||
现在一律按分组呈现，filter.js 会把没命中的行藏起来，
|
||
整栏都不剩人时连栏一起收 —— 搜索结果与平时长得一样，只少了不匹配的。 */ ?>
|
||
<div class="roster<?= $canMove ? ' is-droppable' : '' ?>" id="rosterBox"
|
||
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
|
||
// 「未分类」栏永远画出来（哪怕是空的）—— 它是把卡片从某个分组里拖出来的落点。
|
||
// 提示语按需求删掉了（用户原话：「这些人还没归到任何分组里…这些提示，都去掉」）。
|
||
$renderBlock(0, '未分类', $grouped[0] ?? []);
|
||
?>
|
||
|
||
<?php if (!$groups): ?>
|
||
<p class="small muted" style="margin:0">
|
||
还没有任何分组。管理员可以在「系统设置 → 公共分组」里建一套全家共用的，
|
||
你也可以在「个人设置 → 我的分组」里加只给自己看的。
|
||
</p>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<?php /* ==================== 卡片动作的**共享浮层**（v24 第 10 批 #6）====================
|
||
这里只有**一份**「分组」表单和**一份**「移出名册」表单，全页共用。
|
||
每一行的按钮只带数据（data-pg-open / data-pm-open），点开时由 JS 把数据灌进来。
|
||
目的：把 2369 个 form / 27234 个 input / 22496 个 radio 压回个位数 ——
|
||
这正是 Bitwarden 那类密码管理器把页面拖卡的根源（它们要逐个 form 扫描）。
|
||
|
||
⚠️ 表单里留了原生「保存」按钮：即使 JS 出错，用户手动点它也能提交，
|
||
不会掉进"按钮点了没反应"的黑洞。 */ ?>
|
||
<?php if ($canMove): ?>
|
||
<div class="roster-menus" id="rosterMenus" hidden>
|
||
<div class="rm-panel" id="rmGroup" hidden>
|
||
<form method="post" action="<?= e(url('people/group')) ?>" class="pg-menu">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="person_id" value="">
|
||
<p class="pg-title">把「<b class="pg-who"></b>」分到</p>
|
||
<label class="pg-item">
|
||
<input type="radio" name="group_id" value="">
|
||
<span>未分类</span>
|
||
</label>
|
||
<?php foreach ($groups as $g): ?>
|
||
<label class="pg-item">
|
||
<input type="radio" name="group_id" value="<?= (int)$g['id'] ?>">
|
||
<span><?= e((string)$g['name']) ?></span>
|
||
</label>
|
||
<?php endforeach; ?>
|
||
<button class="btn btn-sm pg-save" type="submit">保存</button>
|
||
</form>
|
||
</div>
|
||
<div class="rm-panel" id="rmMore" hidden>
|
||
<p class="small muted person-move is-kin" hidden style="margin:0 0 6px">
|
||
因家谱关系自动加入；解除关系后自动移出。
|
||
</p>
|
||
<form method="post" action="<?= e(url('people/forget')) ?>" class="person-move is-self">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="person_id" value="">
|
||
<button class="btn btn-ghost btn-sm" type="submit">从我的名册移走</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($q !== '' || $canMove): ?>
|
||
<script>
|
||
(function () {
|
||
/* 「清除」按钮：有 JS 时不动页面、只清空输入并立刻重筛
|
||
（data-href 是没有 JS 时的兜底：直接跳回不带 q 的名册）。 */
|
||
var btn = document.querySelector('.js-roster-clear');
|
||
var input = document.getElementById('rosterSearch');
|
||
if (!btn || !input) { return; }
|
||
function syncClear() {
|
||
btn.classList.toggle('is-hidden', (input.value || '').trim() === '');
|
||
}
|
||
input.addEventListener('input', syncClear);
|
||
btn.addEventListener('click', function () {
|
||
// filter.js 里已经挂了"点它就清空重筛"，这里只负责同步按钮显隐；
|
||
// 没有 filter.js（极老浏览器）时退化成跳转。
|
||
if (!window.__fbFilterLoaded) { window.location.href = btn.getAttribute('data-href'); }
|
||
setTimeout(syncClear, 0);
|
||
});
|
||
syncClear();
|
||
})();
|
||
|
||
<?php /* ==================== 共享浮层的交互（v24 第 10 批 #6）====================
|
||
一行只留一个按钮，真正的表单在 #rosterMenus 里（全页一份）。
|
||
这里负责：点按钮 → 把该行的数据填进共享表单 → 浮层贴着那个按钮弹出来。 */ ?>
|
||
(function () {
|
||
var wrap = document.getElementById('rosterMenus');
|
||
if (!wrap) { return; }
|
||
var gPanel = document.getElementById('rmGroup');
|
||
var mPanel = document.getElementById('rmMore');
|
||
var openFor = null; // 当前为哪张卡开着
|
||
|
||
function closeAll() {
|
||
wrap.hidden = true;
|
||
if (gPanel) { gPanel.hidden = true; }
|
||
if (mPanel) { mPanel.hidden = true; }
|
||
openFor = null;
|
||
}
|
||
|
||
/* 浮层贴到触发按钮下方；贴太靠右就向左收，贴太靠下就翻到上方 */
|
||
function place(panel, btn) {
|
||
var b = btn.getBoundingClientRect();
|
||
var w = panel.offsetWidth, h = panel.offsetHeight;
|
||
var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight;
|
||
var left = Math.min(Math.max(8, b.right - w), vw - w - 8);
|
||
var top = b.bottom + 6;
|
||
if (top + h > vh - 8) { top = Math.max(8, b.top - h - 6); }
|
||
panel.style.left = Math.round(left) + 'px';
|
||
panel.style.top = Math.round(top) + 'px';
|
||
}
|
||
|
||
document.addEventListener('click', function (e) {
|
||
var t = e.target;
|
||
if (!t || !t.closest) { return; }
|
||
|
||
// ---- 分组 ----
|
||
var gb = t.closest('[data-pg-open]');
|
||
if (gb) {
|
||
e.preventDefault();
|
||
var pid = gb.getAttribute('data-pg-open');
|
||
var cur = parseInt(gb.getAttribute('data-pg-cur') || '0', 10) || 0;
|
||
var form = gPanel.querySelector('form');
|
||
form.querySelector('input[name="person_id"]').value = pid;
|
||
gPanel.querySelector('.pg-who').textContent = gb.getAttribute('data-pg-name') || '';
|
||
// 预选当前分组
|
||
Array.prototype.forEach.call(form.querySelectorAll('input[name="group_id"]'), function (r) {
|
||
r.checked = (parseInt(r.value || '0', 10) || 0) === cur;
|
||
});
|
||
mPanel.hidden = true;
|
||
gPanel.hidden = false;
|
||
wrap.hidden = false;
|
||
place(gPanel, gb);
|
||
openFor = pid;
|
||
return;
|
||
}
|
||
|
||
// ---- ⋯ ----
|
||
var mb = t.closest('[data-pm-open]');
|
||
if (mb) {
|
||
e.preventDefault();
|
||
var pid2 = mb.getAttribute('data-pm-open');
|
||
var kin = mb.getAttribute('data-pm-hint') === '1';
|
||
mPanel.querySelector('.is-kin').hidden = !kin;
|
||
mPanel.querySelector('form.is-self').hidden = kin;
|
||
if (!kin) {
|
||
mPanel.querySelector('form.is-self input[name="person_id"]').value = pid2;
|
||
}
|
||
gPanel.hidden = true;
|
||
mPanel.hidden = false;
|
||
wrap.hidden = false;
|
||
place(mPanel, mb);
|
||
openFor = pid2;
|
||
return;
|
||
}
|
||
|
||
// 点浮层内部 → 不动
|
||
if (wrap.contains(t)) { return; }
|
||
closeAll();
|
||
}, true);
|
||
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') { closeAll(); }
|
||
});
|
||
window.addEventListener('resize', closeAll);
|
||
window.addEventListener('scroll', function () { if (openFor) { closeAll(); } }, true);
|
||
|
||
/* 选中即提交（与原来一样是"锦上添花"：面板里那个「保存」按钮一直都在） */
|
||
document.addEventListener('change', function (e) {
|
||
var inp = e.target;
|
||
if (!inp || inp.type !== 'radio' || inp.name !== 'group_id') { return; }
|
||
var form = inp.form;
|
||
if (!form || !form.classList || !form.classList.contains('pg-menu')) { return; }
|
||
if (typeof form.requestSubmit === 'function') { form.requestSubmit(); }
|
||
else { form.submit(); }
|
||
});
|
||
})();
|
||
</script>
|
||
<?php endif; ?>
|