专题显示区改成在地图上点选(后台编辑器)
用户诉求的后半:不该让他手填经纬度和半径,应该在地图上圈。三个手填输入框
换成地图 + 圆列表:点地图加圆、拖圆心移动、拖圆边改半径、列表里可改半径/
定位/删除、可一次清空;改动立刻写进隐藏字段 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:
@@ -7,6 +7,7 @@ import (
|
||||
"net/http"
|
||||
"net/http/httptest"
|
||||
"net/url"
|
||||
"os"
|
||||
"regexp"
|
||||
"strconv"
|
||||
"strings"
|
||||
@@ -394,3 +395,105 @@ func TestNormalizeTopicAreasLimits(t *testing.T) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 编辑器:两边写死的上限必须一致 ----------
|
||||
//
|
||||
// 前端 validate() 与后端 normalizeTopicAreas() 各写了一份上限。不一致的表现很别扭:
|
||||
// 前端放行、后端拒绝 ⇒ 用户看到一句红字却不知道改哪里(甚至以为是自己填错了)。
|
||||
// 这两份数字没有办法共享(一边 Go 一边 JS),所以直接静态比对。
|
||||
func TestTopicAreaLimitsMatchBetweenGoAndJS(t *testing.T) {
|
||||
js, err := staticFS.ReadFile("static/js/topic-areas.js")
|
||||
if err != nil {
|
||||
t.Fatalf("读取 topic-areas.js 失败: %v", err)
|
||||
}
|
||||
src := string(js)
|
||||
get := func(name string) string {
|
||||
m := regexp.MustCompile(name + `\s*=\s*([0-9.]+)`).FindStringSubmatch(src)
|
||||
if m == nil {
|
||||
t.Fatalf("topic-areas.js 里找不到 %s 的定义", name)
|
||||
}
|
||||
return m[1]
|
||||
}
|
||||
cases := []struct {
|
||||
jsName string
|
||||
want float64
|
||||
}{
|
||||
{"MAX_AREAS", float64(maxTopicAreas)},
|
||||
{"MIN_KM", topicAreaMinRadiusKm},
|
||||
{"MAX_KM", topicAreaMaxRadiusKm},
|
||||
}
|
||||
for _, c := range cases {
|
||||
got, err := strconv.ParseFloat(get(c.jsName), 64)
|
||||
if err != nil {
|
||||
t.Fatalf("解析 %s 失败: %v", c.jsName, err)
|
||||
}
|
||||
if got != c.want {
|
||||
t.Errorf("%s:JS 写的是 %v,后端是 %v —— 两边必须一致(前端放行后端拒绝,用户不知道改哪里)",
|
||||
c.jsName, got, c.want)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 编辑器:模板契约 ----------
|
||||
//
|
||||
// 钉住「编辑器的挂点」与「旧入口已经拆掉」:
|
||||
//
|
||||
// ① 三个手填坐标输入框必须没了 —— 留着就是第二套入口,而它只写第 1 个圆,
|
||||
// 用户会觉得「我明明填了坐标,怎么只认一个」;
|
||||
// ② areas 的初值必须**渲染进隐藏字段**(不是只放在 JS 里):脚本没加载上时提交的
|
||||
// 仍是原值,否则一次保存就把已有显示区静默清空;
|
||||
// ③ 编辑器脚本必须在页面里引入,且 init 的挂点 id 与模板里的 id 对得上。
|
||||
func TestTopicAdminUsesMapEditorNotCoordInputs(t *testing.T) {
|
||||
b, err := tmplFS.ReadFile("templates/admin/topics.html")
|
||||
if err != nil {
|
||||
t.Fatalf("读取 admin/topics.html 失败: %v", err)
|
||||
}
|
||||
body := string(b)
|
||||
for _, gone := range []string{`name="center_lat"`, `name="center_lon"`, `name="radius_km"`} {
|
||||
if strings.Contains(body, gone) {
|
||||
t.Errorf("admin/topics.html 不该再有 %s —— 显示区改由地图点选,留着就是第二套只写第 1 个圆的入口", gone)
|
||||
}
|
||||
}
|
||||
for _, need := range []string{
|
||||
`id="area-map"`, `id="area-list"`, `id="area-new-km"`, `id="area-clear"`, `id="area-hint"`,
|
||||
`id="topic-form"`, `name="areas"`, `name="crs"`,
|
||||
`/static/js/topic-areas.js`, `rondTopicAreas.init(`,
|
||||
} {
|
||||
if !strings.Contains(body, need) {
|
||||
t.Errorf("admin/topics.html 里缺 %q —— 显示区编辑器没挂全", need)
|
||||
}
|
||||
}
|
||||
// areas 初值要在隐藏字段上(服务端渲染),不是只传进 JS
|
||||
if !strings.Contains(body, `name="areas" value="{{.Form.AreasJSON}}"`) {
|
||||
t.Error(`areas 的初值必须渲染进隐藏字段(value="{{.Form.AreasJSON}}"):` +
|
||||
"脚本没加载上时要能原样提交,否则一次保存就清空已有显示区")
|
||||
}
|
||||
// 日期控件那条既有约定不能被挤掉
|
||||
if !strings.Contains(body, "rondDatetime.attachAll") {
|
||||
t.Error("admin/topics.html 里的日期控件初始化没了")
|
||||
}
|
||||
}
|
||||
|
||||
// 后台专题页要有地图 ⇒ 必须设 p.HasMap(布局按它决定引不引入 Leaflet)。
|
||||
// 漏了的表现很隐蔽:脚本加载了、编辑器对象也在,就是 window.L 永远 undefined,
|
||||
// init 直接静默返回 —— 页面看着「什么都没发生」,控制台也不报错。实测就是这么踩的。
|
||||
func TestTopicsAdminPageLoadsLeaflet(t *testing.T) {
|
||||
src, err := os.ReadFile(pkgFile(t, "handlers_topics.go"))
|
||||
if err != nil {
|
||||
t.Fatalf("读取 handlers_topics.go 失败: %v", err)
|
||||
}
|
||||
body := string(src)
|
||||
i := strings.Index(body, "func (s *Server) topicsAdminPage(")
|
||||
if i < 0 {
|
||||
t.Fatal("handlers_topics.go 里找不到 topicsAdminPage")
|
||||
}
|
||||
// 取到下一个顶层 func 为止(函数体不会嵌套顶层 func)
|
||||
rest := body[i:]
|
||||
if j := strings.Index(rest[1:], "\nfunc "); j >= 0 {
|
||||
rest = rest[:j+1]
|
||||
}
|
||||
if !strings.Contains(rest, "HasMap = true") {
|
||||
t.Error("topicsAdminPage 必须设 p.HasMap = true —— 不设的话布局不引入 Leaflet," +
|
||||
"显示区编辑器会静默不出现(脚本在、编辑器在,就是 window.L 是 undefined)")
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user