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

图片可裁剪 · 名册按关系分组 · 个人设置独立 · 顶栏下拉菜单

Browse Source 
① 上传图片一律可裁剪，比例由图位决定
   新增 app/ImageSlot.php 统一配置（头像 1:1/512×512；题图 16:9 只留注释，
   将来启用只加一行）。前端只挑区域、写回归一化矩形 "x,y,w,h"，真正裁剪在服务端
   Upload::fitRegion()：夹回图内 → 在框内居中收缩到目标比例（不外扩）→ 钉住 sx+sw ≤ w。
   比例解析单独写 parseRatioAttr()：parseFloat('16:9') 得 16，会把题图裁成细长条且不报错。

② 名册按关系分组，顺序每人可自定
   分类全家共用（person_groups，另一个人可以自己加分类）；「自己的」只体现在顺序上
   （user_settings.group_order，每人一份）。persons.group_id 故意不加外键（老库只能
   ADD COLUMN），完整性由 PersonGroup 保证：删分类把人置回未分类，人不会从名册消失。

③ 设置分两级：系统设置 / 个人设置
   个人设置拆成 templates/settings/me.php + _profile.php + _nicknames.php，
   取代 templates/people/me.php（旧路由与旧表单仍兼容）。

④ 右上角「姓名/头像 + 下拉菜单」
   原来是两个裸链接，窄屏会被 CSS 藏掉导致改密码/退出不可达；改成 <details> 零 JS 菜单
   （app.js 只补「点外面 / Esc」）。菜单项：个人设置 / 系统设置（管理员）/ 修改密码 / 退出登录。

Schema 版本 3 → 4；安装与老库升级共用 PersonGroup::backfillMissing() 一条回填路径。

