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:
@@ -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,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user