Henry_Du/FSE-Ticket.sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): 调整线路名防遮挡偏移、缩小线路间距，并根据线路颜色动态匹配文字深浅色

Browse Source
This commit is contained in:
Henry_Du
2026-07-12 10:28:15 +08:00
parent e1637da9c6
commit 20cfdc5174
4 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/.asset-version-state.json
+2 -2
View File
@@ -16,8 +16,8 @@
"mtimeMs": 1783602619602.658
},
"ticket-order.js": {
"size": 40237,
"mtimeMs": 1783822753545.6997
"size": 40982,
"mtimeMs": 1783823251900.007
},
"ticket-search.js": {
"size": 17269,
web/asset-versions.json
+1 -1
View File
@@ -3,7 +3,7 @@
"blog.css": 2,
"custom-dialog.js": 11,
"public-status.js": 14,
"ticket-order.js": 27,
"ticket-order.js": 28,
"ticket-search.js": 12,
"ticket-route.js": 3,
"index.js": 5,
web/ticket-order.html
+1 -1
View File
@@ -158,7 +158,7 @@
</div>
<script src="/custom-dialog.js?v=11"></script>
<script src="/ticket-order.js?v=27"></script>
<script src="/ticket-order.js?v=28"></script>
<script src="/public-status.js?v=14"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
web/ticket-order.js
+23 -9
View File
@@ -264,8 +264,8 @@
const legendW = 10;
const startX = 140;
const baseY = 80;
const lineGapY = 92;
const minGapX = 78;
const lineGapY = 64;
const minGapX = 68;
const occurrences = {};
for (const li of lineStops) {
@@ -293,7 +293,7 @@
for (let i = 1; i < sortedCanonicals.length; i++) {
const prev = sortedCanonicals[i - 1];
const cur = sortedCanonicals[i];
const minSpacing = (stationDegreeByCanonical[prev] >= 2 || stationDegreeByCanonical[cur] >= 2) ? 108 : 82;
const minSpacing = (stationDegreeByCanonical[prev] >= 2 || stationDegreeByCanonical[cur] >= 2) ? 88 : 68;
if (stationXByCanonical[cur] < stationXByCanonical[prev] + minSpacing) {
stationXByCanonical[cur] = stationXByCanonical[prev] + minSpacing;
}
@@ -306,7 +306,7 @@
if (code === '-') continue;
const canonical = stationCanonicalByCode[code] || code;
const x = stationXByCanonical[canonical] ?? (prevX + minGapX);
const spacing = stationDegreeByCanonical[canonical] >= 2 ? 104 : minGapX;
const spacing = stationDegreeByCanonical[canonical] >= 2 ? 88 : minGapX;
const nx = Math.max(x, prevX + spacing);
if (stationXByCanonical[canonical] == null || nx > stationXByCanonical[canonical]) stationXByCanonical[canonical] = nx;
prevX = stationXByCanonical[canonical];
@@ -331,12 +331,26 @@
}
}
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;
@@ -344,19 +358,19 @@
let lx, textX;
if (isStart) {
lx = x - 40 - nameLen; // Pushed further out to avoid line overlap
lx = x - 54 - nameLen; // Pushed further out to avoid line overlap
textX = lx + nameLen / 2;
} else {
lx = x + 40; // Pushed further out
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="#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>`;
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="#fff" font-size="12" font-weight="bold">${name}</text>`;
svg += `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="${textColor}" font-size="12" font-weight="bold">${name}</text>`;
}
return svg;
};