From 15524123f1ce0e6b734922b6e814a30b070be33c Mon Sep 17 00:00:00 2001
From: along <1015042407@qq.com>
Date: Fri, 3 Apr 2026 09:33:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B9=85=E4=BF=AE=E6=94=B9=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/App.vue | 1233 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 870 insertions(+), 363 deletions(-)

diff --git a/frontend/App.vue b/frontend/App.vue
index a18414d..b6cfa0f 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="map-container">
-    <!-- 小说切换器 -->
+    <div class="atmo-bg"></div>
+
     <div class="novel-selector">
-      <button 
-        v-for="(novel, key) in NOVELS" 
+      <button
+        v-for="(novel, key) in NOVELS"
         :key="key"
         :class="['novel-btn', { active: activeNovelId === key }]"
         @click="switchNovel(key)"
@@ -12,27 +13,24 @@
       </button>
     </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 class="map-state-pill">
+      {{ currentNovel.name }} · {{ currentVolLabel }} · 缩放 {{ mapViewState.zoom.toFixed(1) }}
     </div>
 
     <div id="map"></div>
 
-    <!-- 势力图例 -->
     <div class="legend">
       <div class="legend-block legend-factions">
         <h3>势力图例</h3>
+        <input
+          v-model.trim="factionQuery"
+          class="legend-search"
+          type="text"
+          placeholder="搜索势力/首领/人物"
+        >
         <div class="legend-list legend-faction-list">
           <div
-            v-for="faction in mergedFactions"
+            v-for="faction in filteredFactions"
             :key="faction.id"
             class="legend-item"
             @click="showFactionInfo(faction)"
@@ -40,32 +38,75 @@
             <div class="legend-dot" :style="{ background: faction.color }"></div>
             <span>{{ faction.name }}（{{ faction.leader }}）</span>
           </div>
+          <div v-if="!filteredFactions.length" class="empty-tip">未匹配到势力</div>
         </div>
       </div>
 
       <div class="legend-block legend-routes">
         <h3>人物路线</h3>
+        <input
+          v-model.trim="routeQuery"
+          class="legend-search"
+          type="text"
+          placeholder="搜索人物路线"
+        >
+
+        <div class="route-toolbar">
+          <button class="mini-btn" @click="selectTopRoutes">显示高频路线</button>
+          <button class="mini-btn" @click="clearAllRoutes">清空</button>
+          <button class="mini-btn" :class="{ active: showRouteOrder }" @click="showRouteOrder = !showRouteOrder">
+            {{ showRouteOrder ? '顺序标记:开' : '顺序标记:关' }}
+          </button>
+        </div>
+
         <div class="legend-list legend-route-list">
           <div
-            v-for="route in visibleRouteDefs"
+            v-for="route in filteredRouteDefs"
             :key="route.character"
-            class="legend-item"
+            class="legend-item route-item"
             @click="toggleRoute(route)"
           >
             <div
               class="legend-line"
               :style="{
                 background: route.color,
-                opacity: selectedRoutes.includes(route.character) ? 1 : 0.4
+                opacity: selectedRoutes.includes(route.character) ? 1 : 0.35
               }"
             ></div>
-            <span :style="{ opacity: selectedRoutes.includes(route.character) ? 1 : 0.5 }">{{ route.character }}</span>
+            <span :style="{ opacity: selectedRoutes.includes(route.character) ? 1 : 0.55 }">{{ route.character }}</span>
+            <button
+              v-if="selectedRoutes.includes(route.character)"
+              class="focus-btn"
+              :class="{ active: focusedRouteName === route.character }"
+              @click.stop="focusRoute(route.character)"
+            >
+              {{ focusedRouteName === route.character ? '聚焦中' : '聚焦' }}
+            </button>
+          </div>
+          <div v-if="!filteredRouteDefs.length" class="empty-tip">未匹配到路线</div>
+        </div>
+      </div>
+
+      <div class="route-insight" v-if="focusedRouteSteps.length">
+        <div class="insight-header">
+          <span>路线细读：{{ focusedRouteName }}</span>
+          <button class="mini-btn" @click="clearRouteFocus">退出聚焦</button>
+        </div>
+        <div class="insight-list">
+          <div
+            v-for="(step, idx) in focusedRouteSteps"
+            :key="`${focusedRouteName}-${idx}`"
+            class="insight-item"
+            @click="flyToRouteStep(step)"
+          >
+            <span class="step-idx">{{ idx + 1 }}</span>
+            <span class="step-main">{{ step.locationName }}</span>
+            <span class="step-sub">卷{{ step.vol || '?' }} 第{{ step.chapter || '?' }}{{ currentNovel.volsLabel }}</span>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 卷册进度面板 -->
     <div class="chapter-panel">
       <h3>卷册进度</h3>
       <div class="vol-slider-wrap">
@@ -87,10 +128,31 @@
         </div>
       </div>
       <div class="vol-info">
-        当前：{{ currentVolLabel }} &nbsp;|&nbsp; 已加载 {{ loadedCount }} / {{ TOTAL_VOLS }} {{ currentNovel.volsLabel }}
+        当前：{{ currentVolLabel }} | 已加载 {{ loadedCount }} / {{ TOTAL_VOLS }} {{ currentNovel.volsLabel }}
+      </div>
+
+      <div class="search-panel">
+        <div class="events-title">地图搜索</div>
+        <input
+          v-model.trim="mapSearchQuery"
+          class="map-search-input"
+          type="text"
+          placeholder="搜地点 / 势力 / 人物"
+        >
+        <div class="search-results" v-if="mapSearchQuery">
+          <div
+            v-for="result in globalSearchResults"
+            :key="result.key"
+            class="search-result-item"
+            @click="applySearchResult(result)"
+          >
+            <span class="search-type">{{ result.type }}</span>
+            <span class="search-name">{{ result.name }}</span>
+          </div>
+          <div v-if="!globalSearchResults.length" class="empty-tip">暂无匹配</div>
+        </div>
       </div>
 
-      <!-- 关键事件列表 -->
       <div class="events-section" v-if="currentKeyEvents.length">
         <div class="events-title">本卷关键事件</div>
         <div
@@ -99,13 +161,12 @@
           class="event-item"
           @click="flyToEvent(ev)"
         >
-          <span class="event-ch">第{{ ev.chapter }}{{ currentNovel.volsLabel === "回" ? "回" : "章" }}</span>
+          <span class="event-ch">第{{ ev.chapter }}{{ currentNovel.volsLabel }}</span>
           <span class="event-text">{{ ev.event }}</span>
         </div>
       </div>
     </div>
 
