From ad692e233acb140c09142819ddba9457d5fbc12b Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Sun, 5 Jul 2026 22:14:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=B5=AE=E5=B1=82=E4=B8=8E=E5=AF=BC=E8=A7=88=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navigation/GuideBottomNav.vue  |  175 ---
 src/components/navigation/GuidePageFrame.vue  |   10 +-
 .../navigation/RoutePlannerPanel.vue          |    2 +-
 src/components/search/PoiSearchPanel.vue      | 1014 +++++++++++++++++
 src/pages.json                                |    7 -
 src/pages/explain/list.vue                    |    1 -
 src/pages/facility/detail.vue                 |    5 +-
 src/pages/index/index.vue                     |  100 +-
 src/pages/route/detail.vue                    |   11 +-
 src/pages/search/index.vue                    |  983 +---------------
 10 files changed, 1094 insertions(+), 1214 deletions(-)
 delete mode 100644 src/components/navigation/GuideBottomNav.vue
 create mode 100644 src/components/search/PoiSearchPanel.vue

diff --git a/src/components/navigation/GuideBottomNav.vue b/src/components/navigation/GuideBottomNav.vue
deleted file mode 100644
index 8fa2ec2..0000000
--- a/src/components/navigation/GuideBottomNav.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <view class="guide-bottom-nav">
-    <view class="guide-bottom-nav-inner">
-      <view
-        v-for="tab in bottomNavTabs"
-        :key="tab.id"
-        class="guide-bottom-tab"
-        :class="[`tab-${tab.id}`, { active: activeTab === tab.id }]"
-        @tap="handleTabTap(tab.id)"
-      >
-        <view class="guide-bottom-icon" aria-hidden="true">
-          <template v-if="tab.id === 'guide'">
-            <view class="guide-icon-pin"></view>
-            <view class="guide-icon-path"></view>
-          </template>
-          <template v-else>
-            <view class="explain-icon-wave top"></view>
-            <view class="explain-icon-wave middle"></view>
-            <view class="explain-icon-wave bottom"></view>
-          </template>
-        </view>
-        <text class="guide-bottom-label">{{ tab.label }}</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import {
-  GUIDE_TOP_TABS,
-  type GuideTopTab
-} from '@/utils/guideTopTabs'
-
-const bottomNavTabs = GUIDE_TOP_TABS.filter((tab) => tab.id !== 'explain')
-
-withDefaults(defineProps<{
-  activeTab?: GuideTopTab
-}>(), {
-  activeTab: 'guide'
-})
-
-const emit = defineEmits<{
-  tabChange: [tab: GuideTopTab]
-}>()
-
-const handleTabTap = (tab: GuideTopTab) => {
-  emit('tabChange', tab)
-}
-</script>
-
-<style scoped lang="scss">
-.guide-bottom-nav {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
-  box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.96);
-  border-top: 1px solid #e6e8df;
-  box-shadow: 0 -10px 24px rgba(36, 49, 42, 0.1);
-  z-index: 2200;
-  transform: translateZ(0);
-}
-
-.guide-bottom-nav-inner {
-  height: 56px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 10px;
-  padding: 4px;
-  box-sizing: border-box;
-  background: #f4f5ef;
-  border: 1px solid #dfe2d9;
-  border-radius: 8px;
-}
-
-.guide-bottom-tab {
-  min-width: 0;
-  height: 46px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  box-sizing: border-box;
-  border-radius: 6px;
-  color: #515151;
-  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
-}
-
-.guide-bottom-tab.active {
-  background: #000000;
-  color: var(--museum-accent);
-  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
-}
-
-.guide-bottom-tab:active {
-  transform: translateY(1px);
-}
-
-.guide-bottom-icon {
-  position: relative;
-  width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
-  color: currentColor;
-}
-
-.guide-icon-pin {
-  position: absolute;
-  left: 4px;
-  top: 1px;
-  width: 12px;
-  height: 15px;
-  box-sizing: border-box;
-  border: 2px solid currentColor;
-  border-radius: 8px 8px 8px 0;
-  transform: rotate(-45deg);
-}
-
-.guide-icon-pin::after {
-  content: '';
-  position: absolute;
-  left: 3px;
-  top: 3px;
-  width: 3px;
-  height: 3px;
-  background: currentColor;
-  border-radius: 50%;
-}
-
-.guide-icon-path {
-  position: absolute;
-  left: 1px;
-  right: 1px;
-  bottom: 2px;
-  height: 6px;
-  border-bottom: 2px solid currentColor;
-  border-left: 2px solid currentColor;
-  border-radius: 0 0 0 8px;
-}
-
-.explain-icon-wave {
-  position: absolute;
-  left: 2px;
-  right: 2px;
-  height: 4px;
-  border: 2px solid currentColor;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 0;
-  border-radius: 999px 999px 0 0;
-}
-
-.explain-icon-wave.top {
-  top: 3px;
-}
-
-.explain-icon-wave.middle {
-  top: 9px;
-  left: 5px;
-}
-
-.explain-icon-wave.bottom {
-  top: 15px;
-  right: 6px;
-}
-
-.guide-bottom-label {
-  font-size: 15px;
-  line-height: 20px;
-  font-weight: 700;
-  color: currentColor;
-}
-</style>
diff --git a/src/components/navigation/GuidePageFrame.vue b/src/components/navigation/GuidePageFrame.vue
index b1aa5bd..c5d7793 100644
--- a/src/components/navigation/GuidePageFrame.vue
+++ b/src/components/navigation/GuidePageFrame.vue
@@ -1,7 +1,7 @@
 <template>
   <view
     class="guide-page-frame"
-    :class="[`variant-${variant}`, { 'no-top-tabs': !showTopTabs, 'has-bottom-nav': showBottomNav }]"
+    :class="[`variant-${variant}`, { 'no-top-tabs': !showTopTabs }]"
   >
     <GuideTopTabs
       v-if="showTopTabs"
@@ -32,16 +32,10 @@
     <view class="guide-page-frame-body">
       <slot></slot>
     </view>
-    <GuideBottomNav
-      v-if="showBottomNav"
-      :active-tab="activeTab"
-      @tab-change="handleTabChange"
-    />
   </view>
 </template>
 
 <script setup lang="ts">
-import GuideBottomNav from '@/components/navigation/GuideBottomNav.vue'
 import GuideTopTabs from '@/components/navigation/GuideTopTabs.vue'
 import type { GuideTopTab } from '@/utils/guideTopTabs'
 
