用户 2026-10-13 七条。拍板:影院只记地址、不存经纬度(后续用高德反查);
日程状态只删界面与展示、数据库列保留(「后续会有一个整体清理的工作」)。
①🔴 读书页慢 —— 真根因是**会话锁**,不是封面(我先判断错了方向)
用户原话:「读书现在还是非常慢,就是进入读书这个页面,刚开始还是非常的慢。」
线上实测(真公网、同一会话连打 3 次):
第 1 次 TTFB 0.08s ← 触发微信读书同步
第 2 次 TTFB **8.73s** ← 用户说的"刚开始非常慢"
第 3 次 TTFB 0.07s
插桩拿到的服务端时间线把因果钉死:
21:18:05.483 QUEUED ← 第 1 个请求排队
21:18:05.501 FINISH 2ms ← 响应确实提前发出去了(这步是好的)
21:18:14.674 SYNC 9.2s ← 但它仍占着这个人的会话文件锁跑完 9.2 秒
21:18:14.682 QUEUED ← 第 2 个请求此刻才真正开始执行
⇒ **`fastcgi_finish_request()` 只断开客户端连接、不释放 PHP 文件会话锁。**
后台同步要 9.2 秒(真打微信读书接口),同一个人的下一个请求一路等到它跑完。
修法(缺一不可):
· `WeRead::queueBackgroundSync()` 回调里 **先 `session_write_close()`、
再 `fastcgi_finish_request()`**(顺序不能反);
· `index.php` 两处"渲染前排同步"的入口排完**立刻放锁**
(shutdown 回调不一定执行:客户端中断/服务器超时才不放过);
· 顺带修 **`Holiday::queueBackgroundFetch()` 的同型问题**(联网 12 秒)。
为什么以前没发现:v29 引入"后台化"时只验证了"响应是不是提前发出去",
**单次请求测量永远看不到这个 bug** —— 必须同一会话连打两次才现形。
线上复验:修复后连打 4 次 = 0.15 / 0.15 / 0.09 / 0.15 秒(修复前第 2 次 8.73s);
后台同步仍正常(`weread_sync_at` 已更新)。
② 封面:顺手也修了(但这不是用户说的那个问题)
· `media.php` 读 OSS 前先放会话锁(原来从不放,35 张封面串行);
· 新增 `Storage::cacheLocally()` 磁盘二级缓存(原来 `read()` 只读不写回);
· 让 304 不再先拉整张图(原来先取回 body、再判 `If-None-Match`)。
线上实测:冷取 149ms(走 OSS)→ 热取 35ms(本地缓存、字节一致)
→ 带 `If-None-Match` 返回 **304 / 19.8ms / 空体**;35 张封面 103ms → 20ms(5 倍)。
③ 地址联想:抽成全站共用一份(`assets/js/addr_suggest.js`)+ 接入三处
· 影院管理页、观影新增页的「新建影院」弹框、日程地点、行程出发/到达;
· `layout.php` 按需加载(`[data-addr]` 出现才拉 SDK + 我们的脚本),
并暴露 `fbLoadAddr(scope)` 给 AJAX 片段(v42 踩过"内联 script 不执行");
· 安全密钥在 SDK 之前设置;回填支持 `data-addr-fill` / `data-addr-for`、
**只补空白字段**(不覆盖用户手写)、直辖市 `province==city` 去重;
· 字段名有两套(影院 `address`/`place`,行程 `from_addr`/`to_addr` 缩写 `_addr`),
`fieldFor()` 带同义词表 + 后缀匹配;
· 影院**只存地址、不存经纬度**(按用户要求)。
④ 笔记两条
· 「点保存没反应」真因:附件区是个 `<form>` **套在保存表单里** ——
HTML 不允许 form 套 form,浏览器丢掉内层标签、保留它的 `</form>`,
于是**保存按钮成了孤儿**(`button.form === null`),点了不提交也不报错。
真浏览器实测:修前 `btnInsideForm:false` / 点后 POST=0;修后 true / POST=1。
改法:附件区改 `<div id="noteAttForm">`,上传按钮用 `formaction`。
· 详情页宽度:`.note-read { max-width: 820px }` → `none`
(内容卡 820px vs 下方共享卡 1032px;修后两者都是 1032px)。
⑤ 日程状态下线
· 删表单里的「状态」下拉、`Calendar::statusWord()`、浮层 JSON 的 `status_word`;
· **保留** `events.status` 列与 `Calendar::statusOf()`(契约不动,等整体清理)。
验证(新增 5 个套件):
· `_fb_v47_addr.py`(接线 24 条)/ `_fb_v47_addr_sim.py`(真浏览器 + 假高德,16 条)
· `_fb_v47_readperf.py`(缓存与会话锁,23 条)
· `_fb_v47_notes.py`(真浏览器,9 条)
· `_b47_readperf_falsify.py`(反向验证 9 个注入)—— **9/9 全抓住**
· 全量 e2e **1510/0**;vCard 规格+往返 40/0;TB 探针 44/0;
v44 反向验证 17/0;全流水线 **PUSH_RC=0**(含"第47批形态"静态断言)
· **线上终验**:读书页整页 81ms、封面 103→20ms、media 冷 149→热 35→304 19.8ms、
修复前第 2 次请求 8.73s → 修复后 0.15s、地址联想 meta[fb-addr] 带真高德 key
顺带修掉三处**探针自身**的假红/假绿(详见 pitfalls.md):
· `_b44_falsify.py` 的"整小时"注入在**整点**与正确实现等价 ⇒ 换成恒错值;
· `_fb_b44_ui.py` 3b 的并发计时断言在单进程 `php -S` 下必然假红 ⇒ 改断言确定事实;
· 多处探针的"清理删除"撞沙箱删除门禁 ⇒ 探针**中途死掉**看起来像产品坏了
⇒ 统一改成 `_safe_rm()` / 不删。
826 lines
45 KiB
PHP
826 lines
45 KiB
PHP
<?php
|
||
/**
|
||
* 观影表单(新增 / 编辑,一张表单两用 —— 与 people/form 同一思路)。
|
||
*
|
||
* v9 变化:观影时间改为「开始 / 结束」两个秒级时刻(_datetime.php 控件,
|
||
* 服务端 read_dt_input 取值);评分与观后感**移出表单** —— 搬到详情页的
|
||
* 「评价与评论」区(MovieLog 同款:每账号一条评价,谁都能评);影院改为
|
||
* 下拉选择已有影院 + 可选「新建影院」行内三段。
|
||
*
|
||
* 海报与票根是 free 槽位(v8):不进裁剪器、整图等比缩进框内,普通文件控件即可。
|
||
* 现场照片只在**新增**时提供多选;编辑时在详情页里逐张补/删。
|
||
*/
|
||
$isEdit = !empty($m['id']);
|
||
|
||
// 时间回填:校验失败重画时优先用 old() 里的分字段重组(否则用户刚选的时刻会丢);
|
||
// 正常进编辑页时用库里的值。
|
||
$dtFromOld = static function (string $name, ?string $dbValue): ?string {
|
||
$date = trim((string)old($name . '_date', ''));
|
||
if ($date !== '') {
|
||
return sprintf('%s %02d:%02d:%02d', $date,
|
||
(int)old($name . '_hour', 0), (int)old($name . '_minute', 0), (int)old($name . '_second', 0));
|
||
}
|
||
return ($dbValue !== null && $dbValue !== '') ? $dbValue : null;
|
||
};
|
||
$dtStart = $dtFromOld('starts_at', $m['starts_at'] ?? null);
|
||
$dtEnd = $dtFromOld('ends_at', $m['ends_at'] ?? null);
|
||
// 刚用「新建影院」弹框加完一家 → 回到这里要**自动选中**它(见 index.php 的 cinemas_save)。
|
||
// 优先级:老输入 > ?cinema=(刚新建的)> 记录里的值。
|
||
$selCinema = (int)old('cinema_id', (int)($_GET['cinema'] ?? 0) ?: ($m['cinema_id'] ?? 0));
|
||
$curAttendees = array_map('intval', array_column($m['attendees'] ?? [], 'id'));
|
||
/* 🔴 v38(用户 2026-10-10):「同行的人,这里每个人添加的时候,应该默认带上自己,
|
||
也就是自己不用选择就应该已经选上了。」
|
||
⇒ **新增**时把"我"预置进已选列表;**编辑**时以库里的值为准
|
||
(用户可能就是自己改了,不能每次打开都把"我"塞回去)。
|
||
⚠️ `old()` 存在(= 刚才这次提交校验失败重画)时,尊重用户上一次的勾选 ——
|
||
否则他取消掉"自己"、填错别处再提交,会发现"自己"又回来了。 */
|
||
$meId = (int)\App\Auth::personId();
|
||
$hasOld = array_key_exists('attendees', (array)($_SESSION['_old'] ?? []));
|
||
if ($hasOld) {
|
||
$selAttendees = array_map('intval', (array)old('attendees', []));
|
||
} elseif ($isEdit) {
|
||
$selAttendees = $curAttendees;
|
||
} else {
|
||
// 新增:默认带上自己(名册里查得到才加 —— 免得给一个不存在的 id)
|
||
$selAttendees = $meId > 0 ? [$meId] : [];
|
||
}
|
||
?>
|
||
<?php /* 🔴 v37:本模板现在有两种用法 ——
|
||
① **整页**(`movies/edit` 的编辑页;以及 `movies/new` 的直接访问 / 校验失败重画);
|
||
② **弹框片段**(被 `movies/index.php` require,`$mvModalOnly = true`,
|
||
在观影列表页上弹出"记一场电影")。
|
||
⚠️ 用法 ② 里**不能**输出 page-head / 设置菜单 —— 否则列表页会莫名多出一个大标题。 */
|
||
$mvModalOnly = !empty($mvModalOnly); ?>
|
||
<?php if (!$mvModalOnly): ?>
|
||
<div class="page-head">
|
||
<h1><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></h1>
|
||
<span class="sub"><?= $isEdit ? e($m['title']) : '片名必填,其他都可以以后再补' ?></span>
|
||
<div class="actions">
|
||
<?php /* 文案一律「返回观影」(用户 2026-10-01 要求:观影模块里不再出现
|
||
「返回观影记录」「返回列表」「返回详情」三种叫法)。
|
||
落地页仍按来路走:从详情页点「编辑」进来的,回去还是那条记录的详情页。 */ ?>
|
||
<a class="btn btn-ghost"
|
||
href="<?= e($isEdit ? url('movies/show', ['id' => (int)$m['id']]) : url('movies')) ?>">
|
||
返回观影
|
||
</a>
|
||
<?php $setCurrent = 'form'; $setCanWrite = \App\Auth::canWrite(); require __DIR__ . '/_settings_menu.php'; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; /* /!$mvModalOnly */ ?>
|
||
|
||
<?php /* 🔴🔴 v37 用户 2026-10-09 第 6 条第 4 点:「观影模块也是一样,新增一部电影时,
|
||
也弹出一个框来输入所有信息。填写完之后,再刷新观影页面就可以了。」
|
||
⇒ **新增**走弹框(与日程 / 任务同一套形态),**编辑**仍留在页面里
|
||
(编辑是从详情页进来的、本来就不在列表中,没有"被顶走"的问题)。
|
||
⚠️ 表单本身**一个字没动**(字段名 / 服务端契约 / CSRF / enctype 全照旧),
|
||
只是把它的容器从"页面上的卡片"换成"浮层里的面板"。 */ ?>
|
||
<?php
|
||
/* ⚠️ 弹框的形态 / 初始显隐 —— 三个开关**分开管**(v40 起):
|
||
· `$mvModalOnly` 不输出 page-head + 设置菜单(本模板被**别的页面内嵌**时用:
|
||
观影列表页的"记一场电影"、观影详情页的"编辑");
|
||
· `$mvModalForce` **强制**成弹框壳(`$isEdit` 时默认是"整页卡片",
|
||
详情页的编辑要弹框,就靠这个翻转);
|
||
· `$mvOpen` 初始是否打开。默认:弹框形态且非内嵌 → 打开。
|
||
|
||
各调用方实际传的:
|
||
· 观影列表页内嵌 → Only=true (关闭,点按钮才开)
|
||
· `movies/new` 整页 → 都不传 (打开:校验失败重画要看得见)
|
||
· 观影详情页内嵌 → Only=true + Force=true (关闭,点"编辑"才开)
|
||
· AJAX 校验失败重画 → Only=true + Force=true + Open=true(重画回弹框里,保持打开) */
|
||
$mvModalOnly = !empty($mvModalOnly);
|
||
$mvModalForce = !empty($mvModalForce);
|
||
$mvModal = $mvModalForce || !$isEdit;
|
||
$mvOpen = isset($mvOpen) ? !empty($mvOpen) : ($mvModal && !$mvModalOnly);
|
||
?>
|
||
<div class="<?= $mvModal ? 'cal-modal' : 'mv-form-wrap' ?>"<?= $mvModal ? ' id="mvAddCard" role="dialog" aria-modal="true" aria-label="' . ($isEdit ? '编辑观影记录' : '记一场电影') . '"' . ($mvOpen ? '' : ' hidden') : '' ?>>
|
||
<?php if ($mvModal): ?>
|
||
<?php /* 🔴 v40:弹框的标题 / 主按钮文案**随用途变** —— 详情页点「编辑」时进来的是
|
||
同一份模板,标题得写「编辑观影记录」、按钮写「保存」,不能还叫"记下这场电影"。
|
||
⚠️ 元素 id **保持不变**(`mvAddCard` / `mvAddSubmit`…):同一页上只会有一个
|
||
这类弹框,改 id 只会让既有的探针与 CSS 一起失效,收益为零。 */ ?>
|
||
<div class="cal-modal-panel mv-panel">
|
||
<div class="cal-modal-head">
|
||
<b><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></b>
|
||
<button type="button" class="cal-modal-x" id="mvAddX" aria-label="关闭">✕</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
<form method="post" enctype="multipart/form-data"
|
||
action="<?= e(url($isEdit ? 'movies/update' : 'movies/create')) ?>"
|
||
id="mvForm">
|
||
<?= csrf_field() ?>
|
||
<?php if ($isEdit): ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<?php endif; ?>
|
||
<?php /* ⚠️ 弹框模式下"主要动作在右下角"(与日程 / 任务弹框一致):
|
||
body 滚、foot 固定。编辑态仍是页面上的普通卡片。 */ ?>
|
||
<?php if ($mvModal): ?><div class="cal-modal-body"><?php endif; ?>
|
||
|
||
<div class="<?= $mvModal ? 'mv-form-inner' : 'card card-pad' ?>">
|
||
<?php /* 🔴🔴 v38(用户 2026-10-10):**标签内联 + 固定宽度对齐**。
|
||
用户原话:「记录一场电影,这个弹框因为标题和下面的输入框都是两行的,
|
||
所以导致弹框非常长。能不能排排版,让前面的标题后面加个冒号,后面的输入框
|
||
直接跟在它后面,这样就变成一行。包括开始、结束时间、影院、同行的人、简介等等,
|
||
能把它排成一行的都排成一行,但是一定要注意对齐的问题,如果不对齐的话可能不好看。」
|
||
⇒ 换成 `.mv-grid`:每行 "标签(固定 62px,右对齐) : 控件(占满剩余)"。
|
||
固定宽度是"对齐"的关键 —— 标签长短不一(片名/时间/影院/同行的人)时,
|
||
控件左缘仍然在**同一条竖线**上。
|
||
⚠️ 不用 `.form-grid`(它是 2 列 grid,本来就是"标题在上、控件在下"):
|
||
那一套是给普通页面表单用的,别为了弹框把它改掉。 */ ?>
|
||
<div class="mv-grid">
|
||
<div class="mv-row">
|
||
<label class="mv-lb" for="title">片名<i>*</i></label>
|
||
<div class="db-title-row">
|
||
<input class="input" id="title" name="title" value="<?= e(old('title', $m['title'] ?? '')) ?>"
|
||
required autocomplete="off">
|
||
<button type="button" class="btn btn-ghost btn-sm" id="dbFetch"
|
||
title="按片名从豆瓣抓取片名、简介、海报等">📡 自动获取</button>
|
||
</div>
|
||
<?php /* v10 豆瓣自动补充:输入片名出下拉候选,点「自动获取」直接抓。
|
||
抓到的元数据整体进隐藏 douban_meta(JSON),海报走服务端落盘的 poster_key。 */ ?>
|
||
<div class="db-suggest" id="dbSuggest" hidden></div>
|
||
<input type="hidden" name="douban_meta" id="dbMeta" value="">
|
||
<input type="hidden" name="poster_key" id="dbPosterKey" value="">
|
||
<div class="db-poster-preview" id="dbPosterWrap" hidden>
|
||
<img id="dbPosterImg" alt="海报预览">
|
||
<span class="tip">海报已从豆瓣取回,保存后生效。</span>
|
||
</div>
|
||
<?php if (!empty($errors['title'])): ?><span class="err"><?= e($errors['title']) ?></span><?php endif; ?>
|
||
</div>
|
||
|
||
<?php /* 用户 2026-10-04 第 7 条:起止是一个**范围**。用户 2026-10-09 第 2 次:
|
||
「前面是日期,后面是时和分,只记录到时和分就行了。时和分,是下拉的。」
|
||
⇒ 形态 = 日期框 + 时/分两个下拉(**没有秒**,见 app.js upgradeRange 的说明)。 */ ?>
|
||
<div class="mv-row dt-range">
|
||
<span class="mv-lb dt-range-label">时间</span>
|
||
<?php /* v37:秒去掉、"散场时间可不填。"那句也删了(用户要求省空间)。
|
||
v38:`$dtPlugin = 'antd'` ⇒ app.js 把这对端点升级成
|
||
**Ant Design 的 RangePicker**(用户 2026-10-10 点名要的插件,
|
||
先在观影模块试点)。原生下拉**照旧在**,拉不动时就是它们。 */ ?>
|
||
<?php $dtName = 'starts_at'; $dtValue = $dtStart; $dtId = 'starts_at_date';
|
||
$dtRange = 'start'; $dtPlugin = 'antd';
|
||
require __DIR__ . '/../_datetime.php'; ?>
|
||
<?php if (!empty($errors['starts_at'])): ?><span class="err"><?= e($errors['starts_at']) ?></span><?php endif; ?>
|
||
<?php $dtName = 'ends_at'; $dtValue = $dtEnd; $dtId = '';
|
||
$dtRange = 'end'; $dtPlugin = 'antd';
|
||
require __DIR__ . '/../_datetime.php'; ?>
|
||
<?php if (!empty($errors['ends_at'])): ?><span class="err"><?= e($errors['ends_at']) ?></span><?php endif; ?>
|
||
</div>
|
||
|
||
<?php /* 用户 2026-10-04 第 11 批 #4(三件事):
|
||
① 「选择影院的时候,影院的颜色要出现在下拉列表中,用来显示不同的影院」
|
||
→ 原生 <option> **画不了色块**(浏览器只渲染纯文本),
|
||
所以这里换成自定义下拉:按钮 + 弹出列表,每行左侧一个影院色点。
|
||
真实值仍然提交给隐藏的 <input name="cinema_id">(表单契约不变)。
|
||
② 「管理影院按钮,改为新建影院,点击后弹框,添加新影院,不要跳转到管理影院的页面」
|
||
→ 弹框里放"地方/名称/颜色"三个字段(影院管理页那张表单的核心),
|
||
提交时带 back=movies/new,服务端存完回到本页并自动选中新影院。
|
||
③ 下拉/弹框的样式与全站统一(宣纸底色、品牌色描边)。 */ ?>
|
||
<div class="mv-row">
|
||
<label class="mv-lb" for="cinema_id">影院</label>
|
||
<div class="cinema-select-row">
|
||
<div class="cs" id="cinemaPicker" data-open="0">
|
||
<button type="button" class="cs-btn" id="csBtn" aria-haspopup="listbox" aria-expanded="false">
|
||
<span class="cs-dot" id="csDot"<?= $selCinema > 0 ? '' : ' hidden' ?>></span>
|
||
<span class="cs-text" id="csText">不记录影院</span>
|
||
<span class="cs-caret" aria-hidden="true">▾</span>
|
||
</button>
|
||
<div class="cs-menu" id="csMenu" hidden role="listbox">
|
||
<?php /* 🔴 v39(用户 2026-10-10):「影院那个地方应该有一个搜索的功能,
|
||
下拉的地方上面有一个搜索筛选的功能。」
|
||
⇒ 弹出列表**顶部**放一个搜索框,输入即过滤(按地点+名称)。
|
||
⚠️ 搜索框是**这个列表的一部分**,不放在外面 ——
|
||
它只在"下拉打开时"才有意义,放在外面会一直占一行高度。
|
||
⚠️ 它不是表单字段(没有 name),只是筛选手;
|
||
选中仍然靠点列表项 → 写进隐藏的 cinema_id。 */ ?>
|
||
<div class="cs-search">
|
||
<input type="text" class="cs-search-input" id="csSearch"
|
||
placeholder="搜索影院" autocomplete="off"
|
||
aria-label="搜索影院" role="searchbox">
|
||
</div>
|
||
<div class="cs-list" id="csList">
|
||
<button type="button" class="cs-item" data-id="0" data-color="" role="option">
|
||
<span class="cs-dot is-none" aria-hidden="true"></span><span>不记录影院</span>
|
||
</button>
|
||
<?php foreach ($cinemas as $c): ?>
|
||
<button type="button" class="cs-item" role="option"
|
||
data-id="<?= (int)$c['id'] ?>"
|
||
data-color="<?= e((string)($c['color'] ?: '#888888')) ?>"
|
||
data-text="<?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>">
|
||
<span class="cs-dot" style="background: <?= e((string)($c['color'] ?: '#888888')) ?>;"></span>
|
||
<span><?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?></span>
|
||
</button>
|
||
<?php endforeach; ?>
|
||
</div><?php /* /.cs-list */ ?>
|
||
<?php /* 一条都没匹配上时露出来(平时 hidden,不占高度) */ ?>
|
||
<div class="cs-empty" id="csEmpty" hidden>没有匹配的影院</div>
|
||
</div>
|
||
<input type="hidden" id="cinema_id" name="cinema_id" value="<?= (int)$selCinema ?>">
|
||
</div>
|
||
<button type="button" class="btn btn-ghost btn-sm" id="cinemaNewBtn">新建影院</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mv-row">
|
||
<span class="mv-lb">同行的人</span>
|
||
<?php /* v24 第 11 条:换成全局人员选择器(templates/_person_picker.php)。
|
||
原来这套是观影页私有的 .att-*,它的「过滤」其实一直是坏的 ——
|
||
.att-item 自己写了 display:flex,压过了浏览器的 [hidden]{display:none},
|
||
JS 里 el.hidden = true 根本没生效,搜什么都还是一整列。 */ ?>
|
||
<?php if ($people): ?>
|
||
<?php
|
||
$ppName = 'attendees[]';
|
||
$ppPeople = $people;
|
||
$ppSelected = $selAttendees;
|
||
$ppMode = 'multi';
|
||
$ppOpenBtn = '+ 添加观影人';
|
||
$ppTitle = '选择观影人';
|
||
$ppTip = '';
|
||
require __DIR__ . '/../_person_picker.php';
|
||
?>
|
||
<?php else: ?>
|
||
<span class="tip">名册里还没有人,先把家人加进名册再来记。</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<?php /* 🔴 v39(用户 2026-10-10):「简介和备注不要放在一行,也就是说一个字段
|
||
它就占一行。所以简介后面是一行,备注后面是一行。」
|
||
⇒ 撤销 v38 的 `.mv-pair` 并排,两块各占一整行(回到普通 `.mv-row`)。
|
||
⚠️ 并排当时是为了压高度,但多行文本框挤半宽后每行都换行、反而更难读 ——
|
||
用户看过真实效果后的选择是"各占一行",按他说的做。 */ ?>
|
||
<div class="mv-row">
|
||
<label class="mv-lb" for="info">简介</label>
|
||
<textarea class="input" id="info" name="info" rows="3"
|
||
placeholder="剧情简介"><?= e(old('info', $m['info'] ?? '')) ?></textarea>
|
||
</div>
|
||
|
||
<div class="mv-row">
|
||
<label class="mv-lb" for="note">备注</label>
|
||
<textarea class="input" id="note" name="note" rows="2"><?= e(old('note', $m['note'] ?? '')) ?></textarea>
|
||
</div>
|
||
|
||
<?php
|
||
/**
|
||
* v24 第 20 批 第 1 条:编辑页把**已经存过的**海报 / 观影照片**显示出来**。
|
||
*
|
||
* 用户原话:「观影模块,编辑观影,已经保存的海报和票根、合影,都没带进来。」
|
||
* ⚠️ 原来这里只有两句灰字提示("已有海报,不选新图就保留原图。")——
|
||
* 也就是说**图上你根本看不见图**:想确认"当时选的是哪张"、或想换掉它,
|
||
* 都得先回到详情页看一眼。用户要的是"带进来",即**看得见**。
|
||
*
|
||
* 做法:能预览的(图片)给缩略图 + 删除;不可预览的给一个下载入口。
|
||
* ⚠️ 换图仍然靠"选新文件"(服务端换新图时会顺手删掉旧对象,见 index.php movies/update),
|
||
* 所以这里**不需要**"确认换这张"之类的中间态。
|
||
* ⚠️ 每一块的删除按钮都关联到一个**独立的表单** —— 它们必须在**外层表单之外**
|
||
* (form 嵌套会让外层表单提前关闭,"保存"键就失效了,第 20 批 第 3 条刚栽过)。
|
||
* 按钮留在原位、用 HTML5 的 `form="id"` 关联到外面那个表单。
|
||
*/
|
||
$mHasPoster = $isEdit && !empty($m['poster_key']);
|
||
$mHasTicket = $isEdit && !empty($m['ticket_key']);
|
||
$mPhotos = $isEdit ? (array)($m['photos'] ?? []) : [];
|
||
$mDelForms = []; // 收集起来,在表单**外面**统一渲染
|
||
?>
|
||
<?php /* 🔴🔴 v39(用户 2026-10-10):「海报和观影照片为什么和上面的标题不一样呢?
|
||
海报的字体和简介是一样的,也带一个冒号。然后把后面点击或拖动进行上传往后放,
|
||
和简介后面的输入框保持一样大小。观影照片也是类似的,观影照片也是加粗。
|
||
和简介的字体保持一致,不带冒号,后面放上点击或拖动进行上传。」
|
||
|
||
⇒ 两块都改成**与简介完全相同的 `.mv-row`**:
|
||
· 标签用 `.mv-lb`(= 简介那个:14px / 600 / var(--ink) / 固定 62px / 右对齐),
|
||
冒号由 `.mv-lb::after` 统一给 —— 所以**海报自带冒号**、
|
||
而观影照片的标签多一个 `.no-colon`(用户明确说"不带冒号")。
|
||
· 内容(缩略图 + 上传框)包一层 `.mv-media-body`,它是 `.mv-row` 里
|
||
**唯一**参与弹性布局的项 ⇒ 左缘与简介输入框同为 444、宽度也同为"占满剩余"。
|
||
|
||
⚠️ 为什么不再用 v38 那套 `.mv-media`(标签一行、内容另起一行 + `margin-left:72px`):
|
||
· 那套是靠"手填 72px"去凑对齐的,75px/72px 这类数字一旦改标签宽度就散;
|
||
· 更关键的是**海报那块当时被误包进了一个"并排网格"**
|
||
(`.mv-grid.mv-pair` 里面只有它一个孩子)⇒ grid 的两列布局让它只占**半宽**,
|
||
于是它的上传框明显比简介的输入框窄 —— 用户看到的正是这个。
|
||
⇒ 现在回归 `.mv-row`,宽度/左缘/字号全部与上面各字段**同一套规则**,
|
||
"看起来一样"不是靠对齐数字,而是因为它们本来就是同一种行。
|
||
⚠️ `.sr-only` 的文件框是 `position:absolute`(脱离文档流),**不会**参与
|
||
flex 分配;v38 说的"1px 隐框占掉一份宽度"其实是当时**探针量错了元素**
|
||
(它按文档序取"第一个非标签子元素",正好取到那个绝对定位的 input)。
|
||
这一轮用真机逐行量左缘来验证,不靠推断。 */ ?>
|
||
<?php /* ---- 观影照片(v35:不再分类,合并成一块)----
|
||
用户原话:「除了海报之外,票根、现场照片等等都不分类别,都只分一个类,
|
||
放在一块。…只有海报是单独的…其他的都放在一个模块就行,
|
||
然后所有照片都上传到一起,直接写"观影照片"就可以了。」
|
||
⚠️ 数据层本来就是平的(`event_photos` 只有 key/position,没有类别列),
|
||
票根以前是存 `movie_details.ticket_key` 的**单张**槽位。
|
||
⇒ 归并 = 把票根也当成 `event_photos` 里的一张,页面上只留"观影照片"一块。
|
||
⚠️ **旧的 ticket_key 仍然要显示**(历史数据不能丢):编辑页把已有票根
|
||
列进下面这块的网格里(它没有 `event_photos` 行 id,所以只能"看"、
|
||
不能用照片的删除按钮删;要换就直接上传新的)。 */ ?>
|
||
<div class="mv-row mv-row-media">
|
||
<span class="mv-lb">海报</span>
|
||
<div class="mv-media-body">
|
||
<?php if ($mHasPoster): ?>
|
||
<?php $mDelForms['poster'] = 'movies/media_del'; ?>
|
||
<div class="mv-slot">
|
||
<a href="<?= e(media_url((string)$m['poster_key'])) ?>" data-prev="image"
|
||
data-src="<?= e(media_url((string)$m['poster_key'])) ?>"
|
||
data-dl="<?= e(media_url((string)$m['poster_key'], ['dl' => 1])) ?>"
|
||
data-name="海报">
|
||
<img src="<?= e(media_url((string)$m['poster_key'])) ?>" alt="海报">
|
||
</a>
|
||
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-poster"
|
||
onclick="return confirm('删掉现在这张海报?')">删除这张</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php /* v24 第 21 批 第 7 条:一个「点击或拖动」的框,取代原来的原生文件框。
|
||
换图仍然靠"选/拖一张新的"(服务端换新图时会顺手删掉旧对象)。 */
|
||
$sdName = 'poster'; $sdSlot = 'poster'; $sdAccept = 'image/*';
|
||
$sdMultiple = false;
|
||
$sdMsg = $mHasPoster ? '点击或拖动进行上传(换一张海报)' : '点击或拖动进行上传';
|
||
require __DIR__ . '/../_stage_drop.php'; ?>
|
||
</div><?php /* /.mv-media-body */ ?>
|
||
</div>
|
||
|
||
<?php /* ---- 观影照片:票根 + 合影 + 其它相关图片,**全部放这一块** ---- */ ?>
|
||
<div class="mv-row mv-row-media">
|
||
<span class="mv-lb no-colon">观影照片</span>
|
||
<div class="mv-media-body">
|
||
<?php if ($mHasTicket || $mPhotos): ?>
|
||
<div class="photo-grid">
|
||
<?php if ($mHasTicket): /* 历史数据:旧票根(不在 event_photos 里,只展示) */ ?>
|
||
<?php $mDelForms['ticket'] = 'movies/media_del'; ?>
|
||
<figure class="photo-cell">
|
||
<a href="<?= e(media_url((string)$m['ticket_key'])) ?>" data-prev="image"
|
||
data-src="<?= e(media_url((string)$m['ticket_key'])) ?>"
|
||
data-dl="<?= e(media_url((string)$m['ticket_key'], ['dl' => 1])) ?>"
|
||
data-name="票根">
|
||
<img src="<?= e(media_url((string)$m['ticket_key'])) ?>" alt="票根">
|
||
</a>
|
||
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-ticket"
|
||
onclick="return confirm('删掉这张旧票根?')">删除</button>
|
||
</figure>
|
||
<?php endif; ?>
|
||
<?php foreach ($mPhotos as $mp): $mpId = (int)$mp['id']; ?>
|
||
<figure class="photo-cell">
|
||
<a href="<?= e(media_url((string)$mp['key'])) ?>" data-prev="image"
|
||
data-src="<?= e(media_url((string)$mp['key'])) ?>"
|
||
data-dl="<?= e(media_url((string)$mp['key'], ['dl' => 1])) ?>"
|
||
data-name="观影照片">
|
||
<img src="<?= e(media_url((string)$mp['key'])) ?>" alt="">
|
||
</a>
|
||
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-photo-<?= $mpId ?>"
|
||
onclick="return confirm('删掉这张照片?')">删除</button>
|
||
</figure>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php /* 观影照片(票根/合影/其它)都从这里进(可多选、可多次拖) */ ?>
|
||
<?php $sdName = 'photo[]'; $sdSlot = 'photo'; $sdAccept = 'image/*';
|
||
$sdMsg = '点击或拖动进行上传';
|
||
require __DIR__ . '/../_stage_drop.php'; ?>
|
||
</div><?php /* /.mv-media-body */ ?>
|
||
</div><?php /* /.mv-row(观影照片) */ ?>
|
||
</div><?php /* /.mv-grid */ ?>
|
||
</div><?php /* /.mv-form-inner */ ?>
|
||
<?php /* 🔴🔴 下面这一段**严格按分支配对**,别再把 </div> 与 <?php if ?> 混着写 ——
|
||
v37 前两版就是在这里把 `.mv-form-inner` / `.cal-modal-body` 关错了层数,
|
||
结果编辑态的「保存」按钮被甩到 form **外面**:
|
||
点它不提交表单、也不报错(用户看到的是"保存没反应")。
|
||
修一次的成本远大于把结构写直白。每一层都标了名字,
|
||
以后动这里只要保证:**开的数量 = 关的数量,且顺序一致**。 */ ?>
|
||
<?php if ($mvModal): ?>
|
||
</div><?php /* /.cal-modal-body(仅弹框形态) */ ?>
|
||
<?php /* 🔴 v41(用户 2026-10-10):「观影模块弹出的框下面的按钮也是确定和取消。」
|
||
两处变化:① 提交按钮文案 保存/记下这场电影 → **「确定」**(统一口径);
|
||
② **顺序改成「确定」在前、「取消」在后**(用户明确"下面的按钮就是确定和取消
|
||
两个",与旅程那边同一口径)。id 保持不变(详情页的 AJAX 主路挂的是
|
||
`#mvAddSubmit`,改文案不影响)。 */ ?>
|
||
<div class="cal-modal-foot">
|
||
<span class="cal-modal-tip" id="mvAddTip"></span>
|
||
<button class="btn btn-sm" type="submit" form="mvForm" id="mvAddSubmit">确定</button>
|
||
<button class="btn btn-ghost btn-sm" type="button" id="mvAddCancel">取消</button>
|
||
</div>
|
||
</div><?php /* /.cal-modal-panel(仅弹框形态) */ ?>
|
||
<?php else: ?>
|
||
<div class="btn-row">
|
||
<?php /* ⚠️ 整页形态的提交按钮**也要 id**:两种形态的按钮语义完全相同,
|
||
给同一个 id 让"按 id 定位"对两种形态都成立(同一时刻只渲染其一,不会冲突)。
|
||
v41 实测:探针原来按**文案**("保存")找按钮,用户要求改成「确定」后
|
||
探针找不到按钮 ⇒ 三条落库断言全 NULL(看着像功能坏了)。⇒ id 才是契约。 */ ?>
|
||
<button type="submit" class="btn" id="mvAddSubmit">确定</button>
|
||
<a class="btn btn-ghost"
|
||
href="<?= e(url('movies/show', ['id' => (int)$m['id']])) ?>">取消</a>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php /* 🔴🔴 v41:**这一层只在整页形态存在**。
|
||
弹框形态下 `.mv-form-inner` 已经在上面(`</div><!-- /.mv-form-inner -->`)
|
||
关掉了 —— 原来这里**无条件**又关一次 ⇒ 弹框形态**多一个 `</div>`**,
|
||
把 `</form>` 挤到了容器外面(`_fb_divdepth.py` 当场抓到:
|
||
"深度结束时 -1,首个负深度在 `</div></form>`")。
|
||
⚠️ 这与 v37 那次"保存按钮被甩到 form 外面"是**同一个结构性坑**,
|
||
而 v40 那轮只跑了 `php -l`(它对此完全无感)所以没发现
|
||
—— 这一轮补上"按形态逐一量 div 深度"才暴露出来。 */ ?>
|
||
<?php if (!$mvModal): ?>
|
||
</div><?php /* /.card.card-pad(整页形态) */ ?>
|
||
<?php endif; ?>
|
||
</form>
|
||
<?php if ($mvModal): ?>
|
||
</div><?php /* /.cal-modal(弹框壳) */ ?>
|
||
<?php else: ?>
|
||
</div><?php /* /.mv-form-wrap(编辑态包装) */ ?>
|
||
<?php endif; ?>
|
||
|
||
<?php /* ---- 删除海报 / 票根 / 合影的**独立表单**(必须在外层表单之外)----
|
||
⚠️ 见本文件顶部关于 form 嵌套的说明:按钮用 `form="id"` 指过来,按钮位置不变。
|
||
⚠️ 关联表单要自带全部字段(csrf / 记录 id / 照片 id)—— 提交的是**它自己**的字段。 */ ?>
|
||
<?php if ($mHasPoster): ?>
|
||
<form id="mv-del-poster" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="slot" value="poster">
|
||
</form>
|
||
<?php endif; ?>
|
||
<?php if ($mHasTicket): ?>
|
||
<form id="mv-del-ticket" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="slot" value="ticket">
|
||
</form>
|
||
<?php endif; ?>
|
||
<?php foreach ($mPhotos as $mp): ?>
|
||
<form id="mv-del-photo-<?= (int)$mp['id'] ?>" method="post"
|
||
action="<?= e(url('movies/photo_del')) ?>" class="form-outside">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="photo_id" value="<?= (int)$mp['id'] ?>">
|
||
<?php /* 从编辑页删的 → 删完回编辑页(见 index.php movies/photo_del 的说明) */ ?>
|
||
<input type="hidden" name="back" value="edit">
|
||
</form>
|
||
<?php endforeach; ?>
|
||
<?php unset($mHasPoster, $mHasTicket, $mPhotos, $mDelForms, $mp, $mpId); ?>
|
||
|
||
<?php /* ---- 新建影院:弹框(不跳转,见上)---- */ ?>
|
||
<div class="cn-modal" id="cinemaNewModal" hidden>
|
||
<div class="cn-mask" data-cn-close></div>
|
||
<div class="cn-panel" role="dialog" aria-modal="true" aria-label="新建影院">
|
||
<div class="cn-head"><b>新建影院</b>
|
||
<button type="button" class="cn-x" data-cn-close aria-label="关闭">✕</button></div>
|
||
<form method="post" action="<?= e(url('movies/cinemas_save')) ?>" id="cinemaNewForm">
|
||
<?= csrf_field() ?>
|
||
<?php /* back=movies/new 让服务端存完回到**本页**(而不是甩去影院管理页) */ ?>
|
||
<input type="hidden" name="back" value="movies/new">
|
||
<div class="cn-body">
|
||
<div class="field">
|
||
<label>地方(可不填)</label>
|
||
<input class="input" name="place" placeholder="如:青岛" maxlength="100">
|
||
</div>
|
||
<div class="field">
|
||
<label>影院名称 *</label>
|
||
<?php /* 🔴 v47(用户 2026-10-13):与影院管理页同一套 —— 输入名称即联想,
|
||
选中后自动补齐「所在地方」与「详细地址」。
|
||
⚠️ 字段查找范围限定在本弹框内(`#cinemaNewForm`):
|
||
观影新增页本身也有一个「影院」下拉,不限定会抓错字段。 */ ?>
|
||
<input class="input" name="name" required placeholder="如:万象城 CGV" maxlength="100"
|
||
data-addr data-addr-fill="place,address" data-addr-for="#cinemaNewForm">
|
||
</div>
|
||
<?php /* 🔴 v41(用户 2026-10-10):「这里新建影院这个地方好像没有详细地址啊。
|
||
应该把详细地址加上。」—— 影院管理页的表单一直有 address 字段,
|
||
但这个**快捷弹框**漏了它 ⇒ 从这里新建的影院永远没有详细地址。
|
||
字段名与影院管理页保持一致(`address`),服务端 Cinema::save 已经收它。 */ ?>
|
||
<div class="field">
|
||
<label>详细地址(可不填)</label>
|
||
<input class="input" name="address" placeholder="如:香港中路 10 号万象城 4 层"
|
||
maxlength="200">
|
||
</div>
|
||
<div class="field">
|
||
<label>主题颜色</label>
|
||
<div class="color-row">
|
||
<input type="color" name="color" class="color-picker cn-color" value="#A65C30">
|
||
<span class="color-hex cn-hex">#A65C30</span>
|
||
<span class="cn-presets">
|
||
<?php foreach (['#A63030','#A65C30','#A68930','#6BA630','#30A67A','#3078A6','#6B30A6','#A6305C'] as $pc): ?>
|
||
<button type="button" class="preset-color cn-preset" data-color="<?= $pc ?>"
|
||
style="background: <?= $pc ?>;" title="<?= $pc ?>"></button>
|
||
<?php endforeach; ?>
|
||
</span>
|
||
</div>
|
||
<span class="tip">这个颜色会出现在下拉、日历与观影列表上。</span>
|
||
</div>
|
||
</div>
|
||
<div class="cn-foot">
|
||
<button class="btn" type="submit">添加</button>
|
||
<button class="btn btn-ghost" type="button" data-cn-close>取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 豆瓣自动补充:下拉联想(320ms 防抖 + 中文输入法组字期不请求)+ 一键抓取 -->
|
||
<script>
|
||
(function () {
|
||
var DB_URL = <?= json_encode(url('movies/douban')) ?>;
|
||
var titleEl = document.getElementById('title');
|
||
var box = document.getElementById('dbSuggest');
|
||
var fetchBtn = document.getElementById('dbFetch');
|
||
var metaEl = document.getElementById('dbMeta');
|
||
var posterKeyEl = document.getElementById('dbPosterKey');
|
||
var posterWrap = document.getElementById('dbPosterWrap');
|
||
var posterImg = document.getElementById('dbPosterImg');
|
||
var infoEl = document.getElementById('info');
|
||
if (!titleEl || !box || !fetchBtn || !metaEl) return;
|
||
|
||
var lastPosterKey = ''; // 本次会话里最近一次抓到的海报键(下次抓取时回传清理)
|
||
var timer = null;
|
||
var composing = false;
|
||
var seq = 0; // 丢弃过期响应
|
||
|
||
titleEl.addEventListener('compositionstart', function () { composing = true; });
|
||
titleEl.addEventListener('compositionend', function () { composing = false; schedule(); });
|
||
titleEl.addEventListener('input', function () {
|
||
if (composing) return; // 组字期间的拼音串没有意义,也不劫持回车
|
||
schedule();
|
||
});
|
||
document.addEventListener('click', function (e) {
|
||
if (!box.hidden && !box.contains(e.target) && e.target !== titleEl) hideBox();
|
||
});
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') hideBox();
|
||
});
|
||
|
||
function schedule() {
|
||
clearTimeout(timer);
|
||
timer = setTimeout(suggest, 320);
|
||
}
|
||
function hideBox() { box.hidden = true; box.innerHTML = ''; }
|
||
|
||
function suggest() {
|
||
var q = titleEl.value.trim();
|
||
if (q === '') { hideBox(); return; }
|
||
var my = ++seq;
|
||
getJson(DB_URL + '&action=suggest&q=' + encodeURIComponent(q), function (data, err) {
|
||
if (my !== seq) return; // 过期响应丢弃
|
||
if (err) return; // 联想失败静默(正片抓取会给出明确报错)
|
||
renderItems(data && data.items ? data.items : []);
|
||
});
|
||
}
|
||
|
||
function renderItems(items) {
|
||
box.innerHTML = '';
|
||
if (!items.length) { hideBox(); return; }
|
||
items.forEach(function (it) {
|
||
var btn = document.createElement('button');
|
||
btn.type = 'button';
|
||
btn.className = 'db-item';
|
||
if (it.thumb) {
|
||
var im = document.createElement('img');
|
||
im.src = it.thumb; im.alt = ''; im.loading = 'lazy';
|
||
btn.appendChild(im);
|
||
}
|
||
var tx = document.createElement('span');
|
||
tx.className = 'db-item-tx';
|
||
var b = document.createElement('b');
|
||
// 候选文本来自豆瓣 —— 一律 textContent 插入,绝不拼 innerHTML(豆瓣侧内容可注入脚本)
|
||
b.textContent = it.title || '(无片名)';
|
||
tx.appendChild(b);
|
||
var bits = [];
|
||
if (it.sub_title && it.sub_title !== it.title) bits.push(it.sub_title);
|
||
if (it.year) bits.push(it.year);
|
||
if (it.kind) bits.push(it.kind);
|
||
if (bits.length) {
|
||
var sm = document.createElement('small');
|
||
sm.textContent = bits.join(' · ');
|
||
tx.appendChild(sm);
|
||
}
|
||
btn.appendChild(tx);
|
||
btn.addEventListener('click', function () { hideBox(); fetchById(it.id); });
|
||
box.appendChild(btn);
|
||
});
|
||
box.hidden = false;
|
||
}
|
||
|
||
function fetchById(id) {
|
||
doFetch(DB_URL + '&id=' + encodeURIComponent(id));
|
||
}
|
||
fetchBtn.addEventListener('click', function () {
|
||
var q = titleEl.value.trim();
|
||
if (q === '') { titleEl.focus(); return; }
|
||
doFetch(DB_URL + '&q=' + encodeURIComponent(q));
|
||
});
|
||
|
||
function doFetch(urlWithQ) {
|
||
if (lastPosterKey) urlWithQ += '&old_poster=' + encodeURIComponent(lastPosterKey);
|
||
fetchBtn.disabled = true;
|
||
var my = ++seq;
|
||
getJson(urlWithQ, function (data, err) {
|
||
fetchBtn.disabled = false;
|
||
if (my !== seq) return;
|
||
if (err || !data) { alert(err || '抓取失败,请稍后再试'); return; }
|
||
if (data.error) { alert(data.error); return; }
|
||
apply(data);
|
||
});
|
||
}
|
||
|
||
function apply(data) {
|
||
if (data.title) titleEl.value = data.title;
|
||
if (data.meta) {
|
||
metaEl.value = JSON.stringify(data.meta);
|
||
}
|
||
/* 简介:用服务端拼好的 summary(**含导演/主演/年份/类型/片长/国家/评分 + 剧情原文**),
|
||
而不是只塞剧情那一小段。用户 2026-10-03:「从豆瓣获取的信息不够,
|
||
应该把导演、主要演员,上映年份等主要信息,也都放在简介中。」
|
||
⚠️ 仍然**只填空白的**:用户已经写过的内容不能被抓取覆盖。
|
||
⚠️ 而且要把"有东西但没写进简介"这件事说清楚 —— 以前只塞 plot,
|
||
遇到豆瓣没有 plot 的电影就**什么都不填而且没有提示**,用户会以为抓取坏了。
|
||
现在:抓到了但简介非空 → 明确提示;什么都没抓到 → 也明确说一声。 */
|
||
if (infoEl) {
|
||
var summary = (data.summary || '').trim();
|
||
if (summary !== '') {
|
||
if (infoEl.value.trim() === '') {
|
||
infoEl.value = summary;
|
||
} else {
|
||
infoEl.setAttribute('data-db-summary', summary);
|
||
alert('豆瓣信息已抓取。\n\n「简介」里已经有你写的内容,我没有覆盖它。\n'
|
||
+ '如果想用豆瓣的简介(含导演/主演/年份等),请先清空「简介」再点一次「自动获取」。');
|
||
}
|
||
} else if ((data.meta && (data.meta.plot || data.meta.director)) || data.title) {
|
||
alert('豆瓣信息已抓取(片名/海报/元数据),但这部电影豆瓣没有可用的简介文本。');
|
||
}
|
||
}
|
||
if (data.poster_key) {
|
||
lastPosterKey = data.poster_key;
|
||
posterKeyEl.value = data.poster_key;
|
||
if (data.poster) {
|
||
posterImg.src = data.poster;
|
||
posterWrap.hidden = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
function getJson(u, cb) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('GET', u, true);
|
||
xhr.onload = function () {
|
||
var data = null, err = '';
|
||
try { data = JSON.parse(xhr.responseText); }
|
||
catch (e) { err = '返回内容异常'; }
|
||
if (xhr.status >= 400) err = (data && data.error) ? data.error : ('请求失败(' + xhr.status + ')');
|
||
cb(data, err);
|
||
};
|
||
xhr.onerror = function () { cb(null, '网络异常'); };
|
||
xhr.send();
|
||
}
|
||
})();
|
||
|
||
/* ==================== 影院自定义下拉 + 新建影院弹框(第 11 批 #4)====================
|
||
① 下拉:原生 <option> 画不了色块,所以自己做一个"按钮 + 弹出列表"。
|
||
⚠️ 值仍然写进隐藏的 <input name="cinema_id">,服务端与既有测试都不用改。
|
||
② 新建影院:弹框里提交到 movies/cinemas_save(带 back=movies/new),
|
||
存完服务端会跳回本页并把新影院 id 放在 ?cinema= 上 → 模板已自动选中它。 */
|
||
(function () {
|
||
var picker = document.getElementById('cinemaPicker');
|
||
if (!picker) { return; }
|
||
var btn = document.getElementById('csBtn');
|
||
var menu = document.getElementById('csMenu');
|
||
var dot = document.getElementById('csDot');
|
||
var text = document.getElementById('csText');
|
||
var input = document.getElementById('cinema_id');
|
||
var search = document.getElementById('csSearch'); /* v39:下拉顶部的搜索框 */
|
||
var list = document.getElementById('csList');
|
||
var empty = document.getElementById('csEmpty');
|
||
|
||
function close() {
|
||
menu.hidden = true;
|
||
btn.setAttribute('aria-expanded', 'false');
|
||
/* 🔴 v39:收起时把搜索词**清掉并恢复全部项** ——
|
||
否则下次打开会带着上次的过滤结果,用户以为"影院丢了"。
|
||
(不做成"保留搜索词",因为这里的搜索是"临时找人",不是"长期筛选"。) */
|
||
if (search) { search.value = ''; }
|
||
filter('');
|
||
}
|
||
function openMenu() {
|
||
menu.hidden = false;
|
||
btn.setAttribute('aria-expanded', 'true');
|
||
/* 打开即聚焦搜索框 —— 用户要的"上面有一个搜索筛选",
|
||
多一次点击才用得上就白加了。 */
|
||
if (search) {
|
||
try { search.focus({ preventScroll: true }); } catch (e) { search.focus(); }
|
||
}
|
||
}
|
||
|
||
/* v39:按关键词过滤列表。
|
||
⚠️ 过滤的是**列表项**(`.cs-item`),"不记录影院"那一项**永远保留** ——
|
||
它是"清空选择"的出口,被搜没了用户就取消不掉了。
|
||
⚠️ 用 `hidden` 属性而不是内联 display —— CSS 里 `.cs-item` 写了 display:flex,
|
||
内联 display 会被它覆盖(这个坑项目里踩过:见第 11 批"过滤一直是坏的")。 */
|
||
function filter(q) {
|
||
if (!list) { return; }
|
||
var kw = (q || '').trim().toLowerCase();
|
||
var items = list.querySelectorAll('.cs-item');
|
||
var shown = 0;
|
||
for (var i = 0; i < items.length; i++) {
|
||
var it = items[i];
|
||
var keep = it.getAttribute('data-id') === '0'; // "不记录影院"恒显
|
||
var hay = (it.getAttribute('data-text') || it.textContent || '').toLowerCase();
|
||
var hit = !kw || keep || hay.indexOf(kw) !== -1;
|
||
it.hidden = !hit;
|
||
if (hit && !keep) { shown++; }
|
||
}
|
||
if (empty) { empty.hidden = shown > 0 || !kw; }
|
||
}
|
||
|
||
function apply(id, color, label) {
|
||
input.value = String(id);
|
||
text.textContent = label || '不记录影院';
|
||
if (color) {
|
||
dot.hidden = false;
|
||
dot.style.background = color;
|
||
dot.classList.remove('is-none');
|
||
} else {
|
||
dot.hidden = true;
|
||
}
|
||
}
|
||
|
||
// 初始状态:按当前值把按钮上的色点/文字同步过来
|
||
(function init() {
|
||
var cur = String(input.value || '0');
|
||
var items = menu.querySelectorAll('.cs-item');
|
||
for (var i = 0; i < items.length; i++) {
|
||
if (items[i].getAttribute('data-id') === cur) {
|
||
var lbl = items[i].querySelector('span:last-child');
|
||
apply(cur, items[i].getAttribute('data-color'), lbl ? lbl.textContent : '');
|
||
break;
|
||
}
|
||
}
|
||
})();
|
||
|
||
btn.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
if (menu.hidden) { openMenu(); } else { close(); }
|
||
});
|
||
|
||
menu.addEventListener('click', function (e) {
|
||
var it = e.target.closest ? e.target.closest('.cs-item') : null;
|
||
if (!it) { return; }
|
||
e.stopPropagation();
|
||
var lbl2 = it.querySelector('span:last-child');
|
||
apply(it.getAttribute('data-id'), it.getAttribute('data-color'), lbl2 ? lbl2.textContent : '');
|
||
close();
|
||
});
|
||
|
||
/* v39:搜索框的输入 / 键盘。
|
||
⚠️ 三个事件都要 stopPropagation —— 否则会冒到 document 上那个"点外面关",
|
||
一点搜索框下拉就没了(这是"加搜索"最容易踩的一脚)。 */
|
||
if (search) {
|
||
search.addEventListener('input', function () { filter(search.value); });
|
||
search.addEventListener('mousedown', function (e) { e.stopPropagation(); });
|
||
search.addEventListener('click', function (e) { e.stopPropagation(); });
|
||
search.addEventListener('keydown', function (e) {
|
||
e.stopPropagation();
|
||
if (e.key === 'Escape') { close(); return; }
|
||
if (e.key !== 'Enter') { return; }
|
||
// 回车 = 选中**第一个可见**的项(除"不记录影院"外优先真实影院)
|
||
e.preventDefault();
|
||
var vis = list ? list.querySelectorAll('.cs-item:not([hidden])') : [];
|
||
var pick = null;
|
||
for (var i = 0; i < vis.length; i++) {
|
||
if (vis[i].getAttribute('data-id') !== '0') { pick = vis[i]; break; }
|
||
}
|
||
if (!pick && vis.length) { pick = vis[0]; }
|
||
if (pick) {
|
||
var lb = pick.querySelector('span:last-child');
|
||
apply(pick.getAttribute('data-id'), pick.getAttribute('data-color'), lb ? lb.textContent : '');
|
||
close();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 点外面关(冒泡阶段,只关下拉本身)
|
||
document.addEventListener('click', function () { close(); });
|
||
|
||
// ---- 新建影院弹框 ----
|
||
var modal = document.getElementById('cinemaNewModal');
|
||
var nbtn = document.getElementById('cinemaNewBtn');
|
||
if (modal && nbtn) {
|
||
nbtn.addEventListener('click', function () {
|
||
modal.hidden = false;
|
||
var f = modal.querySelector('input[name="name"]');
|
||
if (f) { f.focus(); }
|
||
});
|
||
modal.addEventListener('click', function (e) {
|
||
if (e.target.closest && e.target.closest('[data-cn-close]')) { modal.hidden = true; }
|
||
});
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') { modal.hidden = true; }
|
||
});
|
||
// 颜色选择器与预设色(复刻影院管理页那套,只是缩在弹框里)
|
||
var cp = modal.querySelector('.cn-color');
|
||
var hx = modal.querySelector('.cn-hex');
|
||
if (cp && hx) {
|
||
cp.addEventListener('input', function () { hx.textContent = cp.value; });
|
||
}
|
||
modal.addEventListener('click', function (e) {
|
||
var pv = e.target.closest ? e.target.closest('.cn-preset') : null;
|
||
if (!pv || !cp) { return; }
|
||
cp.value = pv.getAttribute('data-color');
|
||
if (hx) { hx.textContent = cp.value; }
|
||
});
|
||
}
|
||
})();
|
||
</script>
|