From 21d118b9678c8c92a521e4ba28ca179d7b12a54c Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Sun, 5 Jul 2026 14:58:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=82=B9=E4=BD=8D=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E9=A1=B5=E4=B8=BB=E7=AB=99=E8=A7=86=E8=A7=89=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                       |  14 ++
 src/pages/search/index.vue | 318 +++++++++++++++++++++++++------------
 2 files changed, 230 insertions(+), 102 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..2be80c6
--- /dev/null
+++ b/.env
@@ -0,0 +1,14 @@
+# 腾讯地图 API Key
+# 请到 https://lbs.qq.com/index.html 申请
+VITE_DATA_SOURCE_MODE=sdk
+VITE_GUIDE_CONTENT_SOURCE_MODE=static
+VITE_API_BASE_URL=/app-api
+VITE_SGS_SDK_TIMEOUT_MS=15000
+VITE_TENCENT_MAP_KEY=EJPBZ-DQEEQ-PDN5U-4ZDVX-F4I3F-6MBJC
+
+# SGS SDK 配置（SDK 模式下必需）
+VITE_SGS_API_BASE_URL=/app-api
+VITE_SGS_MAP_ID=1
+VITE_SGS_SDK_SCRIPT_URL=/static/sgs-map-sdk/index.global.js
+VITE_SGS_H5_ENGINE_URL=/h5-sdk
+VITE_SGS_SDK_ORIGIN=https://guide.whaoyue.com
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index e00756e..db116b2 100644
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -1,9 +1,12 @@
 <template>
   <view class="poi-search-page">
     <view class="search-header">
-      <text class="page-title">点位搜索</text>
+      <view class="search-header-copy">
+        <text class="page-title">点位搜索</text>
+        <text class="page-subtitle">Search Museum Locations</text>
+      </view>
       <view class="map-link" @tap="handleBackToMap">
-        <text class="map-link-text">地图</text>
+        <text class="map-link-text">返回地图</text>
       </view>
     </view>
 
