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

v24 第 6 轮：名册导入 / 两种备注 / 多段工作经历 / 家谱卡片与首字母检索修正

Browse Source 
用户 2026-10-03 第二批（8 条）。逐条落点：

1. **名册导入**（新）：支持 **vCard 3.0/4.0（.vcf）** 与 **CSV/TSV**（中英文表头都认）。
   新增 `app/ContactImport.php`（纯解析）+ `app/ContactImporter.php`（判重+落库）。
   判重按 **手机号（哈希，精确）→ 姓名（大小写无关）**；命中已有的人**只补空字段，
   绝不覆盖**（批量覆盖没法回退）。
   解析上要处理的三件事都处理了：**折行接回**（长名字/地址会被按字节折断）、
   转义还原（`\,` `\;` `\n`）、多值收全（TEL/EMAIL/ADR 可能出现多次）。
   UTF-16/GBK 的 vcf 也认（手机导出的常见编码）。
2. 成员详情页：右上角「移除」→ **「返回」**（回名册）；「删除」移到页面**最下方**
   （在「开通登录账号」下面），并改成 `<details>` 两步确认 + 写清会连带删掉什么。
3. 编辑资料里的「这个人的一句话」**去掉** —— 那句话只能**本人**改。
   ⚠️ 落法是「这一栏只在改自己时出现」：用户要的是"别人不能替他写"，
   而不是"这句没人能填"；服务端也只在 `$isSelf` 时读表单，否则管理员一编辑就把它清空。
4. **工作单位 / 职务 / 职称可以有多段**（新表 `person_jobs`）：表单是一组"经历行"
   （单位/职务/职称/起止年月/备注，可 ＋/×），详情页按"现在 + 历史"列出。
   `persons.org/title` 保留，语义变成"当前那段的快照"（列表页等只要"现在在哪儿"），
   升级时把老的 org/title 回填成一段经历。
5/备注分两种：「自我介绍」（`persons.note`，他本人写的、别人看得到）与
   **「我对他的私人备注」**（新表 `person_notes`，每人每对象一条，**只有写的人自己看得到**）。
   详情页有独立的一块；表单里只在"编辑别人"时出现。
6. 成员表单：**头像放到最前**、去掉「选择文件」按钮（点那张默认头像即选文件）；
   表单标签统一 15px/600（原来 13–14px，和 12px 的灰字提示分不出层级）。
7. 名册列表：⋯ 前面加**「编辑」**按钮（改资料是高频动作，藏进 ⋯ 要点两下）。
8. 家谱：
   · **首字母检索 bug**：输入 `yy` 会搜出「岳父/洪勇」。根因是前端把
     **姓名与称呼的首字母拼成一串**再判子序列 —— 洪勇的称呼是"岳父" → `hy`+`yf`=`hyyf`
     → `yy` 跨字段命中。改成**逐字段独立判**（服务端本来就是逐字段判的，两边现在同口径）。
   · **卡片仍比头像宽**：头像是 **1:1（正方形）** 槽位，卡片里却写成 96×72 的长方形 +
     `object-fit: contain` → 照片被缩到 72 宽、左右各留 12px 白 → 看着"框比头像宽"。
     改成**正方形头像区 + `object-fit: cover`**（90×128 卡片，88×88 头像区）。
   · 右上角加**「我的家谱」**按钮（只在看别人的家谱时出现 —— 看自己的时候点它没意义）。

**测试新增**（都能变红，且做过反向验证）：
- `_fb_import_test.py` 21 条：新人新建 / 手机号命中不重复建人 / **已有字段一个都不被覆盖** /
  缺的字段被补上 / 反复导入幂等 / 只给姓名也能命中 / 认不出的文件被明确拒绝，
  外加 ⑱ **"有单位但没有经历行"的人**（最容易漏的覆盖路径）。
- `_fb_roster_filter_test.js`（jsdom，用真实渲染出的 HTML）8 条：直击
  「输 yy 不该命中 岳父/洪勇」；反向验证时把实现改回拼接写法 → ① 立刻红。
