feat: enhance LongTextGuideCard with detailed layout and improved styles; update mocks and add padding utility

src/pages/ChatModule/LongTextGuideCard/index.vue

@@ -1,66 +1,162 @@
 <template>
-  <view class="long-text-guide-card">
+  <view class="long-text-guide-card w-full">
     <view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
-      <CardShell
+      <view
         v-for="item in cards"
-        :key="item.id || item.title"
+        :key="item.id"
-        class="long-text-guide-card__item"
+        class="long-text-guide-card__summary-card bg-white rounded-24 border-box"
-        pressable
+        :class="{ 'is-disabled': disabled }"
-        :disabled="disabled"
+        @click="openDetail(item)"
-        @select="openDetail(item)"
       >
-        <view class="long-text-guide-card__body px-20 pt-20 pb-12">
-          <view class="long-text-guide-card__meta flex flex-items-center gap-8">
-            <BadgePill :label="item.badge" tone="amber" />
-          </view>
-          <view class="long-text-guide-card__title color-1E293B font-size-14 font-900">{{ item.title }}</view>
-          <view class="long-text-guide-card__summary color-94A3B8 font-size-12">{{ item.summary }}</view>
-        </view>
-        <view class="long-text-guide-card__footer flex flex-items-center flex-justify-between px-20 pb-16 color-CBD5E1 font-size-11">
-          <text>{{ item.footer }}</text>
-          <text class="long-text-guide-card__arrow">›</text>
-        </view>
-      </CardShell>
-    </view>
-
-    <DetailShell
-      v-else
-      :title="activeItem.title"
-      :tag="activeItem.badge"
-      tone="amber"
-      @back="closeDetail"
-    >
-      <view class="long-text-guide-card__detail p-18">
         <view
-          v-for="(section, index) in detailSections"
+          class="long-text-guide-card__badge font-size-12 font-900"
-          :key="section.title || index"
+          :class="`is-${item.badgeTone}`"
-          class="long-text-guide-card__section"
         >
-          <view class="long-text-guide-card__section-title color-1E293B font-size-15 font-900">{{ section.title }}</view>
+          {{ item.badge }}
-          <view class="long-text-guide-card__section-text color-475569 font-size-13 font-600">{{ section.content }}</view>
         </view>
-        <view v-if="activeItem.action" class="long-text-guide-card__action">
+        <view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
-          <ActionRow
+          {{ item.title }}
-            :title="activeItem.action.title"
+        </view>
-            :subtitle="activeItem.action.subtitle"
+        <view class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
-            :icon="activeItem.action.icon"
+          {{ item.summary }}
-            tone="amber"
+        </view>
-            :disabled="disabled"
+        <view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
-            :payload="activeItem"
+          <text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
-            @action="$emit('action', $event)"
+          <text class="long-text-guide-card__arrow color-CBD5E1 font-700">›</text>
-          />
         </view>
       </view>
