Files
FamilyBook/app/ImageSlot.php
T
laoyang 7138314dc7 v24 第 15 批:活动 / 旅程两级语义(术语 · 派生时间城市 · 表单三项 · 题图可点)
用户原话四条,逐条落地:

1. 「旅程模块,按钮是记一次活动,而不是记一趟旅程。旅程是活动里面的概念。」
   → 顶层一律改称**活动**:按钮「记一次活动」、页标题「活动」、`N 次` / `N 段旅程`;
     活动详情三组改叫「计划的旅程 / 走过的旅程 / 没成行的」;
     节点表单「这段旅程叫什么」「阶段」;flash 文案 17 处同步。
     (导航条仍叫「旅程」——用户就是这么称呼这个模块,列表页加副标题说清两级关系。)

2. 「活动不需要开始和结束时间,是根据活动中的旅程,最早的旅程开始时间,和最晚的
     旅程结束时间,计算出来的。目的地也不需要…去的城市,也是根据旅程,得到的。」
   → 活动**不再存**这三样,全部**读时算出来**:
     · Trip::derived()      最早开始 / 最晚结束 / 城市去重
     · Trip::cities()       按最早出现时间排(先后顺序本身是信息,不是字母序)
     · Trip::attachDerived() 列表页批量补(避免 N+1)
     · Trip::activitySpan()  没有旅程时说「还没有旅程」,不用「日期待补」
     create/update 不再写 events 的起止与地点(老值保留不动,页面不读)。
     列表排序/搜索、首页「最近去了」改走子查询。

3. 「题图那里,没有办法上传图片,点击哪里都没反应。」——**真 bug**
   「点图 = 开文件框」那句 JS 只写在 people/form.php 的内页脚本里(头像专用);
   第 14 批加的旅程题图与图书封面照抄了同一套 DOM 却没有对应的 JS,
   于是图块有 cursor:pointer 与 hover 高亮(看着能点),点下去毫无反应。
   → 做成声明式通用绑定:图上写 data-pick-input="#fileInputId",
     app.js 统一接管(一个页面多个也各绑各的),并删掉旧的那份专用实现。
     三处(头像 / 题图 / 图书封面)全挂上。

4. 「添加活动的页面,顺序是这样的:添加标题,上传并裁剪题图,然后一段简介,就可以了。」
   → 主区就这三项,顺序照原话;时间/城市不做输入项(只留一句说明它们从哪来,
     不说清用户会满页找"怎么没地方填时间")。
     备注 / 公开 / 同行的人收进「更多设置」折叠区——功能一个没丢。

顺带修掉两处会炸的实现问题:
· ORDER BY 引用聚合别名(first_at)在 MariaDB/MySQL 报 1247,且只在运行时炸、
  php -l 看不出 → 改成 ORDER BY MIN(starts_at),否则整个旅程模块 Fatal。
· e2e 里"详情页显示了派生时间"原本写成整页查找,下面每段旅程自己也渲染日期,
  于是把派生值塞成 null 也照样绿(借光假绿)→ 判据收进页头那一段。

