From 46f8a17157dfcb1e3564fc032ec3635ea45c6095 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 12 Jul 2026 10:04:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E4=BC=98=E5=8C=96=E8=BD=A6?=
 =?UTF-8?q?=E7=AB=99=E5=90=8D=E4=B8=8E=E7=BA=BF=E8=B7=AF=E5=90=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=BD=A6=E7=AB=99=E7=BC=96?=
 =?UTF-8?q?=E5=8F=B7=E4=B8=8E=E8=8B=B1=E6=96=87=E5=90=8D=E7=A7=B0?=
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           | 83 ++++++++++++++++++++++++++++-------
 4 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/web/.asset-version-state.json b/web/.asset-version-state.json
index 37cbb53..4981276 100644
--- a/web/.asset-version-state.json
+++ b/web/.asset-version-state.json
@@ -16,8 +16,8 @@
     "mtimeMs": 1783602619602.658
   },
   "ticket-order.js": {
-    "size": 37477,
-    "mtimeMs": 1783820973442.9248
+    "size": 40778,
+    "mtimeMs": 1783821841376.1682
   },
   "ticket-search.js": {
     "size": 17269,
diff --git a/web/asset-versions.json b/web/asset-versions.json
index 764cce1..c5a93c9 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": 25,
+  "ticket-order.js": 26,
   "ticket-search.js": 12,
   "ticket-route.js": 3,
   "index.js": 5,
diff --git a/web/ticket-order.html b/web/ticket-order.html
index ad508cb..f590be5 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=25"></script>
+  <script src="/ticket-order.js?v=26"></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 c0a8d92..f9722bb 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -215,7 +215,7 @@
               for (const c of stops) {
                   if (c === '-') {
                       if (currentSegment.length > 0) {
-                          lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', color, stops: currentSegment });
+                          lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', enName: line.en_name || line.英文名称 || line.英文名 || '', color, stops: currentSegment });
                           lineColors.push(color);
                           for (const stopCode of currentSegment) {
                               const arr = linesByStation.get(stopCode) || [];
@@ -233,7 +233,7 @@
                   }
               }
               if (currentSegment.length > 0) {
-                  lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', color, stops: currentSegment });
+                  lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', enName: line.en_name || line.英文名称 || line.英文名 || '', color, stops: currentSegment });
                   lineColors.push(color);
                   for (const stopCode of currentSegment) {
                       const arr = linesByStation.get(stopCode) || [];
@@ -332,13 +332,15 @@
           }
 
           const labelPlacements = {};
-          const placeLabel = (x, y, isStart, name, color) => {
+          const placeLabel = (x, y, isStart, name, enName, color) => {
               const key = `${x},${y},${isStart ? 'left' : 'right'}`;
               const count = labelPlacements[key] || 0;
               labelPlacements[key] = count + 1;
               
-              const nameLen = name.length * 13 + 16;
-              const yOffset = count * 30 - 12; // stack vertically, center on point initially
+              const hasEn = !!enName;
+              const nameLen = Math.max(name.length * 13 + 16, hasEn ? enName.length * 6.5 + 16 : 0);
+              const h = hasEn ? 36 : 24;
+              const yOffset = count * 42 - (h / 2);
               
               let lx, textX;
               if (isStart) {
@@ -349,8 +351,14 @@
                   textX = lx + nameLen / 2;
               }
               
-              return `<rect x="${lx}" y="${y + yOffset}" width="${nameLen}" height="24" rx="12" fill="${color}" />` +
-                     `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">${name}</text>`;
+              let svg = `<rect x="${lx}" y="${y + yOffset}" width="${nameLen}" height="${h}" rx="6" fill="${color}" />`;
+              if (hasEn) {
+                  svg += `<text x="${textX}" y="${y + yOffset + 15}" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">${name}</text>`;
+                  svg += `<text x="${textX}" y="${y + yOffset + 28}" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-size="9" font-weight="600">${enName}</text>`;
+              } else {
+                  svg += `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">${name}</text>`;
+              }
+              return svg;
           };
 
           let svgContent = '';
@@ -371,8 +379,8 @@
                   // Add line name labels at ends
                   const pStart = pts[0];
                   const pEnd = pts[pts.length - 1];
-                  svgContent += placeLabel(pStart.x, pStart.y, true, li.name, li.color);
-                  svgContent += placeLabel(pEnd.x, pEnd.y, false, li.name, li.color);
+                  svgContent += placeLabel(pStart.x, pStart.y, true, li.name, li.enName, li.color);
+                  svgContent += placeLabel(pEnd.x, pEnd.y, false, li.name, li.enName, li.color);
               }
           }
 
@@ -389,6 +397,9 @@
               const isTransfer = uniqueColors.length >= 2 || codes.length >= 2;
               const name = getStationDisplayName(primaryCode);
 
+              const enName = stationEnByCode[primaryCode] || '';
+              const showEn = !!enName;
+              
               let markerSvg = '';
               if (isTransfer) {
                   markerSvg += `<circle cx="${x}" cy="${y}" r="15" fill="#ffffff" stroke="#1f2937" stroke-width="2.5" />`;
@@ -401,16 +412,56 @@
               }
 
               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 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>`;
+              let textContent = '';
+              
+              const codeFontSize = 9;
+              const nameFontSize = 13;
+              const enFontSize = 8.5;
+              
+              const codeW = primaryCode.length * 6 + 10;
+              
+              if (preferTop) {
+                  const bottomY = y - 14;
+                  const enY = bottomY;
+                  const nameY = showEn ? bottomY - 12 : bottomY;
+                  const codeY = nameY - 16;
+                  
+                  if (isTransfer) {
+                      const labelW = Math.max(72, name.length * 14 + 18, codeW + 16, showEn ? enName.length * 5.5 + 16 : 0);
+                      const labelH = showEn ? 46 : 34;
+                      const rectY = codeY - 10;
+                      labelSvg += `<rect x="${x - labelW / 2}" y="${rectY}" width="${labelW}" height="${labelH}" rx="6" fill="rgba(255,255,255,0.95)" stroke="#cbd5e1" stroke-width="1.5" />`;
+                  }
+                  
+                  textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="3" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />`;
+                  textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#475569" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
+                  textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#334155" font-size="${nameFontSize}" font-weight="${isTransfer ? 800 : 700}">${name}</text>`;
+                  if (showEn) {
+                      textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#94a3b8" font-size="${enFontSize}" font-weight="600">${enName}</text>`;
+                  }
               } else {
-                  labelSvg += `<text class="${labelClass}" x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13.5" font-weight="700">${name}</text>`;
+                  const topY = y + 24;
+                  const codeY = topY;
+                  const nameY = topY + 16;
+                  const enY = nameY + 12;
+                  
+                  if (isTransfer) {
+                      const labelW = Math.max(72, name.length * 14 + 18, codeW + 16, showEn ? enName.length * 5.5 + 16 : 0);
+                      const labelH = showEn ? 46 : 34;
+                      const rectY = codeY - 10;
+                      labelSvg += `<rect x="${x - labelW / 2}" y="${rectY}" width="${labelW}" height="${labelH}" rx="6" fill="rgba(255,255,255,0.95)" stroke="#cbd5e1" stroke-width="1.5" />`;
+                  }
+                  
+                  textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="3" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />`;
+                  textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#475569" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
+                  textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#334155" font-size="${nameFontSize}" font-weight="${isTransfer ? 800 : 700}">${name}</text>`;
+                  if (showEn) {
+                      textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#94a3b8" font-size="${enFontSize}" font-weight="600">${enName}</text>`;
+                  }
               }
+              labelSvg += textContent;
 
               svgContent += `
                 <g class="map-station ${isTransfer ? 'transfer' : ''}" data-code="${primaryCode}" data-canonical="${canonical}" onclick="handleStationClick('${primaryCode}')" style="cursor:pointer">