feat: add heritage discovery tab and AIGC consent dialog

- Add new HeritageDiscoverySection and HeritageQuickPrompts components for dedicated heritage discovery view - Implement reusable AigcConsentDialog component for AI service user agreement prompts - Update Discovery page to toggle between explore and heritage tab layouts - Refactor legacy CardSwiper component into generic ExploreCards - Adjust ChatMainList layout to include home hero sprite animation and restructure welcome section - Refine NoticeMessage component styling and layout for better consistency - Add build best practices guidance to AGENTS.md documentation - Clean up minor config whitespace and formatting issues across files
2026-07-05 14:56:55 +08:00
parent 251f92bc1a
commit ca680ab41b
16 changed files with 1021 additions and 125 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -123,6 +123,9 @@ yarn switch-client <client-name>

 仓库当前没有明确的测试脚本。完成修改后至少做对应平台构建或运行：

+- 本地开发阶段不需要频繁使用 `yarn build:mp-weixin` 做构建验证；优先按变更范围使用 `yarn dev:h5`、`yarn dev:mp-weixin`、`git diff --check` 或页面手动检查。
+- 仅在涉及微信小程序编译能力、发布前验证、依赖/配置变更、跨端兼容风险，或用户明确要求时，再运行 `yarn build:mp-weixin`。
+
 ```bash
 yarn build:mp-weixin
 ```
--- a/src/pages.json
+++ b/src/pages.json
@@ -154,6 +154,17 @@
          }
        }
      ]