验证:e2e 845/0(+15 条本批断言)· 升级 134/0 · 桌面几何 428/0 · 移动几何 688/0 ·
交互 92/0 · 题图真机点击 4/0 · 读书窄屏 15/0 · 家谱 34/0 + 10/0 + 反向 3/3 ·
观影按钮 60/0 + 反向 3/3 · 本批反向验证 4/4(题图绑定抽掉→红、派生值不挂→红、
城市退回读 location→红、时间字段加回表单→红)· 部署静态断言新增两组(含"活动不许
再写起止时间/目的地"与"ORDER BY 不许引用聚合别名"的反退化防线)。
部署后服务器自检 19/19,五个关键文件 md5 与线上逐一核对一致。
2026-10-05 10:58:17 +08:00

139 lines
5.8 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
/**
* 上传位置(「槽位」)的声明式配置。
*
* 为什么要有这个类:**比例是由「这张图显示出来是什么形状」决定的**,不是由上传者决定的。
* 头像在页面上永远是圆的/圆角方的 → 1:1;宽幅题图是横的 → 16:9。
* 把这些写在一处,前端拿它去做裁剪框的锁定比例、服务端拿它去做最终裁切,
* 两边就不会各写一个数字然后慢慢漂移。
*
* 加一个新位置(比如题图)只需要在 SLOTS 里加一行,前端与服务端都不用改:
* 'cover' => ['label' => '题图', 'ratio' => '16:9', 'w' => 1920, 'h' => 1080,
* 'dir' => 'covers', 'hint' => '宽屏横幅,显示在详情页顶部'],
*/
declare(strict_types=1);
namespace App;
final class ImageSlot
{
// ⚠️ 应用层不再设「兆数」上限(用户原话:上传照片不要有大小限制)。
// 服务器 ini(upload_max_filesize / post_max_size,线上是 50M)是唯一的天花板;
// 像素与内存的守卫在 Upload::image() 里按图动态算。
// 输出尺寸恒为槽位的 w×h(头像 512×512)——原图再大,落库的都是小 JPEG。
/**
* 位置 → 比例与输出尺寸。
*
* `dir` 是**存储前缀**:本地就是 uploads/<dir>/,云端就是桶里的 <prefix>/<dir>/。
* `w`/`h` 是**输出**尺寸(不是要求上传者提供的尺寸)——
* 裁剪之后统一缩到这个大小,所以原图多大都不影响页面上的加载量。
*
* ratio 写成字符串是为了让人一眼看懂,也方便直接拿去当 CSS 的 aspect-ratio。
*/
public const SLOTS = [
'avatar' => [
'label' => '头像',
'ratio' => '1:1',
'w' => 512,
'h' => 512,
'dir' => 'avatars',
'hint' => '正方形。页面上显示成圆形或圆角方形,所以按 1:1 裁。',
],
// v8 观影三槽位。海报是竖版的(豆瓣海报约 2:3)→ 裁剪;
// 票根/现场照片是随手拍、比例五花八门 → ratio='free':**不裁剪**,
// 等比缩到框内(w×h 是「最长边」而不是固定输出尺寸),服务端保证不变形。
'poster' => [
'label' => '海报',
'ratio' => '2:3',
'w' => 600,
'h' => 900,
'dir' => 'posters',
'hint' => '竖版海报,按 2:3 裁。没裁就按整图居中取。',
],
'ticket' => [
'label' => '票根',
'ratio' => 'free',
'w' => 1400,
'h' => 1400,
'dir' => 'tickets',
'hint' => '票根不裁剪,等比缩到最长边 1400。',
],
'photo' => [
'label' => '照片',
'ratio' => 'free',
'w' => 1600,
'h' => 1600,
'dir' => 'photos',
'hint' => '现场照片不裁剪,等比缩到最长边 1600。',
],
// v24 第 14 批(用户第 5 条):**书的封面**。与海报一样是竖版(常见 2:3),
// 单独一个槽位而不是复用 poster —— 以后想给书封面换个尺寸/目录,
// 改这一行就行,不会连观影海报一起改了。
'bookcover' => [
'label' => '封面',
'ratio' => '2:3',
'w' => 600,
'h' => 900,
'dir' => 'bookcovers',
'hint' => '书的封面是竖版,按 2:3 裁。拖动图片挪位置,滚轮缩放。',
],
// v24 第 14 批(用户第 3 条):旅程活动的**题图**,16:9 宽屏横幅,可裁剪。
// ⚠️ 与头像同一套机制:比例写在这一处,前端裁剪框与服务端最终裁切都读它,
// 前端**不许**再自己写一个数字('16:9' 用 parseFloat 会得到 16 → 裁成 16:1)。
'cover' => [
'label' => '题图',
'ratio' => '16:9',
'w' => 1600,
'h' => 900,
'dir' => 'covers',
'hint' => '宽屏横幅,按 16:9 裁。拖动图片挪位置,滚轮缩放。',
],
];
public static function exists(string $key): bool
{
return isset(self::SLOTS[$key]);
}
/** @return array<string,mixed>|null */
public static function get(string $key): ?array
{
return self::SLOTS[$key] ?? null;
}
/** 宽高比(宽 / 高)。'1:1' → 1.0,'16:9' → 1.777…,'free' → 0.0(不锁比例、不裁剪) */
public static function ratio(array $slot): float
{
if (($slot['ratio'] ?? '') === 'free') {
return 0.0;
}
[$a, $b] = self::parseRatio((string)($slot['ratio'] ?? '1:1'));
return $b > 0 ? $a / $b : 1.0;
}
/** 给前端用的 CSS aspect-ratio 写法:'1 / 1'、'16 / 9';free 槽位返回空串(前端不进裁剪器) */
public static function ratioCss(array $slot): string
{
if (($slot['ratio'] ?? '') === 'free') {
return '';
}
[$a, $b] = self::parseRatio((string)($slot['ratio'] ?? '1:1'));
return $a . ' / ' . $b;
}
/** @return array{0:int,1:int} */
private static function parseRatio(string $ratio): array
{
// ⚠️ 分隔符别用 /:'[:/]' 里的斜杠会把模式提前截断("Unknown modifier ']'"),
// 这个潜伏 bug 一直没炸是因为 ratio() 只在上传 POST 里被调到(302 正文没人扫)。
if (preg_match('#^\s*(\d+)\s*[:/]\s*(\d+)\s*$#', $ratio, $m)) {
$a = max(1, (int)$m[1]);
$b = max(1, (int)$m[2]);
return [$a, $b];
}
return [1, 1];
}
}