Files
FamilyBook/templates/people/pick.php
T
laoyang 8d79857f1a v54:首页任务标题截断(真根因=两列网格被撑破)/ 名册分组→标签且候选读词表 / 旅程地图视图 / 旅程设置按钮 / 显示方式默认列表或地图
用户 2026-10-16 傍晚五条。

① 首页「近期任务」标题太长会挤成两行
   用户原话:「首页**近期任务**那个地方要注意截断:如果任务标题太长,
   会把这个任务**挤成两行**。」
   🔴🔴 **真根因是两层,第一版只修了表面**:
     · 表面:`.dash-what` 只有 `flex:1 1 auto; min-width:0`,**缺** nowrap/hidden/ellipsis
       ⇒ 收缩后文字在框内换行;
     · 真身:`.home-duo` 是**两列 grid**,grid 子项默认 `min-width: auto`
       ("我最小也得装下我的内容")⇒ 一条长标题把那一列顶到 **1763px**
       (父 `home-duo` 才 1032px)⇒ **整个两列布局被撑破**、页面横向溢出到 **2089px**
       (视口 1440)。⇒ 行宽 1721px、`scrollWidth === clientWidth`,
       **`text-overflow: ellipsis` 看起来"没生效"** —— 其实容器自己先爆了。
   修法:`.home-duo > * { min-width: 0; }`,且 **整条 flex 链**都补
     (`.hd-pane` → `.hd-pane-head` → `.hd-pane-body` → `.dash-list/.tk-list` → `.tk-row`)
     —— 链上任何一层漏了,收缩就断在那一层、下面的 nowrap 全白写。
   配套:任务标题加 `title=` 悬停看全。
   ⚠️ 这是本项目**第二次**踩 flex/grid 的 `min-width:auto`(v53 的 `.mv-grid` 是同类)。
      **以后"文字截断不生效"先量容器有没有被撑破**。

② 名册「分组」→「标签」;打标签的候选要**从设置里读**
   用户原话:「现在名册里面给人打标签的时候,**这个标签数据是从哪读出来的**呀?
   在这个名册的设置页面,有很多分组,现在还叫分组。但是打标签的时候,
   **却不是从这些分组里读出来的**。……应该叫「名册标签」,是不是?
   **应该从这里面把所有标签都读出来**吧?……以后就没有分组的概念了,
   **全部都是标签的概念**。」
   🔴 **用户观察得完全正确,这是两套数据源**:
     · 设置页显示的词表来自 `person_groups`(**分组表**);
     · 打标签的候选来自 `PersonTag::cloud()`(**你已经打过的词**,现算的);
     ⇒ 两边根本不是一个数据源 ⇒ "设置里列着一堆、打标签时却只有几个"。
   修法:**`PersonTag::choices()` = 设置页词表 ∪ 我用过的词**(并集,词表在前)。
     · 词表里的词**还没用过**也能一点就打上(这正是词表的意义);
     · 用过的词补在后面(历史不丢);
     · 名册列表 / 新增 / 编辑 / 挑人 / 导入 **五处同一个函数**。
   界面口径全面改"标签"(**表名仍是 `person_groups`**:改名要背着 `PersonGroup` 类、
   `person_roster.group_id`、以及**另一个会话正在写的 `app/ApiHandler.php`**
   (它引用了 `PersonGroup::orderFor`)一起动,风险远大于收益):
     · `_person_groups.php` 标题「名册标签」、按钮「加一个我自己的标签」;
     · 删除文案改成"只是从候选里去掉这个词,已打在别人身上的不受影响"
       (**语义真的变了**:标签是各自身上的字符串,不是引用);
     · `people/_settings_menu.php`、`people/settings.php`、`settings/me.php`、
       `settings.php`(「公共分组」→「公共标签」)全部同步。
   顺带按"全部都是标签"改另两条入口:
     · `people/pick.php`「加进哪一组」下拉 → **打标签**;
     · `people/import.php` 同上;`ContactImporter::run()` 加 `$tags` 参数。
   🔴 新增 `PersonTag::addOne()`(**追加**一个标签)—— 这两处**绝不能用 `setFor()`**
      (它是"先 DELETE 再 INSERT"的整组替换)⇒ 会把人**原有**的标签清光
      (症状是"用一次导入,别人原有的标签全没了",极难联想)。
   ⚠️ `group_id` 在 pick/import 的**服务端仍收着**(老书签/脚本兼容),只是界面不再展示。

