From 3ce669d2206baec85837d618d49d2144b614227f Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 27 May 2026 17:24:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E6=BC=94=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../check-long-text-guide-detail-routes.mjs   |   6 +-
 src/model/ChatModel.js                        |   2 +
 src/pages.json                                |   6 +
 src/pages/ChatMain/ChatMainList/index.vue     |   3 +-
 .../LongTextGuideCardPreview/detailRoutes.mjs |   2 +-
 .../LongTextGuideCardPreview/fullDoc.vue      | 177 ++++
 .../LongTextGuideCardPreview/index.vue        |  12 +
 .../styles/detail.scss                        | 182 ++++
 .../长文本收纳组件_5类演示.html               | 775 ++++++++++++++++++
 9 files changed, 1160 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/ChatModule/LongTextGuideCardPreview/fullDoc.vue
 create mode 100644 src/pages/ChatModule/LongTextGuideCardPreview/长文本收纳组件_5类演示.html

diff --git a/scripts/check-long-text-guide-detail-routes.mjs b/scripts/check-long-text-guide-detail-routes.mjs
index cd77377..c3a8ac5 100644
--- a/scripts/check-long-text-guide-detail-routes.mjs
+++ b/scripts/check-long-text-guide-detail-routes.mjs
@@ -13,9 +13,10 @@ const rootDir = path.resolve(dirname, "..");
 
 const expectedRoutes = {
   longTextCard: "/pages/ChatModule/LongTextGuideCardPreview/guide",
-  longTextCardSnap: "/pages/ChatModule/LongTextGuideCardPreview/poi",
+  longTextCardScenicSpot: "/pages/ChatModule/LongTextGuideCardPreview/poi",
   longTextCardRoute: "/pages/ChatModule/LongTextGuideCardPreview/route",
-  longTextCardScenicSpot: "/pages/ChatModule/LongTextGuideCardPreview/photo",
+  longTextCardSnap: "/pages/ChatModule/LongTextGuideCardPreview/photo",
+  longTextCardFullDoc: "/pages/ChatModule/LongTextGuideCardPreview/fullDoc",
 };
 
 assert.deepEqual(DETAIL_ROUTE_BY_TYPE, expectedRoutes);
@@ -38,4 +39,3 @@ for (const route of Object.values(expectedRoutes)) {
     `Route is not registered in src/pages.json: ${route}`,
   );
 }
-
diff --git a/src/model/ChatModel.js b/src/model/ChatModel.js
index 37a4483..4d9746d 100644
--- a/src/model/ChatModel.js
+++ b/src/model/ChatModel.js
@@ -56,8 +56,10 @@ export const CompName = {
   longTextCardSnap: "longTextCardSnap",
   longTextCardRoute: "longTextCardRoute",
   longTextCardScenicSpot: "longTextCardScenicSpot",
+  longTextCardFullDoc: "longTextCardFullDoc",
   // 生成合成图片
   aigcPhotoGeneratorCard: "aigcPhotoGeneratorCard",
+  videoCard: "videoCard",
 };
 
 /// 发送的指令类型
diff --git a/src/pages.json b/src/pages.json
index 58b6d31..33c208b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -68,6 +68,12 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/ChatModule/LongTextGuideCardPreview/fullDoc",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/ChatMain/NoticeMessage/detail",
       "style": {
diff --git a/src/pages/ChatMain/ChatMainList/index.vue b/src/pages/ChatMain/ChatMainList/index.vue
index fa93094..1850de0 100644
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -959,7 +959,8 @@ const isLongTextCard = (componentName) => {
     componentName === CompName.longTextCard ||
     componentName === CompName.longTextCardSnap ||
     componentName === CompName.longTextCardRoute ||
-    componentName === CompName.longTextCardScenicSpot
+    componentName === CompName.longTextCardScenicSpot ||
+    componentName === CompName.longTextCardFullDoc
   );
 };
 
diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/detailRoutes.mjs b/src/pages/ChatModule/LongTextGuideCardPreview/detailRoutes.mjs
index bb992d4..ceb9416 100644
--- a/src/pages/ChatModule/LongTextGuideCardPreview/detailRoutes.mjs
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/detailRoutes.mjs
@@ -3,9 +3,9 @@ export const DETAIL_ROUTE_BY_TYPE = {
   longTextCardScenicSpot: "/pages/ChatModule/LongTextGuideCardPreview/poi",
   longTextCardRoute: "/pages/ChatModule/LongTextGuideCardPreview/route",
   longTextCardSnap: "/pages/ChatModule/LongTextGuideCardPreview/photo",
+  longTextCardFullDoc: "/pages/ChatModule/LongTextGuideCardPreview/fullDoc",
 };
 
 export const getLongTextGuideDetailRoute = (type) => {
   return DETAIL_ROUTE_BY_TYPE[type] || "";
 };
