From d4e0fdacf3d655cc00617080773d5f3824730866 Mon Sep 17 00:00:00 2001
From: bridge <wangxin4qiao@163.com>
Date: Sat, 22 Nov 2025 15:32:46 +0800
Subject: [PATCH] refactor web code

---
 EN_README.md                                  |   8 +-
 README.md                                     |   9 +-
 static/templates/nickname.txt                 |   4 +-
 web/src/App.vue                               |  29 +-
 web/src/api/game.ts                           |  77 ++
 web/src/api/http.ts                           |  42 +
 web/src/api/socket.ts                         | 121 +++
 web/src/components/InfoPanel.vue              | 877 ------------------
 web/src/components/SystemMenu.vue             |  26 +-
 web/src/components/game/AnimatedAvatar.vue    |   4 +-
 web/src/components/game/EntityLayer.vue       |   6 +-
 web/src/components/game/GameCanvas.vue        |  12 +-
 web/src/components/game/MapLayer.vue          |  34 +-
 .../game/panels/info/AvatarDetail.vue         | 365 ++++++++
 .../game/panels/info/InfoPanelContainer.vue   | 232 +++++
 .../game/panels/info/RegionDetail.vue         | 113 +++
 .../game/panels/info/components/EntityRow.vue |  56 ++
 .../panels/info/components/SecondaryPopup.vue | 150 +++
 .../game/panels/info/components/StatItem.vue  |  71 ++
 .../game/panels/info/components/TagList.vue   |  52 ++
 web/src/components/layout/StatusBar.vue       |  31 +-
 web/src/components/panels/EventPanel.vue      |  21 +-
 web/src/composables/useGameSocket.ts          |  51 +
 web/src/composables/useMapData.ts             |  35 -
 web/src/services/apiClient.ts                 |  46 -
 web/src/services/gameApi.ts                   |  91 --
 web/src/services/gameGateway.ts               | 121 ---
 web/src/stores/game.ts                        | 297 ------
 web/src/stores/ui.ts                          | 136 +++
 web/src/stores/world.ts                       | 143 +++
 web/src/types/api.ts                          |  67 ++
 web/src/types/core.ts                         | 143 +++
 web/src/types/game.ts                         | 155 ----
 web/src/utils/formatters/dictionary.ts        |  24 +
 web/src/utils/formatters/number.ts            |  19 +
 web/src/utils/normalizers.ts                  |  78 --
 web/src/utils/theme.ts                        |  55 ++
 web/tsconfig.json                             |   6 +
 web/vite.config.ts                            |   6 +
 39 files changed, 2035 insertions(+), 1778 deletions(-)
 create mode 100644 web/src/api/game.ts
 create mode 100644 web/src/api/http.ts
 create mode 100644 web/src/api/socket.ts
 delete mode 100644 web/src/components/InfoPanel.vue
 create mode 100644 web/src/components/game/panels/info/AvatarDetail.vue
 create mode 100644 web/src/components/game/panels/info/InfoPanelContainer.vue
 create mode 100644 web/src/components/game/panels/info/RegionDetail.vue
 create mode 100644 web/src/components/game/panels/info/components/EntityRow.vue
 create mode 100644 web/src/components/game/panels/info/components/SecondaryPopup.vue
 create mode 100644 web/src/components/game/panels/info/components/StatItem.vue
 create mode 100644 web/src/components/game/panels/info/components/TagList.vue
 create mode 100644 web/src/composables/useGameSocket.ts
 delete mode 100644 web/src/composables/useMapData.ts
 delete mode 100644 web/src/services/apiClient.ts
 delete mode 100644 web/src/services/gameApi.ts
 delete mode 100644 web/src/services/gameGateway.ts
 delete mode 100644 web/src/stores/game.ts
 create mode 100644 web/src/stores/ui.ts
 create mode 100644 web/src/stores/world.ts
 create mode 100644 web/src/types/api.ts
 create mode 100644 web/src/types/core.ts
 delete mode 100644 web/src/types/game.ts
 create mode 100644 web/src/utils/formatters/dictionary.ts
 create mode 100644 web/src/utils/formatters/number.ts
 delete mode 100644 web/src/utils/normalizers.ts
 create mode 100644 web/src/utils/theme.ts

diff --git a/EN_README.md b/EN_README.md
index deed9ee..bfd794f 100644
--- a/EN_README.md
+++ b/EN_README.md
@@ -44,10 +44,6 @@ If you like this project, consider starring it~ You can also watch intro videos
 - ✅ Standalone release (packaged exe)
 - ✅ Menu bar & Save & Load
 
-### 🔭 Long-term Systems
-- [ ] ECS parallel toolkit
-- [ ] Novelization/imagery/video for history and events
-
 ### 🗺️ World System
 - ✅ Basic tile mechanics
 - ✅ Normal, cultivate, city, sect regions
@@ -158,6 +154,10 @@ If you like this project, consider starring it~ You can also watch intro videos
 - [ ] Divination & Omens
 - [ ] Male-female traits inversion
 
+### 🔭 Long-term
+- [ ] ECS parallel toolkit
+- [ ] Novelization/imagery/video for history and events
+- [ ] Avatar calling MCP tools on their own
 ## Usage
 
 ### Run Steps
diff --git a/README.md b/README.md
index 52a20c4..7c0c2ac 100644
--- a/README.md
+++ b/README.md
@@ -46,10 +46,6 @@
 - ✅ release 一键即玩的exe
 - ✅ 菜单栏 & 存档 & 读档
 
-### 🔭 远期系统
-- [ ] ECS并行工具
-- [ ] 历史/事件的小说化&图片化&视频化
-
 ### 🗺️ 世界系统
 - ✅ 基础tile地块系统
 - ✅ 基础区域、修行区域、城市区域、宗门区域
@@ -161,6 +157,11 @@
 - [ ] 占卜 & 谶纬
 - [ ] 男生女相 & 女生男相
 
+### 🔭 远期展望
+- [ ] ECS并行工具
+- [ ] 历史/事件的小说化&图片化&视频化
+- [ ] MCP化，修士自行调用工具
+
 ## 使用方法
 
 ### 运行步骤
diff --git a/static/templates/nickname.txt b/static/templates/nickname.txt
index 9250776..6e47333 100644
--- a/static/templates/nickname.txt
+++ b/static/templates/nickname.txt
@@ -3,8 +3,8 @@
 绰号是修仙界中对一个人物的评价和称谓，要求：
 1. 符合修仙世界观，具有仙侠风格
 2. 体现角色的特点、行为、性格或事迹
-3. 简洁有力，朗朗上口（2-4个字为佳）
-4. 要帅气、有意境
+3. 简洁有力，朗朗上口、2~5个字
+4. 要帅气、有意境、多种多样
 
 角色信息：
 {avatar_info}
diff --git a/web/src/App.vue b/web/src/App.vue
index c2564b1..a269890 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,23 +1,26 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { useGameStore } from './stores/game'
-import { gameApi } from './services/gameApi'
 import { NConfigProvider, darkTheme, NMessageProvider } from 'naive-ui'
+import { useWorldStore } from './stores/world'
+import { useUiStore } from './stores/ui'
+import { useGameSocket } from './composables/useGameSocket'
+import { gameApi } from './api/game'
+
 import GameCanvas from './components/game/GameCanvas.vue'
-import InfoPanel from './components/InfoPanel.vue'
+import InfoPanelContainer from './components/game/panels/info/InfoPanelContainer.vue'
 import StatusBar from './components/layout/StatusBar.vue'
 import EventPanel from './components/panels/EventPanel.vue'
 import SystemMenu from './components/SystemMenu.vue'
 
-const store = useGameStore()
+// Composables
+useGameSocket()
+
+const worldStore = useWorldStore()
+const uiStore = useUiStore()
 const showMenu = ref(false)
 
 onMounted(async () => {
-  await store.fetchInitialState().catch((error) => {
-    console.error('初始化失败', error)
-  })
-  store.connect()
-  
+  await worldStore.initialize()
   window.addEventListener('keydown', handleKeydown)
 })
 
