From d6f37d14156fec320ba56698e92da13ff830a3cd Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sat, 11 Jul 2026 23:15:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E9=87=8D=E6=9E=84=E7=BA=BF?=
 =?UTF-8?q?=E8=B7=AF=E5=9B=BE=E6=B8=B2=E6=9F=93=E7=AE=97=E6=B3=95=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=B9=B3=E8=A1=8C=E6=B0=B4=E5=B9=B3=E8=B5=B0?=
 =?UTF-8?q?=E7=BA=BF=E4=B8=8E=E8=83=B6=E5=9B=8A=E5=BC=8F=E5=9E=82=E7=9B=B4?=
 =?UTF-8?q?=E6=8D=A2=E4=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.asset-version-state.json |   4 +-
 web/asset-versions.json       |   2 +-
 web/ticket-order.html         |   2 +-
 web/ticket-order.js           | 131 +++++++++++++++-------------------
 4 files changed, 63 insertions(+), 76 deletions(-)

diff --git a/web/.asset-version-state.json b/web/.asset-version-state.json
index a4eb0d4..31aa1fc 100644
--- a/web/.asset-version-state.json
+++ b/web/.asset-version-state.json
@@ -16,8 +16,8 @@
     "mtimeMs": 1783602619602.658
   },
   "ticket-order.js": {
-    "size": 33248,
-    "mtimeMs": 1783780167713.1963
+    "size": 32045,
+    "mtimeMs": 1783782910999.121
   },
   "ticket-search.js": {
     "size": 17269,
diff --git a/web/asset-versions.json b/web/asset-versions.json
index aace99c..4fb1f31 100644
--- a/web/asset-versions.json
+++ b/web/asset-versions.json
@@ -3,7 +3,7 @@
   "blog.css": 2,
   "custom-dialog.js": 11,
   "public-status.js": 14,
-  "ticket-order.js": 19,
+  "ticket-order.js": 20,
   "ticket-search.js": 12,
   "ticket-route.js": 3,
   "index.js": 5,
diff --git a/web/ticket-order.html b/web/ticket-order.html
index 84c9efb..c6340fb 100644
--- a/web/ticket-order.html
+++ b/web/ticket-order.html
@@ -158,7 +158,7 @@
   </div>
 
   <script src="/custom-dialog.js?v=11"></script>
-  <script src="/ticket-order.js?v=19"></script>
+  <script src="/ticket-order.js?v=20"></script>
   <script src="/public-status.js?v=14"></script>
   <script>
     document.addEventListener('DOMContentLoaded', () => {
diff --git a/web/ticket-order.js b/web/ticket-order.js
index 25759c6..9991178 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -221,39 +221,13 @@
           }
 
           stationYByCanonical = {};
-          const ysByCanonical = {};
-          for (const c of Object.keys(primaryLineByStation)) {
-              const li = primaryLineByStation[c];
-              if (li == null) continue;
-              const canonical = stationCanonicalByCode[c] || c;
-              if (!ysByCanonical[canonical]) ysByCanonical[canonical] = [];
-              ysByCanonical[canonical].push(baseY + li * lineGapY);
-          }
-          
-          const canonicalY = {};
-          for (const canonical of Object.keys(ysByCanonical)) {
-              const ys = ysByCanonical[canonical];
-              canonicalY[canonical] = ys.reduce((a,b) => a+b, 0) / ys.length;
-          }
-
-          for (const c of Object.keys(primaryLineByStation)) {
-              const canonical = stationCanonicalByCode[c] || c;
-              stationYByCanonical[c] = canonicalY[canonical];
-          }
-
-          const allStations = Object.keys(primaryLineByStation);
-          if (allStations.length === 0) {
-              mapContainer.innerHTML = '<div class="empty-state jr-empty-state"><p>线路数据为空，请稍后再试。</p></div>';
-              return;
-          }
-          const labelShownForCanonical = new Set();
-          const transferColorsByStation = {};
-          const primaryColorByStation = {};
-          for (const c of allStations) {
-              const lineIdxs = Array.from(new Set(linesByStation.get(c) || [])).sort((a,b)=>a-b);
-              const colors = lineIdxs.map(i => lineColors[i]).filter(Boolean);
-              transferColorsByStation[c] = Array.from(new Set(colors));
-              primaryColorByStation[c] = colors[0] || '#93a2b7';
+          for (const li of lineStops) {
+              const yNode = baseY + li.idx * lineGapY;
+              for (const c of li.stops) {
+                  if (stationYByCanonical[c] == null) {
+                      stationYByCanonical[c] = yNode;
+                  }
+              }
           }
 
           let svgContent = '';
@@ -273,7 +247,7 @@
                       const canonical = stationCanonicalByCode[code] || code;
                       return {
                           x: stationXByCanonical[canonical] || 0,
-                          y: stationYByCanonical[code] ?? yLine
+                          y: yLine
                       };
                   });
                   
@@ -285,54 +259,67 @@
               }
           }
 
