From 3d7fa994aede93d715aeacb6320ffbe0cb7150a7 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sat, 8 Aug 2026 10:08:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E7=AB=99=E7=82=B9=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9=E6=89=80=E5=B1=9E?=
 =?UTF-8?q?=E7=BA=BF=E8=B7=AF=E5=8F=8A=E7=BC=96=E5=8F=B7=E7=BA=A7=E8=81=94?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 在“站点编辑”弹窗中新增了“所属线路”的多选组件。现在可以在编辑站名和换乘时，一并把该站添加到新线路或从现有线路中移除了。
2. 重构了 saveStationSettings，不仅保存站点本身信息，还会对比前后的线路差异（增加、删除或站点编号变更），并自动调用 updateLineStations 接口保存，确保“站点管理”里的操作能实时反映到“线路规划”的可视化拓扑图中。
---
 web/index.html        |  2 +-
 web/ticket-route.html | 11 ++++++++++-
 web/ticket-route.js   | 31 +++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/web/index.html b/web/index.html
index 0327c76..b56cced 100644
--- a/web/index.html
+++ b/web/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>控制台|FSE铁路运输票务系统</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="style.css?v=20">
+    <link rel="stylesheet" href="style.css?v=21">
     <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
     <script src="/socket.io/socket.io.js"></script>
 </head>
diff --git a/web/ticket-route.html b/web/ticket-route.html
index 9ff7bf3..6160fc0 100644
--- a/web/ticket-route.html
+++ b/web/ticket-route.html
@@ -8,7 +8,7 @@
     <title>线路规划|FSE铁路运输票务系统</title>
     <link rel="icon" type="image/png" href="/FSE-ticket.png">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/style.css?v=20">
+    <link rel="stylesheet" href="/style.css?v=21">
     <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
     <script src="/socket.io/socket.io.js"></script>
 </head>
@@ -524,6 +524,15 @@
                             <label>英文名</label>
                             <input v-model="stationForm.en_name" class="w-100">
                         </div>
+                        <div class="mb-4">
+                            <label>所属线路</label>
+                            <select v-model="stationForm.lines" multiple class="w-100" style="height: 100px;">
+                                <option v-for="l in lines" :key="l.id" :value="l.id">
+                                    {{ l.name || l.id }} ({{ l.id }})
+                                </option>
+                            </select>
+                            <p class="text-muted mt-1" style="font-size: 0.8em;">按住 Ctrl / Command 多选，保存后会自动同步到线路图中。</p>
+                        </div>
                         <div class="mb-4">
                             <label class="switch-label">
                                 <input type="checkbox" v-model="stationForm.transfer_enabled">
diff --git a/web/ticket-route.js b/web/ticket-route.js
index d3d1e73..683feeb 100644
--- a/web/ticket-route.js
+++ b/web/ticket-route.js
@@ -749,6 +749,10 @@ createApp({
             stationForm.en_name = s.en_name || s.enName || '';
             stationForm.transfer_enabled = !!s.transfer_enabled;
             stationForm.transfer_to = Array.isArray(s.transfer_to) ? [...s.transfer_to] : [];
+            
+            // 找出该站点当前所属的线路
+            stationForm.lines = lines.value.filter(l => l.stations && l.stations.includes(s.code || code)).map(l => l.id);
+            
             showStationModal.value = true;
         };
 
@@ -777,7 +781,34 @@ createApp({
                 transfer_to: stationForm.transfer_enabled ? (Array.isArray(stationForm.transfer_to) ? stationForm.transfer_to : []) : []
             };
             await runMutation(async () => {
+                // 1. 保存站点本身信息
                 await requestJson(`/api/stations/${encodeURIComponent(oldCode)}`, { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) }, { expectOk: true });
+                
+                // 2. 更新所属线路
+                const newLinesIds = Array.isArray(stationForm.lines) ? stationForm.lines : [];
+                for (const line of lines.value) {
+                    const wasInLine = line.stations && line.stations.includes(oldCode);
+                    const shouldBeInLine = newLinesIds.includes(line.id);
+                    
+                    let lineStations = [...(line.stations || [])];
+                    let changed = false;
+                    
+                    if (wasInLine && !shouldBeInLine) {
+                        lineStations = lineStations.filter(c => c !== oldCode);
+                        changed = true;
+                    } else if (!wasInLine && shouldBeInLine) {
+                        lineStations.push(newCode);
+                        changed = true;
+                    } else if (wasInLine && shouldBeInLine && oldCode !== newCode) {
+                        lineStations = lineStations.map(c => c === oldCode ? newCode : c);
+                        changed = true;
+                    }
+                    
+                    if (changed) {
+                        await updateLineStations(line.id, lineStations, { skipFetchData: true });
+                    }
+                }
+
                 showStationModal.value = false;
                 await fetchData();
             });