Compare commits
2 Commits
be5b364bbf
...
b2cea43502
| Author | SHA1 | Date | |
|---|---|---|---|
| b2cea43502 | |||
| 6c3da77693 |
@@ -47,7 +47,7 @@
|
|||||||
|
|
||||||
<view v-if="variant === 'home' && !showSearchContent && !isHomeCategoryMode" class="home-category-strip">
|
<view v-if="variant === 'home' && !showSearchContent && !isHomeCategoryMode" class="home-category-strip">
|
||||||
<view
|
<view
|
||||||
v-for="item in collapsedHomeCategories"
|
v-for="item in homeCategories"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="home-category-chip"
|
class="home-category-chip"
|
||||||
:class="{ active: activeCategoryId === item.id }"
|
:class="{ active: activeCategoryId === item.id }"
|
||||||
@@ -276,7 +276,6 @@ type PreparedPoiResults = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const homeCategories = HOME_POI_CATEGORIES
|
const homeCategories = HOME_POI_CATEGORIES
|
||||||
const collapsedHomeCategories = computed(() => homeCategories.slice(0, 5))
|
|
||||||
const searchCategories = POI_CATEGORIES
|
const searchCategories = POI_CATEGORIES
|
||||||
const searchCategoryColumns = computed(() => (
|
const searchCategoryColumns = computed(() => (
|
||||||
props.variant === 'home' ? homeCategories : searchCategories
|
props.variant === 'home' ? homeCategories : searchCategories
|
||||||
@@ -1117,9 +1116,14 @@ defineExpose({
|
|||||||
|
|
||||||
.home-category-strip {
|
.home-category-strip {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
scrollbar-width: none;
|
||||||
|
overscroll-behavior-x: contain;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
touch-action: pan-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.variant-home.is-collapsed .home-category-strip {
|
.variant-home.is-collapsed .home-category-strip {
|
||||||
@@ -1128,7 +1132,8 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.home-category-chip {
|
.home-category-chip {
|
||||||
min-width: 0;
|
min-width: calc((100% - 24px) / 5);
|
||||||
|
flex: 0 0 calc((100% - 24px) / 5);
|
||||||
min-height: 68px;
|
min-height: 68px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1145,10 +1150,13 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.variant-home.is-collapsed .home-category-chip {
|
.variant-home.is-collapsed .home-category-chip {
|
||||||
min-width: 0;
|
|
||||||
min-height: 68px;
|
min-height: 68px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home-category-strip::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.home-category-chip:active {
|
.home-category-chip:active {
|
||||||
transform: translateY(1px);
|
transform: translateY(1px);
|
||||||
background: #eef06d;
|
background: #eef06d;
|
||||||
@@ -1461,9 +1469,7 @@ defineExpose({
|
|||||||
.variant-home .category-scroll {
|
.variant-home .category-scroll {
|
||||||
width: calc(100% - 8px);
|
width: calc(100% - 8px);
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
overflow: visible;
|
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
touch-action: pan-y;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-scroll::-webkit-scrollbar {
|
.category-scroll::-webkit-scrollbar {
|
||||||
@@ -1541,7 +1547,7 @@ defineExpose({
|
|||||||
grid-template-rows: repeat(2, 72px);
|
grid-template-rows: repeat(2, 72px);
|
||||||
grid-auto-columns: auto;
|
grid-auto-columns: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 320px;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -106,9 +106,6 @@
|
|||||||
</text>
|
</text>
|
||||||
</template>
|
</template>
|
||||||
<text v-if="currentDetailTextLoading" class="section-hint">{{ detailLoadingMessage }}</text>
|
<text v-if="currentDetailTextLoading" class="section-hint">{{ detailLoadingMessage }}</text>
|
||||||
<text v-else-if="audioAvailabilityMessage" class="section-hint audio-status-hint">
|
|
||||||
{{ audioAvailabilityMessage }}
|
|
||||||
</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|||||||
@@ -144,4 +144,26 @@ describe('讲解详情音频优先布局', () => {
|
|||||||
language: 'en-US'
|
language: 'en-US'
|
||||||
}), expect.objectContaining({ displayMode: 'mini' }))
|
}), expect.objectContaining({ displayMode: 'mini' }))
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('音频不可用时只在音频控制区显示一次提示', async () => {
|
||||||
|
mocks.enterExplainDetail.mockResolvedValue({
|
||||||
|
...exhibit,
|
||||||
|
audioUrl: undefined,
|
||||||
|
audioDuration: undefined,
|
||||||
|
audioStatus: 'MISSING',
|
||||||
|
audioLanguage: 'yue-HK',
|
||||||
|
audioUnavailableReason: '当前语言暂无语音讲解。'
|
||||||
|
})
|
||||||
|
|
||||||
|
const wrapper = mount(ExhibitDetail, {
|
||||||
|
global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
|
||||||
|
})
|
||||||
|
|
||||||
|
await mocks.onLoadHandler?.({ id: exhibit.id, lang: 'yue-HK', targetType: 'STOP', targetId: 'stop-1' })
|
||||||
|
await flushPromises()
|
||||||
|
|
||||||
|
expect(wrapper.find('.detail-audio-unavailable').text()).toBe('当前语言暂无语音讲解。')
|
||||||
|
expect(wrapper.find('.audio-status-hint').exists()).toBe(false)
|
||||||
|
expect(wrapper.findAll('.section-hint')).toHaveLength(0)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -98,6 +98,8 @@ afterEach(() => {
|
|||||||
|
|
||||||
describe('POI 搜索面板实际渲染与状态闭环', () => {
|
describe('POI 搜索面板实际渲染与状态闭环', () => {
|
||||||
it('首页收缩和展开复用同一份十项快捷入口,搜索页保留完整分类', async () => {
|
it('首页收缩和展开复用同一份十项快捷入口,搜索页保留完整分类', async () => {
|
||||||
|
const escalatorPoi = createPoi('escalator-1', '自动扶梯', 'floor-1', '1F', 'escalator', [5, 0, 5])
|
||||||
|
guideMocks.getInitialSearchSpacePoints.mockResolvedValue([...poiPool, escalatorPoi])
|
||||||
const homeWrapper = mount(PoiSearchPanel, {
|
const homeWrapper = mount(PoiSearchPanel, {
|
||||||
props: {
|
props: {
|
||||||
variant: 'home',
|
variant: 'home',
|
||||||
@@ -108,8 +110,12 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
|
|||||||
await flushMountedSearch()
|
await flushMountedSearch()
|
||||||
|
|
||||||
const homeCategories = homeWrapper.findAll('.home-category-chip')
|
const homeCategories = homeWrapper.findAll('.home-category-chip')
|
||||||
expect(homeCategories).toHaveLength(5)
|
expect(homeCategories).toHaveLength(10)
|
||||||
expect(homeCategories.map((item) => item.text())).toEqual([
|
expect(homeCategories.map((item) => item.text())).toEqual([
|
||||||
|
'行程', '展览', '影院', '洗手间', '餐厅',
|
||||||
|
'售票处', '母婴室', '服务中心', '电梯', '扶梯'
|
||||||
|
])
|
||||||
|
expect(homeCategories.slice(0, 5).map((item) => item.text())).toEqual([
|
||||||
'行程', '展览', '影院', '洗手间', '餐厅'
|
'行程', '展览', '影院', '洗手间', '餐厅'
|
||||||
])
|
])
|
||||||
homeCategories.forEach((item) => {
|
homeCategories.forEach((item) => {
|
||||||
@@ -117,6 +123,13 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
|
|||||||
expect(item.find('.home-category-label').exists()).toBe(true)
|
expect(item.find('.home-category-label').exists()).toBe(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
await homeWrapper.get('[data-testid="poi-category-escalator"]').trigger('tap')
|
||||||
|
await flushMountedSearch()
|
||||||
|
expect(homeWrapper.find('[data-testid="poi-result-escalator-1"]').exists()).toBe(true)
|
||||||
|
|
||||||
|
await homeWrapper.get('[data-testid="poi-category-cancel"]').trigger('tap')
|
||||||
|
await flushMountedSearch()
|
||||||
|
|
||||||
await homeWrapper.get('.search-box').trigger('tap')
|
await homeWrapper.get('.search-box').trigger('tap')
|
||||||
await flushMountedSearch()
|
await flushMountedSearch()
|
||||||
const expandedCategories = homeWrapper.findAll('.home-shortcut-grid .category-item')
|
const expandedCategories = homeWrapper.findAll('.home-shortcut-grid .category-item')
|
||||||
@@ -126,7 +139,7 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
|
|||||||
'售票处', '母婴室', '服务中心', '电梯', '扶梯'
|
'售票处', '母婴室', '服务中心', '电梯', '扶梯'
|
||||||
])
|
])
|
||||||
expect(expandedCategories.slice(0, 5).map((item) => item.text()))
|
expect(expandedCategories.slice(0, 5).map((item) => item.text()))
|
||||||
.toEqual(homeCategories.map((item) => item.text()))
|
.toEqual(homeCategories.slice(0, 5).map((item) => item.text()))
|
||||||
homeWrapper.unmount()
|
homeWrapper.unmount()
|
||||||
|
|
||||||
const pageWrapper = mount(PoiSearchPanel, { props: { variant: 'page' } })
|
const pageWrapper = mount(PoiSearchPanel, { props: { variant: 'page' } })
|
||||||
@@ -276,7 +289,7 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
|
|||||||
|
|
||||||
expect(wrapper.find('[data-testid="poi-home-category-results"]').exists()).toBe(false)
|
expect(wrapper.find('[data-testid="poi-home-category-results"]').exists()).toBe(false)
|
||||||
expect(wrapper.find('.poi-search-content').exists()).toBe(false)
|
expect(wrapper.find('.poi-search-content').exists()).toBe(false)
|
||||||
expect(wrapper.findAll('.home-category-chip')).toHaveLength(5)
|
expect(wrapper.findAll('.home-category-chip')).toHaveLength(10)
|
||||||
expect(wrapper.findAll('.home-category-chip.active')).toHaveLength(0)
|
expect(wrapper.findAll('.home-category-chip.active')).toHaveLength(0)
|
||||||
expect((wrapper.get('.search-input').element as HTMLInputElement).value).toBe('')
|
expect((wrapper.get('.search-input').element as HTMLInputElement).value).toBe('')
|
||||||
expect((wrapper.emitted('results-change') || []).at(-1)?.[0]).toMatchObject({
|
expect((wrapper.emitted('results-change') || []).at(-1)?.[0]).toMatchObject({
|
||||||
|
|||||||
Reference in New Issue
Block a user