给显示区编辑器补上长度参照：比例尺 + 直径标注

用户反馈「专题里的圆无论怎么缩放大小都一样，20km 却覆盖了整个南宁」。实测
三处画圆（编辑器 L.circle、改半径把手、前台迷雾裁剪圆）**全都是地理锚定的**：
编辑器圆直径 z9/z11/z13 = 178/710/2842px（期望 177/711/2847）、同一缩放下改半径
3/10/25/50km → 42/142/356/710px（期望 43/142/355/711）、把手距圆心 20.038km
（该圆半径 20km）、前台裁剪圆换算始终 ≈20km。也就是**复现不出「大小不变」**。

真正的问题是缺**参照物**：编辑器地图以前没有比例尺（前台专题页一直有），
圈圆时只能靠地名猜。用他自己的数据验证「20km 覆盖南宁」是对的——圆心 20km 内
落了他 477 个地点中的 45 个，最远到西乡塘的广西民族大学相思湖校区（14.5km）
与良庆的五象万象汇（10.2km），正是南宁建成区的跨度。

所以这一版补的是参照物，不改任何几何逻辑：
- 编辑器地图加 L.control.scale（跟前台一致，公制）。
- 半径旁边标出跨度：`spanLabel()` 把半径换成「约 40 公里宽」（<1 公里改用米，
  免得出「约 0.1 公里宽」这种别扭说法）；圆列表每行也标，新圆半径旁边实时跟着变。
- 守卫 TestTopicAreaEditorGivesSizeReference 钉住这两样（变异验证过：去掉比例尺立刻红）。
  它顺手抓到我自己的疏漏——模板的 init 调用漏传了 spanId，靠脚本默认值兜着，已补上显式传参。

验证：topic-areas.test.js 55 条（新增 11 条 spanLabel 边界）；无头实测比例尺在
（z10 显示 10 km）、新圆半径 3→「约 6 公里宽」/25→「约 50 公里宽」实时更新、
圆列表 20→「约 40 公里宽」，全程无 JS 报错。

.workbuddy/memory/2026-10-13.md

@@ -0,0 +1,35 @@
+# 2026-10-13
+
+## 排查「专题里的圆大小不随缩放变化」（结论：未能复现，行为是对的）
+
+用户反馈：专题里的圆无论怎么缩放，屏幕上的大小都一样；而且「新圆半径 25km 居然覆盖了整个南宁」。
+库里实际存的是 3 个 `radiusKm: 20`（北海 / 南宁 22.815547,108.367767 / 柳州）。
+
+四处实测（无头 CDP，全部换算回地面公里）：
+
+| 位置 | 结果 |
+|---|---|
+| 编辑器 `L.circle`（半径 25） | z9=178px / z11=710px / z13=2842px（每级翻倍），反算始终 25 km，期望 177/711/2847 —— 吻合 |
+| 编辑器「改半径」把手 vs 圆心 | 20.038 km（该圆半径 20 km）—— 位置准确 |
+| 前台专题页的迷雾裁剪圆 | z7→z10 像素半径 17→141（应 142），换算始终 ≈20 km |
+| 同一缩放改「新圆半径」 | 3→42px、10→142、25→356、50→710，与反算 43/142/355/711 一致 |
+
+⇒ **三处画圆全都是地理锚定的、都随缩放正确变化，半径值也确实生效**，复现不出「大小不变」。
+
+「20 km 覆盖整个南宁」是**对的**——用他自己的数据验证：圆心 20 km 内落了他 477 个地点中的
+**45 个**，最远的是西乡塘的广西民族大学相思湖校区（14.5 km）与良庆的五象万象汇（10.2 km），
+也就是从相思湖一直盖到五象新区，正是南宁建成区的跨度（约 20~25 km）。
+20 km 半径 = 40 km 直径；只想圈市中心得用 5~8 km。
+
+### 找到一处真实缺口
+
+**后台编辑器的地图没有比例尺**（`L.control.scale`）：`scaleBar=0`（前台专题页 `=1`）。
+画圆时没有任何长度参照，很容易得出现「这个圆怎么这么大/怎么没变化」的判断 ——
+大概率就是这次困惑的来源。待办：给它加比例尺；圆列表里把半径的后果写出来（如「20 公里（约 40 公里宽）」）。
+
+### 排查时的两个自坑（记下来省时间）
+
+- 地图与迷雾 pane 在 `load` 之后还要等 `/api/map-config` 回来才初始化：`--wait 5` 会拍到
+  「pane 不存在」，`--wait 8` 才稳。别把「还没初始化」当成「功能没生效」。
+- `--eval-file` 里写 `(async function(){...})()` 却**不加 `--await`**，CDP 拿到的是 Promise，
+  `returnByValue` 序列化成 `{}` —— 看着像脚本没执行，其实是漏了参数。

