From a79142660ff687e215eddbe0a04a2f995d4106a7 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Tue, 14 Jul 2026 00:50:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(ticket-order):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E5=88=87=E6=8D=A2=E8=B7=AF?=
 =?UTF-8?q?=E7=BA=BF=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=8F=8A=E4=B8=BB=E9=A2=98=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/ticket-order.js | 51 +++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/web/ticket-order.js b/web/ticket-order.js
index a5cc7c4..a6e765b 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -107,13 +107,13 @@
       }
 
       // 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;">`;
+      let tabsHtml = `<div class="tvm-lines-nav" style="display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: var(--surface-color, #f8fafc); border-bottom: 1px solid var(--border-color, #e2e8f0); border-radius: 12px 12px 0 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;">`;
       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';
+          const isActive = String(line.id) === String(activeLineId);
+          const bg = isActive ? color : 'var(--bg-color, #ffffff)';
+          const fg = isActive ? '#ffffff' : 'var(--text-color, #334155)';
+          const border = isActive ? color : 'var(--border-color, #cbd5e1)';
           tabsHtml += `
             <button class="tvm-line-tab" onclick="window.switchTvmLine('${line.id}')" style="
                 flex-shrink: 0; 
@@ -125,13 +125,14 @@
                 font-weight: 700; 
                 font-size: 14px; 
                 cursor: pointer;
-                transition: all 0.2s;
+                transition: all 0.2s ease;
                 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>
+                white-space: nowrap;
+            " onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
+                <span style="width: 10px; height: 10px; border-radius: 50%; background: ${isActive ? 'var(--bg-color, #fff)' : color}; display: inline-block;"></span>
                 ${line.name || line.线路名称 || '未知线路'}
             </button>
           `;
@@ -139,11 +140,11 @@
       tabsHtml += `</div>`;
 
       // 2. Render Stations for Active Line
-      const activeLine = allLinesData.find(l => l.id === activeLineId) || allLinesData[0];
+      const activeLine = allLinesData.find(l => String(l.id) === String(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 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 hasStations = false;
       stops.forEach(code => {
@@ -168,7 +169,7 @@
               });
           });
           
-          const transferLines = Array.from(linesForThisStation).filter(l => l.id !== activeLineId);
+          const transferLines = Array.from(linesForThisStation).filter(l => String(l.id) !== String(activeLineId));
           
           let transferIcons = '';
           if (transferLines.length > 0) {
@@ -180,25 +181,25 @@
           }
 
           let badgeHtml = '';
-          let borderColor = '#e2e8f0';
-          let bgColor = '#f8fafc';
+          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: #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';
+              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: #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';
+              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 = '#facc15';
+              borderColor = 'var(--primary, #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>`;
+                  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>`;
               }
           }
 
@@ -210,22 +211,22 @@
                 border: 2px solid ${borderColor};
                 background: ${bgColor};
                 cursor: pointer;
-                transition: all 0.2s;
+                transition: all 0.2s ease;
                 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: #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>` : ''}
+                <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}
             </div>
           `;
       });
       
       if (!hasStations) {
-          stationsHtml += `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #64748b;">该线路暂无站点</div>`;
+          stationsHtml += `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted, #64748b);">该线路暂无站点</div>`;
       }
       
       stationsHtml += `</div>`;