From b2cea435024ff4bf04e5020a726421e2a79e7f0d Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Wed, 15 Jul 2026 01:53:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=82=B9=E4=BD=8D=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=BF=AB=E6=8D=B7=E5=85=A5=E5=8F=A3=E6=A8=AA=E5=90=91?=
 =?UTF-8?q?=E6=BB=91=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/PoiSearchPanel.vue | 24 +++++++++++++++---------
 tests/unit/PoiSearchPanel.spec.ts        | 19 ++++++++++++++++---
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/search/PoiSearchPanel.vue b/src/components/search/PoiSearchPanel.vue
index f1381ab..96803f0 100644
--- a/src/components/search/PoiSearchPanel.vue
+++ b/src/components/search/PoiSearchPanel.vue
@@ -47,7 +47,7 @@
 
     <view v-if="variant === 'home' && !showSearchContent && !isHomeCategoryMode" class="home-category-strip">
       <view
-        v-for="item in collapsedHomeCategories"
+        v-for="item in homeCategories"
         :key="item.id"
         class="home-category-chip"
         :class="{ active: activeCategoryId === item.id }"
@@ -276,7 +276,6 @@ type PreparedPoiResults = {
 }
 
 const homeCategories = HOME_POI_CATEGORIES
-const collapsedHomeCategories = computed(() => homeCategories.slice(0, 5))
 const searchCategories = POI_CATEGORIES
 const searchCategoryColumns = computed(() => (
   props.variant === 'home' ? homeCategories : searchCategories
@@ -1117,9 +1116,14 @@ defineExpose({
 
 .home-category-strip {
   margin-top: 10px;
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  display: flex;
   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 {
@@ -1128,7 +1132,8 @@ defineExpose({
 }
 
 .home-category-chip {
-  min-width: 0;
+  min-width: calc((100% - 24px) / 5);
+  flex: 0 0 calc((100% - 24px) / 5);
   min-height: 68px;
   display: flex;
   flex-direction: column;
@@ -1145,10 +1150,13 @@ defineExpose({
 }
 
 .variant-home.is-collapsed .home-category-chip {
-  min-width: 0;
   min-height: 68px;
 }
 
+.home-category-strip::-webkit-scrollbar {
+  display: none;
+}
+
 .home-category-chip:active {
   transform: translateY(1px);
   background: #eef06d;
@@ -1461,9 +1469,7 @@ defineExpose({
 .variant-home .category-scroll {
   width: calc(100% - 8px);
   margin: 0 4px;
-  overflow: visible;
   padding-bottom: 0;
-  touch-action: pan-y;
 }
 
 .category-scroll::-webkit-scrollbar {
@@ -1541,7 +1547,7 @@ defineExpose({
   grid-template-rows: repeat(2, 72px);
   grid-auto-columns: auto;
   width: 100%;
-  min-width: 0;
+  min-width: 320px;
   gap: 6px;
 }
 
diff --git a/tests/unit/PoiSearchPanel.spec.ts b/tests/unit/PoiSearchPanel.spec.ts
index 9717d36..a482356 100644
--- a/tests/unit/PoiSearchPanel.spec.ts
+++ b/tests/unit/PoiSearchPanel.spec.ts
@@ -98,6 +98,8 @@ afterEach(() => {
 
 describe('POI 搜索面板实际渲染与状态闭环', () => {
   it('首页收缩和展开复用同一份十项快捷入口，搜索页保留完整分类', async () => {
+    const escalatorPoi = createPoi('escalator-1', '自动扶梯', 'floor-1', '1F', 'escalator', [5, 0, 5])
+    guideMocks.getInitialSearchSpacePoints.mockResolvedValue([...poiPool, escalatorPoi])
     const homeWrapper = mount(PoiSearchPanel, {
       props: {
         variant: 'home',
@@ -108,8 +110,12 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
     await flushMountedSearch()
 
     const homeCategories = homeWrapper.findAll('.home-category-chip')
-    expect(homeCategories).toHaveLength(5)
+    expect(homeCategories).toHaveLength(10)
     expect(homeCategories.map((item) => item.text())).toEqual([
+      '行程', '展览', '影院', '洗手间', '餐厅',
+      '售票处', '母婴室', '服务中心', '电梯', '扶梯'
+    ])
+    expect(homeCategories.slice(0, 5).map((item) => item.text())).toEqual([
       '行程', '展览', '影院', '洗手间', '餐厅'
     ])
     homeCategories.forEach((item) => {
@@ -117,6 +123,13 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
       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 flushMountedSearch()
     const expandedCategories = homeWrapper.findAll('.home-shortcut-grid .category-item')
@@ -126,7 +139,7 @@ describe('POI 搜索面板实际渲染与状态闭环', () => {
       '售票处', '母婴室', '服务中心', '电梯', '扶梯'
     ])
     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()
 
     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('.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.get('.search-input').element as HTMLInputElement).value).toBe('')
     expect((wrapper.emitted('results-change') || []).at(-1)?.[0]).toMatchObject({