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

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

一、日历英文
- `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
+2 -2
View File
@@ -801,8 +801,8 @@
// 注意 l10n 对象叫 flatpickr.l10ns(复数);且必须 try 住——这里抛错会把
// 同一回调里后面的地图和地点搜索初始化一起炸掉。
try {
if (window.flatpickr && flatpickr.l10ns && flatpickr.l10ns.zh) flatpickr.localize(flatpickr.l10ns.zh);
// 统一入口:一次覆盖 datetime-local 与 date(行程筛选的 mfrom / mto 就是 date)。
// 统一入口:一次覆盖 datetime-local 与 date(行程筛选的 mfrom / mto 就是 date);
// 中文文案在 attachPicker 里设,不用各页自己调 localize。
// 别再手写 querySelector('input[type=...]') —— 2026-10-09 的日期框 bug 就是这么漏掉 type=date 的。
window.rondDatetime.attachAll();
} catch (e) { console.error('日期控件初始化失败', e); }
+2 -2
View File
@@ -505,8 +505,8 @@
function initPickers() {
try {
if (window.flatpickr && flatpickr.l10ns && flatpickr.l10ns.zh) flatpickr.localize(flatpickr.l10ns.zh);
// 统一入口(datetime-local + date)。限定在 rowsBox 里:页面别处的输入前面已经挂过了。
// 统一入口(datetime-local + date),中文文案在 attachPicker 里设。
// 限定在 rowsBox 里:页面别处的输入前面已经挂过了。
window.rondDatetime.attachAll(rowsBox);
} catch (e) { console.error('日期控件初始化失败', e); }
}
+1 -2
View File
@@ -93,8 +93,7 @@
}
whenReady(function () {
try {
if (window.flatpickr && flatpickr.l10ns && flatpickr.l10ns.zh) flatpickr.localize(flatpickr.l10ns.zh);
// 统一入口:一次覆盖 datetime-local 与 date(见 datetime-input.js 顶部说明)
// 统一入口:一次覆盖 datetime-local 与 date(中文文案在 attachPicker 里设)
window.rondDatetime.attachAll();
} catch (e) { console.error('日期控件初始化失败', e); }
});
+4 -1
View File
@@ -93,7 +93,10 @@
<div class="cols-x">{{range .Monthly}}<span>{{.Label}}</span>{{end}}</div>
</div>
<div class="grid g2">
{{/* 这两张卡不做左右分栏:类型分布(60 多行)与一天中的分布(24 根柱)体量差太多,
并排时右侧下面必然是一大片空白。各占整行 —— 列表像「城市排行」那样横铺开,
24 根柱也终于有宽度可用。 */}}
<div class="grid">
<div class="card">
<h2>类型分布</h2>
<div class="card-sub">按到访次数排序</div>