tamakyi/rond-with-you
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
81 Commits 1 Branch 0 Tags
9c76437a76dd90c2050ecb172d78883bbf4e0c8c
Commit Graph
10 Commits
Author SHA1 Message Date
tamakyi 9c76437a76 修：显示区半径输入框被浏览器原生校验误判 
现象：输入任意正常半径（3、3.5、7.25…）提交时弹
「请输入有效值。两个最接近的有效值分别为 2.55 和 3.05」。

根因：<input type="number"> 的 **step 是相对 min 递增**的，不是「step 的整数倍」。
min=0.05 + step=0.5 ⇒ 合法值只有 0.05 / 0.55 / 1.05 …，于是 3 和 3.5 全被判非法。
而这是**浏览器原生**提示：JS 与后端都拦不到（我们自己的校验根本没机会说话）。

实测对照（同一元素换 step，其余不动）：
  step=0.5  ：0.05✓ 1✗ 3✗ 3.5✗ 7.25✗ 13.37✗
  step=0.05 ：0.05✓ 1✓ 3✓ 3.5✓ 7.25✓ 13.37✗   ← 仍会拦任意小数
  step=any  ：全 ✓                              ← 采用
保留 min/max（真实边界，且给 spinner 范围），只把 step 放开交给 JS/后端校验，
理由与写法都记在模板注释里。

同一 bug 类加了通配守卫，防的是下次换个页面又踩：
- TestNumberInputStepNeverMismatchesMin：扫**所有**模板的数字框，
  凡「有 min 且有数值 step」就要求 min 是 step 的整数倍（或改用 any）；
- TestTopicAreaRadiusInputAllowsAnyStep：列表里的输入框是 JS 动态建的，模板扫不到，
  单独钉住 step='any'。
变异验证过：把 step 改回 0.5，守卫立刻红。

实测（无头）：输入 3.5 后 validationMessage 为空、form.checkValidity() 为真 ⇒
回车提交不再弹气泡；隐藏字段正确更新为 radiusKm:3.5；越界值只给我们的中文提示
（stepMismatch=false、rangeUnderflow=true，说明「step 误判」这一类已消除）。
全站其它数字框（如迷雾遮罩的 radius_m，min=50/step=50）本来就合法，未改动。
 2026-10-12 18:11:53 +08:00
tamakyi 7ab33227a5 专题显示区改成在地图上点选（后台编辑器） 
用户诉求的后半：不该让他手填经纬度和半径，应该在地图上圈。三个手填输入框
换成地图 + 圆列表：点地图加圆、拖圆心移动、拖圆边改半径、列表里可改半径/
定位/删除、可一次清空；改动立刻写进隐藏字段 areas(JSON) 与 crs，随专题表单
一起提交。

- 复用 /admin/fog-mask 那套约定：/api/map-config 取底图、底图坐标系随表单带上、
  后端换算成 GCJ-02。不另起炉灶。
- areas 的初值**渲染进隐藏字段**（不是只塞给 JS）：脚本没加载上时提交的仍是原值，
  否则一次保存就把已有显示区静默清空。
- 地图初始视野取生效数据集的地点包围盒（placesBounds），一上来就落在自己的地界上，
  而不是全国视野。
- 上限（20 个 / 0.05~2000 km）前端也校验一份，并**禁用提交**；两边数字用守卫比对，
  免得出现「前端放行、后端拒绝，用户不知道改哪里」。

实测抓到并修掉的 bug：/admin/topics 没设 p.HasMap ⇒ 布局不引入 Leaflet，
表现是脚本加载了、rondTopicAreas 也在，就是 window.L 永远 undefined，init 静默
返回、控制台不报错、页面像「什么都没发生」。已加守卫钉住这一点。

其余：
- topic-areas.js 只暴露纯函数（校验/序列化/增删改的不可变性/几何换算）供 node 单测，
  另加一个最小测试钩子 api._map 供无头验证（同 window.rondMap._state 惯例）。
- CSS 用定宽容器装半径输入框：站点全局 input 规则是 width:100% 且带 10 个 :not()
  （特异性 (0,11,1)），直接给 input 写宽度压不过。
