v24 第 10 批:名册真性能(根因是每卡内联表单)等九条
- #6 名册线上真实数据(1184 人)卡顿:根因是**每张卡片内联一整份分组弹层**—— 全页 2369 个 form / 27234 个 input / 22496 个 radio / 98100 DOM 节点, 密码管理器(Bitwarden 等)逐个扫描 form 把主线程占死(用户报的就是这个冲突)。 改为卡片只带 data 属性 + 全页**唯一一份**共享浮层 #rosterMenus。 实测:form 2369→3、input 27234→25、DOM 98100→17659、解压 7694→2306 KB、 长任务 1/52ms → 0。新增哨兵 _fb_formbloat_check.py(含反向验证)。 - #5 日视图翻页失效:day_columns() 无条件吸到周一,天视图只有 1 列 → 永远显示那周周一。 改为仅 span>1 时吸附(周视图行为不变)。 - #2 财务「欠款」类别(负债);并修一个真 bug:负债填负数会让净资产**反向变大**。 写入口 normalizeAmount 归一化 + summary/timeline 侧 abs 防御 + Schema v17 纠正老数据。 - #3 账目行「盘点」「修改」两个并列按钮(各自就地弹面板);图移到账目上方, 总金额图跨整行 + 每个账目一条线 + 类别筛选条;charts() 改为覆盖全部账目。 - #4 日程新增「农历」「节假日」两本不可删除只读日历(app/Holiday.php): 两级自动更新 —— 内置规则(公历固定 + 清明节气 + 农历节日)保证断网也有; 官方 JSON 镜像自动抓取补齐调休。抓取**不在渲染路径联网**(响应后 fastcgi_finish_request + 频率闸门),缓存落 storage/cache。仅派生本不可写日程。 - #6 日程页设置按钮前加「跳到某一天」(选中即跳)。 - #7 起止范围改用一个 Semi dateTimeRange 控件(观影/旅程/节点/日程共 4 处); 新增 window.fbSetDT / fbUpgradeRange;修范围重挂(React 非受控组件须 unmount 再 createRoot) 与范围里 required 未摘除导致表单无法提交两个真实问题。 验证:e2e 786/0、batch10 44/0、batch9 38/0、batch_e 91/0、upgrade 126/0、picker 28/0、 semi_integrate 27/0、formbloat 5/0(+反向 3 红)、mobile 688/0、interact 97/0、drag 5/0、geom 5/5; 线上自检 19/19 + 线上真实账号巡检 28/0(含 Firefox 实测)。
This commit is contained in:
+92
-14
@@ -542,6 +542,26 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
/* 工作经历的月份选择器(type="month" 升级):占满原 .job-cell 格子 */
|
||||
.dt-semi.dt-semi-month { display: none; }
|
||||
.dt-semi.dt-semi-month.is-live { display: block; width: 100%; }
|
||||
|
||||
/* ---- v24 第 10 批 #7:起止范围用一个控件(Semi dateTimeRange)----
|
||||
一对 .dt-input 被包在 .dt-range 里;升级后两端各自 display:none,
|
||||
由**一个** .dt-semi-range 顶上来。未升级(JS 没跑/加载失败)时,
|
||||
里面两个原生控件照旧各占一行 —— 也就是"功能没变,只是不好看"。 */
|
||||
.dt-range { display: flex; flex-direction: column; gap: 8px; }
|
||||
.dt-range.is-semi-range { display: block; }
|
||||
.dt-range.is-semi-range > .dt-input { display: none; } /* 两端都让位给范围控件 */
|
||||
.dt-semi-range { display: none; width: 100%; max-width: 460px; }
|
||||
.dt-range.is-semi-range .dt-semi-range { display: block; }
|
||||
/* Semi 范围输入框:与站内 .input 同高同圆角;宽度撑开一点(要放两个时间) */
|
||||
body[class] .dt-semi-range .semi-input-wrapper {
|
||||
height: 40px; border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface);
|
||||
}
|
||||
body[class] .dt-semi-range .semi-input-wrapper:hover { border-color: var(--brand-2); }
|
||||
body[class] .dt-semi-range .semi-input { font: inherit; font-size: 13.5px; color: var(--ink); }
|
||||
@media (max-width: 640px) {
|
||||
.dt-semi-range { max-width: none; }
|
||||
}
|
||||
.dt-input.dt-missing .semi-input-wrapper { border-color: #C0392B !important; box-shadow: 0 0 0 1px #C0392B inset; }
|
||||
/* Semi 主题对齐宣纸色。semi.min.css 是懒加载的、必然排在 app.css 之后,
|
||||
所以这里赢在**优先级**:body[class] 特异性(0,1,1) > semi 的 body(0,0,1)。 */
|
||||
@@ -983,21 +1003,26 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
|
||||
.person-edit {
|
||||
padding: 3px 10px; font-size: 13px; white-space: nowrap;
|
||||
}
|
||||
.person-more > summary {
|
||||
list-style: none; cursor: pointer; padding: 4px 10px;
|
||||
font-size: 16px; color: var(--muted); border-radius: 8px;
|
||||
.person-more-btn {
|
||||
padding: 3px 9px; font-size: 15px; line-height: 1.3;
|
||||
color: var(--muted); white-space: nowrap;
|
||||
}
|
||||
.person-more > summary:hover { background: var(--line-2); color: var(--brand); }
|
||||
.person-more > summary::-webkit-details-marker { display: none; }
|
||||
.person-more > summary::after { content: ' ▾'; }
|
||||
.person-more[open] > summary::after { content: ' ▴'; }
|
||||
.person-more > summary:hover { color: var(--brand); }
|
||||
.person-more[open] {
|
||||
position: absolute; right: 8px; top: 8px; transform: none;
|
||||
.person-more-btn:hover { color: var(--brand); }
|
||||
|
||||
/* ---------------- 名册卡片动作的**共享浮层**(v24 第 10 批 #6)----------------
|
||||
「分组」「移出名册」两份表单全页只渲染一份(原来每卡各一份,1184 人 =
|
||||
2369 个 form / 27234 个 input,密码管理器逐个扫描把页面拖死)。
|
||||
这里给共享浮层一个定位容器,面板由 JS 贴合触发按钮摆放。 */
|
||||
.roster-menus { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
|
||||
.roster-menus .rm-panel {
|
||||
position: fixed; pointer-events: auto;
|
||||
background: var(--surface); border: 1px solid var(--line);
|
||||
border-radius: 10px; box-shadow: var(--shadow-l); z-index: 30;
|
||||
min-width: 232px; padding-bottom: 4px;
|
||||
border-radius: 10px; box-shadow: var(--shadow-l);
|
||||
padding: 8px 0; min-width: 200px;
|
||||
}
|
||||
.roster-menus .rm-panel .person-move { padding: 0 10px; }
|
||||
.roster-menus .rm-panel .person-move.is-self { padding: 0 12px; }
|
||||
.roster-menus[hidden] { display: none; }
|
||||
.person-move { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; }
|
||||
.person-move .select { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 13px; }
|
||||
.person-move .btn { flex: 0 0 auto; }
|
||||
@@ -1569,8 +1594,38 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
|
||||
.ck-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
|
||||
.ck-head b { font-size: 14px; }
|
||||
.ck-svg { display: block; margin-top: 2px; }
|
||||
/* 盘点面板:与「更正」并列在一个 <details> 里,中间给一条分隔线才分得清两件事 */
|
||||
.led-recon { padding-bottom: 10px; border-bottom: 1px dashed var(--line-2); margin-bottom: 10px; }
|
||||
|
||||
/* ---- v24 第 10 批 #3:总金额图在最前(跨整行),下面才是逐条账目 ---- */
|
||||
.ck-total { margin-bottom: 14px; }
|
||||
.ck-total .ck-head b { font-size: 15px; }
|
||||
/* 类别筛选条:图表一多就是一坨,把筛选权交给用户(而不是少画几条骗自己) */
|
||||
.ck-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
|
||||
.ck-chip {
|
||||
padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
|
||||
background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ck-chip:hover { border-color: var(--brand-2); }
|
||||
.ck-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||||
.ck-chip.is-debt:not(.is-on) { color: #1F7A4D; }
|
||||
|
||||
/* ---- v24 第 10 批 #3:每行的「盘点 / 修改」两个按钮 + 就地展开的面板 ---- */
|
||||
.led-acts { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
|
||||
.led-panel {
|
||||
/* 作为 <tr> 的兄弟插进来(见模板里的 JS):表格列宽会把表单切碎,格子外才排得开 */
|
||||
display: block; background: #FDFBF7;
|
||||
border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
padding: 12px 14px; margin: 0 0 8px;
|
||||
}
|
||||
.led-panel .field { margin-bottom: 10px; }
|
||||
.led-panel .field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
|
||||
.led-panel .input, .led-panel .select { width: 100%; max-width: 360px; }
|
||||
.led-panel .btn-row { margin-top: 4px; }
|
||||
.led-panel[hidden] { display: none; }
|
||||
/* 「修改」面板里嵌了选人组件,给它一个不夸张的最大宽度 */
|
||||
.led-panel .pp { max-width: 420px; }
|
||||
/* 盘点面板与「修改」不再同处一个 details,分隔线也就不需要了 */
|
||||
.led-recon { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
|
||||
.led-form-h { font-size: 12.5px; color: var(--muted); font-weight: 500; margin: 0 0 8px; }
|
||||
.led-hist { margin-top: 6px; }
|
||||
.led-hist summary { cursor: pointer; }
|
||||
@@ -2403,6 +2458,29 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
|
||||
background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---- v24 第 10 批 #6:日程页头的「跳到某一天」按钮 ----
|
||||
外观与 .btn 一致(它是 <label> 包着一个原生 date 输入,所以自己画外壳)。
|
||||
原生日历指示器收掉:整个按钮都是可点的,多一个小图标反而抢视线。 */
|
||||
.cal-jump { display: inline-flex; margin: 0; }
|
||||
.cal-jump-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.cal-jump-btn:hover { border-color: var(--brand-2); }
|
||||
.cal-jump-txt { font-size: 13px; }
|
||||
.cal-jump-date {
|
||||
border: 0; background: transparent; font: inherit; font-size: 13px;
|
||||
color: var(--ink); cursor: pointer; padding: 0; min-width: 118px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.cal-jump-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
|
||||
.cal-jump-date:focus { outline: none; }
|
||||
@media (max-width: 640px) {
|
||||
/* 窄屏:只留图标 + 日期,把「跳到」两个字收掉(不然页头一排按钮换行) */
|
||||
.cal-jump-txt { display: none; }
|
||||
.cal-jump-date { min-width: 104px; }
|
||||
}
|
||||
|
||||
/* ==================== 周 / 天:按小时铺的时间网格 ==================== */
|
||||
/* 结构:左边一条"小时刻度"沟槽(tg-gutter),右边 N 个日期列(tg-col)。
|
||||
列高固定 = 24 小时 × 每小时 44px,日程块按 top/height 百分比**绝对定位**,
|
||||
|
||||
Reference in New Issue
Block a user