Split compare page HTML style PBF versions

STEP_RECORD.md

@@ -1104,25 +1104,26 @@ Style 语义专项里仍最重要的是：
 
 本轮继续增强了同一张 compare 页的版本可见性。
 
-当前页面除了 compare 版本号外，还会直接显示：
+当前页面不再只显示一个模糊的“总版本号”，而是拆成 3 个层级：
 
-- 当前 delivery style 版本
+- `HTML`
-- 当前 delivery pbf 版本
+- `Style`
+- `PBF`
 
 也就是页面顶部现在可见：
 
-- `版本: 20nm-r9-20260331-2210`
+- `HTML: compare-r10-20260331-2213`
 - `Style: ...`
 - `PBF: ...`
 
 当前规则：
 
 - 唐津模式显示：
-  - `Style: style.navsea-delivery-karatsu-10nm.json`
+  - `Style: karatsu-style-r7-20260331-2045 (style.navsea-delivery-karatsu-10nm.json)`
-  - `PBF: pbf-delivery-karatsu-20nm`
+  - `PBF: karatsu-pbf-20nm-20260325-1757 (pbf-delivery-karatsu-20nm)`
 - 九州模式显示：
-  - `Style: style.navsea-delivery-kyushu.json`
+  - `Style: kyushu-style-r1-20260331-2205 (style.navsea-delivery-kyushu.json)`
-  - `PBF: pbf-delivery-kyushu-reencoded`
+  - `PBF: kyushu-pbf-reencoded-20260325-1105 (pbf-delivery-kyushu-reencoded)`
 
 这样后续视觉确认时，不需要再猜“页面到底连的是哪套 style / pbf”。
 

src/pbf/navsea-compare-karatsu-20nm.html

@@ -263,7 +263,7 @@
           <option value="kyushu">九州</option>
         </select>
       </div>
-      <div id="version-chip" class="version-chip">版本: 加载中</div>
+      <div id="html-chip" class="version-chip">HTML: 加载中</div>
       <div id="style-chip" class="version-chip">Style: 加载中</div>
       <div id="pbf-chip" class="version-chip">PBF: 加载中</div>
       <button id="reload-btn" type="button">重新加载</button>
@@ -314,7 +314,7 @@
 
   <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
   <script>
