From 1d44266595babc47af4641417c1d7e8a227a7be1 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 14 Aug 2026 22:38:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(mini-app):=20=E6=B8=85=E7=90=86=E5=86=97?=
 =?UTF-8?q?=E4=BD=99=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E5=88=86=E4=BA=AB=E4=B8=8E=E7=AE=A1=E5=AE=B6?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 ProductList、ProductCard、SectionHeading、InlineLeadForm、SearchFilterBar 等无用业务组件
- 重构线路详情页操作栏，替换电话按钮逻辑，新增原生分享按钮与页面分享配置
- 新增 ConciergeContactSheet 弹窗组件，实现专属管家咨询交互
- 调整 PlayCategorySidebar 选中态样式，优化侧边栏交互逻辑
- 统一组件导入路径为绝对路径，修复路径错误问题
- 移除详情页自定义导航栏配置，优化页面显示效果
- 优化 DetailHero 组件模板排版，提升代码可读性
---
 .../components/ConciergeContactSheet.vue      |  41 +--
 .../src/components/InlineLeadForm.vue         |  92 -----
 .../src/components/ProductCard.vue            |  39 ---
 .../src/components/ProductList.vue            |  18 -
 .../src/components/SearchFilterBar.vue        | 321 ------------------
 .../src/components/SectionHeading.vue         |  30 --
 WonderQ-MiniAPP/src/pages.json                |   3 +-
 WonderQ-MiniAPP/src/pages/concierge/index.vue |   2 +-
 .../detail/components/DetailActionBar.vue     |  17 +-
 .../pages/detail/components/DetailHero.vue    |  11 +-
 WonderQ-MiniAPP/src/pages/detail/index.vue    |  43 ++-
 .../play/components/PlayCategorySidebar.vue   |  17 +-
 12 files changed, 82 insertions(+), 552 deletions(-)
 rename WonderQ-MiniAPP/src/{pages/concierge => }/components/ConciergeContactSheet.vue (74%)
 delete mode 100644 WonderQ-MiniAPP/src/components/InlineLeadForm.vue
 delete mode 100644 WonderQ-MiniAPP/src/components/ProductCard.vue
 delete mode 100644 WonderQ-MiniAPP/src/components/ProductList.vue
 delete mode 100644 WonderQ-MiniAPP/src/components/SearchFilterBar.vue
 delete mode 100644 WonderQ-MiniAPP/src/components/SectionHeading.vue

diff --git a/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue b/WonderQ-MiniAPP/src/components/ConciergeContactSheet.vue
similarity index 74%
rename from WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue
rename to WonderQ-MiniAPP/src/components/ConciergeContactSheet.vue
index 34cc9e2..e83fed8 100644
--- a/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue
+++ b/WonderQ-MiniAPP/src/components/ConciergeContactSheet.vue
@@ -1,17 +1,8 @@
 <template>
-  <uni-popup
-    ref="popupRef"
-    type="bottom"
-    background-color="transparent"
-    mask-background-color="rgba(0,0,0,0.45)"
-    :is-mask-click="true"
-    :safe-area="false"
-    @change="onPopupChange"
-  >
-    <view
-      v-if="advisor"
-      class="mx-auto max-h-[88vh] w-full max-w-[430px] overflow-y-auto rounded-t-[24px] bg-white px-5 pb-[calc(20px+env(safe-area-inset-bottom))] pt-3"
-    >
+  <uni-popup ref="popupRef" type="bottom" background-color="transparent" mask-background-color="rgba(0,0,0,0.45)"
+    :is-mask-click="true" :safe-area="false" @change="onPopupChange">
+    <view v-if="advisor"
+      class="mx-auto max-h-[88vh] w-full max-w-[430px] overflow-y-auto rounded-t-[24px] bg-white px-5 pb-[calc(20px+env(safe-area-inset-bottom))] pt-3">
       <view class="mx-auto h-1 w-10 rounded-full bg-[#d9d3cd]" />
 
       <view class="mt-5 flex items-center justify-between">
@@ -19,17 +10,15 @@
           <text class="block text-[11px] font-semibold tracking-[0.28em] text-[#ee5b2a]">CONTACT ADVISOR</text>
           <text class="mt-2 block text-[22px] font-semibold text-[#171615]">添加专属管家</text>
         </view>
-        <view
-          class="tap-feedback flex h-10 w-10 items-center justify-center text-[#4d4945]"
-          aria-label="关闭"
-          @click="$emit('close')"
-        >
+        <view class="tap-feedback flex h-10 w-10 items-center justify-center text-[#4d4945]" aria-label="关闭"
+          @click="$emit('close')">
           <uni-icons type="closeempty" :size="22" color="#4d4945" />
         </view>
       </view>
 
       <view class="mt-5 flex items-center gap-3 rounded-[12px] bg-[#f7f4f0] p-3">
