专题显示区改成在地图上点选(后台编辑器)

用户诉求的后半:不该让他手填经纬度和半径,应该在地图上圈。三个手填输入框
换成地图 + 圆列表:点地图加圆、拖圆心移动、拖圆边改半径、列表里可改半径/
定位/删除、可一次清空;改动立刻写进隐藏字段 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 报错。
This commit is contained in:
tamakyi
2026-10-12 17:35:00 +08:00
parent 48938e6ae1
commit 7ab33227a5
8 changed files with 690 additions and 18 deletions
+32
View File
@@ -421,6 +421,9 @@ func (s *Server) topicsAdminPage(w http.ResponseWriter, r *http.Request) {
s.serverError(w, r, err)
return
}
// 显示区编辑器要用 Leaflet:布局按这个标记引入它,漏了就是「地图整块不出现」
// (实测踩过:脚本加载了、rondTopicAreas 也在,但 window.L 一直是 undefined)。
p.HasMap = true
d := TopicAdminData{Page: p}
d.Flash, d.Err = r.URL.Query().Get("ok"), r.URL.Query().Get("err")
u := userFrom(ctx)
@@ -441,6 +444,12 @@ func (s *Server) topicsAdminPage(w http.ResponseWriter, r *http.Request) {
if err := s.fillTopicStatsBatch(ctx, list, ds.ID, nil, false); err != nil {
log.Printf("专题统计失败: %v", err)
}
// 显示区编辑器的初始视野落在站长自己的地界上(拿不到就退回编辑器自带的兜底视野)
if b, err := s.placesBounds(ctx, ds.ID); err != nil {
log.Printf("取地点包围盒失败: %v", err)
} else {
d.MapHomeJSON = b
}
}
d.Topics = list
// 编辑模式:?edit=<id>
@@ -462,6 +471,29 @@ func (s *Server) topicsAdminPage(w http.ResponseWriter, r *http.Request) {
s.render(w, "admin/topics", d)
}
// placesBounds 是生效数据集里可用地点的包围盒,给显示区编辑器当初始视野。
// 「可用」=有坐标且不是 (0,0)(脏数据会被填成 0,0,落进去会把视野拉到几内亚湾)。
// 没有地点时返回 null,编辑器自己有兜底视野。
func (s *Server) placesBounds(ctx context.Context, datasetID int64) (template.JS, error) {
var minLat, maxLat, minLon, maxLon sql.NullFloat64
if err := s.db.QueryRowContext(ctx, `SELECT min(lat), max(lat), min(lon), max(lon) FROM places
WHERE dataset_id=$1 AND lat IS NOT NULL AND lon IS NOT NULL AND (lat <> 0 OR lon <> 0)`,
datasetID).Scan(&minLat, &maxLat, &minLon, &maxLon); err != nil {
return "", err
}
if !minLat.Valid {
return "null", nil
}
b, err := json.Marshal(map[string]any{
"minLat": minLat.Float64, "maxLat": maxLat.Float64,
"minLon": minLon.Float64, "maxLon": maxLon.Float64,
})
if err != nil {
return "", err
}
return template.JS(b), nil
}
func (s *Server) adminTopicSave(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
u := userFrom(ctx)