feat: wire guide data source and POI focus UI

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/explain/ExplainList.vue

@@ -206,15 +206,11 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import type {
+  ExplainExhibitViewModel
+} from '@/view-models/explainViewModels'
 
-export interface Exhibit {
-  id: string
-  name: string
-  artist?: string
-  hall?: string
-  floor?: string
-  image?: string
-  hasAudio?: boolean
+export interface Exhibit extends ExplainExhibitViewModel {
   audioUrl?: string
 }
 
@@ -225,6 +221,16 @@ interface SearchResult {
   type: 'exhibit' | 'hall' | 'facility'
 }
 
+const props = withDefaults(defineProps<{
+  exhibits?: Exhibit[]
+  hotSearches?: string[]
+  initialSearchHistory?: string[]
+}>(), {
+  exhibits: () => [],
+  hotSearches: () => ['恐龙化石', '银杏', '海洋生物', '霸王龙', '古植物', '矿石标本', '恐龙', '化石'],
+  initialSearchHistory: () => ['霸王龙', '化石', '恐龙']
+})
+
 const emit = defineEmits<{
   exhibitClick: [exhibit: Exhibit]
   audioClick: [exhibit: Exhibit]
@@ -259,46 +265,31 @@ let touchStartY = 0
 let touchCurrentY = 0
 
 // 热门搜索
-const hotSearches = ['恐龙化石', '银杏', '海洋生物', '霸王龙', '古植物', '矿石标本', '恐龙', '化石']
+const hotSearches = computed(() => props.hotSearches)
 
 // 搜索历史
-const searchHistory = ref<string[]>(['霸王龙', '化石', '恐龙'])
+const searchHistory = ref<string[]>([...props.initialSearchHistory])
 
 // 搜索数据
-const allData: SearchResult[] = [
-  { id: '1', name: '霸王龙化石骨架', desc: '恐龙厅 · 2F', type: 'exhibit' },
-  { id: '2', name: '银杏化石', desc: '演化厅 · B1', type: 'exhibit' },
-  { id: '3', name: '三叶虫化石', desc: '演化厅 · B1', type: 'exhibit' },
-  { id: '4', name: '腕龙骨骼', desc: '恐龙厅 · 2F', type: 'exhibit' },
-  { id: '5', name: '猛犸象象牙', desc: '人类厅 · 3F', type: 'exhibit' },
-  { id: 'h1', name: '恐龙厅', desc: '2F · 25件展品', type: 'hall' },
-  { id: 'h2', name: '演化厅', desc: 'B1 · 30件展品', type: 'hall' },
-  { id: 'h3', name: '生物厅', desc: '3F · 18件展品', type: 'hall' },
-  { id: 'f1', name: '洗手间', desc: '1F', type: 'facility' },
-  { id: 'f2', name: '咖啡厅', desc: '1F', type: 'facility' },
-]
+const allData = computed<SearchResult[]>(() => props.exhibits.map((exhibit) => ({
+  id: exhibit.id,
+  name: exhibit.name,
+  desc: exhibit.hall || exhibit.floor || '展项内容',
+  type: 'exhibit'
+})))
 
 // 搜索结果计算
 const searchResults = computed(() => {
   if (!searchInputValue.value.trim()) return []
   const kw = searchInputValue.value.toLowerCase()
-  return allData.filter(item => 
-    item.name.toLowerCase().includes(kw) || 
+  return allData.value.filter(item =>
+    item.name.toLowerCase().includes(kw) ||
     item.desc.toLowerCase().includes(kw)
   )
 })
 
 // 展品列表
-const exhibits = ref<Exhibit[]>([
-  { id: '1', name: '银杏化石', hall: '演化厅 B1', hasAudio: true, audioUrl: '' },
-  { id: '2', name: '三叶虫化石', hall: '演化厅 B1', hasAudio: true, audioUrl: '' },
-  { id: '3', name: '腕龙骨骼', hall: '恐龙厅 2F', hasAudio: true, audioUrl: '' },
-  { id: '4', name: '始祖鸟标本', hall: '演化厅 B1', hasAudio: false, audioUrl: '' },
-  { id: '5', name: '猛犸象象牙', hall: '人类厅 3F', hasAudio: true, audioUrl: '' },
-  { id: '6', name: '珊瑚礁标本', hall: '生物厅 3F', hasAudio: false, audioUrl: '' },
-  { id: '7', name: '剑龙化石', hall: '恐龙厅 2F', hasAudio: true, audioUrl: '' },
-  { id: '8', name: '鹦鹉螺化石', hall: '演化厅 B1', hasAudio: true, audioUrl: '' }
-])
+const exhibits = computed(() => props.exhibits)
 
 // 过滤展品
 const filteredExhibits = computed(() => {
@@ -306,7 +297,7 @@ const filteredExhibits = computed(() => {
     return exhibits.value
   }
   const keyword = searchKeyword.value.toLowerCase()
-  return exhibits.value.filter(exhibit => 
+  return exhibits.value.filter(exhibit =>
     exhibit.name.toLowerCase().includes(keyword) ||
     (exhibit.hall && exhibit.hall.toLowerCase().includes(keyword))
   )