-        <image class="h-12 w-12 shrink-0 rounded-full bg-[#b9a99b] object-cover" :src="advisor.avatar" mode="aspectFill" />
+        <image class="h-12 w-12 shrink-0 rounded-full bg-[#b9a99b] object-cover" :src="advisor.avatar"
+          mode="aspectFill" />
         <view class="min-w-0">
           <text class="block text-[15px] font-semibold text-[#171615]">{{ advisor.name }}</text>
           <text class="mt-1 block text-[10px] font-semibold tracking-[0.12em] text-[#ee5b2a]">{{ advisor.role }}</text>
@@ -37,19 +26,15 @@
       </view>
 
       <view class="mt-5 flex flex-col items-center rounded-[16px] border border-[#ece7e1] bg-[#fffdfb] px-5 py-5">
-        <image
-          class="h-[220px] w-[220px]"
-          :src="advisor.qrImage"
-          mode="aspectFit"
-          show-menu-by-longpress
-          alt="管家微信二维码"
-        />
+        <image class="h-[220px] w-[220px]" :src="advisor.qrImage" mode="aspectFit" show-menu-by-longpress
+          alt="管家微信二维码" />
         <text class="mt-4 text-center text-[13px] font-semibold text-[#252321]">长按二维码识别，添加管家好友</text>
         <text class="mt-2 text-center text-[11px] leading-5 text-[#77716b]">添加后可沟通路线、预算、酒店和用车安排</text>
       </view>
 
       <view class="mt-4 grid grid-cols-2 gap-2">
-        <view v-for="detail in advisor.details" :key="detail.label" class="flex items-center gap-2 rounded-[10px] bg-[#f7f4f0] px-3 py-3">
+        <view v-for="detail in advisor.details" :key="detail.label"
+          class="flex items-center gap-2 rounded-[10px] bg-[#f7f4f0] px-3 py-3">
           <uni-icons :type="detail.icon" :size="15" color="#4d4945" />
           <text class="text-[11px] text-[#4d4945]">{{ detail.label }}</text>
         </view>
