展示展厅讲解对象编号

- 接入目录分页接口返回的 externalCode 字段
- 在讲解对象标题下方统一展示编号
- 保留空编号对象的原有布局并补充回归测试

Made-with: Proma

src/components/explain/ExplainGuideStopCatalog.vue

@@ -31,6 +31,7 @@
             </view>
             <view class="stop-copy">
               <text class="stop-name">{{ stop.name }}</text>
+              <text v-if="stop.externalCode" class="stop-code">编号：{{ stop.externalCode }}</text>
             </view>
             <view class="stop-status"><text class="stop-status-text">{{ availabilityLabel(stop) }}</text></view>
           </view>
@@ -54,6 +55,7 @@ import GuideLoadingState from '@/components/navigation/GuideLoadingState.vue'
 export interface ExplainGuideStopCatalogItem {
   id: string
   name: string
+  externalCode?: string
   hallId?: string
   hallName?: string
   floorId?: string
@@ -153,6 +155,6 @@ const handleScroll = (event: Event) => { const target = event.target as HTMLElem
 .header-back { position: absolute; left: 12px; top: 10px; width: 44px; height: 44px; display: flex; align-items: center; }.header-back-icon { width: 20px; height: 20px; position: relative; } .header-back-icon::before { content: ''; position: absolute; left: 3px; top: 4px; width: 10px; height: 10px; border-left: 1.5px solid #262421; border-bottom: 1.5px solid #262421; transform: rotate(45deg); }
 .header-back-text { display: none; }.header-title { max-width: calc(100% - 152px); padding: 0 8px; font-size: 18px; line-height: 26px; font-weight: 700; color: #262421; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .explain-scroll { height: 100%; padding: 80px 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f7f9f2; }.host-navigation .explain-scroll { padding-top: 16px; }
-.stop-list { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 4px; }.stop-card { width: 100%; min-width: 0; height: 80px; padding: 8px 0; display: flex; align-items: center; gap: 12px; box-sizing: border-box; overflow: hidden; border: 0; border-bottom: 1px solid #dbded4; border-radius: 0; background: transparent; }.stop-card:active { background: rgba(227, 235, 201, 0.4); }.stop-cover { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 6px; background: #f5f5ed; }.stop-cover-fallback { font-size: 22px; line-height: 28px; color: #a9b29b; }.stop-copy { min-width: 0; display: flex; flex: 1; overflow: hidden; }.stop-name { display: -webkit-box; max-height: 40px; font-size: 14px; line-height: 20px; font-weight: 700; color: #262421; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.stop-status { flex: 0 0 44px; width: 44px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e3ebc9; }.stop-status-text { font-size: 11px; line-height: 16px; color: #262421; white-space: nowrap; }
+.stop-list { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 4px; }.stop-card { width: 100%; min-width: 0; min-height: 80px; padding: 8px 0; display: flex; align-items: center; gap: 12px; box-sizing: border-box; overflow: hidden; border: 0; border-bottom: 1px solid #dbded4; border-radius: 0; background: transparent; }.stop-card:active { background: rgba(227, 235, 201, 0.4); }.stop-cover { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 6px; background: #f5f5ed; }.stop-cover-fallback { font-size: 22px; line-height: 28px; color: #a9b29b; }.stop-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; }.stop-code { display: block; overflow: hidden; font-size: 11px; line-height: 16px; font-weight: 600; color: #68725d; text-overflow: ellipsis; white-space: nowrap; }.stop-name { display: -webkit-box; max-height: 40px; font-size: 14px; line-height: 20px; font-weight: 700; color: #262421; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.stop-name + .stop-code { margin-top: 1px; }.stop-status { flex: 0 0 44px; width: 44px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e3ebc9; }.stop-status-text { font-size: 11px; line-height: 16px; color: #262421; white-space: nowrap; }
 .state-block { margin: 34px 0; padding: 22px 16px; box-sizing: border-box; text-align: center; border: 1px solid #e4e6df; border-radius: 8px; background: #fff; }.state-block.error { border-color: #e5c2c2; background: #fff7f7; }.state-title,.state-desc { display: block; }.state-title { font-size: 15px; line-height: 21px; font-weight: 700; color: #141412; }.state-desc { margin-top: 6px; font-size: 12px; line-height: 18px; color: #68725d; }.state-retry { margin-top: 12px; padding: 0 14px; font-size: 13px; line-height: 32px; color: #141412; background: #e0df00; border: 0; border-radius: 6px; }.load-more-state { min-height: 52px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); text-align: center; }
 </style>

src/data/adapters/backendExplainDataAdapter.ts

@@ -147,6 +147,8 @@ export interface BackendCatalogStopItem {
   mapX?: number | string | null
   mapY?: number | string | null
   name?: string | null
+  /** 馆方讲解编号，按字符串返回以保留前导零。 */
+  externalCode?: string | null
   guideLevel?: string | null
   description?: string | null
   sort?: number | null
@@ -350,6 +352,7 @@ export const toCatalogGuideStop = (
   return {
     id,
     name: firstText(source.name, `讲解点${id}`),
+    externalCode: firstText(source.externalCode) || undefined,
     hallId: hall?.id,
     hallName: hall?.name,
     floorId: stringifyId(source.floorId) || hall?.floorId,

src/domain/museum.ts

@@ -243,6 +243,8 @@ export interface MuseumExhibit {
 export interface ExplainGuideStop {
   id: string
   name: string
+  /** 馆方讲解编号，来自目录接口 externalCode，必须按字符串保留。 */
+  externalCode?: string
   hallId?: string
   hallName?: string
   floorId?: string

src/pages/explain/guide-stop-list.vue

@@ -43,6 +43,7 @@ let disposed = false
 const toGuideStopItems = (stops: ExplainGuideStop[]): ExplainGuideStopCatalogItem[] => stops.map((stop) => ({
   id: stop.id,
   name: stop.name,
+  externalCode: stop.externalCode,
   hallId: stop.hallId,
   hallName: stop.hallName,
   floorId: stop.floorId,

tests/unit/BackendExplainContentProvider.spec.ts

@@ -26,7 +26,7 @@ describe('BackendExplainContentProvider hall stop paging', () => {
         data: {
           total: 30,
           list: pageNo === '1'
-            ? [{ stopId: 'stop-1', name: '对象一', imageStatus: 'READY', coverImageUrl: '/one.jpg', outlineId: 'outline-1', linkedExhibits: [] }]
+            ? [{ stopId: 'stop-1', name: '对象一', externalCode: '0231', imageStatus: 'READY', coverImageUrl: '/one.jpg', outlineId: 'outline-1', linkedExhibits: [] }]
             : [{ stopId: 'stop-2', name: '对象二', imageStatus: 'MISSING', outlineId: 'outline-1', linkedExhibits: [] }]
         }
       }
@@ -38,7 +38,7 @@ describe('BackendExplainContentProvider hall stop paging', () => {
     ])
 
     expect(first).toMatchObject({ total: 30, pageNo: 1, pageSize: 20, hasMore: true })
-    expect(first.items[0]).toMatchObject({ id: 'stop-1', stopId: 'stop-1', hallName: '恐龙厅', outlineId: 'outline-1' })
+    expect(first.items[0]).toMatchObject({ id: 'stop-1', stopId: 'stop-1', externalCode: '0231', hallName: '恐龙厅', outlineId: 'outline-1' })
     expect(second.items.map((item) => item.id)).toEqual(['stop-2'])
     expect(requests.filter((url) => url.includes('/stops/page'))).toHaveLength(2)
     expect(requests.some((url) => url.includes('/outlines'))).toBe(false)

tests/unit/ExplainGuideStopCatalog.spec.ts

@@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest'
 import ExplainGuideStopCatalog from '@/components/explain/ExplainGuideStopCatalog.vue'
 
 const stops = [
-  { id: 'ready', name: '一个很长很长很长很长很长的讲解对象名称', coverImageUrl: '/cover.jpg', audioStatus: 'READY', hasAudio: true, hasTextRecord: true },
+  { id: 'ready', name: '一个很长很长很长很长很长的讲解对象名称', externalCode: '0231', coverImageUrl: '/cover.jpg', audioStatus: 'READY', hasAudio: true, hasTextRecord: true },
   { id: 'text', name: '图文对象', hasTextRecord: true },
   { id: 'none', name: '无内容对象' }
 ]
@@ -22,6 +22,8 @@ describe('ExplainGuideStopCatalog', () => {
     expect(wrapper.findAll('.stop-status')).toHaveLength(3)
     expect(wrapper.text()).toContain('讲解')
     expect(wrapper.text()).toContain('图文')
+    expect(wrapper.get('.stop-code').text()).toBe('编号：0231')
+    expect(wrapper.findAll('.stop-code')).toHaveLength(1)
     expect(wrapper.text()).not.toContain('暂无内容')
     expect(wrapper.find('.hall-arrow').exists()).toBe(false)
     expect(wrapper.find('.stop-name').classes()).toContain('stop-name')