日历改中文、修掉头部重叠;统计页那两张体量悬殊的卡不再并排

用户反馈:日历「空间显示有点异常」且是英文、和项目割裂;类型分布与一天中的分布仍是一左一右、
右边下面一大片空白。两件事的根因都不是表面看到的那个。

一、日历英文
- `flatpickr.localize(l10ns.zh)` 原先只写在三个后台页的 whenReady 里;上一批把 flatpickr 放到
  公共页(筛选区)之后就漏了 ⇒ 日历全是 Sun/Mon/January…
- 修法:移到 datetime-input.js 的 attachPicker 里(localizeOnce(),全局只调一次),
  三个后台页那三行重复调用删掉。

二、日历头部重叠(就是用户说的「空间异常」)
- 月份下拉被撑满整行、压在年份输入上。根因是**站点全局的 input/select 样式扫进了日历内部**:
  那条规则带 width:100%、内边距、边框与 16px 控件字号,而日历内部的
  `input.numInput`(type=number)与 `select.flatpickr-monthDropdown-months` 都躲不开。
- ⚠️ 第一版修法(在后面补一条 `.flatpickr-calendar input{...}` 对冲)**是错的**:全局选择器带
  10 个 :not([type=…])、特异性 (0,10,1),普通对冲压不过,实测年份框仍是站点样式。
  正确做法是在**全局规则里排除** `input…:not(.numInput)` / `select:not(.flatpickr-monthDropdown-months)`,
  `input:focus` 的焦点环同理(否则年份框上套一圈主色光圈)。
- 实测:星期「周日 周一 …」、月份「十月」、月份与年份 overlap=0、无 JS 报错。

三、统计页排版
- `align-items: start` 只消掉了卡内空白,消不掉并排本身的空:类型分布 1411px 与
  一天中的分布 256px 并排,右侧下面必然空一片。改成单列(`<div class="grid">`),
  两张卡各占整行 1080px —— 24 根柱终于有宽度可用,列表也像「城市排行」那样横铺。

回归:./scripts/verify.sh PASS=349 FAIL=0 SKIP=0;JS 单测 45/45;移动端 390 溢出全 0;
桌面 1440 与改前一致(−15 是滚动条宽)。
This commit is contained in:
tamakyi
2026-10-10 09:45:32 +08:00
parent b19f27ab69
commit cd69efe8f1
8 changed files with 87 additions and 10 deletions
+12 -3
View File
@@ -429,13 +429,22 @@ label.f > span { display: block; font-size: var(--fs-sm); color: var(--text-2);
/* 按「排除掉不该套文本框样式的类型」来写,而不是逐个枚举 text/number/date——
枚举漏了 datetime-local(后台编辑页有 160 多个),那些框就一直是浏览器默认外观:
没有圆角、没有内边距、13.33px 的字,跟旁边的输入框明显不是一套。 */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
select, textarea {
/* ⚠️ 还要排除 flatpickr **内部**的控件:`input.numInput`(年 / 时 / 分)与
`select.flatpickr-monthDropdown-months`(月份下拉)。它们是 type=number / select,
会被下面这条扫中 —— width:100% 把月份下拉撑满整行、压在年份输入上面(实测重叠成一团),
内边距与边框还会把时间格变成站点的方块输入框。
⚠️ 别指望「后面补一条 `.flatpickr-calendar input{...}` 去对冲」:这条选择器带 10 个
`:not([type=…])`,特异性是 (0,10,1),普通对冲压不过(实测年份框仍是站点样式)。
要排除就得在**这里**排除。 */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]):not(.numInput),
select:not(.flatpickr-monthDropdown-months), textarea {
width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit;
font-size: var(--field-fs, inherit);
background: var(--surface); color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:not(.numInput):focus, select:not(.flatpickr-monthDropdown-months):focus, textarea:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.check { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 8px; word-break: keep-all; overflow-wrap: break-word; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.nobr { white-space: nowrap; }