From a651fac095f28a886e61e09fcc9caf8b8d11f57b Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 12 Jul 2026 08:35:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E5=B0=86=E6=8D=A2=E4=B9=98?=
 =?UTF-8?q?=E7=AB=99=E5=90=88=E5=B9=B6=E4=B8=BA=E5=8D=95=E7=82=B9=E5=B9=B6?=
 =?UTF-8?q?=E9=87=8D=E7=BB=98=E8=AE=A2=E7=A5=A8=E7=BA=BF=E8=B7=AF=E5=9B=BE?=
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           | 98 ++++++++++++++---------------------
 4 files changed, 42 insertions(+), 64 deletions(-)

diff --git a/web/.asset-version-state.json b/web/.asset-version-state.json
index f3f8e59..233c452 100644
--- a/web/.asset-version-state.json
+++ b/web/.asset-version-state.json
@@ -16,8 +16,8 @@
     "mtimeMs": 1783602619602.658
   },
   "ticket-order.js": {
-    "size": 34258,
-    "mtimeMs": 1783784148462.1907
+    "size": 33737,
+    "mtimeMs": 1783816412239.149
   },
   "ticket-search.js": {
     "size": 17269,
diff --git a/web/asset-versions.json b/web/asset-versions.json
index 51d19d0..b8ae2ec 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": 22,
+  "ticket-order.js": 23,
   "ticket-search.js": 12,
   "ticket-route.js": 3,
   "index.js": 5,
diff --git a/web/ticket-order.html b/web/ticket-order.html
index 2a6fabe..70feeed 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=22"></script>
+  <script src="/ticket-order.js?v=23"></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 87e59a0..84b588e 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -236,20 +236,20 @@
               }
           }
 
-          const primaryLineByStation = {};
-          for (const [c, arr] of linesByStation.entries()) {
-              const uniq = Array.from(new Set(arr)).sort((a,b)=>a-b);
-              if (uniq.length === 0) continue;
-              primaryLineByStation[c] = uniq[0];
+          const hubYByCanonical = {};
+          for (const canonical of Object.keys(lineIdxsByCanonical)) {
+              const idxs = Array.from(lineIdxsByCanonical[canonical] || []).sort((a, b) => a - b);
+              if (!idxs.length) continue;
+              const ys = idxs.map(idx => baseY + idx * lineGapY);
+              hubYByCanonical[canonical] = ys.reduce((sum, y) => sum + y, 0) / ys.length;
           }
 
           stationYByCanonical = {};
           for (const li of lineStops) {
               const yNode = baseY + li.idx * lineGapY;
               for (const c of li.stops) {
-                  if (stationYByCanonical[c] == null) {
-                      stationYByCanonical[c] = yNode;
-                  }
+                  const canonical = stationCanonicalByCode[c] || c;
+                  stationYByCanonical[c] = hubYByCanonical[canonical] ?? yNode;
               }
           }
 
@@ -270,7 +270,7 @@
                       const canonical = stationCanonicalByCode[code] || code;
                       return {
                           x: stationXByCanonical[canonical] || 0,
-                          y: yLine
+                          y: stationYByCanonical[code] ?? yLine
                       };
                   });
                   
@@ -282,68 +282,46 @@
               }
           }
 
