修改地图前端，加入三部小说

frontend/App.vue

@@ -1,38 +1,66 @@
 <template>
   <div class="map-container">
-    <div id="map"></div>
+    <!-- 小说切换器 -->
+    <div class="novel-selector">
+      <button 
+        v-for="(novel, key) in NOVELS" 
+        :key="key"
+        :class="['novel-btn', { active: activeNovelId === key }]"
+        @click="switchNovel(key)"
+      >
+        {{ novel.name }}
+      </button>
+    </div>
 
-    <div class="map-title">大唐双龙传 - 势力分布地图</div>
+    <!-- 小说切换器 -->
+    <div class="novel-selector">
+      <button 
+        v-for="(novel, key) in NOVELS" 
+        :key="key"
+        :class="['novel-btn', { active: activeNovelId === key }]"
+        @click="switchNovel(key)"
+      >
+        {{ novel.name }}
+      </button>
+    </div>
+
+    <div id="map"></div>
 
     <!-- 势力图例 -->
     <div class="legend">
-      <h3>势力图例</h3>
-      <div
-        v-for="faction in mergedFactions"
-        :key="faction.id"
-        class="legend-item"
-        @click="showFactionInfo(faction)"
-      >
-        <div class="legend-dot" :style="{ background: faction.color }"></div>
-        <span>{{ faction.name }}（{{ faction.leader }}）</span>
+      <div class="legend-block legend-factions">
+        <h3>势力图例</h3>
+        <div class="legend-list legend-faction-list">
+          <div
+            v-for="faction in mergedFactions"
+            :key="faction.id"
+            class="legend-item"
+            @click="showFactionInfo(faction)"
+          >
+            <div class="legend-dot" :style="{ background: faction.color }"></div>
+            <span>{{ faction.name }}（{{ faction.leader }}）</span>
+          </div>
+        </div>
       </div>
 
-      <div class="legend-section">
+      <div class="legend-block legend-routes">
         <h3>人物路线</h3>
-        <div
-          v-for="route in visibleRouteDefs"
-          :key="route.character"
-          class="legend-item"
-          @click="toggleRoute(route)"
-        >
+        <div class="legend-list legend-route-list">
           <div
