feat(web/route): 支持电脑端鼠标平移画布 & 优化动态SVG宽度

1. 修复电脑端画布无法拖拽滑动问题:
   - 新增 onPanStart/onPanMove/onPanEnd 逻辑
   - 绑定鼠标事件到 .visual-line-container,实现按住左键平移 scrollLeft
2. 修复长线路无法完全滚动的问题:
   - 将固定 100% 的宽度替换为动态宽度计算:Math.max(100, 50 + stations.length * 120 + 50) + px
   - 确保原生 overflow-x: auto 能正确感知超出容器的内部站点
3. 更新静态资源版本号避免缓存
This commit is contained in:
2026-08-07 23:32:05 +08:00
parent 1046aa8dda
commit 6605c67f23
2 changed files with 36 additions and 3 deletions
+8 -3
View File
@@ -223,8 +223,13 @@
</div>
<!-- 可视化线路编辑-->
<div class="visual-line-container">
<svg width="100%" height="200"
<div class="visual-line-container" ref="visualLineContainer"
:class="{ 'is-panning': isPanning }"
@mousedown="onPanStart"
@mousemove="onPanMove"
@mouseup="onPanEnd"
@mouseleave="onPanEnd">
<svg :style="{ minWidth: '100%', width: Math.max(100, 50 + selectedLine.stations.length * 120 + 50) + 'px' }" height="200"
v-if="selectedLine.stations && selectedLine.stations.length > 0">
<!--站点连接线-->
<line x1="50" y1="100" :x2="50 + (selectedLine.stations.length - 1) * 120" y2="100"
@@ -602,7 +607,7 @@
</div>
<script src="/custom-dialog.js?v=11"></script>
<script src="/public-status.js?v=14"></script>
<script src="ticket-route.js?v=5"></script>
<script src="ticket-route.js?v=6"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const isDomain = location.hostname.includes('fse-media.group');