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

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 {