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

feat(web): 撤销静态SVG图片渲染，回退到自动线条生成模式，并保留断点支持

Browse Source
This commit is contained in:
Henry_Du
2026-07-11 22:23:12 +08:00
parent 0c1341e9c7
commit 1ce7fd630b
6 changed files with 207 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+2 -60
View File
@@ -816,65 +816,7 @@
</div>
<div v-if="assetsRouteMapUrl" style="border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0b0b0f; padding: 16px;">
<div class="flex mb-4" style="gap: 10px; align-items: center; background: rgba(255,255,255,0.05); padding: 12px; border-radius: 8px;">
<label class="switch-label">
<input type="checkbox" v-model="mapBindingMode">
<span class="slider"></span>
<span class="label-text">开启坐标绑定模式</span>
</label>
<select v-if="mapBindingMode" v-model="mapBindingStation" style="width: 240px;">
<option value="">-- 选择要绑定的站点 --</option>
<optgroup v-for="g in unboundStationsGrouped" :key="g.name" :label="g.name + (g.isTransfer ? ' (换乘站)' : '') + (g.isBound ? ' - 已绑定' : '')">
<option v-for="s in g.stations" :key="s.code" :value="s.code">
{{ s.name }} ({{ s.code }})
</option>
</optgroup>
</select>
<div v-if="mapBindingMode" class="text-muted" style="font-size: 0.9em;">
在左侧选择站点后，点击下方图片中的位置即可绑定。同名换乘站会自动同步坐标绑定。
</div>
</div>
<div style="position: relative; display: inline-block; width: 100%;" :style="{ cursor: mapBindingMode ? 'crosshair' : 'default' }" @click="onMapImageClick">
<img :src="assetsRouteMapUrl" alt="线路图" style="display:block; width: 100%; height: auto;" ref="mapImageRef">
<!-- 坐标标记点 -->
<template v-for="s in stations" :key="'marker-'+s.code">
<div v-if="s.svg_x != null && s.svg_y != null"
:style="{
position: 'absolute',
left: s.svg_x + '%',
top: s.svg_y + '%',
transform: 'translate(-50%, -50%)',
width: s.code === mapBindingStation ? '16px' : '10px',
height: s.code === mapBindingStation ? '16px' : '10px',
borderRadius: '50%',
backgroundColor: s.code === mapBindingStation ? 'var(--primary)' : 'rgba(255,50,50,0.7)',
border: '2px solid white',
boxShadow: '0 0 4px rgba(0,0,0,0.5)',
pointerEvents: 'none',
transition: 'all 0.2s ease'
}">
</div>
<div v-if="mapBindingMode && s.svg_x != null && s.svg_y != null"
:style="{
position: 'absolute',
left: s.svg_x + '%',
top: `calc(${s.svg_y}% + 12px)`,
transform: 'translateX(-50%)',
color: 'white',
background: 'rgba(0,0,0,0.7)',
padding: '2px 4px',
borderRadius: '4px',
fontSize: '10px',
pointerEvents: 'none',
whiteSpace: 'nowrap'
}">
{{ s.name }}
</div>
</template>
</div>
<img :src="assetsRouteMapUrl" alt="线路图" style="display:block; width: 100%; height: auto;" ref="mapImageRef">
</div>
<div v-else class="loading">未上传线路图</div>
</div>
@@ -978,7 +920,7 @@
</main>
</div>
<script src="/custom-dialog.js?v=11"></script>
<script src="index.js?v=4"></script>
<script src="index.js?v=5"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const isDomain = location.hostname.includes('fse-media.group');