feat: switch explain flow to API data

src/pages/index/index.vue

@@ -708,7 +708,9 @@ const explainGuideStopItems = computed<ExplainGuideStopSelectItem[]>(() => (
     floorId: stop.floorId,
     coverImageUrl: stop.coverImageUrl,
     description: stop.description,
-    hasAudio: stop.hasAudio
+    hasAudio: stop.hasAudio,
+    audioStatus: stop.audioStatus,
+    guideLevel: stop.guideLevel
   })) || []
 ))
 
@@ -995,19 +997,26 @@ const resolveSelectedPoiHall = async (): Promise<MuseumHall | null> => {
   if (!poi) return null
 
   const halls = await explainUseCase.listHalls()
-  const hallId = poi.hallId
-  if (hallId) {
-    const matchedById = halls.find((hall) => hall.id === hallId || hall.poiId === hallId)
-    if (matchedById) return matchedById
-  }
-
   const matchedByPoiId = halls.find((hall) => (
     hall.poiId === poi.id
     || hall.location?.poiId === poi.id
-    || (poi.entrances || []).some((entrance) => hall.poiId === entrance.sourcePlaceId)
   ))
   if (matchedByPoiId) return matchedByPoiId
 
+  const hallId = poi.hallId
+  if (hallId) {
+    const matchedById = halls.find((hall) => hall.id === hallId)
+    if (matchedById) return matchedById
+  }
+
+  const matchedByEntrance = halls.find((hall) => (
+    (poi.entrances || []).some((entrance) => (
+      hall.poiId === entrance.sourcePlaceId
+      || hall.poiId === entrance.id
+    ))
+  ))
+  if (matchedByEntrance) return matchedByEntrance
+
   const poiHallName = normalizeHallMatchText(poi.hallName || poi.name)
   return halls.find((hall) => {
     const hallName = normalizeHallMatchText(hall.name)
@@ -1932,17 +1941,30 @@ const handleExplainBack = () => {
   left: 50%;
   right: auto;
   width: calc(var(--museum-h5-page-width) - 24px);
-  bottom: calc(env(safe-area-inset-bottom) + 16px);
-  padding: 12px;
+  bottom: calc(env(safe-area-inset-bottom) + 14px);
+  padding: 10px;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid rgba(255, 255, 255, 0.96);
-  border-radius: 16px;
-  box-shadow: 0 10px 28px rgba(36, 49, 42, 0.16);
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(224, 225, 0, 0.22) 0, rgba(224, 225, 0, 0) 58px),
+    #060704;
+  border: 1px solid rgba(224, 225, 0, 0.34);
+  border-radius: 8px;
+  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
   transform: translateX(-50%);
   z-index: 1003;
 }
 
+.guide-home-dock::before {
+  content: '';
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: 0;
+  height: 4px;
+  background: var(--museum-accent);
+}
+
 .guide-home-dock.expanded {
   position: fixed;
   left: 50%;
@@ -1964,10 +1986,14 @@ const handleExplainBack = () => {
   transform: translateX(-50%);
   overflow: hidden;
   overscroll-behavior: contain;
-  touch-action: pan-y;
+  touch-action: pan-x pan-y;
   z-index: 1100;
 }
 
+.guide-home-dock.expanded::before {
+  display: none;
+}
+
 /* #ifdef H5 */
 .guide-home-dock.expanded {
   min-height: 100vh;
@@ -1988,18 +2014,18 @@ const handleExplainBack = () => {
 
 .guide-quick-actions {
   position: absolute;
-  top: clamp(96px, 14vh, 118px);
-  right: 18px;
-  width: 48px;
+  top: clamp(88px, 13vh, 112px);
+  right: 14px;
+  width: 52px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 7px;
   z-index: 1002;
 }
 
 .guide-quick-action {
-  width: 48px;
-  min-height: 56px;
+  width: 52px;
+  min-height: 58px;
   padding: 7px 4px 6px;
   display: flex;
   flex-direction: column;
@@ -2007,15 +2033,16 @@ const handleExplainBack = () => {
   justify-content: center;
   gap: 4px;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid rgba(230, 233, 224, 0.96);
+  background: rgba(245, 245, 237, 0.94);
+  border: 1px solid rgba(255, 255, 255, 0.72);
   border-radius: 8px;
-  box-shadow: 0 8px 22px rgba(36, 49, 42, 0.14);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(10px);
 }
 
 .guide-quick-action.primary {
-  background: #151713;
-  border-color: #151713;
+  background: var(--museum-accent);
+  border-color: var(--museum-accent);
 }
 
 .guide-quick-action:active {
@@ -2031,7 +2058,7 @@ const handleExplainBack = () => {
 }
 
 .guide-quick-action.primary .guide-quick-icon {
-  color: var(--museum-accent);
+  color: #0a0b08;
 }
 
 .guide-quick-icon-floor {
@@ -2113,7 +2140,7 @@ const handleExplainBack = () => {
 }
 
 .guide-quick-action-text.primary {
-  color: var(--museum-accent);
+  color: #0a0b08;
 }
 
 .route-sim-top-pill {