internal/web/static/css/app.css

@@ -1166,6 +1166,8 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
 #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); }
+/* 半径旁边的「约 N 公里宽」：不许折行，否则圆列表每行高度会跳 */
+.area-span { white-space: nowrap; font-size: var(--fs-sm); }
 #area-hint.err { color: var(--err-fg); }
 #area-list { margin-top: 4px; }
 #area-list:empty { display: none; }

internal/web/static/js/topic-areas.js

@@ -86,6 +86,16 @@
     return km / (111.32 * c);
   }
 
+  // 半径的「人话版」跨度：半径 20 公里 ⇒「约 40 公里宽」。
+  // 光写「半径 20 公里」很容易被读小 —— 直径才是眼睛看到的那个宽度。
+  function spanLabel(radiusKm) {
+    var d = num(radiusKm) * 2;
+    if (!isFinite(d) || d <= 0) return '';
+    if (d < 1) return '约 ' + Math.round(d * 1000) + ' 米宽';
+    if (d < 10) return '约 ' + (Math.round(d * 10) / 10) + ' 公里宽';
+    return '约 ' + Math.round(d) + ' 公里宽';
+  }
+
   // 两点距离（公里），球面公式；拖把手时用它反推半径
   function kmBetween(a, b) {
     var dLat = (b[0] - a[0]) * Math.PI / 180, dLon = (b[1] - a[1]) * Math.PI / 180;
@@ -99,7 +109,8 @@
     MAX_AREAS: MAX_AREAS, MIN_KM: MIN_KM, MAX_KM: MAX_KM,
     normalize: normalize, validate: validate, serialize: serialize, parse: parse,
     add: add, remove: remove, setCenter: setCenter, setRadius: setRadius,
-    latDelta: latDelta, lonDelta: lonDelta, kmBetween: kmBetween
+    latDelta: latDelta, lonDelta: lonDelta, kmBetween: kmBetween,
+    spanLabel: spanLabel
   };
 
   // ---------- 以下需要 DOM 与 Leaflet ----------
@@ -126,6 +137,7 @@
     var listBox = document.getElementById(opts.listId || 'area-list');
     var hint = document.getElementById(opts.hintId || 'area-hint');
     var radiusIn = document.getElementById(opts.radiusId || 'area-new-km');
+    var newSpan = document.getElementById(opts.spanId || 'area-new-span');
     var saveBtn = form.querySelector('button[type=submit]');
     if (!hidden || !listBox) return;
 
@@ -149,6 +161,9 @@
       L.tileLayer(def.url, {
         subdomains: subs, maxZoom: def.maxZoom || 18, minZoom: 3, attribution: def.attr || ''
       }).addTo(map);
+      // 比例尺是必须的：没有它，圈圆时手上没有任何长度参照，只能靠地名猜，
+      // 「20 公里到底多大」就变成了拍脑袋（前台的地图一直有，这里以前漏了）。
+      L.control.scale({ imperial: false, position: 'bottomleft' }).addTo(map);
       if (crsIn) crsIn.value = def.crs || 'gcj02';
 
       var layer = L.layerGroup().addTo(map);
@@ -164,6 +179,11 @@
         if (!isFinite(v) || v < MIN_KM || v > MAX_KM) return 3;
         return v;
       }
+      // 「新圆半径」旁边实时显示它会画多大：落点之前就能判断合不合适
+      function syncNewSpan() {
+        if (newSpan) newSpan.textContent = spanLabel(newRadius());
+      }
+      if (radiusIn) radiusIn.addEventListener('input', syncNewSpan);
 
       // 整块重画：圆最多 20 个，重建比增量对齐简单得多，也不会漏掉「删了中间一个」的下标错位
       function redraw() {
@@ -222,6 +242,7 @@
         hidden.value = serialize(areas);
         redraw();
         renderList();
+        syncNewSpan();
         var msg = validate(areas);
         if (hint) {
           if (msg) {
@@ -289,6 +310,12 @@
           lab.appendChild(unit);
           row.appendChild(lab);
 
+          // 「半径 20 公里」旁边补一句直径 —— 眼睛量的是宽度，光看半径容易读小
+          var span = document.createElement('span');
+          span.className = 'muted area-span';
+          span.textContent = spanLabel(a.radiusKm);
+          row.appendChild(span);
+
           var go = document.createElement('button');
           go.type = 'button';
           go.className = 'btn sm';

internal/web/static/js/topic-areas.test.js

@@ -124,6 +124,22 @@ console.log('=== 几何换算 ===');
      '半径换算自洽：按 lonDelta 摆的把手量回来仍是 ' + km + ' 公里');
 })();
 
