前20卷地图

2026-03-30 19:15:41 +08:00
parent 565c0184c0
commit f8e9ed6a00
18 changed files with 4460 additions and 144 deletions
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -8,7 +8,7 @@
    <div class="legend">
      <h3>势力图例</h3>
      <div
-        v-for="faction in factions"
+        v-for="faction in mergedFactions"
        :key="faction.id"
        class="legend-item"
        @click="showFactionInfo(faction)"
@@ -20,7 +20,7 @@
      <div class="legend-section">
        <h3>人物路线</h3>
        <div
-          v-for="route in routes"
+          v-for="route in mergedRoutes"
          :key="route.character"
          class="legend-item"
          @click="toggleRoute(route)"
@@ -37,24 +37,44 @@
      </div>
    </div>

-    <!-- 章节面板 -->
+    <!-- 卷进度面板 -->
    <div class="chapter-panel">
-      <h3>章节进度</h3>
-      <select v-model="selectedVolume" class="volume-select" @change="onVolumeChange">
-        <option v-for="(data, idx) in allData" :key="idx" :value="idx">
-          {{ data.volume }}
-        </option>
-      </select>
-      <input
-        type="range"
-        class="chapter-slider"
-        v-model.number="currentChapter"
-        :min="1"
-        :max="maxChapter"
-        @input="updateMap"
-      >
-      <div class="chapter-label">第 {{ currentChapter }} / {{ maxChapter }} 章</div>
-      <div class="chapter-name">{{ currentChapterName }}</div>
+      <h3>卷册进度</h3>
+      <div class="vol-slider-wrap">
+        <input
+          type="range"
+          class="chapter-slider"
+          v-model.number="currentVol"
+          :min="1"
+          :max="20"
+          @input="onVolSliderChange"
+        >
+        <div class="vol-ticks">
+          <span
+            v-for="tick in volTicks"
+            :key="tick.vol"
+            class="tick-label"
+            :style="{ left: tick.pct + '%' }"
+          >{{ tick.label }}</span>
+        </div>
+      </div>
+      <div class="vol-info">
+        当前：{{ currentVolLabel }} &nbsp;|&nbsp; 已加载 {{ loadedCount }} / 20 卷
+      </div>
+
+      <!-- 关键事件列表 -->
+      <div class="events-section" v-if="currentKeyEvents.length">
+        <div class="events-title">本卷关键事件</div>
+        <div
+          v-for="(ev, idx) in currentKeyEvents"
+          :key="idx"
+          class="event-item"
+          @click="flyToEvent(ev)"
+        >
+          <span class="event-ch">第{{ ev.chapter }}章</span>
+          <span class="event-text">{{ ev.event }}</span>
+        </div>
+      </div>
    </div>

    <!-- 势力详情面板 -->
@@ -70,57 +90,151 @@
        <b>关键人物：</b>{{ selectedFaction.key_figures.join('、') }}
      </p>
    </div>
+
+    <!-- 加载进度 -->
+    <div class="loading-bar" v-if="isLoading">
+      <div class="loading-inner" :style="{ width: (loadedCount / 20 * 100) + '%' }"></div>
+      <span class="loading-text">加载数据中… {{ loadedCount }}/20 卷</span>
+    </div>
  </div>
 </template>

 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'

-const allData = ref([])
-const factions = ref([])
-const locations = ref([])
-const routes = ref([])
-const currentChapter = ref(1)
-const selectedVolume = ref(0)
+// ── 响应式状态 ──────────────────────────────────────────────
+const allData = ref([])          // 原始卷数据，index 0 = vol01
+const currentVol = ref(1)        // 1-20
 const selectedRoutes = ref([])
 const selectedFaction = ref(null)
+const isLoading = ref(true)
+const loadedCount = ref(0)

+// ── Leaflet 图层管理 ────────────────────────────────────────
 let map = null