-    const COMPARE_VERSION = "20nm-r9-20260331-2210";
+    const HTML_VERSION = "compare-r10-20260331-2213";
     const ORIGINAL_STYLE_URL = "./style.json";
     const ORIGINAL_TILE_URL = "http://192.168.200.184/newpec/exported_auto/tile.mapple-on.jp__newpec-mvt-20260106__z___x___y_.pbf/tiles/{z}/{x}/{y}.pbf";
     const PROFILES = {
@@ -325,8 +325,10 @@
         deliveryPaneLabel: "正式 delivery style + 唐津 20 海里 PBF",
         deliveryStyleUrl: "./domain/style.navsea-delivery-karatsu-10nm.json",
         deliveryTileUrl: "http://192.168.200.184/pbf-delivery-karatsu-20nm/{z}/{x}/{y}.pbf",
-        deliveryStyleVersion: "style.navsea-delivery-karatsu-10nm.json",
+        deliveryStyleVersion: "karatsu-style-r7-20260331-2045",
-        deliveryPbfVersion: "pbf-delivery-karatsu-20nm",
+        deliveryPbfVersion: "karatsu-pbf-20nm-20260325-1757",
+        deliveryStyleFile: "style.navsea-delivery-karatsu-10nm.json",
+        deliveryPbfName: "pbf-delivery-karatsu-20nm",
         initialView: {
           center: [129.9697, 33.4425],
           zoom: 11,
@@ -342,8 +344,10 @@
         deliveryPaneLabel: "正式 delivery style + 九州 PBF",
         deliveryStyleUrl: "./domain/style.navsea-delivery-kyushu.json",
         deliveryTileUrl: "http://192.168.200.184/pbf-delivery-kyushu-reencoded/{z}/{x}/{y}.pbf",
-        deliveryStyleVersion: "style.navsea-delivery-kyushu.json",
+        deliveryStyleVersion: "kyushu-style-r1-20260331-2205",
-        deliveryPbfVersion: "pbf-delivery-kyushu-reencoded",
+        deliveryPbfVersion: "kyushu-pbf-reencoded-20260325-1105",
+        deliveryStyleFile: "style.navsea-delivery-kyushu.json",
+        deliveryPbfName: "pbf-delivery-kyushu-reencoded",
         initialView: {
           center: [130.7, 32.2],
           zoom: 8,
@@ -362,7 +366,7 @@
     const pageTitleEl = document.getElementById("page-title");
     const pageSubtitleEl = document.getElementById("page-subtitle");
     const deliveryPaneLabelEl = document.getElementById("delivery-pane-label");
-    const versionChip = document.getElementById("version-chip");
+    const htmlChip = document.getElementById("html-chip");
     const styleChip = document.getElementById("style-chip");
     const pbfChip = document.getElementById("pbf-chip");
     const statusEl = document.getElementById("status");
@@ -378,10 +382,10 @@
     let originalMap;
     let deliveryMap;
     let syncLock = false;
-    let styleVersion = `${COMPARE_VERSION}-${Date.now()}`;
+    let styleVersion = `${HTML_VERSION}-${Date.now()}`;
     let currentProfileKey = PROFILES[requestedProfile] ? requestedProfile : "karatsu20";
 
-    versionChip.textContent = `版本: ${COMPARE_VERSION}`;
+    htmlChip.textContent = `HTML: ${HTML_VERSION}`;
     profileSelect.value = currentProfileKey;
 
     function getCurrentProfile() {
@@ -394,8 +398,8 @@
       pageSubtitleEl.innerHTML = profile.subtitle;
       deliveryPaneLabelEl.textContent = profile.deliveryPaneLabel;
       homeBtn.textContent = profile.homeLabel;
-      styleChip.textContent = `Style: ${profile.deliveryStyleVersion}`;
+      styleChip.textContent = `Style: ${profile.deliveryStyleVersion} (${profile.deliveryStyleFile})`;
-      pbfChip.textContent = `PBF: ${profile.deliveryPbfVersion}`;
+      pbfChip.textContent = `PBF: ${profile.deliveryPbfVersion} (${profile.deliveryPbfName})`;
       document.title = `NavSea Compare · ${profile.label}`;
     }
 
@@ -500,11 +504,11 @@
 
     async function loadMaps() {
       const profile = getCurrentProfile();
-      styleVersion = `${COMPARE_VERSION}-${Date.now()}`;
+      styleVersion = `${HTML_VERSION}-${Date.now()}`;
       reloadBtn.disabled = true;
       homeBtn.disabled = true;
       profileSelect.disabled = true;
-      setStatus(`正在加载${profile.label}的原始版和 delivery 版样式… 当前版本 ${COMPARE_VERSION}`);
+      setStatus(`正在加载${profile.label}的原始版和 delivery 版样式… HTML ${HTML_VERSION}`);
 
       try {
         const [originalStyleRaw, deliveryStyleRaw] = await Promise.all([
@@ -543,7 +547,7 @@
           function markLoaded() {
             loaded += 1;
             if (loaded >= 2) {
-              setStatus(`${profile.label}双屏已加载，可直接拖动、缩放、点击对比。当前版本 ${COMPARE_VERSION}`);
+              setStatus(`${profile.label}双屏已加载，可直接拖动、缩放、点击对比。HTML ${HTML_VERSION}`);
             }
           }
           originalMap.on("load", markLoaded);
@@ -556,7 +560,7 @@
             if (loaded >= 2) {
               originalMap.jumpTo(camera);
               deliveryMap.jumpTo(camera);
-              setStatus(`${profile.label}双屏样式已重新加载。当前版本 ${COMPARE_VERSION}`);
+              setStatus(`${profile.label}双屏样式已重新加载。HTML ${HTML_VERSION}`);
             }
           }
           originalMap.once("style.load", markLoaded);