③ 旅程模块加**地图视图**(读 TripLog 移植)
   用户原话:「你去读一下 TripLog 的代码,在旅程这个模块,**可以在地图上显示旅程数据**。
   1. 先读一下它之前那个代码是怎么实现的,**在我们的旅程模块也实现一下**。」
   读 TripLog(`templates/activities/index.php`)得到的要点:
     · 用**高德 AMap**(合规白名单内,绝不是境外瓦片);
     · `position` 必须是 **[lng,lat] 数组**(传 `{lng,lat}` 裸对象会让 AMap 抛错、
       整个绘制循环当场中断 —— 它注释里写着"批 11 的光秃秃地图就是它");
     · `setFitView()` 后**上限 11 级**(只有一趟时会被放大到街道级,那是导航视角);
     · `.amap-marker` 整层 `pointer-events:none`(否则包装层挡住别家卡片的点击);
     · **容器必须有固定高度**(0 高度 → 空白地图)。
     它那套"同城环形扇开"是**几百行几何**,本仓数据量没压出这个问题 ⇒ **有意不做**。
   本仓数据更规整:`trip_nodes` 早有 `from_lng/from_lat/to_lng/to_lat`(v17 批)
   + `from_city/to_city` ⇒ 新增 `Trip::attachSpots()`:
     ① 有坐标取**重心**(不是端点 —— 端点会让"青岛→伊春"偏到某一头);
     ② 没坐标退到**城市重心**(`Geo::lookup` 离线城市表,**不发网络请求**:
        列表页几十趟若逐条打高德逆地理,一次开页就是几十个外部请求);
     ③ 都没有就不上图(列表里照常有,模板会说清"有几趟没上图")。
     🔴 城市那里**必须也取重心**:`cities()` 的顺序是**按时间**(出发地在最前),
        取"第一个城市"会让**所有旅程都叠在家上**、地图毫无信息量。
   布局:两个视图用**标签页**(`?view=map` 是**链接**不是纯 JS 按钮 ——
     书签/前进后退/无 JS 都正确;也**有意不**把地图藏在 `display:none` 里,
     高德在 0 尺寸容器里会渲染空白)。
   高德 SDK 加载器重构:原来 `fbLoadAddr()` 顺带拉 `addr_suggest.js`,
   而地图只用 SDK 自带的 `AMap.Map/Marker` ⇒ 抽出 `window.fbAmapSdk()`(只拉 SDK)、
   新增 `fb-amap` meta(不带 plugin),`fb-addr` 那份共用同一加载器。

④ 旅程列表页「新建旅程」**后面**加「设置」按钮
   用户原话:「2. 在旅程的「新建旅程」后面也加一个「设置」按钮。」
   ⇒ 补 `_settings_menu.php`(设置恒排最右),菜单**第一条**加「显示方式」。

⑤ 显示方式:默认列表还是地图(用户自配)
   用户原话:「3. 里面的设置让用户自己配置:**到底默认显示旅程列表,还是用地图显示**。」
   ⇒ 新增 `trips/display`(设置页 + `?set=` 快速设置)与 `trips/display_save`,
     存 **`user_settings.trip_default_view`**(每人一份,**不是**全家设置)。
   ⚠️ 访客也能改(只影响自己看到的默认,不是数据变更)。

验证(新增 2 套件 + 更新 e2e/deploy 断言):
 · _fb_v54_ui.py(**33 条**真机断言)
 · _b54_falsify.py(**11 注入 / 11 全抓**,基线 33/0)
 · e2e **1518/0**;familybook_deploy.sh 加「第54批形态」段(**24 条**)
 · 部署 **0 FAIL**;线上 **20 个文件 md5 逐字节一致**;
   线上实测:词表 24 条、`choices()` 24 条、**`cloud` 15 条全部 ⊆ `choices`**、
   4 趟旅程全部可上图(样例落在济南·青岛重心);诊断页已删复验 404

⚠️ 本轮踩坑(已写进 pitfalls.md):
 · 🔴🔴 **"文字截断不生效"要先量容器有没有被撑破**(第一嫌疑是 flex/grid 子项
   `min-width:auto`,不是 `text-overflow` 写错);
 · **反向断言("不该再出现 X")必须用 `_code_has`(剥注释)** ——
   需求原话正当留在注释里,裸 `grep -F` 会命中自己的说明(本轮部署假红一次);
 · **冗余防线会让反向验证打不红**(两处 `min-width:0` 只去掉一条 ⇒ 探针照旧全绿,
   注入必须一起去掉);
 · **界面多加一个字符就可能打歪既有断言**(我在词表管理页给标签名加了 `#`,
   把 e2e 的 `my_group_order()` 读成 `#家人`)。
2026-10-17 00:15:06 +08:00