-            class="legend-line"
-            :style="{
-              background: route.color,
-              opacity: selectedRoutes.includes(route.character) ? 1 : 0.4
-            }"
-          ></div>
-          <span :style="{ opacity: selectedRoutes.includes(route.character) ? 1 : 0.5 }">{{ route.character }}</span>
+            v-for="route in visibleRouteDefs"
+            :key="route.character"
+            class="legend-item"
+            @click="toggleRoute(route)"
+          >
+            <div
+              class="legend-line"
+              :style="{
+                background: route.color,
+                opacity: selectedRoutes.includes(route.character) ? 1 : 0.4
+              }"
+            ></div>
+            <span :style="{ opacity: selectedRoutes.includes(route.character) ? 1 : 0.5 }">{{ route.character }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -46,7 +74,7 @@
           class="chapter-slider"
           v-model.number="currentVol"
           :min="1"
-          :max="63"
+          :max="TOTAL_VOLS"
           @input="onVolSliderChange"
         >
         <div class="vol-ticks">
@@ -59,7 +87,7 @@
         </div>
       </div>
       <div class="vol-info">
-        当前：{{ currentVolLabel }} &nbsp;|&nbsp; 已加载 {{ loadedCount }} / 63 卷
+        当前：{{ currentVolLabel }} &nbsp;|&nbsp; 已加载 {{ loadedCount }} / {{ TOTAL_VOLS }} {{ currentNovel.volsLabel }}
       </div>
 
       <!-- 关键事件列表 -->
@@ -71,7 +99,7 @@
           class="event-item"
           @click="flyToEvent(ev)"
         >
-          <span class="event-ch">第{{ ev.chapter }}章</span>
+          <span class="event-ch">第{{ ev.chapter }}{{ currentNovel.volsLabel === "回" ? "回" : "章" }}</span>
           <span class="event-text">{{ ev.event }}</span>
         </div>
       </div>
@@ -93,13 +121,13 @@
 
     <!-- 加载进度条 -->
     <div class="loading-bar" v-if="isLoading">
-      <div class="loading-inner" :style="{ width: (loadedCount / 63 * 100) + '%' }"></div>
+      <div class="loading-inner" :style="{ width: (loadedCount / TOTAL_VOLS * 100) + '%' }"></div>
       <span class="loading-text">加载数据中… {{ loadedCount }}/63 卷</span>
     </div>
 
     <!-- 智能问答按钮 -->
-    <div class="chat-toggle-btn" @click="toggleChat" v-if="!isChatOpen">
-      💬 智能助手
+    <div class="chat-toggle-btn" @click="toggleChat" v-if="!isChatOpen" title="打开智能助手" aria-label="打开智能助手">
+      💬
     </div>
 
     <!-- 问答面板 -->
@@ -119,7 +147,7 @@
           type="text" 
           v-model="chatInput" 
           @keyup.enter="sendChatMessage" 
-          placeholder="例如：双龙现在在哪里？"
+          :placeholder="currentNovel.chatPlaceholder"
         />
         <button @click="sendChatMessage" :disabled="isChatLoading">发送</button>
       </div>
@@ -131,19 +159,22 @@
 import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+import { NOVELS } from './novel-config.js'
 
 // ── 常量 ────────────────────────────────────────────────────
-const TOTAL_VOLS = 63
-
-// 分离路线定义（全卷 1-63 使用）
+// 分离路线定义（大唐专用）
 const KOUZHONG_NAME  = '寇仲'
 const KOUZHONG_COLOR = '#FF4500'
 const XUZILING_NAME  = '徐子陵'
 const XUZILING_COLOR = '#FFA07A'
 
 // ── 响应式状态 ──────────────────────────────────────────────
+const activeNovelId = ref('dtslz')
+const currentNovel = computed(() => NOVELS[activeNovelId.value])
+const TOTAL_VOLS = computed(() => currentNovel.value.totalVols)
+
 const allData       = ref([])   // 原始卷数据，index 0 = vol01
-const currentVol    = ref(1)    // 1-63
+const currentVol    = ref(1)    // 1-63/50
 const selectedRoutes = ref([])
 const selectedFaction = ref(null)
 const isLoading     = ref(true)
@@ -158,6 +189,35 @@ const chatMessages  = ref([
   { role: 'assistant', content: '您好！我是大唐知识助理。您可以问我关于人物行踪、势力归属、历史事件等方面的问题。' }
 ])
 
+
+
+
+
+// ── 小说切换逻辑 ──────────────────────────────────────────
+async function switchNovel(novelId) {
+  if (activeNovelId.value === novelId) return
+  activeNovelId.value = novelId
+  currentVol.value = 1
+  selectedRoutes.value = []
+  selectedFaction.value = null
+  chatMessages.value = [
+    { role: 'assistant', content: `您好！我是${currentNovel.value.name}知识助理。您可以问我关于人物行踪、势力归属、历史事件等方面的问题。` }
+  ]
+  await loadAllData()
+  
+  if (map) {
+    if (novelId === 'ldj') {
+      map.setView([33.0, 113.0], 5);
+    } else if (novelId === 'tlbb') {
+      map.setView([33.0, 105.0], 5);
+    } else {
+      map.setView([33.0, 113.0], 6);
+    }
+  }
+  
+  drawAll()
+}
+
 // ── Leaflet 图层管理 ────────────────────────────────────────
 let map = null
 let layerGroups = {
@@ -183,7 +243,7 @@ const volTicks = [
 // ── 计算属性：当前卷标签 ────────────────────────────────────
 const currentVolLabel = computed(() => {
   const d = allData.value[currentVol.value - 1]
-  return d ? d.volume : `卷${currentVol.value}`
+  return (d && d.volume) ? d.volume : `第${currentVol.value}${currentNovel.value.volsLabel}`
 })
 
 // ── 跨卷合并数据（截至 currentVol）──────────────────────────
@@ -219,29 +279,54 @@ const mergedFactions = computed(() => {
  */
 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: [] })
+
+    if (activeNovelId.value === 'dtslz' && vol <= 20) {
+      if (d.character_routes) {
+        let combinedRoute = []
+        for (const r of d.character_routes) {
+          if (r.character === KOUZHONG_NAME || r.character === XUZILING_NAME) {
+            combinedRoute = combinedRoute.concat(r.route || [])
+          } else {
+            const name = r.character
+            if (!charMap.has(name)) charMap.set(name, { character: name, color: r.color, route: [] })
+            const entry = charMap.get(name)
+            entry.color = r.color
+            for (const pt of (r.route || [])) entry.route.push({ ...pt, vol })
+          }
+        }
+        if (combinedRoute.length > 0) {
+          const comboName = `${KOUZHONG_NAME} & ${XUZILING_NAME}`
+          if (!charMap.has(comboName)) {
+            charMap.set(comboName, { character: comboName, color: KOUZHONG_COLOR, route: [] })
+          }
+          const entry = charMap.get(comboName)
+          for (const pt of combinedRoute) entry.route.push({ ...pt, vol })
+        }
       }
-      const entry = charMap.get(name)
-      entry.color = r.color
-      for (const pt of (r.route || [])) {
-        entry.route.push({ ...pt, vol })
+    } else {
+      if (d.character_routes) {
+        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 entry = charMap.get(name)
+          entry.color = r.color
+          for (const pt of (r.route || [])) {
+            entry.route.push({ ...pt, vol })
+          }
+        }
       }
     }
   }
   return Array.from(charMap.values())
 })
 
