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

2026-04-01 14:24:34 +08:00
parent 032e69dc5d
commit 487af59ff6
5 changed files with 621 additions and 89 deletions
--- a/frontend/App.vue
+++ b/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 {
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>大唐双龙传 - 势力分布地图</title>
+  <title>StoryMap</title>
 </head>
 <body>
  <div id="app"></div>
--- a/frontend/novel-config.js
+++ b/frontend/novel-config.js
@@ -0,0 +1,26 @@
+export const NOVELS = {
+  dtslz: {
+    id: 'dtslz',
+    name: '大唐双龙传',
+    title: '大唐双龙传 - 势力分布地图',
+    totalVols: 63,
+    chatPlaceholder: '例如：双龙现在在哪里？',
+    volsLabel: '卷'
+  },
+  ldj: {
+    id: 'ldj',
+    name: '鹿鼎记',
+    title: '鹿鼎记 - 势力分布地图',
+    totalVols: 50,
+    chatPlaceholder: '例如：韦小宝现在在哪里？',
+    volsLabel: '回'
+  },
+  tlbb: {
+    id: 'tlbb',
+    name: '天龙八部',
+    title: '天龙八部 - 势力分布地图',
+    totalVols: 50,
+    chatPlaceholder: '例如：乔峰现在在哪里？',
+    volsLabel: '章'
+  }
+}
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1,17 +1,425 @@
-* { margin: 0; padding: 0; box-sizing: border-box }
-body { font-family: 'Microsoft YaHei', 'SimSun', sans-serif; background: #1a1a2e; color: #e0e0e0 }
-#app { width: 100%; height: 100vh; overflow: hidden }
-#map { width: 100%; height: 100vh }
-#map .leaflet-tile-pane img {
-  filter: sepia(25%) saturate(60%) brightness(102%) contrast(92%);
+html, body, #app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
 }

-.leaflet-popup-content-wrapper {
-  background: rgba(30,30,50,0.95) !important;
-  color: #e0e0e0 !important;
-  border: 1px solid #c9a96e !important;
-  border-radius: 6px !important
+#app, .map-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+  background-color: #000; /* For Dark Matter tile */
+}
+
+/* UI Overlays Default Style */
+.map-title, .legend, .chapter-panel, .info-panel, .chat-panel, .loading-bar, .chat-toggle-btn, .novel-selector {
+  position: absolute;
+  background: rgba(20, 20, 40, 0.9);
+  color: #e0e0e0;
+  border: 1px solid #444;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  padding: 15px;
+}
+
+/* Novel Selector */
+.novel-selector {
+  top: 20px;
+  left: 20px;
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+}
+
+.novel-btn {
+  background: transparent;
+  color: #aaa;
+  border: 1px solid #444;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: bold;
+}
+
+.novel-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.novel-btn.active {
+  background: #c9a96e;
+  border-color: #c9a96e;
+  color: #222;
+}
+
+/* Map Title */
+.map-title {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24px;
+  font-weight: bold;
+  color: #c9a96e;
+  padding: 15px 30px;
+  letter-spacing: 2px;
+}
+
+/* Legend */
+.legend {
+  top: 80px;
+  left: 20px;
+  max-width: 250px;
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+}
+
+.legend h3 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+  color: #c9a96e;
+  border-bottom: 1px solid #444;
+  padding-bottom: 5px;
+}
+
+.legend-section {
+  margin-top: 15px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.legend-item:hover {
+  color: #fff;
+}
+
+.legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+  flex-shrink: 0;
+  box-shadow: 0 0 4px rgba(0,0,0,0.5);
+  border: 1px solid #fff;
+}
+
+.legend-line {
+  width: 20px;
+  height: 3px;
+  margin-right: 8px;
+  flex-shrink: 0;
+  box-shadow: 0 0 3px rgba(0,0,0,0.8);
+}
+
+/* Chapter Progress Panel */
+.chapter-panel {
+  bottom: 20px;
+  right: 20px;
+  width: 500px;
+  padding: 20px;
+}
+
+.vol-slider-wrap {
+  position: relative;
+  margin: 20px 0 30px 0;
+}
+
+.chapter-slider {
+  width: 100%;
+  margin: 0;
+  cursor: pointer;
+  accent-color: #c9a96e;
+}
+
+.vol-ticks {
+  position: absolute;
+  top: 25px;
+  left: 0;
+  right: 0;
+  height: 20px;
+  pointer-events: none;
+}
+
+.tick-label {
+  position: absolute;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #aaa;
+}
+
+.vol-info {
+  text-align: center;
+  font-size: 14px;
+  color: #c9a96e;
+  font-weight: bold;
+}
+
+.events-section {
+  margin-top: 15px;
+  max-height: 120px;
+  overflow-y: auto;
+  border-top: 1px solid #444;
+  padding-top: 10px;
+}
+
+.events-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #c9a96e;
+}
+
+.event-item {
+  display: flex;
+  margin-bottom: 5px;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.event-item:hover {
+  background: rgba(201, 169, 110, 0.2);
+}
+
+.event-ch {
+  color: #c9a96e;
+  min-width: 60px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+/* Info Panel for Factions/Events */
+.info-panel {
+  top: 80px;
+  right: 20px;
+  width: 300px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.info-panel h3 {
+  margin-top: 0;
+  border-bottom: 1px solid #444;
+  padding-bottom: 5px;
+}
+
+.info-panel p {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  cursor: pointer;
+  font-size: 20px;
+  color: #aaa;
+}
+.close-btn:hover {
+  color: #fff;
+}
+
+/* Loading Bar */
+.loading-bar {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 4px;
+  background: #222;
+  border-radius: 0;
+  border: none;
+  padding: 0;
+  z-index: 2000;
+}
+
+.loading-inner {
+  height: 100%;
+  background: #c9a96e;
+  transition: width 0.3s ease;
+}
+
+.loading-text {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 14px;
+  color: #c9a96e;
+  background: rgba(0,0,0,0.8);
+  padding: 5px 15px;
+  border-radius: 4px;
+}
+
+/* Tooltips */
+.city-label-dark, .faction-label-dark {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  color: #e0e0e0;
+  font-weight: bold;
+  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
+  white-space: nowrap;
+}
+
+.faction-label-dark {
+  font-size: 16px;
+  letter-spacing: 2px;
+}
+
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+  background: rgba(30, 30, 40, 0.95);
+  color: #e0e0e0;
+  border: 1px solid #c9a96e;
+}
+.leaflet-popup-content h4 {
+  margin: 0 0 5px 0;
+  color: #c9a96e;
+}
+
+/* Chat AI UI */
+.chat-toggle-btn {
+  bottom: 300px;
+  right: 20px;
+  padding: 12px 20px;
+  border-radius: 30px;
+  background: linear-gradient(135deg, #1a2a6c, #11998e, #38ef7d);
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+  transition: transform 0.2s;
+  z-index: 1001;
+}
+
+.chat-toggle-btn:hover {
+  transform: scale(1.05);
+}
+
+.chat-panel {
+  bottom: 20px;
+  right: 20px;
+  width: 350px;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+
+.chat-header {
+  padding: 15px;
+  background: rgba(30, 40, 80, 0.8);
+  border-bottom: 1px solid #444;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chat-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #00ffcc;
+}
+
+.chat-messages {
+  flex: 1;
+  padding: 15px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chat-bubble {
+  max-width: 85%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.chat-bubble.user {
+  background: #2b5278;
+  color: white;
+  align-self: flex-end;
+  border-bottom-right-radius: 2px;
+}
+
+.chat-bubble.assistant {
+  background: #2a2a35;
+  color: #e0e0e0;
+  border: 1px solid #444;
+  align-self: flex-start;
+  border-bottom-left-radius: 2px;
+}
+
+.chat-bubble.loading {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.chat-input-area {
+  padding: 15px;
+  background: rgba(20, 20, 30, 0.95);
+  border-top: 1px solid #444;
+  display: flex;
+  gap: 10px;
+}
+
+.chat-input-area input {
+  flex: 1;
+  padding: 10px 12px;
+  background: #111;
+  border: 1px solid #555;
+  border-radius: 6px;
+  color: white;
+  outline: none;
+}
+
+.chat-input-area input:focus {
+  border-color: #00ffcc;
+}
+
+.chat-input-area button {
+  padding: 0 15px;
+  background: #1a2a6c;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.chat-input-area button:disabled {
+  background: #444;
+  color: #888;
+  cursor: not-allowed;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #666;
+  border-radius: 3px;
 }
-.leaflet-popup-tip { background: rgba(30,30,50,0.95) !important }
-.leaflet-popup-content { font-size: 13px !important; line-height: 1.5 !important }
-.leaflet-popup-content b { color: #c9a96e }
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -10,12 +10,12 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 export default defineConfig({
  plugins: [
    vue(),
-    // 开发时将 ../data 目录挂载到 /data 路径
    {
      name: 'serve-data-dir',
      configureServer(server) {
-        server.middlewares.use('/data', (req, res, next) => {
-          const filePath = path.resolve(__dirname, '../data', req.url.replace(/^\//, '').split('?')[0])
+        server.middlewares.use('/novel-data', (req, res, next) => {
+          // req.url 会像 /dtslz/data/vol01.json
+          const filePath = path.resolve(__dirname, '..', req.url.replace(/^\//, '').split('?')[0])
          try {
            const content = fs.readFileSync(filePath, 'utf-8')
            res.setHeader('Content-Type', 'application/json; charset=utf-8')