-          for (const canonical of Object.keys(stationCodesByCanonical)) {
-              const codes = (stationCodesByCanonical[canonical] || []).filter(code => Number.isFinite(stationYByCanonical[code]));
-              if (codes.length < 2) continue;
+          const canonicalYs = {};
+          for (const li of lineStops) {
+              const yNode = baseY + li.idx * lineGapY;
+              for (const c of li.stops) {
+                  const canonical = stationCanonicalByCode[c] || c;
+                  if (!canonicalYs[canonical]) canonicalYs[canonical] = [];
+                  // Only add if we haven't added this Y for this canonical yet
+                  if (!canonicalYs[canonical].some(n => n.y === yNode)) {
+                      canonicalYs[canonical].push({ y: yNode, color: li.color, code: c });
+                  }
+              }
+          }
+
+          for (const canonical of Object.keys(canonicalYs)) {
               const x = stationXByCanonical[canonical];
-              
-              const ys = codes.map(c => stationYByCanonical[c]);
+              const nodes = canonicalYs[canonical];
+              const ys = nodes.map(n => n.y);
               const minY = Math.min(...ys);
               const maxY = Math.max(...ys);
+              const isTransfer = nodes.length >= 2 || stationCodesByCanonical[canonical]?.length >= 2;
 
-              // Draw vertical pill connecting the transfer stations
+              // Vertical pill
               if (maxY > minY) {
                   svgContent += `<rect x="${x - 8}" y="${minY}" width="16" height="${maxY - minY}" rx="8" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
               }
 
-              const y = minY;
-              const labelY = y - 34;
-              // Remove the standalone circle for the transfer hub, just rely on the nodes themselves and the vertical pill
-              // svgContent += `<circle cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
-              svgContent += `<rect x="${x - 42}" y="${labelY - 16}" width="84" height="24" rx="12" fill="rgba(241,245,249,0.92)" stroke="#cbd5e1" stroke-width="1.5" />`;
-              svgContent += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${getStationDisplayName(canonical)}</text>`;
-              labelShownForCanonical.add(canonical);
-          }
+              const primaryCode = nodes[0].code;
+              const name = stationNameByCode[primaryCode] || primaryCode;
 
-          for (const c of allStations) {
-              const canonical = stationCanonicalByCode[c] || c;
-              const x = stationXByCanonical[canonical];
-              const yNode = stationYByCanonical[c] ?? baseY;
-              const name = stationNameByCode[c] || c;
-              const isTransfer = stationTransfer.has(c);
-              const cls = isTransfer ? 'map-station transfer' : 'map-station';
-              const ringSvg = '';
-              const primaryColor = primaryColorByStation[c] || '#93a2b7';
-              const outer = isTransfer
-                ? `<circle cx="${x}" cy="${yNode}" r="13" fill="#ffffff" stroke="${primaryColor}" stroke-width="5" />`
-                : `<circle cx="${x}" cy="${yNode}" r="12" fill="#ffffff" stroke="${primaryColor}" stroke-width="5" />`;
-              const transferFill = isTransfer ? `<circle cx="${x}" cy="${yNode}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />` : '';
-              const coreFill = isTransfer ? '#ffffff' : '#ffffff';
-              const showLabel = !isTransfer || !labelShownForCanonical.has(canonical);
-              const textSvg = showLabel
-                ? `<text x="${x}" y="${yNode+28}" text-anchor="middle" fill="#e5e7eb" font-size="14" font-weight="700">${name}</text>`
-                : '';
+              // Nodes
+              let nodesSvg = '';
+              for (const node of nodes) {
+                  const rOuter = isTransfer ? 13 : 12;
+                  const outer = `<circle cx="${x}" cy="${node.y}" r="${rOuter}" fill="#ffffff" stroke="${node.color}" stroke-width="5" />`;
+                  const transferFill = isTransfer ? `<circle cx="${x}" cy="${node.y}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />` : '';
+                  nodesSvg += `
+                      ${outer}
+                      ${transferFill}
+                      <circle class="node-core" cx="${x}" cy="${node.y}" r="8" fill="#ffffff" stroke="#111827" stroke-width="3" />
+                  `;
+              }
+
+              // Label
+              let labelSvg = '';
+              if (isTransfer) {
+                  const labelY = minY - 34; // above the top node
+                  labelSvg += `<rect x="${x - 42}" y="${labelY - 16}" width="84" height="24" rx="12" fill="rgba(241,245,249,0.92)" stroke="#cbd5e1" stroke-width="1.5" />`;
+                  labelSvg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${getStationDisplayName(canonical)}</text>`;
+              } else {
+                  const labelY = maxY + 28; // below the single node
+                  labelSvg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#e5e7eb" font-size="14" font-weight="700">${name}</text>`;
+              }
+
+              const hitY = (minY + maxY) / 2;
+              const hitHeight = Math.max(30, maxY - minY + 30);
+              
               svgContent += `
-                <g class="${cls}" data-code="${c}" onclick="handleStationClick('${c}')" style="cursor:pointer">
-                    ${ringSvg}
-                    ${outer}
-                    ${transferFill}
-                    <circle class="node-core" cx="${x}" cy="${yNode}" r="8" fill="${coreFill}" stroke="#111827" stroke-width="3" />
-                    ${textSvg}
+                <g class="map-station ${isTransfer ? 'transfer' : ''}" data-code="${primaryCode}" onclick="handleStationClick('${primaryCode}')" style="cursor:pointer">
+                    <rect x="${x - 20}" y="${hitY - hitHeight/2}" width="40" height="${hitHeight}" fill="transparent" />
+                    ${nodesSvg}
+                    ${labelSvg}
                 </g>
               `;
           }