节点表单:24 小时制时间控件、附件可裁剪、保存失败不丢已填内容
1) 时间选择不再出现「上午/下午」 datetime-local 的显示格式由浏览器 UI 语言决定(中文环境渲染成 「下午 03:30」),页面与元素的 lang 都压不住(截图实测)。 拆成「原生 date 控件 + 时下拉(00-23) + 分下拉(00-59)」组合控件 (templates/_datetime.php),24 小时制由控件本身决定,浏览器改不掉。 服务端 read_dt_input() 把三段拼回 Y-m-d H:i:s 并校验,兼容旧单字段。 节点起止时间与成员签到时间一并换掉。 2) 附件可裁剪,不想裁点「确定」就按原图上传 裁剪弹窗抽成 templates/_crop_modal.php 与照片页共用;表单里选完图 自动逐张进入裁剪,整图选框=没裁(保留原文件、不重新编码、省 base64 流量),裁过的走 cropped 通道(隐藏域 JSON,原生表单提交也能带), 没裁的留在 input.files,已裁卡片带角标,可随时重置重来。 3) 节点保存失败不再清空整页 服务端:失败分支 flash_old($_POST),重开的表单按 old()/old_array()/ old_dt() 全字段回填(含勾选删除状态),渲染完即清(layout.php)。 前端:sessionStorage 草稿兜底服务端拿不到 $_POST 的情况 (post_max_size 超限、会话过期),恢复条件收窄到「页面有错误提示条」, 避免陈旧草稿污染新表单。 已验证:本地 php -l 全量 0 错、模板渲染 275 项、表单交互(真实浏览器) 73 项——含真实裁剪一刀、草稿恢复、三段式时间选择;远端 e2e 289 项 0 失败(存储设置测试期间归一为 local,不再写用户真实 OSS 桶,收尾还原); 部署后双 PHP 渲染逐字节一致、59 文件哈希校验一致。
This commit is contained in:
@@ -444,6 +444,31 @@ input[type="datetime-local"], input[type="date"] { cursor: pointer; }
|
||||
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
||||
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 2px; }
|
||||
|
||||
/* ── 日期 + 24 小时制「时:分」组合输入(templates/_datetime.php)──────────────
|
||||
原生 datetime-local 的显示格式由浏览器 UI 语言/系统时间格式决定,中文环境渲染成
|
||||
「下午 03:30」,页面和元素的 lang 都压不住(实测),所以拆成 date + 时/分两个下拉。
|
||||
24 小时制由控件本身决定,浏览器改不掉。 */
|
||||
.dt-input { display: flex; align-items: center; gap: 6px; }
|
||||
.dt-input .dt-date { flex: 1 1 120px; min-width: 0; }
|
||||
.dt-input .dt-hour,
|
||||
.dt-input .dt-minute {
|
||||
flex: 0 0 64px; width: 64px; padding: 9px 4px;
|
||||
text-align: center; text-align-last: center;
|
||||
}
|
||||
.dt-input .dt-colon { color: var(--text-mute); font-weight: 650; }
|
||||
|
||||
/* 裁剪入口(节点表单):「逐张裁剪」按钮 + 一句说明 */
|
||||
.crop-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.crop-toolbar .muted { margin-top: 0; font-size: 12px; }
|
||||
|
||||
/* 节点表单待上传卡片上的「已裁剪」角标。
|
||||
.photo-badge 本来是给照片页 .photo-item(flex 纵向布局)的流式元素用的,
|
||||
这里换到 .photo-card(position:relative)就得改成绝对定位,压在缩略图左上角。 */
|
||||
.photo-card > .photo-badge {
|
||||
position: absolute; top: 6px; left: 6px; margin: 0;
|
||||
background: rgba(18, 133, 90, .92); color: #fff;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
|
||||
|
||||
Reference in New Issue
Block a user