-/**
- * 图例中展示的路线定义（用于点击切换显隐）
- * 与 mergedRoutes 同步，但只保留 character/color
- */
 const visibleRouteDefs = computed(() =>
   mergedRoutes.value.map(r => ({ character: r.character, color: r.color }))
 )
@@ -269,13 +354,13 @@ async function loadAllData() {
   isLoading.value = true
   loadedCount.value = 0
   // 初始化数组长度，确保响应性
-  allData.value = new Array(TOTAL_VOLS).fill(null)
+  allData.value = new Array(TOTAL_VOLS.value).fill(null)
 
   const promises = []
-  for (let i = 1; i <= TOTAL_VOLS; i++) {
+  for (let i = 1; i <= TOTAL_VOLS.value; i++) {
     const volStr = String(i).padStart(2, '0')
     promises.push(
-      fetch(`/data/vol${volStr}.json`)
+      fetch(`/novel-data/${activeNovelId.value}/data/vol${volStr}.json`)
         .then(r => {
           if (!r.ok) throw new Error(`HTTP ${r.status}`)
           return r.json()
@@ -317,10 +402,6 @@ function initMap() {
     { subdomains: '01234567', maxZoom: 18 }
   ).addTo(map)
 
-  L.control.attribution({ prefix: false, position: 'bottomright' })
-    .addAttribution('大唐双龙传 - 黄易')
-    .addTo(map)
-
   // 创建图层组
   layerGroups.territories = L.layerGroup().addTo(map)
   layerGroups.locations   = L.layerGroup().addTo(map)
@@ -397,15 +478,6 @@ function drawLocations() {
     const marker = L.marker([loc.lat, loc.lng], { icon })
       .bindPopup(`<b>${loc.name}</b><br>${loc.description || ''}`)
     layerGroups.locations.addLayer(marker)
-
-    const nameLabel = L.marker([loc.lat - 0.15, loc.lng], {
-      icon: L.divIcon({
-        className: '',
-        html: `<div style="color:#333;font-size:11px;text-shadow:0 0 3px #fff,0 0 6px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;white-space:nowrap;text-align:center">${loc.name}</div>`,
-        iconAnchor: [30, 0]
-      })
-    })
-    layerGroups.locations.addLayer(nameLabel)
   })
 }
 
@@ -606,13 +678,34 @@ function scrollToChatBottom() {
   border-radius: 8px;
   border: 1px solid #555;
   max-width: 220px;
-  max-height: calc(100vh - 60px);
-  overflow-y: auto;
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   font-size: 13px;
   line-height: 1.6;
   color: #e0e0e0;
 }
 
+.legend-block {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.legend-factions {
+  flex: 1 1 auto;
+}
+
+.legend-routes {
+  flex: 0 0 32%;
+}
+
+.legend-list {
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .legend h3 {
   color: #c9a96e;
   margin-bottom: 8px;
@@ -829,18 +922,23 @@ function scrollToChatBottom() {
   z-index: 1000;
   background: rgba(20, 20, 40, 0.92);
   color: #c9a96e;
-  padding: 8px 16px;
-  border-radius: 20px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
   border: 1px solid #c9a96e;
   cursor: pointer;
-  font-weight: bold;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  transition: background 0.3s;
+  transition: background 0.3s, transform 0.2s;
   user-select: none;
 }
 
 .chat-toggle-btn:hover {
   background: rgba(201, 169, 110, 0.2);
+  transform: scale(1.05);
 }
 
 .chat-panel {