From 6605c67f23085658d93e16857414a53acac78fd5 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Fri, 7 Aug 2026 23:32:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(web/route):=20=E6=94=AF=E6=8C=81=E7=94=B5?=
 =?UTF-8?q?=E8=84=91=E7=AB=AF=E9=BC=A0=E6=A0=87=E5=B9=B3=E7=A7=BB=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=20&=20=E4=BC=98=E5=8C=96=E5=8A=A8=E6=80=81SVG?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修复电脑端画布无法拖拽滑动问题：
   - 新增 onPanStart/onPanMove/onPanEnd 逻辑
   - 绑定鼠标事件到 .visual-line-container，实现按住左键平移 scrollLeft
2. 修复长线路无法完全滚动的问题：
   - 将固定 100% 的宽度替换为动态宽度计算：Math.max(100, 50 + stations.length * 120 + 50) + px
   - 确保原生 overflow-x: auto 能正确感知超出容器的内部站点
3. 更新静态资源版本号避免缓存
---
 web/ticket-route.html | 11 ++++++++---
 web/ticket-route.js   | 28 ++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/web/ticket-route.html b/web/ticket-route.html
index 126c402..c2d6334 100644
--- a/web/ticket-route.html
+++ b/web/ticket-route.html
@@ -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');
diff --git a/web/ticket-route.js b/web/ticket-route.js
index 387be11..034e551 100644
--- a/web/ticket-route.js
+++ b/web/ticket-route.js
@@ -497,6 +497,33 @@ createApp({
             await saveDragResult();
         };
 
+        /* 画布平移*/
+        const visualLineContainer = ref(null);
+        const isPanning = ref(false);
+        const panStartX = ref(0);
+        const panScrollLeft = ref(0);
+
+        const onPanStart = (e) => {
+            if (e.button !== 0) return; 
+            if (e.target.closest && e.target.closest('.station-node')) return;
+            isPanning.value = true;
+            panStartX.value = e.clientX;
+            if (visualLineContainer.value) {
+                panScrollLeft.value = visualLineContainer.value.scrollLeft;
+            }
+        };
+
+        const onPanMove = (e) => {
+            if (!isPanning.value || !visualLineContainer.value) return;
+            e.preventDefault(); 
+            const dx = e.clientX - panStartX.value;
+            visualLineContainer.value.scrollLeft = panScrollLeft.value - dx;
+        };
+
+        const onPanEnd = () => {
+            isPanning.value = false;
+        };
+
         /* 订单管理 */
         const fetchOrders = async () => {
             try {
@@ -1032,6 +1059,7 @@ createApp({
             handleStationClick, isStationSelected,
             onStationDragStart, onStationDragOver, onStationDrop, draggingStationIndex,
             onStationTouchStart,
+            visualLineContainer, isPanning, onPanStart, onPanMove, onPanEnd,
             showStationModal, stationForm, stationFormOriginalCode, transferTargets, saveStationSettings, closeStationModal,
             showLineModal, lineForm, openLineModal, saveLineSettings, closeLineModal,