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

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

一、日历英文
- `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 是滚动条宽）。

.workbuddy/memory/2026-10-10.md

@@ -0,0 +1,36 @@
+# 2026-10-10
+
+## 日历弹层返工 + 统计页排版（承接 10-09 的日期框改造）
+
+用户反馈两点：① 日历「空间显示异常」且是英文、和项目割裂；② 类型分布与一天中的分布仍是
+一左一右、右边下面一大片空白。
+
+### ① 日历：两个独立的坑
+
+**a) 英文文案**：`flatpickr.localize(l10ns.zh)` 原先只写在三个后台页的 `whenReady` 里；
+昨天把 flatpickr 放到公共页（筛选区）之后就漏了 ⇒ 日历全是 Sun/Mon/January…
+修法：移到 `datetime-input.js` 的 `attachPicker` 里（`localizeOnce()`，全局只调一次），
+三个后台页里那三行重复调用删掉。
+
+**b) 头部重叠（用户说的「空间异常」）**：月份下拉被撑满整行、压在年份输入上。
+根因是**站点全局的 `input/select` 样式扫进了日历内部** —— 那条规则带 `width:100%`、
+7px 内边距、边框与 16px 控件字号（`input.numInput` 是 `type=number`，`select.flatpickr-monthDropdown-months`
+是 select，都躲不过）。
+⚠️ 第一版修法是错的：我在后面补了一条 `.flatpickr-calendar input{...}` 去对冲，
+**压不过**——全局选择器带 10 个 `:not([type=…])`，特异性 (0,10,1)，实测年份框仍是站点样式。
+正确做法是在**全局规则里排除**：`input…:not(.numInput)`、`select:not(.flatpickr-monthDropdown-months)`，
+`input:focus` 的焦点环同理（否则年份框上套一圈主色光圈）。
+实测日历内部只有 4 个控件：`select.flatpickr-monthDropdown-months` +
+`input.numInput.cur-year / .flatpickr-hour / .flatpickr-minute`。
+
+实测结果：星期「周日 周一 …」、月份「十月」、`overlap=0`（月份 82px、年份紧接其后）、无 JS 报错。
+
+### ② 统计页：体量差太多的卡片别并排
+
+`align-items: start` 只消掉了**卡内**空白，消不掉并排本身的空 —— 类型分布 1411px 与
+一天中的分布 256px 并排，右侧下面必然空一大片。
+改成 `<div class="grid">`（单列）：两张卡各占整行（1080px），24 根柱终于有宽度可用，
+列表也像「城市排行」那样横铺。实测 top=1183 → 2625，都全宽。
+
+**回归**：verify.sh **PASS=349 FAIL=0 SKIP=0**、JS 单测 45/45、移动端 390 溢出全 0、
+桌面 1440 与改前一致（−15 是滚动条宽）。

.workbuddy/memory/MEMORY-details.md

@@ -1061,5 +1061,22 @@ HTML，一行里必然带 `</script>`，一拒就把正常用法挡死了（我
 - `.temp-strip` 的柱子窄屏固定 36px + 横滚；**宽屏要 `flex: 1 1 36px; max-width: 96px` 并把轨道加高**。
   原来固定 36×84，10 个月只占 1042px 里的 396px，右边 600 多像素全空 —— 看着就是「图表很小」。
 
+### 日历弹层的两处坑（2026-10-10）
+
+- **中文文案要在共享入口设一次**：以前是各页 `whenReady` 里自己调 `flatpickr.localize(l10ns.zh)`，
+  公共页开始加载 flatpickr 之后就漏了 —— 日历是英文的（Sun/Mon/January…），跟中文界面明显割裂。
+  现在放在 `attachPicker` 里（`localizeOnce()`，全局只调一次）。
+- ⚠️ **站点全局的 `input/select` 样式会扫进日历内部**：那条规则带 `width:100%`、内边距与边框，
+  落到日历里就是「月份下拉被撑满整行、压在年份输入上」（实测重叠成一团），时间格也变成方框输入框。
+  修法是**在全局规则里排除** `input.numInput` 与 `select.flatpickr-monthDropdown-months`
+  （实测日历内部只有这 4 个控件：`select.flatpickr-monthDropdown-months` + `input.numInput.cur-year`
+  / `.flatpickr-hour` / `.flatpickr-minute`）。
+  ⚠️ **不要**试图在 `.flatpickr-calendar input{...}` 里对冲 —— 那条全局选择器带 10 个 `:not([type=…])`，
+  特异性 (0,10,1)，普通对冲压不过（实测年份框仍是站点样式）。
+  `input:focus` 的焦点环同理要一起排除，否则年份框上会套一圈主色光圈。
+- **体量差太多的卡片别并排**：类型分布（60 多行）与一天中的分布（24 根柱）并排时，右侧下面必然
+  一大片空白 —— `align-items: start` 只能消掉**卡内**的空白，消不掉并排本身的空。各占整行才对
+  （列表横铺、24 根柱也终于有宽度）。`align-items: start` 仍然保留：其它同行卡片也会体量不等。
+
 
 

internal/web/static/css/app.css

@@ -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]),
+/* ⚠️ 还要排除 flatpickr **内部**的控件：`input.numInput`（年 / 时 / 分）与
-select, textarea {
+   `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; }