-
diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/fullDoc.vue b/src/pages/ChatModule/LongTextGuideCardPreview/fullDoc.vue
new file mode 100644
index 0000000..788d06f
--- /dev/null
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/fullDoc.vue
@@ -0,0 +1,177 @@
+<template>
+  <view class="long-text-detail-page flex flex-col">
+    <TopNavBar title="初游攻略" background="#E5EFE9" />
+
+    <scroll-view class="long-text-detail-scroll" scroll-y>
+      <view class="long-text-detail-content">
+        <view class="long-text-detail-card">
+          <view class="long-text-detail-header">
+            <view class="long-text-detail-title">第一次来小七孔，照着这条线走就对了</view>
+            <view class="long-text-detail-badge is-amber">初游攻略</view>
+          </view>
+
+          <view class="long-text-detail-body">
+            <view class="detail-paragraph">
+              第一次来小七孔，别犹豫，直接锁死
+              <text class="detail-highlight">东门进、西门出</text>
+              这条线。
+            </view>
+
+            <view class="detail-paragraph">
+              这是景区最完整的打法，全程顺着响水河往下游走，不用爬坡回头，把最精华的水景一次看个够。从古朴的石桥热身，一路走到碧蓝的卧龙潭收尾，节奏刚刚好。
+            </view>
+
+            <view class="overview-image-card is-green-blue">
+              <text>小七孔全景</text>
+              <text class="overview-image-subtitle">演示占位图</text>
+            </view>
+
+            <view class="detail-section-title">这几个地方不能错过</view>
+            <view class="detail-paragraph">
+              这条线上景点很密，但下面这几个是真正的“灵魂”，到了千万别急着赶路。
+            </view>
+
+            <template v-for="spot in scenicSpots" :key="spot.name">
+              <view class="detail-paragraph">
+                <text class="detail-highlight">{{ spot.index }} {{ spot.name }}</text>
+                {{ spot.desc }}
+              </view>
+              <view class="overview-image-card" :class="spot.imageTone">
+                <text>{{ spot.name }}</text>
+                <text class="overview-image-subtitle">演示占位图</text>
+              </view>
+            </template>
+
+            <view class="detail-section-title">一天大概这样分</view>
+            <view class="detail-tip-block">
+              上午（约 3 小时）：东门进，先走古桥、看跌水与拉雅瀑布<br />
+              中午（约 1 小时）：在驿站歇脚吃饭，避开正午晒<br />
+              下午（约 3 小时）：水上森林、鸳鸯湖划船、卧龙潭收尾<br />
+              机动（约 1 小时）：留点空给拍照、发呆、临时想多待的地方<br />
+              全程顺水而下约一天，体力一般也扛得住
+            </view>
+
+            <view class="detail-section-title">只有半天怎么办</view>
+            <view class="detail-tip-block">
+              时间紧就走精华：古桥 + 水上森林 + 卧龙潭，约 3-4 小时<br />
+              舍掉的部分别可惜，留个念想，下次再来
+            </view>
+
+            <view class="detail-section-title">小七的话</view>
+            <view class="detail-paragraph">
+              第一次来，不用追着打卡。挑两三个最想看的地方多待一会儿，比每个点都匆匆走过要值得多。具体某个点怎么玩，点开对应的攻略，我再细细跟你说。
+            </view>
+          </view>
+
+          <view class="detail-action-zone">
+            <view class="detail-action-label">必看景点 · 按游玩顺序</view>
+            <view class="overview-spots-wrap">
+              <template v-for="(spot, index) in routeStops" :key="spot.name">
+                <view class="overview-spot-card" @click="showToast(`点进景点详情：${spot.name}`)">
+                  <view class="overview-spot-index">{{ index + 1 }}</view>
+                  <view class="overview-spot-main">
+                    <view class="overview-spot-name">{{ spot.name }}</view>
+                    <view class="overview-spot-tag">{{ spot.tag }}</view>
+                  </view>
+                  <uni-icons type="right" size="14" color="#9FD9BF" />
+                </view>
+                <view v-if="index < routeStops.length - 1" class="overview-spot-arrow">↓</view>
+              </template>
+            </view>
+
+            <view class="detail-action-label">套票推荐</view>
+            <view class="overview-combo-card">
+              <view class="overview-combo-body">
+                <view class="overview-combo-cover is-green-blue">
+                  <text>小七孔全景</text>
+                </view>
+                <view class="overview-combo-info">
+                  <view class="overview-combo-name">小七孔畅玩套票</view>
+                  <view class="overview-combo-desc">门票 + 观光车 + 2 项体验，第一次来最省心</view>
+                  <view class="overview-combo-price">
+                    <text class="overview-combo-currency">¥</text>130
+                    <text class="overview-combo-original">¥175</text>
+                  </view>
+                </view>
+              </view>
+              <button class="overview-combo-button" @click="showToast('跳转套票详情页：小七孔畅玩套票')">
+                查看套票详情
+              </button>
+            </view>
+
+            <view class="detail-action-label">继续追问</view>
+            <view class="detail-faq-wrap">
+              <view
+                v-for="question in faq"
+                :key="question"
+                class="detail-faq-chip"
+                @click="showToast(`追问：${question}`)"
+              >
+                {{ question }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+
+const scenicSpots = [
+  {
+    index: "①",
+    name: "小七孔古桥",
+    imageTone: "is-stone",
+    desc: "这是整个景区名字的由来，也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上，七孔拱桥倒映在碧绿的水里，怎么拍都像画。记得低头看看桥下的水，平时碧蓝翠绿，汛期还能看到“半河清水半河浊水”的奇观。",
+  },
+  {
+    index: "②",
+    name: "68 级跌水瀑布 & 拉雅瀑布",
+    imageTone: "is-green",
+    desc: "过了古桥没多久，你会听到水声越来越大。这一段沿着河谷走，68 级瀑布层层叠叠、一级一级往下淌；拉雅瀑布更直接，几乎是从路边喷涌而出，水雾扑面而来。夏天走这段就像开了天然空调，体感一下凉好几度。",
+  },
+  {
+    index: "③",
+    name: "水上森林",
+    imageTone: "is-forest",
+    desc: "这一段特别有意思，路是修在水里的，树也是长在水里的。你可以踩着石墩在水面上走，脚边是清凉的溪水流过，两旁是茂密的喀斯特森林，像一脚闯进了绿野仙踪的世界。",
+  },
+  {
+    index: "④",
+    name: "鸳鸯湖",
+    imageTone: "is-green-blue",
+    desc: "这里是全程玩水的重头戏。湖面被树木的根系分割成无数条迷宫般的小水道，一定要去划船（推荐透明船），钻进那些只有船能过的狭窄水道，阳光透过树叶洒在水面上，光影美得不真实。",
+  },
+  {
+    index: "⑤",
+    name: "卧龙潭",
+    imageTone: "is-green",
+    desc: "路线的终点，也是颜值天花板。潭水蓝得像一块巨大的蓝宝石，平静得没有一丝波纹。如果时间赶得上，一定要体验这里的漂流，从高处滑下、穿过树林，刺激又凉快，是整趟行程的高潮。",
+  },
+];
+
+const routeStops = [
+  { name: "小七孔古桥", tag: "三百年石桥，景区名字的由来" },
+  { name: "68 级跌水瀑布 & 拉雅瀑布", tag: "层层叠叠的水，夏天的天然空调" },
+  { name: "水上森林", tag: "踩着石墩在水上走的喀斯特奇景" },
+  { name: "鸳鸯湖", tag: "划透明船钻水道，玩水重头戏" },
+  { name: "卧龙潭", tag: "蓝宝石般的潭水，可玩漂流收尾" },
+];
+
+const faq = ["一天玩得完吗", "带老人孩子怎么安排", "几月来最好看"];
+
+const showToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/detail.scss";
+</style>
+
diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/index.vue b/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
index 3a1b376..e69e6cc 100644
--- a/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
@@ -70,6 +70,16 @@ const longTextCardSnap = {
   footer: "点击查看完整攻略",
 }
 
+const longTextCardFullDoc = {
+  type: 'longTextCardFullDoc',
+  badge: "初游攻略",
+  badgeTone: "amber",
+  title: "第一次来小七孔，照着这条线走就对了",
+  summary: "第一次来，别犹豫，直接锁死「东门进、西门出」这条线…",
+  footer: "点击查看完整攻略",
+}
+
+
 const item = computed(() => {
   switch (props.componentName) {
     case 'longTextCard':
@@ -80,6 +90,8 @@ const item = computed(() => {
       return longTextCardRoute;
     case 'longTextCardScenicSpot':
       return longTextCardScenicSpot;
+    case 'longTextCardFullDoc':
+      return longTextCardFullDoc;
     default:
       return longTextCard;
   }
diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/styles/detail.scss b/src/pages/ChatModule/LongTextGuideCardPreview/styles/detail.scss
index 1764faa..76c91e0 100644
--- a/src/pages/ChatModule/LongTextGuideCardPreview/styles/detail.scss
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/styles/detail.scss
@@ -528,3 +528,185 @@
 .aigc-button {
   background: linear-gradient(135deg, #8b5cf6, #6366f1);
 }
+
+.overview-image-card {
+  display: flex;
+  height: 160px;
+  margin: 4px 0 16px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  color: #fff;
+  background: linear-gradient(135deg, #1d9e75, #0f6e56);
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 28px;
+  text-align: center;
+}
+
+.overview-image-card.is-green-blue {
+  background: linear-gradient(135deg, #1d9e75, #185fa5);
+}
+
+.overview-image-card.is-stone {
+  background: linear-gradient(135deg, #888780, #5f5e5a);
+}
+
+.overview-image-card.is-green {
+  background: linear-gradient(135deg, #1d9e75, #0f6e56);
+}
+
+.overview-image-card.is-forest {
+  background: linear-gradient(135deg, #639922, #3b6d11);
+}
+
+.overview-image-subtitle {
+  margin-top: 8px;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.overview-spots-wrap {
+  padding: 0 16px;
+}
+
+.overview-spot-card {
+  display: flex;
+  padding: 12px 14px;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid #d8ebe0;
+  border-radius: 14px;
+  background: #f1f8f4;
+}
+
+.overview-spot-index {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  color: #fff;
+  background: #0f6e56;
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 22px;
+  text-align: center;
+}
+
+.overview-spot-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.overview-spot-name {
+  color: #1e293b;
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 20px;
+}
+
+.overview-spot-tag {
+  margin-top: 2px;
+  color: #5f8a76;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+}
+
+.overview-spot-arrow {
+  padding: 3px 0;
+  color: #5dcaa5;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 18px;
+  text-align: center;
+}
+
+.overview-combo-card {
+  margin: 0 16px 12px;
+  overflow: hidden;
+  border: 1px solid #fde68a;
+  border-radius: 18px;
+  background: #fff;
+}
+
+.overview-combo-body {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+}
+
+.overview-combo-cover {
+  display: flex;
+  width: 78px;
+  height: 78px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  color: #fff;
+  background: linear-gradient(135deg, #1d9e75, #185fa5);
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 16px;
+  text-align: center;
+}
+
+.overview-combo-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.overview-combo-name {
+  color: #1e293b;
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 20px;
+}
+
+.overview-combo-desc {
+  margin: 3px 0 6px;
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 17px;
+}
+
+.overview-combo-price {
+  color: #f43f5e;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 28px;
+}
+
+.overview-combo-currency {
+  font-size: 12px;
+}
+
+.overview-combo-original {
+  margin-left: 4px;
+  color: #cbd5e1;
+  font-size: 11px;
+  font-weight: 700;
+  text-decoration: line-through;
+}
+
+.overview-combo-button {
+  width: 100%;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: #451a03;
+  background: #fbbf24;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 40px;
+}
+
+.overview-combo-button::after {
+  border: 0;
+}
diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/长文本收纳组件_5类演示.html b/src/pages/ChatModule/LongTextGuideCardPreview/长文本收纳组件_5类演示.html
new file mode 100644
index 0000000..17fb509
--- /dev/null
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/长文本收纳组件_5类演示.html
@@ -0,0 +1,775 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>长文本收纳组件 · 4 类演示</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<style>
+  body { background: #E5EFE9; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; padding: 24px 16px; }
+  @keyframes fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
+  .animate-fade-in-up { animation: fade-in-up 0.4s ease both; }
+
+  /* ── page slide ── */
+  .c0-screen { position: relative; overflow: hidden; }
+  .c0-page { position: absolute; top:0; left:0; width:100%; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }
+  .c0-page.p1 { transform: translateX(0); }
+  .c0-page.p2 { transform: translateX(100%); }
+  .c0-page.p1.out { transform: translateX(-100%); }
+  .c0-page.p2.in  { transform: translateX(0); }
+
+  /* ── p1 summary card ── */
+  .p1-card { background:#fff; border-radius:24px; border:1px solid rgba(0,0,0,0.06); overflow:hidden; cursor:pointer; transition:transform 0.15s; -webkit-tap-highlight-color:transparent; }
+  .p1-card:active { transform:scale(0.98); }
+
+  /* ── p2 wrap ── */
+  .p2-wrap { background:#fff; border-radius:24px; border:1px solid rgba(0,0,0,0.06); overflow:hidden; }
+  .p2-header { display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:0.5px solid rgba(0,0,0,0.06); }
+  .back-btn { width:28px; height:28px; border-radius:50%; background:#f2f2f2; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; line-height:1; color:#555; transition:background 0.15s; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
+  .back-btn:active { background:#ddd; }
+
+  /* ── rich body ── */
+  .rich-body { padding:18px 18px 4px; }
+  .rich-body p { font-size:13px; color:#475569; line-height:1.85; font-weight:500; margin-bottom:14px; }
+  .rich-body strong { color:#065f46; background:#ecfdf5; padding:1px 5px; border-radius:4px; font-weight:800; }
+  .rich-body h5 { font-size:13px; font-weight:800; color:#1e293b; margin:18px 0 8px; }
+  .rich-img { width:100%; border-radius:14px; object-fit:cover; margin:4px 0 16px; display:block; height:160px; }
+  .tip-block { background:#f0fdf4; border-radius:12px; border-left:3px solid #34d399; padding:10px 14px; margin:4px 0 16px; font-size:12px; color:#065f46; font-weight:700; line-height:1.7; }
+  .tip-block.warn { background:#fffbeb; border-left-color:#fbbf24; color:#92400e; }
+
+  /* ── 双栏对照卡（上下湖对比专用）── */
+  .vs-wrap { display:flex; gap:8px; margin:6px 0 16px; }
+  .vs-col { flex:1; background:#f8fafc; border:1px solid #e8edf2; border-radius:12px; padding:11px 12px; }
+  .vs-col .vs-head { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:900; color:#1e293b; margin-bottom:8px; padding-bottom:7px; border-bottom:1px dashed #d8e0e8; }
+  .vs-col .vs-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
+  .vs-col .vs-row { font-size:11px; font-weight:600; color:#64748b; line-height:1.5; margin-bottom:5px; }
+  .vs-col .vs-row:last-child { margin-bottom:0; }
+  .vs-col .vs-row b { color:#334155; font-weight:800; }
+  .vs-col .vs-boat { font-size:13px; font-weight:900; margin-bottom:7px; }
+
+  /* ── action zone shell ── */
+  .action-zone { border-top:0.5px solid rgba(0,0,0,0.06); margin-top:4px; }
+  .action-zone-label { font-size:10px; font-weight:800; color:#94a3b8; letter-spacing:0.6px; text-transform:uppercase; padding:12px 18px 8px; }
+  .action-zone-bottom { height:20px; }
+
+  /* ── C1 景点详情 mini ── */
+  .c1-mini { margin:0 16px; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.04); border:1px solid #f1f5f9; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 0.15s; }
+  .c1-mini:active { transform:scale(0.98); }
+  .c1-mini .c1-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,0.9); color:#059669; font-size:10px; font-weight:900; padding:4px 10px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.08); margin:14px 0 0 14px; width:fit-content; }
+  .c1-mini .c1-body { padding:10px 20px 16px; }
+  .c1-mini .c1-title { font-size:19px; font-weight:900; color:#1e293b; margin-bottom:10px; letter-spacing:-0.3px; }
+  .c1-mini .c1-desc { background:linear-gradient(to right, #ecfdf5, rgba(240,253,250,0.5)); border-radius:12px; padding:10px 12px; margin-bottom:12px; border:1px solid rgba(167,243,208,0.5); display:flex; align-items:flex-start; gap:8px; }
+  .c1-mini .c1-desc p { font-size:12px; font-weight:700; color:#065f46; line-height:1.55; margin:0; }
+  .c1-mini .c1-btn { width:100%; background:#0f172a; color:#fff; border:none; border-radius:14px; padding:12px; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 0.15s; }
+  .c1-mini .c1-btn:active { transform:scale(0.97); }
+
+  /* ── C8 地图点位 mini ── */
+  .c8-mini { margin:0 16px; border-radius:16px; overflow:hidden; border:0.5px solid rgba(0,0,0,0.07); }
+  .c8-mini .c8-img-wrap { position:relative; }
+  .c8-mini .c8-img { width:100%; height:160px; object-fit:cover; display:block; }
+  .c8-mini .c8-dest-tag { position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,0.4); border-radius:10px; padding:4px 10px 4px 8px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:900; color:#fff; }
+  .c8-mini .c8-bar { background:#fff; padding:12px 14px; display:flex; align-items:center; gap:10px; }
+  .c8-mini .c8-info { flex:1; min-width:0; }
+  .c8-mini .c8-name { font-size:15px; font-weight:900; color:#1e293b; }
+  .c8-mini .c8-dist { font-size:11px; color:#94a3b8; font-weight:700; margin-top:2px; }
+  .c8-mini .c8-btn { background:#0f172a; color:#fff; border:none; border-radius:14px; padding:10px 20px; font-size:13px; font-weight:900; display:flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; transition:transform 0.15s; }
+  .c8-mini .c8-btn:active { transform:scale(0.96); }
+
+  /* ── C9 商品卡轮播 ── */
+  .c9-scroll { display:flex; gap:10px; overflow-x:auto; padding:0 16px; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
+  .c9-scroll::-webkit-scrollbar { display:none; }
+  .c9-card { background:#fff; border-radius:20px; border:1px solid #f1f5f9; overflow:hidden; flex-shrink:0; width:220px; scroll-snap-align:start; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
+  .c9-card .c9-thumb { width:100%; height:110px; object-fit:cover; display:block; }
+  .c9-card .c9-body { padding:10px 12px 12px; }
+  .c9-card .c9-name { font-size:13px; font-weight:900; color:#1e293b; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .c9-card .c9-price-row { display:flex; align-items:baseline; gap:4px; margin-bottom:8px; }
+  .c9-card .c9-price { font-size:20px; font-weight:900; color:#f43f5e; letter-spacing:-0.5px; }
+  .c9-card .c9-currency { font-size:12px; font-weight:900; color:#f43f5e; }
+  .c9-card .c9-original { font-size:11px; font-weight:700; color:#cbd5e1; text-decoration:line-through; }
+  .c9-card .c9-btn { width:100%; background:#fbbf24; color:#451a03; border:none; border-radius:12px; padding:8px; font-size:12px; font-weight:900; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 0.15s; }
+  .c9-card .c9-btn:active { transform:scale(0.97); }
+  .c9-card .c9-sale-tag { display:inline-block; background:#fef2f2; color:#f43f5e; font-size:9px; font-weight:900; padding:2px 6px; border-radius:6px; margin-bottom:4px; }
+
+  /* ── AIGC 合影 mini ── */
+  .aigc-mini { margin:0 16px; border-radius:16px; overflow:hidden; border:0.5px solid rgba(0,0,0,0.07); background:#fff; }
+  .aigc-mini .aigc-img-wrap { position:relative; }
+  .aigc-mini .aigc-img { width:100%; height:160px; object-fit:cover; display:block; }
+  .aigc-mini .aigc-badge { position:absolute; top:10px; left:10px; background:linear-gradient(135deg,#8b5cf6,#6366f1); border-radius:10px; padding:4px 10px 4px 8px; display:flex; align-items:center; gap:5px; font-size:10px; font-weight:900; color:#fff; box-shadow:0 2px 8px rgba(99,102,241,0.4); }
+  .aigc-mini .aigc-body { padding:12px 14px 14px; }
+  .aigc-mini .aigc-name { font-size:15px; font-weight:900; color:#1e293b; margin-bottom:5px; }
+  .aigc-mini .aigc-desc { font-size:11.5px; font-weight:700; color:#64748b; line-height:1.6; margin-bottom:12px; }
+  .aigc-mini .aigc-btn { width:100%; background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; border:none; border-radius:14px; padding:11px; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 0.15s; }
+  .aigc-mini .aigc-btn:active { transform:scale(0.97); }
+
+  /* ── C4 路线步骤 mini ── */
+  .c4-mini { margin:0 16px; background:#fff; border-radius:16px; border:0.5px solid rgba(0,0,0,0.07); padding:14px 16px; }
+  .c4-mini .c4-head { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:900; color:#1e293b; margin-bottom:12px; }
+  .c4-step { display:flex; gap:10px; margin-bottom:10px; }
+  .c4-step:last-child { margin-bottom:0; }
+  .c4-step .c4-dot { width:18px; height:18px; border-radius:50%; background:#8b5cf6; color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .c4-step .c4-line { flex:1; }
+  .c4-step .c4-act { font-size:12px; font-weight:800; color:#334155; line-height:1.5; }
+  .c4-step .c4-meta { font-size:10.5px; color:#94a3b8; font-weight:700; margin-top:1px; }
+
+  /* ── C5 设施位置 mini ── */
+  .c5-mini { margin:10px 16px 0; background:#fff; border-radius:16px; border:0.5px solid rgba(0,0,0,0.07); padding:12px 16px; }
+  .c5-mini .c5-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:900; color:#1e293b; margin-bottom:8px; }
+  .c5-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:11.5px; font-weight:700; color:#475569; }
+  .c5-row .c5-ic { width:16px; text-align:center; }
+
+  /* ── C12 FAQ mini ── */
+  .c12-mini { margin:10px 16px 0; }
+  .c12-chip { display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:8px 13px; font-size:11.5px; font-weight:800; color:#475569; margin:0 6px 8px 0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all 0.15s; }
+  .c12-chip:active { transform:scale(0.96); background:#f1f5f9; }
+  .c12-chip svg { color:#10b981; }
+
+  /* lightbox */
+  .lightbox { position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
+  .lightbox.open { opacity:1; pointer-events:all; }
+  .lightbox img { max-width:100%; max-height:100%; border-radius:4px; transform:scale(0.94); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1); }
+  .lightbox.open img { transform:scale(1); }
+  .lb-close { position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; cursor:pointer; }
+
+  /* 跳转链路浮层 */
+  .flow-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px); background:#0f172a; color:#fff; font-size:12px; font-weight:700; padding:11px 18px; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); max-width:340px; line-height:1.6; z-index:888; }
+  .flow-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
+  .flow-toast .ft-label { color:#fbbf24; font-weight:900; margin-right:4px; }
+</style>
+</head>
+<body>
+<div class="max-w-[390px] mx-auto">
+
+  <!-- ════ 标题区 ════ -->
+  <div class="flex flex-col items-start gap-3 w-full mb-6 animate-fade-in-up">
+    <div class="flex items-center gap-2 px-1">
+      <div class="w-8 h-8 rounded-full border-[1.5px] border-emerald-100 shadow-sm overflow-hidden shrink-0 bg-emerald-50 flex items-center justify-center text-[15px]">🐯</div>
+      <span class="text-[12px] font-black text-slate-800">小七 · 荔波小七孔 AI 伴游</span>
+    </div>
+    <div class="ml-1">
+      <span class="bg-slate-900 text-white text-[9px] font-black px-2 py-1 rounded-md tracking-widest uppercase mr-2">演示</span>
+      <span class="text-[12px] font-black text-slate-800">长文本收纳组件 · 4 类</span>
+    </div>
+    <p class="ml-1 text-[11px] font-bold text-slate-400 leading-relaxed">
+      点击卡片 = 折叠态展开为完整内容。<br>
+      展开后下半部分是「行动条」，挂载真实可点击的组件。
+    </p>
+  </div>
+
+  <!-- ════ 屏幕 ════ -->
+  <div class="c0-screen w-full animate-fade-in-up" id="screen">
+
+    <!-- ─── p1 折叠态卡片列表 ─── -->
+    <div class="c0-page p1 w-full" id="p1">
+
+      <!-- 攻略型 -->
+      <div class="p1-card mb-3" onclick="goDetail('guide')">
+        <div class="p-5">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-100">漂流攻略</span>
+            <span class="text-[9px] font-bold text-slate-300">长文本-攻略组件</span>
+          </div>
+          <h4 class="text-[14px] font-black text-slate-800 mb-1.5">下水之前，先听小七唠两句</h4>
+          <p class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id="sum-guide"></p>
+        </div>
+        <div class="px-5 pb-4 flex items-center justify-between">
+          <span class="text-[11px] text-slate-300 font-bold">点击查看完整攻略</span>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+
+      <!-- 景点型 -->
+      <div class="p1-card mb-3" onclick="goDetail('poi')">
+        <div class="p-5">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-[10px] font-black text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">景点故事</span>
+            <span class="text-[9px] font-bold text-slate-300">长文本-景点组件</span>
+          </div>
+          <h4 class="text-[14px] font-black text-slate-800 mb-1.5">小七孔古桥 · 走了三百年的石拱</h4>
+          <p class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id="sum-poi"></p>
+        </div>
+        <div class="px-5 pb-4 flex items-center justify-between">
+          <span class="text-[11px] text-slate-300 font-bold">点击查看完整介绍</span>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+
+      <!-- 路线型 -->
+      <div class="p1-card mb-3" onclick="goDetail('nav')">
+        <div class="p-5">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-[10px] font-black text-violet-600 bg-violet-50 px-2 py-0.5 rounded-full border border-violet-100">路线指引</span>
+            <span class="text-[9px] font-bold text-slate-300">长文本-路线组件</span>
+          </div>
+          <h4 class="text-[14px] font-black text-slate-800 mb-1.5">漂完卧龙潭，顺道去鸳鸯湖</h4>
+          <p class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id="sum-nav"></p>
+        </div>
+        <div class="px-5 pb-4 flex items-center justify-between">
+          <span class="text-[11px] text-slate-300 font-bold">点击查看完整路线</span>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+
+      <!-- 拍照型 -->
+      <div class="p1-card mb-3" onclick="goDetail('photo')">
+        <div class="p-5">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-[10px] font-black text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100">拍照攻略</span>
+            <span class="text-[9px] font-bold text-slate-300">长文本-拍照组件</span>
+          </div>
+          <h4 class="text-[14px] font-black text-slate-800 mb-1.5">鸳鸯湖玻璃船，这样拍才不亏</h4>
+          <p class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id="sum-photo"></p>
+        </div>
+        <div class="px-5 pb-4 flex items-center justify-between">
+          <span class="text-[11px] text-slate-300 font-bold">点击查看完整攻略</span>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+
+      <!-- 攻略型·发散模式 -->
+      <div class="p1-card" onclick="goDetail('overview')">
+        <div class="p-5">
+          <div class="flex items-center gap-2 mb-2">
+            <span class="text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-100">初游攻略</span>
+            <span class="text-[9px] font-bold text-slate-300">长文本-攻略组件 · 发散模式</span>
+          </div>
+          <h4 class="text-[14px] font-black text-slate-800 mb-1.5">第一次来小七孔，这篇先看</h4>
+          <p class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2" id="sum-overview"></p>
+        </div>
+        <div class="px-5 pb-4 flex items-center justify-between">
+          <span class="text-[11px] text-slate-300 font-bold">点击查看完整攻略</span>
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- ─── p2 展开态 ─── -->
+    <div class="c0-page p2 w-full" id="p2">
+      <div class="p2-wrap">
+        <div class="p2-header">
+          <div class="back-btn" onclick="goBack()">‹</div>
+          <span class="text-[14px] font-black text-slate-800" id="p2-title"></span>
+          <span class="text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto border" id="p2-badge"></span>
+        </div>
+        <div class="rich-body" id="rich-body"></div>
+        <div class="action-zone" id="action-zone"></div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<!-- lightbox -->
+<div class="lightbox" id="lightbox" onclick="closeLB()">
+  <div class="lb-close" onclick="closeLB()">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+  </div>
+  <img id="lb-img" src="" alt="大图" onclick="event.stopPropagation()">
+</div>
+
+<!-- 跳转链路提示 -->
+<div class="flow-toast" id="flowToast"></div>
+
+<script>
+/* ════════════════════════════════
+   ACTION ZONE BUILDERS
+   ════════════════════════════════ */
+
+/* 景点详情组件 */
+function buildC1(poi) {
+  return `
+    <div class="action-zone-label">查看景点详情</div>
+    <div class="c1-mini" onclick="flow('景点详情组件','跳转 H5 景点详情页 ${poi.url}')">
+      <div class="c1-tag">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
+        ${poi.tag}
+      </div>
+      <div class="c1-body">
+        <div class="c1-title">${poi.name}</div>
+        <div class="c1-desc"><p>${poi.desc}</p></div>
+        <button class="c1-btn">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
+          带我去
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+/* 地图点位组件 */
+function buildC8(dest) {
+  return `
+    <div class="action-zone-label">带我去这里</div>
+    <div class="c8-mini">
+      <div class="c8-img-wrap">
+        <img class="c8-img" src="${dest.img}" alt="${dest.name}">
+        <div class="c8-dest-tag">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
+          目的地
+        </div>
+      </div>
+      <div class="c8-bar">
+        <div class="c8-info">
+          <div class="c8-name">前往${dest.name}</div>
+          <div class="c8-dist">${dest.dist}</div>
+        </div>
+        <button class="c8-btn" onclick="flow('地图点位组件','调起地图 App 导航 · ${dest.coord}')">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
+          导航
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+/* 商品组件 */
+function buildC9(products) {
+  const cards = products.map(p => `
+    <div class="c9-card">
+      <img class="c9-thumb" src="${p.img}" alt="${p.name}">
+      <div class="c9-body">
+        ${p.saleTag ? `<div class="c9-sale-tag">${p.saleTag}</div>` : ''}
+        <div class="c9-name">${p.name}</div>
+        <div class="c9-price-row">
+          <span class="c9-currency">¥</span>
+          <span class="c9-price">${p.price}</span>
+          ${p.original ? `<span class="c9-original">¥${p.original}</span>` : ''}
+        </div>
+        <button class="c9-btn" onclick="flow('商品组件','跳转商品详情页 · 下单 ${p.name}')">立即购买</button>
+      </div>
+    </div>
+  `).join('');
+  return `<div class="action-zone-label">相关票务</div><div class="c9-scroll">${cards}</div>`;
+}
+
+/* 路线组件 */
+function buildC4(route) {
+  const steps = route.steps.map((s,i) => `
+    <div class="c4-step">
+      <div class="c4-dot">${i+1}</div>
+      <div class="c4-line">
+        <div class="c4-act">${s.act}</div>
+        <div class="c4-meta">${s.meta}</div>
+      </div>
+    </div>
+  `).join('');
+  return `
+    <div class="action-zone-label">完整路线</div>
+    <div class="c4-mini">
+      <div class="c4-head">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        ${route.title}
+      </div>
+      ${steps}
+    </div>
+  `;
+}
+
+/* 设施位置组件 */
+function buildC5(facility) {
+  const rows = facility.items.map(f => `
+    <div class="c5-row"><span class="c5-ic">${f.ic}</span><span>${f.txt}</span></div>
+  `).join('');
+  return `
+    <div class="c5-mini">
+      <div class="c5-head">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
+        沿途设施
+      </div>
+      ${rows}
+    </div>
+  `;
+}
+
+/* FAQ组件 */
+function buildC12(faq) {
+  const chips = faq.map(q => `
+    <div class="c12-chip" onclick="flow('FAQ组件','把追问发回 AI 伴游区 · 「${q}」')">
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+      ${q}
+    </div>
+  `).join('');
+  return `<div class="action-zone-label">继续追问</div><div class="c12-mini">${chips}</div>`;
+}
+
+/* AIGC 合影组件 */
+function buildAIGC(a) {
+  return `
+    <div class="action-zone-label">AIGC 合影</div>
+    <div class="aigc-mini">
+      <div class="aigc-img-wrap">
+        <img class="aigc-img" src="${a.img}" alt="${a.name}">
+        <div class="aigc-badge">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>
+          AI 生成
+        </div>
+      </div>
+      <div class="aigc-body">
+        <div class="aigc-name">${a.name}</div>
+        <div class="aigc-desc">${a.desc}</div>
+        <button class="aigc-btn" onclick="flow('AIGC 合影','跳转 AIGC 合影功能页 · 生成专属合影')">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
+          生成我的合影
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+/* ════════════════════════════════
+   CONTENT DATA — 4 类组件演示数据
+   ════════════════════════════════ */
+const contents = {
+
+  /* ── 攻略型 · 卧龙潭漂流 ── */
+  guide: {
+    title: '下水之前，先听小七唠两句',
+    badge: '漂流攻略',
+    badgeColor: 'text-amber-600 bg-amber-50 border-amber-100',
+    /* content_summary = guide_conclusion 前 30 字 */
+    summary: '卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…',
+    body: `
+      <p>卧龙潭的水，是那种一眼就让人想跳进去的绿。<strong>皮筏艇漂流</strong>全程约两公里，三段激流接连而下，水花会结结实实拍在脸上——这趟值得冲，但晕水的朋友得先掂量掂量。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%8D%A7%E9%BE%99%E6%BD%AD%E6%BC%82%E6%B5%81%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="卧龙潭漂流">
+      <h5>下水前，这几样别落下</h5>
+      <div class="tip-block">
+        ① 换洗衣服塞进防水袋，手机一定要封好<br>
+        ② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br>
+        ③ 贵重东西先存好寄存柜，别揣身上
+      </div>
+      <p>小七的私心建议：挑 <strong>上午九点到十一点</strong> 这一场。水量足、太阳还没毒,漂下来浑身舒坦,不会被晒得发昏。</p>
+      <h5>这些坑，提前绕开</h5>
+      <div class="tip-block warn">
+        雨后水量猛涨可能临时停漂,出发前先问一句开放状态;现场拖鞋不补租,光脚更危险。
+      </div>
+    `,
+    products: [
+      { name:'卧龙潭皮筏艇漂流', img:'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%8D%A7%E9%BE%99%E6%BD%AD%E6%BC%82%E6%B5%81%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E', price:'50', original:null, saleTag:null },
+      { name:'鸳鸯湖玻璃船', img:'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E', price:'50', original:null, saleTag:'漂完顺路' }
+    ],
+    faq: ['几岁的孩子能玩','会不会全身湿透','漂完去哪儿歇脚']
+  },
+
+  /* ── 攻略型·发散模式 · 第一次来小七孔 ── */
+  overview: {
+    title: '第一次来小七孔，照着这条线走就对了',
+    badge: '初游攻略',
+    badgeColor: 'text-amber-600 bg-amber-50 border-amber-100',
+    /* content_summary = guide_conclusion 前 30 字 */
+    summary: '第一次来，别犹豫，直接锁死「东门进、西门出」这条线…',
+    body: `
+      <p>第一次来小七孔，别犹豫，直接锁死 <strong>东门进、西门出</strong> 这条线。</p>
+      <p>这是景区最完整的打法——全程顺着响水河往下游走，不用爬坡回头，把最精华的水景一次看个够。从古朴的石桥热身，一路走到碧蓝的卧龙潭收尾，节奏刚刚好。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%85%A8%E6%99%AF%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="小七孔全景">
+      <h5>这几个地方不能错过</h5>
+      <p>这条线上景点很密，但下面这几个是真正的"灵魂"，到了千万别急着赶路。</p>
+
+      <p><strong>① 小七孔古桥</strong>　这是整个景区名字的由来，也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上，七孔拱桥倒映在碧绿的水里，怎么拍都像画。记得低头看看桥下的水——平时碧蓝翠绿，汛期还能看到"半河清水半河浊水"的奇观。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23888780%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235f5e5a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%8F%A4%E6%A1%A5%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="小七孔古桥">
+
+      <p><strong>② 68 级跌水瀑布 & 拉雅瀑布</strong>　过了古桥没多久，你会听到水声越来越大。这一段沿着河谷走，68 级瀑布层层叠叠、一级一级往下淌；拉雅瀑布更直接，几乎是从路边喷涌而出，水雾扑面而来。夏天走这段就像开了天然空调，体感一下凉好几度。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E68%E7%BA%A7%E8%B7%8C%E6%B0%B4%E7%80%91%E5%B8%83%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="68级跌水瀑布">
+
+      <p><strong>③ 水上森林</strong>　这一段特别有意思——路是修在水里的，树也是长在水里的。你可以踩着石墩在水面上走，脚边是清凉的溪水流过，两旁是茂密的喀斯特森林，像一脚闯进了绿野仙踪的世界。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23639922%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233b6d11%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E6%B0%B4%E4%B8%8A%E6%A3%AE%E6%9E%97%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="水上森林">
+
+      <p><strong>④ 鸳鸯湖</strong>　这里是全程玩水的重头戏。湖面被树木的根系分割成无数条迷宫般的小水道，一定要去划船（推荐透明船），钻进那些只有船能过的狭窄水道，阳光透过树叶洒在水面上，光影美得不真实。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="鸳鸯湖">
+
+      <p><strong>⑤ 卧龙潭</strong>　路线的终点，也是颜值天花板。潭水蓝得像一块巨大的蓝宝石，平静得没有一丝波纹。如果时间赶得上，一定要体验这里的漂流——从高处滑下、穿过树林，刺激又凉快，是整趟行程的高潮。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6e56%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%8D%A7%E9%BE%99%E6%BD%AD%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="卧龙潭">
+
+      <h5>一天大概这样分</h5>
+      <div class="tip-block">
+        上午（约 3 小时）：东门进，先走古桥、看跌水与拉雅瀑布<br>
+        中午（约 1 小时）：在驿站歇脚吃饭，避开正午晒<br>
+        下午（约 3 小时）：水上森林、鸳鸯湖划船、卧龙潭收尾<br>
+        机动（约 1 小时）：留点空给拍照、发呆、临时想多待的地方<br>
+        全程顺水而下约一天，体力一般也扛得住
+      </div>
+      <h5>只有半天怎么办</h5>
+      <div class="tip-block">
+        时间紧就走精华：古桥 + 水上森林 + 卧龙潭，约 3-4 小时<br>
+        舍掉的部分别可惜，留个念想，下次再来
+      </div>
+      <h5>小七的话</h5>
+      <p>第一次来，不用追着打卡。挑两三个最想看的地方多待一会儿，比每个点都匆匆走过要值得多。具体某个点怎么玩，点开对应的攻略，我再细细跟你说。</p>
+    `,
+    spotsRoute: {
+      title: '必看景点 · 按游玩顺序',
+      stops: [
+        { name:'小七孔古桥',            tag:'三百年石桥，景区名字的由来' },
+        { name:'68 级跌水瀑布 & 拉雅瀑布', tag:'层层叠叠的水，夏天的天然空调' },
+        { name:'水上森林',              tag:'踩着石墩在水上走的喀斯特奇景' },
+        { name:'鸳鸯湖',                tag:'划透明船钻水道，玩水重头戏' },
+        { name:'卧龙潭',                tag:'蓝宝石般的潭水，可玩漂流收尾' }
+      ]
+    },
+    combo: { name:'小七孔畅玩套票', img:'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231d9e75%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%85%A8%E6%99%AF%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E', price:'130', original:'175', desc:'门票 + 观光车 + 2 项体验，第一次来最省心' },
+    faq: ['一天玩得完吗','带老人孩子怎么安排','几月来最好看']
+  },
+
+  /* ── 景点型 · 小七孔古桥 ── */
+  poi: {
+    title: '小七孔古桥 · 走了三百年的石拱',
+    badge: '景点故事',
+    badgeColor: 'text-emerald-700 bg-emerald-50 border-emerald-100',
+    /* content_summary = poi_definition 前 30 字 */
+    summary: '小七孔古桥是一座三百岁的七孔石桥,小七孔的名字就从这儿来…',
+    body: `
+      <p>小七孔古桥静静卧在响水河上,七个石拱挨着排开,桥身爬满青苔藤蔓。它建于清道光年间,<strong>三百多岁</strong>了——整个景区的名字,就是从这座桥来的。</p>
+      <img class="rich-img" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23888780%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235f5e5a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E5%B0%8F%E4%B8%83%E5%AD%94%E5%8F%A4%E6%A1%A5%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E" alt="小七孔古桥">
+      <h5>站在这儿,看什么</h5>
+      <div class="tip-block">
+        ① 桥拱与水面倒影合成完整的圆,这是古桥最经典的一眼<br>
+        ② 桥身的青苔和藤蔓,是三百年时间慢慢长出来的<br>
+        ③ 桥下水浅处清澈见底,能看见鹅卵石和游鱼
+      </div>
+      <p>小七的建议:别急着走过去。先在桥侧站一会儿——古桥不是用来"打卡"的,是用来 <strong>慢慢看</strong> 的。光线斜下来的时候,石桥、绿水、倒影会一起把你框进画里。</p>
+      <h5>顺带一提</h5>
+      <div class="tip-block warn">
+        桥面是三百年的老石头,雨后偏滑,慢点走;别翻护栏到桥下浅滩,既危险也伤桥。
+      </div>
+    `,
+    poi: {
+      tag:'核心地标', name:'小七孔古桥',
+      desc:'清道光年间建的七孔石桥,响水河上的镇景之宝,小七孔之名由此而来,桥畔可观涵碧潭~',
+      url:'poi_xiaoqikong_bridge.html'
+    },
+    faq: ['古桥有什么传说','最佳观赏时间','旁边还有什么景点']
+  },
+
+  /* ── 路线型 · 卧龙潭 → 鸳鸯湖 ── */
+  nav: {
+    title: '漂完卧龙潭，顺道去鸳鸯湖',
+    badge: '路线指引',
+    badgeColor: 'text-violet-600 bg-violet-50 border-violet-100',
+    /* content_summary = route_summary 前 30 字 */
+    summary: '卧龙潭到鸳鸯湖,坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…',
+    body: `
+      <p>漂完卧龙潭,人多半是湿着、累着的——这时候去鸳鸯湖刚刚好。坐观光车顺路不绕,二十分钟左右就到。</p>
+      <h5>鸳鸯湖分上下湖,先选好玩哪个</h5>
+      <p style="margin-bottom:8px;">鸳鸯湖不是一个码头,它分成上下两个湖,玩的船不一样,<strong>下车站点也不同</strong>——上车前先选好。</p>
+      <div class="vs-wrap">
+        <div class="vs-col">
+          <div class="vs-head"><span class="vs-dot" style="background:#3b82f6"></span>上湖 · 鸳湖</div>
+          <div class="vs-boat" style="color:#2563eb">玻璃船 ¥50</div>
+          <div class="vs-row">透明船底,<b>适合拍照</b></div>
+          <div class="vs-row">带老人孩子图轻松</div>
+          <div class="vs-row">在 <b>鸳鸯湖上湖站</b> 下车</div>
+        </div>
+        <div class="vs-col">
+          <div class="vs-head"><span class="vs-dot" style="background:#10b981"></span>下湖 · 鸯湖</div>
+          <div class="vs-boat" style="color:#059669">铁皮船 ¥30</div>
+          <div class="vs-row">自己划,1-6 人一船</div>
+          <div class="vs-row"><b>水上迷宫</b>穿林,更有乐趣</div>
+          <div class="vs-row">在 <b>鸳鸯湖站</b> 下车,再走 4 分钟</div>
+        </div>
+      </div>
+      <p>时间够的话两个湖都能玩,中间有观光车接驳。</p>
+      <h5>路上留个心</h5>
+      <div class="tip-block warn">
+        ① 旺季观光车要排队,上午人最多<br>
+        ② 下湖枯水期水位低,水上迷宫游线可能关闭,购票前先问一句<br>
+        ③ 雨天石板路偏滑,带孩子老人慢一点
+      </div>
+    `,
+    route: {
+      title: '卧龙潭 → 鸳鸯湖 · 看准上下湖',
+      steps: [
+        { act:'卧龙潭码头 → 卧龙潭站', meta:'步行约 5 分钟 · 认准观光车乘车点' },
+        { act:'上车前先认准方向：去上湖 or 下湖', meta:'两个湖站点不同,排队通道也不同,别走错' },
+        { act:'A·去上湖玩玻璃船 → 鸳鸯湖上湖站下车', meta:'车程约 6 分钟 · 玻璃船 ¥50/人' },
+        { act:'B·去下湖玩铁皮船 → 鸳鸯湖站下车', meta:'车程约 12 分钟 · 下车再步行 4 分钟 · 铁皮船 ¥30/人' }
+      ]
+    },
+    facility: {
+      items: [
+        { ic:'🚻', txt:'卧龙潭站 · 洗手间 + 换洗寄存点' },
+        { ic:'🍦', txt:'鸳鸯湖上湖 · 美食驿站(文创雪糕)+ 休息亭' },
+        { ic:'🍜', txt:'鸳鸯湖站 · 美食驿站 + 充电宝租赁' },
+        { ic:'🚻', txt:'下湖卫生间在景点处,上湖卫生间在售票处前 150m' }
+      ]
+    },
+    faq: ['上湖下湖哪个好玩','玻璃船和铁皮船怎么选','两个湖都玩来得及吗']
+  },
+
+  /* ── 拍照型 · 鸳鸯湖玻璃船 ── */
+  photo: {
+    title: '鸳鸯湖玻璃船，这样拍才不亏',
+    badge: '拍照攻略',
+    badgeColor: 'text-blue-600 bg-blue-50 border-blue-100',
+    /* content_summary = photo_conclusion 前 30 字 */
+    summary: '玻璃船拍照,关键是拍水下那抹通透的绿,顺光时段最出片…',
+    body: `
+      <p>鸳鸯湖的玻璃船,船底是透明的,水下世界看得清清楚楚。拍照的关键就一句话:<strong>别只顾着拍人,把水下那抹通透的绿一起收进来。</strong></p>
+      <h5>三个不会错的机位</h5>
+      <div class="tip-block">
+        ① 蹲低,贴着透明船底拍,水草和光斑会铺满整个画面<br>
+        ② 船头回拍人物,背景是大片湖光,人物站三分之一处<br>
+        ③ 把手伸进光里,拍水面波纹和指尖,是很灵的细节
+      </div>
+      <p>时间上,挑 <strong>上午十点到下午两点</strong> 的顺光时段。阳光直直照进水里,那种绿才透得出来——阴天和傍晚,水色会闷,差很多。</p>
+      <h5>手机党看这里</h5>
+      <div class="tip-block">
+        手机开 0.5x 广角,水面和船一起进画;隔着玻璃拍记得擦干净船底;逆光时手动点一下水面降曝光。
+      </div>
+    `,
+    img: {
+      thumb:'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E',
+      full:'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%20%C2%B7%20%E5%A4%A7%E5%9B%BE%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E',
+      title:'玻璃船底机位', sub:'蹲低贴船底 · 上午顺光'
+    },
+    aigc: {
+      name:'鸳鸯湖玻璃船 AIGC 合影',
+      img:'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23378add%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23185fa5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22url%28%23g%29%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22150%22%20font-family%3D%22sans-serif%22%20font-size%3D%2222%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%E9%B8%B3%E9%B8%AF%E6%B9%96%E7%8E%BB%E7%92%83%E8%88%B9%3C/text%3E%3Ctext%20x%3D%22200%22%20y%3D%22180%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22%20text-anchor%3D%22middle%22%3E%E6%BC%94%E7%A4%BA%E5%8D%A0%E4%BD%8D%E5%9B%BE%3C/text%3E%3C/svg%3E',
+      desc:'上船拍一张,小七帮你一键生成专属合影,不用求人也不用自拍杆'
+    },
+    faq: ['几点光线最好','船上能站起来拍吗','穿什么颜色上镜']
+  }
+};
+
+/* ════════════════════════════════
+   RENDER
+   ════════════════════════════════ */
+/* 折叠态摘要回填 */
+document.getElementById('sum-guide').textContent = contents.guide.summary;
+document.getElementById('sum-poi').textContent   = contents.poi.summary;
+document.getElementById('sum-nav').textContent   = contents.nav.summary;
+document.getElementById('sum-photo').textContent = contents.photo.summary;
+document.getElementById('sum-overview').textContent = contents.overview.summary;
+
+/* action_zone 按组件类型拼装 */
+function buildActionZone(d) {
+  let html = '';
+  if (d.spotsRoute) html += buildSpotsRoute(d.spotsRoute); // 必看景点·游玩顺序
+  if (d.poi)      html += buildC1(d.poi);       // 景点详情组件
+  if (d.route)    html += buildC4(d.route);     // 路线组件
+  if (d.facility) html += buildC5(d.facility);  // 设施位置组件
+  if (d.img)      html += buildC7(d.img);       // 图片组件
+  if (d.dest)     html += buildC8(d.dest);      // 地图点位组件
+  if (d.products) html += buildC9(d.products);  // 商品组件
+  if (d.combo)    html += buildCombo(d.combo);  // 套票组件
+  if (d.aigc)     html += buildAIGC(d.aigc);    // AIGC 合影
+  if (d.faq)      html += buildC12(d.faq);      // FAQ组件
+  html += '<div class="action-zone-bottom"></div>';
+  return html;
+}
+
+/* 必看景点 · 按游玩顺序（借鉴路线组件「完整路线」样式） */
+function buildSpotsRoute(sr) {
+  const stops = sr.stops.map((s,i) => {
+    const arrow = i < sr.stops.length - 1 ? `
+      <div style="display:flex;justify-content:center;padding:3px 0;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5dcaa5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="6 13 12 19 18 13"/></svg>
+      </div>` : '';
+    return `
+      <div style="display:flex;align-items:center;gap:12px;padding:12px 14px;background:#f1f8f4;border-radius:14px;border:0.5px solid #d8ebe0;cursor:pointer;" onclick="flow('列表组件','点进「${s.name}」景点详情')">
+        <div style="width:22px;height:22px;border-radius:50%;background:#0f6e56;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;">${i+1}</div>
+        <div style="flex:1;min-width:0;">
+          <div style="font-size:14px;font-weight:900;color:#1e293b;">${s.name}</div>
+          <div style="font-size:11px;font-weight:700;color:#5f8a76;margin-top:2px;">${s.tag}</div>
+        </div>
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#9fd9bf" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </div>
+      ${arrow}`;
+  }).join('');
+  return `
+    <div class="action-zone-label">${sr.title}</div>
+    <div style="padding:0 16px;">${stops}</div>
+  `;
+}
+
+/* 套票组件 */
+function buildCombo(c) {
+  return `
+    <div class="action-zone-label">套票推荐</div>
+    <div style="margin:0 16px;background:#fff;border-radius:18px;border:1px solid #fde68a;overflow:hidden;">
+      <div style="display:flex;gap:12px;padding:12px;">
+        <img src="${c.img}" alt="${c.name}" style="width:78px;height:78px;border-radius:12px;object-fit:cover;flex-shrink:0;">
+        <div style="flex:1;min-width:0;">
+          <div style="font-size:14px;font-weight:900;color:#1e293b;">${c.name}</div>
+          <div style="font-size:11px;font-weight:700;color:#94a3b8;margin:3px 0 6px;line-height:1.5;">${c.desc}</div>
+          <div style="display:flex;align-items:baseline;gap:4px;">
+            <span style="font-size:12px;font-weight:900;color:#f43f5e;">¥</span>
+            <span style="font-size:22px;font-weight:900;color:#f43f5e;letter-spacing:-0.5px;">${c.price}</span>
+            ${c.original?`<span style="font-size:11px;font-weight:700;color:#cbd5e1;text-decoration:line-through;">¥${c.original}</span>`:''}
+          </div>
+        </div>
+      </div>
+      <button onclick="flow('套票组件','跳转套票详情页 · ${c.name}')" style="width:100%;background:#fbbf24;color:#451a03;border:none;padding:11px;font-size:13px;font-weight:900;cursor:pointer;-webkit-tap-highlight-color:transparent;">查看套票详情</button>
+    </div>
+  `;
+}
+
+/* 图片组件（拍照型用） */
+function buildC7(img) {
+  const caption = img.title ? `
+    <div style="position:absolute;bottom:0;left:0;right:0;padding:28px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,0.55),rgba(0,0,0,0));border-radius:0 0 16px 16px;">
+      <div style="color:#fff;font-size:13px;font-weight:900;margin-bottom:2px;">${img.title}</div>
+      ${img.sub ? `<div style="color:rgba(255,255,255,0.75);font-size:11px;font-weight:700;">${img.sub}</div>` : ''}
+    </div>` : '';
+  return `
+    <div class="action-zone-label">查看机位图</div>
+    <div style="margin:0 16px;border-radius:16px;overflow:hidden;cursor:pointer;position:relative;" onclick="openLB('${img.full}')">
+      <img src="${img.thumb}" alt="${img.title||'大图'}" style="width:100%;height:200px;object-fit:cover;display:block;">
+      ${caption}
+      <div style="position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+      </div>
+    </div>
+  `;
+}
+
+/* ── transitions ── */
+const p1 = document.getElementById('p1');
+const p2 = document.getElementById('p2');
+const screen = document.getElementById('screen');
+function syncH(el) { screen.style.minHeight = el.scrollHeight + 'px'; }
+
+function goDetail(type) {
+  const d = contents[type];
+  document.getElementById('p2-title').textContent = d.title;
+  const badge = document.getElementById('p2-badge');
+  badge.textContent = d.badge;
+  badge.className = `text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto border ${d.badgeColor}`;
+  document.getElementById('rich-body').innerHTML = d.body;
+  document.getElementById('action-zone').innerHTML = buildActionZone(d);
+  p1.classList.add('out');
+  p2.classList.add('in');
+  setTimeout(() => syncH(p2), 60);
+  flow('展开', '折叠态 → 展开态 · content_summary 换成完整 content_body');
+}
+
+function goBack() {
+  p1.classList.remove('out');
+  p2.classList.remove('in');
+  setTimeout(() => syncH(p1), 60);
+}
+
+/* ── lightbox ── */
+function openLB(src) {
+  document.getElementById('lb-img').src = src;
+  document.getElementById('lightbox').classList.add('open');
+  document.body.style.overflow = 'hidden';
+  flow('图片组件', '点开机位样张大图');
+}
+function closeLB() {
+  document.getElementById('lightbox').classList.remove('open');
+  document.body.style.overflow = '';
+}
+
+/* ── 跳转链路提示 ── */
+let flowTimer = null;
+function flow(label, text) {
+  const t = document.getElementById('flowToast');
+  t.innerHTML = `<span class="ft-label">${label} ›</span>${text}`;
+  t.classList.add('show');
+  clearTimeout(flowTimer);
+  flowTimer = setTimeout(() => t.classList.remove('show'), 2600);
+}
+
+window.addEventListener('load', () => syncH(p1));
+</script>
+</body>
+</html>