用户 8 条原话要点:
①「名册页面,删除一个联系人后,能否不刷新页面,删除成功后,直接把这个人,
从当前页面的 dom 中删除,页面保持不动。」
②「观影模块,海报和票根以及照片都带进来了,但是没有缩放,把页面撑破了,
应该缩放成缩略图。」
③「个人设置页面,天气设置那里,把:只影响你自己首页上的那一格 / 填个城市名就行
(如「青岛」)… 这些提示,都删除。把城市单独放一行,精度维度放在一行。」
④「旅程模块,实际行程编辑后,点击保存,竟然又变成计划行程了,这个不合理,
实际行程永远是实际行程,不会再变回计划行程了。」
⑤「旅程模块,旅程列表,行程列表,都是按照行程的开始时间排序的,最新的在最上面,
而不是按照编辑修改时间。」
⑥「旅程的详情页面,右上角的按钮,设置在最右侧,和其他模块保持统一。」
⑦「所有上传图片等附件的地方,都不再放按钮,而是放一个框,点击这个框实现点击上传
按钮的功能,拖动图片进这个框里,实现拖动多个上传功能。框里面写一句话:
点击或拖动进行上传,其他的功能和现在保持一致。」
⑧「日历中新建日程,无论是点击按钮还是点击日历中间,都是采用弹框的形式进行添加,
这样不影响当前日历的显示,添加完成后,动态修改当前视图,不要刷新。添加日历日程,
开始时间和结束时间那里,用我们统一的时间范围选择器重做,现在功能无法使用。
选择日历本,带上颜色。」
🔴 五个真根因(全都不像 bug):
① 🔴 **④「实际行程变回计划」= 表单字段同名合并**(本批最要紧的一条)
暂存上传的令牌字段原叫 `stage[]`,与行程表单里那个隐藏的 `stage`(plan/actual)
**同名**。PHP 解析表单时同名会**合并进同一个键**:
`stage=actual` + `stage[]=tok` → `$_POST['stage'] = ['actual','tok']`
(`[]` 只是"往同一个键追加"的记号,**不构成另一个键名**。)
于是路由里 `(string)($_POST['stage'] ?? 'plan')` 得到 `"Array"` →
`in_array('Array', ['plan','actual'])` 为假 → **静默回落成 'plan'**。
⚠️ 只有"拖过图片的行程"会犯(没拖就没有 `stage[]`)→ 症状是"时好时坏"。
修法:令牌字段改名成 `stage_token[]`(改的是**字段名本身**,不是"是数组就取第一个"
绕过去 —— 同名合并是 PHP 的表单语义,绕过去只会把坑留给下一次加字段)。
**另加一道语义保险**:编辑路径**一律沿用库里那条自己的 stage**,不读表单 ——
编辑表单里根本没有改阶段的控件(改阶段走详情页那几个显式动作)。
这样即便将来又冒出某个字段名冲突,也不可能把「实际」悄悄变回「计划」。
② 🔴 **⑧「时间范围选择器无法使用」= 三道门叠在一起**
① `_event_fields.php` 的**结束端默认带 `hidden`**(要点「+ 添加结束时间」才出现);
② `app.js` 的 `upgradeRange()` 有「**两端都得可见**才升级」的判断 → 永远不成立
(实测 `data-semi-range-done` 恒为 `null`);
③ CSS `html.js .dt-range:not(.is-semi-range) .dt-input { visibility: hidden }` →
未升级时原生控件**也是不可见的** ⇒ 屏幕上一片空白、点哪儿都没反应。
修法:两端**始终可见**("没有结束"由清空后半段表达,不再靠开关);
并把旧的「+ 添加结束时间 / 去掉结束时间」开关整套删掉。
⚠️ 顺带挖出:`upgradeRange()` 里 `group.insertBefore(host, a)` 在"两端各自被
`.field` 包着"时 `a` 不是 `group` 的子节点 → 直接抛
`Failed to execute 'insertBefore' on 'Node'`。这个异常**以前从没触发过**
(被 ② 的提前 return 挡住了)—— 一旦放出来就炸。修成插在"端点最外层包装"之前。
⚠️ 观察器加了 `attributes: true, attributeFilter: ['hidden']`(并把 childList
分支的 `return` 去掉):弹框/折叠面板/tab 里"稍后才露出来"的日期控件从此都能自动升级。
③ 🔴 **⑧「新建日程默认建出观影记录」= 产品缺口,不只是显示问题**
`Calendar::DEFAULT_KINDS` 原来只有 6 本**派生**本(观影/旅行/农历/节假日/传统节日/
节气),**一本可写的普通本都没有**。于是"放在哪本"里全是派生本、默认选中排最前的
**观影** → 用户直接打字点「加上」,建出来的是一条**观影记录**
(日历里看着是多了条日程,观影列表里莫名多一条)。这是"建错东西",事后极难发现。
→ ① 默认本补成「我的日程」(kind='custom'),模板里默认选中也改成**优先 custom 本**;
② 选择器里把**纯派生只读本**禁用并标「(自动生成)」
(直接不列会让人以为本子丢了;列为可选又会白选一次再吃错误)。
⚠️ 顺带发现 `Calendar::READONLY_KINDS` 把 `movie`/`trip` 也算进去了,而
`event_add` 里**紧跟着**就有两段专门处理它们的分支(「已加进观影」/「已加进旅程」)
—— 那两段**永远走不到**(校验先一步把请求打回去了)。判据要按**能不能写**分,
不是按"是不是派生"。
④ 🔴 **②「观影编辑页图片撑破」= `.mv-slot` 这个类在样式表里根本不存在**
第 21 批加模板时只写了结构没写样式 → `<img>` 按**原始像素**渲染:600×900 的海报
在 236px 宽的格子里撑出 942px 高,还把整页横向顶破(实测 docW 1297 > vw 1280)。
→ 补 `.mv-slot` 规格:固定 108×162 缩略图 + `object-fit: cover`。
⚠️ **高度必须写死** —— 不写死就又会由原图比例决定,等于没修。
⑤ **⑤行程列表排序 = `category, position` 主导**
`position` 默认同一个数(旧迁移给的多是 0/100),于是顺序被 position 挤乱。
实测线上 #222 渲染成「返回青岛(10-5) → 出发去菏泽(9-30) → 去姥姥家(10-2)」。
→ 改成 `ORDER BY (starts_at IS NULL), starts_at, id`。
⚠️ 方向是**正序**(早的在前,已跟用户确认);旅程列表仍是 DESC(最新在最上)。
两者方向不同是**刻意的**:一个是"挑哪趟旅行",一个是"读这趟旅行的行程"。
⚠️ 详情页**按阶段分三组**渲染(计划/实际/未成行),排序只需在**组内**有序。
本批新增能力:
- **统一上传框**(⑦):`templates/_stage_drop.php` 现在**同时**负责
「sr-only 的真文件框 + 看得见的上传框 + 暂存清单」,调用方只 require 一行。
框是 `role="button" tabindex="0"`,JS 转发 `input.click()`(键盘 Enter/Space 也通),
拖文件进框走既有的暂存上传(拖一个立刻传、可续拖、失败标红、未传完拦住保存)。
⚠️ 框用 `<div>` 不是 `<button>`:里面要放暂存清单(含「撤掉这张」按钮),
按钮里嵌按钮是非法 HTML(第 21 批刚在 `<form>` 嵌套上栽过同一个跟头)。
⚠️ 文件框用 `.sr-only` 不是 `display:none`:后者不可聚焦,带 `required` 时
Chrome 会报 "An invalid form control is not focusable" —— 点了什么都不发生。
落了 11 处:行程照片 / 观影海报·票根·合影 / 资源 / 任务 / 日程附件 / 书籍 /
联系人导入 / ics 导入 / 观影补传 / 资源补传。
⚠️ 清单与提示行移到框**外面**(放框内会变成"一个大框套五张图"),
所以 app.js 改从 `.upfield` 容器里找它们。
- **无刷新删除(①)与无刷新新建日程(⑧)**:路由按 `X-Requested-With`
(或 `Accept: application/json`)区分调用者 —— 带它回 JSON、不带照旧 302
(无 JS 的兜底**不变**,两边的反向都写了断言)。
· 名册删除:成功 → 摘卡片 + 就地改「共 N 人」与分组人数 + 派发 `input` 让
filter.js 自己重算(**不抄它的判据**);失败 → 把原因说出来(不刷页);
拿不到 JSON → **退回原生提交**(绝不静默失败)。
· 日历新建:JSON 带齐前端插入当前视图要用的字段(时间/颜色/链接/是否全天/cal)。
月视图**按时间插入**(不能 append —— 服务端只渲染前 3 条、按时间序取,
append 会让"新加的早间日程"掉进「+N 条」里看不见,刷新后又跑到第一位);
周/日视图按"24h = 100%"算 top/height 插块。
· 观影 / 旅行本是**可写派生本**:AJAX 时不再跳详情页(跳走就离开了日历),
改在提示行给一个「去看详情 →」链接。
- **⑧日历本带颜色**:原生 `<option>` 画不出色块(浏览器不允许在 option 里放元素),
所以做成「色块 + 下拉」并排,色块跟着当前选中的本子变色。
- **③天气卡片**:三句提示全删;城市单独一行、纬度/经度同一行(`.loc-row`)。
删的只是说明文字,三个输入框 + 保存 + 状态回显都保留。
- **⑥设置按钮贴最右**:原来顺序是「… → 设置 ☰ → 删除 🗑」,设置被删除键挤到**倒数第二**;
改成删除在前、设置恒为最后一个(与观影/日程/任务/资源同一个手势)。
验证(本地全套):
- e2e **1059/0**(本批新增约 40 条断言)· 结构升级 149/0 · 桌面几何 428/0
- **真机探针 75/0**(`_fb_b21_ui.py`):AJAX 删除真的没导航 / 卡片真被摘掉 /
滚动位置保持;缩略图几何(108×162,不再溢出);上传框(框在、原生框不可见、
点框真打开文件选择框、连拖两张都上去且清单可见);日历弹框(打开时网格一动不动、
范围控件真的挂上且可见、能弹面板、色块跟着换、无刷新提交后当前视图里立刻出现、
周视图也能插时间块、全程无 JS 报错)。
- **反向验证 12 条**(`_fb_b21_falsify.py`):逐条把修复改回旧行为看断言是否变红 ——
令牌字段改回 stage[] / 编辑读表单 stage / 排序改回 position / 设置按钮挪走 /
框不转发点击 / 文件框不再 sr-only / 删缩略图规格 / 删除不回 JSON /
结束端改回 hidden / 日历本默认改回第一个 / 天气提示加回 / 弹框改回内联。
- 部署脚本静态断言段本地空跑 **307/0**。
269 lines
12 KiB
PHP
269 lines
12 KiB
PHP
<?php
|
||
/**
|
||
* 日历本管理(v12):建本 / 改名 / 换色 / 删除 / 共享给别人(只读或可写)。
|
||
*
|
||
* ⚠️ 「观影」「旅行」两本是系统预置的,不能改名也不能删 ——
|
||
* 它们的日程是从观影模块与旅程模块实时汇总出来的,删掉就再也回不来了
|
||
* (Calendar::delete 里也只删 kind='custom',这里是同一道栅栏的界面侧)。
|
||
*
|
||
* @param array $cals 我自己的日历本(kind 任意)
|
||
* @param array $shared 别人共享给我的
|
||
* @param array $people 名册(共享下拉用)
|
||
*/
|
||
$isEditing = !empty($editing);
|
||
$canWrite = \App\Auth::canWrite();
|
||
?>
|
||
<div class="page-head">
|
||
<h1>日历本</h1>
|
||
<span class="sub">共 <?= count($cals) ?> 本<?= $shared ? ',别人共享给我 ' . count($shared) . ' 本' : '' ?></span>
|
||
<div class="actions">
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar')) ?>">返回日程</a>
|
||
</div>
|
||
</div>
|
||
|
||
<?php if (!$canWrite): ?>
|
||
<div class="card card-pad empty"><b>只读账号</b>访客只能查看日历本,不能新建或修改。</div>
|
||
<?php else: ?>
|
||
<div class="card card-pad">
|
||
<h2 class="cinema-h2"><?= $isEditing ? '编辑日历本' : '新建日历本' ?></h2>
|
||
<form method="post" action="<?= e(url($isEditing ? 'calendar/cal_update' : 'calendar/cal_add')) ?>">
|
||
<?= csrf_field() ?>
|
||
<?php if ($isEditing): ?>
|
||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||
<?php endif; ?>
|
||
<div class="form-grid">
|
||
<div class="field">
|
||
<label for="cb-name">名字 *</label>
|
||
<input class="input" id="cb-name" name="name" required
|
||
value="<?= e(old('name', $editing['name'] ?? '')) ?>" placeholder="如:体检 / 值日">
|
||
</div>
|
||
<div class="field">
|
||
<label for="cb-color">颜色</label>
|
||
<div class="color-row">
|
||
<input type="color" id="cb-color" name="color" class="color-picker"
|
||
value="<?= e(old('color', $editing['color'] ?? '#4A7C82')) ?>">
|
||
<span class="color-hex"><?= e(old('color', $editing['color'] ?? '#4A7C82')) ?></span>
|
||
<span class="preset-palette">
|
||
<?php foreach (\App\Calendar::PRESET_CAL_COLORS as $pc): ?>
|
||
<span class="preset-color" data-color="<?= $pc ?>" style="background: <?= $pc ?>;" title="<?= $pc ?>"></span>
|
||
<?php endforeach; ?>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn" type="submit"><?= $isEditing ? '保存' : '新建' ?></button>
|
||
<?php if ($isEditing): ?>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar/calendars')) ?>">取消</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="card card-pad">
|
||
<h2 class="cinema-h2">我自己的</h2>
|
||
<?php if (!$cals): ?>
|
||
<p class="empty-hint">还没有日历本。</p>
|
||
<?php else: ?>
|
||
<div class="table-wrap">
|
||
<table class="table">
|
||
<thead>
|
||
<tr><th>名字</th><th>颜色</th><th>共享给</th><?php if ($canWrite): ?><th>操作</th><?php endif; ?></tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php foreach ($cals as $c): ?>
|
||
<tr>
|
||
<td>
|
||
<b><?= e((string)$c['name']) ?></b>
|
||
<?php if (($c['kind'] ?? '') !== 'custom'): ?>
|
||
<span class="node-badge">系统预置</span>
|
||
<?php endif; ?>
|
||
</td>
|
||
<td>
|
||
<span class="color-preview" style="background: <?= e((string)$c['color']) ?>;"></span>
|
||
<span class="mono"><?= e((string)$c['color']) ?></span>
|
||
</td>
|
||
<td>
|
||
<?php $sh = $shares[(int)$c['id']] ?? []; ?>
|
||
<?php if (!$sh): ?>
|
||
<span class="link-quiet">不共享</span>
|
||
<?php else: ?>
|
||
<div class="trip-people">
|
||
<?php foreach ($sh as $s): ?>
|
||
<?= person_chip($s) ?>
|
||
<span class="node-badge"><?= ($s['perm'] ?? '') === 'write' ? '可写' : '只读' ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php if ($canWrite && $people): ?>
|
||
<details class="node-add">
|
||
<summary class="link-quiet">共享设置</summary>
|
||
<form class="inline-form" method="post" action="<?= e(url('calendar/cal_share')) ?>">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$c['id'] ?>">
|
||
<?php
|
||
$ppName = 'person_id';
|
||
$ppPeople = array_values(array_filter($people,
|
||
fn($p) => (int)$p['id'] !== (int)\App\Auth::personId()));
|
||
$ppSelected = [];
|
||
$ppMode = 'single';
|
||
$ppOpenBtn = '选择要共享给谁';
|
||
$ppTitle = '共享给谁';
|
||
$ppEmptyText = '未选择';
|
||
require __DIR__ . '/../_person_picker.php';
|
||
?>
|
||
<select class="select" name="perm">
|
||
<option value="read">只读</option>
|
||
<option value="write">可写</option>
|
||
</select>
|
||
<button class="btn btn-sm" type="submit">共享</button>
|
||
</form>
|
||
<?php foreach ($sh as $s): ?>
|
||
<form class="inline-form" method="post" action="<?= e(url('calendar/cal_unshare')) ?>">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$c['id'] ?>">
|
||
<input type="hidden" name="person_id" value="<?= (int)$s['person_id'] ?>">
|
||
<span class="cal-share-name"><?= e(person_name($s)) ?></span>
|
||
<button class="btn btn-ghost btn-sm" type="submit">取消共享</button>
|
||
</form>
|
||
<?php endforeach; ?>
|
||
</details>
|
||
<?php endif; ?>
|
||
</td>
|
||
<?php if ($canWrite): ?>
|
||
<td>
|
||
<div class="actions">
|
||
<?php /* v24 第 7 条:每本都能导出 .ics(预置本也能 —— 导的是派生出来的内容)。 */ ?>
|
||
<a class="btn btn-ghost btn-sm"
|
||
href="<?= e(url('calendar/export', ['id' => (int)$c['id']])) ?>">导出 ics</a>
|
||
<?php if (($c['kind'] ?? '') === 'custom'): ?>
|
||
<a class="btn btn-ghost btn-sm"
|
||
href="<?= e(url('calendar/calendars', ['edit' => (int)$c['id']])) ?>">编辑</a>
|
||
<form method="post" action="<?= e(url('calendar/cal_del')) ?>"
|
||
onsubmit="return confirm('删除「<?= e((string)$c['name']) ?>」?本子里的日程会一起删掉。')">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$c['id'] ?>">
|
||
<button class="btn btn-danger btn-sm" type="submit">删除</button>
|
||
</form>
|
||
<?php else: ?>
|
||
<span class="link-quiet">不可改</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</td>
|
||
<?php endif; ?>
|
||
</tr>
|
||
<?php endforeach; ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<?php if ($canWrite): ?>
|
||
<?php /* v24 第 7 条:把一个 .ics 文件里的日程整批导进某一本。
|
||
只能导进自定义本 —— 观影/旅行两本是派生的,塞进去就成了孤儿日程
|
||
(日历里有、观影列表里没有)。 */ ?>
|
||
<div class="card card-pad">
|
||
<h2 class="cinema-h2">
|
||
导入 ics
|
||
<span class="hint">把别的日历导出的 .ics 文件整批装进来</span>
|
||
</h2>
|
||
<p class="small muted" style="margin:0 0 16px">
|
||
同一个文件导两次也<b>不会重复</b>:每条日程有个全球唯一的 UID,
|
||
已经导过的会被更新,而不是再插一条。
|
||
</p>
|
||
<form method="post" action="<?= e(url('calendar/import')) ?>" enctype="multipart/form-data">
|
||
<?= csrf_field() ?>
|
||
<div class="form-grid">
|
||
<div class="field">
|
||
<label for="im-cal">导进哪一本 *</label>
|
||
<select class="select" id="im-cal" name="calendar_id">
|
||
<?php foreach ($cals as $c): ?>
|
||
<?php if (($c['kind'] ?? '') !== 'custom') { continue; } ?>
|
||
<option value="<?= (int)$c['id'] ?>"><?= e((string)$c['name']) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="im-file">.ics 文件 *</label>
|
||
<?php $sdName = 'ics'; $sdId = 'im-file'; $sdAccept = '.ics,text/calendar';
|
||
$sdMultiple = false; $sdRequired = true;
|
||
require __DIR__ . '/../_stage_drop.php'; ?>
|
||
</div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-sm" type="submit">导入</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php /* v24 第 7 条后半:CalDAV —— 把我的日历本订阅到手机/别的日历程序里 */ ?>
|
||
<div class="card card-pad">
|
||
<h2 class="cinema-h2">
|
||
CalDAV 订阅
|
||
<span class="hint">在手机日历 / DAVx⁵ / Thunderbird 里订阅你的日历本</span>
|
||
</h2>
|
||
<p class="small muted" style="margin:0 0 12px">
|
||
填下面这个地址 + 你的<b>姓名或手机号</b> + <b>CalDAV 口令</b>,就能把「我的日历本」
|
||
同步到别的日历程序里。这是<b>只读</b>订阅的 —— 在手机上改日程请回到本站来改。
|
||
<br>口令与登录密码是<b>分开的</b>:订阅凭据会被客户端长期存着,所以另发一个,
|
||
随时可换、不影响登录。
|
||
</p>
|
||
<div class="field">
|
||
<label>服务器地址</label>
|
||
<input class="input mono" readonly
|
||
value="<?= e(rtrim((string)fb_config('base_url', ''), '/') . '/dav/') ?>">
|
||
<span class="tip">在日历客户端里填这一条即可,会列出你所有的日历本。</span>
|
||
</div>
|
||
<?php if (!empty($cdPlain)): ?>
|
||
<p class="tip" style="background:#FFF6E5;border-color:#E8C98A;padding:8px 12px;border-radius:8px">
|
||
<b>这是你的新口令,只显示这一次,请立刻复制走:</b>
|
||
<br><code class="mono" style="font-size:15px"><?= e($cdPlain) ?></code>
|
||
</p>
|
||
<?php endif; ?>
|
||
<?php if ($canWrite): ?>
|
||
<div class="btn-row">
|
||
<form method="post" action="<?= e(url('calendar/caldav_token')) ?>" class="res-inline">
|
||
<?= csrf_field() ?>
|
||
<button class="btn btn-sm" type="submit">
|
||
<?= !empty($cdHas) ? '重置 CalDAV 口令' : '生成 CalDAV 口令' ?>
|
||
</button>
|
||
</form>
|
||
<?php if (!empty($cdHas)): ?>
|
||
<form method="post" action="<?= e(url('calendar/caldav_revoke')) ?>" class="res-inline">
|
||
<?= csrf_field() ?>
|
||
<button class="btn btn-ghost btn-sm" type="submit"
|
||
onclick="return confirm('撤销后所有已订阅的客户端都会失去访问。')">撤销口令</button>
|
||
</form>
|
||
<span class="node-badge">口令已配置</span>
|
||
<?php else: ?>
|
||
<span class="node-badge">还没配置口令</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<?php if ($shared): ?>
|
||
<div class="card card-pad">
|
||
<h2 class="cinema-h2">别人共享给我的</h2>
|
||
<div class="table-wrap">
|
||
<table class="table">
|
||
<thead><tr><th>名字</th><th>谁的</th><th>我的权限</th></tr></thead>
|
||
<tbody>
|
||
<?php foreach ($shared as $c): ?>
|
||
<tr>
|
||
<td><b><?= e((string)$c['name']) ?></b></td>
|
||
<?php /* 共享过来的行里"人"的字段带着前缀(owner_name / owner_nick),
|
||
不是 person_name() 直接认的 name / my_nickname —— 在这里适配一次。 */ ?>
|
||
<td><?= e(person_name(['name' => $c['owner_name'] ?? '', 'my_nickname' => $c['owner_nick'] ?? ''])) ?></td>
|
||
<td><span class="node-badge"><?= ($c['perm'] ?? '') === 'write' ? '可写' : '只读' ?></span></td>
|
||
</tr>
|
||
<?php endforeach; ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|