- gofmt：文档注释里的缩进列表按 Go 1.19 的规则重排；顺带把工作区的 CRLF 归一到 LF
  （.gitattributes 早就声明 eol=lf，blob 本来也是 LF，所以 git diff 无额外噪声）。

验证：
- topic-areas.test.js 44 条（含「增删改返回新数组不原地改」、半径换算自洽性）。
- 三个新守卫：两边上限一致、模板契约（旧输入框必须没了 + 挂点齐全 + 初值来源）、
  topicsAdminPage 必须设 HasMap。
- 无头端到端：两击成两圆 → 改半径 7.5 → 删第 1 个 → 越界半径被拦且禁用提交 →
  提交 200 且落库 areas=[{lat:24.72,lon:108.1,radiusKm:7.5}]（废弃列镜像 7.5）；全程无 JS 报错。
 2026-10-12 17:35:00 +08:00
tamakyi 44763dfc3f 专题的多圆显示区：前台按并集裁剪迷雾 
上一批把显示区改成了「一组圆」，这一批让前台真正认多个圆。

- clip-path 从 circle() 换成 path()：circle() 只表达得了一个圆。每个圆一段
  圆弧子路径、**同绕向**（sweep=0），nonzero 填充规则下多段自然取并集，
  重叠处不会互相挖洞。
- 拼路径的活单独放 fog-clip.js（rond-map.js 是个大 IIFE，函数取不出来），
  这样能直接跑 node 单测；layout 里必须排在 rond-map.js 之前加载。
- 顺带清掉已经死掉的 fitCircle：多圆之后「圆心 + 半径」表达不了，留着就是
  两套并行的贴合口径。fitParams 现在只给 fitBBox（单圆时外接矩形正是那个
  圆的外接正方形，视野等价）。
- 守卫改名 TestTopicFogIsClippedToAreas，钉住两端（模板发 fogAreas ↔ 脚本认
  fogAreas）与两处顺序（裁剪注册在 applyFit 之后、fog-clip.js 在 rond-map.js
  之前）；fogAreas 必须**无条件**下发（空数组 = 不限区域），不要包在条件里。
- verify.sh 挂进前端单测：以前只靠人记得手动跑 = 等于没有。找不到 node 直接
  失败而不是跳过（跳过会让验收看着全绿、实际一行前端脚本都没验）。

验证（临时两圆专题，SQL 造的，已删）：
- fog-clip.test.js 15 条：把生成的 path 解析回圆弧再验几何，含绕向一致性与
  半径 0/负数的夹取。
- 端到端像素验证：自校准出「CSS 容器坐标 → 图像像素」（scale≈2、offset≈19.2，
  正是 site_cdp 的 --clip 外扩 10px×scale，别再手算）；三张掩码图证明并集语义
  —— A 独有点只有 A 亮、B 独有点只有 B 亮、**重叠中心两圆都亮且并集也亮
  （无洞）**，整体集合差异 0.013%。
- 迷雾掩码：86,776 个像素，按两圆并集的解析式判 **圆外 0 个**；两个圆内分别
  有 52,609 / 46,757 个迷雾像素 ⇒ 第二个圆真的被认了，不是只看第一个。
 2026-10-12 16:44:55 +08:00
tamakyi eb35abb7f2 专题页的迷雾按专题圈的区域收口 
以前专题的中心/半径只用来定视图，迷雾图层一直是全局的；管理页那句
「迷雾由地图按视野自动呈现，不需要单独圈选」其实是把「没做」写成了
「不用做」。现在专题圈了区域时，迷雾只在那个圆内显示。

做法是给迷雾单独一个 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
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
tamakyi b69b827d6e 日期框换成自控输入（原生 date 会吞位）+ 气温图桌面端铺满 + 同行卡片不再被拉伸 
三件事都由用户实测反馈，前两件先复现再动手。

一、日期框：敲 20260606 变成 202606/06（用户要「永远解决」）
- **实测复现**：写了个真实按键工具（CDP Input.dispatchKeyEvent 每字符带 text；
  技能里的 `--press` 只给 Enter 带 text，数字敲不进去）。在 /stats 的「起始日期」上敲 20260606：
  敲之前 `INPUT|date|`、attached=false；敲完显示 `202606/06`、`el.value` 是**空**（非法）—— 截图为证。