123 lines
6.1 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
/**
* 「从家里已有的人里挑」—— 添加成员的第二个入口。
*
* 为什么要有这一页:同一个人不该被录两遍。
* 如果张伟已经被妈妈录进名册了,我再走「添加成员」录一遍,
* 系统里就会出现两条「张伟」—— 账号、亲属关系、生日各存一份,之后永远对不上。
* 所以这里把「这个家庭里已经有的人」列出来(带账号徽标,好认出是谁),
* 勾一个就把他**复用**进我的名册,一个字段都不用重填。
*
* 需求原话:「当一个用户添加一个名册的时候…如果这个人员信息在系统当中已经存在,
* 那么他可以直接复用这个人的信息,就不需要再重新录入。」
*/
?>
<?php
/* 🔴 v54(用户 2026-10-16 第 2 条):打标签的候选 —— 设置页配的词表 ∪ 我用过的词。
⚠️ 显式给默认值(模板可能被别处 require、未必总带上这个键)。 */
$tagChoices = $tagChoices ?? [];
$groups = $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')) ?>">回名册</a>
</div>
</div>
<?php if (!$people): ?>
<div class="empty">
<b>没有可挑的人了</b>
家里已经有的人,都在你的名册里了。要加新人就点「添加成员」。
</div>
<?php else: ?>
<form method="post" action="<?= e(url('people/pick')) ?>">
<?= csrf_field() ?>
<div class="card card-pad">
<p class="small muted" style="margin:0 0 14px">
这些人都已经在这个家庭里(可能是别人先录的)。勾上就会出现在你的名册里 ——
<b>资料是共用的那一份</b>,你以后改的也是同一份。
</p>
<?php /* 🔴 v54(用户 2026-10-16 第 2 条):原来这里是「加进哪一组」的下拉(group_id)。
用户原话:「现在已经没有分组的概念了,**全部都是标签的概念**。」
⇒ 换成**打标签**(与「添加成员」页同一个契约:`name=tags` + `#ptBlock` 那套)。
候选来自 `PersonTag::choices()`(设置页配的词表 ∪ 我用过的词),
服务端 people/pick 会把这一串标签逐个落进 person_tags(owner=我)。
⚠️ 勾了多个人时,这串标签会**给每个人各打一遍** —— 一次挑进来的人
往往是同一类("小学同学"),所以这正是想要的默认。 */ ?>
<div class="field" style="margin-bottom:16px">
<label for="pickTags">给他们打标签(可留空,之后在卡片上也能改)</label>
<?php if (!empty($tagChoices)): ?>
<div class="pt-picks pf-picks" style="margin-bottom:8px">
<?php foreach ($tagChoices as $tg): ?>
<label class="pt-pick">
<input type="checkbox" value="<?= e((string)$tg) ?>">
<span>#<?= e((string)$tg) ?></span>
</label>
<?php endforeach; ?>
</div>
<?php endif; ?>
<input class="input" id="pickTags" name="tags" maxlength="300"
placeholder="如:小学同学 球友(用空格分开)" autocomplete="off">
<span class="tip">一个人可以有多个标签;打上的标签只在你自己的名册里可见。</span>
</div>
<?php /* 用户 2026-10-03 第 2 条:所有"找个人"的地方都要**输入即筛选**。
这一页也是找人的地方(家里已有的人可能有几十个),
所以同样挂上 filter.js —— 行上带 data-search / data-initials。 */ ?>
<div class="search pick-search">
<label class="sr-only" for="pickFilter">筛选</label>
<input class="input" id="pickFilter" type="text" autocomplete="off"
data-filter="#pickList" data-filter-empty="#pickEmpty"
placeholder="输入名字或拼音首字母筛选,如 yyq">
</div>
<p class="small muted" id="pickEmpty" hidden>没有匹配的人。</p>
<ul class="pick-list" id="pickList">
<?php foreach ($people as $p): $pid = (int)$p['id']; ?>
<?php
// 显示名优先用「我怎么称呼他」:别人录的名字未必是我对他的叫法
$shown = (string)($p['my_nickname'] ?? '');
if ($shown === '') {
$shown = (string)$p['name'];
}
$pReal = (string)$p['name'];
?>
<li class="pick-row"
data-search="<?= e($shown . ' ' . $pReal . ' ' . (string)($p['email'] ?? '')) ?>"
data-initials="<?= e(\App\Pinyin::initials($pReal)) ?>">
<label class="pick-item">
<input type="checkbox" name="ids[]" value="<?= $pid ?>">
<img class="pick-ph" src="<?= e(avatar_url($p['avatar'])) ?>" alt="">
<span class="pick-name">
<?= e($shown) ?>
<?php if ($shown !== (string)$p['name']): ?>
<span class="muted small">· 本名 <?= e((string)$p['name']) ?></span>
<?php endif; ?>
<?php if (!empty($p['is_placeholder'])): ?><span class="badge">待确认</span><?php endif; ?>
<?php
$r = (string)($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 ($r !== '') {
echo '<span class="badge badge-open">已开通</span>';
}
?>
</span>
</label>
</li>
<?php endforeach; ?>
</ul>
<div class="btn-row">
<button class="btn" type="submit">加进我的名册</button>
<a class="btn btn-ghost" href="<?= e(url('people')) ?>">取消</a>
</div>
</div>
</form>
<?php endif; ?>