From 63d710114d35738a6a6fd6086b02e6b5dc594d1f Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Tue, 14 Jul 2026 01:17:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(ticket-order):=20=E5=B0=86=20TVM=20UI=20?=
 =?UTF-8?q?=E7=9A=84=E7=BD=91=E6=A0=BC=E7=AB=99=E7=82=B9=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E4=B8=8E=E5=90=8E=E5=8F=B0=E4=B8=80=E8=87=B4=E7=9A=84=E5=8D=95?=
 =?UTF-8?q?=E7=BA=BF=E5=9C=B0=E9=93=81=E5=9B=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/ticket-order.js | 111 ++++++++++++++++++++++++++------------------
 1 file changed, 65 insertions(+), 46 deletions(-)

diff --git a/web/ticket-order.js b/web/ticket-order.js
index a6e765b..46973c8 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -144,8 +144,13 @@
       const stopsRaw = Array.isArray(activeLine.stops) ? activeLine.stops : (Array.isArray(activeLine.站点列表) ? activeLine.站点列表 : []);
       const stops = stopsRaw.map(c => String(c || '').trim()).filter(Boolean);
       
-      let stationsHtml = `<div class="tvm-stations-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 20px; background: var(--bg-color, #ffffff); border-radius: 0 0 12px 12px; max-height: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch;">`;
+      let stationsHtml = `<div class="tvm-stations-line-container" style="overflow-x: auto; padding: 40px 20px 20px 20px; background: var(--bg-color, #ffffff); border-radius: 0 0 12px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;">`;
       
+      stationsHtml += `<div style="display: flex; position: relative; min-width: max-content; align-items: flex-start;">`;
+      
+      // The track line background
+      stationsHtml += `<div style="position: absolute; top: 14px; left: 35px; right: 35px; height: 8px; background-color: ${activeLine.color || '#94a3b8'}; border-radius: 4px; z-index: 1;"></div>`;
+
       let hasStations = false;
       stops.forEach(code => {
           if (code === '-') return; // Skip breakpoints in this view
@@ -156,7 +161,7 @@
           
           const isSelectedFrom = selection[0] === code;
           const isSelectedTo = selection[1] === code;
-          const isSelected = isSelectedFrom || isSelectedTo;
+          const inRoute = Array.isArray(currentRoute) && currentRoute.includes(code);
           
           // Check transfers
           const canonical = stationCanonicalByCode[code] || code;
@@ -170,66 +175,80 @@
           });
           
           const transferLines = Array.from(linesForThisStation).filter(l => String(l.id) !== String(activeLineId));
+          const isTransfer = transferLines.length > 0;
+
+          let nodeColor = activeLine.color || '#94a3b8';
+          let nodeSize = isTransfer ? '20px' : '14px';
+          let nodeBorder = isTransfer ? '4px' : '3px';
+          let badgeHtml = '';
           