- **根因**：筛选区的起止日期是原生 `<input type="date">`，而挂载代码只写了
  `querySelectorAll('input[type=datetime-local]')` ⇒ **type=date 从没人管**。
  Chrome 的年段允许超过 4 位数字（年份上限 275760），8 位被切成 年=202606 + 月=06。
  原生分段状态读不到、`setSelectionRange` 对 date 类输入直接抛 ⇒ 修不了，只能换控件
  （用户也说了「如果当前控件无法实现就换别的」）。
- **做法**：`datetime-input.js` 加「只日期」模式（`SPEC.date`：年/月/日三段，输出 `Y-m-d`），
  并提供**统一入口 `attachAll(root)`** 按 `el.type` 分派；`attach` 里先把控件换成 `text`
  （引导会写 `2026-06-` 这种半成品，而原生控件对非法值一律置空）。
  `datetime-input.js` 改为**无条件引入**（公共页筛选区也要用；flatpickr 仍按需加载 ——
  没有它时只挂输入引导、不给日历，省 60 多 KB），挂载在 body 末尾**立刻**跑一次
  （别只等 DOMContentLoaded，否则会先露出原生框再变文本框）。三个后台页改用 `attachAll`，
  顺带覆盖行程筛选的 `mfrom/mto`（date 类走 `enableTime:false`，实测无时间选择器）。
- **验证**：真实按键敲 20260606 → `value="2026-06-06"`；端到端 `from=2025-08-01&to=2025-08-31`
  筛出 **186 次**，与月度图峰值月（186）完全吻合（排除「解析成空导致恒 0」）。
  门禁 `TestDateInputsGoThroughAttachAll`：模板里再出现按 type 挑的选择器即红（做过变异验证）；
  JS 单测补 11 条逐键模拟（45/45）。

二、逐月平均气温图在桌面端很小
- 量出来的：10 个月固定 36px 宽，只占 1042px 里的 **396px**，右边 600 多像素全空。
- 窄屏保持「固定 36px + 横滚」（挤在一起月份标签会糊），宽屏改 `flex: 1 1 36px; max-width: 96px`
  并把轨道从 84px 加到 130px、字号提到 `--fs-sm`。

三、类型分布与一天中的分布同行高度不齐
- grid 默认 `align-items: stretch`，把 256px 的「一天中的分布」拉到与 1411px 的「类型分布」一样高，
  卡片内部留一大片空白。改成 `.grid { align-items: start }`。

回归：./scripts/verify.sh **PASS=349 FAIL=0 SKIP=0**；移动端 390 / 桌面 1440 溢出与改前一致。

⚠️ 两个验证纪律（都写进 details 三十二）：
- 验收跑着的时候别并发跑测试/变异实验（两次踩到，其中一次变异正好被验收抓到，那轮结果作废）。
- **变异验证「内嵌文件」（templates/static）之后必须 `go clean -cache`**：`//go:embed` 的内容
  在「改坏→还原」后，构建缓存会继续给出变异期间编译的那份 —— 实测同一个测试
  `go test ./internal/web/` 绿、`go test ./...` 红，`go clean -testcache` 不管用。
 2026-10-09 18:29:55 +08:00
tamakyi 4015ddf373 时间框跳段 + 弹窗不再脏地址栏 + 统计脚本做成后台开关 
时间框（flatpickr allowInput 的手输体验）
- flatpickr 把 <input type=datetime-local> 就地改成 type=text，原生分段编辑器被替换掉；
  allowInput 又是「整串解析」语义：实测 parseDate('2026') 只出年份、'202666' 才出月份，
  于是「年份很长才跳下一位」；'20260606' 还会被静默错解成 2030-12-06 且不报错。
- 新增 static/js/datetime-input.js：自定义 parseDate（纯数字只收 4/6/8/12/14 位，
  歧义与非法日期一律拒）+ 输入引导（段满即补分隔符，敲完 4 位年份立刻跳月份位）。
  按标准格式不做自动补零、不前滚；越界值原样保留交报错，不静默改成合法值。
- 三处页面（编辑/照片/专题）共用 attachPicker，配置与原先一致，模板净减 5 行。

弹窗
- window.prompt 会把提示文本与默认值写进地址栏并留进历史（confirm/alert 无此问题）。
- 新增 static/js/prompt-box.js 替代：原生 <dialog>.showModal()，遮罩/Esc/焦点齐全，
  旧浏览器降级成页面顶部一条。已换 report.html 复制链接兜底与 edit.html 活动改名。