@@ -60,7 +45,7 @@
 
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
-import type { ConciergeAdvisor } from "./conciergeTypes";
+import type { ConciergeAdvisor } from "../pages/concierge/components/conciergeTypes";
 
 type UniPopupExpose = {
   open: (direction?: string) => void;
diff --git a/WonderQ-MiniAPP/src/components/InlineLeadForm.vue b/WonderQ-MiniAPP/src/components/InlineLeadForm.vue
deleted file mode 100644
index 7658b89..0000000
--- a/WonderQ-MiniAPP/src/components/InlineLeadForm.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <view class="mx-4 rounded-[26px] border border-[#1f6b57]/15 bg-white px-4 py-4">
-    <view class="flex items-center justify-center gap-2">
-      <view class="h-px w-8 bg-[#1f6b57]/20" />
-      <text class="block text-[10px] font-semibold uppercase tracking-[0.14em] text-[#1f6b57]">Private tailor</text>
-      <view class="h-px w-8 bg-[#1f6b57]/20" />
-    </view>
-    <text class="mt-2 block text-center text-[20px] font-bold leading-7 text-[#1f2c25]">不知道怎么选？让管家帮你定制</text>
-    <view class="lead-process mt-4 flex items-start px-1">
-      <view v-for="(step, index) in steps" :key="step.label" class="lead-process-step relative flex flex-1 flex-col items-center">
-        <view class="lead-process-icon relative z-10 flex h-5 w-5 items-center justify-center bg-white">
-          <uni-icons :type="step.icon" :size="14" color="#5f7480" />
-        </view>
-        <view v-if="index < steps.length - 1" class="lead-process-line" />
-        <text class="mt-1.5 block text-center text-[12px] font-semibold leading-4 text-[#34464f]">{{ step.label }}</text>
-      </view>
-    </view>
-    <view class="mt-4 rounded-[16px] border border-[#245c45]/10 bg-white px-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]">
-      <input v-model="contact" class="h-11 text-[14px] text-[#1f2c25]" type="text" placeholder="手机号 / 微信号" placeholder-class="text-[#9aa69d]" />
-    </view>
-    <button class="inline-lead-button primary-action tap-feedback m-0 mt-2.5 w-full text-center text-[15px] font-bold text-white" :class="submitting ? 'opacity-70' : ''" :disabled="submitting" @click="submit">
-      {{ submitting ? "提交中..." : "帮我定制" }}
-    </button>
-    <text v-if="message" class="mt-2 block text-center text-[12px] leading-5" :class="message === '已提交' ? 'text-[#245c45]' : 'text-[#c36f21]'">{{ message }}</text>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { normalizeContactInput } from "@/lib/data";
-import { submitLead } from "@/lib/store";
-
-const props = defineProps<{
-  sourcePage: string;
-  destination?: string;
-}>();
-
-const contact = ref("");
-const message = ref("");
-const submitting = ref(false);
-const steps = [
-  { label: "提交需求", icon: "compose" },
-  { label: "获取方案", icon: "chat" },
-  { label: "确认方案", icon: "checkmarkempty" },
-  { label: "开启旅程", icon: "calendar" },
-];
-
-async function submit() {
-  const phone = normalizeContactInput(contact.value);
-  if (!phone) {
-    message.value = "请留下手机号或微信号，方便服务管家联系你。";
-    return;
-  }
-
-  submitting.value = true;
-  const result = await submitLead(
-    {
-      phone,
-      destination: props.destination,
-      sourcePage: props.sourcePage,
-      note: "来自页面内快速定制入口",
-    },
-    false,
-  );
-  submitting.value = false;
-  message.value = result.message ?? (result.ok ? "已提交" : "提交失败");
-  if (result.ok) contact.value = "";
-}
-</script>
-
-<style scoped>
-.inline-lead-button {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 44px !important;
-  min-height: 44px !important;
-  border-radius: 10px !important;
-  padding: 0 !important;
-  line-height: 1 !important;
-}
-
-.lead-process-line {
-  position: absolute;
-  top: 9px;
-  left: calc(50% + 18px);
-  right: calc(-50% + 18px);
-  height: 1px;
-  background: rgba(31, 107, 87, 0.2);
-}
-</style>
diff --git a/WonderQ-MiniAPP/src/components/ProductCard.vue b/WonderQ-MiniAPP/src/components/ProductCard.vue
deleted file mode 100644
index fe03815..0000000
--- a/WonderQ-MiniAPP/src/components/ProductCard.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <view class="tap-feedback m-0 overflow-hidden rounded-[22px] p-0 text-left soft-card"
-    @click="$emit('select', product)">
-    <view class="relative h-[142px] overflow-hidden bg-[#e7efe7]">
-      <image class="block h-full w-full" :src="product.image" mode="aspectFill" lazy-load />
-    </view>
-    <view class="p-3.5">
-      <text class="text-clamp-2 min-h-[42px] text-[15px] font-semibold leading-[21px] text-[#1f2c25] text-justify">{{
-        product.title
-        }}</text>
-      <view class="mt-2 flex flex-wrap gap-1">
-        <text v-for="tag in product.tags.slice(0, 3)" :key="tag"
-          class="rounded-[7px] border border-[#6fb2a7]/70 bg-[#eef8f5] px-1.5 py-0.5 text-[10px] leading-4 text-[#227464]">
-          {{ tag }}
-        </text>
-      </view>
-      <view class="mt-3 flex min-h-[24px] items-end justify-between gap-2">
-        <text class="min-w-0 flex-1 truncate text-[11px] leading-none text-[#718073]">{{ product.subtitle ||
-          product.destinationName || "贵州定制" }}</text>
-        <text class="shrink-0 whitespace-nowrap text-[14px] font-bold leading-none text-[#a86539]">
-          {{ formatProductCardPrice(product.price) }}
-        </text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { formatProductCardPrice } from "@/lib/data";
-import type { Product } from "@/lib/types";
-
-defineProps<{
-  product: Product;
-}>();
-
-defineEmits<{
-  select: [product: Product];
-}>();
-</script>
diff --git a/WonderQ-MiniAPP/src/components/ProductList.vue b/WonderQ-MiniAPP/src/components/ProductList.vue
deleted file mode 100644
index fac0c4c..0000000
--- a/WonderQ-MiniAPP/src/components/ProductList.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <view class="grid grid-cols-2 gap-3 px-4">
-    <ProductCard v-for="product in products" :key="product.apiId || product.id" :product="product" @select="$emit('select', product)" />
-  </view>
-</template>
-
-<script setup lang="ts">
-import type { Product } from "@/lib/types";
-import ProductCard from "./ProductCard.vue";
-
-defineProps<{
-  products: Product[];
-}>();
-
-defineEmits<{
-  select: [product: Product];
-}>();
-</script>
diff --git a/WonderQ-MiniAPP/src/components/SearchFilterBar.vue b/WonderQ-MiniAPP/src/components/SearchFilterBar.vue
deleted file mode 100644
index 0bd3dd3..0000000
--- a/WonderQ-MiniAPP/src/components/SearchFilterBar.vue
+++ /dev/null
@@ -1,321 +0,0 @@
-<template>
-  <view class="relative z-40 border-b border-[#245c45]/10 bg-[#fffaf2]/95">
-    <view class="search-filter-tabs grid h-11 grid-cols-3 border-b border-[#245c45]/10 bg-white/55">
-      <view v-for="tab in tabs" :key="tab.key" :data-testid="`search-filter-tab-${tab.key}`"
-        class="tap-feedback flex min-w-0 items-center justify-center gap-1 px-2"
-        :class="isPanelMarked(tab.key) ? 'text-[#17877f]' : 'text-[#1f2c25]'" @click="togglePanel(tab.key)">
-        <text class="truncate text-[13px] font-semibold leading-none">{{ tab.label }}</text>
-        <uni-icons :type="activePanel === tab.key ? 'up' : 'down'" :size="11"
-          :color="isPanelMarked(tab.key) ? '#17877f' : '#1f2c25'" />
-      </view>
-    </view>
-
-    <uni-popup ref="filterPopupRef" class="search-filter-popup" type="top" background-color="transparent"
-      mask-background-color="rgba(0,0,0,0)" :is-mask-click="true" :animation="false" :safe-area="false"
-      @change="onPopupChange">
-      <view class="search-filter-popup-shell" :style="{ marginTop: popupTop }">
-        <view v-if="activePanel === 'sort'" class="search-filter-panel">
-          <view v-for="option in sortOptions" :key="option.key"
-            class="tap-feedback flex min-h-[44px] items-center justify-between border-b border-[#245c45]/10 px-4 last:border-b-0"
-            @click="selectSort(option.key)">
-            <text class="text-[14px] leading-5"
-              :class="modelValue.sortKey === option.key ? 'font-semibold text-[#17877f]' : 'text-[#1f2c25]'">
-              {{ option.label }}
-            </text>
-            <uni-icons v-if="modelValue.sortKey === option.key" type="checkmarkempty" :size="18" color="#17877f" />
-          </view>
-        </view>
-
-        <view v-if="activePanel === 'price'" class="search-filter-panel">
-          <view class="px-4 pt-3">
-            <text class="block text-[14px] font-semibold leading-5 text-[#1f2c25]">价格</text>
-            <view class="mt-3 flex items-center gap-3">
-              <view class="h-9 flex-1 rounded-[6px] border border-[#245c45]/10 bg-white">
-                <input :value="draftMin" data-testid="search-filter-price-min"
-                  class="h-9 px-3 text-center text-[13px] text-[#1f2c25]" type="number" placeholder="最低价"
-                  placeholder-class="text-[#b0b8b2]" @input="onDraftMinInput" />
-              </view>
-              <text class="text-[13px] font-semibold text-[#1f2c25]">--</text>
-              <view class="h-9 flex-1 rounded-[6px] border border-[#245c45]/10 bg-white">
-                <input :value="draftMax" data-testid="search-filter-price-max"
-                  class="h-9 px-3 text-center text-[13px] text-[#1f2c25]" type="number" placeholder="最高价"
-                  placeholder-class="text-[#b0b8b2]" @input="onDraftMaxInput" />
-              </view>
-            </view>
-          </view>
-          <view class="mt-6 flex gap-2 border-t border-[#245c45]/10 px-3 py-3">
-            <view class="filter-action tap-feedback flex-1 bg-[#eeeeee] text-[#7b837d]"
-              data-testid="search-filter-price-clear" @click="clearPrice">清空</view>
-            <view class="filter-action tap-feedback flex-[1.55] bg-[#17877f] text-white"
-              data-testid="search-filter-price-apply" @click="applyPrice">
-              查看{{ previewCount }}条线路
-            </view>
-          </view>
-        </view>
-
-        <view v-if="activePanel === 'duration'" class="search-filter-panel">
-          <view class="px-4 pt-3">
-            <text class="block text-[14px] font-semibold leading-5 text-[#1f2c25]">行程天数</text>
-            <view class="mt-2 grid grid-cols-3 gap-2">
-              <view v-for="option in durationOptions" :key="String(option.value)"
-                :data-testid="`search-filter-duration-${option.value}`"
-                class="tap-feedback flex h-9 items-center justify-center rounded-[8px] text-center"
-                :class="draftDuration === option.value ? 'bg-[#17877f] text-white' : 'bg-[#f3f5f4] text-[#1f2c25]'"
-                @click="draftDuration = option.value">
-                <text class="text-[13px] leading-none">{{ option.label }}</text>
-              </view>
-            </view>
-          </view>
-          <view class="mt-6 flex gap-2 border-t border-[#245c45]/10 px-3 py-3">
-            <view class="filter-action tap-feedback flex-1 bg-[#eeeeee] text-[#7b837d]"
-              data-testid="search-filter-duration-clear" @click="clearDuration">清空</view>
-            <view class="filter-action tap-feedback flex-[1.55] bg-[#17877f] text-white"
-              data-testid="search-filter-duration-apply" @click="applyDuration">
-              查看{{ previewCount }}条线路
-            </view>
-          </view>
-        </view>
-      </view>
-    </uni-popup>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed, getCurrentInstance, nextTick, ref } from "vue";
-import type { Product } from "@/lib/types";
-import {
-  filterAndSortSearchProducts,
-  normalizePriceInput,
-  type SearchDurationValue,
-  type SearchFilterState,
-  type SearchSortKey,
-} from "@/lib/searchFilters";
-
-type FilterPanel = "sort" | "price" | "duration";
-type UniPopupExpose = {
-  open: (direction?: string) => void;
-  close: () => void;
-};
-
-const props = defineProps<{
-  modelValue: SearchFilterState;
-  products: Product[];
-}>();
-
-const emit = defineEmits<{
-  "update:modelValue": [value: SearchFilterState];
-}>();
-
-const tabs: Array<{ key: FilterPanel; label: string }> = [
-  { key: "sort", label: "推荐排序" },
-  { key: "price", label: "参考报价" },
-  { key: "duration", label: "筛选" },
-];
-
-const sortOptions: Array<{ key: SearchSortKey; label: string }> = [
-  { key: "recommended", label: "推荐排序" },
-  { key: "salesDesc", label: "近期销量 高 → 低" },
-  { key: "priceAsc", label: "价格 低 → 高" },
-  { key: "priceDesc", label: "价格 高 → 低" },
-];
-
-const durationOptions: Array<{ label: string; value: SearchDurationValue }> = [
-  { label: "1日", value: 1 },
-  { label: "4日", value: 4 },
-  { label: "5日", value: 5 },
-  { label: "6日", value: 6 },
-  { label: "7日", value: 7 },
-  { label: "8日", value: 8 },
-  { label: "9日", value: 9 },
-  { label: "11日", value: 11 },
-  { label: "12日", value: 12 },
-  { label: "13日", value: 13 },
-  { label: "15日及以上", value: "15plus" },
-];
-
-const activePanel = ref<FilterPanel | null>(null);
-const filterPopupRef = ref<UniPopupExpose | null>(null);
-const popupTop = ref("0px");
-const draftMin = ref("");
-const draftMax = ref("");
-const draftDuration = ref<SearchDurationValue | null>(null);
-const instance = getCurrentInstance();
-
-const previewState = computed<SearchFilterState>(() => {
-  if (activePanel.value === "price") {
-    return {
-      ...props.modelValue,
-      priceMin: normalizePriceInput(draftMin.value),
-      priceMax: normalizePriceInput(draftMax.value),
-    };
-  }
-
-  if (activePanel.value === "duration") {
-    return {
-      ...props.modelValue,
-      duration: draftDuration.value,
-    };
-  }
-
-  return props.modelValue;
-});
-
-const previewCount = computed(() => filterAndSortSearchProducts(props.products, previewState.value).length);
-
-function getInputValue(event: InputEvent) {
-  const uniEvent = event as InputEvent & { detail?: { value?: unknown } };
-  if (uniEvent.detail?.value !== undefined) return String(uniEvent.detail.value);
-
-  const target = event.target as { value?: unknown } | null;
-  if (target?.value !== undefined) return String(target.value);
-
-  return "";
-}
-
-function onDraftMinInput(event: InputEvent) {
-  draftMin.value = getInputValue(event);
-}
-
-function onDraftMaxInput(event: InputEvent) {
-  draftMax.value = getInputValue(event);
-}
-
-function emitFilter(patch: Partial<SearchFilterState>) {
-  emit("update:modelValue", {
-    ...props.modelValue,
-    ...patch,
-  });
-}
-
-function syncDraft(panel: FilterPanel) {
-  if (panel === "price") {
-    draftMin.value = props.modelValue.priceMin === null ? "" : String(props.modelValue.priceMin);
-    draftMax.value = props.modelValue.priceMax === null ? "" : String(props.modelValue.priceMax);
-  }
-
-  if (panel === "duration") {
-    draftDuration.value = props.modelValue.duration;
-  }
-}
-
-function updatePopupTop() {
-  return new Promise<void>((resolve) => {
-    uni
-      .createSelectorQuery()
-      .in(instance?.proxy)
-      .select(".search-filter-tabs")
-      .boundingClientRect((rect) => {
-        const node = rect as { bottom?: number } | null;
-        if (typeof node?.bottom === "number") {
-          popupTop.value = `${Math.max(0, node.bottom)}px`;
-        }
-        resolve();
-      })
-      .exec();
-  });
-}
-
-async function openPanel(panel: FilterPanel) {
-  syncDraft(panel);
-  activePanel.value = panel;
-  await nextTick();
-  await updatePopupTop();
-  filterPopupRef.value?.open("top");
-}
-
-function closePanel() {
-  filterPopupRef.value?.close();
-  activePanel.value = null;
-}
-
-function togglePanel(panel: FilterPanel) {
-  if (activePanel.value === panel) {
-    closePanel();
-    return;
-  }
-
-  void openPanel(panel);
-}
-
-function selectSort(sortKey: SearchSortKey) {
-  emitFilter({ sortKey });
-  closePanel();
-}
-
-function clearPrice() {
-  draftMin.value = "";
-  draftMax.value = "";
-  emitFilter({ priceMin: null, priceMax: null });
-}
-
-function applyPrice() {
-  emitFilter({
-    priceMin: normalizePriceInput(draftMin.value),
-    priceMax: normalizePriceInput(draftMax.value),
-  });
-  closePanel();
-}
-
-function clearDuration() {
-  draftDuration.value = null;
-  emitFilter({ duration: null });
-}
-
-function applyDuration() {
-  emitFilter({ duration: draftDuration.value });
-  closePanel();
-}
-
-function onPopupChange(event: { show: boolean }) {
-  if (!event.show) activePanel.value = null;
-}
-
-function isPanelMarked(panel: FilterPanel) {
-  if (activePanel.value === panel) return true;
-  if (panel === "sort") return props.modelValue.sortKey !== "recommended";
-  if (panel === "price") return props.modelValue.priceMin !== null || props.modelValue.priceMax !== null;
-  return props.modelValue.duration !== null;
-}
-</script>
-
-<style scoped>
-.search-filter-tabs {
-  position: relative;
-  z-index: 70;
-}
-
-.search-filter-popup-shell {
-  width: 100%;
-  max-width: 430px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-:deep(.search-filter-popup.uni-popup) {
-  z-index: 60;
-}
-
-.search-filter-panel {
-  width: 100%;
-  background: rgba(255, 255, 255, 0.98);
-  border-bottom: 1px solid rgba(36, 92, 69, 0.1);
-  border-bottom-left-radius: 22px;
-  border-bottom-right-radius: 22px;
-  box-shadow: 0 18px 30px rgba(31, 44, 37, 0.12);
-  overflow: hidden;
-}
-
-.filter-action {
-  display: flex !important;
-  box-sizing: border-box;
-  height: 40px !important;
-  min-height: 40px !important;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px !important;
-  padding: 0 !important;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1 !important;
-}
-</style>
diff --git a/WonderQ-MiniAPP/src/components/SectionHeading.vue b/WonderQ-MiniAPP/src/components/SectionHeading.vue
deleted file mode 100644
index 206e86a..0000000
--- a/WonderQ-MiniAPP/src/components/SectionHeading.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <view class="mb-4 px-4">
-    <view class="flex items-end justify-between gap-3">
-      <view class="min-w-0 flex-1">
-        <text class="block truncate text-[20px] font-bold leading-7 text-[#1f2924]">{{ title }}</text>
-        <text v-if="subtitle" class="mt-1 block text-[12px] leading-5 text-[#68766e]">{{ subtitle }}</text>
-      </view>
-      <button
-        v-if="action"
-        class="tap-feedback m-0 min-h-[32px] shrink-0 rounded-[8px] border border-[#1f6b57]/15 bg-[#f4f7f5] px-3 py-1 text-[12px] font-semibold text-[#1f6b57]"
-        @click="$emit('action')"
-      >
-        {{ action }}
-      </button>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  title: string;
-  subtitle?: string;
-  eyebrow?: string;
-  action?: string;
-}>();
-
-defineEmits<{
-  action: [];
-}>();
-</script>
diff --git a/WonderQ-MiniAPP/src/pages.json b/WonderQ-MiniAPP/src/pages.json
index ac67a94..a58c8f3 100644
--- a/WonderQ-MiniAPP/src/pages.json
+++ b/WonderQ-MiniAPP/src/pages.json
@@ -22,8 +22,7 @@
     {
       "path": "pages/detail/index",
       "style": {
-        "navigationBarTitleText": "线路详情",
-        "navigationStyle": "custom"
+        "navigationBarTitleText": "线路详情"
       }
     },
     {
diff --git a/WonderQ-MiniAPP/src/pages/concierge/index.vue b/WonderQ-MiniAPP/src/pages/concierge/index.vue
index 92324b8..0aed381 100644
--- a/WonderQ-MiniAPP/src/pages/concierge/index.vue
+++ b/WonderQ-MiniAPP/src/pages/concierge/index.vue
@@ -23,7 +23,7 @@ import { onHide, onShow, onUnload } from "@dcloudio/uni-app";
 import ConciergeHero from "./components/ConciergeHero.vue";
 import ConciergePrinciples from "./components/ConciergePrinciples.vue";
 import ConciergeAdvisor from "./components/ConciergeAdvisor.vue";
-import ConciergeContactSheet from "./components/ConciergeContactSheet.vue";
+import ConciergeContactSheet from "@/components/ConciergeContactSheet.vue";
 import type { ConciergeAdvisor as ConciergeAdvisorData } from "./components/conciergeTypes";
 
 const principles = [
diff --git a/WonderQ-MiniAPP/src/pages/detail/components/DetailActionBar.vue b/WonderQ-MiniAPP/src/pages/detail/components/DetailActionBar.vue
index 2ab1a6f..f42d47b 100644
--- a/WonderQ-MiniAPP/src/pages/detail/components/DetailActionBar.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/components/DetailActionBar.vue
@@ -3,7 +3,7 @@
     class="flex w-full shrink-0 items-center gap-2 border-t border-[#e8e2da] bg-white/95 px-3 pb-[calc(10px+env(safe-area-inset-bottom))] pt-2">
     <view class="flex w-full shrink-0 items-center gap-1">
       <view class="tap-feedback m-0 flex h-12 w-12 flex-col items-center justify-center p-0 text-[#81776f]"
-        @click="$emit('home')">
+        @click="$emit('call')">
         <uni-icons type="phone" :size="18" color="#81776f" />
         <text class="mt-0.5 text-[9px]">电话</text>
       </view>
@@ -14,6 +14,18 @@
         <text class="mt-0.5 text-[9px]">管家</text>
       </view>
 
+      <view class="tap-feedback relative m-0 flex h-12 w-12 flex-col items-center justify-center p-0 text-[#81776f]">
+        <uni-icons type="redo" :size="18" color="#81776f" />
+        <text class="mt-0.5 text-[9px]">分享</text>
+        <button
+          open-type="share"
+          plain
+          hover-class="none"
+          aria-label="分享"
+          class="absolute inset-0 z-10 m-0 h-full w-full border-0 bg-transparent p-0 opacity-0"
+        />
+      </view>
+
       <view class="ml-auto flex min-w-0 items-center gap-2">
         <view class="min-w-0">
           <text class="block text-[10px] text-[#9b9188]">参考起价</text>
@@ -37,8 +49,7 @@ defineProps<{
 }>();
 
 defineEmits<{
-  home: [];
-  toggleFavorite: [];
+  call: [];
   concierge: [];
   booking: [];
 }>();
diff --git a/WonderQ-MiniAPP/src/pages/detail/components/DetailHero.vue b/WonderQ-MiniAPP/src/pages/detail/components/DetailHero.vue
index e927fa1..e9df33a 100644
--- a/WonderQ-MiniAPP/src/pages/detail/components/DetailHero.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/components/DetailHero.vue
@@ -4,12 +4,13 @@
 
     <view class="absolute bottom-10 left-4 right-4 z-10 text-white">
       <view class="flex items-center gap-2">
+        <text class="flex items-center justify-center rounded-[20px] bg-[#e96635] px-2 py-1 text-[10px] font-semibold">
+          {{ presentation.eyebrow }}
+        </text>
         <text
-          class="flex items-center justify-center rounded-[20px] bg-[#e96635] px-2 py-1 text-[10px] font-semibold">{{
-            presentation.eyebrow }}</text>
-        <text
-          class="flex items-center justify-center rounded-[20px] text-[10px] bg-[#333333] text-white px-2 py-1 font-semibold">{{
-            presentation.duration }}</text>
+          class="flex items-center justify-center rounded-[20px] text-[10px] bg-[#333333] text-white px-2 py-1 font-semibold">
+          {{ presentation.duration }}
+        </text>
       </view>
     </view>
   </view>
diff --git a/WonderQ-MiniAPP/src/pages/detail/index.vue b/WonderQ-MiniAPP/src/pages/detail/index.vue
index c36f47f..92279d7 100644
--- a/WonderQ-MiniAPP/src/pages/detail/index.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/index.vue
@@ -18,22 +18,26 @@
       <DetailMediaGallery :images="presentation.gallery" />
     </scroll-view>
 
-    <DetailActionBar :price="1.68" :favorite="favorite" @home="goHome" @toggle-favorite="toggleFavorite"
-      @concierge="goConcierge" @booking="goBooking(product)" />
+    <DetailActionBar :price="1.68" :favorite="favorite" @call="goCall" @concierge="goConcierge"
+      @booking="goBooking(product)" />
+
+    <ConciergeContactSheet :open="Boolean(selectedAdvisor)" :advisor="selectedAdvisor" @close="handleConciergeClosed" />
   </view>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
+import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
 import DetailActionBar from "./components/DetailActionBar.vue";
 import DetailHero from "./components/DetailHero.vue";
 import DetailInfoCard from "./components/DetailInfoCard.vue";
 import DetailMediaGallery from "./components/DetailMediaGallery.vue";
 import DetailOverviewCard from "./components/DetailOverviewCard.vue";
+import ConciergeContactSheet from "@/components/ConciergeContactSheet.vue";
+import type { ConciergeAdvisor } from "../concierge/components/conciergeTypes";
 import { createDetailPresentation } from "./components/detailPresentation";
-import { getDetailMeta, getProductDetailSections } from "@/lib/data";
-import { goBack, goBooking, goRoot } from "@/lib/navigation";
+import { getDetailMeta, getProductDetailSections, productKey } from "@/lib/data";
+import { goBack, goBooking } from "@/lib/navigation";
 import { findProduct, isProductFavorite, loadAppData, rememberProduct, toggleFavoriteProduct } from "@/lib/store";
 import type { Product } from "@/lib/types";
 
@@ -48,6 +52,12 @@ onShow(() => {
   void loadAppData();
 });
 
+onShareAppMessage(() => ({
+  title: presentation.value.title,
+  path: `/pages/detail/index?product=${encodeURIComponent(productKey(product.value))}`,
+  imageUrl: product.value.image,
+}));
+
 const meta = computed(() => getDetailMeta(product.value));
 const presentation = computed(() => createDetailPresentation(product.value));
 const detailSections = computed(() => getProductDetailSections(product.value, meta.value));
@@ -74,11 +84,28 @@ function toggleFavorite() {
 
 
 
-function goHome() {
-  goRoot("/pages/home/index");
+function goCall() {
+  uni.makePhoneCall({ phoneNumber: '13800000000' });
 }
 
 function goConcierge() {
-  goRoot("/pages/concierge/index");
+  selectedAdvisor.value = conciergeAdvisor;
 }
+
+function handleConciergeClosed() {
+  selectedAdvisor.value = null;
+}
+
+const conciergeAdvisor: ConciergeAdvisor = {
+  avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&fm=jpg&q=80&w=240&h=240",
+  name: "Amanda",
+  role: "SENIOR TRAVEL ADVISOR",
+  qrImage: "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=WonderQ%20Concierge",
+  details: [
+    { icon: "calendar", label: "服务经验：8年" },
+    { icon: "navigate", label: "擅长领域：瀑降 / 探洞" },
+  ],
+};
+
+const selectedAdvisor = ref<ConciergeAdvisor | null>(null);
 </script>
diff --git a/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue b/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue
index bc5d706..9985754 100644
--- a/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue
+++ b/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue
@@ -1,23 +1,30 @@
 <template>
-  <view class="no-scrollbar h-full min-h-0 w-[104px] shrink-0 border-r border-[#f0f0f0] bg-[#f5f5f5]">
-    <view v-for="category in categories" :key="category.id"
-      class="flex h-[62px] w-full items-center justify-center rounded-none border-0 px-2 text-center text-[13px] leading-5 text-[#171717] after:border-0"
-      :class="activeId === category.id ? 'border-r-2 border-[#f26424] bg-white font-semibold' : 'border-r-2 border-transparent font-medium'"
+  <view class="no-scrollbar h-full min-h-0 w-[104px] shrink-0 bg-[#f5f5f5]">
+    <view v-for="(category, index) in categories" :key="category.id"
+      class="relative flex h-[62px] w-full items-center justify-center rounded-none border-0 px-2 text-center text-[13px] leading-5 text-[#171717]"
+      :class="activeId === category.id ? 'bg-white font-semibold' : 'font-medium'"
       :aria-current="activeId === category.id ? 'page' : undefined" :aria-label="category.label"
       @click="$emit('select', category.id)">
+      <view v-if="index !== 0 && activeId === category.id"
+        class="absolute right-0 top-[-12px] h-3 w-3 before:block before:h-3 before:w-3 before:rounded-br-[12px] before:content-[''] before:bg-[#f5f5f5] bg-white" />
       <text>{{ category.label }}</text>
+      <view v-if="index !== categories.length - 1 && activeId === category.id"
+        class="absolute right-0 bottom-[-12px] h-3 w-3 before:block before:h-3 before:w-3 before:rounded-tr-[12px] before:content-[''] before:bg-[#f5f5f5] bg-white" />
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import type { PlayCategory } from "./playData";
 
-defineProps<{
+const props = defineProps<{
   categories: PlayCategory[];
   activeId: string;
 }>();
 
+const activeIndex = computed(() => props.categories.findIndex((category) => category.id === props.activeId));
+
 defineEmits<{
   select: [id: string];
 }>();