-    <!-- 势力详情面板 -->
     <div class="info-panel" v-if="selectedFaction">
       <span class="close-btn" @click="selectedFaction = null">&times;</span>
       <h3 :style="{ color: selectedFaction.color }">{{ selectedFaction.name }}</h3>
@@ -119,23 +180,31 @@
       </p>
     </div>
 
-    <!-- 加载进度条 -->
     <div class="loading-bar" v-if="isLoading">
       <div class="loading-inner" :style="{ width: (loadedCount / TOTAL_VOLS * 100) + '%' }"></div>
-      <span class="loading-text">加载数据中… {{ loadedCount }}/63 卷</span>
+      <span class="loading-text">加载数据中… {{ loadedCount }}/{{ TOTAL_VOLS }} {{ currentNovel.volsLabel }}</span>
     </div>
 
-    <!-- 智能问答按钮 -->
     <div class="chat-toggle-btn" @click="toggleChat" v-if="!isChatOpen" title="打开智能助手" aria-label="打开智能助手">
-      💬
+      智能问答
     </div>
 
-    <!-- 问答面板 -->
     <div class="chat-panel" v-show="isChatOpen">
       <div class="chat-header">
-        <h3>💬 知识问答</h3>
+        <h3>知识问答</h3>
         <span class="close-btn" @click="toggleChat">&times;</span>
       </div>
+
+      <div class="chat-context-panel">
+        <label>
+          <input type="checkbox" v-model="includeMapContext">
+          把当前地图上下文一起发给助手
+        </label>
+        <div class="context-preview" v-if="includeMapContext">
+          {{ mapContextSummary }}
+        </div>
+      </div>
+
       <div class="chat-messages" ref="chatMessagesRef">
         <div v-for="(msg, idx) in chatMessages" :key="idx" :class="['chat-bubble', msg.role]">
           {{ msg.content }}
@@ -143,12 +212,12 @@
         <div v-if="isChatLoading" class="chat-bubble assistant loading">思索中...</div>
       </div>
       <div class="chat-input-area">
-        <input 
-          type="text" 
-          v-model="chatInput" 
-          @keyup.enter="sendChatMessage" 
+        <input
+          type="text"
+          v-model="chatInput"
+          @keyup.enter="sendChatMessage"
           :placeholder="currentNovel.chatPlaceholder"
-        />
+        >
         <button @click="sendChatMessage" :disabled="isChatLoading">发送</button>
       </div>
     </div>
@@ -162,59 +231,70 @@ import 'leaflet/dist/leaflet.css'
 import { NOVELS } from './novel-config.js'
 
 // ── 常量 ────────────────────────────────────────────────────
-// 分离路线定义（大唐专用）
-const KOUZHONG_NAME  = '寇仲'
-const KOUZHONG_COLOR = '#FF4500'
-const XUZILING_NAME  = '徐子陵'
-const XUZILING_COLOR = '#FFA07A'
+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/50
+const allData = ref([])
+const currentVol = ref(1)
 const selectedRoutes = ref([])
+const focusedRouteName = ref('')
+const showRouteOrder = ref(true)
 const selectedFaction = ref(null)
-const isLoading     = ref(true)
-const loadedCount   = ref(0)
+const isLoading = ref(true)
+const loadedCount = ref(0)
+const mapViewState = ref({ center: [33.0, 113.0], zoom: 6 })
+const lastInteraction = ref('')
+
+const factionQuery = ref('')
+const routeQuery = ref('')
+const mapSearchQuery = ref('')
 
 // ── 问答系统状态 ────────────────────────────────────────────
-const isChatOpen    = ref(false)
-const chatInput     = ref('')
+const isChatOpen = ref(false)
+const chatInput = ref('')
 const isChatLoading = ref(false)
+const includeMapContext = ref(true)
 const chatMessagesRef = ref(null)
