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
assets/js/app.js
+243 -2
View File
@@ -26,9 +26,240 @@
for (var i = 0; i < pickers.length; i++) { hook(pickers[i]); }
})();
// 头像选好后即时预览，别等上传完才知道选错了
// ===== 图片裁剪 =====
// 比例由**这个位置显示成什么形状**决定（头像 1:1、题图 16:9），
// 由服务端通过 data-crop-ratio 告诉这里 —— 前端不再自己定一个数字。
//
// ⚠️ 这里只是「让用户挑区域」，真正裁切在服务端做（见 app/Upload.php）：
// 前端算出来的框只是**建议**，绕过前端也不会存进一张比例不对的图。
// 所以确认时写回的是**归一化矩形**（相对原图的 0..1），不是像素。
(function () {
var inputs = Array.prototype.slice.call(
document.querySelectorAll('input[type="file"][data-crop-ratio]'));
if (!inputs.length) { return; }
var overlay = null, stage = null, imgEl = null, boxEl = null;
var st = null; // 当前编辑状态
/**
* 解析 data-crop-ratio。
*
* ⚠️ 不能直接 parseFloat：'16:9' 会被读成 **16**（parseFloat 只吃开头那段数字），
* 于是裁剪框变成 16:1 的细长条，而钩子本身不报错、只是裁出来的图没法看。
* 头像的 '1:1' 恰好蒙对（=1），所以这个坑会潜伏到"启用题图"那天才炸。
* 两种写法都支持：'16:9' / '16/9' 按分数算，纯数字按它本身算。
*/
function parseRatioAttr(v) {
var s = String(v == null ? '' : v).trim();
var m = /^(\d+(?:\.\d+)?)\s*[:/]\s*(\d+(?:\.\d+)?)$/.exec(s);
if (m) {
var a = parseFloat(m[1]), b = parseFloat(m[2]);
return (isFinite(a) && isFinite(b) && b > 0 && a > 0) ? a / b : 1;
}
var f = parseFloat(s);
return (isFinite(f) && f > 0) ? f : 1;
}
function build() {
overlay = document.createElement('div');
overlay.className = 'crop-overlay';
overlay.innerHTML =
'<div class="crop-panel" role="dialog" aria-modal="true" aria-label="裁剪图片">' +
'<div class="crop-head"><b>裁剪图片</b><span class="crop-shape"></span></div>' +
'<div class="crop-stage">' +
'<img class="crop-img" alt="">' +
'<div class="crop-box"><i class="crop-handle" aria-hidden="true"></i></div>' +
'</div>' +
'<p class="crop-tip">拖动方框挪位置，拖右下角改大小。框里就是最终会保存的样子。</p>' +
'<div class="crop-actions">' +
'<button type="button" class="btn btn-ghost" data-act="cancel">取消</button>' +
'<button type="button" class="btn" data-act="ok">确定裁剪</button>' +
'</div>' +
'</div>';
document.body.appendChild(overlay);
stage = overlay.querySelector('.crop-stage');
imgEl = overlay.querySelector('.crop-img');
boxEl = overlay.querySelector('.crop-box');
overlay.addEventListener('click', function (e) {
if (e.target === overlay) { close(false); return; }
var act = e.target.getAttribute && e.target.getAttribute('data-act');
if (act === 'cancel') { close(false); }
if (act === 'ok') { close(true); }
});
document.addEventListener('keydown', function (e) {
if (overlay && overlay.parentNode && e.key === 'Escape') { close(false); }
});
bindDrag(overlay.querySelector('.crop-handle'), 'resize');
bindDrag(boxEl, 'move');
}
/** 让元素可拖动。pointer 事件同时覆盖鼠标与触摸，不用分别写两套。 */
function bindDrag(el, mode) {
el.addEventListener('pointerdown', function (e) {
if (!st || e.button > 0) { return; }
e.preventDefault();
e.stopPropagation();
try { el.setPointerCapture(e.pointerId); } catch (err) { /* 老浏览器忽略 */ }
var x0 = e.clientX, y0 = e.clientY;
var b0 = { x: boxEl.offsetLeft, y: boxEl.offsetTop, w: boxEl.offsetWidth, h: boxEl.offsetHeight };
function onMove(ev) {
var dx = ev.clientX - x0, dy = ev.clientY - y0;
if (mode === 'move') {
place(b0.x + dx, b0.y + dy, b0.w, b0.h);
} else {
// 缩放时**锁定比例**：以宽为准推高，宽被夹住时高也跟着被夹住
var nw = b0.w + dx;
place(b0.x, b0.y, nw, nw / st.ratio);
}
}
function onUp() {
el.removeEventListener('pointermove', onMove);
el.removeEventListener('pointerup', onUp);
el.removeEventListener('pointercancel', onUp);
}
el.addEventListener('pointermove', onMove);
el.addEventListener('pointerup', onUp);
el.addEventListener('pointercancel', onUp);
});
}
var MIN = 32; // 裁剪框最小边长（显示像素），太小了没法拖
/** 把裁剪框放到指定位置，并夹在图片范围内 */
function place(x, y, w, h) {
w = Math.max(MIN, Math.min(w, st.dispW));
h = Math.max(MIN * st.ratio, Math.min(h, st.dispH));
// 比例锁定后再夹一次高度（宽高比可能因为上面的夹取而失配）
if (w / h > st.ratio) { w = h * st.ratio; } else { h = w / st.ratio; }
x = Math.max(0, Math.min(x, st.dispW - w));
y = Math.max(0, Math.min(y, st.dispH - h));
boxEl.style.left = x + 'px';
boxEl.style.top = y + 'px';
boxEl.style.width = w + 'px';
boxEl.style.height = h + 'px';
}
function open(input, file) {
if (!overlay) { build(); }
var ratio = parseRatioAttr(input.getAttribute('data-crop-ratio'));
var url = URL.createObjectURL(file);
var probe = new Image();
probe.onload = function () {
// 图片按「等比缩放到可用区域」后显示；裁剪框的坐标都相对这块显示区域，
// 最后再除以它换成 0..1 —— 所以原图多大都不影响结果。
var availW = Math.min(window.innerWidth * 0.86, 620);
var availH = Math.min(window.innerHeight * 0.52, 420);
var scale = Math.min(availW / probe.naturalWidth, availH / probe.naturalHeight, 1);
var dispW = Math.max(1, Math.round(probe.naturalWidth * scale));
var dispH = Math.max(1, Math.round(probe.naturalHeight * scale));
st = { input: input, ratio: ratio, dispW: dispW, dispH: dispH,
naturalW: probe.naturalWidth, naturalH: probe.naturalHeight,
previewSrc: null, outW: parseInt(input.getAttribute('data-crop-w'), 10) || dispW,
outH: parseInt(input.getAttribute('data-crop-h'), 10) || dispH };
imgEl.src = url;
stage.style.width = dispW + 'px';
stage.style.height = dispH + 'px';
var shape = overlay.querySelector('.crop-shape');
shape.textContent = input.getAttribute('data-crop-label') || '';
overlay.querySelector('.crop-tip').textContent =
input.getAttribute('data-crop-hint') ||
'拖动方框挪位置，拖右下角改大小。框里就是最终会保存的样子。';
// 默认框 = 图里最大的、符合目标比例的那块（居中）—— 什么都不动直接确定，
// 效果就等于老的「居中裁切」，所以默认值是安全的。
var w = dispW, h = w / ratio;
if (h > dispH) { h = dispH; w = h * ratio; }
place((dispW - w) / 2, (dispH - h) / 2, w, h);
// 记住预览图原来的 src：取消时恢复，否则预览会停在"没裁过的图"上
var prev = preview(input);
st.previewSrc = prev ? prev.src : null;
st._url = url;
overlay.classList.add('is-open');
};
probe.onerror = function () {
URL.revokeObjectURL(url);
alert('这张图片读不出来，换一张试试。');
input.value = '';
};
probe.src = url;
}
function preview(input) {
var sel = input.getAttribute('data-crop-preview');
return sel ? document.querySelector(sel) : null;
}
function close(ok) {
if (!st) { return; }
if (ok) {
var nx = boxEl.offsetLeft / st.dispW;
var ny = boxEl.offsetTop / st.dispH;
var nw = boxEl.offsetWidth / st.dispW;
var nh = boxEl.offsetHeight / st.dispH;
// 写回归一化矩形 —— 服务端按它裁，与源图分辨率无关
var hidden = hiddenFor(st.input);
if (hidden) {
hidden.value = [nx, ny, nw, nh].map(function (v) {
return (Math.round(v * 1e6) / 1e6).toFixed(6);
}).join(',');
}
drawPreview();
} else {
st.input.value = ''; // 取消 = 不换图，别让它悄悄传上去被居中裁
var prev = preview(st.input);
if (prev && st.previewSrc !== null) { prev.src = st.previewSrc; }
var hid = hiddenFor(st.input);
if (hid) { hid.value = ''; }
}
overlay.classList.remove('is-open');
if (st._url) { URL.revokeObjectURL(st._url); }
st = null;
}
/** 按当前框把结果画出来当预览 —— 让用户看到"框里那块"长什么样 */
function drawPreview() {
var prev = preview(st.input);
if (!prev) { return; }
var canvas = document.createElement('canvas');
canvas.width = st.outW;
canvas.height = st.outH;
var g = canvas.getContext('2d');
var sx = boxEl.offsetLeft / st.dispW * st.naturalW;
var sy = boxEl.offsetTop / st.dispH * st.naturalH;
var sw = boxEl.offsetWidth / st.dispW * st.naturalW;
var sh = boxEl.offsetHeight / st.dispH * st.naturalH;
try {
g.drawImage(imgEl, sx, sy, sw, sh, 0, 0, st.outW, st.outH);
prev.src = canvas.toDataURL('image/jpeg', 0.9);
} catch (err) {
// 跨域图片会让 canvas 变"污染"，这里都是本地 ObjectURL，正常不会发生
}
}
/** 同表单里那个存裁剪矩形的隐藏字段 */
function hiddenFor(input) {
var form = input.form;
if (!form) { return null; }
return form.querySelector('input[name="' + input.name + '_crop"]');
}
inputs.forEach(function (input) {
input.addEventListener('change', function () {
var f = input.files && input.files[0];
if (!f) { return; }
if (!/^image\//.test(f.type)) { alert('请选择图片文件。'); input.value = ''; return; }
open(input, f);
});
});
})();
// 头像选好后即时预览（仅用于**没走裁剪器**的文件框，避免和裁剪预览打架）
var fileInput = document.getElementById('avatar');
if (fileInput && window.FileReader) {
if (fileInput && !fileInput.hasAttribute('data-crop-ratio') && window.FileReader) {
fileInput.addEventListener('change', function () {
var f = this.files && this.files[0];
if (!f) { return; }
@@ -40,6 +271,16 @@
});
}
// 下拉菜单：点外面 / 按 Esc 就收起来（用 <details> 实现，没这段也能用）
Array.prototype.forEach.call(document.querySelectorAll('details.menu'), function (d) {
document.addEventListener('click', function (e) {
if (d.open && !d.contains(e.target)) { d.open = false; }
});
document.addEventListener('keydown', function (e) {
if (d.open && e.key === 'Escape') { d.open = false; }
});
});
// 头像加载失败时换回内置剪影 —— 保证任何时候都不会出现破图
Array.prototype.forEach.call(document.querySelectorAll('img'), function (img) {
img.addEventListener('error', function () {