feat(ticket-order): 将 TVM UI 的网格站点改为与后台一致的单线地铁图样式
This commit is contained in:
+61
-42
@@ -144,7 +144,12 @@
|
||||
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 => {
|
||||
@@ -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 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 nodeColor = activeLine.color || '#94a3b8';
|
||||
let nodeSize = isTransfer ? '20px' : '14px';
|
||||
let nodeBorder = isTransfer ? '4px' : '3px';
|
||||
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)';
|
||||
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) {
|
||||
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>`;
|
||||
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 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}'">
|
||||
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}
|
||||
<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}
|
||||
${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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user