v24 第 11 批：7 大条 20 子项（首页/名册/观影/裁剪/日程/财务）
用户 2026-10-04 第 11 批，7 大条： - #1 首页：未来七天过滤掉「农历」（每日一条会淹掉真日程）；右侧日历本标签 从灰字(.dash-tag)改成**实心色块**（底色=日历色、白字、text-shadow 兜底浅色）。 - #2 名册：分组改**居中模态框**（用户要"像选观影人一样"）。修掉"点第二次失效" ——根因是旧实现用**捕获阶段**监听 document click 做"点外面就关"，与触发按钮 的 click 打架；模态把关闭收敛到遮罩/✕/取消。卡片「编辑」后加「删除」 （→ people/destroy）；详情页底部删除改成 btn-danger + btn-block-lg 大红按钮 + 两步确认。 - #3 名册详情页重排：.detail(260px+1fr) → .pcard（头像左上 + 右侧姓名/标签） + .detail-stack 全宽往下。旧布局头像卡比右栏矮，头像下留一大片空白。 - #4 观影：影院下拉换**自定义组件**（原生 <option> 画不了色块）——按钮+列表、 每行色点，值仍写隐藏 input[name=cinema_id]；「管理影院」→「新建影院」弹框 （带 back=movies/new，存完回本页并 ?cinema=<id> 自动选中）。 修「开始/结束时间标签跑到控件下面」：upgradeRange 原来 insertBefore(host, group.firstChild) 把控件插到了 label 之上 —— 改成插在第一个原生控件之前。 - #5 裁剪改 **Cropper.js**（assets/vendor/cropper/，按需加载走 fb-cropper meta）： 弹框 overflow:hidden + 固定画布（**无滚动条**）、**去掉缩放条**改滚轮 wheelZoomRatio、 viewMode:1 + autoCropArea 保证框小于画布、8 个触点全露。 结果仍写 *_crop = 归一化 x,y,w,h（提交契约不变）。 - #6 日程：内置节假日原来每天只标**一天**（国庆只出一条）→ FIXED 改成 [名字, 放假天数] 按区间铺；月视图从周日改**周一**起（表头同步）； 跳转日期从"长条+原生框"改成**单个 btn-icon**，点开弹 Semi 日期选择器。 - #7 财务：单条曲线无盘点时只回一个点（图看着像全 0）→ 改成"从创建日(0)画到今天"； 图下条目从"每账目一张小图卡"改成**一张 chart_multi 多线图 + 颜色图例** （Ledger::LEGEND_COLORS 按 id 取模，保证颜色稳定）；账目页卡顿同源治理 （行上只留按钮、表单全页一份 #ledPanels）；修改按钮改弹框并回填归属人。 ## 顺带修的真 bug（本批最要紧的三条） 1. **观影表单提交静默失效**：「新建影院」弹框被误嵌在观影主表单 <form> 内。 HTML 不允许 form 嵌套 → 浏览器拆开内层，弹框里 required 的"影院名称"变成 主表单必填项、又因 hidden 无法聚焦 → 点「记下这场电影」什么都不发生 （Chrome: invalid form control with name='name' is not focusable）。 → 弹框移到主表单之后。部署脚本加防线：按顺序配平 form 开闭判断是否嵌套。 2. **裁剪取消没清空文件框**（换 Cropper 时丢）→ close(cancelled)，4 个取消入口 传 true 清空；否则"点了取消"仍会把没裁的原图传上去。 3. **裁剪预览退化成原图**（同批丢）→ 用 canvas 按 Cropper 的原图像素矩形重画， toDataURL 写回预览，恢复"所见即所得"。 ## 连带修复：选人组件懒渲染（线上实测的必要性） 线上真实数据下账目页 6939 KB / 16788 个 input、观影表单 1194 个 input —— 根因是 _person_picker.php 首屏就把**全部候选人**渲成 <label>+<input>。 改成：首屏只留「不选」+ data-pp-people(JSON)，**打开弹框时**才 buildList()； 无 JS 兜底走 <noscript>（HTML5 规定启用脚本时其内容按纯文本解析，不产生节点）。 新增 window.ppSetSelected / decorateItems（动态项要补算首字母）。 实测账目页 6939 KB → 544 KB。新增 _fb_picker_lazy_check.py（11/0 + 反向 2 红）。 验证：e2e 786/0、交互 90/0、半集成 27/0、batch_e 91/0、batch10 46/0、batch9 38/0、 crop 17/0（+反向）、picker_unify 28/0、picker_lazy 11/0（+反向）、formbloat 9/0、 upgrade 126/0、mobile 688/0、drag 5/0、geom 5/5。 线上自检 19/19；线上真实账号验收 7/0（含"主表单无隐藏必填""线上 Cropper 接管+取消清空"）。
This commit is contained in:
+167
-11
@@ -24,7 +24,9 @@ $dtFromOld = static function (string $name, ?string $dbValue): ?string {
|
||||
};
|
||||
$dtStart = $dtFromOld('starts_at', $m['starts_at'] ?? null);
|
||||
$dtEnd = $dtFromOld('ends_at', $m['ends_at'] ?? null);
|
||||
$selCinema = (int)old('cinema_id', $m['cinema_id'] ?? 0);
|
||||
// 刚用「新建影院」弹框加完一家 → 回到这里要**自动选中**它（见 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'));
|
||||
$selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
?>
|
||||
@@ -90,20 +92,43 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
<span class="tip">散场时间可不填。</span>
|
||||
</div>
|
||||
|
||||
<?php /* 用户 2026-10-04 第 11 批 #4（三件事）：
|
||||
① 「选择影院的时候，影院的颜色要出现在下拉列表中，用来显示不同的影院」
|
||||
→ 原生 <option> **画不了色块**（浏览器只渲染纯文本），
|
||||
所以这里换成自定义下拉：按钮 + 弹出列表，每行左侧一个影院色点。
|
||||
真实值仍然提交给隐藏的 <input name="cinema_id">（表单契约不变）。
|
||||
② 「管理影院按钮，改为新建影院，点击后弹框，添加新影院，不要跳转到管理影院的页面」
|
||||
→ 弹框里放"地方/名称/颜色"三个字段（影院管理页那张表单的核心），
|
||||
提交时带 back=movies/new，服务端存完回到本页并自动选中新影院。
|
||||
③ 下拉/弹框的样式与全站统一（宣纸底色、品牌色描边）。 */ ?>
|
||||
<div class="field full">
|
||||
<label for="cinema_id">影院</label>
|
||||
<div class="cinema-select-row">
|
||||
<select class="select" id="cinema_id" name="cinema_id">
|
||||
<option value="0">不记录影院</option>
|
||||
<?php foreach ($cinemas as $c): ?>
|
||||
<option value="<?= (int)$c['id'] ?>" <?= $selCinema === (int)$c['id'] ? 'selected' : '' ?>>
|
||||
<?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<a class="btn btn-ghost btn-sm" href="<?= e(url('movies/cinemas')) ?>">管理影院</a>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<span class="tip">想记一家还没录过的影院？先去「管理影院」里添加，回来这里就能选。</span>
|
||||
<span class="tip">刚新建的影院会自动选中；下拉里的色点就是它在日历与列表里的颜色。</span>
|
||||
</div>
|
||||
|
||||
<div class="field full">
|
||||
@@ -172,6 +197,48 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?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')) ?>">
|
||||
<?= 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>
|
||||
<input class="input" name="name" required placeholder="如：万象城 CGV" maxlength="100">
|
||||
</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 () {
|
||||
@@ -327,4 +394,93 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
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');
|
||||
|
||||
function close() { menu.hidden = true; btn.setAttribute('aria-expanded', 'false'); }
|
||||
function openMenu() { menu.hidden = false; btn.setAttribute('aria-expanded', 'true'); }
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
// 点外面关（冒泡阶段，只关下拉本身）
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user