YGChatCS/src/pages/ChatModule/LongTextGuideCard/index.vue

<template>
  <view class="long-text-guide-card w-full">
    <view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
      <view v-for="item in cards" :key="item.id"
        class="long-text-guide-card__summary-card bg-white rounded-[24px] border-box"
        :class="{ 'is-disabled': disabled }" @click="openDetail(item)">
        <view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
          {{ item.badge }}
        </view>
        <view class="long-text-guide-card__summary-title text-[#1e293b] font-size-18 font-900">
          {{ item.title }}
        </view>
        <view class="long-text-guide-card__summary-text text-[#94a3b8] font-size-14 font-500 ellipsis-2">
          {{ item.summary }}
        </view>
        <view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
          <text class="text-[#cbd5e1] font-size-12 font-800">{{ item.footer }}</text>
          <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
        </view>
      </view>
    </view>

    <view v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] 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">
          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
        </view>
        <view class="long-text-guide-card__detail-title text-[#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 text-[#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-[14px] block"
          :src="activeItem.image" mode="aspectFill" />

        <view class="long-text-guide-card__section-title text-[#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 text-[#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 text-[#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 text-[#94a3b8] font-size-11 font-800">
          {{ activeItem.action.label }}
        </view>
        <view class="long-text-guide-card__map-card rounded-[16px] 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 text-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="text-[#1e293b] font-size-15 font-900">{{ activeItem.action.title }}</view>
              <view class="text-[#94a3b8] font-size-12 font-800 mt-[2px]">{{ activeItem.action.subtitle }}</view>
            </view>
            <view class="long-text-guide-card__nav-btn text-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 text-[#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 text-white font-size-18 font-900">
            ↗
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["select", "back", "action"]);

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 paragraphsBeforeImage = computed(() => activeItem.value.paragraphs?.slice(0, 1) || []);
const paragraphsAfterTips = computed(() => activeItem.value.paragraphs?.slice(1) || []);

const openDetail = (item) => {
  if (props.disabled) return;
  selected.value = item;
  emit("select", item);
};

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">
@import "./styles/index.scss";
</style>