feat: 改造线路图上传后台并接入购票页总览图
This commit is contained in:
+33
-64
@@ -74,7 +74,7 @@
|
||||
<span class="nav-icon"><i class="fas fa-credit-card"></i></span> IC卡管理
|
||||
</div>
|
||||
<div class="nav-item" :class="{active: currentView === 'assets'}" @click="currentView = 'assets'">
|
||||
<span class="nav-icon"><i class="fas fa-route"></i></span> 拓扑图布局
|
||||
<span class="nav-icon"><i class="fas fa-route"></i></span> 线路图上传
|
||||
</div>
|
||||
<div class="nav-item" :class="{active: currentView === 'settings'}" @click="currentView = 'settings'">
|
||||
<span class="nav-icon"><i class="fas fa-cog"></i></span> 系统设置
|
||||
@@ -794,73 +794,44 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentView === 'assets'" class="assets-editor-container" style="display: flex; flex-direction: column; height: 80vh;">
|
||||
<div class="card mb-4" style="flex: 1; display: flex; flex-direction: column;">
|
||||
<div v-if="currentView === 'assets'" class="assets-editor-container">
|
||||
<div class="card mb-4">
|
||||
<div class="flex between mb-4" style="flex-wrap: wrap; gap: 10px;">
|
||||
<div class="flex" style="align-items: center; gap: 10px;">
|
||||
<h4>线路拓扑图布局编辑器</h4>
|
||||
<span class="badge" style="background: #2563eb; color: #fff;">拖拽站点以自定义位置</span>
|
||||
<div>
|
||||
<h4 style="margin-bottom: 6px;">线路图上传</h4>
|
||||
<div class="text-muted">上传后会用于首页展示，也会在购票页未选择线路时显示为总览图。</div>
|
||||
</div>
|
||||
<div class="flex" style="gap: 8px;">
|
||||
<button class="btn" @click="resetTopologyLayout">
|
||||
<i class="fas fa-undo"></i> 重置布局
|
||||
</button>
|
||||
<button class="btn primary" @click="saveTopologyLayout">
|
||||
<i class="fas fa-save"></i> 保存坐标
|
||||
<div class="flex" style="gap: 8px; flex-wrap: wrap;">
|
||||
<label class="btn primary" style="cursor: pointer;">
|
||||
<i class="fas fa-upload"></i> 上传线路图
|
||||
<input type="file" accept=".png,.jpg,.jpeg,.webp,.svg" style="display: none;" @change="uploadRouteMap">
|
||||
</label>
|
||||
<button class="btn" @click="deleteRouteMap" :disabled="!assetsManifest.routeMap || mutationBusy">
|
||||
<i class="fas fa-trash"></i> 删除当前线路图
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0f172a; position: relative; user-select: none;"
|
||||
ref="topologyCanvas"
|
||||
@mousedown="onTopologyCanvasMouseDown"
|
||||
@mousemove="onTopologyCanvasMouseMove"
|
||||
@mouseup="onTopologyCanvasMouseUp"
|
||||
@mouseleave="onTopologyCanvasMouseUp"
|
||||
@wheel="onTopologyCanvasWheel">
|
||||
<div :style="{
|
||||
position: 'absolute',
|
||||
left: '0', top: '0',
|
||||
width: '100%', height: '100%',
|
||||
transformOrigin: '0 0',
|
||||
transform: `translate(${topologyPan.x}px, ${topologyPan.y}px) scale(${topologyPan.scale})`
|
||||
}">
|
||||
<!-- Grid Background (Optional) -->
|
||||
<svg width="10000" height="10000" style="position: absolute; left: -5000px; top: -5000px; pointer-events: none;">
|
||||
<defs>
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<rect width="40" height="40" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="10000" height="10000" fill="url(#grid)" />
|
||||
<!-- Lines -->
|
||||
<path v-for="l in topologyLines" :key="'path-'+l.id" :d="l.d" fill="none" :stroke="l.color" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0.6" />
|
||||
</svg>
|
||||
|
||||
<!-- Stations -->
|
||||
<div v-for="node in topologyNodes" :key="node.canonical"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: node.x + 'px',
|
||||
top: node.y + 'px',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
cursor: 'grab',
|
||||
zIndex: node.canonical === topologyDraggingNode ? 100 : 10
|
||||
}"
|
||||
@mousedown.stop="onTopologyNodeMouseDown($event, node)">
|
||||
|
||||
<div v-if="node.isTransfer" style="width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #1f2937; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">
|
||||
<div style="width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1;"></div>
|
||||
</div>
|
||||
<div v-else :style="{
|
||||
width: '20px', height: '20px', borderRadius: '50%', background: '#fff',
|
||||
border: `4px solid ${node.color || '#94a3b8'}`,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
|
||||
}"></div>
|
||||
|
||||
<div style="position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: #f8fafc; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none;">
|
||||
{{ node.name }}
|
||||
</div>
|
||||
<div class="grid" style="display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start;">
|
||||
<div style="border: 1px solid var(--border); padding: 16px; background: var(--surface);">
|
||||
<div style="font-weight: 700; margin-bottom: 12px;">上传说明</div>
|
||||
<div class="text-muted" style="display: grid; gap: 8px; line-height: 1.7;">
|
||||
<div>支持格式：PNG、JPG、WEBP、SVG</div>
|
||||
<div>建议上传横向长图，便于首页和购票页展示。</div>
|
||||
<div>再次上传会自动替换旧文件。</div>
|
||||
</div>
|
||||
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 8px;">
|
||||
<div><strong>当前文件：</strong> {{ assetsManifest.routeMap || '未上传' }}</div>
|
||||
<div><strong>更新时间：</strong> {{ assetsManifest.updatedAt ? formatTime(assetsManifest.updatedAt) : '暂无' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border: 1px solid var(--border); background: #0f172a; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: auto;">
|
||||
<template v-if="assetsRouteMapUrl">
|
||||
<img :src="assetsRouteMapUrl" alt="线路图预览" style="display: block; max-width: 100%; height: auto; background: #ffffff;">
|
||||
</template>
|
||||
<div v-else class="text-muted" style="padding: 24px; text-align: center;">
|
||||
暂无线路图，请先上传一张线路图。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -994,5 +965,3 @@
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user