-let routeLayers = []
-let locationMarkers = []
-let territoryLayers = []
-
-const currentData = computed(() => allData.value[selectedVolume.value] || {})
-const chapters = computed(() => currentData.value.chapters || [])
-const maxChapter = computed(() => chapters.value.length || 1)
-const currentChapterName = computed(() => chapters.value[currentChapter.value - 1] || '')
-
-onMounted(async () => {
-  await loadAllData()
-  initMap()
-  updateMap()
-})
-
-async function loadAllData() {
-  for (let i = 1; i <= 5; i++) {
-    const response = await fetch(`/data/vol${String(i).padStart(2, '0')}.json`)
-    const data = await response.json()
-    allData.value.push(data)
-  }
-
-  // 初始化第一卷数据
-  factions.value = allData.value[0]?.factions || []
-  locations.value = allData.value[0]?.locations || []
-  routes.value = allData.value[0]?.character_routes || []
-
-  currentChapter.value = maxChapter.value
+let layerGroups = {
+  territories: null,
+  locations: null,
+  routes: null,
+  events: null
 }

+// ── 滑块刻度 ────────────────────────────────────────────────
+const volTicks = [
+  { vol: 1,  label: '卷一',   pct: 0   },
+  { vol: 5,  label: '卷五',   pct: 21.05 },
+  { vol: 10, label: '卷十',   pct: 47.37 },
+  { vol: 15, label: '卷十五', pct: 73.68 },
+  { vol: 20, label: '卷二十', pct: 100  }
+]
+
+// ── 计算属性：当前卷标签 ────────────────────────────────────
+const currentVolLabel = computed(() => {
+  const d = allData.value[currentVol.value - 1]
+  return d ? d.volume : `卷${currentVol.value}`
+})
+
+// ── 跨卷合并数据（截至 currentVol）──────────────────────────
+
+// 地点：按 id 去重，取最新（最大卷号）的定义
+const mergedLocations = computed(() => {
+  const map = new Map()
+  for (let i = 0; i < currentVol.value; i++) {
+    const d = allData.value[i]
+    if (!d) continue
+    for (const loc of (d.locations || [])) {
+      map.set(loc.id, loc)
+    }
+  }
+  return Array.from(map.values())
+})
+
+// 势力：按 id 去重，取最新卷定义
+const mergedFactions = computed(() => {
+  const map = new Map()
+  for (let i = 0; i < currentVol.value; i++) {
+    const d = allData.value[i]
+    if (!d) continue
+    for (const f of (d.factions || [])) {
+      map.set(f.id, f)
+    }
+  }
+  return Array.from(map.values())
+})
+
+// 人物路线：同名人物路点合并，每个点附带 vol 标记
+const mergedRoutes = computed(() => {
+  const charMap = new Map()
+  for (let i = 0; i < currentVol.value; i++) {
+    const d = allData.value[i]
+    if (!d) continue
+    const vol = i + 1
+    for (const r of (d.character_routes || [])) {
+      const name = r.character
+      if (!charMap.has(name)) {
+        charMap.set(name, { character: name, color: r.color, route: [] })
+      }
+      const existing = charMap.get(name)
+      // 合并颜色（取最新）
+      existing.color = r.color
+      for (const pt of (r.route || [])) {
+        existing.route.push({ ...pt, vol })
+      }
+    }
+  }
+  return Array.from(charMap.values())
+})
+
+// 当前卷关键事件
+const currentKeyEvents = computed(() => {
+  const d = allData.value[currentVol.value - 1]
+  return d ? (d.key_events || []) : []
+})
+
+// ── 生命周期 ────────────────────────────────────────────────
+onMounted(async () => {
+  initMap()
+  await loadAllData()
+  drawAll()
+})
+
+// 监听 currentVol 变化重绘
+watch(currentVol, () => {
+  drawAll()
+})
+
+// ── 数据加载 ────────────────────────────────────────────────
+async function loadAllData() {
+  isLoading.value = true
+  const promises = []
+  for (let i = 1; i <= 20; i++) {
+    const volStr = String(i).padStart(2, '0')
+    promises.push(
+      fetch(`/data/vol${volStr}.json`)
+        .then(r => r.json())
+        .then(data => {
+          // 按索引顺序写入（保证位置正确）
+          allData.value[i - 1] = data
+          loadedCount.value++
+        })
+        .catch(err => {
+          console.warn(`vol${volStr}.json 加载失败`, err)
+          loadedCount.value++
+        })
+    )
+  }
+  await Promise.all(promises)
+  isLoading.value = false
+  // 触发响应式更新
+  allData.value = [...allData.value]
+}
+
+// ── 地图初始化 ──────────────────────────────────────────────
 function initMap() {
  map = L.map('map', {
-    center: [32.0, 116.0],
+    center: [33.0, 113.0],
    zoom: 6,
    zoomControl: true,
    attributionControl: false
@@ -134,49 +248,34 @@ function initMap() {
  L.control.attribution({ prefix: false, position: 'bottomright' })
    .addAttribution('大唐双龙传 - 黄易')
    .addTo(map)
+
+  // 创建图层组
+  layerGroups.territories = L.layerGroup().addTo(map)
+  layerGroups.locations   = L.layerGroup().addTo(map)
+  layerGroups.routes      = L.layerGroup().addTo(map)
+  layerGroups.events      = L.layerGroup().addTo(map)
 }

-function onVolumeChange() {
-  factions.value = currentData.value.factions || []
-  locations.value = currentData.value.locations || []
-  routes.value = currentData.value.character_routes || []
-  currentChapter.value = maxChapter.value
-  selectedRoutes.value = []
-  updateMap()
-}
-
-function updateMap() {
+// ── 全量重绘 ────────────────────────────────────────────────
+function drawAll() {
  if (!map) return
-
-  // 确保当前章节在有效范围内
-  if (currentChapter.value > maxChapter.value) {
-    currentChapter.value = maxChapter.value
-  }
-  if (currentChapter.value < 1) {
-    currentChapter.value = 1
-  }
-
-  clearLayers()
+  clearLayerGroups()
  drawTerritories()
  drawLocations()
  drawRoutes()
 }

-function clearLayers() {
-  routeLayers.forEach(layer => map.removeLayer(layer))
-  locationMarkers.forEach(layer => map.removeLayer(layer))
-  territoryLayers.forEach(layer => map.removeLayer(layer))
-  routeLayers = []
-  locationMarkers = []
-  territoryLayers = []
+function clearLayerGroups() {
+  Object.values(layerGroups).forEach(lg => lg && lg.clearLayers())
 }

+// ── 绘制势力领地 ────────────────────────────────────────────
 function drawTerritories() {
-  factions.value.forEach(f => {
+  const locs = mergedLocations.value
+  mergedFactions.value.forEach(f => {
    if (!f.territory || !f.territory.length) return
-
    f.territory.forEach(tid => {
-      const loc = locations.value.find(l => l.id === tid)
+      const loc = locs.find(l => l.id === tid)
      if (!loc) return

      const circle = L.circle([loc.lat, loc.lng], {
@@ -187,7 +286,8 @@ function drawTerritories() {
        weight: 2,
        opacity: 0.5,
        dashArray: '6 4'
-      }).addTo(map)
+      })
+      layerGroups.territories.addLayer(circle)

      const label = L.marker([loc.lat + 0.35, loc.lng], {
        icon: L.divIcon({
@@ -195,17 +295,19 @@ function drawTerritories() {
          html: `<div style="color:${f.color};font-size:11px;font-weight:bold;text-shadow:0 0 4px rgba(0,0,0,0.8);white-space:nowrap;text-align:center">${f.name}</div>`,
          iconAnchor: [30, 8]
        })
-      }).addTo(map)
-
-      territoryLayers.push(circle, label)
+      })
+      layerGroups.territories.addLayer(label)
    })
  })
 }

+// ── 绘制地点标记 ────────────────────────────────────────────
 function drawLocations() {
-  locations.value.forEach(loc => {
+  const locs = mergedLocations.value
+  const facs = mergedFactions.value
+  locs.forEach(loc => {
    let markerColor = '#aaa'
-    for (const f of factions.value) {
+    for (const f of facs) {
      if (f.territory && f.territory.includes(loc.id)) {
        markerColor = f.color
        break
@@ -222,7 +324,7 @@ function drawLocations() {

    const marker = L.marker([loc.lat, loc.lng], { icon })
      .bindPopup(`<b>${loc.name}</b><br>${loc.description || ''}`)
-      .addTo(map)
+    layerGroups.locations.addLayer(marker)

    const nameLabel = L.marker([loc.lat - 0.15, loc.lng], {
      icon: L.divIcon({
@@ -230,64 +332,72 @@ function drawLocations() {
        html: `<div style="color:#ccc;font-size:11px;text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap;text-align:center">${loc.name}</div>`,
        iconAnchor: [30, 0]
      })
-    }).addTo(map)
-
-    locationMarkers.push(marker, nameLabel)
+    })
+    layerGroups.locations.addLayer(nameLabel)
  })
 }

+// ── 绘制人物路线 ────────────────────────────────────────────
 function drawRoutes() {
-  routes.value.forEach(route => {
+  const locs = mergedLocations.value
+  mergedRoutes.value.forEach(route => {
    if (!selectedRoutes.value.includes(route.character)) return

    const points = route.route || []
+    const resolved = points.map(p => {
+      const coords = getPointCoords(p, locs)
+      return coords ? { ...coords, chapter: p.chapter, vol: p.vol, event: p.event } : null
+    }).filter(Boolean)

-    for (let i = 0; i < points.length - 1; i++) {
-      const p1 = getPointCoords(points[i])
-      const p2 = getPointCoords(points[i + 1])
-      if (!p1 || !p2) continue
-
+    for (let i = 0; i < resolved.length - 1; i++) {
+      const p1 = resolved[i]
+      const p2 = resolved[i + 1]
      const line = L.polyline([[p1.lat, p1.lng], [p2.lat, p2.lng]], {
        color: route.color,
        weight: 3,
        opacity: 0.8
-      }).addTo(map)
+      })
+      layerGroups.routes.addLayer(line)

-      routeLayers.push(line)
+      const midLat = (p1.lat + p2.lat) / 2
+      const midLng = (p1.lng + p2.lng) / 2
+      const angle = Math.atan2(p2.lat - p1.lat, p2.lng - p1.lng) * (180 / Math.PI)
+
+      const arrow = L.marker([midLat, midLng], {
+        icon: L.divIcon({
+          className: '',
+          html: `<div style="color:${route.color};font-size:12px;font-weight:bold;transform:rotate(${angle}deg);transform-origin:center;text-shadow:0 0 3px rgba(0,0,0,0.8)">→</div>`,
+          iconAnchor: [6, 6]
+        })
+      })
+      layerGroups.routes.addLayer(arrow)
    }

-    points.forEach((p, idx) => {
-      const coords = getPointCoords(p)
-      if (!coords) return
-
-      const isEnd = idx === points.length - 1
+    resolved.forEach((p, idx) => {
+      const isEnd = idx === resolved.length - 1
      const isStart = idx === 0
      const size = (isStart || isEnd) ? 7 : 5

-      const dot = L.circleMarker([coords.lat, coords.lng], {
+      const dot = L.circleMarker([p.lat, p.lng], {
        radius: size,
        color: route.color,
        fillColor: isEnd ? '#fff' : route.color,
        fillOpacity: 0.9,
        weight: 2
-      })
-        .bindPopup(`<b>${route.character}</b><br>第${p.chapter}章：${p.event || ''}`)
-        .addTo(map)
-
-      routeLayers.push(dot)
+      }).bindPopup(`<b>${route.character}</b><br>卷${p.vol || '?'} 第${p.chapter}章<br>${p.event || ''}`)
+      layerGroups.routes.addLayer(dot)
    })
  })
 }

-function getPointCoords(point) {
+// ── 工具函数 ────────────────────────────────────────────────
+function getPointCoords(point, locs) {
  if (point.lat && point.lng) {
    return { lat: point.lat, lng: point.lng }
  }
  if (point.location) {
-    const loc = locations.value.find(l => l.id === point.location)
-    if (loc) {
-      return { lat: loc.lat, lng: loc.lng }
-    }
+    const loc = locs.find(l => l.id === point.location)
+    if (loc) return { lat: loc.lat, lng: loc.lng }
  }
  return null
 }
@@ -299,10 +409,7 @@ function toggleRoute(route) {
  } else {
    selectedRoutes.value.push(route.character)
  }
-
-  clearLayers()
-  drawTerritories()
-  drawLocations()
+  layerGroups.routes.clearLayers()
  drawRoutes()
 }

@@ -312,14 +419,31 @@ function showFactionInfo(faction) {

 function getTerritoryNames(territoryIds) {
  return territoryIds.map(tid => {
-    const loc = locations.value.find(l => l.id === tid)
+    const loc = mergedLocations.value.find(l => l.id === tid)
    return loc ? loc.name : tid
  })
 }
+
+function onVolSliderChange() {
+  // currentVol 已由 v-model 更新，watch 会触发 drawAll
+}
+
+function flyToEvent(ev) {
+  const locs = mergedLocations.value
+  let coords = null
+  if (ev.lat && ev.lng) {
+    coords = [ev.lat, ev.lng]
+  } else if (ev.location) {
+    const loc = locs.find(l => l.id === ev.location)
+    if (loc) coords = [loc.lat, loc.lng]
+  }
+  if (coords && map) {
+    map.flyTo(coords, 8, { duration: 1.2 })
+  }
+}
 </script>

 <style scoped>
-/* 根容器必须 position:relative，使绝对定位子元素相对它定位 */
 .map-container {
  position: relative;
  width: 100%;
@@ -365,7 +489,7 @@ function getTerritoryNames(territoryIds) {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #555;
-  max-width: 260px;
+  max-width: 220px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  font-size: 13px;
@@ -413,7 +537,7 @@ function getTerritoryNames(territoryIds) {
  margin-top: 8px;
 }

-/* ====== 章节面板 ====== */
+/* ====== 卷册面板 ====== */
 .chapter-panel {
  position: absolute;
  bottom: 20px;
@@ -423,7 +547,9 @@ function getTerritoryNames(territoryIds) {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #555;
-  width: 320px;
+  width: 340px;
+  max-height: calc(100vh - 60px);
+  overflow-y: auto;
  color: #e0e0e0;
 }

@@ -435,35 +561,78 @@ function getTerritoryNames(territoryIds) {
  padding-bottom: 4px;
 }

-.volume-select {
-  width: 100%;
-  margin-bottom: 8px;
-  padding: 4px 8px;
-  background: #333;
-  color: #e0e0e0;
-  border: 1px solid #555;
-  border-radius: 4px;
+.vol-slider-wrap {
+  position: relative;
+  padding-bottom: 24px;
+  margin-bottom: 4px;
 }

 .chapter-slider {
  width: 100%;
-  margin: 8px 0;
+  margin: 8px 0 0;
  accent-color: #c9a96e;
 }

-.chapter-label {
+.vol-ticks {
+  position: relative;
+  height: 20px;
+  margin-top: 2px;
+}
+
+.tick-label {
+  position: absolute;
+  transform: translateX(-50%);
+  font-size: 11px;
+  color: #888;
+  white-space: nowrap;
+}
+
+.vol-info {
  font-size: 12px;
  color: #aaa;
  text-align: center;
+  margin-bottom: 8px;
 }

-.chapter-name {
-  font-size: 13px;
-  color: #e0e0e0;
-  text-align: center;
+/* ====== 关键事件 ====== */
+.events-section {
+  border-top: 1px solid #444;
+  padding-top: 8px;
  margin-top: 4px;
 }

+.events-title {
+  font-size: 12px;
+  color: #c9a96e;
+  margin-bottom: 6px;
+  font-weight: bold;
+}
+
+.event-item {
+  display: flex;
+  gap: 6px;
+  margin: 4px 0;
+  cursor: pointer;
+  padding: 3px 4px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.event-item:hover {
+  background: rgba(201, 169, 110, 0.12);
+}
+
+.event-ch {
+  color: #c9a96e;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.event-text {
+  color: #ccc;
+}
+
 /* ====== 势力详情面板 ====== */
 .info-panel {
  position: absolute;
@@ -474,7 +643,7 @@ function getTerritoryNames(territoryIds) {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #555;
-  width: 320px;
+  width: 340px;
  max-height: 50vh;
  overflow-y: auto;
  color: #e0e0e0;
@@ -504,4 +673,35 @@ function getTerritoryNames(territoryIds) {
  line-height: 1.6;
  margin: 4px 0;
 }
+
+/* ====== 加载进度条 ====== */
+.loading-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: rgba(20, 20, 40, 0.6);
+  z-index: 2000;
+  overflow: hidden;
+}
+
+.loading-inner {
+  height: 100%;
+  background: #c9a96e;
+  transition: width 0.3s ease;
+}
+
+.loading-text {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #c9a96e;
+  background: rgba(20, 20, 40, 0.85);
+  padding: 2px 10px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
 </style>