- 门禁 no_prompt_test.go：静态扫模板禁止 prompt(，并钉住 JS 与 CSS 都在。

统计脚本
- 原来只能改 conf/app.ini（要重启），现在后台「站点设置」可开关 + 填写，默认关闭。
- cleanTrackScript 挡住注入面：开闭 <script> 标签数不配平（提前闭合会让页面散架）、
  src 的 javascript:/data: 伪协议、超长截断。注意不能用「出现 </script 就拒」当规则——
  百度统计、Umami 贴的就是完整 HTML，正常用法会被挡死。

门禁
- datetime-input.test.js：34 条断言（node 直跑，无依赖）。
- TestCleanTrackScript：逐条边界 + 定义性不变量（任何输入都不得产出含 </script 的非空结果）。
- 三项均做过变异验证，改坏实现都会被对应测试抓到。

实测：真实站点逐键 2→20→202→2026-→2026-06-→2026-06-06T；
统计脚本六个场景（默认关/只填不开/开+URL/后台与登录页不挂/危险输入/关掉恢复）全部符合预期。
全量 internal/web 204 例 0 skip，其余包全绿，gofmt 干净。
 2026-10-08 18:27:59 +08:00
tamakyi d5f6dfa381 审计修复：前端（模板 / CSS / JS 与无障碍） 
- 地图脚本：localStorage 读写走 lsGet/lsSet 兜底（隐私模式下裸访问会打断整段脚本）；
  preview() 在 /api/map-config 还没回来时不丢点（previewQueue 在 if (live) 之前排队）；
  异步回包一律发序号作废，取消后回来的包不再画
- photo-exif.js：EXIF 时间全 0 不再变成 1899-11-30 写进到访时间；读 count 前先按版本卡宽度
- 数据编辑页：三个筛选表单都把其余条件用隐藏域原样带上，提交不再把别的列表的筛选清掉
- 补全页：sessionStorage 的读写一律包 try（脏数据/隐私模式都会抛）
- 窄屏：删掉被后面同特异性规则盖掉的死内边距；宽表堆叠类名成对、判据扩到所有 tb 表
- 无障碍：图片删除按钮补 aria-label，访客画廊图片补 alt
- report.html 补上漏掉的 </tr>，fog-mask 的宽表带 tb-stack

本批不碰数据库与导出路径：往返包 823/323/8/30/791/557/2246 全等、
坐标偏差 0.000000000、时间偏差 0s、迷雾 8701 块一致。
 2026-09-24 20:37:57 +08:00
tamakyi 002755129d 筛选在列表→详情→编辑之间保留，修复编辑页翻页丢筛选，收拾移动端触控与字号 
- 新增 ?back= 贯穿链路：列表页（地点库 / 时间线 / 统计 / 专题地图 / 主页）生成详情链接时
  带上当前完整地址，详情页的「返回」「编辑」与编辑页的返回按钮据此回到原来那份筛选结果。
  只放行站内路径（挡 //host、伪协议、控制字符），参数编码走 template.URL 避免二次转义。
- 修 EditData.PageLink 把 & 手工写成 &amp; 又被模板转义一次的 bug（&amp;amp;）——
  参数名会变成 amp;vpage，表现为「带筛选时翻页没反应、筛选还丢了」（既有问题）。
- 编辑页三个筛选表单与三个「重置」带上 back（重置改走 EditData.EditLink，各清各的，
  顺带修掉搜索词含 & 或空格时重置链接被拆坏）。
- 详情页「在地图中查看」的地点名改走 QueryEscape（名字含 & / # 会拆坏地址）。
- 窄屏修正：把被基础规则压掉的 .chip / .btn / .check 覆盖挪到最后；
  checkbox 20px、select 44px、file/color 字号 16px（iOS 聚焦不再自放大整页）、
  .tag 12px、导航 logo 触摸区 44×44。
- 新增回归 internal/web/pagelink_test.go（翻页链接、返回文案、地图链接）。
 2026-09-18 19:03:50 +08:00
tamakyi b327bc1230 first release 2026-09-18 13:05:49 +08:00