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:
@@ -77,20 +77,29 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
|
||||
⚠️ 用原生 <input type="date"> 而不是再引一个弹层：它的原生日历足够用，
|
||||
而且**选中就有值**（change 事件）→ 直接跳转，不用再点一次"确定"。
|
||||
桌面/手机/无 JS 三种情况下的行为都是可预期的。 */ ?>
|
||||
<?php /* 用户 2026-10-04 第 11 批 #6 原话（两句）：
|
||||
· 「跳转日期那个日期选择框，用我之前给你的那个，保持所有样式和格式的统一。」
|
||||
· 「跳转日期那个地方，不要那么长，只需要和设置一样，一个按钮即可。」
|
||||
→ 从"一个长条（图标 + 文字 + 原生日期框）"改成**与设置按钮同规格的单个图标按钮**
|
||||
（btn-icon，与 ☰ 同宽同高），点开弹出 Semi 日期选择器（与全站日期控件同一套样式），
|
||||
选中即跳到那天的日视图。
|
||||
原生 input[type=date] 仍然保留（noscript 里）——"没 JS 也能跳日期"这件事没丢。 */ ?>
|
||||
<form class="cal-jump" method="get" action="index.php">
|
||||
<input type="hidden" name="r" value="calendar">
|
||||
<input type="hidden" name="view" value="day">
|
||||
<label class="btn btn-ghost cal-jump-btn" title="跳到某一天">
|
||||
<svg viewBox="0 0 16 16" width="17" height="17" aria-hidden="true" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||||
<input type="hidden" name="d" id="calJumpD" value="<?= e($anchor) ?>">
|
||||
<button type="button" class="btn btn-icon cal-jump-btn" id="calJumpBtn"
|
||||
title="跳到某一天" aria-label="跳到某一天">
|
||||
<svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" fill="none"
|
||||
stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
||||
<rect x="2" y="3.2" width="12" height="10.8" rx="1.6"/>
|
||||
<path d="M2 6.6h12M5.2 1.8v2.6M10.8 1.8v2.6"/>
|
||||
</svg>
|
||||
<span class="cal-jump-txt">跳到</span>
|
||||
<input class="cal-jump-date" type="date" name="d" value="<?= e($anchor) ?>"
|
||||
aria-label="选择要跳转的日期">
|
||||
</label>
|
||||
<noscript><button class="btn btn-ghost btn-sm" type="submit">跳转</button></noscript>
|
||||
</button>
|
||||
<noscript>
|
||||
<input class="input" type="date" name="d" value="<?= e($anchor) ?>" aria-label="选择日期">
|
||||
<button class="btn btn-sm" type="submit">跳转</button>
|
||||
</noscript>
|
||||
</form>
|
||||
<?php /* 用户第 4、5 条：日历本 / 颜色 / 导入 / 默认视图 全收进这个 ☰ ——
|
||||
它顶替了原来左边那一栏，所以排在**最右**（靠 .page-head .actions 的顺序）。 */ ?>
|
||||
@@ -151,6 +160,8 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
|
||||
<div class="tg-gutter"></div>
|
||||
<?php foreach (($cols ?? []) as $c): ?>
|
||||
<div class="tg-dayname<?= $c['is_today'] ? ' is-today' : '' ?>">
|
||||
<?php /* $c['w'] 是 date('w')（0=周日），所以这张索引表保持"日"开头——
|
||||
它只是把数字换成汉字，与列的排列顺序无关。 */ ?>
|
||||
<span class="tg-wd"><?= e(['日','一','二','三','四','五','六'][$c['w']]) ?></span>
|
||||
<span class="tg-dd"><?= (int)$c['day'] ?></span>
|
||||
</div>
|
||||
@@ -201,7 +212,9 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
|
||||
<?php else: ?>
|
||||
<div class="card cal-grid-card">
|
||||
<div class="cal-head">
|
||||
<?php foreach (['日', '一', '二', '三', '四', '五', '六'] as $wd): ?>
|
||||
<?php /* ⚠️ 用户第 11 批 #6：「月视图，从周一开始。而不是周日。」
|
||||
表头顺序必须与 month_grid_range() 的起算规则一致（那里已改成周一）。 */ ?>
|
||||
<?php foreach (['一', '二', '三', '四', '五', '六', '日'] as $wd): ?>
|
||||
<div class="cal-wd"><?= e($wd) ?></div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
@@ -330,25 +343,69 @@ $headText = $view === 'month' ? date('Y 年 n 月', $ts)
|
||||
/* 「全天」勾上藏掉时刻那一段的逻辑在 _event_fields.php 里（两个页面共用一份） */
|
||||
})();
|
||||
|
||||
/* ---- 用户第 6 条：「跳到某一天」—— 选中即跳，不用再点确定 ---- */
|
||||
/* ---- 用户第 6 条：「跳到某一天」—— 单个图标按钮 + Semi 日期选择器 ---- */
|
||||
(function () {
|
||||
var box = document.querySelector('.cal-jump');
|
||||
if (!box) { return; }
|
||||
var inp = box.querySelector('.cal-jump-date');
|
||||
if (!inp) { return; }
|
||||
inp.addEventListener('change', function () {
|
||||
if (inp.value) { box.submit(); }
|
||||
});
|
||||
// 点标签区域也应能弹出原生日历（有些浏览器只认输入框本身）
|
||||
var lab = box.querySelector('.cal-jump-btn');
|
||||
if (lab) {
|
||||
lab.addEventListener('click', function (e) {
|
||||
if (e.target === inp) { return; }
|
||||
if (typeof inp.showPicker === 'function') {
|
||||
try { inp.showPicker(); } catch (err) { /* 用户手势之外会被拒，忽略 */ }
|
||||
}
|
||||
inp.focus();
|
||||
});
|
||||
var form = document.querySelector('.cal-jump');
|
||||
var btn = document.getElementById('calJumpBtn');
|
||||
var hid = document.getElementById('calJumpD');
|
||||
if (!form || !btn || !hid) { return; }
|
||||
|
||||
function jump(v) {
|
||||
if (!v) { return; }
|
||||
hid.value = v;
|
||||
form.submit();
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
var meta = document.querySelector('meta[name="fb-semi"]');
|
||||
var conf = null;
|
||||
try { conf = meta ? JSON.parse(meta.getAttribute('content')) : null; } catch (e) { conf = null; }
|
||||
|
||||
function fallback() {
|
||||
// Semi 没就绪 → 用一个临时原生日期框（无 JS 时的兜底与这里同一行为）
|
||||
var t = document.createElement('input');
|
||||
t.type = 'date';
|
||||
t.value = hid.value;
|
||||
t.style.position = 'fixed';
|
||||
t.style.left = '-9999px';
|
||||
document.body.appendChild(t);
|
||||
t.addEventListener('change', function () { jump(t.value); });
|
||||
if (typeof t.showPicker === 'function') { try { t.showPicker(); } catch (e2) {} }
|
||||
else { t.focus(); t.click(); }
|
||||
}
|
||||
|
||||
if (!window.SemiUI || !window.SemiUI.DatePicker || !window.ReactDOM) { fallback(); return; }
|
||||
|
||||
// 弹一个**只有一个日期选择器**的轻浮层（与全站日期控件同一套样式）
|
||||
var host = document.getElementById('calJumpHost');
|
||||
if (!host) {
|
||||
host = document.createElement('div');
|
||||
host.id = 'calJumpHost';
|
||||
host.className = 'cal-jump-host';
|
||||
document.body.appendChild(host);
|
||||
}
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'cal-jump-pop';
|
||||
wrap.innerHTML = '<div class="cal-jump-pop-head">跳到哪一天？' +
|
||||
'<button type="button" class="cal-jump-x" aria-label="关闭">✕</button></div>';
|
||||
var inner = document.createElement('div');
|
||||
wrap.appendChild(inner);
|
||||
host.innerHTML = '';
|
||||
host.appendChild(wrap);
|
||||
|
||||
ReactDOM.createRoot(inner).render(React.createElement(SemiUI.DatePicker, {
|
||||
type: 'date',
|
||||
format: 'yyyy-MM-dd',
|
||||
defaultValue: hid.value ? new Date(hid.value + 'T00:00:00') : new Date(),
|
||||
open: true,
|
||||
// 选中即跳，不用再点"确定"
|
||||
onChange: function (d, ds) {
|
||||
if (ds) { jump(ds); }
|
||||
},
|
||||
onOpenChange: function (o) { if (!o) { host.innerHTML = ''; } }
|
||||
}));
|
||||
|
||||
wrap.querySelector('.cal-jump-x').addEventListener('click', function () { host.innerHTML = ''; });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user