-          let transferIcons = '';
-          if (transferLines.length > 0) {
-              transferIcons = `<div style="display: flex; gap: 4px; margin-top: 6px;">`;
-              transferLines.slice(0, 3).forEach(l => {
-                  transferIcons += `<div title="可换乘 ${l.name}" style="width: 14px; height: 14px; border-radius: 3px; background: ${l.color || '#999'};"></div>`;
-              });
-              transferIcons += `</div>`;
+          if (isSelectedFrom) {
+              nodeColor = 'var(--success, #16a34a)';
+              nodeSize = '24px';
+              badgeHtml = `<div style="position: absolute; top: -32px; background: var(--success, #16a34a); color: white; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: bold; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10;">起点</div>`;
+          } else if (isSelectedTo) {
+              nodeColor = 'var(--danger, #dc2626)';
+              nodeSize = '24px';
+              badgeHtml = `<div style="position: absolute; top: -32px; background: var(--danger, #dc2626); color: white; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: bold; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10;">终点</div>`;
+          } else if (inRoute) {
+              nodeColor = 'var(--primary, #facc15)';
+              if (!isTransfer) nodeSize = '18px';
+              else nodeSize = '24px';
           }
 
-          let badgeHtml = '';
-          let borderColor = 'var(--border-color, #e2e8f0)';
-          let bgColor = 'var(--surface-color, #f8fafc)';
-          let shadow = 'none';
-
-          if (isSelectedFrom) {
-              badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: var(--success, #16a34a); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid var(--bg-color, #fff); z-index: 10;">起点</div>`;
-              borderColor = 'var(--success, #16a34a)';
-              bgColor = '#f0fdf4';
-              shadow = '0 4px 6px rgba(0,0,0,0.1)';
-          } else if (isSelectedTo) {
-              badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: var(--danger, #dc2626); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid var(--bg-color, #fff); z-index: 10;">终点</div>`;
-              borderColor = 'var(--danger, #dc2626)';
-              bgColor = '#fef2f2';
-              shadow = '0 4px 6px rgba(0,0,0,0.1)';
-          } else if (Array.isArray(currentRoute) && currentRoute.includes(code)) {
-              borderColor = 'var(--primary, #facc15)';
-              bgColor = '#fefce8';
-              if (Array.isArray(currentRouteTransfers) && currentRouteTransfers.includes(code)) {
-                  badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: var(--warning, #ca8a04); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid var(--bg-color, #fff); z-index: 10;">换乘</div>`;
-              }
+          let transferDotsHtml = '';
+          if (isTransfer) {
+              transferDotsHtml = `<div style="display: flex; gap: 3px; position: absolute; top: -14px;">`;
+              transferLines.slice(0, 3).forEach(l => {
+                  transferDotsHtml += `<div title="可换乘 ${l.name}" style="width: 8px; height: 8px; border-radius: 50%; background: ${l.color || '#999'}; border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2);"></div>`;
+              });
+              transferDotsHtml += `</div>`;
           }
 
           stationsHtml += `
-            <div class="tvm-station-card" onclick="window.handleStationClick('${code}')" style="
+            <div class="tvm-station-node" onclick="window.handleStationClick('${code}')" style="
                 position: relative;
-                padding: 12px;
-                border-radius: 8px;
-                border: 2px solid ${borderColor};
-                background: ${bgColor};
-                cursor: pointer;
-                transition: all 0.2s ease;
+                z-index: 2;
                 display: flex;
                 flex-direction: column;
-                box-shadow: ${shadow};
-            " onmouseover="this.style.borderColor='var(--primary, #facc15)'" onmouseout="this.style.borderColor='${borderColor}'">
-                ${badgeHtml}
-                <div style="font-size: 11px; color: var(--text-muted, #64748b); font-weight: 700; margin-bottom: 4px;">${code}</div>
-                <div style="font-size: 16px; font-weight: 800; color: var(--text-color, #0f172a);">${name}</div>
-                ${enName ? `<div style="font-size: 10px; color: var(--text-muted, #64748b); font-weight: 600; margin-top: 2px;">${enName}</div>` : ''}
-                ${transferIcons}
+                align-items: center;
+                width: 70px;
+                flex-shrink: 0;
+                cursor: pointer;
+                transition: transform 0.2s ease;
+            " onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
+                
+                <!-- Fixed height container for vertical alignment of the track nodes -->
+                <div style="height: 36px; display: flex; align-items: center; justify-content: center; position: relative; width: 100%;">
+                    ${badgeHtml}
+                    ${transferDotsHtml}
+                    <div style="
+                        width: ${nodeSize};
+                        height: ${nodeSize};
+                        border-radius: 50%;
+                        background: #fff;
+                        border: ${nodeBorder} solid ${nodeColor};
+                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                        z-index: 2;
+                        transition: all 0.2s;
+                    "></div>
+                </div>
+                
+                <!-- Labels -->
+                <div style="text-align: center; margin-top: 8px; width: 100%; display: flex; flex-direction: column; align-items: center;">
+                    <div style="font-size: 10px; color: var(--text-muted, #64748b); font-weight: 700; margin-bottom: 2px;">${code}</div>
+                    <div style="font-size: 14px; font-weight: 800; color: var(--text-color, #0f172a); line-height: 1.2; word-break: break-all; max-width: 60px;">${name}</div>
+                    ${enName ? `<div style="font-size: 9px; color: var(--text-muted, #94a3b8); font-weight: 600; margin-top: 2px; transform: scale(0.9);">${enName}</div>` : ''}
+                </div>
             </div>
           `;
       });
       
       if (!hasStations) {
-          stationsHtml += `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted, #64748b);">该线路暂无站点</div>`;
+          stationsHtml += `<div style="width: 100%; text-align: center; padding: 40px; color: var(--text-muted, #64748b);">该线路暂无站点</div>`;
       }
       
-      stationsHtml += `</div>`;
+      stationsHtml += `</div></div>`;
       
       mapContainer.innerHTML = tabsHtml + stationsHtml;
   }