验证：php -l 全量；e2e 202/0（新增「关系分组」与「图片裁剪」两节）；老库升级 49/0；
桌面几何 108/0；移动端几何 192/0（360/375/390/414）；交互 76/0；
反向验证 31/31（逐条把修复改回旧写法，指定的目标断言必须变红）；
部署后本地↔线上 72 个文件 sha256 逐字节一致。
This commit is contained in:
laoyang
2026-09-30 11:06:22 +08:00
parent 7e9b4520c0
commit 1c460a0e83
18 changed files with 1637 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/settings/_nicknames.php
+45
View File
@@ -0,0 +1,45 @@
<?php
/**
* 「我怎么称呼家人」（个人设置的一块）。
*
* 称呼是**视角属性**：同一个「小明」，妈妈叫"明明"、姐姐叫"小弟"。
* 所以它不属于小明这个人的档案，而是"我 → 他"这一对关系上的一个值，
* 只影响我自己看到的页面（顶栏、名册、首页生日条都用它显示）。
*/
$myNicks = [];
foreach ($nicknames as $n) {
$myNicks[(int)$n['target_id']] = (string)$n['nickname'];
}
?>
<div class="card card-pad">
<h2 class="section-title">
我怎么称呼家人
<span class="hint">只影响你自己看到的叫法</span>
</h2>
<p class="small muted" style="margin:0 0 16px">
同一个「小明」，妈妈叫"明明"、姐姐叫"小弟" —— 称呼是**每个人各自定的**，
不是这个人自带的属性。所以这里改的只影响你自己的页面，别人看到的还是他们自己的叫法。
留空 = 恢复成用姓名显示。
</p>
<?php if (!$options): ?>
<p class="small muted" style="margin:0">名册里还没有别人。</p>
<?php else: ?>
<div class="nick-list">
<?php foreach ($options as $o): $oid = (int)$o['id']; ?>
<form method="post" action="<?= e(url('nickname/save')) ?>" class="nick-row">
<?= csrf_field() ?>
<input type="hidden" name="target_id" value="<?= $oid ?>">
<input type="hidden" name="back" value="settings/me">
<span class="nick-who">
<img src="<?= e(avatar_url($o['avatar'] ?? '')) ?>" alt="">
<span><?= e((string)$o['name']) ?></span>
</span>
<input class="input" name="nickname" maxlength="50"
value="<?= e($myNicks[$oid] ?? '') ?>" placeholder="我叫他/她…">
<button class="btn btn-ghost btn-sm" type="submit">记下</button>
</form>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
templates/settings/_profile.php
+153
View File
@@ -0,0 +1,153 @@
<?php
/**
* 「我的资料」表单（个人设置的第一块）。
*
* 只放**属于我自己的**东西：
* · 我的姓名、性别、头像、联系方式、备注
* · 我的三个生日（身份证生日只读，由证件推导）
* · 我的 slogan（没填就用家庭统一的那句）
* 排行、排序号、虚拟人物标记、以及会牵动身份证生日的身份证号，
* 都属于"管理员编名册"，不在这里（这也是为了不让一次自助提交悄悄改掉这些）。
*
* 作为独立片段是因为「个人设置」页还要接上称呼、分组顺序、分类管理三块，
* 全塞一个文件里会变成没人愿意读的六百行。
*/
$p = $person;
$avatarUrl = avatar_url($p['avatar'] ?? null);
$bdSource = old('birthday_source', 'solar');
$idBd = trim((string)($p['birthday_id_card'] ?? ''));
// 裁剪比例由「这个位置显示成什么形状」决定，前后端共用同一份配置（见 App\ImageSlot）
$avSlot = \App\ImageSlot::get('avatar');
?>
<form method="post" enctype="multipart/form-data" action="<?= e(url('settings/me_save')) ?>">
<?= csrf_field() ?>
<div class="card card-pad">
<div class="form-grid">
<div class="field">
<label for="name">姓名 *</label>
<input class="input" id="name" name="name" value="<?= e(old('name', $p['name'])) ?>" required>
<?php if (!empty($errors['name'])): ?><span class="err"><?= e($errors['name']) ?></span><?php endif; ?>
</div>
<div class="field">
<label for="gender">性别</label>
<select class="select" id="gender" name="gender">
<?php $g = old('gender', $p['gender'] ?? ''); ?>
<option value="" <?= $g === '' ? 'selected' : '' ?>>不填</option>
<option value="m" <?= $g === 'm' ? 'selected' : '' ?>>男</option>
<option value="f" <?= $g === 'f' ? 'selected' : '' ?>>女</option>
</select>
</div>
<div class="field full">
<label for="slogan">我的一句话</label>
<input class="input" id="slogan" name="slogan" maxlength="200"
value="<?= e(old('slogan', $p['slogan'] ?? '')) ?>"
placeholder="留空就用家庭统一的那句：<?= e($familyMotto !== '' ? $familyMotto : '（还没设）') ?>">
<span class="tip">显示在你自己的首页标题下面。</span>
<?php if (!empty($errors['slogan'])): ?><span class="err"><?= e($errors['slogan']) ?></span><?php endif; ?>
</div>
<!-- ==================== 我的三个生日 ==================== -->
<div class="field full">
<label>我的生日</label>
<p class="small muted" style="margin:0 0 12px">
身份证上的那个由证件推导，<b>系统永远不会改它</b>；
下面两个是"实际过的阳历生日"和"长辈记的农历生日"。
改其中任意一个，另一个会自动跟着变。
</p>
<div class="field" style="margin-bottom:12px">
<label>身份证生日（只读）</label>
<span class="bd-readonly"><?= $idBd !== '' ? e($idBd) : '名册里还没填身份证号' ?></span>
</div>
<div class="bd-source">
<label for="bdSource">我这次改的是</label>
<select class="select" id="bdSource" name="birthday_source" style="width:auto">
<option value="solar" <?= $bdSource === 'solar' ? 'selected' : '' ?>>阳历（公历）</option>
<option value="lunar" <?= $bdSource === 'lunar' ? 'selected' : '' ?>>农历（阴历）</option>
</select>
<span class="small muted">选中的那一边为准，另一边自动算</span>
</div>
<div class="bd-pane" id="bdSolarWrap">
<p class="bd-pane-k">阳历生日</p>
<?php
$dtName = 'birthday_solar';
$dtValue = old('birthday_solar', \App\Birthday::pretty(\App\Birthday::solarOf($p)));
$dtId = 'birthday_solar_date';
$dtRequired = false;
require __DIR__ . '/../_datetime.php';
?>
<?php if (!empty($errors['birthday_solar'])): ?><span class="err"><?= e($errors['birthday_solar']) ?></span><?php endif; ?>
</div>
<div class="bd-pane" id="bdLunarWrap">
<p class="bd-pane-k">农历生日</p>
<?php
$dtName = 'birthday_lunar';
$dtValue = old('birthday_lunar', (string)($p['birthday_lunar'] ?? ''));
$dtId = 'birthday_lunar_date';
$dtRequired = false;
require __DIR__ . '/../_datetime.php';
?>
<label class="check-item" style="margin-top:8px">
<input type="checkbox" name="birthday_lunar_leap" value="1"
<?= old('birthday_lunar_leap', $p['birthday_lunar_leap'] ?? 0) ? 'checked' : '' ?>>
<span>这个月是<b>闰月</b>（如「闰六月」）</span>
</label>
<?php if (!empty($errors['birthday_lunar'])): ?><span class="err"><?= e($errors['birthday_lunar']) ?></span><?php endif; ?>
</div>
</div>
<div class="field">
<label for="email">邮箱</label>
<input class="input" id="email" name="email" type="email"
value="<?= e(old('email', $p['email'] ?? '')) ?>">
<?php if (!empty($errors['email'])): ?><span class="err"><?= e($errors['email']) ?></span><?php endif; ?>
</div>
<div class="field">
<label for="address">住址</label>
<input class="input" id="address" name="address"
value="<?= e(old('address', $p['address'] ?? '')) ?>">
</div>
<div class="field full">
<label for="note">备注</label>
<textarea class="input" id="note" name="note"><?= e(old('note', $p['note'] ?? '')) ?></textarea>
</div>
<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，相对原图）。不裁/没 JS 就留空 = 居中裁切 */ ?>
<input type="hidden" name="avatar_crop" value="">
<span class="tip">
选好图片后会弹出裁剪框，把要留的部分框住。<b>比例按它在页面上的形状定</b>
（头像是 1:1 正方形）。上限 5MB。
</span>
<?php if (!empty($errors['avatar'])): ?><span class="err"><?= e($errors['avatar']) ?></span><?php endif; ?>
</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>
<div class="btn-row">
<button class="btn" type="submit">保存我的资料</button>
</div>
</div>
</form>
templates/settings/me.php
+120
View File
@@ -0,0 +1,120 @@
<?php
/**
* 个人设置 —— 「我自己的」设置。
*
* 与「系统设置」（?r=settings，仅管理员）的分工：
* · 系统设置改一次**全家都变**：家庭 slogan、附件存储、运行环境；
* · 个人设置只影响**我自己看到的样子**：我的资料、我怎么称呼别人、
* 名册里分组的先后顺序、以及关系分类的增删改名。
*
* ⚠️ 关于「顺序」与「分类」这两个都不在系统设置里，理由是：
* 分类是全家共用的一套（老杨的同事，对全家来说都是同事），所以它写在共享的表里；
* 但**哪一组排前面纯属个人习惯** —— 爸爸把「家人」排第一、妈妈把「亲戚」排第一，
* 这种偏好存在 user_settings 里，跟 family 级的 settings 严格分开，
* 免得"改一个人的偏好"误伤到全家。
*/
$groupCounts = $groupCounts ?? [];
$groupTotal = count($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/show', ['id' => (int)$person['id']])) ?>">看我的详情页</a>
<?php if (\App\Auth::isAdmin()): ?>
<a class="btn btn-ghost btn-sm" href="<?= e(url('settings')) ?>">系统设置</a>
<?php endif; ?>
</div>
</div>
<h2 class="section-title" id="me-profile">我的资料 <span class="hint">姓名、头像、生日、联系方式</span></h2>
<?php require __DIR__ . '/_profile.php'; ?>
<div class="stack-gap"></div>
<?php require __DIR__ . '/_nicknames.php'; ?>
<!-- ==================== 名册分组的先后顺序 ==================== -->
<div class="card card-pad" style="margin-top:20px">
<h2 class="section-title">
名册分组顺序
<span class="hint">只影响你自己看到的顺序</span>
</h2>
<p class="small muted" style="margin:0 0 16px">
名册是按「关系分组」分栏显示的。分组本身是全家共用的一套，
但<b>哪一组排前面是你自己的习惯</b> —— 你在这里调，别人看到的顺序不变。
<?php if ($groupTotal > 1): ?><br>用 ▲ ▼ 把它挪到你要的位置，挪一下就存一次。<?php endif; ?>
</p>
<?php if (!$groups): ?>
<p class="small muted" style="margin:0">还没有分组。</p>
<?php else: ?>
<ol class="order-list">
<?php foreach ($groups as $i => $g): $gid = (int)$g['id']; ?>
<li class="order-row">
<span class="order-no"><?= $i + 1 ?></span>
<span class="order-name"><?= e((string)$g['name']) ?></span>
<span class="order-count"><?= (int)($groupCounts[$gid] ?? 0) ?> 人</span>
<form method="post" action="<?= e(url('settings/groups/move')) ?>" class="order-move">
<?= csrf_field() ?>
<input type="hidden" name="id" value="<?= $gid ?>">
<button class="btn btn-ghost btn-sm" type="submit" name="dir" value="up"
title="上移一组" <?= $i === 0 ? 'disabled' : '' ?>>▲</button>
<button class="btn btn-ghost btn-sm" type="submit" name="dir" value="down"
title="下移一组" <?= $i === $groupTotal - 1 ? 'disabled' : '' ?>>▼</button>
</form>
</li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
</div>
<!-- ==================== 关系分类的增删改名 ==================== -->
<div class="card card-pad" style="margin-top:20px">
<h2 class="section-title">
关系分类管理
<span class="hint">分类是全家共用的</span>
</h2>
<p class="small muted" style="margin:0 0 16px">
预置了「家人 / 亲戚 / 同事 / 朋友 / 合作伙伴 / 认识 / 不熟」七个。
<b>不够用就自己加</b>，叫法不合适就改名。
分类是全家共用的一套（你加的，家里人都会看到）——
因为「老杨的同事」对全家来说都是同事，各人各定一套会让名册没法看。
<br>
删掉一个分类<b>不会删掉人</b>：那一组人会变成「未分类」，在名册里提醒你重新归类。
</p>
<form method="post" action="<?= e(url('settings/groups/add')) ?>" class="inline-form">
<?= csrf_field() ?>
<label class="sr-only" for="newGroup">新分类名</label>
<input class="input" id="newGroup" name="name" maxlength="20" placeholder="例如：邻居、球友、老同学">
<button class="btn btn-sm" type="submit">加一个分类</button>
</form>
<?php if ($groups): ?>
<ul class="group-manage">
<?php foreach ($groups as $g): $gid = (int)$g['id']; ?>
<li class="group-manage-row">
<form method="post" action="<?= e(url('settings/groups/rename')) ?>" class="group-rename">
<?= csrf_field() ?>
<input type="hidden" name="id" value="<?= $gid ?>">
<label class="sr-only" for="gname<?= $gid ?>">分类名</label>
<input class="input" id="gname<?= $gid ?>" name="name" maxlength="20"
value="<?= e((string)$g['name']) ?>">
<button class="btn btn-ghost btn-sm" type="submit">改名</button>
</form>
<span class="group-count muted small"><?= (int)($groupCounts[$gid] ?? 0) ?> 人</span>
<?php /* 删除做成两步（<details>），不用 JS 也能防手滑 —— 一点就没了太容易出事 */ ?>
<details class="del-wrap">
<summary class="btn btn-ghost btn-sm">删除</summary>
<form method="post" action="<?= e(url('settings/groups/delete')) ?>" class="del-confirm">
<?= csrf_field() ?>
<input type="hidden" name="id" value="<?= $gid ?>">
<span class="small muted">这组的人会变成「未分类」，确定？</span>
<button class="btn btn-ghost btn-sm danger" type="submit">确认删除</button>
</form>
</details>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>