@@ -27,8 +30,8 @@ onUnmounted(() => {
 
 function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') {
-    if (store.selectedTarget) {
-      store.closeInfoPanel()
+    if (uiStore.selectedTarget) {
+      uiStore.clearSelection()
     } else {
       showMenu.value = !showMenu.value
     }
@@ -36,7 +39,7 @@ function handleKeydown(e: KeyboardEvent) {
 }
 
 function handleSelection(target: { type: 'avatar' | 'region'; id: string; name?: string }) {
-  store.openInfoPanel(target)
+  uiStore.select(target.type, target.id)
 }
 
 function handleMenuClose() {
@@ -72,7 +75,7 @@ watch(showMenu, (visible) => {
               @avatarSelected="handleSelection"
               @regionSelected="handleSelection"
             />
-            <InfoPanel />
+            <InfoPanelContainer />
           </div>
           <aside class="sidebar">
             <EventPanel />
diff --git a/web/src/api/game.ts b/web/src/api/game.ts
new file mode 100644
index 0000000..f1862ac
--- /dev/null
+++ b/web/src/api/game.ts
@@ -0,0 +1,77 @@
+import { httpClient } from './http';
+import type { 
+  InitialStateDTO, 
+  MapResponseDTO, 
+  HoverResponseDTO, 
+  DetailResponseDTO,
+  SaveFileDTO
+} from '../types/api';
+
+export interface HoverParams {
+  type: string;
+  id: string;
+}
+
+export const gameApi = {
+  // --- World State ---
+  
+  fetchInitialState() {
+    return httpClient.get<InitialStateDTO>('/api/state');
+  },
+
+  fetchMap() {
+    return httpClient.get<MapResponseDTO>('/api/map');
+  },
+
+  // --- Information ---
+
+  fetchHoverInfo(params: HoverParams) {
+    const query = new URLSearchParams(Object.entries(params));
+    return httpClient.get<HoverResponseDTO>(`/api/hover?${query}`);
+  },
+
+  fetchDetailInfo(params: HoverParams) {
+    const query = new URLSearchParams(Object.entries(params));
+    return httpClient.get<DetailResponseDTO>(`/api/detail?${query}`);
+  },
+
+  // --- Actions ---
+
+  setLongTermObjective(avatarId: string, content: string) {
+    return httpClient.post('/api/action/set_long_term_objective', {
+      avatar_id: avatarId,
+      content
+    });
+  },
+
+  clearLongTermObjective(avatarId: string) {
+    return httpClient.post('/api/action/clear_long_term_objective', {
+      avatar_id: avatarId
+    });
+  },
+
+  // --- Controls ---
+
+  pauseGame() {
+    return httpClient.post('/api/control/pause', {});
+  },
+
+  resumeGame() {
+    return httpClient.post('/api/control/resume', {});
+  },
+
+  // --- Saves ---
+
+  fetchSaves() {
+    return httpClient.get<{ saves: SaveFileDTO[] }>('/api/saves');
+  },
+
+  saveGame(filename?: string) {
+    return httpClient.post<{ status: string; filename: string }>('/api/game/save', { filename });
+  },
+
+  loadGame(filename: string) {
+    return httpClient.post<{ status: string; message: string }>('/api/game/load', { filename });
+  }
+};
+
diff --git a/web/src/api/http.ts b/web/src/api/http.ts
new file mode 100644
index 0000000..0566ee4
--- /dev/null
+++ b/web/src/api/http.ts
@@ -0,0 +1,42 @@
+/**
+ * HTTP API Client
+ * 封装基础的 fetch 请求
+ */
+
+const API_BASE = ''; // 相对路径
+
+export class ApiError extends Error {
+  constructor(public status: number, message: string) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+
+async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const url = `${API_BASE}${path}`;
+  const response = await fetch(url, options);
+
+  if (!response.ok) {
+    throw new ApiError(response.status, `Request failed: ${response.statusText}`);
+  }
+
+  // 假设后端总是返回 JSON
+  return response.json();
+}
+
+export const httpClient = {
+  get<T>(path: string) {
+    return request<T>(path, { method: 'GET' });
+  },
+
+  post<T>(path: string, body: unknown) {
+    return request<T>(path, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+  }
+};
+
diff --git a/web/src/api/socket.ts b/web/src/api/socket.ts
new file mode 100644
index 0000000..4748158
--- /dev/null
+++ b/web/src/api/socket.ts
@@ -0,0 +1,121 @@
+/**
+ * WebSocket Client
+ * 纯粹的 Socket 封装，不依赖 Store
+ */
+
+export type MessageHandler = (data: any) => void;
+
+export interface SocketOptions {
+  url?: string;
+  reconnectInterval?: number;
+  maxReconnectAttempts?: number;
+}
+
+export class GameSocket {
+  private ws: WebSocket | null = null;
+  private handlers: Set<MessageHandler> = new Set();
+  private statusHandlers: Set<(connected: boolean) => void> = new Set();
+  
+  private reconnectTimer: number | null = null;
+  private attempts = 0;
+  private isIntentionalClose = false;
+
+  constructor(private options: SocketOptions = {}) {}
+
+  public connect() {
+    this.isIntentionalClose = false;
+    this.cleanup();
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    const url = this.options.url || `${protocol}//${host}/ws`;
+
+    try {
+      this.ws = new WebSocket(url);
+      this.ws.onopen = this.onOpen.bind(this);
+      this.ws.onmessage = this.onMessage.bind(this);
+      this.ws.onclose = this.onClose.bind(this);
+      this.ws.onerror = this.onError.bind(this);
+    } catch (e) {
+      console.error('WS Connection failed', e);
+      this.scheduleReconnect();
+    }
+  }
+
+  public disconnect() {
+    this.isIntentionalClose = true;
+    this.cleanup();
+    this.notifyStatus(false);
+  }
+
+  public on(handler: MessageHandler) {
+    this.handlers.add(handler);
+    return () => this.handlers.delete(handler);
+  }
+
+  public onStatusChange(handler: (connected: boolean) => void) {
+    this.statusHandlers.add(handler);
+    return () => this.statusHandlers.delete(handler);
+  }
+
+  private onOpen() {
+    this.attempts = 0;
+    this.notifyStatus(true);
+  }
+
+  private onMessage(event: MessageEvent) {
+    try {
+      const data = JSON.parse(event.data);
+      this.handlers.forEach(h => h(data));
+    } catch (e) {
+      console.warn('Failed to parse WS message', e);
+    }
+  }
+
+  private onClose() {
+    this.notifyStatus(false);
+    if (!this.isIntentionalClose) {
+      this.scheduleReconnect();
+    }
+  }
+
+  private onError() {
+    // Error usually precedes Close, so we handle logic in Close
+  }
+
+  private cleanup() {
+    if (this.reconnectTimer) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.ws) {
+      this.ws.onopen = null;
+      this.ws.onmessage = null;
+      this.ws.onclose = null;
+      this.ws.onerror = null;
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  private scheduleReconnect() {
+    const max = this.options.maxReconnectAttempts ?? 10;
+    if (this.attempts >= max) return;
+
+    const base = this.options.reconnectInterval ?? 1000;
+    const delay = Math.min(10000, base * (2 ** this.attempts));
+    
+    this.reconnectTimer = window.setTimeout(() => {
+      this.attempts++;
+      this.connect();
+    }, delay);
+  }
+
+  private notifyStatus(connected: boolean) {
+    this.statusHandlers.forEach(h => h(connected));
+  }
+}
+
+// 单例实例
+export const gameSocket = new GameSocket();
+
diff --git a/web/src/components/InfoPanel.vue b/web/src/components/InfoPanel.vue
deleted file mode 100644
index 7cf4579..0000000
--- a/web/src/components/InfoPanel.vue
+++ /dev/null
@@ -1,877 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useGameStore } from '../stores/game'
-import type { IEffectEntity } from '../types/game'
-
-const store = useGameStore()
-const panelRef = ref<HTMLElement | null>(null)
-let lastOpenAt = 0
-
-const showObjectiveModal = ref(false)
-const objectiveContent = ref('')
-
-// Secondary info state
-const secondaryItem = ref<IEffectEntity | null>(null)
-
-const title = computed(() => {
-  if (store.detailInfo && !store.detailInfo.fallback) {
-    return store.detailInfo.name
-  }
-  return store.selectedTarget?.name ?? ''
-})
-
-watch(
-  () => store.selectedTarget,
-  (target) => {
-    showObjectiveModal.value = false
-    objectiveContent.value = ''
-    secondaryItem.value = null
-    if (target) {
-      lastOpenAt = performance.now()
-    }
-  }
-)
-
-function handleDocumentPointerDown(event: PointerEvent) {
-  if (!store.selectedTarget || !panelRef.value) return
-  const target = event.target as Node | null
-  if (target && panelRef.value.contains(target)) return
-
-  const now = performance.now()
-  if (now - lastOpenAt < 50) {
-    return
-  }
-  store.closeInfoPanel()
-}
-
-async function handleSetObjective() {
-  if (!store.selectedTarget || !objectiveContent.value.trim()) return
-  await store.setLongTermObjective(store.selectedTarget.id, objectiveContent.value)
-  showObjectiveModal.value = false
-  objectiveContent.value = ''
-}
-
-async function handleClearObjective() {
-  if (!store.selectedTarget) return
-  if (confirm('确定要清空该角色的长期目标吗？（系统将在之后自动重新生成）')) {
-    await store.clearLongTermObjective(store.selectedTarget.id)
-  }
-}
-
-function showSecondary(item: IEffectEntity | undefined) {
-  if (item) {
-    secondaryItem.value = item
-  }
-}
-
-function jumpToAvatar(id: string) {
-  store.openInfoPanel({ type: 'avatar', id })
-}
-
-// Helper for colors
-function getRarityColor(item: any) {
-    if (!item) return undefined
-    if (item.color && Array.isArray(item.color) && item.color.length === 3) {
-        const [r, g, b] = item.color
-        return `rgb(${r},${g},${b})`
-    }
-    // Map grade string to color if no color prop
-    const grade = item.grade || item.rarity
-    if (!grade) return undefined
-    if (['上品', '宝物', 'SR', 'Upper'].some(s => grade.includes(s))) return '#c488fd' // Purple
-    if (['中品', 'R', 'Middle'].some(s => grade.includes(s))) return '#88fdc4' // Green? Usually blue
-    if (['法宝', 'SSR', 'Artifact'].some(s => grade.includes(s))) return '#fddc88' // Gold
-    return undefined
-}
-
-onMounted(() => {
-  document.addEventListener('pointerdown', handleDocumentPointerDown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('pointerdown', handleDocumentPointerDown)
-})
-</script>
-
-<template>
-  <div
-    v-if="store.selectedTarget"
-    class="info-panel"
-    ref="panelRef"
-  >
-    <!-- Secondary Panel (Popup) -->
-    <div v-if="secondaryItem" class="secondary-panel">
-      <div class="sec-header">
-        <span class="sec-title" :style="{ color: getRarityColor(secondaryItem) }">{{ secondaryItem.name }}</span>
-        <button class="close-btn-small" @click="secondaryItem = null">×</button>
-      </div>
-      <div class="sec-body">
-         <div class="sec-row" v-if="secondaryItem.grade || secondaryItem.rarity">
-            <span class="tag">{{ secondaryItem.grade || secondaryItem.rarity }}</span>
-         </div>
-         <div class="sec-desc">{{ secondaryItem.desc }}</div>
-         <div v-if="secondaryItem.effect_desc" class="sec-effect-box">
-            <div class="sec-label">效果：</div>
-            <div class="sec-effect-text">{{ secondaryItem.effect_desc }}</div>
-         </div>
-         
-         <!-- 特殊字段展示 -->
-         <div v-if="secondaryItem.hq_name" class="sec-extra">
-            <div><strong>驻地:</strong> {{ secondaryItem.hq_name }}</div>
-            <div class="sub-desc">{{ secondaryItem.hq_desc }}</div>
-         </div>
-      </div>
-    </div>
-
-    <div class="panel-actions" v-if="store.selectedTarget.type === 'avatar'">
-      <button class="action-btn primary" @click="showObjectiveModal = true">设定长期目标</button>
-      <button class="action-btn secondary" @click="handleClearObjective">清空长期目标</button>
-    </div>
-
-    <button class="close-btn-absolute" type="button" @click="store.closeInfoPanel()">×</button>
-
-    <div class="info-header">
-      <div class="info-title">{{ title || '详情' }}</div>
-      <div class="header-right">
-         <span v-if="store.detailInfo && !store.detailInfo.fallback" class="header-subtitle">{{ store.detailInfo.nickname || '' }}</span>
-      </div>
-    </div>
-
-    <div class="info-body">
-      <div v-if="store.infoLoading" class="placeholder">加载中...</div>
-      <div v-else-if="store.infoError" class="placeholder error">
-        {{ store.infoError }}
-      </div>
-      
-      <!-- 结构化数据展示 -->
-      <div v-else-if="store.detailInfo && !store.detailInfo.fallback && store.selectedTarget.type === 'avatar'" class="structured-content">
-          <!-- 基础属性 -->
-          <div class="stats-grid">
-             <div class="stat-item">
-                <label>境界</label>
-                <span>{{ store.detailInfo.realm }} ({{ store.detailInfo.level }})</span>
-             </div>
-             <div class="stat-item">
-                <label>年龄</label>
-                <span>{{ store.detailInfo.age }} / {{ store.detailInfo.lifespan }}</span>
-             </div>
-             <div class="stat-item">
-                <label>HP</label>
-                <span>{{ Math.floor(store.detailInfo.hp.cur) }}/{{ store.detailInfo.hp.max }}</span>
-             </div>
-             <div class="stat-item">
-                <label>灵石</label>
-                <span>{{ store.detailInfo.magic_stone }}</span>
-             </div>
-             <div 
-                class="stat-item full clickable" 
-                @click="showSecondary(store.detailInfo.alignment_detail)"
-                v-if="store.detailInfo.alignment_detail"
-             >
-                <label>阵营</label>
-                <span>{{ store.detailInfo.alignment }}</span>
-             </div>
-             <div class="stat-item full" v-else>
-                <label>阵营</label>
-                <span>{{ store.detailInfo.alignment }}</span>
-             </div>
-
-             <div 
-                class="stat-item full clickable" 
-                @click="showSecondary(store.detailInfo.root_detail)"
-                v-if="store.detailInfo.root_detail"
-             >
-                <label>灵根</label>
-                <span>{{ store.detailInfo.root }}</span>
-             </div>
-             <div class="stat-item full" v-else>
-                <label>灵根</label>
-                <span>{{ store.detailInfo.root }}</span>
-             </div>
-          </div>
-
-          <!-- 状态 -->
-          <div class="section" v-if="store.detailInfo.thinking">
-              <div class="section-title">当前思考</div>
-              <div class="text-content">{{ store.detailInfo.thinking }}</div>
-          </div>
-          
-          <!-- 特质 -->
-          <div class="section" v-if="store.detailInfo.personas?.length">
-             <div class="section-title">特质</div>
-             <div class="tags-container">
-                <span 
-                  v-for="p in store.detailInfo.personas" 
-                  :key="p.name" 
-                  class="clickable-tag"
-                  :style="{ borderColor: getRarityColor(p) }"
-                  @click="showSecondary(p)"
-                >
-                   {{ p.name }}
-                </span>
-             </div>
-          </div>
-
-          <!-- 功法 -->
-          <div class="section" v-if="store.detailInfo.technique">
-             <div class="section-title">功法</div>
-             <div class="clickable-item" @click="showSecondary(store.detailInfo.technique)">
-                <span :style="{ color: getRarityColor(store.detailInfo.technique) }">{{ store.detailInfo.technique.name }}</span>
-                <span class="item-meta">{{ store.detailInfo.technique.grade }}</span>
-             </div>
-          </div>
-          
-          <!-- 宗门 -->
-          <div class="section" v-if="store.detailInfo.sect">
-             <div class="section-title">宗门</div>
-             <div class="clickable-item" @click="showSecondary(store.detailInfo.sect)">
-                <span>{{ store.detailInfo.sect.name }}</span>
-                <span class="item-meta">{{ store.detailInfo.sect.rank }}</span>
-             </div>
-          </div>
-
-          <!-- 装备 -->
-          <div class="section" v-if="store.detailInfo.weapon || store.detailInfo.auxiliary">
-             <div class="section-title">装备</div>
-             <div v-if="store.detailInfo.weapon" class="clickable-item" @click="showSecondary(store.detailInfo.weapon)">
-                <span :style="{ color: getRarityColor(store.detailInfo.weapon) }">{{ store.detailInfo.weapon.name }}</span>
-                <span class="item-meta">熟练度 {{ store.detailInfo.weapon.proficiency }}</span>
-             </div>
-             <div v-if="store.detailInfo.auxiliary" class="clickable-item" @click="showSecondary(store.detailInfo.auxiliary)">
-                <span :style="{ color: getRarityColor(store.detailInfo.auxiliary) }">{{ store.detailInfo.auxiliary.name }}</span>
-             </div>
-          </div>
-
-          <!-- 灵兽 -->
-          <div class="section" v-if="store.detailInfo.spirit_animal">
-             <div class="section-title">灵兽</div>
-             <div class="clickable-item" @click="showSecondary(store.detailInfo.spirit_animal)">
-                <span :style="{ color: getRarityColor(store.detailInfo.spirit_animal) }">{{ store.detailInfo.spirit_animal.name }}</span>
-                <span class="item-meta">{{ store.detailInfo.spirit_animal.grade }}</span>
-             </div>
-          </div>
-
-          <!-- 物品 -->
-          <div class="section" v-if="store.detailInfo.items?.length">
-             <div class="section-title">物品</div>
-             <div class="items-list">
-                <div 
-                    v-for="item in store.detailInfo.items" 
-                    :key="item.name" 
-                    class="clickable-item small"
-                    @click="showSecondary(item)"
-                >
-                   {{ item.name }} x{{ item.count }}
-                </div>
-             </div>
-          </div>
-
-          <!-- 关系 -->
-          <div class="section" v-if="store.detailInfo.relations?.length">
-             <div class="section-title">关系</div>
-             <div class="relations-list">
-                <div 
-                    v-for="rel in store.detailInfo.relations" 
-                    :key="rel.target_id" 
-                    class="relation-item"
-                    @click="jumpToAvatar(rel.target_id)"
-                >
-                   <div class="rel-name">{{ rel.name }}</div>
-                   <div class="rel-desc">{{ rel.relation }}</div>
-                   <div class="rel-meta">{{ rel.sect }} · {{ rel.realm }}</div>
-                </div>
-             </div>
-          </div>
-          
-          <!-- 目标 -->
-          <div class="section">
-              <div class="section-title">长期目标</div>
-              <div class="text-content">{{ store.detailInfo.long_term_objective || '无' }}</div>
-          </div>
-           <div class="section">
-              <div class="section-title">短期目标</div>
-              <div class="text-content">{{ store.detailInfo.short_term_objective || '无' }}</div>
-          </div>
-
-      </div>
-
-      <!-- 结构化数据展示 (Region) -->
-      <div v-else-if="store.detailInfo && !store.detailInfo.fallback && store.selectedTarget.type === 'region'" class="structured-content">
-          <!-- Type & Desc -->
-          <div class="section">
-             <div class="section-title">{{ store.detailInfo.type_name }}</div>
-             <div class="text-content">{{ store.detailInfo.desc }}</div>
-          </div>
-
-          <!-- Cultivate Region: Essence -->
-          <div class="section" v-if="store.detailInfo.essence">
-             <div class="section-title">灵气环境</div>
-             <div class="text-content">
-                {{ store.detailInfo.essence.type }}行灵气 · 浓度 {{ store.detailInfo.essence.density }}
-             </div>
-          </div>
-
-          <!-- Normal Region: Animals -->
-          <div class="section" v-if="store.detailInfo.animals?.length">
-             <div class="section-title">动物分布</div>
-             <div class="items-list">
-                <div 
-                    v-for="animal in store.detailInfo.animals" 
-                    :key="animal.name" 
-                    class="clickable-item small"
-                    @click="showSecondary(animal)"
-                >
-                   <span :style="{ color: getRarityColor(animal) }">{{ animal.name }}</span>
-                   <span class="item-meta">{{ animal.grade }}</span>
-                </div>
-             </div>
-          </div>
-
-          <!-- Normal Region: Plants -->
-          <div class="section" v-if="store.detailInfo.plants?.length">
-             <div class="section-title">植物分布</div>
-             <div class="items-list">
-                <div 
-                    v-for="plant in store.detailInfo.plants" 
-                    :key="plant.name" 
-                    class="clickable-item small"
-                    @click="showSecondary(plant)"
-                >
-                   <span :style="{ color: getRarityColor(plant) }">{{ plant.name }}</span>
-                   <span class="item-meta">{{ plant.grade }}</span>
-                </div>
-             </div>
-          </div>
-      </div>
-      
-      <!-- Legacy / Fallback 展示 -->
-      <ul v-else-if="store.hoverInfo.length" class="info-list">
-        <li v-for="(line, index) in store.hoverInfo" :key="index">
-          <template v-if="line.length">
-            <span
-              v-for="(segment, segIndex) in line"
-              :key="segIndex"
-              class="info-segment"
-              :style="segment.color ? { color: segment.color } : undefined"
-            >
-              {{ segment.text || ' ' }}
-            </span>
-          </template>
-          <span v-else class="info-segment">&nbsp;</span>
-        </li>
-      </ul>
-      <div v-else class="placeholder">暂无信息</div>
-    </div>
-
-    <!-- 长期目标设定弹窗 -->
-    <div v-if="showObjectiveModal" class="objective-modal">
-      <div class="modal-title">设定长期目标</div>
-      <textarea 
-        v-model="objectiveContent" 
-        placeholder="请输入该角色未来3-5年的长期目标..."
-        class="objective-input"
-      ></textarea>
-      <div class="modal-actions">
-        <button class="modal-btn confirm" @click="handleSetObjective" :disabled="!objectiveContent.trim()">确认</button>
-        <button class="modal-btn cancel" @click="showObjectiveModal = false">取消</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.info-panel {
-  position: absolute;
-  top: 60px;
-  right: 20px;
-  width: 320px;
-  max-height: calc(100vh - 40px);
-  background: rgba(24, 24, 24, 0.96);
-  border: 1px solid #333;
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
-  color: #eee;
-  pointer-events: auto;
-  display: flex;
-  flex-direction: column;
-  overflow: visible; 
-}
-
-.panel-actions {
-  display: flex;
-  flex-direction: column;
-  padding: 12px 14px 4px;
-  gap: 6px;
-  background: rgba(38, 38, 38, 0.95);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.action-btn {
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: inherit;
-  transition: all 0.2s;
-}
-
-.action-btn.primary {
-  background: #177ddc;
-  color: white;
-  padding: 6px 12px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.action-btn.primary:hover {
-  background: #1890ff;
-}
-
-.action-btn.secondary {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: #aaa;
-  padding: 5px 12px;
-  font-size: 12px;
-}
-
-.action-btn.secondary:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.25);
-  color: #ccc;
-}
-
-.info-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  background: rgba(38, 38, 38, 0.95);
-  border-bottom: 1px solid #333;
-}
-
-.info-title {
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.header-right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.header-subtitle {
-    font-size: 12px;
-    color: #888;
-}
-
-.close-btn {
-  background: transparent;
-  border: none;
-  color: #999;
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 2px 4px;
-}
-
-.close-btn:hover {
-  color: #fff;
-}
-
-.close-btn-absolute {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 24px;
-  height: 24px;
-  background: rgba(0,0,0,0.5);
-  border: 1px solid #555;
-  border-radius: 4px;
-  color: #ccc;
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 20; /* Higher than panel-actions */
-  transition: all 0.2s;
-}
-
-.close-btn-absolute:hover {
-  background: rgba(255,255,255,0.2);
-  color: #fff;
-  border-color: #888;
-}
-
-.info-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-
-/* Legacy List Styles */
-.info-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.info-list li + li {
-  margin-top: 6px;
-}
-
-.info-segment {
-  white-space: pre-wrap;
-}
-
-/* Structured Content Styles */
-.structured-content {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.stats-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    background: rgba(255,255,255,0.03);
-    padding: 8px;
-    border-radius: 6px;
-}
-
-.stat-item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.stat-item.full {
-    grid-column: span 2;
-}
-
-.stat-item.clickable {
-    cursor: pointer;
-    transition: background 0.2s;
-    border-radius: 4px;
-    padding: 4px;
-    margin: -4px;
-    border: 1px solid transparent;
-}
-
-.stat-item.clickable:hover {
-    background: rgba(255,255,255,0.08);
-    border-color: rgba(255,255,255,0.1);
-}
-
-.stat-item label {
-    font-size: 11px;
-    color: #888;
-}
-
-.stat-item span {
-    font-size: 13px;
-    color: #ddd;
-    font-weight: 500;
-}
-
-.section {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.section-title {
-    font-size: 12px;
-    font-weight: bold;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    border-bottom: 1px solid #333;
-    padding-bottom: 4px;
-}
-
-.text-content {
-    font-size: 13px;
-    line-height: 1.5;
-    color: #ccc;
-}
-
-.tags-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.clickable-tag {
-    font-size: 12px;
-    padding: 2px 8px;
-    background: rgba(255,255,255,0.05);
-    border: 1px solid #444;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.clickable-tag:hover {
-    background: rgba(255,255,255,0.1);
-    border-color: #666;
-}
-
-.clickable-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 8px;
-    background: rgba(255,255,255,0.03);
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 13px;
-    transition: background 0.2s;
-}
-
-.clickable-item:hover {
-    background: rgba(255,255,255,0.08);
-}
-
-.clickable-item.small {
-    padding: 4px 8px;
-    font-size: 12px;
-}
-
-.item-meta {
-    font-size: 11px;
-    color: #888;
-}
-
-.relations-list {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.relation-item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px;
-    background: rgba(0,0,0,0.2);
-    border-left: 2px solid #333;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.relation-item:hover {
-    background: rgba(255,255,255,0.05);
-    border-left-color: #666;
-}
-
-.rel-name {
-    font-size: 13px;
-    font-weight: bold;
-    color: #eee;
-}
-
-.rel-desc {
-    font-size: 12px;
-    color: #aaa;
-}
-
-.rel-meta {
-    font-size: 11px;
-    color: #666;
-}
-
-/* Secondary Panel Styles */
-.secondary-panel {
-  position: absolute;
-  top: 60px;
-  right: 100%;
-  margin-right: 12px;
-  width: 260px;
-  background: rgba(32, 32, 32, 0.98);
-  border: 1px solid #555;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8);
-  z-index: 90;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sec-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #444;
-    padding-bottom: 8px;
-}
-
-.sec-title {
-    font-size: 15px;
-    font-weight: bold;
-}
-
-.close-btn-small {
-    background: transparent;
-    border: none;
-    color: #888;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.close-btn-small:hover {
-    color: #fff;
-}
-
-.sec-body {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    font-size: 13px;
-    color: #ccc;
-}
-
-.tag {
-    display: inline-block;
-    padding: 2px 6px;
-    background: #444;
-    border-radius: 4px;
-    font-size: 11px;
-    color: #fff;
-}
-
-.sec-desc {
-    line-height: 1.5;
-}
-
-.sec-effect-box {
-    background: rgba(0,0,0,0.2);
-    padding: 8px;
-    border-radius: 4px;
-    border: 1px solid #444;
-}
-
-.sec-label {
-    font-size: 11px;
-    color: #888;
-    margin-bottom: 4px;
-}
-
-.sec-effect-text {
-    color: #ffd700; /* Gold for effects */
-    font-size: 12px;
-    line-height: 1.4;
-}
-
-.sec-extra {
-    font-size: 12px;
-    border-top: 1px solid #444;
-    padding-top: 8px;
-}
-
-.sub-desc {
-    color: #888;
-    margin-top: 2px;
-}
-
-
-.placeholder {
-  font-size: 13px;
-  color: #888;
-}
-
-.placeholder.error {
-  color: #ff7875;
-}
-
-/* Modal Styles */
-.objective-modal {
-  position: absolute;
-  top: 0;
-  right: 100%;
-  margin-right: 12px;
-  width: 280px;
-  background: rgba(32, 32, 32, 0.98);
-  border: 1px solid #444;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  z-index: 100;
-}
-
-.modal-title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #ddd;
-}
-
-.objective-input {
-  width: 100%;
-  height: 120px;
-  background: #1f1f1f;
-  border: 1px solid #444;
-  border-radius: 4px;
-  color: #eee;
-  padding: 8px;
-  resize: none;
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 1.5;
-  outline: none;
-}
-
-.objective-input:focus {
-  border-color: #177ddc;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.modal-btn {
-  flex: 1;
-  padding: 6px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  transition: opacity 0.2s;
-}
-
-.modal-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.modal-btn.confirm {
-  background: #177ddc;
-  color: white;
-}
-
-.modal-btn.confirm:hover:not(:disabled) {
-  background: #1890ff;
-}
-
-.modal-btn.cancel {
-  background: #444;
-  color: #bbb;
-}
-
-.modal-btn.cancel:hover {
-  background: #555;
-  color: white;
-}
-</style>
diff --git a/web/src/components/SystemMenu.vue b/web/src/components/SystemMenu.vue
index ef00ae4..5bab554 100644
--- a/web/src/components/SystemMenu.vue
+++ b/web/src/components/SystemMenu.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { gameApi, type SaveFile } from '../services/gameApi'
-import { useGameStore } from '../stores/game'
+import { gameApi } from '../api/game'
+import { useWorldStore } from '../stores/world'
+import { useUiStore } from '../stores/ui'
 import { useMessage } from 'naive-ui'
+import type { SaveFileDTO } from '../types/api'
 
 const props = defineProps<{
   visible: boolean
@@ -12,17 +14,18 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const store = useGameStore()
+const worldStore = useWorldStore()
+const uiStore = useUiStore()
 const message = useMessage()
 
 const activeTab = ref<'save' | 'load'>('load')
-const saves = ref<SaveFile[]>([])
+const saves = ref<SaveFileDTO[]>([])
 const loading = ref(false)
 
 async function fetchSaves() {
   loading.value = true
   try {
-    const res = await gameApi.getSaves()
+    const res = await gameApi.fetchSaves()
     saves.value = res.saves
   } catch (e) {
     message.error('获取存档列表失败')
@@ -49,7 +52,17 @@ async function handleLoad(filename: string) {
 
   loading.value = true
   try {
-    await store.reloadGame(filename)
+    // 1. Call API
+    await gameApi.loadGame(filename)
+    
+    // 2. Reset UI & World
+    worldStore.reset()
+    uiStore.clearSelection()
+    uiStore.clearHoverCache()
+    
+    // 3. Re-initialize
+    await worldStore.initialize()
+    
     message.success('读档成功')
     emit('close')
   } catch (e) {
@@ -292,4 +305,3 @@ onMounted(() => {
   padding: 40px;
 }
 </style>
-
diff --git a/web/src/components/game/AnimatedAvatar.vue b/web/src/components/game/AnimatedAvatar.vue
index b303ff5..cb5aa98 100644
--- a/web/src/components/game/AnimatedAvatar.vue
+++ b/web/src/components/game/AnimatedAvatar.vue
@@ -2,11 +2,11 @@
 import { useTextures } from './composables/useTextures'
 import { ref, watch } from 'vue'
 import { Graphics } from 'pixi.js'
-import type { Avatar } from '../../types/game'
+import type { AvatarSummary } from '../../types/core'
 import { useSharedTicker } from './composables/useSharedTicker'
 
 const props = defineProps<{
-  avatar: Avatar
+  avatar: AvatarSummary
   tileSize: number
 }>()
 
diff --git a/web/src/components/game/EntityLayer.vue b/web/src/components/game/EntityLayer.vue
index fffc86b..f735b05 100644
--- a/web/src/components/game/EntityLayer.vue
+++ b/web/src/components/game/EntityLayer.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useGameStore } from '../../stores/game'
+import { useWorldStore } from '../../stores/world'
 import AnimatedAvatar from './AnimatedAvatar.vue'
 
-const store = useGameStore()
+const worldStore = useWorldStore()
 const TILE_SIZE = 64
 
 const emit = defineEmits<{
@@ -17,7 +17,7 @@ function handleAvatarSelect(payload: { type: 'avatar'; id: string; name?: string
 <template>
   <container sortable-children>
     <AnimatedAvatar
-      v-for="avatar in store.avatarList"
+      v-for="avatar in worldStore.avatarList"
       :key="avatar.id"
       :avatar="avatar"
       :tile-size="TILE_SIZE"
diff --git a/web/src/components/game/GameCanvas.vue b/web/src/components/game/GameCanvas.vue
index f598930..ccff693 100644
--- a/web/src/components/game/GameCanvas.vue
+++ b/web/src/components/game/GameCanvas.vue
@@ -2,7 +2,6 @@
 import { Application } from 'vue3-pixi'
 import { ref, onMounted } from 'vue'
 import { useElementSize } from '@vueuse/core'
-import { useGameStore } from '../../stores/game' // 引入 store
 import Viewport from './Viewport.vue'
 import MapLayer from './MapLayer.vue'
 import EntityLayer from './EntityLayer.vue'
@@ -12,8 +11,6 @@ const container = ref<HTMLElement>()
 const { width, height } = useElementSize(container)
 const { loadBaseTextures, isLoaded } = useTextures()
 
-const store = useGameStore() // 使用 store
-
 const mapSize = ref({ width: 2000, height: 2000 })
 
 const emit = defineEmits<{
@@ -63,12 +60,13 @@ onMounted(() => {
         :world-height="mapSize.height"
       >
         <!-- 
-          使用 store.worldVersion 作为 key 
-          当读档时，MapLayer 会被重新创建，从而重新加载地图数据
-          但 Application 和 WebGL 上下文保持不变，避免崩溃
+          注意：之前使用的 store.worldVersion 已移除。
+          如果需要重新渲染 MapLayer（例如读档后），
+          现在依赖于 worldStore.initialize() 触发 mapData 变更，
+          以及 MapLayer 内部对 worldStore.isLoaded 的监听。
+          如果发现读档不刷新的问题，可以在 MapLayer 增加 key。
         -->
         <MapLayer 
-          :key="store.worldVersion" 
           @mapLoaded="onMapLoaded" 
           @regionSelected="handleRegionSelected" 
         />
diff --git a/web/src/components/game/MapLayer.vue b/web/src/components/game/MapLayer.vue
index 0fc1172..e89970f 100644
--- a/web/src/components/game/MapLayer.vue
+++ b/web/src/components/game/MapLayer.vue
@@ -2,13 +2,13 @@
 import { onMounted, ref, watch } from 'vue'
 import { Container, Sprite } from 'pixi.js'
 import { useTextures } from './composables/useTextures'
-import { useMapData } from '../../composables/useMapData'
-import type { Region } from '../../types/game'
+import { useWorldStore } from '../../stores/world'
+import type { RegionSummary } from '../../types/core'
 
 const TILE_SIZE = 64
 const mapContainer = ref<Container>()
 const { textures, isLoaded, loadSectTexture } = useTextures()
-const { mapTiles, regions, isMapLoaded, loadMapData } = useMapData()
+const worldStore = useWorldStore()
 const regionStyleCache = new Map<string, Record<string, unknown>>()
 
 const emit = defineEmits<{
@@ -17,14 +17,14 @@ const emit = defineEmits<{
 }>()
 
 onMounted(() => {
-  loadMapData().catch((error) => console.error('Map load error', error))
-  if (isLoaded.value && isMapLoaded.value) {
+  // Map data is loaded by worldStore.initialize() in App.vue or similar
+  if (isLoaded.value && worldStore.isLoaded) {
     renderMap()
   }
 })
 
 watch(
-  () => [isLoaded.value, isMapLoaded.value],
+  () => [isLoaded.value, worldStore.isLoaded],
   ([texturesReady, mapReady]) => {
     if (texturesReady && mapReady) {
       renderMap()
@@ -33,17 +33,17 @@ watch(
 )
 
 async function renderMap() {
-  if (!mapContainer.value || !mapTiles.value.length) return
+  if (!mapContainer.value || !worldStore.mapData.length) return
 
-  await preloadSectTextures(regions.value)
+  await preloadSectTextures()
   mapContainer.value.removeChildren()
 
-  const rows = mapTiles.value.length
-  const cols = mapTiles.value[0]?.length ?? 0
+  const rows = worldStore.mapData.length
+  const cols = worldStore.mapData[0]?.length ?? 0
 
   for (let y = 0; y < rows; y++) {
     for (let x = 0; x < cols; x++) {
-      const type = mapTiles.value[y][x]
+      const type = worldStore.mapData[y][x]
       if (type === 'PLACEHOLDER') continue
 
       let tex = textures.value[type]
@@ -83,10 +83,11 @@ async function renderMap() {
   })
 }
 
-async function preloadSectTextures(regionList: Region[]) {
+async function preloadSectTextures() {
+  const regions = Array.from(worldStore.regions.values());
   const sectNames = Array.from(
     new Set(
-      regionList
+      regions
         .filter(region => region.type === 'sect' && region.sect_name)
         .map(region => region.sect_name as string)
     )
@@ -95,7 +96,8 @@ async function preloadSectTextures(regionList: Region[]) {
 }
 
 function resolveSectTexture(x: number, y: number) {
-  const region = regions.value.find(r =>
+  const regions = Array.from(worldStore.regions.values());
+  const region = regions.find(r =>
     r.type === 'sect' && Math.abs(r.x - x) < 3 && Math.abs(r.y - y) < 3
   )
   if (region?.sect_name) {
@@ -127,7 +129,7 @@ function getRegionStyle(type: string) {
   return style
 }
 
-function handleRegionSelect(region: Region) {
+function handleRegionSelect(region: RegionSummary) {
   emit('regionSelected', {
     type: 'region',
     id: String(region.id),
@@ -145,7 +147,7 @@ function handleRegionSelect(region: Region) {
      <container :z-index="200">
         <!-- @vue-ignore -->
         <text
-            v-for="r in regions"
+            v-for="r in Array.from(worldStore.regions.values())"
             :key="r.name"
             :text="r.name"
             :x="r.x * TILE_SIZE + TILE_SIZE / 2"
diff --git a/web/src/components/game/panels/info/AvatarDetail.vue b/web/src/components/game/panels/info/AvatarDetail.vue
new file mode 100644
index 0000000..bffad54
--- /dev/null
+++ b/web/src/components/game/panels/info/AvatarDetail.vue
@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { AvatarDetail, EffectEntity } from '@/types/core';
+import { formatHp, formatAge } from '@/utils/formatters/number';
+import StatItem from './components/StatItem.vue';
+import EntityRow from './components/EntityRow.vue';
+import TagList from './components/TagList.vue';
+import SecondaryPopup from './components/SecondaryPopup.vue';
+import { gameApi } from '@/api/game';
+import { useUiStore } from '@/stores/ui';
+
+const props = defineProps<{
+  data: AvatarDetail;
+}>();
+
+const uiStore = useUiStore();
+const secondaryItem = ref<EffectEntity | null>(null);
+const showObjectiveModal = ref(false);
+const objectiveContent = ref('');
+
+// --- Actions ---
+
+function showDetail(item: EffectEntity | undefined) {
+  if (item) {
+    secondaryItem.value = item;
+  }
+}
+
+function jumpToAvatar(id: string) {
+  uiStore.select('avatar', id);
+}
+
+async function handleSetObjective() {
+  if (!objectiveContent.value.trim()) return;
+  try {
+    await gameApi.setLongTermObjective(props.data.id, objectiveContent.value);
+    showObjectiveModal.value = false;
+    objectiveContent.value = '';
+    uiStore.refreshDetail();
+  } catch (e) {
+    console.error(e);
+    alert('设定失败');
+  }
+}
+
+async function handleClearObjective() {
+  if (!confirm('确定要清空该角色的长期目标吗？')) return;
+  try {
+    await gameApi.clearLongTermObjective(props.data.id);
+    uiStore.refreshDetail();
+  } catch (e) {
+    console.error(e);
+  }
+}
+</script>
+
+<template>
+  <div class="avatar-detail">
+    <SecondaryPopup 
+      :item="secondaryItem" 
+      @close="secondaryItem = null" 
+    />
+
+    <!-- Actions Bar -->
+    <div class="actions-bar">
+      <button class="btn primary" @click="showObjectiveModal = true">设定目标</button>
+      <button class="btn" @click="handleClearObjective">清空目标</button>
+    </div>
+
+    <div class="content-scroll">
+      <!-- Stats Grid -->
+      <div class="stats-grid">
+        <StatItem label="境界" :value="data.realm" :sub-value="data.level" />
+        <StatItem label="年龄" :value="formatAge(data.age, data.lifespan)" />
+        <StatItem label="HP" :value="formatHp(data.hp.cur, data.hp.max)" />
+        <StatItem label="灵石" :value="data.magic_stone" />
+        
+        <StatItem 
+          label="阵营" 
+          :value="data.alignment" 
+          full-width 
+          :on-click="() => showDetail(data.alignment_detail)"
+        />
+        
+        <StatItem 
+          label="灵根" 
+          :value="data.root" 
+          full-width 
+          :on-click="() => showDetail(data.root_detail)"
+        />
+      </div>
+
+      <!-- Thinking -->
+      <div class="section" v-if="data.thinking">
+        <div class="section-title">当前思考</div>
+        <div class="text-content">{{ data.thinking }}</div>
+      </div>
+
+      <!-- Personas -->
+      <div class="section" v-if="data.personas?.length">
+        <div class="section-title">特质</div>
+        <TagList :tags="data.personas" @click="showDetail" />
+      </div>
+
+      <!-- Equipment & Sect -->
+      <div class="section">
+        <div class="section-title">功法与装备</div>
+        <EntityRow 
+          v-if="data.technique" 
+          :item="data.technique" 
+          @click="showDetail(data.technique)" 
+        />
+        <EntityRow 
+          v-if="data.sect" 
+          :item="data.sect" 
+          :meta="data.sect.rank"
+          @click="showDetail(data.sect)" 
+        />
+        <EntityRow 
+          v-if="data.weapon" 
+          :item="data.weapon" 
+          :meta="`熟练度 ${data.weapon.proficiency}`"
+          @click="showDetail(data.weapon)" 
+        />
+        <EntityRow 
+          v-if="data.auxiliary" 
+          :item="data.auxiliary" 
+          @click="showDetail(data.auxiliary)" 
+        />
+         <EntityRow 
+          v-if="data.spirit_animal" 
+          :item="data.spirit_animal" 
+          @click="showDetail(data.spirit_animal)" 
+        />
+      </div>
+
+      <!-- Items -->
+      <div class="section" v-if="data.items?.length">
+        <div class="section-title">物品</div>
+        <div class="list-container">
+          <EntityRow 
+            v-for="item in data.items"
+            :key="item.name"
+            :item="item"
+            :meta="`x${item.count}`"
+            compact
+            @click="showDetail(item)"
+          />
+        </div>
+      </div>
+
+      <!-- Relations -->
+      <div class="section" v-if="data.relations?.length">
+        <div class="section-title">关系</div>
+        <div class="list-container">
+          <div 
+            v-for="rel in data.relations"
+            :key="rel.target_id"
+            class="relation-item"
+            @click="jumpToAvatar(rel.target_id)"
+          >
+            <div class="rel-head">
+              <span class="rel-name">{{ rel.name }}</span>
+              <span class="rel-type">{{ rel.relation }}</span>
+            </div>
+            <div class="rel-sub">{{ rel.sect }} · {{ rel.realm }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Objectives -->
+      <div class="section">
+        <div class="section-title">长期目标</div>
+        <div class="text-content">{{ data.long_term_objective || '无' }}</div>
+      </div>
+      <div class="section">
+        <div class="section-title">短期目标</div>
+        <div class="text-content">{{ data.short_term_objective || '无' }}</div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div v-if="showObjectiveModal" class="modal-overlay">
+      <div class="modal">
+        <h3>设定长期目标</h3>
+        <textarea v-model="objectiveContent" placeholder="请输入目标..."></textarea>
+        <div class="modal-footer">
+          <button class="btn primary" @click="handleSetObjective">确认</button>
+          <button class="btn" @click="showObjectiveModal = false">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.avatar-detail {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0; /* Ensure flex child scrolling works */
+  position: relative; /* For secondary popup */
+}
+
+.actions-bar {
+  display: flex;
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #333;
+  margin-bottom: 12px;
+}
+
+.content-scroll {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-right: 4px; /* Space for scrollbar */
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 8px;
+  border-radius: 6px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+  border-bottom: 1px solid #333;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+}
+
+.text-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: #ccc;
+}
+
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Buttons */
+.btn {
+  flex: 1;
+  padding: 6px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.05);
+  color: #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.btn.primary {
+  background: #177ddc;
+  color: white;
+  border: none;
+}
+
+.btn.primary:hover {
+  background: #1890ff;
+}
+
+/* Relations */
+.relation-item {
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-left: 2px solid #333;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.relation-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-left-color: #666;
+}
+
+.rel-head {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.rel-name {
+  font-size: 13px;
+  color: #eee;
+  font-weight: bold;
+}
+
+.rel-type {
+  font-size: 12px;
+  color: #aaa;
+}
+
+.rel-sub {
+  font-size: 11px;
+  color: #666;
+}
+
+/* Modal */
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: -16px;
+  right: -16px;
+  bottom: -16px;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  width: 280px;
+  background: #222;
+  border: 1px solid #444;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modal h3 {
+  margin: 0;
+  font-size: 14px;
+  color: #ddd;
+}
+
+.modal textarea {
+  height: 100px;
+  background: #111;
+  border: 1px solid #444;
+  color: #eee;
+  padding: 8px;
+  resize: none;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 10px;
+}
+</style>
diff --git a/web/src/components/game/panels/info/InfoPanelContainer.vue b/web/src/components/game/panels/info/InfoPanelContainer.vue
new file mode 100644
index 0000000..34769a3
--- /dev/null
+++ b/web/src/components/game/panels/info/InfoPanelContainer.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
+import { useUiStore } from '@/stores/ui';
+import type { AvatarDetail, RegionDetail } from '@/types/core';
+
+// Sub-components
+import AvatarDetailView from './AvatarDetail.vue';
+import RegionDetailView from './RegionDetail.vue';
+
+const uiStore = useUiStore();
+const panelRef = ref<HTMLElement | null>(null);
+let lastOpenAt = 0;
+
+// --- Computed ---
+
+const currentComponent = computed(() => {
+  if (uiStore.selectedTarget?.type === 'avatar') return AvatarDetailView;
+  if (uiStore.selectedTarget?.type === 'region') return RegionDetailView;
+  return null;
+});
+
+const title = computed(() => {
+  if (uiStore.detailData) {
+    return uiStore.detailData.name;
+  }
+  return uiStore.selectedTarget?.id || 'Detail';
+});
+
+const subTitle = computed(() => {
+  if (uiStore.detailData && 'nickname' in uiStore.detailData) {
+    return uiStore.detailData.nickname;
+  }
+  return '';
+});
+
+// --- Interaction ---
+
+function close() {
+  uiStore.clearSelection();
+}
+
+  // Click outside to close
+  function handleDocumentPointerDown(event: PointerEvent) {
+    if (!uiStore.selectedTarget || !panelRef.value) return;
+    const target = event.target as Node | null;
+    
+    // 检查点击是否在面板内部，或者是在二级弹窗内部（如果二级弹窗是挂在 body 上的 portal 这里的逻辑会有问题，但目前 SecondaryPopup 是 AvatarDetail 的子组件，所以应该被 panelRef 包含）
+    // 但是要注意，SecondaryPopup 使用了 absolute 定位到 left: -100%，仍然是 panelRef 的子节点
+    if (target && panelRef.value.contains(target)) return;
+
+    // Prevent closing immediately after opening if click propagated
+    const now = performance.now();
+    if (now - lastOpenAt < 100) return;
+
+    close();
+  }
+
+// Record open time
+watch(() => uiStore.selectedTarget, (val) => {
+  if (val) lastOpenAt = performance.now();
+});
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleDocumentPointerDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', handleDocumentPointerDown);
+});
+</script>
+
+<template>
+  <div v-if="uiStore.selectedTarget" class="info-panel" ref="panelRef" @wheel.stop>
+    <!-- Header -->
+    <div class="panel-header">
+      <div class="title-group">
+        <div class="main-title">{{ title }}</div>
+        <div v-if="subTitle" class="sub-title">{{ subTitle }}</div>
+      </div>
+      <button class="close-btn" @click="close">×</button>
+    </div>
+
+    <!-- Body -->
+    <div class="panel-body">
+      <div v-if="uiStore.isLoadingDetail && !uiStore.detailData" class="state-msg">
+        加载中...
+      </div>
+      
+      <div v-else-if="uiStore.detailError" class="state-msg error">
+        {{ uiStore.detailError }}
+      </div>
+
+      <div v-else-if="uiStore.detailData && currentComponent" class="content-wrapper">
+        <component 
+          :is="currentComponent" 
+          :data="uiStore.detailData" 
+        />
+      </div>
+
+      <!-- Fallback / Legacy Hover Info (If detail failed or not applicable) -->
+      <div v-else class="legacy-list">
+        <div v-for="(line, i) in uiStore.hoverInfo" :key="i" class="line">
+          <span 
+            v-for="(seg, j) in line" 
+            :key="j"
+            :style="{ color: seg.color }"
+          >{{ seg.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.info-panel {
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  width: 320px;
+  max-height: calc(100vh - 80px);
+  background: rgba(24, 24, 24, 0.96);
+  border: 1px solid #333;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
+  color: #eee;
+  display: flex;
+  flex-direction: column;
+  z-index: 50;
+  pointer-events: auto;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: rgba(38, 38, 38, 0.95);
+  border-bottom: 1px solid #333;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  flex-shrink: 0;
+}
+
+.title-group {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.main-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.sub-title {
+  font-size: 12px;
+  color: #888;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  color: #999;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.close-btn:hover {
+  color: white;
+}
+
+.panel-body {
+  flex: 1;
+  overflow: hidden; /* Let children scroll */
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.content-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.state-msg {
+  color: #888;
+  font-size: 13px;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.state-msg.error {
+  color: #ff7875;
+}
+
+/* Scrollbar Styling */
+.panel-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.panel-body::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+
+.panel-body::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 3px;
+}
+
+.panel-body::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Legacy */
+.legacy-list {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.line {
+  margin-bottom: 4px;
+  white-space: pre-wrap;
+}
+</style>
+
diff --git a/web/src/components/game/panels/info/RegionDetail.vue b/web/src/components/game/panels/info/RegionDetail.vue
new file mode 100644
index 0000000..0b917e4
--- /dev/null
+++ b/web/src/components/game/panels/info/RegionDetail.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { RegionDetail, EffectEntity } from '@/types/core';
+import EntityRow from './components/EntityRow.vue';
+import SecondaryPopup from './components/SecondaryPopup.vue';
+import { translateElement } from '@/utils/formatters/dictionary';
+
+defineProps<{
+  data: RegionDetail;
+}>();
+
+const secondaryItem = ref<EffectEntity | null>(null);
+
+function showDetail(item: EffectEntity | undefined) {
+  if (item) {
+    secondaryItem.value = item;
+  }
+}
+</script>
+
+<template>
+  <div class="region-detail">
+    <SecondaryPopup 
+      :item="secondaryItem" 
+      @close="secondaryItem = null" 
+    />
+
+    <!-- Info -->
+    <div class="section">
+      <div class="section-title">{{ data.type_name }}</div>
+      <div class="desc">{{ data.desc }}</div>
+    </div>
+
+    <!-- Essence -->
+    <div class="section" v-if="data.essence">
+      <div class="section-title">灵气环境</div>
+      <div class="essence-info">
+        {{ translateElement(data.essence.type) }}行灵气 · 浓度 {{ data.essence.density }}
+      </div>
+    </div>
+
+    <!-- Animals -->
+    <div class="section" v-if="data.animals?.length">
+      <div class="section-title">动物分布</div>
+      <div class="list">
+        <EntityRow 
+          v-for="animal in data.animals"
+          :key="animal.name"
+          :item="animal"
+          compact
+          @click="showDetail(animal)"
+        />
+      </div>
+    </div>
+
+    <!-- Plants -->
+    <div class="section" v-if="data.plants?.length">
+      <div class="section-title">植物分布</div>
+      <div class="list">
+        <EntityRow 
+          v-for="plant in data.plants"
+          :key="plant.name"
+          :item="plant"
+          compact
+          @click="showDetail(plant)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.region-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+  text-transform: uppercase;
+  border-bottom: 1px solid #333;
+  padding-bottom: 4px;
+}
+
+.desc {
+  font-size: 13px;
+  line-height: 1.5;
+  color: #ccc;
+}
+
+.essence-info {
+  font-size: 13px;
+  color: #88fdc4;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+</style>
diff --git a/web/src/components/game/panels/info/components/EntityRow.vue b/web/src/components/game/panels/info/components/EntityRow.vue
new file mode 100644
index 0000000..f48cc94
--- /dev/null
+++ b/web/src/components/game/panels/info/components/EntityRow.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { getEntityColor } from '@/utils/theme';
+import type { EffectEntity } from '@/types/core';
+
+defineProps<{
+  item: EffectEntity;
+  meta?: string; // e.g. "Rank 3" or "Count: 5"
+  compact?: boolean;
+}>();
+
+defineEmits(['click']);
+</script>
+
+<template>
+  <div 
+    class="entity-row" 
+    :class="{ 'compact': compact }"
+    @click="$emit('click')"
+  >
+    <span class="name" :style="{ color: getEntityColor(item) }">
+      {{ item.name }}
+    </span>
+    <span v-if="meta || item.grade" class="meta">
+      {{ meta || item.grade }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.entity-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.2s;
+}
+
+.entity-row:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.entity-row.compact {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.meta {
+  font-size: 11px;
+  color: #888;
+}
+</style>
+
diff --git a/web/src/components/game/panels/info/components/SecondaryPopup.vue b/web/src/components/game/panels/info/components/SecondaryPopup.vue
new file mode 100644
index 0000000..dee5345
--- /dev/null
+++ b/web/src/components/game/panels/info/components/SecondaryPopup.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { EffectEntity } from '@/types/core';
+import { getEntityColor } from '@/utils/theme';
+
+const props = defineProps<{
+  item: EffectEntity | null;
+}>();
+
+const emit = defineEmits(['close']);
+
+// 简单的状态，用于决定是否显示
+// 实际显示逻辑由父组件通过 props.item 控制
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="item" class="secondary-panel">
+      <div class="sec-header">
+        <span class="sec-title" :style="{ color: getEntityColor(item) }">
+          {{ item.name }}
+        </span>
+        <button class="close-btn" @click="$emit('close')">×</button>
+      </div>
+      
+      <div class="sec-body">
+        <div class="sec-row" v-if="item.grade || item.rarity">
+          <span class="badge">{{ item.grade || item.rarity }}</span>
+        </div>
+        
+        <div class="sec-desc" v-if="item.desc">{{ item.desc }}</div>
+        
+        <div v-if="item.effect_desc" class="effect-box">
+          <div class="label">效果：</div>
+          <div class="effect-text">{{ item.effect_desc }}</div>
+        </div>
+        
+        <!-- 动态字段展示 (Extensibility) -->
+        <div v-if="item.hq_name" class="extra-info">
+          <div><strong>驻地:</strong> {{ item.hq_name }}</div>
+          <div class="sub-desc">{{ item.hq_desc }}</div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.secondary-panel {
+  position: fixed;
+  top: 96px;       /* 36px (StatusBar) + 60px (InfoPanel top offset) */
+  /* 
+    计算逻辑：
+    Sidebar Width: 400px (App.vue 中定义的右侧侧边栏)
+    InfoPanel Margin Right: 20px (相对于 map-container 右侧)
+    InfoPanel Width: 320px
+    Gap: 12px
+    Total Right = 400 + 20 + 320 + 12 = 752px
+  */
+  right: 752px;
+  width: 260px;
+  background: rgba(32, 32, 32, 0.98);
+  border: 1px solid #555;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sec-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #444;
+  padding-bottom: 8px;
+}
+
+.sec-title {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  color: #888;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.close-btn:hover {
+  color: #fff;
+}
+
+.sec-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 13px;
+  color: #ccc;
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 6px;
+  background: #444;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #fff;
+}
+
+.sec-desc {
+  line-height: 1.5;
+  color: #bbb;
+}
+
+.effect-box {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #444;
+}
+
+.label {
+  font-size: 11px;
+  color: #888;
+  margin-bottom: 4px;
+}
+
+.effect-text {
+  color: #ffd700;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.extra-info {
+  border-top: 1px solid #444;
+  padding-top: 8px;
+  font-size: 12px;
+}
+
+.sub-desc {
+  color: #888;
+  margin-top: 2px;
+}
+</style>
diff --git a/web/src/components/game/panels/info/components/StatItem.vue b/web/src/components/game/panels/info/components/StatItem.vue
new file mode 100644
index 0000000..773c97b
--- /dev/null
+++ b/web/src/components/game/panels/info/components/StatItem.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  value: string | number;
+  subValue?: string | number;
+  onClick?: () => void;
+  fullWidth?: boolean;
+}>();
+
+const isClickable = computed(() => !!props.onClick);
+</script>
+
+<template>
+  <div 
+    class="stat-item" 
+    :class="{ 'clickable': isClickable, 'full': fullWidth }"
+    @click="onClick"
+  >
+    <label>{{ label }}</label>
+    <span>
+      {{ value }}
+      <small v-if="subValue" class="sub-value">({{ subValue }})</small>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 4px;
+  padding: 4px;
+  margin: -4px;
+  border: 1px solid transparent;
+}
+
+.stat-item.full {
+  grid-column: span 2;
+}
+
+.stat-item.clickable {
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.stat-item.clickable:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+label {
+  font-size: 11px;
+  color: #888;
+}
+
+span {
+  font-size: 13px;
+  color: #ddd;
+  font-weight: 500;
+}
+
+.sub-value {
+  color: #666;
+  font-size: 11px;
+  margin-left: 4px;
+}
+</style>
+
diff --git a/web/src/components/game/panels/info/components/TagList.vue b/web/src/components/game/panels/info/components/TagList.vue
new file mode 100644
index 0000000..6edc4e1
--- /dev/null
+++ b/web/src/components/game/panels/info/components/TagList.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { getEntityColor } from '@/utils/theme';
+import type { EffectEntity } from '@/types/core';
+
+defineProps<{
+  tags: EffectEntity[];
+}>();
+
+defineEmits<{
+  (e: 'click', item: EffectEntity): void;
+}>();
+</script>
+
+<template>
+  <div class="tags-container">
+    <span 
+      v-for="tag in tags" 
+      :key="tag.id || tag.name" 
+      class="tag"
+      :style="{ borderColor: getEntityColor(tag) }"
+      @click="$emit('click', tag)"
+    >
+      {{ tag.name }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag {
+  font-size: 12px;
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid #444;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #ccc;
+}
+
+.tag:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: #666;
+  color: #fff;
+}
+</style>
+
diff --git a/web/src/components/layout/StatusBar.vue b/web/src/components/layout/StatusBar.vue
index c9cd110..2ee0c7c 100644
--- a/web/src/components/layout/StatusBar.vue
+++ b/web/src/components/layout/StatusBar.vue
@@ -1,14 +1,30 @@
 <script setup lang="ts">
-import { useGameStore } from '../../stores/game'
+import { useWorldStore } from '../../stores/world'
+import { gameSocket } from '../../api/socket'
+import { ref, onMounted, onUnmounted } from 'vue'
 
-const store = useGameStore()
+const store = useWorldStore()
+const isConnected = ref(false)
+
+// Update status locally since socket store is bare-bones
+let cleanup: (() => void) | undefined;
+
+onMounted(() => {
+  cleanup = gameSocket.onStatusChange((status) => {
+    isConnected.value = status
+  })
+})
+
+onUnmounted(() => {
+  if (cleanup) cleanup()
+})
 </script>
 
 <template>
   <header class="top-bar">
     <div class="left">
       <span class="title">AI修仙世界模拟器</span>
-      <span class="status-dot" :class="{ connected: store.isConnected }"></span>
+      <span class="status-dot" :class="{ connected: isConnected }"></span>
     </div>
     <div class="center">
       <span class="time">{{ store.year }}年 {{ store.month }}月</span>
@@ -72,6 +88,13 @@ const store = useGameStore()
   gap: 4px;
   white-space: nowrap;
   color: #bbb;
+  display: none; /* 暂时隐藏，因为空间可能不够 */
+}
+
+@media (min-width: 1024px) {
+  .author {
+    display: flex;
+  }
 }
 
 .author-link {
@@ -83,6 +106,4 @@ const store = useGameStore()
   color: #8bc6ff;
   text-decoration: underline;
 }
-
 </style>
-
diff --git a/web/src/components/panels/EventPanel.vue b/web/src/components/panels/EventPanel.vue
index 40cefc2..3029004 100644
--- a/web/src/components/panels/EventPanel.vue
+++ b/web/src/components/panels/EventPanel.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useGameStore } from '../../stores/game'
+import { useWorldStore } from '../../stores/world'
 import { NSelect } from 'naive-ui'
 
-const store = useGameStore()
+const worldStore = useWorldStore()
 const filterValue = ref('all')
 
 const filterOptions = computed(() => [
   { label: '所有人', value: 'all' },
-  ...store.avatarList.map(avatar => ({ label: avatar.name ?? avatar.id, value: avatar.id }))
+  ...worldStore.avatarList.map(avatar => ({ label: avatar.name ?? avatar.id, value: avatar.id }))
 ])
 
 const filteredEvents = computed(() => {
-  const allEvents = Array.isArray(store.events) ? store.events : []
+  const allEvents = worldStore.events || []
   if (filterValue.value === 'all') {
     return allEvents
   }
@@ -23,16 +23,8 @@ const emptyEventMessage = computed(() => (
   filterValue.value === 'all' ? '暂无事件' : '该修士暂无事件'
 ))
 
-function formatEventDate(event: { year?: number; month?: number; monthStamp?: number }) {
-  if (typeof event.year === 'number' && typeof event.month === 'number') {
-    return `${event.year}年${event.month}月`
-  }
-  if (typeof event.monthStamp === 'number') {
-    const year = Math.floor(event.monthStamp / 12)
-    const month = (event.monthStamp % 12) + 1
-    return `${year}年${month}月`
-  }
-  return '未知'
+function formatEventDate(event: { year: number; month: number }) {
+  return `${event.year}年${event.month}月`
 }
 </script>
 
@@ -123,4 +115,3 @@ function formatEventDate(event: { year?: number; month?: number; monthStamp?: nu
   font-size: 12px;
 }
 </style>
-
diff --git a/web/src/composables/useGameSocket.ts b/web/src/composables/useGameSocket.ts
new file mode 100644
index 0000000..d229df1
--- /dev/null
+++ b/web/src/composables/useGameSocket.ts
@@ -0,0 +1,51 @@
+import { onMounted, onUnmounted } from 'vue';
+import { gameSocket } from '../api/socket';
+import { useWorldStore } from '../stores/world';
+import { useUiStore } from '../stores/ui';
+import type { TickPayloadDTO } from '../types/api';
+
+export function useGameSocket() {
+  const worldStore = useWorldStore();
+  const uiStore = useUiStore();
+
+  let cleanupMessage: (() => void) | undefined;
+  let cleanupStatus: (() => void) | undefined;
+
+  onMounted(() => {
+    // Connect socket
+    gameSocket.connect();
+
+    // Listen for ticks
+    cleanupMessage = gameSocket.on((data: any) => {
+      if (data.type === 'tick') {
+        const payload = data as TickPayloadDTO;
+        
+        // Update World
+        worldStore.handleTick(payload);
+        
+        // UI Cache Invalidations
+        uiStore.clearHoverCache();
+        
+        // Refresh Detail if open (Silent update)
+        // 注意：这里可以选择是否每次 tick 都刷新详情，或者让用户手动刷新
+        // 为了实时性，通常会尝试静默刷新
+        if (uiStore.selectedTarget) {
+          uiStore.refreshDetail(); 
+        }
+      }
+    });
+
+    // Listen for status
+    cleanupStatus = gameSocket.onStatusChange((connected) => {
+      console.log('Socket status:', connected ? 'Connected' : 'Disconnected');
+      // Could update a connection status in a store if needed
+    });
+  });
+
+  onUnmounted(() => {
+    if (cleanupMessage) cleanupMessage();
+    if (cleanupStatus) cleanupStatus();
+    gameSocket.disconnect();
+  });
+}
+
diff --git a/web/src/composables/useMapData.ts b/web/src/composables/useMapData.ts
deleted file mode 100644
index c967403..0000000
--- a/web/src/composables/useMapData.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ref } from 'vue'
-import type { MapMatrix, Region } from '../types/game'
-import { gameApi } from '../services/gameApi'
-
-const mapTiles = ref<MapMatrix>([])
-const regions = ref<Region[]>([])
-const isMapLoaded = ref(false)
-let inFlight: Promise<void> | null = null
-
-async function loadMapData() {
-  if (isMapLoaded.value) return
-  if (inFlight) return inFlight
-
-  inFlight = gameApi.getMap()
-    .then((data) => {
-      mapTiles.value = data.data ?? []
-      regions.value = data.regions ?? []
-      isMapLoaded.value = mapTiles.value.length > 0
-    })
-    .finally(() => {
-      inFlight = null
-    })
-
-  return inFlight
-}
-
-export function useMapData() {
-  return {
-    mapTiles,
-    regions,
-    isMapLoaded,
-    loadMapData
-  }
-}
-
diff --git a/web/src/services/apiClient.ts b/web/src/services/apiClient.ts
deleted file mode 100644
index c2b2c40..0000000
--- a/web/src/services/apiClient.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-const DEFAULT_TIMEOUT = 10000
-
-export interface ApiRequestOptions extends RequestInit {
-  timeout?: number
-}
-
-export async function apiGet<T>(url: string, options: ApiRequestOptions = {}): Promise<T> {
-  const { timeout = DEFAULT_TIMEOUT, ...init } = options
-  const controller = new AbortController()
-  const timer = window.setTimeout(() => controller.abort(), timeout)
-
-  try {
-    const response = await fetch(url, { ...init, signal: controller.signal })
-    if (!response.ok) {
-      throw new Error(`请求失败：${response.status}`)
-    }
-    return (await response.json()) as T
-  } finally {
-    window.clearTimeout(timer)
-  }
-}
-
-export async function apiPost<T>(url: string, body: any, options: ApiRequestOptions = {}): Promise<T> {
-  const { timeout = DEFAULT_TIMEOUT, headers, ...init } = options
-  const controller = new AbortController()
-  const timer = window.setTimeout(() => controller.abort(), timeout)
-
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...headers
-      },
-      body: JSON.stringify(body),
-      signal: controller.signal,
-      ...init
-    })
-    if (!response.ok) {
-      throw new Error(`请求失败：${response.status}`)
-    }
-    return (await response.json()) as T
-  } finally {
-    window.clearTimeout(timer)
-  }
-}
diff --git a/web/src/services/gameApi.ts b/web/src/services/gameApi.ts
deleted file mode 100644
index 311da28..0000000
--- a/web/src/services/gameApi.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type {
-  HoverResponse,
-  HoverTarget,
-  InitialStateResponse,
-  MapResponse,
-  IAvatarDetail,
-  DetailInfo
-} from '../types/game'
-import { apiGet, apiPost } from './apiClient'
-
-function buildHoverQuery(target: HoverTarget) {
-  const query = new URLSearchParams({
-    type: target.type,
-    id: target.id
-  })
-  return `/api/hover?${query.toString()}`
-}
-
-function buildDetailQuery(target: HoverTarget) {
-  const query = new URLSearchParams({
-    type: target.type,
-    id: target.id
-  })
-  return `/api/detail?${query.toString()}`
-}
-
-export interface SaveFile {
-  filename: string
-  save_time: string
-  game_time: string
-  version: string
-}
-
-export const gameApi = {
-  getInitialState() {
-    return apiGet<InitialStateResponse>('/api/state')
-  },
-
-  getHoverInfo(target: HoverTarget) {
-    return apiGet<HoverResponse>(buildHoverQuery(target))
-  },
-
-  getDetailInfo(target: HoverTarget) {
-    return apiGet<DetailInfo>(buildDetailQuery(target))
-  },
-
-  getMap() {
-    return apiGet<MapResponse>('/api/map')
-  },
-
-  setLongTermObjective(avatarId: string, content: string) {
-    return apiPost<{ status: string; message: string }>('/api/action/set_long_term_objective', {
-      avatar_id: avatarId,
-      content
-    })
-  },
-
-  clearLongTermObjective(avatarId: string) {
-    return apiPost<{ status: string; message: string }>('/api/action/clear_long_term_objective', {
-      avatar_id: avatarId
-    })
-  },
-  
-  // --- 游戏控制 API ---
-  
-  pauseGame() {
-    return apiPost<{ status: string; message: string }>('/api/control/pause', {})
-  },
-  
-  resumeGame() {
-    return apiPost<{ status: string; message: string }>('/api/control/resume', {})
-  },
-
-  // --- 存读档 API ---
-
-  getSaves() {
-    return apiGet<{ saves: SaveFile[] }>('/api/saves')
-  },
-
-  saveGame(filename?: string) {
-    return apiPost<{ status: string; filename: string }>('/api/game/save', {
-      filename
-    })
-  },
-
-  loadGame(filename: string) {
-    return apiPost<{ status: string; message: string }>('/api/game/load', {
-      filename
-    })
-  }
-}
diff --git a/web/src/services/gameGateway.ts b/web/src/services/gameGateway.ts
deleted file mode 100644
index a23c034..0000000
--- a/web/src/services/gameGateway.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { TickPayload } from '../types/game'
-
-export interface GatewayHandlers {
-  onTick?: (payload: TickPayload) => void
-  onStatusChange?: (connected: boolean) => void
-  onError?: (error: unknown) => void
-}
-
-export interface GatewayOptions {
-  reconnect?: boolean
-  url?: string
-  baseDelay?: number
-  maxDelay?: number
-}
-
-export function createGameGateway(
-  handlers: GatewayHandlers,
-  options: GatewayOptions = {}
-) {
-  const reconnectEnabled = options.reconnect !== false
-  const baseDelay = options.baseDelay ?? 1000
-  const maxDelay = options.maxDelay ?? 8000
-
-  let ws: WebSocket | null = null
-  let reconnectTimer: number | null = null
-  let reconnectAttempts = 0
-  let manuallyClosed = false
-
-  function getUrl() {
-    if (options.url) return options.url
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    return `${protocol}//${window.location.host}/ws`
-  }
-
-  function clearReconnectTimer() {
-    if (reconnectTimer != null) {
-      window.clearTimeout(reconnectTimer)
-      reconnectTimer = null
-    }
-  }
-
-  function cleanupSocket() {
-    if (!ws) return
-    ws.onopen = null
-    ws.onmessage = null
-    ws.onerror = null
-    ws.onclose = null
-    ws = null
-  }
-
-  function scheduleReconnect() {
-    if (!reconnectEnabled || manuallyClosed) return
-    clearReconnectTimer()
-    const delay = Math.min(maxDelay, baseDelay * 2 ** reconnectAttempts)
-    reconnectAttempts += 1
-    reconnectTimer = window.setTimeout(() => {
-      connect()
-    }, delay)
-  }
-
-  function handleMessage(event: MessageEvent) {
-    try {
-      const data = JSON.parse(event.data)
-      if (data?.type === 'tick') {
-        handlers.onTick?.(data as TickPayload)
-      }
-    } catch (error) {
-      handlers.onError?.(error)
-    }
-  }
-
-  function handleOpen() {
-    reconnectAttempts = 0
-    handlers.onStatusChange?.(true)
-  }
-
-  function handleClose() {
-    handlers.onStatusChange?.(false)
-    cleanupSocket()
-    scheduleReconnect()
-  }
-
-  function handleError(error: Event) {
-    handlers.onError?.(error)
-  }
-
-  function connect() {
-    manuallyClosed = false
-    clearReconnectTimer()
-    cleanupSocket()
-
-    try {
-      ws = new WebSocket(getUrl())
-      ws.onopen = handleOpen
-      ws.onmessage = handleMessage
-      ws.onerror = handleError
-      ws.onclose = handleClose
-    } catch (error) {
-      handlers.onError?.(error)
-      scheduleReconnect()
-    }
-  }
-
-  function disconnect() {
-    manuallyClosed = true
-    clearReconnectTimer()
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.close()
-    } else {
-      cleanupSocket()
-    }
-  }
-
-  return {
-    connect,
-    disconnect,
-    get readyState() {
-      return ws?.readyState ?? WebSocket.CLOSED
-    }
-  }
-}
diff --git a/web/src/stores/game.ts b/web/src/stores/game.ts
deleted file mode 100644
index d460209..0000000
--- a/web/src/stores/game.ts
+++ /dev/null
@@ -1,297 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-import type {
-  Avatar,
-  GameEvent,
-  HoverLine,
-  HoverTarget,
-  TickPayload,
-  IAvatarDetail,
-  DetailInfo
-} from '../types/game'
-import { gameApi } from '../services/gameApi'
-import { createGameGateway } from '../services/gameGateway'
-import { normalizeGameEvent, normalizeHoverLines } from '../utils/normalizers'
-
-const MAX_EVENTS = 200
-
-function cacheKey(target: HoverTarget) {
-  return `${target.type}:${target.id}`
-}
-
-function eventRank(event: GameEvent) {
-  if (typeof event.monthStamp === 'number') {
-    return event.monthStamp
-  }
-  if (typeof event.year === 'number' && typeof event.month === 'number') {
-    return event.year * 12 + event.month
-  }
-  return -Infinity
-}
-
-function sortEventsDescending(a: GameEvent, b: GameEvent) {
-  const diff = eventRank(b) - eventRank(a)
-  if (diff !== 0) return diff
-  return b.id.localeCompare(a.id)
-}
-
-export const useGameStore = defineStore('game', () => {
-  const isConnected = ref(false)
-  const year = ref(0)
-  const month = ref(0)
-  const avatars = ref<Record<string, Avatar>>({})
-  const events = ref<GameEvent[]>([])
-  const selectedTarget = ref<HoverTarget | null>(null)
-  const hoverInfo = ref<HoverLine[]>([])
-  const detailInfo = ref<DetailInfo | null>(null)
-  const infoLoading = ref(false)
-  const infoError = ref<string | null>(null)
-  const hoverCache = new Map<string, HoverLine[]>()
-  
-  // 新增：用于标记世界是否被重置（读档）
-  const worldVersion = ref(0)
-
-  const avatarList = computed(() => Object.values(avatars.value))
-
-  const gateway = createGameGateway({
-    onTick: handleTickPayload,
-    onStatusChange: (connected) => {
-      isConnected.value = connected
-    },
-    onError: (error) => {
-      console.error('WS Error', error)
-    }
-  })
-
-  function handleTickPayload(payload: TickPayload) {
-    year.value = payload.year
-    month.value = payload.month
-    appendEvents(payload.events)
-
-    if (Array.isArray(payload.avatars)) {
-      mergeAvatars(payload.avatars)
-    }
-
-    // Tick means time passed, so cache is stale
-    hoverCache.clear()
-    
-    // If panel is open, silently refresh content to show latest status
-    if (selectedTarget.value) {
-      if (selectedTarget.value.type === 'avatar') {
-        fetchDetailInfo(selectedTarget.value, { silent: true })
-      } else {
-        fetchHoverInfo(selectedTarget.value, { force: true, silent: true })
-      }
-    }
-  }
-
-  function mergeAvatars(list: Avatar[]) {
-    list.forEach((av) => {
-      const existing = avatars.value[av.id]
-      avatars.value[av.id] = existing ? { ...existing, ...av } : { ...av }
-    })
-  }
-
-  function appendEvents(rawEvents: unknown) {
-    if (!Array.isArray(rawEvents) || !rawEvents.length) return
-    const bucket = new Map(events.value.map((evt) => [evt.id, evt]))
-    let changed = false
-
-    rawEvents.forEach((item) => {
-      const evt = normalizeGameEvent(item)
-      if (!evt) return
-      bucket.set(evt.id, evt)
-      changed = true
-    })
-
-    if (!changed) return
-
-    const nextEvents = [...bucket.values()].sort(sortEventsDescending).slice(0, MAX_EVENTS)
-    events.value = nextEvents
-  }
-
-  async function fetchInitialState() {
-    try {
-      const data = await gameApi.getInitialState()
-      if (data.status !== 'ok') return
-      year.value = data.year
-      month.value = data.month
-      if (Array.isArray(data.avatars)) {
-        const nextAvatars: Record<string, Avatar> = {}
-        data.avatars.forEach((av) => {
-          nextAvatars[av.id] = av
-        })
-        avatars.value = nextAvatars
-      }
-      
-      // 重置事件列表，而不是追加，因为是全新状态
-      events.value = []
-      appendEvents(data.events)
-    } catch (error) {
-      console.error('Fetch State Error', error)
-    }
-  }
-
-  async function fetchDetailInfo(target: HoverTarget, options: { silent?: boolean } = {}) {
-    const { silent = false } = options
-    if (!silent) {
-      infoLoading.value = true
-      infoError.value = null
-      detailInfo.value = null
-    }
-
-    try {
-      const data = await gameApi.getDetailInfo(target)
-      // Check if result matches current selection (race condition)
-      if (selectedTarget.value && selectedTarget.value.id === target.id) {
-        detailInfo.value = data
-        // If fallback is true, we might also want to populate hoverInfo for legacy support,
-        // but InfoPanel should handle detailInfo with lines fallback.
-      }
-    } catch (error) {
-      if (selectedTarget.value && selectedTarget.value.id === target.id) {
-        if (!silent) {
-          infoError.value = error instanceof Error ? error.message : String(error)
-          detailInfo.value = null
-        }
-      }
-    } finally {
-      if (selectedTarget.value && selectedTarget.value.id === target.id) {
-        if (!silent) {
-          infoLoading.value = false
-        }
-      }
-    }
-  }
-
-  async function fetchHoverInfo(target: HoverTarget, options: { force?: boolean, silent?: boolean } = {}) {
-    const { force = false, silent = false } = options
-    const key = cacheKey(target)
-    
-    if (!force) {
-      const cached = hoverCache.get(key)
-      if (cached) {
-        if (selectedTarget.value && cacheKey(selectedTarget.value) === key) {
-          hoverInfo.value = cached
-        }
-        if (!silent) {
-          infoLoading.value = false
-          infoError.value = null
-        }
-        return
-      }
-    }
-
-    if (!silent) {
-      infoLoading.value = true
-      infoError.value = null
-      if (!force) hoverInfo.value = []
-    }
-
-    try {
-      const data = await gameApi.getHoverInfo(target)
-      const lines = normalizeHoverLines(data.lines)
-      hoverCache.set(key, lines)
-      if (selectedTarget.value && cacheKey(selectedTarget.value) === key) {
-        hoverInfo.value = lines
-      }
-    } catch (error) {
-      if (selectedTarget.value && cacheKey(selectedTarget.value) === key) {
-        if (!silent) {
-          infoError.value = error instanceof Error ? error.message : String(error)
-          hoverInfo.value = []
-        }
-      }
-    } finally {
-      if (selectedTarget.value && cacheKey(selectedTarget.value) === key) {
-        if (!silent) {
-          infoLoading.value = false
-        }
-      }
-    }
-  }
-
-  async function setLongTermObjective(avatarId: string, content: string) {
-    await gameApi.setLongTermObjective(avatarId, content)
-    // 成功后刷新 info panel
-    if (selectedTarget.value && selectedTarget.value.id === avatarId && selectedTarget.value.type === 'avatar') {
-      await fetchDetailInfo(selectedTarget.value, { silent: true })
-    }
-  }
-
-  async function clearLongTermObjective(avatarId: string) {
-    await gameApi.clearLongTermObjective(avatarId)
-    // 成功后刷新 info panel
-    if (selectedTarget.value && selectedTarget.value.id === avatarId && selectedTarget.value.type === 'avatar') {
-      await fetchDetailInfo(selectedTarget.value, { silent: true })
-    }
-  }
-
-  async function reloadGame(filename: string) {
-    // 1. 调用加载接口
-    await gameApi.loadGame(filename)
-    
-    // 2. 清空前端状态
-    avatars.value = {}
-    events.value = []
-    hoverCache.clear()
-    hoverInfo.value = []
-    selectedTarget.value = null
-    
-    // 3. 重新获取初始状态
-    await fetchInitialState()
-    
-    // 4. 更新世界版本，触发特定组件重绘
-    worldVersion.value++
-    
-    return true
-  }
-
-  function connect() {
-    gateway.connect()
-  }
-
-  function disconnect() {
-    gateway.disconnect()
-  }
-
-  function openInfoPanel(target: HoverTarget) {
-    selectedTarget.value = target
-    if (target.type === 'avatar' || target.type === 'region') {
-      fetchDetailInfo(target)
-    } else {
-      fetchHoverInfo(target)
-    }
-  }
-
-  function closeInfoPanel() {
-    selectedTarget.value = null
-    infoError.value = null
-    hoverInfo.value = []
-    detailInfo.value = null
-    infoLoading.value = false
-  }
-
-  return {
-    isConnected,
-    year,
-    month,
-    avatars,
-    avatarList,
-    events,
-    selectedTarget,
-    hoverInfo,
-    detailInfo,
-    infoLoading,
-    infoError,
-    worldVersion, // 导出
-    connect,
-    disconnect,
-    fetchInitialState,
-    openInfoPanel,
-    closeInfoPanel,
-    setLongTermObjective,
-    clearLongTermObjective,
-    reloadGame
-  }
-})
diff --git a/web/src/stores/ui.ts b/web/src/stores/ui.ts
new file mode 100644
index 0000000..3017977
--- /dev/null
+++ b/web/src/stores/ui.ts
@@ -0,0 +1,136 @@
+import { defineStore } from 'pinia';
+import { ref, computed, watch } from 'vue';
+import { gameApi } from '../api/game';
+import type { AvatarDetail, RegionDetail, HoverLine } from '../types/core';
+import { useWorldStore } from './world'; // Optional, if we need to cross-reference
+
+export type SelectionType = 'avatar' | 'region';
+
+export interface Selection {
+  type: SelectionType;
+  id: string;
+}
+
+export const useUiStore = defineStore('ui', () => {
+  // --- Selection & Panels ---
+  
+  const selectedTarget = ref<Selection | null>(null);
+  
+  // 详情数据 (可能为空，或正在加载)
+  const detailData = ref<AvatarDetail | RegionDetail | null>(null);
+  const isLoadingDetail = ref(false);
+  const detailError = ref<string | null>(null);
+
+  // --- Hover ---
+  
+  const hoveringTarget = ref<Selection | null>(null);
+  const hoverInfo = ref<HoverLine[]>([]);
+  
+  // --- Actions ---
+
+  async function select(type: SelectionType, id: string) {
+    if (selectedTarget.value?.type === type && selectedTarget.value?.id === id) {
+      return; // Already selected
+    }
+    
+    selectedTarget.value = { type, id };
+    detailData.value = null; // Reset current data
+    
+    await refreshDetail();
+  }
+
+  function clearSelection() {
+    selectedTarget.value = null;
+    detailData.value = null;
+    detailError.value = null;
+  }
+
+  async function refreshDetail() {
+    if (!selectedTarget.value) return;
+
+    const target = { ...selectedTarget.value };
+    isLoadingDetail.value = true;
+    detailError.value = null;
+
+    try {
+      const data = await gameApi.fetchDetailInfo(target);
+      
+      // Race condition check: user might have changed selection
+      if (
+        selectedTarget.value?.type === target.type && 
+        selectedTarget.value?.id === target.id
+      ) {
+        detailData.value = data as any; // Cast DTO to Domain Model (assuming compatibility for now)
+      }
+    } catch (e) {
+      if (
+        selectedTarget.value?.type === target.type && 
+        selectedTarget.value?.id === target.id
+      ) {
+        detailError.value = e instanceof Error ? e.message : 'Failed to load detail';
+      }
+    } finally {
+      if (
+        selectedTarget.value?.type === target.type && 
+        selectedTarget.value?.id === target.id
+      ) {
+        isLoadingDetail.value = false;
+      }
+    }
+  }
+
+  // --- Hover Actions ---
+
+  // Simple cache for hover
+  const hoverCache = new Map<string, HoverLine[]>();
+
+  async function setHover(type: SelectionType | null, id?: string) {
+    if (!type || !id) {
+      hoveringTarget.value = null;
+      return;
+    }
+
+    const key = `${type}:${id}`;
+    hoveringTarget.value = { type, id };
+    
+    // Check cache
+    if (hoverCache.has(key)) {
+      hoverInfo.value = hoverCache.get(key)!;
+      return;
+    }
+
+    try {
+      const res = await gameApi.fetchHoverInfo({ type, id });
+      // Normalize lines... (Assuming backend returns lines compatible with HoverLine)
+      const lines = res.lines as HoverLine[]; 
+      hoverCache.set(key, lines);
+      
+      if (hoveringTarget.value?.type === type && hoveringTarget.value?.id === id) {
+        hoverInfo.value = lines;
+      }
+    } catch (e) {
+      console.warn('Hover fetch failed', e);
+    }
+  }
+
+  function clearHoverCache() {
+    hoverCache.clear();
+  }
+
+  return {
+    selectedTarget,
+    detailData,
+    isLoadingDetail,
+    detailError,
+    
+    hoveringTarget,
+    hoverInfo,
+    
+    select,
+    clearSelection,
+    refreshDetail,
+    setHover,
+    clearHoverCache
+  };
+});
+
diff --git a/web/src/stores/world.ts b/web/src/stores/world.ts
new file mode 100644
index 0000000..a554813
--- /dev/null
+++ b/web/src/stores/world.ts
@@ -0,0 +1,143 @@
+import { defineStore } from 'pinia';
+import { ref, shallowRef, computed } from 'vue';
+import type { AvatarSummary, GameEvent, MapMatrix, RegionSummary } from '../types/core';
+import type { TickPayloadDTO, InitialStateDTO, MapResponseDTO } from '../types/api';
+import { gameApi } from '../api/game';
+
+export const useWorldStore = defineStore('world', () => {
+  // --- State ---
+  
+  const year = ref(0);
+  const month = ref(0);
+  
+  // 使用 shallowRef 存储大量数据以优化性能
+  // Key: Avatar ID
+  const avatars = shallowRef<Map<string, AvatarSummary>>(new Map());
+  
+  const events = shallowRef<GameEvent[]>([]);
+  
+  const mapData = shallowRef<MapMatrix>([]);
+  const regions = shallowRef<Map<string | number, RegionSummary>>(new Map());
+  
+  const isLoaded = ref(false);
+
+  // --- Getters ---
+
+  const avatarList = computed(() => Array.from(avatars.value.values()));
+
+  // --- Actions ---
+
+  function setTime(y: number, m: number) {
+    year.value = y;
+    month.value = m;
+  }
+
+  function updateAvatars(list: Partial<AvatarSummary>[]) {
+    const next = new Map(avatars.value);
+    let changed = false;
+
+    for (const av of list) {
+      if (!av.id) continue;
+      const existing = next.get(av.id);
+      if (existing) {
+        // Merge
+        next.set(av.id, { ...existing, ...av } as AvatarSummary);
+      } else {
+        // Insert (ensure required fields exist if possible, otherwise cast)
+        // 在 Tick 中出现的新 Avatar 可能是完整的
+        next.set(av.id, av as AvatarSummary); 
+      }
+      changed = true;
+    }
+
+    if (changed) {
+      avatars.value = next;
+    }
+  }
+
+  function addEvents(rawEvents: any[]) {
+    if (!rawEvents || rawEvents.length === 0) return;
+    
+    // 转换 DTO -> Domain
+    const newEvents: GameEvent[] = rawEvents.map(e => ({
+      id: e.id,
+      text: e.text,
+      content: e.content,
+      year: e.year ?? year.value,
+      month: e.month ?? month.value,
+      timestamp: (e.year ?? year.value) * 12 + (e.month ?? month.value),
+      relatedAvatarIds: e.relatedAvatarIds || [],
+      isMajor: e.isMajor,
+      isStory: e.isStory
+    }));
+
+    // 排序并保留最新的 N 条
+    const MAX_EVENTS = 300;
+    const combined = [...newEvents, ...events.value];
+    combined.sort((a, b) => b.timestamp - a.timestamp); // 降序
+    
+    events.value = combined.slice(0, MAX_EVENTS);
+  }
+
+  function handleTick(payload: TickPayloadDTO) {
+    setTime(payload.year, payload.month);
+    if (payload.avatars) updateAvatars(payload.avatars);
+    if (payload.events) addEvents(payload.events);
+  }
+
+  async function initialize() {
+    try {
+      const [stateRes, mapRes] = await Promise.all([
+        gameApi.fetchInitialState(),
+        gameApi.fetchMap()
+      ]);
+
+      // 1. Set Map
+      mapData.value = mapRes.data;
+      const regionMap = new Map();
+      mapRes.regions.forEach(r => regionMap.set(r.id, r));
+      regions.value = regionMap;
+
+      // 2. Set State
+      setTime(stateRes.year, stateRes.month);
+      
+      const avatarMap = new Map();
+      if (stateRes.avatars) {
+        stateRes.avatars.forEach(av => avatarMap.set(av.id, av));
+      }
+      avatars.value = avatarMap;
+
+      // 3. Set Events (Initial state might have history?)
+      events.value = [];
+      if (stateRes.events) addEvents(stateRes.events);
+
+      isLoaded.value = true;
+    } catch (e) {
+      console.error('Failed to initialize world', e);
+    }
+  }
+
+  function reset() {
+    year.value = 0;
+    month.value = 0;
+    avatars.value = new Map();
+    events.value = [];
+    isLoaded.value = false;
+  }
+
+  return {
+    year,
+    month,
+    avatars,
+    avatarList,
+    events,
+    mapData,
+    regions,
+    isLoaded,
+    
+    initialize,
+    handleTick,
+    reset
+  };
+});
+
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
new file mode 100644
index 0000000..469bda8
--- /dev/null
+++ b/web/src/types/api.ts
@@ -0,0 +1,67 @@
+/**
+ * API 数据传输对象 (Data Transfer Objects)
+ * 这些类型严格对应后端接口返回的 JSON 结构。
+ */
+
+import type { MapMatrix } from './core';
+
+// --- 通用响应 ---
+
+export interface ApiResponse<T> {
+  status: 'ok' | 'error';
+  message?: string;
+  data?: T; // 有些接口直接把数据铺平在顶层，需根据实际情况调整
+}
+
+// --- 具体接口响应 ---
+
+export interface InitialStateDTO {
+  status: 'ok' | 'error';
+  year: number;
+  month: number;
+  avatars?: Array<{
+    id: string;
+    name?: string;
+    x: number;
+    y: number;
+    action?: string;
+    gender?: string;
+    pic_id?: number;
+  }>;
+  events?: unknown[];
+}
+
+export interface TickPayloadDTO {
+  type: 'tick';
+  year: number;
+  month: number;
+  avatars?: Array<Partial<InitialStateDTO['avatars'] extends (infer U)[] ? U : never>>;
+  events?: unknown[];
+}
+
+export interface MapResponseDTO {
+  data: MapMatrix;
+  regions: Array<{
+    id: string | number;
+    name: string;
+    x: number;
+    y: number;
+    type: string;
+    sect_name?: string;
+  }>;
+}
+
+export interface HoverResponseDTO {
+  lines: unknown; // 后端返回的可能是复杂的嵌套数组
+}
+
+// 详情接口返回的结构比较动态，通常包含 entity 的所有字段
+export type DetailResponseDTO = Record<string, any>;
+
+export interface SaveFileDTO {
+  filename: string;
+  save_time: string;
+  game_time: string;
+  version: string;
+}
+
diff --git a/web/src/types/core.ts b/web/src/types/core.ts
new file mode 100644
index 0000000..404f671
--- /dev/null
+++ b/web/src/types/core.ts
@@ -0,0 +1,143 @@
+/**
+ * 核心领域模型 (Core Domain Models)
+ * 这些类型代表了前端应用内部使用的“标准”数据结构。
+ * 它们应该是完整的、经过清洗的数据，尽量减少 undefined 的使用。
+ */
+
+// --- 基础实体 ---
+
+export interface EntityBase {
+  id: string;
+  name: string;
+}
+
+export interface Coordinates {
+  x: number;
+  y: number;
+}
+
+// --- 物品与效果 ---
+
+export interface EffectEntity extends EntityBase {
+  desc?: string;
+  effect_desc?: string;
+  grade?: string;
+  rarity?: string; // e.g., 'SSR', 'R', '上品'
+  type?: string;
+  color?: string | number[]; // 某些实体自带颜色
+}
+
+export interface Item extends EffectEntity {
+  count: number;
+}
+
+// --- 角色 (Avatar) ---
+
+export interface AvatarSummary extends EntityBase, Coordinates {
+  action?: string;
+  gender?: string;
+  pic_id?: number;
+}
+
+export interface AvatarDetail extends EntityBase {
+  // 基础信息
+  gender: string;
+  age: number;
+  lifespan: number;
+  nickname?: string;
+  appearance: string; // 外貌描述
+  
+  // 修行状态
+  realm: string;
+  level: number;
+  hp: { cur: number; max: number };
+  mp: { cur: number; max: number };
+  magic_stone: number;
+  
+  // 属性与资质
+  alignment: string;
+  alignment_detail?: EffectEntity;
+  root: string;
+  root_detail?: EffectEntity;
+  
+  // 思维与目标
+  thinking: string;
+  short_term_objective: string;
+  long_term_objective: string;
+  
+  // 关联实体
+  sect?: SectInfo;
+  personas: EffectEntity[];
+  technique?: EffectEntity;
+  weapon?: EffectEntity & { proficiency: string };
+  auxiliary?: EffectEntity;
+  spirit_animal?: EffectEntity;
+  
+  // 列表数据
+  items: Item[];
+  relations: RelationInfo[];
+}
+
+export interface SectInfo extends EffectEntity {
+  alignment: string;
+  style: string;
+  hq_name: string;
+  hq_desc: string;
+  rank: string;
+}
+
+export interface RelationInfo {
+  target_id: string;
+  name: string;
+  relation: string;
+  realm: string;
+  sect: string;
+}
+
+// --- 地图与区域 (Map & Region) ---
+
+export type MapMatrix = string[][];
+
+export interface RegionSummary extends EntityBase, Coordinates {
+  type: string;
+  sect_name?: string;
+}
+
+export interface RegionDetail extends EntityBase {
+  desc: string;
+  type: string;
+  type_name: string; // 中文类型名
+  
+  essence?: { 
+    type: string; 
+    density: number; 
+  };
+  
+  animals: EffectEntity[];
+  plants: EffectEntity[];
+}
+
+// --- 事件 (Events) ---
+
+export interface GameEvent {
+  id: string;
+  text: string;
+  content?: string; // 详细描述
+  year: number;
+  month: number;
+  // 排序权重
+  timestamp: number; 
+  relatedAvatarIds: string[];
+  isMajor: boolean;
+  isStory: boolean;
+}
+
+// --- 悬浮提示 (Hover) ---
+
+export type HoverSegment = {
+  text: string;
+  color?: string;
+};
+
+export type HoverLine = HoverSegment[];
+
diff --git a/web/src/types/game.ts b/web/src/types/game.ts
deleted file mode 100644
index ddb2855..0000000
--- a/web/src/types/game.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-export type HoverSegment = {
-  text: string
-  color?: string
-}
-
-export type HoverLine = HoverSegment[]
-
-export interface HoverTarget {
-  type: 'avatar' | 'region'
-  id: string
-  name?: string
-}
-
-export interface Avatar {
-  id: string
-  name?: string
-  x: number
-  y: number
-  action?: string
-  gender?: string
-  pic_id?: number
-}
-
-export interface GameEvent {
-  id: string
-  text: string
-  content?: string
-  year?: number
-  month?: number
-  monthStamp?: number
-  relatedAvatarIds: string[]
-  isMajor?: boolean
-  isStory?: boolean
-}
-
-export interface TickPayload {
-  type: 'tick'
-  year: number
-  month: number
-  avatars?: Avatar[]
-  events?: unknown[]
-}
-
-export interface InitialStateResponse {
-  status: 'ok' | 'error'
-  year: number
-  month: number
-  avatars?: Avatar[]
-  events?: unknown[]
-}
-
-export interface HoverResponse {
-  lines: unknown
-}
-
-export type MapMatrix = string[][]
-
-export interface Region {
-  id: string | number
-  name: string
-  x: number
-  y: number
-  type: string
-  sect_name?: string
-}
-
-export interface MapResponse {
-  data: MapMatrix
-  regions: Region[]
-}
-
-// --- Structured Info Types ---
-
-export interface IEffectEntity {
-  name: string;
-  desc?: string;
-  effect_desc?: string;
-  grade?: string;
-  rarity?: string;
-  type?: string;
-  // some entities might have custom fields
-  [key: string]: any;
-}
-
-export interface ISectInfo extends IEffectEntity {
-  alignment: string;
-  style: string;
-  hq_name: string;
-  hq_desc: string;
-  rank: string;
-}
-
-export interface IItemInfo extends IEffectEntity {
-  count: number;
-}
-
-export interface IRelationInfo {
-  target_id: string;
-  name: string;
-  relation: string;
-  realm: string;
-  sect: string;
-}
-
-export interface IAvatarDetail {
-  id: string;
-  name: string;
-  gender: string;
-  age: number;
-  lifespan: number;
-  realm: string;
-  level: number;
-  hp: { cur: number; max: number };
-  mp: { cur: number; max: number };
-  alignment: string;
-  alignment_detail?: IEffectEntity;
-  magic_stone: number;
-  thinking: string;
-  short_term_objective: string;
-  long_term_objective: string;
-  nickname?: string;
-  
-  personas: IEffectEntity[];
-  technique?: IEffectEntity;
-  sect?: ISectInfo;
-  weapon?: IEffectEntity & { proficiency: string };
-  auxiliary?: IEffectEntity;
-  items: IItemInfo[];
-  relations: IRelationInfo[];
-  appearance: string;
-  root: string;
-  root_detail?: IEffectEntity;
-  spirit_animal?: IEffectEntity;
-  
-  // Fallback for non-avatar targets or legacy
-  fallback?: boolean;
-  lines?: unknown; // HoverLines
-}
-
-export interface IRegionDetail {
-  id: string | number;
-  name: string;
-  desc: string;
-  type: string;
-  type_name: string;
-  
-  animals?: IEffectEntity[];
-  plants?: IEffectEntity[];
-  essence?: { type: string; density: number };
-  
-  fallback?: boolean;
-  lines?: unknown;
-}
-
-export type DetailInfo = IAvatarDetail | IRegionDetail;
diff --git a/web/src/utils/formatters/dictionary.ts b/web/src/utils/formatters/dictionary.ts
new file mode 100644
index 0000000..94f56ca
--- /dev/null
+++ b/web/src/utils/formatters/dictionary.ts
@@ -0,0 +1,24 @@
+/**
+ * 字典映射与翻译工具
+ */
+
+const ELEMENT_MAP: Record<string, string> = {
+  'metal': '金',
+  'wood': '木',
+  'water': '水',
+  'fire': '火',
+  'earth': '土',
+  'none': '无',
+  // Capitalized versions just in case
+  'Metal': '金',
+  'Wood': '木',
+  'Water': '水',
+  'Fire': '火',
+  'Earth': '土',
+  'None': '无'
+};
+
+export function translateElement(type: string): string {
+  return ELEMENT_MAP[type] || type;
+}
+
diff --git a/web/src/utils/formatters/number.ts b/web/src/utils/formatters/number.ts
new file mode 100644
index 0000000..e391b6c
--- /dev/null
+++ b/web/src/utils/formatters/number.ts
@@ -0,0 +1,19 @@
+/**
+ * 格式化工具
+ */
+
+export function formatNumber(num: number): string {
+  if (num >= 10000) {
+    return (num / 10000).toFixed(1) + '万';
+  }
+  return num.toString();
+}
+
+export function formatHp(current: number, max: number): string {
+  return `${Math.floor(current)} / ${max}`;
+}
+
+export function formatAge(age: number, lifespan: number): string {
+  return `${age} / ${lifespan}`;
+}
+
diff --git a/web/src/utils/normalizers.ts b/web/src/utils/normalizers.ts
deleted file mode 100644
index 7f5af23..0000000
--- a/web/src/utils/normalizers.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { GameEvent, HoverLine } from '../types/game'
-
-let localEventIdCounter = 0
-
-function nextLocalEventId(prefix: string) {
-  localEventIdCounter += 1
-  return `${prefix}-${Date.now()}-${localEventIdCounter}`
-}
-
-export function normalizeHoverLines(raw: unknown): HoverLine[] {
-  if (!Array.isArray(raw)) return []
-  return raw.map((line) => {
-    if (!Array.isArray(line)) {
-      return [{ text: line != null ? String(line) : '' }]
-    }
-    const segments = line.map((segment) => {
-      if (segment && typeof segment === 'object') {
-        const record = segment as Record<string, unknown>
-        const textValue = 'text' in record ? record.text : ''
-        const colorValue = 'color' in record ? record.color : undefined
-        const text = textValue != null ? String(textValue) : ''
-        const color = typeof colorValue === 'string' && colorValue ? colorValue : undefined
-        return { text, color }
-      }
-      return { text: segment != null ? String(segment) : '' }
-    })
-    return segments.length ? segments : [{ text: '' }]
-  })
-}
-
-export function normalizeGameEvent(raw: unknown): GameEvent | null {
-  if (raw == null) {
-    return null
-  }
-
-  if (typeof raw === 'string') {
-    return {
-      id: nextLocalEventId('legacy'),
-      text: raw,
-      relatedAvatarIds: []
-    }
-  }
-
-  if (typeof raw === 'object') {
-    const record = raw as Record<string, unknown>
-    const textSource = record.text ?? record.content ?? ''
-    const text = typeof textSource === 'string' ? textSource : String(textSource ?? '')
-    const idSource = record.id
-    const id = typeof idSource === 'string' && idSource ? idSource : nextLocalEventId('evt')
-    const relatedSource = record.related_avatar_ids ?? record.relatedAvatarIds ?? []
-    const relatedAvatarIds = Array.isArray(relatedSource) ? relatedSource.map((val) => String(val)) : []
-    const content = typeof record.content === 'string' ? record.content : undefined
-    const year = typeof record.year === 'number' ? record.year : undefined
-    const month = typeof record.month === 'number' ? record.month : undefined
-    const monthStampRaw = record.month_stamp ?? record.monthStamp
-    const monthStamp = typeof monthStampRaw === 'number' ? monthStampRaw : undefined
-    const isMajor = Boolean(record.is_major ?? record.isMajor ?? false)
-    const isStory = Boolean(record.is_story ?? record.isStory ?? false)
-
-    return {
-      id,
-      text: text || content || '',
-      content,
-      year,
-      month,
-      monthStamp,
-      relatedAvatarIds,
-      isMajor,
-      isStory
-    }
-  }
-
-  return {
-    id: nextLocalEventId('legacy'),
-    text: String(raw),
-    relatedAvatarIds: []
-  }
-}
diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
new file mode 100644
index 0000000..7eb4c60
--- /dev/null
+++ b/web/src/utils/theme.ts
@@ -0,0 +1,55 @@
+/**
+ * 主题与样式工具
+ * 集中管理颜色映射、稀有度判断等逻辑
+ */
+
+import type { EffectEntity } from '../types/core';
+
+// 稀有度颜色映射
+export const GRADE_COLORS: Record<string, string> = {
+  '上品': '#c488fd', // Purple
+  '宝物': '#c488fd',
+  'SR': '#c488fd',
+  'Upper': '#c488fd',
+  
+  '中品': '#88fdc4', // Green-ish
+  'R': '#88fdc4',
+  'Middle': '#88fdc4',
+  
+  '法宝': '#fddc88', // Gold
+  'SSR': '#fddc88',
+  'Artifact': '#fddc88',
+  
+  'Default': '#cccccc'
+};
+
+/**
+ * 获取实体的显示颜色
+ * 优先使用实体自带的 color 属性，其次根据 grade/rarity 查找
+ */
+export function getEntityColor(entity: Partial<EffectEntity> | undefined | null): string | undefined {
+  if (!entity) return undefined;
+
+  // 1. 直接颜色属性 (RGB数组)
+  if (entity.color && Array.isArray(entity.color) && entity.color.length === 3) {
+    const [r, g, b] = entity.color;
+    return `rgb(${r},${g},${b})`;
+  }
+  
+  // 2. 直接颜色属性 (字符串)
+  if (typeof entity.color === 'string') {
+    return entity.color;
+  }
+
+  // 3. 根据稀有度/品级映射
+  const grade = entity.grade || entity.rarity;
+  if (!grade) return undefined;
+  
+  // 简单的包含匹配
+  for (const [key, color] of Object.entries(GRADE_COLORS)) {
+    if (grade.includes(key)) return color;
+  }
+
+  return undefined;
+}
+
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 4ba8dd9..0767c8d 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -14,6 +14,12 @@
     "moduleDetection": "force",
     "noEmit": true,
 
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 9cc91a6..0316cea 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { compilerOptions } from 'vue3-pixi'
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -11,6 +12,11 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
   build: {
     assetsDir: 'web_static', // 避免与游戏原本的 /assets 目录冲突
   },