-const chatMessages  = ref([
-  { role: 'assistant', content: '您好！我是大唐知识助理。您可以问我关于人物行踪、势力归属、历史事件等方面的问题。' }
+const chatMessages = ref([
+  { role: 'assistant', content: '您好！我是知识助理。我可以结合你当前浏览的地图状态回答问题。' }
 ])
 
-
-
-
-
 // ── 小说切换逻辑 ──────────────────────────────────────────
 async function switchNovel(novelId) {
   if (activeNovelId.value === novelId) return
+
   activeNovelId.value = novelId
   currentVol.value = 1
   selectedRoutes.value = []
+  focusedRouteName.value = ''
   selectedFaction.value = null
+  factionQuery.value = ''
+  routeQuery.value = ''
+  mapSearchQuery.value = ''
+
   chatMessages.value = [
-    { role: 'assistant', content: `您好！我是${currentNovel.value.name}知识助理。您可以问我关于人物行踪、势力归属、历史事件等方面的问题。` }
+    { role: 'assistant', content: `您好！我是${currentNovel.value.name}知识助理。你可以问人物行踪、势力分布、章节事件。` }
   ]
+
   await loadAllData()
-  
+
   if (map) {
     if (novelId === 'ldj') {
-      map.setView([33.0, 113.0], 5);
+      map.setView([33.0, 113.0], 5)
     } else if (novelId === 'tlbb') {
-      map.setView([33.0, 105.0], 5);
+      map.setView([33.0, 105.0], 5)
     } else {
-      map.setView([33.0, 113.0], 6);
+      map.setView([33.0, 113.0], 6)
     }
   }
-  
+
   drawAll()
 }
 
@@ -222,33 +302,31 @@ async function switchNovel(novelId) {
 let map = null
 let layerGroups = {
   territories: null,
-  locations:   null,
-  routes:      null,
-  events:      null
+  locations: null,
+  routes: null,
+  events: null
 }
 
-// ── 滑块刻度（每约10卷一个）─────────────────────────────────
-// 滑块范围 1-63，共 62 步
-// pct = (vol - 1) / (63 - 1) * 100
-const volTicks = [
-  { vol: 1,  label: '卷一',     pct: 0                              },
-  { vol: 10, label: '卷十',     pct: (9  / 62 * 100).toFixed(3) * 1 },
-  { vol: 20, label: '卷二十',   pct: (19 / 62 * 100).toFixed(3) * 1 },
-  { vol: 30, label: '卷三十',   pct: (29 / 62 * 100).toFixed(3) * 1 },
-  { vol: 40, label: '卷四十',   pct: (39 / 62 * 100).toFixed(3) * 1 },
-  { vol: 50, label: '卷五十',   pct: (49 / 62 * 100).toFixed(3) * 1 },
-  { vol: 63, label: '卷六十三', pct: 100                             }
-]
-
-// ── 计算属性：当前卷标签 ────────────────────────────────────
+// ── 计算属性 ───────────────────────────────────────────────
 const currentVolLabel = computed(() => {
   const d = allData.value[currentVol.value - 1]
   return (d && d.volume) ? d.volume : `第${currentVol.value}${currentNovel.value.volsLabel}`
 })
 
-// ── 跨卷合并数据（截至 currentVol）──────────────────────────
+const volTicks = computed(() => {
+  const maxVol = TOTAL_VOLS.value
+  const points = new Set([1, maxVol])
+  for (let i = 1; i <= 4; i++) {
+    points.add(Math.max(1, Math.min(maxVol, Math.round((maxVol - 1) * (i / 5)) + 1)))
+  }
+
+  return [...points].sort((a, b) => a - b).map((vol) => ({
+    vol,
+    label: `${vol}${currentNovel.value.volsLabel}`,
+    pct: maxVol === 1 ? 0 : ((vol - 1) / (maxVol - 1) * 100).toFixed(2)
+  }))
+})
 
-// 地点：按 id 去重，取最新卷定义
 const mergedLocations = computed(() => {
   const locMap = new Map()
   for (let i = 0; i < currentVol.value; i++) {
@@ -261,7 +339,6 @@ const mergedLocations = computed(() => {
   return Array.from(locMap.values())
 })
 
-// 势力：按 id 去重，取最新卷定义
 const mergedFactions = computed(() => {
   const facMap = new Map()
   for (let i = 0; i < currentVol.value; i++) {
@@ -274,9 +351,6 @@ const mergedFactions = computed(() => {
   return Array.from(facMap.values())
 })
 
-/**
- * 合并人物路线（全卷 1-63，寇仲和徐子陵全程分开显示）
- */
 const mergedRoutes = computed(() => {
   const charMap = new Map()
 
@@ -286,74 +360,161 @@ const mergedRoutes = computed(() => {
     const vol = i + 1
 
     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 })
-          }
+      let combinedRoute = []
+      for (const r of (d.character_routes || [])) {
+        if (r.character === KOUZHONG_NAME || r.character === XUZILING_NAME) {
+          combinedRoute = combinedRoute.concat(r.route || [])
+          continue
         }
-        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 })
+        if (!charMap.has(r.character)) {
+          charMap.set(r.character, { character: r.character, color: r.color, route: [] })
         }
+        const entry = charMap.get(r.character)
+        entry.color = r.color
+        for (const pt of (r.route || [])) entry.route.push({ ...pt, vol })
+      }
+
+      if (combinedRoute.length) {
+        const comboName = `${KOUZHONG_NAME} & ${XUZILING_NAME}`
+        if (!charMap.has(comboName)) {
+          charMap.set(comboName, { character: comboName, color: KOUZHONG_COLOR, route: [] })
+        }
+        const combo = charMap.get(comboName)
+        combo.color = combo.color || XUZILING_COLOR
+        for (const pt of combinedRoute) combo.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 })
-          }
+      for (const r of (d.character_routes || [])) {
+        if (!charMap.has(r.character)) {
+          charMap.set(r.character, { character: r.character, color: r.color, route: [] })
         }
+        const entry = charMap.get(r.character)
+        entry.color = r.color
+        for (const pt of (r.route || [])) entry.route.push({ ...pt, vol })
       }
     }
   }
-  return Array.from(charMap.values())
+
+  return Array.from(charMap.values()).sort((a, b) => b.route.length - a.route.length)
 })
 
-const visibleRouteDefs = computed(() =>
-  mergedRoutes.value.map(r => ({ character: r.character, color: r.color }))
-)
+const visibleRouteDefs = computed(() => mergedRoutes.value.map(r => ({
+  character: r.character,
+  color: r.color,
+  points: r.route.length
+})))
+
+const filteredFactions = computed(() => {
+  const q = factionQuery.value.toLowerCase()
+  if (!q) return mergedFactions.value
+  return mergedFactions.value.filter((f) => {
+    const figures = Array.isArray(f.key_figures) ? f.key_figures.join(' ') : ''
+    return (`${f.name} ${f.leader || ''} ${figures}`).toLowerCase().includes(q)
+  })
+})
+
+const filteredRouteDefs = computed(() => {
+  const q = routeQuery.value.toLowerCase()
+  if (!q) return visibleRouteDefs.value
+  return visibleRouteDefs.value.filter((r) => r.character.toLowerCase().includes(q))
+})
 
-// 当前卷关键事件
 const currentKeyEvents = computed(() => {
   const d = allData.value[currentVol.value - 1]
   return d ? (d.key_events || []) : []
 })
 
+const focusedRouteData = computed(() =>
+  mergedRoutes.value.find((r) => r.character === focusedRouteName.value) || null
+)
+
+const focusedRouteSteps = computed(() => {
+  if (!focusedRouteData.value) return []
+  const locMap = new Map(mergedLocations.value.map((l) => [l.id, l]))
+
+  return (focusedRouteData.value.route || [])
+    .map((pt, idx) => {
+      const coords = getPointCoords(pt, mergedLocations.value)
+      if (!coords) return null
+      const loc = pt.location ? locMap.get(pt.location) : null
+      return {
+        idx,
+        lat: coords.lat,
+        lng: coords.lng,
+        chapter: pt.chapter,
+        vol: pt.vol,
+        event: pt.event,
+        locationName: loc?.name || pt.location || `坐标点 ${idx + 1}`
+      }
+    })
+    .filter(Boolean)
+})
+
+const globalSearchResults = computed(() => {
+  const q = mapSearchQuery.value.trim().toLowerCase()
+  if (!q) return []
+
+  const locationHits = mergedLocations.value
+    .filter((l) => `${l.name} ${l.id}`.toLowerCase().includes(q))
+    .slice(0, 6)
+    .map((l) => ({ key: `loc-${l.id}`, type: '地点', name: l.name, payload: l }))
+
+  const factionHits = mergedFactions.value
+    .filter((f) => `${f.name} ${f.leader || ''}`.toLowerCase().includes(q))
+    .slice(0, 5)
+    .map((f) => ({ key: `fac-${f.id}`, type: '势力', name: f.name, payload: f }))
+
+  const routeHits = visibleRouteDefs.value
+    .filter((r) => r.character.toLowerCase().includes(q))
+    .slice(0, 5)
+    .map((r) => ({ key: `route-${r.character}`, type: '人物', name: r.character, payload: r }))
+
+  return [...locationHits, ...factionHits, ...routeHits].slice(0, 12)
+})
+
+const mapContextSummary = computed(() => {
+  const center = mapViewState.value.center
+  const selected = selectedRoutes.value.length ? selectedRoutes.value.slice(0, 5).join('、') : '无'
+  const focused = focusedRouteName.value || '无'
+  const faction = selectedFaction.value?.name || '无'
+  const eventTitles = currentKeyEvents.value.slice(0, 3).map((e) => e.event).join('；') || '无'
+
+  return [
+    `小说=${currentNovel.value.name}`,
+    `进度=${currentVolLabel.value}`,
+    `地图中心=(${center[0].toFixed(2)}, ${center[1].toFixed(2)})`,
+    `缩放=${mapViewState.value.zoom.toFixed(1)}`,
+    `当前选中路线=${selected}`,
+    `当前聚焦人物=${focused}`,
+    `当前势力面板=${faction}`,
+    `本卷关键事件=${eventTitles}`,
+    `最近地图操作=${lastInteraction.value || '无'}`
+  ].join(' | ')
+})
+
 // ── 生命周期 ────────────────────────────────────────────────
 onMounted(async () => {
   initMap()
   await loadAllData()
+  selectTopRoutes()
   drawAll()
 })
 
-// 监听 currentVol 变化重绘
 watch(currentVol, () => {
+  if (focusedRouteName.value && !visibleRouteDefs.value.find((r) => r.character === focusedRouteName.value)) {
+    focusedRouteName.value = ''
+  }
   drawAll()
 })
 
+watch(activeNovelId, () => {
+  focusedRouteName.value = ''
+})
+
 // ── 数据加载 ────────────────────────────────────────────────
 async function loadAllData() {
   isLoading.value = true
   loadedCount.value = 0
-  // 初始化数组长度，确保响应性
   allData.value = new Array(TOTAL_VOLS.value).fill(null)
 
   const promises = []
@@ -361,23 +522,23 @@ async function loadAllData() {
     const volStr = String(i).padStart(2, '0')
     promises.push(
       fetch(`/novel-data/${activeNovelId.value}/data/vol${volStr}.json`)
-        .then(r => {
+        .then((r) => {
           if (!r.ok) throw new Error(`HTTP ${r.status}`)
           return r.json()
         })
-        .then(data => {
+        .then((data) => {
           allData.value[i - 1] = data
           loadedCount.value++
         })
-        .catch(err => {
+        .catch((err) => {
           console.warn(`vol${volStr}.json 加载失败`, err)
           loadedCount.value++
         })
     )
   }
+
   await Promise.all(promises)
   isLoading.value = false
-  // 触发响应式更新（替换整个数组引用）
   allData.value = [...allData.value]
 }
 
@@ -391,22 +552,28 @@ function initMap() {
   })
 
   const TIANDITU_KEY = '5316253e2d2d21b707996f1f5748839d'
-  // 矢量底图（白底行政区划）
   L.tileLayer(
     `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,
     { subdomains: '01234567', maxZoom: 18 }
   ).addTo(map)
-  // 中文地名标注层（叠加在底图上）
+
   L.tileLayer(
     `https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${TIANDITU_KEY}`,
     { subdomains: '01234567', maxZoom: 18 }
   ).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)
+  layerGroups.locations = L.layerGroup().addTo(map)
+  layerGroups.routes = L.layerGroup().addTo(map)
+  layerGroups.events = L.layerGroup().addTo(map)
+
+  map.on('moveend zoomend', () => {
+    const center = map.getCenter()
+    mapViewState.value = {
+      center: [center.lat, center.lng],
+      zoom: map.getZoom()
+    }
+  })
 }
 
 // ── 全量重绘 ────────────────────────────────────────────────
@@ -419,25 +586,26 @@ function drawAll() {
 }
 
 function clearLayerGroups() {
-  Object.values(layerGroups).forEach(lg => lg && lg.clearLayers())
+  Object.values(layerGroups).forEach((lg) => lg && lg.clearLayers())
 }
 
 // ── 绘制势力领地 ────────────────────────────────────────────
 function drawTerritories() {
   const locs = mergedLocations.value
-  mergedFactions.value.forEach(f => {
+  mergedFactions.value.forEach((f) => {
     if (!f.territory || !f.territory.length) return
-    f.territory.forEach(tid => {
-      const loc = locs.find(l => l.id === tid)
+
+    f.territory.forEach((tid) => {
+      const loc = locs.find((l) => l.id === tid)
       if (!loc) return
 
       const circle = L.circle([loc.lat, loc.lng], {
         radius: 50000,
         color: f.color,
         fillColor: f.color,
-        fillOpacity: 0.12,
+        fillOpacity: 0.1,
         weight: 2,
-        opacity: 0.5,
+        opacity: 0.45,
         dashArray: '6 4'
       })
       layerGroups.territories.addLayer(circle)
@@ -445,7 +613,7 @@ function drawTerritories() {
       const label = L.marker([loc.lat + 0.35, loc.lng], {
         icon: L.divIcon({
           className: '',
-          html: `<div style="color:${f.color};font-size:11px;font-weight:bold;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">${f.name}</div>`,
+          html: `<div style="color:${f.color};font-size:11px;font-weight:bold;text-shadow:0 0 3px #fff,0 0 6px #fff;white-space:nowrap;text-align:center">${f.name}</div>`,
           iconAnchor: [30, 8]
         })
       })
@@ -458,8 +626,9 @@ function drawTerritories() {
 function drawLocations() {
   const locs = mergedLocations.value
   const facs = mergedFactions.value
-  locs.forEach(loc => {
-    let markerColor = '#aaa'
+
+  locs.forEach((loc) => {
+    let markerColor = '#919191'
     for (const f of facs) {
       if (f.territory && f.territory.includes(loc.id)) {
         markerColor = f.color
@@ -470,13 +639,18 @@ function drawLocations() {
     const size = loc.type === 'city' ? 10 : loc.type === 'landmark' ? 8 : 6
     const icon = L.divIcon({
       className: '',
-      html: `<div style="width:${size}px;height:${size}px;background:${markerColor};border:2px solid #fff;border-radius:50%;box-shadow:0 0 6px ${markerColor}"></div>`,
+      html: `<div style="width:${size}px;height:${size}px;background:${markerColor};border:2px solid #fff;border-radius:50%;box-shadow:0 0 8px ${markerColor}"></div>`,
       iconSize: [size, size],
       iconAnchor: [size / 2, size / 2]
     })
 
     const marker = L.marker([loc.lat, loc.lng], { icon })
       .bindPopup(`<b>${loc.name}</b><br>${loc.description || ''}`)
+
+    marker.on('click', () => {
+      lastInteraction.value = `查看地点 ${loc.name}`
+    })
+
     layerGroups.locations.addLayer(marker)
   })
 }
@@ -484,52 +658,76 @@ function drawLocations() {
 // ── 绘制人物路线 ────────────────────────────────────────────
 function drawRoutes() {
   const locs = mergedLocations.value
-  mergedRoutes.value.forEach(route => {
+  const focus = focusedRouteName.value
+  const hasFocus = Boolean(focus)
+
+  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)
+    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)
+
+    if (resolved.length < 2) return
+
+    const isFocused = focus === route.character
+    const lineOpacity = hasFocus ? (isFocused ? 0.95 : 0.15) : 0.8
+    const lineWeight = hasFocus ? (isFocused ? 4 : 2) : 3
 
     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
+        weight: lineWeight,
+        opacity: lineOpacity
       })
       layerGroups.routes.addLayer(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]
+      if (!hasFocus || isFocused) {
+        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:13px;font-weight:bold;transform:rotate(${angle}deg);text-shadow:0 0 3px rgba(0,0,0,0.8)">➤</div>`,
+            iconAnchor: [6, 6]
+          })
         })
-      })
-      layerGroups.routes.addLayer(arrow)
+        layerGroups.routes.addLayer(arrow)
+      }
     }
 
     resolved.forEach((p, idx) => {
-      const isEnd   = idx === resolved.length - 1
       const isStart = idx === 0
-      const size    = (isStart || isEnd) ? 7 : 5
+      const isEnd = idx === resolved.length - 1
 
       const dot = L.circleMarker([p.lat, p.lng], {
-        radius: size,
+        radius: isFocused ? (isStart || isEnd ? 7 : 6) : (isStart || isEnd ? 6 : 4),
         color: route.color,
         fillColor: isEnd ? '#fff' : route.color,
-        fillOpacity: 0.9,
-        weight: 2
-      }).bindPopup(`<b>${route.character}</b><br>卷${p.vol || '?'} 第${p.chapter}章<br>${p.event || ''}`)
+        fillOpacity: hasFocus ? (isFocused ? 0.95 : 0.2) : 0.9,
+        weight: isFocused ? 2 : 1
+      }).bindPopup(`<b>${route.character}</b><br>卷${p.vol || '?'} 第${p.chapter || '?'}${currentNovel.value.volsLabel}<br>${p.event || ''}`)
       layerGroups.routes.addLayer(dot)
