Files
rond-with-you/.workbuddy/memory/2026-10-10.md
T
tamakyi cd69efe8f1 日历改中文、修掉头部重叠;统计页那两张体量悬殊的卡不再并排
用户反馈:日历「空间显示有点异常」且是英文、和项目割裂;类型分布与一天中的分布仍是一左一右、
右边下面一大片空白。两件事的根因都不是表面看到的那个。

一、日历英文
- `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 是滚动条宽)。
2026-10-10 09:45:32 +08:00

2.3 KiB
Raw Blame History

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 是滚动条宽)。