@@ -31,6 +34,7 @@
         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}`">
@@ -51,6 +55,7 @@
         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>
@@ -59,7 +64,10 @@
     </view>
 
     <view class="result-card">
-      <text class="museum-title">深圳自然博物馆</text>
+      <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">
@@ -335,52 +343,79 @@ const handleBackToMap = () => {
   width: 100%;
   min-height: 100vh;
   min-height: 100dvh;
-  padding: calc(env(safe-area-inset-top) + 42px) 14px 22px;
+  padding: calc(env(safe-area-inset-top) + 32px) 14px 24px;
   box-sizing: border-box;
-  background: #f7f8fa;
+  background:
+    linear-gradient(180deg, rgba(224, 225, 0, 0.22) 0, rgba(245, 245, 237, 0) 146px),
+    #f5f5ed;
+  color: #262421;
+  font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   overflow-y: auto;
 }
 
 .search-header {
-  height: 34px;
+  min-height: 46px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  margin: 0 5px 17px;
+  gap: 12px;
+  margin: 0 2px 16px;
+}
+
+.search-header-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .page-title {
-  font-size: 21px;
-  line-height: 29px;
+  font-size: 26px;
+  line-height: 31px;
   font-weight: 800;
-  color: #050505;
+  letter-spacing: 0;
+  color: #000000;
+}
+
+.page-subtitle {
+  font-size: 11px;
+  line-height: 15px;
+  font-weight: 500;
+  color: #5d5b50;
+  white-space: nowrap;
 }
 
 .map-link {
-  min-width: 46px;
-  height: 27px;
+  min-width: 74px;
+  height: 32px;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background: #000000;
+  border: 1px solid rgba(0, 0, 0, 0.88);
+  border-radius: 0;
 }
 
 .map-link-text {
-  font-size: 15px;
-  line-height: 21px;
-  font-weight: 600;
-  color: #11843f;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 700;
+  color: #e0e100;
+  white-space: nowrap;
 }
 
 .search-box {
-  height: 46px;
+  height: 48px;
   display: flex;
   align-items: center;
-  padding: 0 15px;
+  padding: 0 14px;
   box-sizing: border-box;
-  background: #ffffff;
-  border: 1px solid #dfe1e5;
-  border-radius: 7px;
-  box-shadow: 0 5px 14px rgba(25, 31, 38, 0.07);
+  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 {
@@ -389,7 +424,7 @@ const handleBackToMap = () => {
   position: relative;
   flex-shrink: 0;
   margin-right: 14px;
-  border: 2px solid #343942;
+  border: 2px solid #151713;
   border-radius: 50%;
   box-sizing: border-box;
 }
@@ -401,7 +436,7 @@ const handleBackToMap = () => {
   bottom: -5px;
   width: 10px;
   height: 2px;
-  background: #343942;
+  background: #151713;
   border-radius: 2px;
   transform: rotate(45deg);
 }
@@ -412,11 +447,11 @@ const handleBackToMap = () => {
   height: 44px;
   font-size: 15px;
   line-height: 44px;
-  color: #15191f;
+  color: #262421;
 }
 
 .search-placeholder {
-  color: #8d939e;
+  color: #8b8b84;
 }
 
 .clear-button,
@@ -431,14 +466,14 @@ const handleBackToMap = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #eff1f4;
+  background: #e8eadf;
   border-radius: 50%;
 }
 
 .clear-text {
   font-size: 19px;
   line-height: 20px;
-  color: #6c727c;
+  color: #424754;
 }
 
 .voice-icon {
@@ -453,7 +488,7 @@ const handleBackToMap = () => {
   top: 1px;
   width: 9px;
   height: 17px;
-  border: 2px solid #343942;
+  border: 2px solid #151713;
   border-radius: 6px;
   box-sizing: border-box;
 }
@@ -465,45 +500,73 @@ const handleBackToMap = () => {
   top: 10px;
   width: 17px;
   height: 12px;
-  border: 2px solid #343942;
+  border: 2px solid #151713;
   border-top: 0;
   border-radius: 0 0 9px 9px;
   box-sizing: border-box;
 }
 
 .category-grid {
-  margin-top: 31px;
+  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: 88px;
+  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(1),
-.category-item:nth-child(2),
 .category-item:nth-child(3) {
-  border-bottom: 1px solid #e1e3e6;
+  background: #16beb2;
+}
+
+.category-item:nth-child(4) {
+  background: #b796f2;
 }
 
-.category-item:nth-child(2),
 .category-item:nth-child(5) {
-  border-left: 1px solid #e1e3e6;
-  border-right: 1px solid #e1e3e6;
+  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: 11px;
-  color: #148740;
+  margin-bottom: 9px;
+  color: #000000;
+}
+
+.category-item:nth-child(1) .line-icon,
+.category-item:nth-child(1) .category-label {
+  color: #e0e100;
 }
 
 .icon-part {
@@ -673,40 +736,55 @@ const handleBackToMap = () => {
 }
 
 .category-label {
-  font-size: 15px;
-  line-height: 21px;
-  font-weight: 500;
-  color: #0b0c0f;
+  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: 33px 6px 12px;
+  margin: 24px 2px 12px;
+  padding: 10px 0 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .section-title {
-  font-size: 15px;
-  line-height: 21px;
-  font-weight: 600;
-  color: #17191d;
+  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: 9px;
+  gap: 8px;
 }
 
 .facility-chip {
-  height: 37px;
+  min-height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 0 6px;
+  padding: 0 8px;
   box-sizing: border-box;
-  background: #ffffff;
-  border: 1px solid #cfd3d8;
-  border-radius: 4px;
+  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 {
@@ -714,7 +792,7 @@ const handleBackToMap = () => {
   height: 12px;
   position: relative;
   flex-shrink: 0;
-  color: #148740;
+  color: #000000;
   box-sizing: border-box;
 }
 
@@ -782,79 +860,111 @@ const handleBackToMap = () => {
   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: 23px;
-  padding: 17px 13px 28px;
+  margin-top: 22px;
+  padding: 0 0 14px;
   box-sizing: border-box;
-  background: #ffffff;
-  border-radius: 9px;
-  box-shadow: 0 5px 17px rgba(26, 32, 44, 0.1);
+  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;
-  margin: 0 5px 15px;
-  font-size: 17px;
+  min-width: 0;
+  font-size: 18px;
   line-height: 24px;
   font-weight: 800;
-  color: #090a0c;
+  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: 55px;
-  padding: 7px 0;
+  width: 50px;
+  padding: 4px;
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0;
-  background: #f4f6f9;
-  border-radius: 5px;
+  background: #f5f5ed;
+  border: 1px solid #dedfd4;
+  border-radius: 0;
 }
 
 .floor-tab {
-  width: 48px;
-  height: 41px;
+  width: 40px;
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 5px;
+  border-radius: 0;
 }
 
 .floor-tab.active {
-  background: #050505;
+  background: #000000;
 }
 
 .floor-tab-text {
-  font-size: 17px;
-  line-height: 22px;
-  font-weight: 500;
-  color: #8a919b;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 700;
+  color: #5d5b50;
 }
 
 .floor-tab.active .floor-tab-text {
-  color: #f0ff00;
+  color: #e0e100;
 }
 
 .result-list {
   flex: 1;
   min-width: 0;
-  margin-left: 17px;
+  margin-left: 12px;
 }
 
 .result-row {
-  min-height: 43px;
+  min-height: 50px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #e4e6e9;
+  padding: 4px 0;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e7e7dd;
 }
 
 .result-row:last-child {
@@ -866,8 +976,8 @@ const handleBackToMap = () => {
   height: 21px;
   position: relative;
   flex-shrink: 0;
-  margin-right: 14px;
-  border: 2.5px solid #148740;
+  margin-right: 11px;
+  border: 2px solid #000000;
   border-radius: 50% 50% 50% 0;
   box-sizing: border-box;
   transform: rotate(-45deg);
@@ -880,7 +990,7 @@ const handleBackToMap = () => {
   top: 4px;
   width: 4px;
   height: 4px;
-  background: #148740;
+  background: #e0e100;
   border-radius: 50%;
 }
 
@@ -894,19 +1004,20 @@ const handleBackToMap = () => {
 }
 
 .result-name {
-  font-size: 14px;
+  font-size: 15px;
   line-height: 20px;
-  font-weight: 500;
-  color: #0d0f12;
+  font-weight: 700;
+  color: #262421;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .result-meta {
-  font-size: 10px;
-  line-height: 14px;
-  color: #8a919b;
+  font-size: 11px;
+  line-height: 15px;
+  font-weight: 500;
+  color: #696962;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -917,30 +1028,33 @@ const handleBackToMap = () => {
   margin-left: 7px;
   text-align: right;
   flex-shrink: 0;
-  font-size: 29px;
+  font-size: 25px;
   line-height: 29px;
-  font-weight: 200;
-  color: #707782;
+  font-weight: 300;
+  color: #000000;
 }
 
 .empty-state {
-  min-height: 95px;
+  min-height: 124px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 5px;
+  gap: 6px;
+  padding: 0 8px;
+  box-sizing: border-box;
 }
 
 .empty-title {
-  font-size: 14px;
-  line-height: 20px;
-  color: #161a20;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 800;
+  color: #262421;
 }
 
 .empty-desc {
-  font-size: 11px;
-  line-height: 16px;
-  color: #8a919b;
+  font-size: 12px;
+  line-height: 17px;
+  color: #696962;
 }
 
 @media (max-width: 360px) {