为讲解业务单元接入预览封面

src/components/explain/ExplainHallSelect.vue

@@ -62,9 +62,12 @@
             class="hall-card unit-card"
             @tap="handleBusinessUnitClick(unit.id)"
           >
-            <view class="unit-mark">
-              <text class="unit-mark-text">{{ unit.name.slice(0, 1) || '讲' }}</text>
-            </view>
+            <image
+              class="unit-thumb"
+              :src="unitPreviewImageUrl(unit)"
+              mode="aspectFill"
+              @error="handleUnitPreviewError(unit.id)"
+            />
 
             <view class="hall-main">
               <text class="hall-name">{{ unit.name }}</text>
@@ -122,7 +125,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import {
+  EXPLAIN_UNIT_PREVIEW_FALLBACK
+} from '@/utils/explainUnitPreviews'
 
 export interface ExplainHallSelectItem {
   id: string
@@ -139,6 +145,7 @@ export interface ExplainBusinessUnitSelectItem {
   id: string
   name: string
   hallId: string
+  previewImageUrl?: string
   guideStopCount: number
 }
 
@@ -183,6 +190,7 @@ const emit = defineEmits<{
 }>()
 
 const HALL_ICON_BASE = '/static/icons/halls'
+const failedUnitPreviewIds = ref(new Set<string>())
 
 const hallIconMap: Record<string, string> = {
   宇宙厅: `${HALL_ICON_BASE}/universe.jpg`,
@@ -229,6 +237,16 @@ const hallIconUrl = (hall: ExplainHallSelectItem) => {
 
 const hallIconText = (name: string) => name.trim().slice(0, 1) || '讲'
 
+const unitPreviewImageUrl = (unit: ExplainBusinessUnitSelectItem) => (
+  failedUnitPreviewIds.value.has(unit.id)
+    ? EXPLAIN_UNIT_PREVIEW_FALLBACK
+    : unit.previewImageUrl || EXPLAIN_UNIT_PREVIEW_FALLBACK
+)
+
+const handleUnitPreviewError = (unitId: string) => {
+  failedUnitPreviewIds.value = new Set([...failedUnitPreviewIds.value, unitId])
+}
+
 const hallMetaText = (hall: ExplainHallSelectItem) => (
   typeof hall.businessUnitCount === 'number' || typeof hall.guideStopCount === 'number'
     ? `${hall.businessUnitCount || 0} 个业务单元 · ${hall.guideStopCount || 0} 个讲解点`
@@ -376,22 +394,15 @@ const handleBack = () => {
   color: #83927a;
 }
 
-.unit-mark {
+.unit-thumb {
   flex-shrink: 0;
-  width: 68px;
+  width: 96px;
   height: 68px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   border-radius: 8px;
-  background: #151713;
-}
-
-.unit-mark-text {
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: 800;
-  color: var(--museum-accent);
+  background: #eef0e4;
+  border: 1px solid rgba(36, 49, 42, 0.06);
+  box-sizing: border-box;
+  object-fit: cover;
 }
 
 .hall-main {

src/data/adapters/guideDataAdapter.ts

@@ -15,6 +15,9 @@ import {
 import {
   normalizeSameOriginPublicUrl
 } from '@/utils/publicUrl'
+import {
+  getExplainUnitPreviewImage
+} from '@/utils/explainUnitPreviews'
 import type {
   GuideStaticContentPayload,
   GuideStaticDataset,
@@ -298,6 +301,7 @@ const toExplainBusinessUnitsByHallId = (
         id: unitId,
         name: unitNameByKey.get(`${hallId}:${unitId}`) || '其他讲解',
         hallId,
+        previewImageUrl: getExplainUnitPreviewImage(unitId),
         guideStopCount: groupStops.length,
         stops: groupStops
       }))

src/domain/museum.ts

@@ -205,6 +205,7 @@ export interface ExplainBusinessUnit {
   id: string
   name: string
   hallId: string
+  previewImageUrl?: string
   guideStopCount: number
   stops: ExplainGuideStop[]
 }

src/pages/explain/list.vue

@@ -96,6 +96,7 @@ const explainBusinessUnitItems = computed<ExplainBusinessUnitSelectItem[]>(() =>
     id: unit.id,
     name: unit.name,
     hallId: unit.hallId,
+    previewImageUrl: unit.previewImageUrl,
     guideStopCount: unit.guideStopCount
   }))
 ))

src/pages/index/index.vue

@@ -467,6 +467,7 @@ const explainBusinessUnitItems = computed<ExplainBusinessUnitSelectItem[]>(() =>
     id: unit.id,
     name: unit.name,
     hallId: unit.hallId,
+    previewImageUrl: unit.previewImageUrl,
     guideStopCount: unit.guideStopCount
   }))
 ))

src/utils/explainUnitPreviews.ts

@@ -0,0 +1,46 @@
+const EXPLAIN_UNIT_PREVIEW_BASE = '/static/explain/unit-previews'
+
+export const EXPLAIN_UNIT_PREVIEW_FALLBACK = `${EXPLAIN_UNIT_PREVIEW_BASE}/default.svg`
+
+// 集中维护 H5 讲解业务单元封面，缺失或新增单元会回退到 default.svg。
+const unitPreviewImageById: Record<string, string> = {
+  '2060939176503275521': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176503275521.svg`,
+  '2060939176637493249': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176637493249.svg`,
+  '2060939176767516674': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176767516674.svg`,
+  '2060939176897540098': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939176897540098.svg`,
+  '2060939177027563521': `${EXPLAIN_UNIT_PREVIEW_BASE}/2060939177027563521.svg`,
+  '7467940240901013505': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013505.svg`,
+  '7467940240901013506': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013506.svg`,
+  '7467940240901013507': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013507.svg`,
+  '7467940240901013508': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013508.svg`,
+  '7467940240901013509': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013509.svg`,
+  '7467940240901013510': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013510.svg`,
+  '7467940240901013511': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013511.svg`,
+  '7467940240901013512': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013512.svg`,
+  '7467940240901013513': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013513.svg`,
+  '7467940240901013514': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013514.svg`,
+  '7467940240901013515': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013515.svg`,
+  '7467940240901013516': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013516.svg`,
+  '7467940240901013517': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013517.svg`,
+  '7467940240901013518': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013518.svg`,
+  '7467940240901013519': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013519.svg`,
+  '7467940240901013520': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013520.svg`,
+  '7467940240901013521': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013521.svg`,
+  '7467940240901013522': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013522.svg`,
+  '7467940240901013523': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013523.svg`,
+  '7467940240901013524': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013524.svg`,
+  '7467940240901013525': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013525.svg`,
+  '7467940240901013526': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013526.svg`,
+  '7467940240901013527': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013527.svg`,
+  '7467940240901013528': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013528.svg`,
+  '7467940240901013529': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013529.svg`,
+  '7467940240901013530': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013530.svg`,
+  '7467940240901013531': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013531.svg`,
+  '7467940240901013532': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013532.svg`,
+  '7467940240901013533': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013533.svg`,
+  '7467940240901013534': `${EXPLAIN_UNIT_PREVIEW_BASE}/7467940240901013534.svg`
+}
+
+export const getExplainUnitPreviewImage = (unitId?: string) => (
+  unitId ? unitPreviewImageById[unitId] || EXPLAIN_UNIT_PREVIEW_FALLBACK : EXPLAIN_UNIT_PREVIEW_FALLBACK
+)