+console.log('=== 半径的「人话版」跨度（直径）===');
+(function () {
+  eq(api.spanLabel(20), '约 40 公里宽', '半径 20 → 约 40 公里宽');
+  eq(api.spanLabel(25), '约 50 公里宽', '半径 25 → 约 50 公里宽');
+  eq(api.spanLabel(3.5), '约 7 公里宽', '半径 3.5 → 约 7 公里宽');
+  eq(api.spanLabel(0.5), '约 1 公里宽', '半径 0.5 → 约 1 公里宽');
+  eq(api.spanLabel(2000), '约 4000 公里宽', '大半径不带小数');
+  // 小于 1 公里改用米，否则会写成「约 0.1 公里宽」这种别扭说法
+  eq(api.spanLabel(0.05), '约 100 米宽', '半径 0.05 → 约 100 米宽');
+  eq(api.spanLabel(0.3), '约 600 米宽', '半径 0.3 → 约 600 米宽');
+  ok(api.spanLabel(0) === '', '半径 0 → 空串（调用方直接不显示）');
+  ok(api.spanLabel(-1) === '', '负半径 → 空串');
+  ok(api.spanLabel(NaN) === '', 'NaN → 空串');
+  ok(api.spanLabel('abc') === '', '非数字 → 空串');
+})();
+
 console.log('\n=== 汇总 ===');
 console.log('  pass=' + pass + ' fail=' + fail);
 process.exit(fail === 0 ? 0 : 1);

internal/web/templates/admin/topics.html

@@ -40,6 +40,7 @@
           {{/* step 必须是 any：它是相对 min 递增的，min=0.05 + step=0.5 的合法值只有
                0.05/0.55/1.05…，用户填 3 或 3.5 会被浏览器判非法并弹原生提示。 */}}
           <input type="number" id="area-new-km" min="0.05" max="2000" step="any" value="3"></label>
+        <span class="muted area-span" id="area-new-span"></span>
         <button class="btn" type="button" id="area-clear">清除全部</button>
         <span class="muted" id="area-hint"></span>
       </div>
@@ -110,6 +111,7 @@
     window.rondTopicAreas.init({
       mapId: 'area-map', formId: 'topic-form', listId: 'area-list',
       hintId: 'area-hint', radiusId: 'area-new-km', clearId: 'area-clear',
+      spanId: 'area-new-span',
       home: {{if .MapHomeJSON}}{{.MapHomeJSON}}{{else}}null{{end}}
     });
   }

internal/web/topic_areas_test.go

@@ -572,3 +572,36 @@ func TestTopicAreaRadiusInputAllowsAnyStep(t *testing.T) {
 		t.Error("topic-areas.js 里半径输入框的 step 别写死数字（见 step 相对 min 递增那条）")
 	}
 }
+
+// 编辑器必须给出长度参照：地图上要有比例尺，半径旁边要标出「约多宽」。
+//
+// 起因：2026-10-13 用户反馈「这个圆无论怎么缩放大小都一样，20km 却覆盖了整个南宁」。
+// 实测三处画圆（编辑器 L.circle、改半径把手、前台迷雾裁剪）全都是地理锚定、随缩放正确
+// 变化的，半径值也确实生效 —— 真正缺的是**参照物**：编辑器地图以前没有比例尺
+// （前台专题页一直有），圈圆时只能靠地名猜，自然觉得「不对」。
+// 所以这条守卫钉的是「别再把这个参照物弄丢」。
+func TestTopicAreaEditorGivesSizeReference(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)
+	if !strings.Contains(src, "L.control.scale(") {
+		t.Error("topic-areas.js 必须给编辑器地图加比例尺（L.control.scale）—— " +
+			"没有它，圈圆时没有任何长度参照，「20 公里到底多大」只能拍脑袋")
+	}
+	if !strings.Contains(src, "spanLabel") {
+		t.Error("topic-areas.js 必须在半径旁标出跨度（spanLabel）")
+	}
+
+	b, err := tmplFS.ReadFile("templates/admin/topics.html")
+	if err != nil {
+		t.Fatalf("读取 admin/topics.html 失败: %v", err)
+	}
+	body := string(b)
+	for _, need := range []string{`id="area-new-span"`, "spanId"} {
+		if !strings.Contains(body, need) {
+			t.Errorf("admin/topics.html 里缺 %q —— 「新圆半径」旁边要显示它会有多宽", need)
+		}
+	}
+}