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

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

@@ -16,8 +16,8 @@
 
   <div class="card">
     <h2>{{if .IsNew}}新建专题{{else}}编辑专题 #{{.Form.ID}}{{end}}</h2>
-    <div class="card-sub">时间范围可精确到分钟；半径为 0 表示不限区域（时间范围内的地点画到哪算哪）。</div>
-    <form method="post" action="/admin/topics/save">
+    <div class="card-sub">时间范围可精确到分钟；不圈显示区就是「时间范围内的地点画到哪算哪」。</div>
+    <form method="post" action="/admin/topics/save" id="topic-form">
       {{if not .IsNew}}<input type="hidden" name="id" value="{{.Form.ID}}">{{end}}
       <div class="row">
         <label class="f" style="flex:2 1 240px"><span>标题<b class="req">*</b></span><input type="text" name="title" value="{{.Form.Title}}" placeholder="如：2026 大理之行"></label>
@@ -29,20 +29,27 @@
         <label class="f" style="flex:1 1 200px"><span>结束时间<b class="req">*</b></span><input type="datetime-local" name="end_at" value="{{.Form.EndDate}}"></label>
         <label class="f" style="flex:1 1 120px"><span>排序</span><input type="number" name="sort_order" value="{{.Form.SortOrder}}" placeholder="小的在前"></label>
       </div>
-      <div class="card-sub" style="margin:0 0 8px">区域（可选）：填了中心点与半径就只收这个圆内的足迹；留空则不限区域</div>
-      <div class="row">
-        <label class="f" style="flex:1 1 150px"><span>中心纬度</span><input type="text" name="center_lat" value="{{if .Form.CenterLat}}{{printf "%.6f" .Form.CenterLat}}{{end}}" placeholder="25.606486"></label>
-        <label class="f" style="flex:1 1 150px"><span>中心经度</span><input type="text" name="center_lon" value="{{if .Form.CenterLon}}{{printf "%.6f" .Form.CenterLon}}{{end}}" placeholder="100.267638"></label>
-        <label class="f" style="flex:1 1 120px"><span>半径（公里）</span><input type="text" name="radius_km" value="{{if .Form.RadiusKm}}{{printf "%.1f" .Form.RadiusKm}}{{end}}" placeholder="0 或留空＝不限"></label>
+      <div class="card-sub" style="margin:0 0 8px">显示区（可选）：在图上圈一组圆，落在<strong>任一</strong>圆内的足迹才算这个专题的内容；
+        不圈就是「时间范围内的地点画到哪算哪」。圈了之后，迷雾也只显示在这些圆的并集里。</div>
+      {{/* areas 的初值直接渲染在这里：脚本没加载上时提交的仍是原值，不会把已有显示区静默清空。
+           crs 由编辑器按底图坐标系填（天地图那类是 WGS-84），后端再换算成 GCJ-02。 */}}
+      <input type="hidden" name="areas" value="{{.Form.AreasJSON}}">
+      <input type="hidden" name="crs" value="">
+      <div class="area-tools">
+        <label class="f" style="flex:0 1 150px;margin:0"><span>新圆半径（公里）</span>
+          <input type="number" id="area-new-km" min="0.05" max="2000" step="0.5" value="3"></label>
+        <button class="btn" type="button" id="area-clear">清除全部</button>
+        <span class="muted" id="area-hint"></span>
+      </div>
+      <div id="area-map"></div>
+      <div id="area-list"></div>
+      <div class="muted" style="font-size:var(--fs-sm);margin-bottom:10px">
+        迷雾是一份累积快照、没有时间维度，所以只按上面的显示区收口，不按时间范围收口。
       </div>
       <div class="row" style="align-items:center;margin-bottom:10px">
         <label class="check" style="margin:0"><input type="checkbox" name="show_fog" {{if .Form.ShowFog}}checked{{end}}> 展示世界迷雾</label>
         <label class="check" style="margin:0"><input type="checkbox" name="enabled" {{if .Form.Enabled}}checked{{end}}> 对外展示（取消勾选则访客看不到）</label>
       </div>
-      <div class="muted" style="font-size:var(--fs-sm);margin-bottom:10px">
-        填了中心与半径时，迷雾只在这个圆内显示；留空则显示全局迷雾。
-        （迷雾是一份累积快照，没有时间维度，所以不收口到上面的时间范围。）
-      </div>
       <button class="btn primary" type="submit">{{if .IsNew}}创建专题{{else}}保存修改{{end}}</button>
       {{if not .IsNew}}<a class="btn" href="/admin/topics">取消编辑</a>{{end}}
     </form>
@@ -88,12 +95,22 @@
   </div>
 </div>
 
+<script src="/static/js/topic-areas.js?v={{.AssetV}}"></script>
 <script>
 (function () {
   function whenReady(cb) {
     if (document.readyState === 'complete') { setTimeout(cb, 0); return; }
     window.addEventListener('load', cb);
   }
+  // 显示区编辑器：地图与 Leaflet 由 layout 在本块之后引入，所以 init 内部会等 load。
+  // home 是生效数据集的地点包围盒（没有数据时是 null，编辑器自带兜底视野）。
+  if (window.rondTopicAreas) {
+    window.rondTopicAreas.init({
+      mapId: 'area-map', formId: 'topic-form', listId: 'area-list',
+      hintId: 'area-hint', radiusId: 'area-new-km', clearId: 'area-clear',
+      home: {{if .MapHomeJSON}}{{.MapHomeJSON}}{{else}}null{{end}}
+    });
+  }
   whenReady(function () {
     try {
       // 统一入口：一次覆盖 datetime-local 与 date（中文文案在 attachPicker 里设）