+
+      if (isFocused && showRouteOrder.value) {
+        const tag = isStart ? '起' : (isEnd ? '终' : `${idx + 1}`)
+        const tagMarker = L.marker([p.lat, p.lng], {
+          icon: L.divIcon({
+            className: 'route-order-tag',
+            html: `<div class="order-badge" style="border-color:${route.color};color:${route.color}">${tag}</div>`,
+            iconSize: [24, 24],
+            iconAnchor: [12, 12]
+          })
+        })
+        layerGroups.routes.addLayer(tagMarker)
+      }
     })
   })
 }
@@ -540,7 +738,7 @@ function getPointCoords(point, locs) {
     return { lat: point.lat, lng: point.lng }
   }
   if (point.location) {
-    const loc = locs.find(l => l.id === point.location)
+    const loc = locs.find((l) => l.id === point.location)
     if (loc) return { lat: loc.lat, lng: loc.lng }
   }
   return null
@@ -550,26 +748,69 @@ function toggleRoute(route) {
   const idx = selectedRoutes.value.indexOf(route.character)
   if (idx > -1) {
     selectedRoutes.value.splice(idx, 1)
+    if (focusedRouteName.value === route.character) {
+      focusedRouteName.value = ''
+    }
   } else {
     selectedRoutes.value.push(route.character)
+    if (!focusedRouteName.value) {
+      focusedRouteName.value = route.character
+    }
   }
+  drawRoutesOnly()
+}
+
+function focusRoute(character) {
+  focusedRouteName.value = focusedRouteName.value === character ? '' : character
+  if (!selectedRoutes.value.includes(character)) {
+    selectedRoutes.value.push(character)
+  }
+  drawRoutesOnly()
+}
+
+function clearRouteFocus() {
+  focusedRouteName.value = ''
+  drawRoutesOnly()
+}
+
+function clearAllRoutes() {
+  selectedRoutes.value = []
+  focusedRouteName.value = ''
+  drawRoutesOnly()
+}
+
+function selectTopRoutes() {
+  const top = mergedRoutes.value.slice(0, 4).map((r) => r.character)
+  selectedRoutes.value = top
+  focusedRouteName.value = top[0] || ''
+  drawRoutesOnly()
+}
+
+function drawRoutesOnly() {
+  if (!layerGroups.routes) return
   layerGroups.routes.clearLayers()
   drawRoutes()
 }
 
 function showFactionInfo(faction) {
   selectedFaction.value = faction
+  if (Array.isArray(faction.territory) && faction.territory.length) {
+    const loc = mergedLocations.value.find((l) => l.id === faction.territory[0])
+    if (loc && map) {
+      map.flyTo([loc.lat, loc.lng], 7, { duration: 1.1 })
+    }
+  }
 }
 
 function getTerritoryNames(territoryIds) {
-  return territoryIds.map(tid => {
-    const loc = mergedLocations.value.find(l => l.id === tid)
+  return territoryIds.map((tid) => {
+    const loc = mergedLocations.value.find((l) => l.id === tid)
     return loc ? loc.name : tid
   })
 }
 
 function onVolSliderChange() {
-  // currentVol 已由 v-model 更新，watch 会触发 drawAll
+  lastInteraction.value = `切换到 ${currentVolLabel.value}`
 }
 
 function flyToEvent(ev) {
@@ -578,14 +819,46 @@ function flyToEvent(ev) {
   if (ev.lat && ev.lng) {
     coords = [ev.lat, ev.lng]
   } else if (ev.location) {
-    const loc = locs.find(l => l.id === ev.location)
+    const loc = locs.find((l) => l.id === ev.location)
     if (loc) coords = [loc.lat, loc.lng]
   }
   if (coords && map) {
+    lastInteraction.value = `查看事件 ${ev.event}`
     map.flyTo(coords, 8, { duration: 1.2 })
   }
 }
 
+function flyToRouteStep(step) {
+  if (!map) return
+  lastInteraction.value = `查看路线节点 ${step.locationName}`
+  map.flyTo([step.lat, step.lng], 8, { duration: 1 })
+}
+
+function applySearchResult(result) {
+  if (result.type === '地点' && result.payload) {
+    const loc = result.payload
+    if (map) map.flyTo([loc.lat, loc.lng], 8, { duration: 1 })
+    lastInteraction.value = `搜索到地点 ${loc.name}`
+    return
+  }
+
+  if (result.type === '势力' && result.payload) {
+    showFactionInfo(result.payload)
+    lastInteraction.value = `搜索到势力 ${result.payload.name}`
+    return
+  }
+
+  if (result.type === '人物' && result.payload) {
+    const route = result.payload
+    if (!selectedRoutes.value.includes(route.character)) {
+      selectedRoutes.value.push(route.character)
+    }
+    focusedRouteName.value = route.character
+    drawRoutesOnly()
+    lastInteraction.value = `搜索到人物 ${route.character}`
+  }
+}
+
 // ── 智能问答逻辑 ────────────────────────────────────────────
 function toggleChat() {
   isChatOpen.value = !isChatOpen.value
@@ -597,22 +870,26 @@ function toggleChat() {
 async function sendChatMessage() {
   const text = chatInput.value.trim()
   if (!text || isChatLoading.value) return
-  
+
   chatMessages.value.push({ role: 'user', content: text })
   chatInput.value = ''
   isChatLoading.value = true
   scrollToChatBottom()
 
+  const question = includeMapContext.value
+    ? `【地图上下文】\n${mapContextSummary.value}\n\n【用户问题】\n${text}`
+    : text
+
   try {
-    const res = await fetch('http://StoryMapAI.api.digitalmars.com.cn/api/chat', {
+    const res = await fetch('/api/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ question: text })
+      body: JSON.stringify({ question })
     })
-    
+
     if (!res.ok) throw new Error(`HTTP ${res.status}`)
     const data = await res.json()
-    chatMessages.value.push({ role: 'assistant', content: data.answer })
+    chatMessages.value.push({ role: 'assistant', content: data.answer || '助手暂时没有返回结果。' })
   } catch (err) {
     console.error('Chat error:', err)
     chatMessages.value.push({ role: 'assistant', content: '抱歉，连接知识库失败，请稍后再试。' })
@@ -632,11 +909,27 @@ function scrollToChatBottom() {
 </script>
 
 <style scoped>
+:root {
+  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
+}
+
 .map-container {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
+  color: #f0ead9;
+}
+
+.atmo-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 12% 15%, rgba(220, 188, 121, 0.25), transparent 38%),
+    radial-gradient(circle at 88% 72%, rgba(121, 173, 220, 0.15), transparent 36%),
+    linear-gradient(120deg, rgba(18, 23, 34, 0.12), rgba(38, 25, 16, 0.1));
+  z-index: 0;
+  pointer-events: none;
 }
 
 #map {
@@ -648,43 +941,71 @@ function scrollToChatBottom() {
   z-index: 0;
 }
 
-.map-title {
+.novel-selector,
+.legend,
+.chapter-panel,
+.info-panel,
+.chat-panel,
+.map-state-pill,
+.chat-toggle-btn {
   position: absolute;
-  top: 10px;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 1000;
-  background: rgba(20, 20, 40, 0.9);
-  padding: 8px 24px;
-  border-radius: 8px;
-  border: 1px solid #c9a96e;
-  font-size: 20px;
-  font-weight: bold;
-  color: #c9a96e;
-  letter-spacing: 4px;
-  text-shadow: 0 0 10px rgba(201, 169, 110, 0.5);
-  pointer-events: none;
-  white-space: nowrap;
+  background: linear-gradient(160deg, rgba(14, 19, 30, 0.92), rgba(36, 27, 21, 0.88));
+  border: 1px solid rgba(201, 169, 110, 0.55);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+}
+
+.novel-selector {
+  top: 16px;
+  left: 16px;
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 10px;
+}
+
+.novel-btn {
+  background: transparent;
+  color: #d6d0bf;
+  border: 1px solid rgba(201, 169, 110, 0.35);
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.novel-btn:hover {
+  border-color: rgba(201, 169, 110, 0.75);
+  transform: translateY(-1px);
+}
+
+.novel-btn.active {
+  background: #c9a96e;
+  color: #1b140d;
+  border-color: #c9a96e;
+  font-weight: 700;
+}
+
+.map-state-pill {
+  top: 72px;
+  left: 16px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  font-size: 12px;
 }
 
-/* ====== 势力图例 ====== */
 .legend {
-  position: absolute;
-  bottom: 20px;
-  left: 10px;
-  z-index: 1000;
-  background: rgba(20, 20, 40, 0.92);
-  padding: 12px 16px;
-  border-radius: 8px;
-  border: 1px solid #555;
-  max-width: 220px;
-  height: calc(100vh - 60px);
+  bottom: 14px;
+  left: 12px;
+  width: 320px;
+  max-height: calc(100vh - 160px);
+  border-radius: 12px;
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #e0e0e0;
+  gap: 10px;
+  overflow: hidden;
 }
 
 .legend-block {
@@ -698,7 +1019,25 @@ function scrollToChatBottom() {
 }
 
 .legend-routes {
-  flex: 0 0 32%;
+  flex: 1 1 auto;
+}
+
+.legend h3 {
+  color: #e6c27a;
+  margin: 0 0 8px;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+}
+
+.legend-search {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid rgba(201, 169, 110, 0.35);
+  background: rgba(8, 11, 18, 0.55);
+  color: #f6f2e7;
+  border-radius: 6px;
+  padding: 6px 8px;
+  margin-bottom: 8px;
 }
 
 .legend-list {
@@ -706,74 +1045,153 @@ function scrollToChatBottom() {
   overflow-y: auto;
 }
 
-.legend h3 {
-  color: #c9a96e;
-  margin-bottom: 8px;
-  font-size: 14px;
-  border-bottom: 1px solid #444;
-  padding-bottom: 4px;
-}
-
 .legend-item {
   display: flex;
   align-items: center;
-  margin: 3px 0;
+  margin: 4px 0;
   cursor: pointer;
+  gap: 8px;
+  padding: 2px 2px;
 }
 
 .legend-item:hover {
-  opacity: 0.7;
+  opacity: 0.8;
 }
 
 .legend-dot {
-  width: 12px;
-  height: 12px;
+  width: 11px;
+  height: 11px;
   border-radius: 50%;
-  margin-right: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
   flex-shrink: 0;
-  border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .legend-line {
-  width: 20px;
+  width: 22px;
   height: 3px;
-  margin-right: 8px;
-  flex-shrink: 0;
   border-radius: 2px;
+  flex-shrink: 0;
 }
 
-.legend-section {
-  margin-top: 8px;
+.route-toolbar {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
 }
 
-/* ====== 卷册面板 ====== */
-.chapter-panel {
-  position: absolute;
-  bottom: 20px;
-  right: 10px;
-  z-index: 1000;
-  background: rgba(20, 20, 40, 0.92);
-  padding: 12px 16px;
-  border-radius: 8px;
-  border: 1px solid #555;
-  width: 340px;
-  max-height: calc(100vh - 60px);
+.mini-btn {
+  border: 1px solid rgba(201, 169, 110, 0.55);
+  background: rgba(13, 17, 28, 0.75);
+  color: #e2d4b3;
+  border-radius: 6px;
+  padding: 4px 6px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.mini-btn.active {
+  background: rgba(201, 169, 110, 0.25);
+}
+
+.route-item {
+  justify-content: space-between;
+}
+
+.focus-btn {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  color: #d8d2c4;
+  border-radius: 999px;
+  font-size: 11px;
+  padding: 1px 8px;
+  cursor: pointer;
+}
+
+.focus-btn.active {
+  border-color: #e5c279;
+  color: #e5c279;
+}
+
+.route-insight {
+  border-top: 1px solid rgba(201, 169, 110, 0.3);
+  padding-top: 8px;
+}
+
+.insight-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: #e8cb8f;
+  margin-bottom: 6px;
+}
+
+.insight-list {
+  max-height: 140px;
   overflow-y: auto;
-  color: #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.insight-item {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  grid-template-rows: auto auto;
+  gap: 1px 6px;
+  border: 1px solid rgba(201, 169, 110, 0.2);
+  background: rgba(9, 12, 20, 0.55);
+  border-radius: 6px;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.insight-item:hover {
+  border-color: rgba(201, 169, 110, 0.6);
+}
+
+.step-idx {
+  grid-row: 1 / span 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  border-radius: 50%;
+  background: rgba(201, 169, 110, 0.2);
+  color: #eecf91;
+  font-size: 11px;
+}
+
+.step-main {
+  font-size: 12px;
+}
+
+.step-sub {
+  font-size: 11px;
+  color: #a8a093;
+}
+
+.chapter-panel {
+  right: 12px;
+  bottom: 14px;
+  width: 360px;
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+  border-radius: 12px;
+  padding: 12px;
 }
 
 .chapter-panel h3 {
-  color: #c9a96e;
-  margin-bottom: 8px;
-  font-size: 14px;
-  border-bottom: 1px solid #444;
-  padding-bottom: 4px;
+  margin: 0 0 8px;
+  color: #e6c27a;
 }
 
 .vol-slider-wrap {
   position: relative;
-  padding-bottom: 24px;
-  margin-bottom: 4px;
+  padding-bottom: 22px;
 }
 
 .chapter-slider {
@@ -784,7 +1202,7 @@ function scrollToChatBottom() {
 
 .vol-ticks {
   position: relative;
-  height: 20px;
+  height: 18px;
   margin-top: 2px;
 }
 
@@ -792,192 +1210,213 @@ function scrollToChatBottom() {
   position: absolute;
   transform: translateX(-50%);
   font-size: 11px;
-  color: #888;
+  color: #8f8a7e;
   white-space: nowrap;
 }
 
 .vol-info {
   font-size: 12px;
-  color: #aaa;
-  text-align: center;
+  color: #c8bfad;
   margin-bottom: 8px;
 }
 
-/* ====== 关键事件 ====== */
+.search-panel {
+  border-top: 1px solid rgba(201, 169, 110, 0.2);
+  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
+  padding: 8px 0;
+}
+
+.map-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid rgba(201, 169, 110, 0.35);
+  background: rgba(8, 11, 18, 0.55);
+  color: #f6f2e7;
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+
+.search-results {
+  margin-top: 6px;
+  max-height: 145px;
+  overflow-y: auto;
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 3px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.search-result-item:hover {
+  background: rgba(201, 169, 110, 0.13);
+}
+
+.search-type {
+  font-size: 10px;
+  color: #e8cb8f;
+  border: 1px solid rgba(201, 169, 110, 0.4);
+  border-radius: 999px;
+  padding: 1px 6px;
+}
+
+.search-name {
+  font-size: 12px;
+}
+
 .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;
+  color: #e8cb8f;
+  margin-bottom: 5px;
 }
 
 .event-item {
   display: flex;
   gap: 6px;
-  margin: 4px 0;
+  margin: 3px 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);
+  background: rgba(201, 169, 110, 0.13);
 }
 
 .event-ch {
-  color: #c9a96e;
-  white-space: nowrap;
+  color: #d9ba7a;
   flex-shrink: 0;
 }
 
 .event-text {
-  color: #ccc;
+  color: #d7d3cc;
 }
 
-/* ====== 势力详情面板 ====== */
 .info-panel {
-  position: absolute;
-  top: 60px;
-  right: 10px;
-  z-index: 1000;
-  background: rgba(20, 20, 40, 0.92);
-  padding: 12px 16px;
-  border-radius: 8px;
-  border: 1px solid #555;
-  width: 340px;
-  max-height: 50vh;
+  top: 124px;
+  right: 12px;
+  width: 320px;
+  max-height: 40vh;
   overflow-y: auto;
-  color: #e0e0e0;
+  border-radius: 10px;
+  padding: 10px 12px;
 }
 
 .info-panel h3 {
-  color: #c9a96e;
-  margin-bottom: 6px;
-  font-size: 15px;
-}
-
-.info-panel .close-btn {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  cursor: pointer;
-  color: #aaa;
-  font-size: 16px;
-}
-
-.info-panel .close-btn:hover {
-  color: #fff;
+  margin: 2px 0 6px;
 }
 
 .info-panel p {
-  font-size: 13px;
-  line-height: 1.6;
   margin: 4px 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.close-btn {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #b7b1a4;
+}
+
+.close-btn:hover {
+  color: #fff;
 }
 
-/* ====== 加载进度条 ====== */
 .loading-bar {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
-  background: rgba(20, 20, 40, 0.6);
   z-index: 2000;
   overflow: hidden;
+  background: rgba(11, 11, 11, 0.8);
 }
 
 .loading-inner {
   height: 100%;
-  background: #c9a96e;
+  background: linear-gradient(90deg, #8f6f3f, #e7ca8e);
   transition: width 0.3s ease;
 }
 
 .loading-text {
   position: absolute;
-  top: 6px;
+  top: 8px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 12px;
-  color: #c9a96e;
-  background: rgba(20, 20, 40, 0.85);
-  padding: 2px 10px;
+  color: #f0d8a7;
+  background: rgba(13, 17, 28, 0.85);
+  padding: 3px 10px;
   border-radius: 4px;
-  white-space: nowrap;
 }
 
-/* ====== 智能助手面板 ====== */
 .chat-toggle-btn {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  background: rgba(20, 20, 40, 0.92);
-  color: #c9a96e;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 1px solid #c9a96e;
+  top: 16px;
+  right: 16px;
+  border-radius: 999px;
+  padding: 9px 14px;
+  color: #f2e3be;
   cursor: pointer;
-  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, transform 0.2s;
-  user-select: none;
+  font-size: 13px;
 }
 
 .chat-toggle-btn:hover {
-  background: rgba(201, 169, 110, 0.2);
-  transform: scale(1.05);
+  transform: translateY(-1px);
 }
 
 .chat-panel {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  background: rgba(20, 20, 40, 0.95);
-  border: 1px solid #c9a96e;
-  border-radius: 8px;
-  width: 320px;
-  height: 480px;
+  top: 16px;
+  right: 16px;
+  width: 350px;
+  height: 520px;
+  border-radius: 12px;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
 }
 
 .chat-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 15px;
-  border-bottom: 1px solid #444;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
 }
 
 .chat-header h3 {
   margin: 0;
-  color: #c9a96e;
+  color: #f2d192;
   font-size: 15px;
 }
 
-.chat-header .close-btn {
-  color: #aaa;
-  cursor: pointer;
-  font-size: 20px;
+.chat-context-panel {
+  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #d9d3c5;
 }
 
-.chat-header .close-btn:hover {
-  color: #fff;
+.context-preview {
+  margin-top: 6px;
+  max-height: 70px;
+  overflow-y: auto;
+  background: rgba(9, 12, 18, 0.55);
+  border: 1px solid rgba(201, 169, 110, 0.22);
+  border-radius: 6px;
+  padding: 6px;
+  font-size: 11px;
+  line-height: 1.4;
 }
 
 .chat-messages {
@@ -986,72 +1425,140 @@ function scrollToChatBottom() {
   padding: 10px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .chat-bubble {
   max-width: 85%;
-  padding: 8px 12px;
+  padding: 8px 10px;
   border-radius: 8px;
   font-size: 13px;
-  line-height: 1.5;
-  word-wrap: break-word;
+  line-height: 1.45;
 }
 
 .chat-bubble.user {
   align-self: flex-end;
-  background: #c9a96e;
-  color: #111;
-  border-bottom-right-radius: 2px;
+  background: #cfb276;
+  color: #17120c;
 }
 
 .chat-bubble.assistant {
   align-self: flex-start;
-  background: rgba(255, 255, 255, 0.1);
-  color: #e0e0e0;
-  border-bottom-left-radius: 2px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(236, 229, 213, 0.08);
+  border: 1px solid rgba(236, 229, 213, 0.15);
+  color: #ece8de;
 }
 
 .chat-bubble.loading {
+  color: #aaa08d;
   font-style: italic;
-  color: #aaa;
 }
 
 .chat-input-area {
   display: flex;
-  padding: 10px;
-  border-top: 1px solid #444;
   gap: 8px;
+  padding: 10px;
+  border-top: 1px solid rgba(201, 169, 110, 0.2);
 }
 
 .chat-input-area input {
   flex: 1;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid #555;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(201, 169, 110, 0.35);
   color: #fff;
-  border-radius: 4px;
-  padding: 6px 10px;
+  border-radius: 5px;
+  padding: 7px 9px;
   outline: none;
 }
 
-.chat-input-area input:focus {
-  border-color: #c9a96e;
-}
-
 .chat-input-area button {
-  background: #c9a96e;
-  color: #111;
   border: none;
-  border-radius: 4px;
+  background: #cfb276;
+  color: #1a140f;
+  border-radius: 5px;
   padding: 0 12px;
   cursor: pointer;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .chat-input-area button:disabled {
-  background: #555;
-  color: #888;
+  background: #5a5550;
+  color: #9e978e;
   cursor: not-allowed;
 }
+
+.empty-tip {
+  font-size: 12px;
+  color: #9c9588;
+  padding: 3px 2px;
+}
+
+:deep(.order-badge) {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid;
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
+}
+
+@media (max-width: 1024px) {
+  .legend {
+    width: 290px;
+  }
+
+  .chapter-panel {
+    width: 320px;
+  }
+}
+
+@media (max-width: 768px) {
+  .map-state-pill {
+    display: none;
+  }
+
+  .novel-selector {
+    top: 10px;
+    left: 10px;
+    right: 74px;
+    flex-wrap: wrap;
+  }
+
+  .legend {
+    left: 8px;
+    bottom: 8px;
+    width: calc(100vw - 16px);
+    max-height: 36vh;
+  }
+
+  .chapter-panel {
+    right: 8px;
+    bottom: calc(36vh + 16px);
+    width: calc(100vw - 16px);
+    max-height: 30vh;
+  }
+
+  .info-panel {
+    top: 130px;
+    right: 8px;
+    width: calc(100vw - 16px);
+  }
+
+  .chat-panel {
+    top: 64px;
+    right: 8px;
+    width: calc(100vw - 16px);
+    height: 58vh;
+  }
+
+  .chat-toggle-btn {
+    top: 10px;
+    right: 10px;
+  }
+}
 </style>