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

用户诉求的后半：不该让他手填经纬度和半径，应该在地图上圈。三个手填输入框
换成地图 + 圆列表：点地图加圆、拖圆心移动、拖圆边改半径、列表里可改半径/
定位/删除、可一次清空；改动立刻写进隐藏字段 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 报错。

internal/web/static/css/app.css

@@ -1161,6 +1161,26 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
 #parse-status { margin: 12px 0 0; }
 #parse-status:empty { display: none; }
 
+/* ---------- 专题显示区编辑器（后台专题表单） ----------
+   地图 + 圆列表。半径/个数的上下限与后端一致，由 topic-areas.js 统一校验。 */
+#area-map { height: 380px; border-radius: var(--r-md); background: var(--line-soft); }
+.area-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
+.area-tools #area-hint { flex: 1 1 240px; font-size: var(--fs-sm); }
+#area-hint.err { color: var(--err-fg); }
+#area-list { margin-top: 4px; }
+#area-list:empty { display: none; }
+.area-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 7px 0; border-top: 1px solid var(--line-soft); }
+.area-tag { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-sm); min-width: 2.4em; }
+.area-row .mono { flex: 1 1 180px; }
+.area-km { display: flex; align-items: center; gap: 6px; margin: 0; }
+/* 定宽容器：站点的全局 input 规则是 width:100% 且带 10 个 :not()（特异性 (0,11,1)），
+   直接给 input 写宽度压不过，用容器定宽就绕开了。 */
+.area-km-box { flex: 0 0 96px; display: block; }
+/* divIcon 默认没有背景，不补的话圆心和把手既看不见也抓不住 */
+.area-dot { background: var(--accent); border: 2px solid #fff; border-radius: 50%; box-shadow: var(--sh-1); }
+.area-handle { background: var(--surface); border: 2px solid var(--accent); border-radius: 50%; box-shadow: var(--sh-1); }
+
 /* ---------- 窄屏触控与控件字号（必须放在最后） ----------
    这几组选择器（.chip / .btn / .check input）的基础规则写在文件中部，
    而 CSS 同特异性下靠后的赢 —— 把它们写在前面那份「窄屏触控」块里是被盖掉的
@@ -1170,6 +1190,9 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
 @media (max-width: 620px) {
   .chip { padding: 9px 12px; }
   .btn, .btn.sm { padding: 10px 14px; }
+  /* 专题显示区编辑器：地图矮一点；坐标那列太长会挤掉按钮，让它独占一行排到最后 */
+  #area-map { height: 300px; }
+  .area-row .mono { flex: 1 1 100%; order: 3; }
   /* 勾选框：原来 15px，手指很难点中（尤其后台设置页一屏几十个开关）。
      有效目标仍是外面那圈 label，但控件本身大一点更好瞄。 */
   .check input, input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }