From 139a65f24c471edcab708026c97e39d727774071 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Mon, 13 Jul 2026 23:47:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ticket-order):=20=E6=B8=85=E7=90=86?=
 =?UTF-8?q?=E5=BA=9F=E5=BC=83=E7=9A=84SVG=E6=B8=B2=E6=9F=93=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=B9=B6=E4=BC=98=E5=8C=96TVM=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E5=8F=8D=E9=A6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/ticket-order.html |   2 +-
 web/ticket-order.js   | 633 +++++++++++-------------------------------
 2 files changed, 159 insertions(+), 476 deletions(-)

diff --git a/web/ticket-order.html b/web/ticket-order.html
index 3a3820e..318de7c 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=30"></script>
+  <script src="/ticket-order.js?v=31"></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 71af2ee..a5cc7c4 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -32,71 +32,10 @@
   let stationYByCanonical = {};
   let stationTransfer = new Set();
   
-  const piePath = (cx, cy, r, a0, a1) => {
-      const x0 = cx + r * Math.cos(a0);
-      const y0 = cy + r * Math.sin(a0);
-      const x1 = cx + r * Math.cos(a1);
-      const y1 = cy + r * Math.sin(a1);
-      const large = (a1 - a0) > Math.PI ? 1 : 0;
-      return `M ${cx} ${cy} L ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} Z`;
-  };
-  
-  const pieSvg = (cx, cy, r, colors) => {
-      const cols = (Array.isArray(colors) ? colors.filter(Boolean) : []).slice(0, 4);
-      if (cols.length === 0) return '';
-      if (cols.length === 1) return `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${cols[0]}" />`;
-      const step = (Math.PI * 2) / cols.length;
-      let out = '';
-      for (let i = 0; i < cols.length; i++) {
-          const a0 = -Math.PI / 2 + i * step;
-          const a1 = a0 + step;
-          out += `<path d="${piePath(cx, cy, r, a0, a1)}" fill="${cols[i]}" />`;
-      }
-      return out;
-  };
-
-  const buildTransitPath = (points, radius = 12) => {
-      if (!points || points.length === 0) return '';
-      if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
-
-      let d = `M ${points[0].x} ${points[0].y}`;
-      for (let i = 1; i < points.length; i++) {
-          d += ` L ${points[i].x} ${points[i].y}`;
-      }
-      return d;
-  };
-
-  async function loadMap() {
-      try {
-          const res = await fetch('/api/public/fares/map/light');
-          const svg = await res.text();
-          mapContainer.innerHTML = svg;
-          
-          const svgEl = mapContainer.querySelector('svg');
-          if(!svgEl) return;
-
-          renderLineMap();
-      } catch(e) {
-          mapContainer.innerHTML = '<div class="error">加载地图失败</div>';
-      }
-  }
-
-  async function renderLineMap() {
-      try {
-          const [lines, stations] = await Promise.all([
-              fetch('/api/public/lines').then(r=>r.json()),
-              fetch('/api/public/stations').then(r=>r.json())
-          ]);
-          
-          let html = '';
-          lines.forEach(line => {
-              const stList = line.站序 || []; 
-
-          });
-      } catch(e) {}
-  }
-  
-
+  // TVM UI State
+  let activeLineId = null;
+  let allLinesData = [];
+  let allStationsData = [];
   
   async function renderSystemMap() {
       mapContainer.innerHTML = '<div class="loading">加载线路数据...</div>';
@@ -107,11 +46,15 @@
           ]);
 
           window.cachedStationsData = stationsData;
+          allLinesData = linesData;
+          allStationsData = stationsData;
+          
           stationTransfer = new Set();
           stationCanonicalByCode = {};
           stationCodesByCanonical = {};
           stationNameByCode = {};
           stationEnByCode = {};
+          
           for (const s of stationsData) {
               const code = String(s.code || s.编号 || '').trim();
               if (!code) continue;
@@ -126,312 +69,175 @@
               if (codes.length >= 2) codes.forEach(code => stationTransfer.add(code));
           }
 
-          const lineStops = [];
-          const lineColors = [];
           const linesByStation = new Map();
-          const lineIdxsByCanonical = {};
-          
-          // NEW logic for breaking lines with '-'
-          let currentLineIdx = 0;
           for (let i = 0; i < linesData.length; i++) {
               const line = linesData[i] || {};
-              const color = line.color || line.颜色 || '#93a2b7';
               const stopsRaw = Array.isArray(line.stops) ? line.stops : (Array.isArray(line.站点列表) ? line.站点列表 : []);
               const stops = stopsRaw.map(c => String(c || '').trim()).filter(Boolean);
-              if (stops.length === 0) continue;
-              
-              let currentSegment = [];
-              let addedAny = false;
               for (const c of stops) {
-                  if (c === '-') {
-                      if (currentSegment.length > 0) {
-                          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) || [];
-                              arr.push(currentLineIdx);
-                              linesByStation.set(stopCode, arr);
-                              const canonical = stationCanonicalByCode[stopCode] || stopCode;
-                              if (!lineIdxsByCanonical[canonical]) lineIdxsByCanonical[canonical] = new Set();
-                              lineIdxsByCanonical[canonical].add(currentLineIdx);
-                          }
-                          currentSegment = [];
-                          addedAny = true;
-                      }
-                  } else {
-                      currentSegment.push(c);
-                  }
+                  if (c === '-') continue;
+                  const arr = linesByStation.get(c) || [];
+                  arr.push(line);
+                  linesByStation.set(c, arr);
               }
-              if (currentSegment.length > 0) {
-                  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) || [];
-                      arr.push(currentLineIdx);
-                      linesByStation.set(stopCode, arr);
-                      const canonical = stationCanonicalByCode[stopCode] || stopCode;
-                      if (!lineIdxsByCanonical[canonical]) lineIdxsByCanonical[canonical] = new Set();
-                      lineIdxsByCanonical[canonical].add(currentLineIdx);
-                  }
-                  addedAny = true;
-              }
-              if (addedAny) {
-                  currentLineIdx++;
-              }
-          }
-
-          if (lineStops.length === 0) {
-              mapContainer.innerHTML = '<div class="empty-state jr-empty-state"><p>暂无可显示的线路数据。</p></div>';
-              return;
           }
 
           for (const [c, arr] of linesByStation.entries()) {
-              const uniq = Array.from(new Set(arr));
+              const uniq = Array.from(new Set(arr.map(l => l.id)));
               if (uniq.length >= 2) stationTransfer.add(c);
           }
           
-          // Build SVG
-          const legendW = 10;
-          const startX = 140;
-          const baseY = 80;
-          const lineGapY = 80;
-          const minGapX = 80;
-
-          const occurrences = {};
-          for (const li of lineStops) {
-              for (let i = 0; i < li.stops.length; i++) {
-                  const code = li.stops[i];
-                  if (code === '-') continue;
-                  const canonical = stationCanonicalByCode[code] || code;
-                  if (!occurrences[canonical]) occurrences[canonical] = [];
-                  occurrences[canonical].push(i * minGapX);
-              }
+          // Select first line by default if none selected
+          if (!activeLineId && allLinesData.length > 0) {
+              activeLineId = allLinesData[0].id;
           }
 
-          stationXByCanonical = {};
-          stationYByCanonical = {};
-          const customXByCanonical = {};
-          const customYByCanonical = {};
-          
-          for (const s of stationsData) {
-              const code = String(s.code || s.编号 || '').trim();
-              if (!code) continue;
-              const canonical = stationCanonicalByCode[code] || code;
-              if (s.svg_x != null && s.svg_y != null) {
-                  customXByCanonical[canonical] = Number(s.svg_x);
-                  customYByCanonical[canonical] = Number(s.svg_y);
-              }
-          }
-
-          for (const canonical of Object.keys(occurrences)) {
-              if (customXByCanonical[canonical] != null) {
-                  stationXByCanonical[canonical] = customXByCanonical[canonical];
-              } else {
-                  const arr = occurrences[canonical];
-                  const avg = arr.reduce((a,b)=>a+b,0) / Math.max(1, arr.length);
-                  stationXByCanonical[canonical] = startX + Math.round(avg);
-              }
-          }
-
-          for (let pass = 0; pass < 3; pass++) {
-              for (const li of lineStops) {
-                  let prevX = startX - minGapX;
-                  for (const code of li.stops) {
-                      if (code === '-') continue;
-                      const canonical = stationCanonicalByCode[code] || code;
-                      if (customXByCanonical[canonical] != null) {
-                          prevX = customXByCanonical[canonical];
-                          continue;
-                      }
-                      const x = stationXByCanonical[canonical] ?? (prevX + minGapX);
-                      const nx = Math.max(x, prevX + minGapX);
-                      if (stationXByCanonical[canonical] == null || nx > stationXByCanonical[canonical]) {
-                          stationXByCanonical[canonical] = nx;
-                      }
-                      prevX = stationXByCanonical[canonical];
-                  }
-              }
-          }
-
-          // 3. Assign Grid Y to canonical stations (Average of their lines)
-          const hubYByCanonical = {};
-          for (const canonical of Object.keys(lineIdxsByCanonical)) {
-              if (customYByCanonical[canonical] != null) {
-                  hubYByCanonical[canonical] = customYByCanonical[canonical];
-                  continue;
-              }
-              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;
-          }
-
-          for (const li of lineStops) {
-              const yNode = baseY + li.idx * lineGapY;
-              for (const c of li.stops) {
-                  const canonical = stationCanonicalByCode[c] || c;
-                  stationYByCanonical[c] = customYByCanonical[canonical] ?? hubYByCanonical[canonical] ?? yNode;
-              }
-          }
-
-          const getContrastColor = (hexcolor) => {
-              if (!hexcolor) return '#ffffff';
-              let hex = hexcolor.replace('#', '');
-              if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-              const r = parseInt(hex.substr(0,2),16) || 0;
-              const g = parseInt(hex.substr(2,2),16) || 0;
-              const b = parseInt(hex.substr(4,2),16) || 0;
-              const yiq = ((r*299)+(g*587)+(b*114))/1000;
-              return (yiq >= 140) ? '#0f172a' : '#ffffff';
-          };
-
-          const labelPlacements = {};
-          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 textColor = getContrastColor(color);
-              const subTextColor = textColor === '#ffffff' ? 'rgba(255,255,255,0.9)' : 'rgba(15,23,42,0.8)';
-              
-              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) {
-                  lx = x - 54 - nameLen; // Pushed further out to avoid line overlap
-                  textX = lx + nameLen / 2;
-              } else {
-                  lx = x + 54; // Pushed further out
-                  textX = lx + nameLen / 2;
-              }
-              
-              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="${textColor}" font-size="12" font-weight="bold">${name}</text>`;
-                  svg += `<text x="${textX}" y="${y + yOffset + 28}" text-anchor="middle" fill="${subTextColor}" font-size="9" font-weight="600">${enName}</text>`;
-              } else {
-                  svg += `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="${textColor}" font-size="12" font-weight="bold">${name}</text>`;
-              }
-              return svg;
-          };
-
-          let svgContent = '';
-
-          for (const li of lineStops) {
-              if (li.stops.length >= 2) {
-                  const pts = li.stops.map(code => {
-                      const canonical = stationCanonicalByCode[code] || code;
-                      return {
-                          x: stationXByCanonical[canonical] || 0,
-                          y: stationYByCanonical[code] ?? (baseY + li.idx * lineGapY)
-                      };
-                  });
-                  
-                  const d = buildTransitPath(pts, 16);
-                  svgContent += `<path d="${d}" fill="none" stroke="${li.color}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />`;
-                  
-                  // 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.enName, li.color);
-                  svgContent += placeLabel(pEnd.x, pEnd.y, false, li.name, li.enName, li.color);
-              }
-          }
-
-          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 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);
-
-              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" />`;
-                  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 preferTop = isTransfer || (i % 2 === 0 && y >= baseY + 20);
-              
-              let labelSvg = '';
-              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;
-                  
-                  textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />`;
-                  textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
-                  
-                  // Text with white halo for readability
-                  textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
-                  if (showEn) {
-                      textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
-                  }
-              } else {
-                  const topY = y + 24;
-                  const codeY = topY;
-                  const nameY = topY + 16;
-                  const enY = nameY + 12;
-                  
-                  textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />`;
-                  textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
-                  
-                  textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
-                  if (showEn) {
-                      textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
-                  }
-              }
-              labelSvg += textContent;
-
-              svgContent += `
-                <g class="map-station ${isTransfer ? 'transfer' : ''}" data-code="${primaryCode}" data-canonical="${canonical}" onclick="handleStationClick('${primaryCode}')" style="cursor:pointer">
-                    <rect x="${x - 20}" y="${y - 20}" width="40" height="40" fill="transparent" />
-                    ${markerSvg}
-                    ${labelSvg}
-                </g>
-              `;
-          }
-
-          const allCanonicals = Object.keys(stationXByCanonical);
-          const minX = Math.min(...allCanonicals.map(c => stationXByCanonical[c] || 0));
-          const maxX = Math.max(...allCanonicals.map(c => stationXByCanonical[c] || 0));
-          const maxY = Math.max(...allCanonicals.map(c => stationYByCanonical[c] || 0));
-          const width = Math.max(560, maxX + 200);
-          const height = Math.max(260, maxY + 120, baseY + lineStops.length * lineGapY + 120);
-          mapContainer.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${svgContent}</svg>`;
+          renderTvmUI();
           
       } catch(e) {
           console.error(e);
-          mapContainer.innerHTML = '<div class="error">地图加载失败</div>';
+          mapContainer.innerHTML = '<div class="error">数据加载失败</div>';
       }
   }
   
+  function renderTvmUI() {
+      if (!allLinesData || allLinesData.length === 0) {
+          mapContainer.innerHTML = '<div class="empty-state jr-empty-state"><p>暂无可显示的线路数据。</p></div>';
+          return;
+      }
+
+      // 1. Render Line Tabs
+      let tabsHtml = `<div class="tvm-lines-nav" style="display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; border-radius: 12px 12px 0 0;">`;
+      allLinesData.forEach(line => {
+          const color = line.color || '#94a3b8';
+          const isActive = line.id === activeLineId;
+          const bg = isActive ? color : '#ffffff';
+          const fg = isActive ? '#ffffff' : '#334155';
+          const border = isActive ? color : '#cbd5e1';
+          tabsHtml += `
+            <button class="tvm-line-tab" onclick="window.switchTvmLine('${line.id}')" style="
+                flex-shrink: 0; 
+                padding: 8px 16px; 
+                border-radius: 20px; 
+                border: 2px solid ${border}; 
+                background: ${bg}; 
+                color: ${fg}; 
+                font-weight: 700; 
+                font-size: 14px; 
+                cursor: pointer;
+                transition: all 0.2s;
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                box-shadow: ${isActive ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'};
+            ">
+                <span style="width: 10px; height: 10px; border-radius: 50%; background: ${isActive ? '#fff' : color};"></span>
+                ${line.name || line.线路名称 || '未知线路'}
+            </button>
+          `;
+      });
+      tabsHtml += `</div>`;
+
+      // 2. Render Stations for Active Line
+      const activeLine = allLinesData.find(l => l.id === activeLineId) || allLinesData[0];
+      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(140px, 1fr)); gap: 12px; padding: 20px; background: #ffffff; border-radius: 0 0 12px 12px; max-height: 400px; overflow-y: auto;">`;
+      
+      let hasStations = false;
+      stops.forEach(code => {
+          if (code === '-') return; // Skip breakpoints in this view
+          hasStations = true;
+          
+          const name = stationNameByCode[code] || code;
+          const enName = stationEnByCode[code] || '';
+          
+          const isSelectedFrom = selection[0] === code;
+          const isSelectedTo = selection[1] === code;
+          const isSelected = isSelectedFrom || isSelectedTo;
+          
+          // Check transfers
+          const canonical = stationCanonicalByCode[code] || code;
+          const codesInGroup = stationCodesByCanonical[canonical] || [canonical];
+          const linesForThisStation = new Set();
+          codesInGroup.forEach(c => {
+              allLinesData.forEach(l => {
+                  const lStops = Array.isArray(l.stops) ? l.stops : (Array.isArray(l.站点列表) ? l.站点列表 : []);
+                  if (lStops.includes(c)) linesForThisStation.add(l);
+              });
+          });
+          
+          const transferLines = Array.from(linesForThisStation).filter(l => l.id !== activeLineId);
+          
+          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>`;
+          }
+
+          let badgeHtml = '';
+          let borderColor = '#e2e8f0';
+          let bgColor = '#f8fafc';
+          let shadow = 'none';
+
+          if (isSelectedFrom) {
+              badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: #16a34a; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; z-index: 10;">起点</div>`;
+              borderColor = '#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: #dc2626; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; z-index: 10;">终点</div>`;
+              borderColor = '#dc2626';
+              bgColor = '#fef2f2';
+              shadow = '0 4px 6px rgba(0,0,0,0.1)';
+          } else if (Array.isArray(currentRoute) && currentRoute.includes(code)) {
+              borderColor = '#facc15';
+              bgColor = '#fefce8';
+              if (Array.isArray(currentRouteTransfers) && currentRouteTransfers.includes(code)) {
+                  badgeHtml = `<div style="position: absolute; top: -8px; right: -8px; background: #ca8a04; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; border: 2px solid #fff; z-index: 10;">换乘</div>`;
+              }
+          }
+
+          stationsHtml += `
+            <div class="tvm-station-card" onclick="window.handleStationClick('${code}')" style="
+                position: relative;
+                padding: 12px;
+                border-radius: 8px;
+                border: 2px solid ${borderColor};
+                background: ${bgColor};
+                cursor: pointer;
+                transition: all 0.2s;
+                display: flex;
+                flex-direction: column;
+                box-shadow: ${shadow};
+            ">
+                ${badgeHtml}
+                <div style="font-size: 11px; color: #64748b; font-weight: 700; margin-bottom: 4px;">${code}</div>
+                <div style="font-size: 16px; font-weight: 800; color: #0f172a;">${name}</div>
+                ${enName ? `<div style="font-size: 10px; color: #64748b; font-weight: 600; margin-top: 2px;">${enName}</div>` : ''}
+                ${transferIcons}
+            </div>
+          `;
+      });
+      
+      if (!hasStations) {
+          stationsHtml += `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #64748b;">该线路暂无站点</div>`;
+      }
+      
+      stationsHtml += `</div>`;
+      
+      mapContainer.innerHTML = tabsHtml + stationsHtml;
+  }
+  
+  window.switchTvmLine = (lineId) => {
+      activeLineId = lineId;
+      renderTvmUI();
+  };
+
   window.handleStationClick = (code) => {
       code = String(code || '').trim();
       // Toggle if already selected
@@ -556,104 +362,6 @@
       return merged;
   }
 
-  function getStationPoint(code) {
-      const normalized = String(code || '').trim();
-      if (!normalized) return null;
-      const canonical = stationCanonicalByCode[normalized] || normalized;
-      const x = stationXByCanonical[canonical];
-      const y = stationYByCanonical[normalized];
-      if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
-      return { x, y };
-  }
-
-  function getMapStationEl(code) {
-      const normalized = String(code || '').trim();
-      if (!normalized) return null;
-      const canonical = stationCanonicalByCode[normalized] || normalized;
-      return document.querySelector(`.map-station[data-canonical="${canonical}"]`);
-  }
-
-  function renderRouteOverlay() {
-      const svgEl = mapContainer.querySelector('svg');
-      if (!svgEl) return;
-
-      const existing = svgEl.querySelector('.route-overlay-group');
-      if (existing) existing.remove();
-
-      if (!Array.isArray(currentRoute) || currentRoute.length < 2) return;
-
-      const points = currentRoute.map(getStationPoint).filter(Boolean);
-      if (points.length < 2) return;
-
-      const ns = 'http://www.w3.org/2000/svg';
-      const group = document.createElementNS(ns, 'g');
-      group.setAttribute('class', 'route-overlay-group');
-
-      const pathData = buildTransitPath(points, 16);
-      if (!pathData) return;
-
-    const glow = document.createElementNS(ns, 'path');
-    glow.setAttribute('d', pathData);
-    glow.setAttribute('fill', 'none');
-    glow.setAttribute('stroke', 'rgba(250, 204, 21, 0.38)');
-    glow.setAttribute('stroke-width', '18');
-    glow.setAttribute('stroke-linecap', 'round');
-    glow.setAttribute('stroke-linejoin', 'round');
-
-    const main = document.createElementNS(ns, 'path');
-    main.setAttribute('d', pathData);
-    main.setAttribute('fill', 'none');
-    main.setAttribute('stroke', '#facc15');
-    main.setAttribute('stroke-width', '8');
-    main.setAttribute('stroke-linecap', 'round');
-    main.setAttribute('stroke-linejoin', 'round');
-
-    group.appendChild(glow);
-    group.appendChild(main);
-
-    // Dynamic arrows pointing to the destination
-    let totalDist = 0;
-    for (let i = 0; i < points.length - 1; i++) {
-        const dx = points[i+1].x - points[i].x;
-        const dy = points[i+1].y - points[i].y;
-        totalDist += Math.sqrt(dx * dx + dy * dy);
-    }
-
-    const speed = 150; // pixels per second
-    const duration = Math.max(1, totalDist / speed);
-    const numArrows = Math.max(1, Math.floor(duration / 0.8));
-    const interval = duration / numArrows;
-
-    for (let i = 0; i < numArrows; i++) {
-        const arrowG = document.createElementNS(ns, 'g');
-        const arrowPath = document.createElementNS(ns, 'path');
-        // Chevron shape
-        arrowPath.setAttribute('d', 'M -6 -5 L 4 0 L -6 5');
-        arrowPath.setAttribute('fill', 'none');
-        arrowPath.setAttribute('stroke', '#854d0e'); // Dark brown/orange to contrast with yellow
-        arrowPath.setAttribute('stroke-width', '2.5');
-        arrowPath.setAttribute('stroke-linecap', 'round');
-        arrowPath.setAttribute('stroke-linejoin', 'round');
-
-        const animateMotion = document.createElementNS(ns, 'animateMotion');
-        animateMotion.setAttribute('dur', `${duration}s`);
-        animateMotion.setAttribute('repeatCount', 'indefinite');
-        animateMotion.setAttribute('path', pathData);
-        animateMotion.setAttribute('rotate', 'auto');
-        animateMotion.setAttribute('begin', `-${i * interval}s`);
-        // Use keyPoints/keyTimes to ensure constant speed along the path
-        animateMotion.setAttribute('calcMode', 'linear');
-
-        arrowG.appendChild(arrowPath);
-        arrowG.appendChild(animateMotion);
-        group.appendChild(arrowG);
-    }
-
-    const firstStation = svgEl.querySelector('.map-station');
-    if (firstStation) svgEl.insertBefore(group, firstStation);
-    else svgEl.appendChild(group);
-}
-
   function updateSelectionUI(skipPreview = false) {
       if (!(selection[0] && selection[1])) {
           currentRoute = [];
@@ -672,29 +380,8 @@
       $('#fromDisplay').textContent = selection[0] ? getName(selection[0]) : '请在上方地图选择';
       $('#toDisplay').textContent = selection[1] ? getName(selection[1]) : '请在上方地图选择';
       
-      // Update Map Styles
-      document.querySelectorAll('.map-station').forEach(el => {
-          const code = el.getAttribute('data-code');
-          const canonical = el.getAttribute('data-canonical');
-          el.classList.remove('start', 'end', 'selected', 'route', 'route-transfer');
-          if (selection[0] && canonical === (stationCanonicalByCode[selection[0]] || selection[0])) el.classList.add('start');
-          if (selection[1] && canonical === (stationCanonicalByCode[selection[1]] || selection[1])) el.classList.add('end');
-      });
-
-      if (Array.isArray(currentRoute) && currentRoute.length > 0) {
-          for (const c of currentRoute) {
-              const el = getMapStationEl(c);
-              if (el) el.classList.add('route');
-          }
-      }
-      if (Array.isArray(currentRouteTransfers) && currentRouteTransfers.length > 0) {
-          for (const c of currentRouteTransfers) {
-              const el = getMapStationEl(c);
-              if (el) el.classList.add('route-transfer');
-          }
-      }
-
-      renderRouteOverlay();
+      // Refresh TVM UI to show selected/route states
+      renderTvmUI();
       
       // Auto preview if both selected
       if(!skipPreview && selection[0] && selection[1]) previewPrice();
@@ -703,10 +390,6 @@
   // Load Map on Start
   renderSystemMap();
 
-  window.addEventListener('resize', () => {
-      if (currentRoute.length > 0) renderRouteOverlay();
-  });
-
   async function previewPrice(force = false){
     const seq = ++previewSeq;
     const type = document.querySelector('input[name="trainType"]:checked').value;