@@ -51,7 +45,6 @@ withDefaults(defineProps<{
   topTabsVariant?: 'underline' | 'segmented'
   topTabsTop?: string
   showTopTabs?: boolean
-  showBottomNav?: boolean
   showBack?: boolean
   showCancel?: boolean
   backLabel?: string
@@ -62,7 +55,6 @@ withDefaults(defineProps<{
   topTabsVariant: 'underline',
   topTabsTop: '0',
   showTopTabs: true,
-  showBottomNav: false,
   showBack: false,
   showCancel: false,
   backLabel: '返回',
diff --git a/src/components/navigation/RoutePlannerPanel.vue b/src/components/navigation/RoutePlannerPanel.vue
index 020af73..be56f67 100644
--- a/src/components/navigation/RoutePlannerPanel.vue
+++ b/src/components/navigation/RoutePlannerPanel.vue
@@ -395,7 +395,7 @@ const handlePrimaryAction = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 112px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   padding: 10px 14px 14px;
   display: flex;
   flex-direction: column;
diff --git a/src/components/search/PoiSearchPanel.vue b/src/components/search/PoiSearchPanel.vue
new file mode 100644
index 0000000..b4af831
--- /dev/null
+++ b/src/components/search/PoiSearchPanel.vue
@@ -0,0 +1,1014 @@
+<template>
+  <view
+    class="poi-search-panel"
+    :class="[`variant-${variant}`, { expanded: showSearchContent }]"
+    @touchstart="handlePanelTouchStart"
+    @touchend="handlePanelTouchEnd"
+    @touchcancel="resetPanelTouch"
+  >
+    <view class="search-box">
+      <view class="search-icon"></view>
+      <input
+        class="search-input"
+        type="text"
+        confirm-type="search"
+        :focus="searchInputFocused"
+        placeholder="请输入地点进行搜索"
+        placeholder-class="search-placeholder"
+        :value="searchDraftKeyword"
+        @focus="handleSearchFocus"
+        @input="handleSearchInput"
+        @confirm="handleSearchConfirm"
+      />
+      <view v-if="searchDraftKeyword" class="clear-button" @tap.stop="handleSearchClear">
+        <text class="clear-text">×</text>
+      </view>
+      <view v-else class="voice-icon"></view>
+    </view>
+
+    <view v-if="variant === 'home' && !showSearchContent" class="home-category-strip">
+      <view
+        v-for="item in primaryFacilities"
+        :key="item.id"
+        class="home-category-chip"
+        @tap="handleFacilityShortcut(item)"
+      >
+        <view class="home-category-icon line-icon" :class="`icon-${item.icon}`">
+          <view class="icon-part a"></view>
+          <view class="icon-part b"></view>
+          <view class="icon-part c"></view>
+        </view>
+        <text class="home-category-label">{{ item.label }}</text>
+      </view>
+    </view>
+
+    <view v-if="showSearchContent" class="poi-search-content">
+      <view v-if="variant === 'home'" class="home-collapse-handle" @tap="collapseHomePanel">
+        <view class="home-collapse-bar"></view>
+      </view>
+
+      <view class="category-grid">
+        <view
+          v-for="item in primaryFacilities"
+          :key="item.id"
+          class="category-item"
+          :class="{ active: searchKeyword === item.label }"
+          @tap="handleFacilityShortcut(item)"
+        >
+          <view class="line-icon" :class="`icon-${item.icon}`">
+            <view class="icon-part a"></view>
+            <view class="icon-part b"></view>
+            <view class="icon-part c"></view>
+          </view>
+          <text class="category-label">{{ item.label }}</text>
+        </view>
+      </view>
+
+      <view class="section-title-row">
+        <text class="section-title">服务设施</text>
+      </view>
+
+      <view class="facility-chip-row">
+        <view
+          v-for="item in serviceFacilities"
+          :key="item.id"
+          class="facility-chip"
+          :class="{ active: searchKeyword === item.label }"
+          @tap="handleFacilityShortcut(item)"
+        >
+          <view class="chip-icon" :class="`chip-${item.icon}`"></view>
+          <text class="facility-chip-text">{{ item.label }}</text>
+        </view>
+      </view>
+
+      <view class="result-card">
+        <view class="result-card-header">
+          <text class="museum-title">深圳自然博物馆</text>
+          <text class="result-count">{{ floorResults.length }} 个点位</text>
+        </view>
+
+        <view class="result-body">
+          <view class="floor-tabs">
+            <view
+              v-for="floor in displayFloors"
+              :key="floor.label"
+              class="floor-tab"
+              :class="{ active: activeFloor === floor.label }"
+              @tap="handleFloorChange(floor.label)"
+            >
+              <text class="floor-tab-text">{{ floor.label }}</text>
+            </view>
+          </view>
+
+          <view class="result-list">
+            <view
+              v-for="item in floorResults"
+              :key="item.id"
+              class="result-row"
+              @tap="handleResultTap(item)"
+            >
+              <view class="pin-icon"></view>
+              <view class="result-copy">
+                <text class="result-name">{{ item.name }}</text>
+                <text class="result-meta">{{ item.floorLabel }} · {{ item.primaryCategory.label }}</text>
+              </view>
+              <text class="result-arrow">›</text>
+            </view>
+
+            <view v-if="!floorResults.length" class="empty-state">
+              <text class="empty-title">{{ emptyTitle }}</text>
+              <text class="empty-desc">可切换楼层或搜索服务设施</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type {
+  MuseumFloor,
+  MuseumPoi
+} from '@/domain/museum'
+import {
+  compareFloorsTopToBottom,
+  isIndoorNavigableFloor,
+  isPoiOnIndoorNavigableFloor
+} from '@/domain/guideFloor'
+import {
+  guideUseCase
+} from '@/usecases/guideUseCase'
+
+export interface PoiSearchShortcut {
+  label: string
+  keywords: string[]
+}
+
+interface ShortcutItem extends PoiSearchShortcut {
+  id: string
+  icon: string
+}
+
+const props = withDefaults(defineProps<{
+  initialKeyword?: string
+  variant?: 'home' | 'page'
+  autofocus?: boolean
+}>(), {
+  initialKeyword: '',
+  variant: 'page',
+  autofocus: false
+})
+
+const emit = defineEmits<{
+  resultTap: [poi: MuseumPoi]
+  'expanded-change': [expanded: boolean]
+}>()
+
+const primaryFacilities: ShortcutItem[] = [
+  { id: 'service', label: '服务台', icon: 'service', keywords: ['服务台', 'service_desk'] },
+  { id: 'elevator', label: '电梯', icon: 'elevator', keywords: ['电梯', 'elevator'] },
+  { id: 'escalator', label: '扶梯', icon: 'escalator', keywords: ['扶梯', 'escalator'] },
+  { id: 'restroom', label: '洗手间', icon: 'restroom', keywords: ['洗手间', '卫生间', 'toilet', 'accessible_toilet'] },
+  { id: 'nursing', label: '母婴室', icon: 'nursing', keywords: ['母婴室', 'mother_baby_room'] },
+  { id: 'entrance', label: '出入口', icon: 'entrance', keywords: ['出入口', '入口', '出口', 'entrance_exit'] }
+]
+
+const serviceFacilities: ShortcutItem[] = [
+  { id: 'drink', label: '饮料售卖机', icon: 'drink', keywords: ['饮料售卖机', '饮料', '售卖机', 'vending'] },
+  { id: 'ticket', label: '票务售卖机', icon: 'ticket', keywords: ['票务售卖机', '票务', '售票', 'ticket_office'] },
+  { id: 'souvenir', label: '纪念品售卖机', icon: 'bag', keywords: ['纪念品售卖机', '纪念品', '商店', 'souvenir'] }
+]
+
+const searchKeyword = ref('')
+const searchDraftKeyword = ref('')
+const searchInputFocused = ref(false)
+const homeExpanded = ref(false)
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const isPanelTouching = ref(false)
+const floors = ref<MuseumFloor[]>([])
+const activeFloor = ref('1F')
+const pois = ref<MuseumPoi[]>([])
+const isLoading = ref(false)
+
+const showSearchContent = computed(() => props.variant === 'page' || homeExpanded.value)
+const collapseDragThreshold = 48
+
+const displayFloors = computed(() => [...floors.value]
+  .filter(isIndoorNavigableFloor)
+  .sort(compareFloorsTopToBottom))
+
+const floorResults = computed(() => {
+  const matched = pois.value.filter((poi) => poi.floorLabel === activeFloor.value)
+  return matched.slice(0, props.variant === 'home' ? 8 : 12)
+})
+
+const emptyTitle = computed(() => (
+  isLoading.value ? '正在读取点位' : '暂无匹配点位'
+))
+
+const isVisiblePoi = (poi: MuseumPoi) => poi.primaryCategory.id !== 'touring_poi'
+  && isPoiOnIndoorNavigableFloor(poi)
+
+const dedupePois = (items: MuseumPoi[]) => {
+  const seenIds = new Set<string>()
+  return items.filter((poi) => {
+    if (!poi.id || seenIds.has(poi.id)) return false
+    seenIds.add(poi.id)
+    return true
+  })
+}
+
+const isPoiMatchingKeywords = (poi: MuseumPoi, keywords: string[]) => {
+  const searchableText = [
+    poi.name,
+    poi.floorId,
+    poi.floorLabel,
+    poi.primaryCategory.id,
+    poi.primaryCategory.label,
+    poi.primaryCategory.iconType,
+    ...poi.categories.flatMap((category) => [
+      category.id,
+      category.label,
+      category.iconType
+    ])
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase()
+
+  return keywords.some((keyword) => searchableText.includes(keyword.trim().toLowerCase()))
+}
+
+const syncActiveFloor = () => {
+  if (!displayFloors.value.length) {
+    activeFloor.value = ''
+    return
+  }
+
+  if (displayFloors.value.some((floor) => floor.label === activeFloor.value)) return
+
+  activeFloor.value = displayFloors.value.find((floor) => floor.label === '1F')?.label
+    || displayFloors.value[0].label
+}
+
+const loadFloors = async () => {
+  try {
+    floors.value = await guideUseCase.getFloors()
+    syncActiveFloor()
+  } catch (error) {
+    console.error('加载点位搜索楼层失败:', error)
+    floors.value = []
+    activeFloor.value = ''
+  }
+}
+
+const loadPois = async (keyword = '') => {
+  isLoading.value = true
+  try {
+    const result = await guideUseCase.searchPois(keyword)
+    pois.value = result.filter(isVisiblePoi)
+  } catch (error) {
+    console.error('加载点位搜索结果失败:', error)
+    pois.value = []
+    uni.showToast({
+      title: '点位数据读取失败',
+      icon: 'none'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const focusSearchInput = async () => {
+  searchInputFocused.value = false
+  await nextTick()
+  searchInputFocused.value = true
+}
+
+const handleSearchFocus = () => {
+  if (props.variant === 'home') {
+    homeExpanded.value = true
+  }
+}
+
+const collapseHomePanel = () => {
+  if (props.variant !== 'home') return
+
+  homeExpanded.value = false
+  searchInputFocused.value = false
+  uni.hideKeyboard()
+}
+
+const resetPanelTouch = () => {
+  isPanelTouching.value = false
+  touchStartX.value = 0
+  touchStartY.value = 0
+}
+
+const getTouchPoint = (event: any) => event.changedTouches?.[0] || event.touches?.[0] || null
+
+const handlePanelTouchStart = (event: any) => {
+  if (props.variant !== 'home' || !homeExpanded.value) return
+
+  const point = getTouchPoint(event)
+  if (!point) return
+
+  touchStartX.value = point.clientX
+  touchStartY.value = point.clientY
+  isPanelTouching.value = true
+}
+
+const handlePanelTouchEnd = (event: any) => {
+  if (!isPanelTouching.value || props.variant !== 'home' || !homeExpanded.value) {
+    resetPanelTouch()
+    return
+  }
+
+  const point = getTouchPoint(event)
+  if (!point) {
+    resetPanelTouch()
+    return
+  }
+
+  const deltaX = point.clientX - touchStartX.value
+  const deltaY = point.clientY - touchStartY.value
+  const isIntentionalDownSwipe = deltaY > collapseDragThreshold
+    && deltaY > Math.abs(deltaX) * 1.2
+
+  if (isIntentionalDownSwipe) {
+    collapseHomePanel()
+  }
+
+  resetPanelTouch()
+}
+
+const handleSearchInput = (event: any) => {
+  searchDraftKeyword.value = event.detail.value
+  if (props.variant === 'home') {
+    homeExpanded.value = true
+  }
+}
+
+const handleSearchClear = async () => {
+  searchDraftKeyword.value = ''
+  searchKeyword.value = ''
+  await loadPois()
+  await focusSearchInput()
+}
+
+const handleSearchConfirm = async (event?: any) => {
+  const value = typeof event?.detail?.value === 'string'
+    ? event.detail.value
+    : searchDraftKeyword.value
+
+  searchKeyword.value = value.trim()
+  searchDraftKeyword.value = searchKeyword.value
+  homeExpanded.value = true
+  await loadPois(searchKeyword.value)
+}
+
+const searchShortcut = async (shortcut: PoiSearchShortcut) => {
+  searchKeyword.value = shortcut.label
+  searchDraftKeyword.value = shortcut.label
+  homeExpanded.value = true
+  isLoading.value = true
+
+  try {
+    const groups = await Promise.all(shortcut.keywords.map((keyword) => guideUseCase.searchPois(keyword)))
+    pois.value = dedupePois(groups.flat())
+      .filter(isVisiblePoi)
+      .filter((poi) => isPoiMatchingKeywords(poi, shortcut.keywords))
+  } catch (error) {
+    console.error('加载点位分类搜索结果失败:', error)
+    pois.value = []
+    uni.showToast({
+      title: '点位数据读取失败',
+      icon: 'none'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const handleFacilityShortcut = (shortcut: ShortcutItem) => {
+  void searchShortcut(shortcut)
+}
+
+const handleFloorChange = (floor: string) => {
+  activeFloor.value = floor
+}
+
+const encodeQueryValue = (value: string) => encodeURIComponent(value)
+
+const createPoiLocationQuery = (poi: MuseumPoi) => (
+  `id=${encodeQueryValue(poi.id)}`
+  + `&target=${encodeQueryValue(poi.name)}`
+  + `&floorId=${encodeQueryValue(poi.floorId)}`
+  + `&floorLabel=${encodeQueryValue(poi.floorLabel)}`
+)
+
+const handleResultTap = (poi: MuseumPoi) => {
+  emit('resultTap', poi)
+
+  if (poi.primaryCategory.id === 'operation_experience') {
+    uni.navigateTo({
+      url: `/pages/route/detail?facilityId=${encodeQueryValue(poi.id)}&target=${encodeQueryValue(poi.name)}&floorId=${encodeQueryValue(poi.floorId)}&state=preview`
+    })
+    return
+  }
+
+  uni.navigateTo({
+    url: `/pages/facility/detail?${createPoiLocationQuery(poi)}`
+  })
+}
+
+const applyInitialKeyword = async (keyword: string) => {
+  searchKeyword.value = keyword
+  searchDraftKeyword.value = keyword
+  homeExpanded.value = props.variant === 'page' || Boolean(keyword)
+  await loadPois(keyword)
+}
+
+watch(() => props.initialKeyword, (keyword) => {
+  void applyInitialKeyword(keyword || '')
+})
+
+watch(showSearchContent, (expanded) => {
+  emit('expanded-change', expanded)
+}, { immediate: true })
+
+onMounted(async () => {
+  await loadFloors()
+  await applyInitialKeyword(props.initialKeyword)
+  if (props.autofocus) {
+    void focusSearchInput()
+  }
+})
+
+defineExpose({
+  collapseHomePanel,
+  focusSearchInput,
+  searchShortcut
+})
+</script>
+
+<style scoped lang="scss">
+.poi-search-panel {
+  width: 100%;
+  box-sizing: border-box;
+  color: #262421;
+  font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.search-box {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid #d8dbd0;
+  border-radius: 8px;
+  box-shadow: 0 8px 18px rgba(36, 49, 42, 0.08);
+}
+
+.variant-home .search-box {
+  box-shadow: none;
+}
+
+.home-category-strip {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.home-category-chip {
+  min-width: 70px;
+  height: 42px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background: #f4f5ef;
+  border: 1px solid #dde5df;
+  border-radius: 8px;
+}
+
+.home-category-chip:active {
+  transform: translateY(1px);
+}
+
+.home-category-icon {
+  width: 20px;
+  height: 19px;
+  flex: 0 0 20px;
+}
+
+.home-category-icon.line-icon {
+  width: 20px;
+  height: 19px;
+}
+
+.home-category-icon .icon-part {
+  transform: scale(0.8);
+  transform-origin: center;
+}
+
+.home-category-label {
+  max-width: 58px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+  color: #151713;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search-icon {
+  width: 19px;
+  height: 19px;
+  position: relative;
+  flex-shrink: 0;
+  margin-right: 14px;
+  border: 2px solid #151713;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.search-icon::after {
+  content: '';
+  position: absolute;
+  right: -7px;
+  bottom: -5px;
+  width: 10px;
+  height: 2px;
+  background: #151713;
+  border-radius: 2px;
+  transform: rotate(45deg);
+}
+
+.search-input {
+  min-width: 0;
+  flex: 1;
+  height: 100%;
+  font-size: 15px;
+  line-height: 20px;
+  font-weight: 500;
+  color: #262421;
+}
+
+.search-placeholder {
+  color: #8b8d85;
+}
+
+.clear-button,
+.voice-icon {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+}
+
+.clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #eef0e8;
+}
+
+.clear-text {
+  font-size: 18px;
+  line-height: 20px;
+  color: #5b6058;
+}
+
+.voice-icon {
+  position: relative;
+}
+
+.voice-icon::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 4px;
+  width: 10px;
+  height: 14px;
+  border: 2px solid #151713;
+  border-radius: 999px;
+  box-sizing: border-box;
+}
+
+.voice-icon::after {
+  content: '';
+  position: absolute;
+  left: 7px;
+  bottom: 3px;
+  width: 12px;
+  height: 7px;
+  border-bottom: 2px solid #151713;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  border-radius: 0 0 999px 999px;
+  box-sizing: border-box;
+}
+
+.poi-search-content {
+  margin-top: 12px;
+}
+
+.home-collapse-handle {
+  height: 18px;
+  margin: -4px 0 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home-collapse-bar {
+  width: 42px;
+  height: 4px;
+  background: #d5d8cf;
+  border-radius: 999px;
+}
+
+.variant-home .poi-search-content {
+  max-height: min(50vh, 430px);
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.category-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.category-item {
+  min-width: 0;
+  min-height: 70px;
+  padding: 9px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid #e2e4da;
+  border-radius: 8px;
+}
+
+.category-item.active {
+  background: #151713;
+  border-color: #151713;
+}
+
+.line-icon {
+  width: 26px;
+  height: 24px;
+  position: relative;
+  color: #151713;
+}
+
+.category-item.active .line-icon {
+  color: var(--museum-accent);
+}
+
+.icon-part {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.icon-service .icon-part.a,
+.icon-ticket .icon-part.a,
+.icon-drink .icon-part.a,
+.icon-bag .icon-part.a {
+  left: 4px;
+  right: 4px;
+  top: 5px;
+  bottom: 5px;
+  border: 2px solid currentColor;
+  border-radius: 3px;
+}
+
+.icon-service .icon-part.b,
+.icon-ticket .icon-part.b,
+.icon-drink .icon-part.b,
+.icon-bag .icon-part.b {
+  left: 9px;
+  right: 9px;
+  top: 1px;
+  height: 5px;
+  border: 2px solid currentColor;
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+}
+
+.icon-elevator .icon-part.a,
+.icon-escalator .icon-part.a,
+.icon-restroom .icon-part.a,
+.icon-nursing .icon-part.a,
+.icon-entrance .icon-part.a {
+  left: 4px;
+  right: 4px;
+  top: 3px;
+  bottom: 3px;
+  border: 2px solid currentColor;
+  border-radius: 4px;
+}
+
+.icon-elevator .icon-part.b {
+  left: 9px;
+  top: 7px;
+  width: 8px;
+  height: 10px;
+  border-left: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+}
+
+.icon-escalator .icon-part.b,
+.icon-entrance .icon-part.b {
+  left: 7px;
+  top: 12px;
+  width: 13px;
+  height: 2px;
+  background: currentColor;
+  transform: rotate(-22deg);
+}
+
+.icon-restroom .icon-part.b,
+.icon-nursing .icon-part.b {
+  left: 8px;
+  top: 8px;
+  width: 4px;
+  height: 4px;
+  background: currentColor;
+  border-radius: 50%;
+  box-shadow: 8px 0 0 currentColor;
+}
+
+.category-label {
+  max-width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+  color: #151713;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.category-item.active .category-label {
+  color: var(--museum-accent);
+}
+
+.section-title-row {
+  margin-top: 14px;
+  margin-bottom: 8px;
+}
+
+.section-title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 800;
+  color: #151713;
+}
+
+.facility-chip-row {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.facility-chip {
+  height: 34px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid #e2e4da;
+  border-radius: 8px;
+}
+
+.facility-chip.active {
+  background: #151713;
+  border-color: #151713;
+}
+
+.chip-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  position: relative;
+  border: 2px solid currentColor;
+  border-radius: 3px;
+  color: #151713;
+  box-sizing: border-box;
+}
+
+.facility-chip.active .chip-icon {
+  color: var(--museum-accent);
+}
+
+.facility-chip-text {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  color: #151713;
+  white-space: nowrap;
+}
+
+.facility-chip.active .facility-chip-text {
+  color: var(--museum-accent);
+}
+
+.result-card {
+  margin-top: 12px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid #e2e4da;
+  border-radius: 8px;
+}
+
+.result-card-header {
+  height: 42px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #eceee6;
+}
+
+.museum-title,
+.result-count {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+}
+
+.museum-title {
+  color: #151713;
+}
+
+.result-count {
+  color: #6e746c;
+  white-space: nowrap;
+}
+
+.result-body {
+  display: flex;
+  min-height: 168px;
+}
+
+.floor-tabs {
+  width: 58px;
+  flex: 0 0 58px;
+  padding: 8px 0;
+  box-sizing: border-box;
+  background: #f3f4ee;
+}
+
+.floor-tab {
+  height: 31px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #676c64;
+}
+
+.floor-tab.active {
+  color: #151713;
+  font-weight: 800;
+}
+
+.floor-tab-text {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.result-list {
+  min-width: 0;
+  flex: 1;
+}
+
+.result-row {
+  min-height: 54px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 10px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #edf0e8;
+}
+
+.result-row:last-child {
+  border-bottom: 0;
+}
+
+.pin-icon {
+  width: 15px;
+  height: 18px;
+  flex: 0 0 15px;
+  position: relative;
+  border: 2px solid #151713;
+  border-radius: 8px 8px 8px 0;
+  transform: rotate(-45deg);
+  box-sizing: border-box;
+}
+
+.pin-icon::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 4px;
+  height: 4px;
+  background: #151713;
+  border-radius: 50%;
+}
+
+.result-copy {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.result-name,
+.result-meta {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-name {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 700;
+  color: #151713;
+}
+
+.result-meta {
+  font-size: 11px;
+  line-height: 15px;
+  color: #6c716a;
+}
+
+.result-arrow {
+  font-size: 20px;
+  line-height: 20px;
+  color: #8b9188;
+}
+
+.empty-state {
+  min-height: 112px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.empty-title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+  color: #151713;
+}
+
+.empty-desc {
+  font-size: 12px;
+  line-height: 17px;
+  color: #7a7f78;
+}
+
+@media (max-width: 360px) {
+  .category-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .floor-tabs {
+    width: 52px;
+    flex-basis: 52px;
+  }
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 10dcb7e..884f4df 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -60,12 +60,5 @@
     "navigationBarTitleText": "深圳自然博物馆",
     "navigationBarBackgroundColor": "#FFFFFF",
     "backgroundColor": "#F3F3F3"
-  },
-  "tabBar": {
-    "color": "#333333",
-    "selectedColor": "#E0E100",
-    "backgroundColor": "#FFFFFF",
-    "borderStyle": "black",
-    "list": []
   }
 }
diff --git a/src/pages/explain/list.vue b/src/pages/explain/list.vue
index 29d18d3..3ef55a2 100644
--- a/src/pages/explain/list.vue
+++ b/src/pages/explain/list.vue
@@ -3,7 +3,6 @@
     active-tab="explain"
     variant="static"
     :show-top-tabs="false"
-    show-bottom-nav
     show-back
     back-label="讲解首页"
     @tab-change="handleTopTabChange"
diff --git a/src/pages/facility/detail.vue b/src/pages/facility/detail.vue
index f1dc7e2..ed83b1a 100644
--- a/src/pages/facility/detail.vue
+++ b/src/pages/facility/detail.vue
@@ -3,7 +3,6 @@
     active-tab="guide"
     variant="overlay"
     :show-top-tabs="false"
-    show-bottom-nav
     show-back
     @tab-change="handleTopTabChange"
     @back="handlePageBack"
@@ -375,7 +374,7 @@ const handlePageBack = () => {
   position: absolute;
   left: 84px;
   right: 16px;
-  bottom: calc(env(safe-area-inset-bottom) + 116px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   min-height: 110px;
   padding: 14px 14px 12px;
   box-sizing: border-box;
@@ -498,7 +497,7 @@ const handlePageBack = () => {
 .detail-restore {
   position: absolute;
   right: 18px;
-  bottom: calc(env(safe-area-inset-bottom) + 266px);
+  bottom: calc(env(safe-area-inset-bottom) + 152px);
   height: 40px;
   min-width: 74px;
   padding: 0 12px;
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index a0d5a62..25d1610 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,7 +3,6 @@
     :active-tab="currentTab"
     variant="overlay"
     :show-top-tabs="false"
-    show-bottom-nav
     @tab-change="handleTabChange"
   >
     <GuideMapShell
@@ -16,6 +15,7 @@
       mode-status-tone="glass"
       search-top="20px"
       search-variant="home"
+      :show-search="false"
       :show-mode-row="false"
       mode-top="80px"
       :map-type="guideMapType"
@@ -43,7 +43,6 @@
       :auto-switch-threshold-low="0.58"
       :auto-switch-threshold-high="1.18"
       :outdoor-nav-polylines="outdoorNavPolylines"
-      @search-tap="handleGuideSearchTap"
       @mode-change="handleModeChange"
       @floor-request="handleFloorRequest"
       @floor-change="handleFloorChange"
@@ -111,7 +110,7 @@
       </view>
 
       <view
-        v-if="showGuideQuickActions"
+        v-if="showGuideFloatingActions"
         class="guide-quick-actions"
       >
         <view class="guide-quick-action primary" @tap="handleMoreRouteGuide">
@@ -127,7 +126,7 @@
           </view>
           <text class="guide-quick-action-text">来馆</text>
         </view>
-        <view class="guide-quick-action explain" @tap="handleExplainQuickTap">
+        <view class="guide-quick-action" @tap="handleExplainQuickTap">
           <view class="guide-quick-icon explain">
             <view class="guide-quick-explain-wave top"></view>
             <view class="guide-quick-explain-wave middle"></view>
@@ -137,6 +136,16 @@
         </view>
       </view>
 
+      <view
+        v-if="showGuideHomeDock"
+        class="guide-home-dock"
+      >
+        <PoiSearchPanel
+          variant="home"
+          @expanded-change="handleHomeSearchExpandedChange"
+        />
+      </view>
+
       <RoutePlannerPanel
         v-if="is3DMode"
         :visible="showRoutePlanner"
@@ -263,6 +272,7 @@ import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
 import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
 import RoutePlannerPanel from '@/components/navigation/RoutePlannerPanel.vue'
 import OutdoorNavigationPanel from '@/components/navigation/OutdoorNavigationPanel.vue'
+import PoiSearchPanel from '@/components/search/PoiSearchPanel.vue'
 import type {
   RoutePointOption
 } from '@/components/navigation/RoutePointPicker.vue'
@@ -382,6 +392,7 @@ const isPoiCardCollapsed = ref(false)
 const guideMapShellRef = ref<{
   clearRoute?: () => void
 } | null>(null)
+const homeSearchExpanded = ref(false)
 
 let launchOverlayFallbackTimer: ReturnType<typeof setTimeout> | null = null
 let launchOverlayFadeTimer: ReturnType<typeof setTimeout> | null = null
@@ -527,12 +538,22 @@ const disableIndoorAutoExit = computed(() => (
   || isSimulatingRoute.value
 ))
 
-const showGuideQuickActions = computed(() => (
+const showGuideHomeDock = computed(() => (
   currentTab.value === 'guide'
   && !showRoutePlanner.value
   && !showOutdoorNavPanel.value
   && !selectedGuidePoi.value
   && !isSimulatingRoute.value
+  && !(guideOutdoorState.value === 'entrance' && !is3DMode.value)
+))
+
+const showGuideFloatingActions = computed(() => (
+  currentTab.value === 'guide'
+  && !showRoutePlanner.value
+  && !showOutdoorNavPanel.value
+  && !selectedGuidePoi.value
+  && !isSimulatingRoute.value
+  && (!showGuideHomeDock.value || !homeSearchExpanded.value)
 ))
 
 const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({
@@ -780,12 +801,6 @@ const buildExplainHallItems = (
   })
 }
 
-const handleGuideSearchTap = () => {
-  uni.navigateTo({
-    url: '/pages/search/index'
-  })
-}
-
 const handleFloorRequest = ({ floorId, floorLabel }: { floorId: string; floorLabel: string }) => {
   requestedFloorId.value = floorId
   requestedFloorLabel.value = floorLabel
@@ -1222,6 +1237,10 @@ const handleExplainQuickTap = () => {
   handleTabChange('explain')
 }
 
+const handleHomeSearchExpandedChange = (expanded: boolean) => {
+  homeSearchExpanded.value = expanded
+}
+
 const handleOutdoorNavClose = () => {
   closeOutdoorNavPanel()
 }
@@ -1618,7 +1637,7 @@ const handleExplainBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 112px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   box-sizing: border-box;
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid #e5e6de;
@@ -1777,35 +1796,45 @@ const handleExplainBack = () => {
   color: var(--museum-accent);
 }
 
-.guide-quick-actions {
-  --guide-floating-control-width: 48px;
-
+.guide-home-dock {
   position: absolute;
-  top: 118px;
+  left: 12px;
+  right: 12px;
+  bottom: calc(env(safe-area-inset-bottom) + 16px);
+  padding: 12px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.96);
+  border-radius: 16px;
+  box-shadow: 0 10px 28px rgba(36, 49, 42, 0.16);
+  z-index: 1003;
+}
+
+.guide-quick-actions {
+  position: absolute;
+  top: clamp(96px, 14vh, 118px);
   right: 18px;
-  width: var(--guide-floating-control-width);
+  width: 48px;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
   gap: 8px;
   z-index: 1002;
 }
 
 .guide-quick-action {
-  width: 100%;
-  height: 56px;
-  min-height: 0;
-  padding: 6px 4px;
+  width: 48px;
+  min-height: 56px;
+  padding: 7px 4px 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid #dde5df;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(230, 233, 224, 0.96);
   border-radius: 8px;
-  box-shadow: 0 8px 18px rgba(110, 127, 115, 0.12);
+  box-shadow: 0 8px 22px rgba(36, 49, 42, 0.14);
 }
 
 .guide-quick-action.primary {
@@ -1813,11 +1842,6 @@ const handleExplainBack = () => {
   border-color: #151713;
 }
 
-.guide-quick-action.explain {
-  background: rgba(245, 245, 237, 0.96);
-  border-color: #dfe4d8;
-}
-
 .guide-quick-action:active {
   transform: translateY(1px);
 }
@@ -1834,10 +1858,6 @@ const handleExplainBack = () => {
   color: var(--museum-accent);
 }
 
-.guide-quick-action.explain .guide-quick-icon {
-  color: #151713;
-}
-
 .guide-quick-icon-floor {
   position: absolute;
   left: 3px;
@@ -1910,7 +1930,7 @@ const handleExplainBack = () => {
   width: 100%;
   font-size: 12px;
   line-height: 16px;
-  font-weight: 600;
+  font-weight: 700;
   color: #151713;
   text-align: center;
   white-space: nowrap;
@@ -1951,7 +1971,7 @@ const handleExplainBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 112px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   min-height: 54px;
   padding: 10px 10px 10px 14px;
   display: flex;
@@ -2053,7 +2073,7 @@ const handleExplainBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 216px);
+  bottom: calc(env(safe-area-inset-bottom) + 128px);
   height: 84px;
   padding: 16px 10px 8px;
   display: flex;
@@ -2191,7 +2211,7 @@ const handleExplainBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 216px);
+  bottom: calc(env(safe-area-inset-bottom) + 128px);
   z-index: 1003;
 }
 
@@ -2199,7 +2219,7 @@ const handleExplainBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 112px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   height: 94px;
   padding: 16px 16px 10px;
   display: flex;
@@ -2255,7 +2275,7 @@ const handleExplainBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 116px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   height: 158px;
   padding: 18px 16px 14px;
   box-sizing: border-box;
diff --git a/src/pages/route/detail.vue b/src/pages/route/detail.vue
index b448aa3..36067cc 100644
--- a/src/pages/route/detail.vue
+++ b/src/pages/route/detail.vue
@@ -3,7 +3,6 @@
     active-tab="guide"
     variant="overlay"
     :show-top-tabs="false"
-    show-bottom-nav
     show-back
     :show-cancel="isManualLocationPanelOpen"
     @tab-change="handleTopTabChange"
@@ -846,7 +845,7 @@ const handlePageBack = () => {
   position: absolute;
   left: 16px;
   right: 16px;
-  bottom: calc(env(safe-area-inset-bottom) + 116px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   min-height: 170px;
   padding: 22px 20px 20px;
   display: flex;
@@ -863,7 +862,7 @@ const handlePageBack = () => {
   position: absolute;
   left: 16px;
   right: 16px;
-  bottom: calc(env(safe-area-inset-bottom) + 116px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   min-height: 156px;
   padding: 24px 18px 16px;
   display: flex;
@@ -897,7 +896,7 @@ const handlePageBack = () => {
 .indoor-guide-peek {
   position: absolute;
   left: 50%;
-  bottom: calc(env(safe-area-inset-bottom) + 104px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   width: 132px;
   height: 38px;
   display: flex;
@@ -1135,7 +1134,7 @@ const handlePageBack = () => {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: calc(env(safe-area-inset-bottom) + 116px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   height: 196px;
   padding: 21px 20px 14px;
   box-sizing: border-box;
@@ -1275,7 +1274,7 @@ const handlePageBack = () => {
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 116px);
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
   height: 158px;
   padding: 18px 16px 14px;
   box-sizing: border-box;
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index db116b2..eb869ae 100644
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -10,322 +10,29 @@
       </view>
     </view>
 
-    <view class="search-box">
-      <view class="search-icon"></view>
-      <input
-        class="search-input"
-        type="text"
-        confirm-type="search"
-        :focus="searchInputFocused"
-        placeholder="请输入地点进行搜索"
-        placeholder-class="search-placeholder"
-        :value="searchDraftKeyword"
-        @input="handleSearchInput"
-        @confirm="handleSearchConfirm"
-      />
-      <view v-if="searchDraftKeyword" class="clear-button" @tap.stop="handleSearchClear">
-        <text class="clear-text">×</text>
-      </view>
-      <view v-else class="voice-icon"></view>
-    </view>
-
-    <view class="category-grid">
-      <view
-        v-for="item in primaryFacilities"
-        :key="item.id"
-        class="category-item"
-        :class="{ active: searchKeyword === item.label }"
-        @tap="handleFacilityShortcut(item)"
-      >
-        <view class="line-icon" :class="`icon-${item.icon}`">
-          <view class="icon-part a"></view>
-          <view class="icon-part b"></view>
-          <view class="icon-part c"></view>
-        </view>
-        <text class="category-label">{{ item.label }}</text>
-      </view>
-    </view>
-
-    <view class="section-title-row">
-      <text class="section-title">服务设施</text>
-    </view>
-
-    <view class="facility-chip-row">
-      <view
-        v-for="item in serviceFacilities"
-        :key="item.id"
-        class="facility-chip"
-        :class="{ active: searchKeyword === item.label }"
-        @tap="handleFacilityShortcut(item)"
-      >
-        <view class="chip-icon" :class="`chip-${item.icon}`"></view>
-        <text class="facility-chip-text">{{ item.label }}</text>
-      </view>
-    </view>
-
-    <view class="result-card">
-      <view class="result-card-header">
-        <text class="museum-title">深圳自然博物馆</text>
-        <text class="result-count">{{ floorResults.length }} 个点位</text>
-      </view>
-
-      <view class="result-body">
-        <view class="floor-tabs">
-          <view
-            v-for="floor in displayFloors"
-            :key="floor.label"
-            class="floor-tab"
-            :class="{ active: activeFloor === floor.label }"
-            @tap="handleFloorChange(floor.label)"
-          >
-            <text class="floor-tab-text">{{ floor.label }}</text>
-          </view>
-        </view>
-
-        <view class="result-list">
-          <view
-            v-for="item in floorResults"
-            :key="item.id"
-            class="result-row"
-            @tap="handleResultTap(item)"
-          >
-            <view class="pin-icon"></view>
-            <view class="result-copy">
-              <text class="result-name">{{ item.name }}</text>
-              <text class="result-meta">{{ item.floorLabel }} · {{ item.primaryCategory.label }}</text>
-            </view>
-            <text class="result-arrow">›</text>
-          </view>
-
-          <view v-if="!floorResults.length" class="empty-state">
-            <text class="empty-title">{{ emptyTitle }}</text>
-            <text class="empty-desc">可切换楼层或搜索服务设施</text>
-          </view>
-        </view>
-      </view>
-    </view>
+    <PoiSearchPanel
+      :initial-keyword="initialKeyword"
+      variant="page"
+      autofocus
+    />
   </view>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import type {
-  MuseumFloor,
-  MuseumPoi
-} from '@/domain/museum'
-import {
-  compareFloorsTopToBottom,
-  isIndoorNavigableFloor,
-  isPoiOnIndoorNavigableFloor
-} from '@/domain/guideFloor'
-import {
-  guideUseCase
-} from '@/usecases/guideUseCase'
+import PoiSearchPanel from '@/components/search/PoiSearchPanel.vue'
 
-interface ShortcutItem {
-  id: string
-  label: string
-  icon: string
-  keywords: string[]
-}
-
-const primaryFacilities: ShortcutItem[] = [
-  { id: 'service', label: '服务台', icon: 'service', keywords: ['服务台', 'service_desk'] },
-  { id: 'elevator', label: '电梯', icon: 'elevator', keywords: ['电梯', 'elevator'] },
-  { id: 'escalator', label: '扶梯', icon: 'escalator', keywords: ['扶梯', 'escalator'] },
-  { id: 'restroom', label: '洗手间', icon: 'restroom', keywords: ['洗手间', '卫生间', 'toilet', 'accessible_toilet'] },
-  { id: 'nursing', label: '母婴室', icon: 'nursing', keywords: ['母婴室', 'mother_baby_room'] },
-  { id: 'entrance', label: '出入口', icon: 'entrance', keywords: ['出入口', '入口', '出口', 'entrance_exit'] }
-]
-
-const serviceFacilities: ShortcutItem[] = [
-  { id: 'drink', label: '饮料售卖机', icon: 'drink', keywords: ['饮料售卖机', '饮料', '售卖机', 'vending'] },
-  { id: 'ticket', label: '票务售卖机', icon: 'ticket', keywords: ['票务售卖机', '票务', '售票', 'ticket_office'] },
-  { id: 'souvenir', label: '纪念品售卖机', icon: 'bag', keywords: ['纪念品售卖机', '纪念品', '商店', 'souvenir'] }
-]
-
-const searchKeyword = ref('')
-const searchDraftKeyword = ref('')
-const searchInputFocused = ref(false)
-const floors = ref<MuseumFloor[]>([])
-const activeFloor = ref('1F')
-const pois = ref<MuseumPoi[]>([])
-const isLoading = ref(false)
-
-const displayFloors = computed(() => [...floors.value]
-  .filter(isIndoorNavigableFloor)
-  .sort(compareFloorsTopToBottom))
-
-const floorResults = computed(() => {
-  const matched = pois.value.filter((poi) => poi.floorLabel === activeFloor.value)
-  return matched.slice(0, 12)
-})
-
-const emptyTitle = computed(() => (
-  isLoading.value ? '正在读取点位' : '暂无匹配点位'
-))
-
-const isVisiblePoi = (poi: MuseumPoi) => poi.primaryCategory.id !== 'touring_poi'
-  && isPoiOnIndoorNavigableFloor(poi)
-
-const dedupePois = (items: MuseumPoi[]) => {
-  const seenIds = new Set<string>()
-  return items.filter((poi) => {
-    if (!poi.id || seenIds.has(poi.id)) return false
-    seenIds.add(poi.id)
-    return true
-  })
-}
-
-const isPoiMatchingKeywords = (poi: MuseumPoi, keywords: string[]) => {
-  const searchableText = [
-    poi.name,
-    poi.floorId,
-    poi.floorLabel,
-    poi.primaryCategory.id,
-    poi.primaryCategory.label,
-    poi.primaryCategory.iconType,
-    ...poi.categories.flatMap((category) => [
-      category.id,
-      category.label,
-      category.iconType
-    ])
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .toLowerCase()
-
-  return keywords.some((keyword) => searchableText.includes(keyword.trim().toLowerCase()))
-}
-
-const syncActiveFloor = () => {
-  if (!displayFloors.value.length) {
-    activeFloor.value = ''
-    return
-  }
-
-  if (displayFloors.value.some((floor) => floor.label === activeFloor.value)) return
-
-  activeFloor.value = displayFloors.value.find((floor) => floor.label === '1F')?.label
-    || displayFloors.value[0].label
-}
-
-const loadFloors = async () => {
-  try {
-    floors.value = await guideUseCase.getFloors()
-    syncActiveFloor()
-  } catch (error) {
-    console.error('加载点位搜索楼层失败:', error)
-    floors.value = []
-    activeFloor.value = ''
-  }
-}
-
-const loadPois = async (keyword = '') => {
-  isLoading.value = true
-  try {
-    const result = await guideUseCase.searchPois(keyword)
-    pois.value = result.filter(isVisiblePoi)
-  } catch (error) {
-    console.error('加载点位搜索结果失败:', error)
-    pois.value = []
-    uni.showToast({
-      title: '点位数据读取失败',
-      icon: 'none'
-    })
-  } finally {
-    isLoading.value = false
-  }
-}
+const initialKeyword = ref('')
 
 onLoad((options: any) => {
   const keyword = typeof options.keyword === 'string'
     ? decodeURIComponent(options.keyword)
     : ''
 
-  searchKeyword.value = keyword
-  searchDraftKeyword.value = keyword
-  void loadFloors()
-  void loadPois(keyword)
-  void focusSearchInput()
+  initialKeyword.value = keyword
 })
 
-const focusSearchInput = async () => {
-  searchInputFocused.value = false
-  await nextTick()
-  searchInputFocused.value = true
-}
-
-const handleSearchInput = (event: any) => {
-  searchDraftKeyword.value = event.detail.value
-}
-
-const handleSearchClear = async () => {
-  searchDraftKeyword.value = ''
-  searchKeyword.value = ''
-  await loadPois()
-  await focusSearchInput()
-}
-
-const handleSearchConfirm = async (event?: any) => {
-  const value = typeof event?.detail?.value === 'string'
-    ? event.detail.value
-    : searchDraftKeyword.value
-
-  searchKeyword.value = value.trim()
-  searchDraftKeyword.value = searchKeyword.value
-  await loadPois(searchKeyword.value)
-}
-
-const handleFacilityShortcut = async (shortcut: ShortcutItem) => {
-  searchKeyword.value = shortcut.label
-  searchDraftKeyword.value = shortcut.label
-  isLoading.value = true
-
-  try {
-    const groups = await Promise.all(shortcut.keywords.map((keyword) => guideUseCase.searchPois(keyword)))
-    pois.value = dedupePois(groups.flat())
-      .filter(isVisiblePoi)
-      .filter((poi) => isPoiMatchingKeywords(poi, shortcut.keywords))
-  } catch (error) {
-    console.error('加载点位分类搜索结果失败:', error)
-    pois.value = []
-    uni.showToast({
-      title: '点位数据读取失败',
-      icon: 'none'
-    })
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const handleFloorChange = (floor: string) => {
-  activeFloor.value = floor
-}
-
-const encodeQueryValue = (value: string) => encodeURIComponent(value)
-
-const createPoiLocationQuery = (poi: MuseumPoi) => (
-  `id=${encodeQueryValue(poi.id)}`
-  + `&target=${encodeQueryValue(poi.name)}`
-  + `&floorId=${encodeQueryValue(poi.floorId)}`
-  + `&floorLabel=${encodeQueryValue(poi.floorLabel)}`
-)
-
-const handleResultTap = (poi: MuseumPoi) => {
-  if (poi.primaryCategory.id === 'operation_experience') {
-    uni.navigateTo({
-      url: `/pages/route/detail?facilityId=${encodeQueryValue(poi.id)}&target=${encodeQueryValue(poi.name)}&floorId=${encodeQueryValue(poi.floorId)}&state=preview`
-    })
-    return
-  }
-
-  uni.navigateTo({
-    url: `/pages/facility/detail?${createPoiLocationQuery(poi)}`
-  })
-}
-
 const handleBackToMap = () => {
   uni.navigateBack({
     delta: 1,
@@ -395,689 +102,21 @@ const handleBackToMap = () => {
   box-sizing: border-box;
   background: #000000;
   border: 1px solid rgba(0, 0, 0, 0.88);
-  border-radius: 0;
+  border-radius: 8px;
 }
 
 .map-link-text {
   font-size: 13px;
   line-height: 18px;
   font-weight: 700;
-  color: #e0e100;
+  color: var(--museum-accent);
   white-space: nowrap;
 }
 
-.search-box {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 0 14px;
-  box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid #d8dbd0;
-  border-radius: 0;
-  box-shadow: 0 8px 18px rgba(36, 49, 42, 0.08);
-}
-
-.search-icon {
-  width: 19px;
-  height: 19px;
-  position: relative;
-  flex-shrink: 0;
-  margin-right: 14px;
-  border: 2px solid #151713;
-  border-radius: 50%;
-  box-sizing: border-box;
-}
-
-.search-icon::after {
-  content: '';
-  position: absolute;
-  right: -7px;
-  bottom: -5px;
-  width: 10px;
-  height: 2px;
-  background: #151713;
-  border-radius: 2px;
-  transform: rotate(45deg);
-}
-
-.search-input {
-  flex: 1;
-  min-width: 0;
-  height: 44px;
-  font-size: 15px;
-  line-height: 44px;
-  color: #262421;
-}
-
-.search-placeholder {
-  color: #8b8b84;
-}
-
-.clear-button,
-.voice-icon {
-  width: 24px;
-  height: 24px;
-  margin-left: 9px;
-  flex-shrink: 0;
-}
-
-.clear-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #e8eadf;
-  border-radius: 50%;
-}
-
-.clear-text {
-  font-size: 19px;
-  line-height: 20px;
-  color: #424754;
-}
-
-.voice-icon {
-  position: relative;
-  box-sizing: border-box;
-}
-
-.voice-icon::before {
-  content: '';
-  position: absolute;
-  left: 7.5px;
-  top: 1px;
-  width: 9px;
-  height: 17px;
-  border: 2px solid #151713;
-  border-radius: 6px;
-  box-sizing: border-box;
-}
-
-.voice-icon::after {
-  content: '';
-  position: absolute;
-  left: 3.5px;
-  top: 10px;
-  width: 17px;
-  height: 12px;
-  border: 2px solid #151713;
-  border-top: 0;
-  border-radius: 0 0 9px 9px;
-  box-sizing: border-box;
-}
-
-.category-grid {
-  margin-top: 20px;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1px;
-  overflow: hidden;
-  background: #000000;
-  border: 1px solid #000000;
-}
-
-.category-item {
-  height: 82px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background: #ffffff;
-  transition: background-color 0.16s ease, color 0.16s ease;
-}
-
-.category-item:nth-child(1) {
-  background: #000000;
-}
-
-.category-item:nth-child(2) {
-  background: #e0e100;
-}
-
-.category-item:nth-child(3) {
-  background: #16beb2;
-}
-
-.category-item:nth-child(4) {
-  background: #b796f2;
-}
-
-.category-item:nth-child(5) {
-  background: #87d8ad;
-}
-
-.category-item:nth-child(6) {
-  background: #f4b693;
-}
-
-.category-item.active {
-  outline: 3px solid #000000;
-  outline-offset: -6px;
-}
-
-.line-icon {
-  width: 36px;
-  height: 35px;
-  position: relative;
-  margin-bottom: 9px;
-  color: #000000;
-}
-
-.category-item:nth-child(1) .line-icon,
-.category-item:nth-child(1) .category-label {
-  color: #e0e100;
-}
-
-.icon-part {
-  position: absolute;
-  box-sizing: border-box;
-  border-color: currentColor;
-}
-
-.icon-service .a {
-  left: 12px;
-  top: 0;
-  width: 12px;
-  height: 12px;
-  border: 2.5px solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-service .b {
-  left: 9px;
-  top: 15px;
-  width: 18px;
-  height: 11px;
-  border: 2.5px solid currentColor;
-  border-bottom: 0;
-  border-radius: 9px 9px 0 0;
-}
-
-.icon-service .c {
-  left: 2px;
-  bottom: 0;
-  width: 32px;
-  height: 11px;
-  border: 2.5px solid currentColor;
-}
-
-.icon-elevator .a {
-  inset: 0 2px;
-  border: 2.5px solid currentColor;
-}
-
-.icon-elevator .b {
-  left: 17px;
-  top: 3px;
-  width: 2px;
-  height: 29px;
-  background: currentColor;
-}
-
-.icon-elevator .c {
-  left: 9px;
-  top: 11px;
-  width: 19px;
-  height: 12px;
-  border-left: 2.5px solid currentColor;
-  border-right: 2.5px solid currentColor;
-}
-
-.icon-escalator .a {
-  left: 3px;
-  bottom: 3px;
-  width: 29px;
-  height: 12px;
-  border: 2.5px solid currentColor;
-  border-left: 0;
-  border-radius: 0 9px 9px 0;
-  transform: rotate(-42deg);
-}
-
-.icon-escalator .b {
-  left: 2px;
-  bottom: 1px;
-  width: 9px;
-  height: 9px;
-  border: 2.5px solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-escalator .c {
-  right: 5px;
-  top: 3px;
-  width: 7px;
-  height: 7px;
-  background: currentColor;
-  border-radius: 50%;
-}
-
-.icon-restroom .a,
-.icon-restroom .b {
-  top: 2px;
-  width: 8px;
-  height: 8px;
-  border: 2.5px solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-restroom .a {
-  left: 7px;
-}
-
-.icon-restroom .b {
-  right: 7px;
-}
-
-.icon-restroom .c {
-  left: 6px;
-  top: 14px;
-  width: 24px;
-  height: 20px;
-  border-left: 2.5px solid currentColor;
-  border-right: 2.5px solid currentColor;
-}
-
-.icon-nursing .a {
-  left: 9px;
-  top: 9px;
-  width: 16px;
-  height: 22px;
-  border: 2.5px solid currentColor;
-  border-radius: 4px;
-  transform: rotate(28deg);
-}
-
-.icon-nursing .b {
-  right: 4px;
-  top: 1px;
-  width: 10px;
-  height: 10px;
-  border: 2.5px solid currentColor;
-  border-radius: 50%;
-}
-
-.icon-nursing .c {
-  right: 9px;
-  top: 9px;
-  width: 11px;
-  height: 2.5px;
-  background: currentColor;
-  transform: rotate(28deg);
-}
-
-.icon-entrance .a {
-  left: 6px;
-  top: 3px;
-  width: 21px;
-  height: 29px;
-  border: 2.5px solid currentColor;
-  border-right: 0;
-  border-radius: 2px;
-}
-
-.icon-entrance .b {
-  right: 3px;
-  top: 17px;
-  width: 21px;
-  height: 2.5px;
-  background: currentColor;
-}
-
-.icon-entrance .c {
-  right: 3px;
-  top: 12.5px;
-  width: 10px;
-  height: 10px;
-  border-right: 2.5px solid currentColor;
-  border-top: 2.5px solid currentColor;
-  transform: rotate(45deg);
-}
-
-.category-label {
-  max-width: 100%;
-  padding: 0 6px;
-  box-sizing: border-box;
-  font-size: 14px;
-  line-height: 19px;
-  font-weight: 700;
-  color: #000000;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.section-title-row {
-  margin: 24px 2px 12px;
-  padding: 10px 0 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  font-size: 22px;
-  line-height: 28px;
-  font-weight: 800;
-  color: #000000;
-}
-
-.facility-chip-row {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.facility-chip {
-  min-height: 42px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 8px;
-  box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid #d8dbd0;
-  border-radius: 0;
-  box-shadow: 0 4px 12px rgba(36, 49, 42, 0.05);
-}
-
-.facility-chip.active {
-  background: #e0e100;
-  border-color: #000000;
-}
-
-.chip-icon {
-  width: 15px;
-  height: 12px;
-  position: relative;
-  flex-shrink: 0;
-  color: #000000;
-  box-sizing: border-box;
-}
-
-.chip-drink {
-  border: 2px solid currentColor;
-  border-radius: 1.5px;
-}
-
-.chip-drink::after {
-  content: '';
-  position: absolute;
-  right: -6px;
-  top: 2px;
-  width: 5px;
-  height: 6px;
-  border: 2px solid currentColor;
-  border-left: 0;
-  border-radius: 0 4px 4px 0;
-}
-
-.chip-ticket {
-  border: 2px solid currentColor;
-  border-radius: 2px;
-}
-
-.chip-ticket::before,
-.chip-ticket::after {
-  content: '';
-  position: absolute;
-  top: 4px;
-  width: 3px;
-  height: 3px;
-  background: #ffffff;
-  border-radius: 50%;
-}
-
-.chip-ticket::before {
-  left: -2.5px;
-}
-
-.chip-ticket::after {
-  right: -2.5px;
-}
-
-.chip-bag {
-  width: 14px;
-  height: 13px;
-  border: 2px solid currentColor;
-  border-radius: 2px;
-}
-
-.chip-bag::before {
-  content: '';
-  position: absolute;
-  left: 3px;
-  top: -5px;
-  width: 6px;
-  height: 5px;
-  border: 2px solid currentColor;
-  border-bottom: 0;
-  border-radius: 4px 4px 0 0;
-}
-
-.facility-chip-text {
-  min-width: 0;
-  font-size: 12px;
-  line-height: 17px;
-  font-weight: 600;
-  color: #22262b;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.result-card {
-  margin-top: 22px;
-  padding: 0 0 14px;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid #dedfd4;
-  border-radius: 0;
-  box-shadow: 0 8px 20px rgba(36, 49, 42, 0.1);
-}
-
-.result-card-header {
-  min-height: 54px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 0 14px;
-  box-sizing: border-box;
-  background: #000000;
-}
-
-.museum-title {
-  display: block;
-  min-width: 0;
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: 800;
-  color: #ffffff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.result-count {
-  flex-shrink: 0;
-  font-size: 12px;
-  line-height: 17px;
-  font-weight: 700;
-  color: #e0e100;
-}
-
-.result-body {
-  display: flex;
-  align-items: stretch;
-  padding: 13px 12px 0;
-  box-sizing: border-box;
-}
-
-.floor-tabs {
-  width: 50px;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  background: #f5f5ed;
-  border: 1px solid #dedfd4;
-  border-radius: 0;
-}
-
-.floor-tab {
-  width: 40px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0;
-}
-
-.floor-tab.active {
-  background: #000000;
-}
-
-.floor-tab-text {
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 700;
-  color: #5d5b50;
-}
-
-.floor-tab.active .floor-tab-text {
-  color: #e0e100;
-}
-
-.result-list {
-  flex: 1;
-  min-width: 0;
-  margin-left: 12px;
-}
-
-.result-row {
-  min-height: 50px;
-  display: flex;
-  align-items: center;
-  padding: 4px 0;
-  box-sizing: border-box;
-  border-bottom: 1px solid #e7e7dd;
-}
-
-.result-row:last-child {
-  border-bottom: 0;
-}
-
-.pin-icon {
-  width: 17px;
-  height: 21px;
-  position: relative;
-  flex-shrink: 0;
-  margin-right: 11px;
-  border: 2px solid #000000;
-  border-radius: 50% 50% 50% 0;
-  box-sizing: border-box;
-  transform: rotate(-45deg);
-}
-
-.pin-icon::after {
-  content: '';
-  position: absolute;
-  left: 4px;
-  top: 4px;
-  width: 4px;
-  height: 4px;
-  background: #e0e100;
-  border-radius: 50%;
-}
-
-.result-copy {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 3px;
-}
-
-.result-name {
-  font-size: 15px;
-  line-height: 20px;
-  font-weight: 700;
-  color: #262421;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.result-meta {
-  font-size: 11px;
-  line-height: 15px;
-  font-weight: 500;
-  color: #696962;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.result-arrow {
-  width: 17px;
-  margin-left: 7px;
-  text-align: right;
-  flex-shrink: 0;
-  font-size: 25px;
-  line-height: 29px;
-  font-weight: 300;
-  color: #000000;
-}
-
-.empty-state {
-  min-height: 124px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 8px;
-  box-sizing: border-box;
-}
-
-.empty-title {
-  font-size: 16px;
-  line-height: 22px;
-  font-weight: 800;
-  color: #262421;
-}
-
-.empty-desc {
-  font-size: 12px;
-  line-height: 17px;
-  color: #696962;
-}
-
-@media (max-width: 360px) {
-  .poi-search-page {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  .facility-chip {
-    gap: 4px;
-    padding: 0 4px;
-  }
-
-  .facility-chip-text {
-    font-size: 11px;
-  }
-}
-
 @media (min-width: 768px) {
   .poi-search-page {
     max-width: 430px;
     margin: 0 auto;
-    box-shadow: 0 12px 36px rgba(36, 49, 42, 0.16);
   }
 }
 </style>