-    </DetailShell>
+    </view>
+
+    <view v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
+      <view class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
+        <view
+          class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
+          @click="closeDetail"
+        >
+          ‹
+        </view>
+        <view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
+          {{ activeItem.title }}
+        </view>
+        <view
+          class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
+          :class="`is-${activeItem.badgeTone}`"
+        >
+          {{ activeItem.badge }}
+        </view>
+      </view>
+
+      <view class="long-text-guide-card__rich-body">
+        <view
+          v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage"
+          :key="`before-${paragraphIndex}`"
+          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
+        >
+          <template
+            v-for="(segment, segmentIndex) in getSegments(paragraph)"
+            :key="`${paragraphIndex}-${segmentIndex}`"
+          >
+            <text
+              v-if="segment.highlight"
+              class="long-text-guide-card__highlight font-800"
+            >
+              {{ segment.text }}
+            </text>
+            <text v-else>{{ segment.text }}</text>
+          </template>
+        </view>
+
+        <image
+          v-if="activeItem.image"
+          class="long-text-guide-card__main-image w-full rounded-14 block"
+          :src="activeItem.image"
+          mode="aspectFill"
+        />
+
+        <view class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
+          {{ activeItem.sectionTitle }}
+        </view>
+        <view class="long-text-guide-card__tip-block bg-ECFDF5">
+          <view
+            v-for="(tip, index) in activeItem.tips || []"
+            :key="tip"
+            class="long-text-guide-card__tip color-047857 font-size-14 font-800"
+          >
+            {{ index + 1 }} {{ tip }}
+          </view>
+        </view>
+
+        <view
+          v-for="(paragraph, paragraphIndex) in paragraphsAfterTips"
+          :key="`after-${paragraphIndex}`"
+          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
+        >
+          <template
+            v-for="(segment, segmentIndex) in getSegments(paragraph)"
+            :key="`${paragraphIndex}-${segmentIndex}`"
+          >
+            <text
+              v-if="segment.highlight"
+              class="long-text-guide-card__highlight font-800"
+            >
+              {{ segment.text }}
+            </text>
+            <text v-else>{{ segment.text }}</text>
+          </template>
+        </view>
+      </view>
+
+      <view v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
+        <view class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
+          {{ activeItem.action.label }}
+        </view>
+        <view class="long-text-guide-card__map-card rounded-16 overflow-hidden">
+          <view class="long-text-guide-card__map-image-wrap relative">
+            <image
+              class="long-text-guide-card__map-image w-full block"
+              :src="activeItem.action.image"
+              mode="aspectFill"
+            />
+            <view class="long-text-guide-card__map-tag color-white font-size-10 font-900">
+              {{ activeItem.action.tag }}
+            </view>
+          </view>
+          <view class="long-text-guide-card__map-bar flex flex-items-center bg-white">
+            <view class="flex-full">
+              <view class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</view>
+              <view class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
+            </view>
+            <view
+              class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
+              @click="handleAction(activeItem)"
+            >
+              {{ activeItem.action.buttonText }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
+        <view class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
+          {{ activeItem.action.label }}
+        </view>
+        <view class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
+          <image
+            class="long-text-guide-card__photo-image w-full block"
+            :src="activeItem.action.image"
+            mode="aspectFill"
+          />
+          <view class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
+            ↗
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
-import DetailShell from "../SharedVisual/DetailShell.vue";
-import ActionRow from "../SharedVisual/ActionRow.vue";
 
 const props = defineProps({
   data: {
@@ -79,7 +175,8 @@ const selected = ref(null);
 const cards = computed(() => props.data.cards || []);
 const activeItem = computed(() => selected.value || cards.value[0] || {});
 const mode = computed(() => (selected.value ? "detail" : "list"));
-const detailSections = computed(() => activeItem.value.sections || []);
+const paragraphsBeforeImage = computed(() => activeItem.value.paragraphs?.slice(0, 1) || []);
+const paragraphsAfterTips = computed(() => activeItem.value.paragraphs?.slice(1) || []);
 
 const openDetail = (item) => {
   if (props.disabled) return;
@@ -91,6 +188,36 @@ const closeDetail = () => {
   selected.value = null;
   emit("back");
 };
+
+const handleAction = (item) => {
+  if (props.disabled) return;
+  emit("action", item);
+};
+
+const getSegments = (paragraph) => {
+  const text = paragraph?.text || "";
+  const highlights = paragraph?.highlights || [];
+  if (!highlights.length) return [{ text, highlight: false }];
+
+  const segments = [];
+  let cursor = 0;
+
+  highlights.forEach((highlight) => {
+    const start = text.indexOf(highlight, cursor);
+    if (start < 0) return;
+    if (start > cursor) {
+      segments.push({ text: text.slice(cursor, start), highlight: false });
+    }
+    segments.push({ text: highlight, highlight: true });
+    cursor = start + highlight.length;
+  });
+
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor), highlight: false });
+  }
+
+  return segments.length ? segments : [{ text, highlight: false }];
+};
 </script>
 
 <style scoped lang="scss">

src/pages/ChatModule/LongTextGuideCard/mocks.js

@@ -1,17 +1,99 @@
 export default {
   cards: [
     {
-      id: "guide-waterfall",
+      id: "rafting",
-      badge: "攻略",
+      type: "rafting",
-      time: "约 3 分钟阅读",
+      badge: "漂流攻略",
-      title: "瀑布观景路线怎么走更顺",
+      badgeTone: "amber",
-      summary: "从入口到核心观景台的轻量攻略，适合第一次到访时快速决策。",
+      title: "漂流必备避坑指南",
-      footer: "查看完整攻略",
+      summary: "全长约2公里，落差高达15米。经过三段激流区，一定要准备好换洗衣物和防水袋...",
-      sections: [
+      footer: "点击查看完整攻略",
-        { title: "推荐顺序", content: "先到主观景台确认水量，再沿木栈道前往侧面机位，回程避开逆光时段。" },
+      image: "https://images.unsplash.com/photo-1530866495561-507c9faab2ed?w=900&q=80",
-        { title: "体验提醒", content: "雨后地面湿滑，建议预留 40 分钟，不要在低洼处长时间停留。" },
+      paragraphs: [
+        {
+          text: "漂流全长约 2 公里，落差高达 15 米，全程约 40 分钟。途中经过三段激流区，水流湍急，体验感极强。",
+          highlights: ["2 公里"],
+        },
+        {
+          text: "建议选择 上午场（9:00–11:00），水量充足、气温适宜，避开正午阳光暴晒。",
+          highlights: ["上午场（9:00–11:00）"],
+        },
       ],
-      action: { title: "查看景点详情", subtitle: "开放时间、距离与导航", icon: "i" },
+      sectionTitle: "出发前必备清单",
+      tips: [
+        "换洗衣物装入防水袋，手机务必密封",
+        "穿凉鞋或防滑鞋，禁止拖鞋入场",
+        "贵重物品存入景区寄存柜再下水",
+      ],
+      action: {
+        type: "none",
+      },
+    },
+    {
+      id: "attraction",
+      type: "attraction",
+      badge: "景点介绍",
+      badgeTone: "green",
+      title: "卧龙潭 · 碧绿深潭",
+      summary: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点之一...",
+      footer: "点击查看完整介绍",
+      image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
+      paragraphs: [
+        {
+          text: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点。潭水终年保持 16–18°C，清澈见底，映出周围青山如镜。",
+          highlights: ["16–18°C"],
+        },
+        {
+          text: "卧龙潭位于游览线路末段，建议安排为 半日游终点，游览完后就近乘观光车返回入口。",
+          highlights: ["半日游终点"],
+        },
+      ],
+      sectionTitle: "游览小贴士",
+      tips: [
+        "雨季水位上涨，观景平台景色最震撼",
+        "潭边栈道湿滑，请穿防滑鞋慢行",
+        "禁止下水游泳，潭深超过 20 米",
+      ],
+      action: {
+        type: "map",
+        label: "带我去这里",
+        tag: "目的地",
+        title: "卧龙潭",
+        subtitle: "步行约 680 米",
+        buttonText: "导航",
+        image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
+      },
+    },
+    {
+      id: "photo",
+      type: "photo",
+      badge: "拍照攻略",
+      badgeTone: "blue",
+      title: "古桥晨雾最佳机位",
+      summary: "清晨6:30–8:00是拍摄窗口，雾气在桥面漂浮，光线最柔和，推荐用长焦压缩透视...",
+      footer: "点击查看完整攻略",
+      image: "",
+      paragraphs: [
+        {
+          text: "清晨 6:30–8:00 是拍摄黄金窗口。雾气在桥面缓缓漂浮，配合柔和侧光，层次感极强。",
+          highlights: ["6:30–8:00"],
+        },
+        {
+          text: "推荐站在桥下游约 30 米处的石滩，正对桥拱构图，早晨人少，可以从容布局。",
+          highlights: ["30 米处的石滩"],
+        },
+      ],
+      sectionTitle: "机位参数建议",
+      tips: [
+        "长焦 85mm+ 压缩透视，桥拱与雾气叠加感更强",
+        "低角度蹲拍，水面倒影纳入前景",
+        "光圈 f/5.6–8，保持前后景均清晰",
+      ],
+      action: {
+        type: "image",
+        label: "看机位图",
+        image: "https://images.unsplash.com/photo-1682687982501-1e5898cb8f4b?w=900&q=80",
+      },
     },
   ],
 };

src/pages/ChatModule/LongTextGuideCard/styles/index.scss

@@ -1,58 +1,185 @@
-.long-text-guide-card,
+.long-text-guide-card__summary-card {
-.long-text-guide-card__list {
+  min-height: 178px;
-}
-
-.long-text-guide-card__item {
-  margin-bottom: 12px;
-}
-
-.long-text-guide-card__body {
-}
-
-.long-text-guide-card__meta {
-  margin-bottom: 10px;
-}
-
-.long-text-guide-card__time {
-  color: #94a3b8;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.long-text-guide-card__title {
-  line-height: 20px;
-}
-
-.long-text-guide-card__summary {
-  margin-top: 8px;
-  line-height: 19px;
-}
-
-.long-text-guide-card__footer {
-}
-
-.long-text-guide-card__arrow {
-  font-size: 22px;
-}
-
-.long-text-guide-card__detail {
-}
-
-.long-text-guide-card__section {
   margin-bottom: 16px;
+  padding: 28px 26px 22px;
+  border: 1px solid rgba(15, 23, 42, 0.04);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
+  transition: transform 0.15s ease, opacity 0.15s ease;
 }
 
-.long-text-guide-card__section-title {
+.long-text-guide-card__summary-card:active {
-  margin-bottom: 8px;
+  transform: scale(0.985);
 }
 
-.long-text-guide-card__section-text {
+.long-text-guide-card__summary-card.is-disabled {
+  opacity: 0.55;
+}
+
+.long-text-guide-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  line-height: 18px;
+}
+
+.long-text-guide-card__badge.is-amber {
+  color: #d97706;
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.long-text-guide-card__badge.is-green {
+  color: #059669;
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+}
+
+.long-text-guide-card__badge.is-blue {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.long-text-guide-card__summary-title {
+  margin-top: 18px;
+  line-height: 24px;
+}
+
+.long-text-guide-card__summary-text {
+  margin-top: 10px;
   line-height: 22px;
 }
 
-.long-text-guide-card__action {
+.long-text-guide-card__summary-footer {
-  margin-top: 18px;
+  margin-top: 24px;
-  padding: 8px;
+}
-  border-radius: 20px;
+
-  background: #fffbeb;
+.long-text-guide-card__arrow {
+  font-size: 26px;
+  line-height: 1;
+}
+
+.long-text-guide-card__detail-card {
+  border: 1px solid rgba(15, 23, 42, 0.04);
+}
+
+.long-text-guide-card__detail-header {
+  min-height: 70px;
+  padding: 0 18px 0 20px;
+}
+
+.long-text-guide-card__back {
+  width: 34px;
+  height: 34px;
+  margin-right: 12px;
+  color: #64748b;
+  background: #f2f4f6;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.long-text-guide-card__detail-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.long-text-guide-card__detail-badge {
+  margin-left: 12px;
+}
+
+.long-text-guide-card__rich-body {
+  padding: 24px 22px 26px;
+}
+
+.long-text-guide-card__paragraph {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.long-text-guide-card__highlight {
+  color: #065f46;
+  background: #ecfdf5;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.long-text-guide-card__main-image {
+  height: 198px;
+  margin-bottom: 24px;
+}
+
+.long-text-guide-card__section-title {
+  margin-bottom: 12px;
+  line-height: 22px;
+}
+
+.long-text-guide-card__tip-block {
+  margin-bottom: 22px;
+  padding: 12px 18px;
+  border-left: 3px solid #34d399;
+  border-radius: 12px;
+}
+
+.long-text-guide-card__tip {
+  line-height: 24px;
+}
+
+.long-text-guide-card__action-zone {
+  border-top: 1px solid #f1f5f9;
+  padding: 16px 20px 20px;
+}
+
+.long-text-guide-card__action-label {
+  margin-bottom: 10px;
+  letter-spacing: 0.6px;
+}
+
+.long-text-guide-card__map-card {
+  border: 1px solid #f1f5f9;
+}
+
+.long-text-guide-card__map-image {
+  height: 138px;
+}
+
+.long-text-guide-card__map-tag {
+  position: absolute;
+  left: 14px;
+  bottom: 12px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.72);
+}
+
+.long-text-guide-card__map-bar {
+  padding: 14px 16px;
+}
+
+.long-text-guide-card__nav-btn {
+  padding: 12px 18px;
+  border-radius: 14px;
+}
+
+.long-text-guide-card__photo-card {
+  min-height: 178px;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
+.long-text-guide-card__photo-image {
+  height: 178px;
+}
+
+.long-text-guide-card__expand {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  width: 38px;
+  height: 38px;
+  background: rgba(15, 23, 42, 0.36);
 }

src/pages/test/index.vue

@@ -15,16 +15,6 @@
       />
     </view>
 
-    <view class="test-page__section">
-      <view class="test-page__section-title">LongTextGuideComboCard</view>
-      <LongTextGuideComboCard
-        :data="longTextGuideComboCardMock"
-        @select="handleEvent('LongTextGuideComboCard', 'select', $event)"
-        @back="handleEvent('LongTextGuideComboCard', 'back', $event)"
-        @action="handleEvent('LongTextGuideComboCard', 'action', $event)"
-      />
-    </view>
-
     <view class="test-page__section">
       <view class="test-page__section-title">PoiDetailCard</view>
       <PoiDetailCard
@@ -125,8 +115,6 @@
 <script setup>
 import LongTextGuideCard from "../ChatModule/LongTextGuideCard/index.vue";
 import longTextGuideCardMock from "../ChatModule/LongTextGuideCard/mocks";
-import LongTextGuideComboCard from "../ChatModule/LongTextGuideComboCard/index.vue";
-import longTextGuideComboCardMock from "../ChatModule/LongTextGuideComboCard/mocks";
 import PoiDetailCard from "../ChatModule/PoiDetailCard/index.vue";
 import poiDetailCardMock from "../ChatModule/PoiDetailCard/mocks";
 import RecommendationListCard from "../ChatModule/RecommendationListCard/index.vue";

src/static/scss/padding.scss

@@ -231,6 +231,10 @@
   padding-bottom: 16px;
 }
 
+.p-18 {
+  padding: 18px;
+}
+
 .p-20 {
   padding: 20px;
 }