- 改动过程中被测试抓出**两个真 bug**并已修：
  ① 导入时给"已有单位的人"也插经历 → `PersonJob::syncCurrent()` 回写把这人的单位**覆盖**了；
  ② `syncCurrent()` 在经历表为空时会把 `persons.org/title` **清空** ——
     而它被"编辑资料"这类常规路径调用一次就触发，属于**随手一保存就丢数据**。
     现在空表直接 return（"经历表不是唯一的一份"）。

**战绩**：e2e **775/0** · 导入 21/0 · 第 5 轮专项 91/0 · 家谱 34/0 · 几何 428/0 ·
移动端 688/0 · 交互 97/0 · 升级 126/0。
线上：schema **v15**、指纹一致、`person_jobs`/`person_notes` 已建、
6 条老的"工作单位"全部回填成经历、13 个文件 md5 与本地一致、错误日志无新增。
This commit is contained in:
laoyang
2026-10-03 19:27:14 +08:00
parent 218cdf74fc
commit b5725b449a
14 changed files with 1639 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/people/form.php
+164 -38
View File
@@ -66,6 +66,39 @@ $ctHints = [
<div class="card card-pad">
<div class="form-grid">
<?php
// 裁剪比例不是拍脑袋定的，而是由「这个位置显示成什么形状」决定（见 App\ImageSlot）。
// 前端拿这些 data-* 去生成裁剪框，服务端拿同一个槽位去最终裁切 —— 一处定义、两处使用。
$avSlot = \App\ImageSlot::get('avatar');
?>
<?php /* 用户 2026-10-03 第 6 条：**头像放在表单最前面**，并且**去掉「选择文件」按钮**
—— 直接点那张（默认）头像就是选文件，选完弹裁剪框。
好处：① 省掉一整行"选择文件 + 当前头像"的重复控件；
② 一眼就知道"这里能换头像"（按钮式的 file 控件反而看不出当前长什么样）。 */ ?>
<div class="field full avatar-field">
<label>头像</label>
<div class="avatar-picker">
<img id="avatar-preview" src="<?= e($avatarUrl) ?>" alt=""
title="点击更换头像"
data-has-avatar="<?= trim((string)($person['avatar'] ?? '')) !== '' ? '1' : '0' ?>">
<?php /* 真正吃文件的 input：视觉上藏起来，由上面的图片代它触发（label/JS 都行，
这里用 JS 点它，兼容性最好，也不依赖 for/id 配对）。 */ ?>
<input class="sr-only" 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="avatar-hint small muted">
点一下换头像；选完会弹裁剪框。<br>
头像是 1:1 正方形，多大都能传，保存时自动缩成 <?= (int)$avSlot['w'] ?>×<?= (int)$avSlot['h'] ?>。
</span>
</div>
</div>
<div class="field">
<label for="name">姓名 *</label>
<input class="input" id="name" name="name" value="<?= e(old('name', $person['name'] ?? '')) ?>" required>
@@ -119,14 +152,23 @@ $ctHints = [
<!-- 生日块已挪到表单最底部：大多数情况下生日由身份证号读出、三个都对，
不需要动（用户原话：生日什么的应该放下面）。 -->
<?php /* 用户 2026-10-03 第 3 条：「编辑资料中，**这个人的**一句话，这个地方去掉，
每个人的一句话，**只能他自己修改**。如果他不修改，就是默认空的。」
→ 所以这一栏**只在改自己时出现**（$isSelf）：
别人编辑他时看不到、也改不了（那正是用户要"去掉"的场景）；
而它确实得有个入口让他自己填，否则"只能他自己修改"就没有落点。
⚠️ 服务端同理：people/update 只在 $isSelf 时读 slogan，
否则"管理员编辑一次就把本人的那句话清空"。 */ ?>
<?php if ($isSelf): ?>
<div class="field full">
<label for="slogan">这个人的一句话</label>
<label for="slogan">我的这一句话</label>
<input class="input" id="slogan" name="slogan" maxlength="200"
value="<?= e(old('slogan', $person['slogan'] ?? '')) ?>"
placeholder="可留空；留空时用家庭统一的那句">
<span class="tip">显示在这个人自己的首页标题下面。本人也可以在自己的资料页里改。</span>
placeholder="可留空，如：慢慢来，比较快">
<span class="tip">只有你自己能改这句；显示在自己首页标题下面。留空就不显示。</span>
<?php if (!empty($errors['slogan'])): ?><span class="err"><?= e($errors['slogan']) ?></span><?php endif; ?>
</div>
<?php endif; ?>
<?php if ($canEditAll): ?>
<div class="field">
@@ -145,16 +187,53 @@ $ctHints = [
<?php if (!empty($errors['email'])): ?><span class="err"><?= e($errors['email']) ?></span><?php endif; ?>
</div>
<div class="field">
<label for="org">工作单位</label>
<input class="input" id="org" name="org"
value="<?= e(old('org', $person['org'] ?? '')) ?>" placeholder="可留空">
</div>
<div class="field">
<label for="title">职务 / 职称</label>
<input class="input" id="title" name="title"
value="<?= e(old('title', $person['title'] ?? '')) ?>" placeholder="可留空">
<?php /* 用户 2026-10-03 第 4 条：单位/职务/职称**可以有多段**（记录工作变化）。
所以这里是一组"经历行"，而不是三个单值输入框。
⚠️ 表单字段名是平行数组（job_org[] / job_title[] …），
服务端 read_jobs_input() + PersonJob::replace() 整组替换。 */ ?>
<div class="field full">
<label>工作经历</label>
<p class="small muted" style="margin:0 0 10px">
一个人可以有多段工作 —— 换过单位、提过职称都记下来。
<b>不填「结束年月」= 现在还在那儿</b>（列表里会标「现在」）。
</p>
<?php
// 回填优先级：老表单回显(old) → 库里已有的经历 → 完全空（新增时给一行空的）
$jobRows = $jobRows ?? [];
if (!$jobRows) {
$jobRows = [[]]; // 新增时给一行空白行，省得还要点"加一段"
}
?>
<div class="job-list" id="jobList">
<?php foreach ($jobRows as $jr): ?>
<div class="job-row">
<div class="job-cell">
<label class="job-lb">单位</label>
<input class="input" name="job_org[]" value="<?= e((string)($jr['org'] ?? '')) ?>" placeholder="如：中国海洋大学">
</div>
<div class="job-cell">
<label class="job-lb">职务</label>
<input class="input" name="job_title[]" value="<?= e((string)($jr['title'] ?? '')) ?>" placeholder="如：副院长">
</div>
<div class="job-cell">
<label class="job-lb">职称</label>
<input class="input" name="job_rank[]" value="<?= e((string)($jr['rank_name'] ?? '')) ?>" placeholder="如：副教授">
</div>
<div class="job-cell job-cell-sm">
<label class="job-lb">起</label>
<input class="input" type="month" name="job_start[]" value="<?= e((string)($jr['start_ym'] ?? '')) ?>">
</div>
<div class="job-cell job-cell-sm">
<label class="job-lb">止</label>
<input class="input" type="month" name="job_end[]" value="<?= e((string)($jr['end_ym'] ?? '')) ?>">
</div>
<button type="button" class="btn btn-ghost btn-sm job-del" title="删掉这一段">×</button>
</div>
<?php endforeach; ?>
</div>
<div class="btn-row" style="margin-top:8px">
<button type="button" class="btn btn-ghost btn-sm" id="jobAdd">＋ 再加一段</button>
</div>
</div>
<?php if ($canEditAll): ?>
@@ -176,11 +255,32 @@ $ctHints = [
value="<?= e(old('address', $person['address'] ?? '')) ?>" placeholder="可留空">
</div>
<?php /* 用户 2026-10-03 第 5 条：备注分两种 ——
① 这一栏是**这个人自己的**自我介绍/格言（他本人也能在个人设置里改，
别人打开他的资料能看到）；
② 「我对他的私人备注」在下面单独一块（只有写的人自己看得到）。 */ ?>
<div class="field full">
<label for="note">备注</label>
<label for="note">自我介绍（他自己写的）</label>
<textarea class="input" id="note" name="note" placeholder="爱吃辣、对芒果过敏、怕坐过山车……"><?= e(old('note', $person['note'] ?? '')) ?></textarea>
<span class="tip">这是<b>他本人</b>的自我介绍，别人看得到。改的是同一份 —— 他也能在个人设置里改。</span>
</div>
<?php /* 用户第 5 条：**我对他的私人备注** —— 只有我自己看得到（存在 person_notes 里）。
只在"编辑别人"时出现（自己看自己不需要"我对我的备注"）。
⚠️ 它是独立的出口（自己的路由 + 自己的表），不与上面那份混在一起：
「他愿意公开说的」与「我对他的私下记录」是两件事、两种可见性。 */ ?>
<?php if ($isEdit && !$isSelf): ?>
<div class="field full">
<label for="myNote">我对 <?= e((string)$person['name']) ?> 的备注（只有我自己看得到）</label>
<textarea class="input" id="myNote" name="my_note" rows="2"
placeholder="怎么认识的、要注意什么、上次见面聊了什么……"><?= e((string)($myNote ?? '')) ?></textarea>
<span class="tip">
<b>只有你自己看得到</b>，别人（包括他本人）都看不到 ——
这里写的是"我和他之间的事"，不是他的公开资料。
</span>
</div>
<?php endif; ?>
<!-- ==================== 补充联系方式（可多条，对齐 vCard） ==================== -->
<?php foreach (['phone', 'email', 'address', 'url'] as $ctKind): ?>
<div class="field full ct-block" data-ct-kind="<?= $ctKind ?>">
@@ -200,30 +300,6 @@ $ctHints = [
</div>
<?php endforeach; ?>
<?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/*"
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 正方形）。多大都能传，保存时自动缩放成 <?= (int)$avSlot['w'] ?>×<?= (int)$avSlot['h'] ?>。</span>
</div>
<div class="field">
<label>当前头像</label>
<img id="avatar-preview" src="<?= e($avatarUrl) ?>" alt=""
style="width:88px;height:88px;border-radius:12px;object-fit:cover;border:1px solid var(--line)">
</div>
<!-- ==================== 三个生日（放在最后：多数情况不用动） ==================== -->
<div class="field full">
<label>生日</label>
@@ -306,3 +382,53 @@ $ctHints = [
</div>
</div>
</form>
<script>
(function () {
/* ---- 头像：点图即选文件（用户 2026-10-03 第 6 条）----
真 input[type=file] 视觉上藏起来了（.sr-only），点图代它触发。
⚠️ 不要用 <label for> 包住图片来做这件事：一旦图被包进 label，
.avatar-picker 的 hover/光标语义会变，而且有的浏览器在 label 里
点 <img> 不会激活 file 控件（要额外 CSS 才能稳）。直接点 input 最省事。 */
var prev = document.getElementById('avatar-preview');
var file = document.getElementById('avatar');
if (prev && file) {
prev.addEventListener('click', function () { file.click(); });
prev.style.cursor = 'pointer';
}
/* ---- 工作经历：＋/× 增删一段（用户第 4 条）----
⚠️ 模板里的行是**服务端渲染**的（首屏没有 JS 也能填、也能提交），
这里只加"再加一段 / 删掉这段"两个交互 —— 渐进增强，不是二选一。 */
var list = document.getElementById('jobList');
var addBtn = document.getElementById('jobAdd');
function bindDel(row) {
var del = row.querySelector('.job-del');
if (!del) { return; }
del.addEventListener('click', function () {
var all = list.querySelectorAll('.job-row');
if (all.length <= 1) {
// 只剩一行时"删"= 清空这一行（而不是消失），否则页面会没有输入框可填
row.querySelectorAll('input').forEach(function (i) { i.value = ''; });
return;
}
row.remove();
});
}
if (list) {
Array.prototype.forEach.call(list.querySelectorAll('.job-row'), bindDel);
if (addBtn) {
addBtn.addEventListener('click', function () {
var first = list.querySelector('.job-row');
if (!first) { return; }
var row = first.cloneNode(true);
row.querySelectorAll('input').forEach(function (i) { i.value = ''; });
list.appendChild(row);
bindDel(row);
var f = row.querySelector('input');
if (f) { f.focus(); }
});
}
}
})();
</script>