Files

T

以前专题的中心/半径只用来定视图，迷雾图层一直是全局的；管理页那句
「迷雾由地图按视野自动呈现，不需要单独圈选」其实是把「没做」写成了
「不用做」。现在专题圈了区域时，迷雾只在那个圆内显示。

做法是给迷雾单独一个 pane（zIndex 250，底图 200 之上）再对该 pane 做
clip-path: circle()——不能直接裁 tilePane，底图也在里面，会把地图一起挖空。

两个坑：
- 圆心必须先 project() 到底图坐标系（与 fitCircle 一致），否则整体偏移；
- 裁剪圆的注册必须排在 applyFit() 之后：视图未定时 latLngToContainerPoint()
  会抛「Set map center and zoom first.」，把后续图层添加一起打断——实测
  表现是 pane 建好了、迷雾瓦片一张都不出来，而且不报错。

迷雾是累积快照、没有时间维度，所以只按区域收口，不按专题的时间范围收口。
守卫 TestTopicFogIsClippedToArea 钉住两端与注册顺序。

2026-10-10 10:41:27 +08:00

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

专题的迷雾按区域收口

用户问「我创建了一个专题，但是迷雾好像无法根据选择显示范围？」——查下来是实现缺口：专题的中心/半径只用来 fitCircle 定视图，迷雾图层一直是全局的；管理页那句「区域内的世界迷雾由地图按视野自动呈现，不需要单独圈选」属于文档与实现不符（把「没做」写成「不用做」）。用户选定口径：按专题区域收口（迷雾是累积快照、无时间维度，所以不按时间范围收口）。

改 4 个文件：rond-map.js（新建 rondFog pane + clip-path: circle()）、topic.html（.Topic.HasArea 时下发 fogArea）、admin/topics.html（把那句错提示删掉、补正确说明）、frontend_fixes_test.go（守卫）。细节与三个坑（不能裁 tilePane、圆心要 project()、注册必须排在 applyFit() 之后）见 details 四十五。

3.2 KiB Raw Blame History Unescape Escape