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:
+119
-14
@@ -79,21 +79,30 @@
|
||||
// `hy` + `yf` = `hyyf`，子序列 `yy` 正好跨过边界命中；
|
||||
// 单独看 `hy` 与 `yf` 都不含 `yy`。逐字段判才是对的。
|
||||
// 服务端（App\Pinyin::matches）本来就是逐字段判的，两边口径保持一致。
|
||||
Array.prototype.forEach.call(list.querySelectorAll('.pp-item'), function (el) {
|
||||
var parts = [];
|
||||
var n1 = el.getAttribute('data-name') || '';
|
||||
var n2 = el.getAttribute('data-shown') || '';
|
||||
[n1, n2].forEach(function (s) {
|
||||
if (!s) { return; }
|
||||
var ini = initialsOf ? initialsOf(s) : '';
|
||||
if (ini && parts.indexOf(ini.toLowerCase()) < 0) { parts.push(ini.toLowerCase()); }
|
||||
/**
|
||||
* 给一批 .pp-item 算 data-initials 与首字母徽标。
|
||||
* ⚠️ 抽成函数是因为**动态建出来的清单也要走同一套**（v24 第 11 批 #7 续：
|
||||
* 候选人清单改成打开弹框时才建，建完必须补算首字母，
|
||||
* 否则"输入 yyq 找杨永全"这条既有功能会静默失效）。
|
||||
*/
|
||||
function decorateItems(scope) {
|
||||
Array.prototype.forEach.call((scope || list).querySelectorAll('.pp-item'), function (el) {
|
||||
var parts = [];
|
||||
var n1 = el.getAttribute('data-name') || '';
|
||||
var n2 = el.getAttribute('data-shown') || '';
|
||||
[n1, n2].forEach(function (s) {
|
||||
if (!s) { return; }
|
||||
var ini = initialsOf ? initialsOf(s) : '';
|
||||
if (ini && parts.indexOf(ini.toLowerCase()) < 0) { parts.push(ini.toLowerCase()); }
|
||||
});
|
||||
el.setAttribute('data-initials', parts.join(' '));
|
||||
// 徽标只显示**姓名的**首字母（称呼那串太杂，显示出来反而更乱）
|
||||
var badge = el.querySelector('.pp-initials');
|
||||
var first = initialsOf ? initialsOf(n1) : '';
|
||||
if (badge && first) { badge.textContent = first; badge.hidden = false; }
|
||||
});
|
||||
el.setAttribute('data-initials', parts.join(' '));
|
||||
// 徽标只显示**姓名的**首字母（称呼那串太杂，显示出来反而更乱）
|
||||
var badge = el.querySelector('.pp-initials');
|
||||
var first = initialsOf ? initialsOf(n1) : '';
|
||||
if (badge && first) { badge.textContent = first; badge.hidden = false; }
|
||||
});
|
||||
}
|
||||
decorateItems();
|
||||
|
||||
function syncChips() {
|
||||
chips.innerHTML = '';
|
||||
@@ -159,8 +168,64 @@
|
||||
if (emptyTip) { emptyTip.hidden = shown > 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* 按需把候选人清单建出来（v24 第 11 批 #7 续）。
|
||||
*
|
||||
* 为什么不在服务端首屏渲染：线上真实数据下每页 1~3 个选人组件 × 1184 人
|
||||
* = 几千个 <label>+<input>（账目页因此 6.9 MB / 16788 个 input），
|
||||
* 密码管理器逐个扫描 → 页面卡死。
|
||||
* 现在只有在**用户真要看候选人**（打开弹框）的那一刻才建 DOM。
|
||||
* 幂等：建过一次就打标记，反复开合不再重建。
|
||||
*/
|
||||
function buildList() {
|
||||
if (list.getAttribute('data-pp-built') === '1') { return; }
|
||||
var raw = list.getAttribute('data-pp-people') || '[]';
|
||||
var people = [];
|
||||
try { people = JSON.parse(raw) || []; } catch (e) { people = []; }
|
||||
var selAttr = list.getAttribute('data-pp-selected') || '';
|
||||
var selected = selAttr === '' ? [] : selAttr.split(',').map(function (v) { return String(v); });
|
||||
var type = list.getAttribute('data-pp-type') || 'radio';
|
||||
var fname = list.getAttribute('data-pp-name') || '';
|
||||
|
||||
var frag = document.createDocumentFragment();
|
||||
people.forEach(function (p) {
|
||||
var lab = document.createElement('label');
|
||||
lab.className = 'pp-item';
|
||||
lab.setAttribute('data-name', p.name || '');
|
||||
lab.setAttribute('data-shown', p.shown || p.name || '');
|
||||
var inp = document.createElement('input');
|
||||
inp.type = type;
|
||||
inp.name = fname;
|
||||
inp.value = String(p.id);
|
||||
if (selected.indexOf(String(p.id)) >= 0) { inp.checked = true; }
|
||||
lab.appendChild(inp);
|
||||
var av = document.createElement('img');
|
||||
av.className = 'pp-av';
|
||||
av.src = p.avatar || '';
|
||||
av.alt = '';
|
||||
av.loading = 'lazy';
|
||||
lab.appendChild(av);
|
||||
var nm = document.createElement('span');
|
||||
nm.className = 'pp-name';
|
||||
nm.textContent = p.shown || p.name || '';
|
||||
lab.appendChild(nm);
|
||||
var ini = document.createElement('span');
|
||||
ini.className = 'pp-initials';
|
||||
ini.hidden = true;
|
||||
lab.appendChild(ini);
|
||||
frag.appendChild(lab);
|
||||
});
|
||||
// 插在「不选」与 .pp-empty 之间（保持"不选"永远在最前）
|
||||
var empty = list.querySelector('.pp-empty');
|
||||
list.insertBefore(frag, empty || null);
|
||||
list.setAttribute('data-pp-built', '1');
|
||||
// 首字母要补算（组件的拼音筛选依赖它）—— 复用上面那套，口径只有一处
|
||||
decorateItems(list);
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
modal.hidden = false;
|
||||
buildList();
|
||||
search.value = '';
|
||||
applyFilter();
|
||||
syncChips();
|
||||
@@ -196,8 +261,48 @@
|
||||
});
|
||||
|
||||
syncChips();
|
||||
// 把"重画 chips"暴露出去：外部程序化改了勾选（ppSetSelected）之后要能刷新展示
|
||||
// ⚠️ 这里的作用域里变量名是 `root`（不是 box）—— 写成 box 会抛
|
||||
// "box is not defined"，而且是在**初始化末尾**抛，前面都正常，
|
||||
// 只有后面的 ppSetSelected 才失效（e2e 抓不到，真浏览器才报）。
|
||||
root.__ppSync = syncChips;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对外接口：按**字段名**设置某个选人组件的选中项（单选）。
|
||||
*
|
||||
* 为什么需要它：共享弹框（名册的动作框、财务的修改框）打开时要把"这一行的人"
|
||||
* 灌进组件里。组件是服务端渲染的、选中状态靠 `input:checked`，
|
||||
* 从外部只知道字段名（person_id / attendees[]…），不知道 DOM 里的 id。
|
||||
*
|
||||
* 用法：window.ppSetSelected('person_id', 12) // 0 或不传 = 不指定
|
||||
* ⚠️ 多选组件请传数组或逗号分隔的字符串。
|
||||
*/
|
||||
window.ppSetSelected = function (name, value) {
|
||||
if (!name) { return false; }
|
||||
var box = document.querySelector('.pp[data-pp-name="' + name + '"]');
|
||||
if (!box) {
|
||||
// 兼容：老渲染里没有 data-pp-name 时，退化成"找包含该 name 的 radio/checkbox"
|
||||
var host = document.querySelector('.pp');
|
||||
if (!host) { return false; }
|
||||
box = host;
|
||||
}
|
||||
var want = [];
|
||||
if (Array.isArray(value)) {
|
||||
want = value.map(String);
|
||||
} else if (typeof value === 'string' && value.indexOf(',') >= 0) {
|
||||
want = value.split(',');
|
||||
} else {
|
||||
want = [String(value == null ? '' : value)];
|
||||
}
|
||||
Array.prototype.forEach.call(box.querySelectorAll('.pp-item input'), function (inp) {
|
||||
inp.checked = want.indexOf(String(inp.value)) >= 0;
|
||||
});
|
||||
// 同步 chips（组件的选中态展示）
|
||||
if (typeof box.__ppSync === 'function') { box.__ppSync(); }
|
||||
return true;
|
||||
};
|
||||
|
||||
function boot() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.pp'), init);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user