+    },
+    {
+      "root": "pages-aigc",
+      "pages": [
+        {
+          "path": "home",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        }
+      ]
    }
  ],
  "globalStyle": {
--- a/src/pages/ChatMain/AigcConsentDialog/index.vue
+++ b/src/pages/ChatMain/AigcConsentDialog/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <view
+    v-if="visible"
+    class="aigc-consent-overlay"
+    @touchmove.stop.prevent
+  >
+    <view class="aigc-consent-dialog">
+      <text class="aigc-consent-title">温馨提示</text>
+
+      <view class="aigc-consent-content">
+        <text v-if="content">{{ content }}</text>
+        <template v-else>
+          <text>{{ defaultContentPrefix }}</text>
+          <text class="aigc-consent-rule" @tap.stop="handleRuleClick">
+            《{{ ruleName }}》
+          </text>
+          <text>{{ defaultContentSuffix }}</text>
+        </template>
+      </view>
+
+      <view class="aigc-consent-actions">
+        <button
+          class="aigc-consent-button aigc-consent-cancel"
+          type="default"
+          @tap.stop="handleCancel"
+        >
+          取消
+        </button>
+        <button
+          class="aigc-consent-button aigc-consent-agree"
+          type="default"
+          @tap.stop="handleAgree"
+        >
+          我同意
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  companyName: {
+    type: String,
+    default: "智念科技服务有限公司",
+  },
+  ruleName: {
+    type: String,
+    default: "智念AI用户规则",
+  },
+  content: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:visible", "cancel", "agree", "ruleClick"]);
+
+const defaultContentPrefix = computed(
+  () =>
+    `欢迎使用【${props.companyName}】提供的AI内容升级服务。本服务通过人工智能技术（AIGC）将您上传的照片或视频与景区场景模板进行创意优化，为您生成具有特定风格的旅行内容。请您仔细阅读`
+);
+
+const defaultContentSuffix =
+  "，您点击“我同意”等进行下一步操作的行为均视为您同意受本规则约束。如您不同意，您可以直接关闭页面。";
+
+const close = () => {
+  emit("update:visible", false);
+};
+
+const handleCancel = () => {
+  close();
+  emit("cancel");
+};
+
+const handleAgree = () => {
+  close();
+  emit("agree");
+};
+
+const handleRuleClick = () => {
+  emit("ruleClick");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
--- a/src/pages/ChatMain/AigcConsentDialog/styles/index.scss
+++ b/src/pages/ChatMain/AigcConsentDialog/styles/index.scss
@@ -0,0 +1,86 @@
+.aigc-consent-overlay {
+  position: absolute;
+  z-index: 30;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 28px;
+  background: rgba(0, 0, 0, 0.58);
+  box-sizing: border-box;
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+}
+
+.aigc-consent-dialog {
+  width: 100%;
+  padding: 34px 28px 26px;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
+  box-sizing: border-box;
+}
+
+.aigc-consent-title {
+  display: block;
+  margin-bottom: 24px;
+  color: #111827;
+  font-size: 19px;
+  line-height: 26px;
+  font-weight: 900;
+  text-align: center;
+}
+
+.aigc-consent-content {
+  color: #606776;
+  font-size: 14px;
+  line-height: 25px;
+  font-weight: 700;
+  text-align: justify;
+}
+
+.aigc-consent-rule {
+  color: #18bd78;
+  font-weight: 900;
+}
+
+.aigc-consent-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+  margin-top: 28px;
+}
+
+.aigc-consent-button {
+  width: 100%;
+  height: 54px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 999px;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 900;
+  box-sizing: border-box;
+}
+
+.aigc-consent-button::after {
+  border: 0;
+}
+
+.aigc-consent-cancel {
+  border: 1px solid #e2e6ea;
+  background: #ffffff;
+  color: #172033;
+}
+
+.aigc-consent-agree {
+  border: 1px solid #061c31;
+  background: #061c31;
+  color: #ffffff;
+}
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -9,13 +9,24 @@
      />
    </view>

-    <view class="relative">
-      <image class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl"
-        mode="aspectFill" style="height: 252px;" />
-      <view class="absolute bottom-0 left-0 right-0 flex-full">
-        <view class="px-12 pt-12" style="margin-bottom: -1.5px;">
-          <HomeWelcome :mainPageDataModel="mainPageDataModel" />
-        </view>
+    <view class="home-hero relative flex-shrink-0">
+      <image
+        class="home-hero-bg w-full block"
+        :src="mainPageDataModel?.initPageImages?.backgroundImageUrl"
+        mode="aspectFill"
+      />
+      <SpriteAnimator
+        v-if="homeSpriteStyle.ipLargeImage"
+        class="home-hero-sprite"
+        :src="homeSpriteStyle.ipLargeImage"
+        :frameWidth="homeSpriteStyle.frameWidth"
+        :frameHeight="homeSpriteStyle.frameHeight"
+        :totalFrames="homeSpriteStyle.totalFrames"
+        :columns="homeSpriteStyle.columns"
+        :displayWidth="homeSpriteStyle.displayWidth"
+        :fps="16"
+      />
+      <view class="home-tabs-layer absolute bottom-0 left-0 right-0 flex-full">
        <view style="margin-bottom: -1px;">
          <AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
        </view>
@@ -24,16 +35,22 @@

    <view
      v-show="tabIndex === 0"
-      class="main-scroll-area flex-full overflow-hidden min-height-0"
+      class="main-scroll-area flex flex-col flex-full overflow-hidden min-height-0"
      @touchstart.capture="handleScrollAreaTouchStart"
      @touchstart="handleScrollAreaTouchStart"
      @touchmove="handleScrollAreaTouchMove"
    >
+      <HomeWelcome
+        class="flex-shrink-0"
+        :mainPageDataModel="mainPageDataModel"
+      />
+      <view class="flex-full min-height-0 overflow-hidden">
        <Discovery
          @scroll-touch-start="handleScrollAreaTouchStart"
          @scroll-touch="handleScrollAreaTouchMove"
        />
      </view>
+    </view>

    <!-- 消息列表（可滚动区域） -->
    <scroll-view
@@ -222,7 +239,7 @@
 </template>

 <script setup>
-import { onMounted, nextTick, onUnmounted, ref } from "vue";
+import { computed, onMounted, nextTick, onUnmounted, ref } from "vue";
 import { onLoad, onReady } from "@dcloudio/uni-app";
 import {
  SWITCH_TO_COMPANION_TAB,
@@ -238,6 +255,7 @@ import { MessageRole, MessageType, CompName, Command } from "@/model/ChatModel";
 import HomeWelcome from "../HomeWelcome/index.vue";
 import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
 import Discovery from "../../Discovery/index.vue";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
 import ChatGuide from "../ChatGuide/index.vue";

 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
@@ -351,6 +369,18 @@ let currentSessionMessageId = null;
 const tabIndex = ref(0);
 const tabList = ["探索发现", "AI伴游"];

+const homeSpriteStyle = computed(() => {
+  const images = mainPageDataModel.value?.initPageImages || {};
+  return {
+    ipLargeImage: images.ipLargeImage,
+    frameWidth: images.ipLargeImageWidth,
+    frameHeight: images.ipLargeImageHeight,
+    totalFrames: images.ipLargeTotalFrames,
+    columns: images.ipLargeColumns,
+    displayWidth: 105,
+  };
+});
+
 const handleChange = (i) => {
  console.log("切换:", i);
 };
--- a/src/pages/ChatMain/ChatMainList/styles/index.scss
+++ b/src/pages/ChatMain/ChatMainList/styles/index.scss
@@ -4,3 +4,25 @@
  min-height: 0;
  overscroll-behavior-y: contain;
 }
+
+.home-hero {
+  height: 136px;
+  overflow: hidden;
+}
+
+.home-hero-bg {
+  height: 136px;
+}
+
+.home-hero-sprite {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  z-index: 4;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.home-tabs-layer {
+  z-index: 3;
+}
--- a/src/pages/ChatMain/HomeWelcome/index.vue
+++ b/src/pages/ChatMain/HomeWelcome/index.vue
@@ -1,27 +1,23 @@
 <template>
-  <view class="flex border-box w-full">
-    <view class="flex flex-col flex-full min-width-0 mr-12">
-      <view class="flex flex-row flex-items-center flex-justify-between min-width-0">
-        <text class="flex-full min-width-0 font-size-20 font-600 color-white ellipsis-1">{{ mainPageDataModel.welcomeContent }}</text>
-        <text class="flex-shrink-0 font-size-20 font-600 color-white mt-4"> {{ weatherText }} </text>
+  <view class="home-welcome-panel">
+    <view class="home-welcome-header">
+      <text class="home-welcome-title ellipsis-1">
+        {{ props.mainPageDataModel.welcomeContent || "小七欢迎你～" }}
+      </text>
+      <text v-if="weatherText" class="home-welcome-weather">
+        {{ weatherText }}
+      </text>
    </view>

    <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
  </view>
-
-    <SpriteAnimator class="sprite-self-end" :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
-      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
-      :displayWidth="spriteStyle.displayWidth" :fps="16" />
-  </view>
 </template>
 <script setup>
 import { onMounted, ref } from "vue";
-import { defineProps, computed } from "vue";
-import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
 import NoticeMessage from "../NoticeMessage/index.vue";
 import { getLocalWeather } from "@/request/api/MainPageDataApi";

-const weatherText = ref('');
+const weatherText = ref("");

 const props = defineProps({
  mainPageDataModel: {
@@ -38,23 +34,6 @@ const props = defineProps({
  },
 });

-const initPageImages = computed(() => {
-  return props.mainPageDataModel?.initPageImages || {};
-});
-
-const spriteStyle = computed(() => {
-  const images = initPageImages.value;
-  return {
-    backgroundImageUrl: images.backgroundImageUrl,
-    ipLargeImage: images.ipLargeImage,
-    frameWidth: images.ipLargeImageWidth,
-    frameHeight: images.ipLargeImageHeight,
-    totalFrames: images.ipLargeTotalFrames,
-    columns: images.ipLargeColumns,
-    displayWidth: 105,
-  };
-});
-
 const getLocalWeatherData = async () => {
  const res = await getLocalWeather();
  if (res && res.code === 0) {
@@ -68,15 +47,16 @@ onMounted(() => {
 });

 const getWeatherEmoji = (text) => {
-  if (weatherTextMap[text]) return weatherTextMap[text];
-  if (text.includes("晴")) return "☀️";
-  if (text.includes("云")) return "☁️";
-  if (text.includes("雨")) return "🌧️";
-  if (text.includes("雷")) return "⛈️";
-  if (text.includes("雪")) return "🌨️";
-  if (text.includes("雾") || text.includes("霾")) return "😷";
-  if (text.includes("风")) return "🌬️";
-  if (text.includes("沙")) return "🌪️";
+  const weather = String(text || "");
+  if (weatherTextMap[weather]) return weatherTextMap[weather];
+  if (weather.includes("晴")) return "☀️";
+  if (weather.includes("云")) return "☁️";
+  if (weather.includes("雨")) return "🌧️";
+  if (weather.includes("雷")) return "⛈️";
+  if (weather.includes("雪")) return "🌨️";
+  if (weather.includes("雾") || weather.includes("霾")) return "😷";
+  if (weather.includes("风")) return "🌬️";
+  if (weather.includes("沙")) return "🌪️";
  return "❓";
 }

@@ -150,9 +130,38 @@ const weatherTextMap = {

 </script>

-<style scoped>
-.sprite-self-end {
-  align-self: flex-end; 
+<style lang="scss" scoped>
+.home-welcome-panel {
+  width: 100%;
+  height: 92px;
+  padding: 12px 12px 0;
+  box-sizing: border-box;
+  background: $theme-color-50;
+}
+
+.home-welcome-header {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.home-welcome-title {
+  flex: 1;
+  min-width: 0;
+  color: $text-color-900;
+  font-size: 21px;
+  line-height: 28px;
+  font-weight: 900;
+}
+
+.home-welcome-weather {
  flex-shrink: 0;
+  margin-left: 12px;
+  color: $text-color-900;
+  font-size: 22px;
+  line-height: 26px;
+  font-weight: 900;
 }
 </style>
--- a/src/pages/ChatMain/NoticeMessage/index.vue
+++ b/src/pages/ChatMain/NoticeMessage/index.vue
@@ -3,11 +3,11 @@
    <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
      :duration="duration" :indicator-dots="false">
      <swiper-item v-for="item in bannerList" :key="item.entityName">
-        <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
+        <view class="swiper-item" @click="clickItem(item)">
          <text class="text-color font-size-12 font-600">
            {{ item.entityName }}
          </text>
-          <view class="flex flex-row flex-justify-between">
+          <view class="notice-footer">
            <text class="text-color font-size-10 font-500">
              发布时间：{{ item.effectiveStartTime }}
            </text>
@@ -19,10 +19,6 @@
      </swiper-item>
    </swiper>

-    <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" duration="0.5" default-width="4px"
-      active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
-      active-color="rgba(255,255,255,1)" />
-    
  </view>

  <view v-else-if="props.tipsMessage">
@@ -83,42 +79,57 @@ const clickItem = (item) => {

 <style lang="scss" scoped>
 .swiper {
-  height: 50px;
+  height: 48px;
  margin-top: 8px;
 }

 .swiper-item {
-  display: block;
-  height: 46px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  height: 48px;
+  padding: 7px 8px;
+  box-sizing: border-box;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 12px;
-  border: 1px solid $theme-color-200;
-  background: $theme-color-100;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.notice-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
 }

 .text-color {
-  color: $theme-color-500;
+  color: $text-color-900;
 }
 .underline-text {
  text-decoration: underline;
-  text-decoration-color: $theme-color-500;
+  text-decoration-color: $text-color-400;
+  color: $text-color-400;
 }

 .noMessage {
-  display: inline-flex;
+  display: flex;
+  align-items: center;
  margin-top: 8px;
-  padding: 4px 12px;
+  height: 48px;
+  padding: 7px 8px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
-  border: 1px solid $theme-color-200;
-  background: $theme-color-100;
-  width: fit-content;
-  max-width: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.96);
+  width: 100%;
  box-sizing: border-box;
 }

 .noMessage-text {
-  line-height: 18px;
+  color: $text-color-900;
+  line-height: 16px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
--- a/src/pages/Discovery/components/ExploreCards/index.vue
+++ b/src/pages/Discovery/components/ExploreCards/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <view class="explore-cards">
+    <scroll-view
+      class="explore-scroll"
+      scroll-x
+      show-scrollbar="false"
+    >
+      <view class="explore-track">
+        <view
+          v-for="(item, index) in normalizedList"
+          :key="getItemKey(item, index)"
+          class="explore-card"
+          :class="`is-${item.tone}`"
+          hover-class="is-pressed"
+          hover-stay-time="80"
+          @tap="handleCardTap(item.raw, index)"
+        >
+          <image
+            v-if="item.coverImage"
+            class="explore-card-image"
+            :src="item.coverImage"
+            mode="aspectFill"
+          />
+
+          <view class="explore-card-gradient" />
+
+          <view class="explore-card-content">
+            <text class="explore-card-tag ellipsis-1">{{ item.tag }}</text>
+            <text class="explore-card-title ellipsis-1">{{ item.title }}</text>
+            <text v-if="item.subTitle" class="explore-card-desc ellipsis-1">
+              {{ item.subTitle }}
+            </text>
+          </view>
+
+          <view class="explore-card-arrow">
+            <text>→</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["didSelectItem"]);
+
+const FALLBACK_TAGS = ["MUST VISIT", "CULTURE", "ADVENTURE", "NIGHTLIFE"];
+const TONES = ["default", "culture", "adventure", "nightlife"];
+
+const normalizedList = computed(() =>
+  props.list.map((item, index) => ({
+    raw: item,
+    id: item.id ?? item.tabContentId,
+    title: item.title || "",
+    subTitle: item.subTitle || "",
+    tag: item.tag || FALLBACK_TAGS[index % FALLBACK_TAGS.length],
+    coverImage: item.coverImage || "",
+    tone: TONES[index % TONES.length],
+  }))
+);
+
+const getItemKey = (item, index) => item.id ?? item.title ?? index;
+
+const handleCardTap = (item, index) => {
+  emit("didSelectItem", item, index);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
--- a/src/pages/Discovery/components/ExploreCards/styles/index.scss
+++ b/src/pages/Discovery/components/ExploreCards/styles/index.scss
@@ -0,0 +1,151 @@
+.explore-cards {
+  width: 100%;
+  height: 356px;
+  overflow: hidden;
+}
+
+.explore-scroll {
+  width: 100%;
+  height: 356px;
+  white-space: nowrap;
+}
+
+.explore-track {
+  display: inline-flex;
+  flex-direction: row;
+  min-width: 100%;
+  height: 356px;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.explore-card {
+  position: relative;
+  flex: 0 0 278px;
+  width: 278px;
+  height: 356px;
+  margin-right: 16px;
+  overflow: hidden;
+  border-radius: 28px;
+  background: #47b391;
+  color: #ffffff;
+  box-sizing: border-box;
+  transform: translateZ(0);
+}
+
+.explore-card:last-child {
+  margin-right: 0;
+}
+
+.explore-card.is-pressed {
+  opacity: 0.92;
+}
+
+.explore-card-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.explore-card-gradient {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(180deg, rgba(43, 107, 122, 0) 42%, rgba(71, 179, 145, 0.72) 74%, #47b391 100%);
+}
+
+.explore-card.is-culture {
+  background: #b98563;
+}
+
+.explore-card.is-culture .explore-card-gradient {
+  background: linear-gradient(180deg, rgba(87, 57, 37, 0.08) 36%, rgba(150, 93, 55, 0.62) 72%, #b98563 100%);
+}
+
+.explore-card.is-adventure {
+  background: #5b895f;
+}
+
+.explore-card.is-adventure .explore-card-gradient {
+  background: linear-gradient(180deg, rgba(30, 58, 47, 0) 36%, rgba(47, 97, 54, 0.74) 74%, #5b895f 100%);
+}
+
+.explore-card.is-nightlife {
+  background: #438694;
+}
+
+.explore-card.is-nightlife .explore-card-gradient {
+  background: linear-gradient(180deg, rgba(12, 47, 78, 0.04) 34%, rgba(28, 92, 111, 0.72) 74%, #438694 100%);
+}
+
+.explore-card-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 104px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 14px 58px 15px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.15);
+  box-sizing: border-box;
+}
+
+.explore-card-tag {
+  display: block;
+  max-width: 100%;
+  margin-bottom: 9px;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 11px;
+  line-height: 13px;
+  font-weight: 700;
+  letter-spacing: 1.06px;
+}
+
+.explore-card-title {
+  display: block;
+  max-width: 100%;
+  margin-bottom: 4px;
+  color: #ffffff;
+  font-size: 22px;
+  line-height: 27px;
+  font-weight: 800;
+}
+
+.explore-card-desc {
+  display: block;
+  max-width: 100%;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.explore-card-arrow {
+  position: absolute;
+  right: 16px;
+  bottom: 35px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.92);
+  color: #2a3538;
+  box-shadow: 0 4px 6px rgba(44, 39, 32, 0.1);
+}
+
+.explore-card-arrow text {
+  font-size: 18px;
+  line-height: 18px;
+  font-weight: 900;
+}
--- a/src/pages/Discovery/components/HeritageDiscoverySection/index.vue
+++ b/src/pages/Discovery/components/HeritageDiscoverySection/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class="heritage-section">
+    <view class="heritage-carousel">
+      <scroll-view
+        class="heritage-scroll"
+        scroll-x
+        show-scrollbar="false"
+        :scroll-left="carouselScrollLeft"
+      >
+        <view class="heritage-track">
+          <view
+            v-for="(item, index) in normalizedCards"
+            :key="getItemKey(item, index)"
+            class="heritage-card"
+            :class="{
+              'is-featured': index === 1,
+              'is-selected': index === 1,
+            }"
+            hover-class="is-pressed"
+            hover-stay-time="80"
+            @tap="handleCardTap(item.raw, index)"
+          >
+            <view class="heritage-image">
+              <image
+                v-if="item.coverImage"
+                class="heritage-cover"
+                :src="item.coverImage"
+                mode="aspectFill"
+              />
+              <text class="heritage-badge">{{ item.badge }}</text>
+            </view>
+
+            <view class="heritage-copy">
+              <text class="heritage-tag ellipsis-1">{{ item.tag }}</text>
+              <text class="heritage-title ellipsis-1">{{ item.title }}</text>
+              <text class="heritage-desc ellipsis-1">{{ item.subTitle }}</text>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <HeritageQuickPrompts
+      :list="prompts"
+      @didSelectItem="handlePromptTap"
+    />
+  </view>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import HeritageQuickPrompts from "../HeritageQuickPrompts/index.vue";
+
+const props = defineProps({
+  cards: {
+    type: Array,
+    default: () => [],
+  },
+  prompts: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["select-card", "select-prompt"]);
+
+const carouselScrollLeft = ref(165);
+
+watch(
+  () => props.cards.length,
+  (length) => {
+    const targetScrollLeft = length > 1 ? 165 : 0;
+    carouselScrollLeft.value = 0;
+    setTimeout(() => {
+      carouselScrollLeft.value = targetScrollLeft;
+    }, 0);
+  },
+  { immediate: true }
+);
+
+const getBadgeText = (item) => {
+  const source = item.jumpDesc || item.tag || item.title || "";
+  return source.slice(0, 2) || "推荐";
+};
+
+const normalizedCards = computed(() =>
+  props.cards.map((item) => ({
+    raw: item,
+    id: item.id ?? item.tabContentId,
+    title: item.title || "",
+    subTitle: item.subTitle || "",
+    tag: item.tag || item.jumpDesc || "推荐",
+    badge: getBadgeText(item),
+    coverImage: item.coverImage || "",
+  }))
+);
+
+const getItemKey = (item, index) => item.id ?? item.title ?? index;
+
+const handleCardTap = (item, index) => {
+  emit("select-card", item, index);
+};
+
+const handlePromptTap = (item, index) => {
+  emit("select-prompt", item, index);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
--- a/src/pages/Discovery/components/HeritageDiscoverySection/styles/index.scss
+++ b/src/pages/Discovery/components/HeritageDiscoverySection/styles/index.scss
@@ -0,0 +1,137 @@
+.heritage-section {
+  width: 100%;
+  height: 386px;
+  overflow: hidden;
+  background: $theme-color-50;
+}
+
+.heritage-carousel,
+.heritage-scroll {
+  width: 100%;
+  height: 268px;
+  overflow: hidden;
+  background: $theme-color-50;
+}
+
+.heritage-track {
+  display: inline-flex;
+  align-items: flex-start;
+  min-width: 100%;
+  height: 268px;
+  padding: 8px 69px 26px;
+  box-sizing: border-box;
+}
+
+.heritage-card {
+  flex: 0 0 189px;
+  width: 189px;
+  height: 227px;
+  margin-top: 5px;
+  margin-right: 14px;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  border-radius: 28px;
+  border: 1px solid #f1f5f9;
+  background: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  text-align: left;
+}
+
+.heritage-card:last-child {
+  margin-right: 0;
+}
+
+.heritage-card.is-featured {
+  flex-basis: 237px;
+  width: 237px;
+  height: 234px;
+  margin-top: 0;
+}
+
+.heritage-card.is-selected {
+  border-color: rgba(12, 205, 88, 0.55);
+  box-shadow: 0 8px 18px rgba(12, 205, 88, 0.12);
+  transform: translateY(-2px);
+}
+
+.heritage-card.is-pressed {
+  opacity: 0.92;
+}
+
+.heritage-image {
+  position: relative;
+  width: 100%;
+  height: 138px;
+  overflow: hidden;
+  border-radius: 20px;
+  background: #f1f5f9;
+}
+
+.heritage-card.is-featured .heritage-image {
+  height: 145px;
+}
+
+.heritage-cover {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.heritage-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 34px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  color: $theme-color-500;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 900;
+}
+
+.heritage-copy {
+  min-width: 0;
+  margin-top: 8px;
+  padding: 0 8px;
+}
+
+.heritage-tag {
+  display: inline-flex;
+  max-width: 100%;
+  height: 18px;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #fffbeb;
+  color: #d97706;
+  font-size: 9px;
+  line-height: 14px;
+  font-weight: 800;
+}
+
+.heritage-title {
+  display: block;
+  max-width: 100%;
+  margin: 4px 0;
+  color: #1e293b;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 900;
+}
+
+.heritage-desc {
+  display: block;
+  max-width: 100%;
+  color: #94a3b8;
+  font-size: 10px;
+  line-height: 15px;
+  font-weight: 600;
+}
--- a/src/pages/Discovery/components/HeritageQuickPrompts/index.vue
+++ b/src/pages/Discovery/components/HeritageQuickPrompts/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <scroll-view
+    class="prompt-strip"
+    scroll-x
+    show-scrollbar="false"
+  >
+    <view class="prompt-track">
+      <view
+        v-for="(item, index) in normalizedList"
+        :key="getItemKey(item, index)"
+        class="prompt-card"
+        hover-class="is-pressed"
+        hover-stay-time="80"
+        @tap="handleTap(item.raw, index)"
+      >
+        <view class="prompt-mark" />
+        <view class="prompt-copy">
+          <text class="prompt-title ellipsis-1">{{ item.title }}</text>
+          <text class="prompt-desc ellipsis-1">{{ item.subTitle }}</text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["didSelectItem"]);
+
+const normalizedList = computed(() =>
+  props.list.map((item) => ({
+    raw: item,
+    id: item.id ?? item.tabContentId,
+    title: item.title || "",
+    subTitle: item.subTitle || "",
+  }))
+);
+
+const getItemKey = (item, index) => item.id ?? item.title ?? index;
+
+const handleTap = (item, index) => {
+  emit("didSelectItem", item, index);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
--- a/src/pages/Discovery/components/HeritageQuickPrompts/styles/index.scss
+++ b/src/pages/Discovery/components/HeritageQuickPrompts/styles/index.scss
@@ -0,0 +1,83 @@
+.prompt-strip {
+  width: 100%;
+  height: 112px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: $theme-color-50;
+  scrollbar-width: none;
+}
+
+.prompt-strip::-webkit-scrollbar {
+  display: none;
+}
+
+.prompt-track {
+  display: inline-flex;
+  align-items: flex-start;
+  min-width: 100%;
+  height: 112px;
+  padding: 4px 16px 12px;
+  box-sizing: border-box;
+}
+
+.prompt-card {
+  flex: 0 0 148px;
+  width: 148px;
+  height: 82px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  padding: 14px 12px;
+  border-radius: 18px;
+  background: #ffffff;
+  color: #172033;
+  box-shadow: 0 3px 10px rgba(27, 58, 48, 0.05);
+  box-sizing: border-box;
+  text-align: left;
+}
+
+.prompt-card:last-child {
+  margin-right: 0;
+}
+
+.prompt-card.is-pressed {
+  opacity: 0.92;
+}
+
+.prompt-mark {
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  background:
+    radial-gradient(circle at 30% 30%, $theme-color-500 0 20%, transparent 22%),
+    radial-gradient(circle at 70% 30%, #f8c425 0 18%, transparent 20%),
+    radial-gradient(circle at 30% 70%, $theme-color-500 0 20%, transparent 22%),
+    radial-gradient(circle at 70% 70%, $theme-color-500 0 18%, transparent 20%),
+    #eefaf3;
+}
+
+.prompt-copy {
+  min-width: 0;
+  flex: 1;
+  margin-left: 8px;
+}
+
+.prompt-title {
+  display: block;
+  max-width: 100%;
+  color: #172033;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 900;
+}
+
+.prompt-desc {
+  display: block;
+  max-width: 100%;
+  margin-top: 2px;
+  color: #8f9bad;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 700;
+}
--- a/src/pages/Discovery/index.vue
+++ b/src/pages/Discovery/index.vue
@@ -17,24 +17,34 @@
      @touchmove="emitScrollTouch"
      @scroll="emitScrollTouch"
    >
-      <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
+      <HeritageDiscoverySection
+        v-if="isHeritageTab"
+        :cards="discoveryCards"
+        :prompts="discoveryQuickQuestions"
+        @select-card="handleCardClick"
+        @select-prompt="handleQuickQuestionClick"
+      />
+
+      <template v-else>
+        <ExploreCards v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />

        <QuickQuestions v-if="discoveryQuickQuestions.length > 0" :list="discoveryQuickQuestions" @didSelectItem="handleQuickQuestionClick" />
+      </template>

    </scroll-view>
  </view>
 </template>

 <script setup>
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE, SWITCH_TO_COMPANION_TAB } from "@/constant/constant";
 import { navigateTo } from "@/router";
 import { getAccessToken } from "@/constant/token";

 import FindTabs from "./components/FindTabs/index.vue";
-import CardSwiper from "./components/CardSwiper/index.vue";
+import ExploreCards from "./components/ExploreCards/index.vue";
+import HeritageDiscoverySection from "./components/HeritageDiscoverySection/index.vue";
 import QuickQuestions from "./components/QuickQuestions/index.vue";
-import discoveryCover from "@/components/ImageSwiper/images/2025-07-12_180248.jpg";

 import { homeTabsData, getNearbyTags, homeTabContentData, homeQuickQuestionData } from "../../request/api/MainPageDataApi";
 import { useAppStore, useLocationStore } from "@/store";
@@ -51,6 +61,8 @@ const discoveryCards = ref([]);
 const discoveryQuickQuestions = ref([]);
 const emit = defineEmits(["scroll-touch-start", "scroll-touch"]);

+const isHeritageTab = computed(() => discoveryTabs.value[activeIndex.value]?.label === "小七孔古桥");
+
 const emitScrollTouchStart = () => {
  emit("scroll-touch-start");
 };