-          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 sortedStations = Object.keys(stationXByCanonical).sort((a, b) => stationXByCanonical[a] - stationXByCanonical[b]);
+          for (let i = 0; i < sortedStations.length; i++) {
+              const canonical = sortedStations[i];
               const x = stationXByCanonical[canonical];
-              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;
+              const codes = stationCodesByCanonical[canonical] || [canonical];
+              const lineIdxs = Array.from(lineIdxsByCanonical[canonical] || []).sort((a, b) => a - b);
+              const colors = lineIdxs.map(idx => lineColors[idx]).filter(Boolean);
+              const uniqueColors = Array.from(new Set(colors));
+              const primaryCode = codes[0];
+              const y = hubYByCanonical[canonical] ?? stationYByCanonical[primaryCode] ?? baseY;
+              const isTransfer = uniqueColors.length >= 2 || codes.length >= 2;
+              const name = getStationDisplayName(primaryCode);
 
-              // Vertical pill
-              if (maxY > minY) {
-                  svgContent += `<rect x="${x - 6}" y="${minY + 12}" width="12" height="${Math.max(0, maxY - minY - 24)}" rx="6" fill="#f8fafc" stroke="#94a3b8" stroke-width="2" />`;
+              let markerSvg = '';
+              if (isTransfer) {
+                  markerSvg += `<circle cx="${x}" cy="${y}" r="15" fill="#ffffff" stroke="#1f2937" stroke-width="2.5" />`;
+                  markerSvg += pieSvg(x, y, 11.5, uniqueColors);
+                  markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="6.5" fill="#ffffff" stroke="#334155" stroke-width="2.25" />`;
+              } else {
+                  const color = uniqueColors[0] || '#93a2b7';
+                  markerSvg += `<circle cx="${x}" cy="${y}" r="12.5" fill="#ffffff" stroke="${color}" stroke-width="5" />`;
+                  markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="#334155" stroke-width="2.25" />`;
               }
 
-              const primaryCode = nodes[0].code;
-              const name = stationNameByCode[primaryCode] || primaryCode;
-
-              // 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="#475569" stroke-width="2.5" />` : '';
-                  nodesSvg += `
-                      ${outer}
-                      ${transferFill}
-                      <circle class="node-core" cx="${x}" cy="${node.y}" r="8" fill="#ffffff" stroke="#334155" stroke-width="2.5" />
-                  `;
-              }
-
-              // Label
+              const preferTop = isTransfer || (i % 2 === 0 && y > baseY + 20);
+              const labelY = preferTop ? (y - 22) : (y + 30);
+              const labelClass = preferTop ? 'station-label-top' : 'station-label-bottom';
               let labelSvg = '';
               if (isTransfer) {
-                  const labelY = minY - 34; // above the top node
-                  const transferName = getStationDisplayName(canonical);
-                  const transferLabelW = Math.max(72, transferName.length * 14 + 18);
-                  labelSvg += `<rect x="${x - transferLabelW / 2}" y="${labelY - 16}" width="${transferLabelW}" height="24" rx="12" fill="rgba(248,250,252,0.96)" stroke="#cbd5e1" stroke-width="1.5" />`;
-                  labelSvg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${transferName}</text>`;
+                  const labelW = Math.max(72, name.length * 14 + 18);
+                  labelSvg += `<rect x="${x - labelW / 2}" y="${labelY - 16}" width="${labelW}" height="24" rx="12" fill="rgba(248,250,252,0.96)" stroke="#cbd5e1" stroke-width="1.5" />`;
+                  labelSvg += `<text class="${labelClass}" x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${name}</text>`;
               } else {
-                  const labelY = (nodes[0].y === baseY || nodes[0].y <= baseY + lineGapY) ? maxY + 28 : maxY + 30;
-                  labelSvg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="14" font-weight="700">${name}</text>`;
+                  labelSvg += `<text class="${labelClass}" x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13.5" font-weight="700">${name}</text>`;
               }
 
-              const hitY = (minY + maxY) / 2;
-              const hitHeight = Math.max(30, maxY - minY + 30);
-              
               svgContent += `
                 <g class="map-station ${isTransfer ? 'transfer' : ''}" data-code="${primaryCode}" data-canonical="${canonical}" onclick="handleStationClick('${primaryCode}')" style="cursor:pointer">
-                    <rect x="${x - 20}" y="${hitY - hitHeight/2}" width="40" height="${hitHeight}" fill="transparent" />
-                    ${nodesSvg}
+                    <rect x="${x - 20}" y="${y - 20}" width="40" height="40" fill="transparent" />
+                    ${markerSvg}
                     ${labelSvg}
                 </g>
               `;