diff --git a/.workbuddy/memory/2026-10-10.md b/.workbuddy/memory/2026-10-10.md new file mode 100644 index 0000000..15803a9 --- /dev/null +++ b/.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 并排,右侧下面必然空一大片。 +改成 `
`(单列):两张卡各占整行(1080px),24 根柱终于有宽度可用, +列表也像「城市排行」那样横铺。实测 top=1183 → 2625,都全宽。 + +**回归**:verify.sh **PASS=349 FAIL=0 SKIP=0**、JS 单测 45/45、移动端 390 溢出全 0、 +桌面 1440 与改前一致(−15 是滚动条宽)。 diff --git a/.workbuddy/memory/MEMORY-details.md b/.workbuddy/memory/MEMORY-details.md index dba5255..ff73272 100644 --- a/.workbuddy/memory/MEMORY-details.md +++ b/.workbuddy/memory/MEMORY-details.md @@ -1061,5 +1061,22 @@ HTML,一行里必然带 ``,一拒就把正常用法挡死了(我 - `.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` 仍然保留:其它同行卡片也会体量不等。 + diff --git a/internal/web/static/css/app.css b/internal/web/static/css/app.css index dc1a9c9..6049eb2 100644 --- a/internal/web/static/css/app.css +++ b/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]), -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; } diff --git a/internal/web/static/js/datetime-input.js b/internal/web/static/js/datetime-input.js index adef6f0..24bb38d 100644 --- a/internal/web/static/js/datetime-input.js +++ b/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, { diff --git a/internal/web/templates/admin/edit.html b/internal/web/templates/admin/edit.html index b1a8542..7a4ecb6 100644 --- a/internal/web/templates/admin/edit.html +++ b/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); } diff --git a/internal/web/templates/admin/photos.html b/internal/web/templates/admin/photos.html index a6515e3..697f68b 100644 --- a/internal/web/templates/admin/photos.html +++ b/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)。限定在 rowsBox 里:页面别处的输入前面已经挂过了。 + // 统一入口(datetime-local + date),中文文案在 attachPicker 里设。 + // 限定在 rowsBox 里:页面别处的输入前面已经挂过了。 window.rondDatetime.attachAll(rowsBox); } catch (e) { console.error('日期控件初始化失败', e); } } diff --git a/internal/web/templates/admin/topics.html b/internal/web/templates/admin/topics.html index e7bbf68..647b878 100644 --- a/internal/web/templates/admin/topics.html +++ b/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(见 datetime-input.js 顶部说明) + // 统一入口:一次覆盖 datetime-local 与 date(中文文案在 attachPicker 里设) window.rondDatetime.attachAll(); } catch (e) { console.error('日期控件初始化失败', e); } }); diff --git a/internal/web/templates/stats.html b/internal/web/templates/stats.html index b4c7adc..1f1e343 100644 --- a/internal/web/templates/stats.html +++ b/internal/web/templates/stats.html @@ -93,7 +93,10 @@
{{range .Monthly}}{{.Label}}{{end}}
-
+ {{/* 这两张卡不做左右分栏:类型分布(60 多行)与一天中的分布(24 根柱)体量差太多, + 并排时右侧下面必然是一大片空白。各占整行 —— 列表像「城市排行」那样横铺开, + 24 根柱也终于有宽度可用。 */}} +

类型分布

按到访次数排序