internal/web/static/js/datetime-input.js

@@ -356,6 +356,18 @@
     el._rondFormatOut = formatOut;
   }
 
+  /* 中文文案只在这里设一次。以前是各页的 whenReady 里自己调 flatpickr.localize()，
+     公共页（筛选区）原先根本不加载 flatpickr，等它也开始加载之后就漏了 ——
+     日历是英文的（Sun/Mon/January…），跟站点的中文界面明显割裂。 */
+  var l10nDone = false;
+  function localizeOnce() {
+    if (l10nDone || !global.flatpickr) return;
+    l10nDone = true;
+    if (global.flatpickr.l10ns && global.flatpickr.l10ns.zh) {
+      global.flatpickr.localize(global.flatpickr.l10ns.zh);
+    }
+  }
+
   /* 三处页面（编辑页 / 照片页 / 专题页）共用的挂载入口。
      配置刻意与原先完全一致，只多了 parseDate 与输入引导两件事：
        parseDate  修掉 allowInput 的「整串解析」与静默错解
@@ -365,6 +377,7 @@
     opts = opts || {};
     var dateOnly = !!opts.dateOnly;
     if (!global.flatpickr) { attach(el, opts); return null; }
+    localizeOnce();
     if (!el._rondPickerReady) {
       el._rondPickerReady = true;
       global.flatpickr(el, {

internal/web/templates/admin/edit.html

@@ -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); }

internal/web/templates/admin/photos.html

@@ -505,8 +505,8 @@
 
   function initPickers() {
     try {
-      if (window.flatpickr && flatpickr.l10ns && flatpickr.l10ns.zh) flatpickr.localize(flatpickr.l10ns.zh);
+      // 统一入口（datetime-local + date），中文文案在 attachPicker 里设。
-      // 统一入口（datetime-local + date）。限定在 rowsBox 里：页面别处的输入前面已经挂过了。
+      // 限定在 rowsBox 里：页面别处的输入前面已经挂过了。
       window.rondDatetime.attachAll(rowsBox);
     } catch (e) { console.error('日期控件初始化失败', e); }
   }

internal/web/templates/admin/topics.html

@@ -93,8 +93,7 @@
   }
   whenReady(function () {
     try {
-      if (window.flatpickr && flatpickr.l10ns && flatpickr.l10ns.zh) flatpickr.localize(flatpickr.l10ns.zh);
+      // 统一入口：一次覆盖 datetime-local 与 date（中文文案在 attachPicker 里设）
-      // 统一入口：一次覆盖 datetime-local 与 date（见 datetime-input.js 顶部说明）
       window.rondDatetime.attachAll();
     } catch (e) { console.error('日期控件初始化失败', e); }
   });

internal/web/templates/stats.html

@@ -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>