zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
DEV_DSW
2026-05-13 14:30:39 +08:00
parent fe5dd78632
commit 63e7abbde8
5 changed files with 449 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/pages/ChatModule/LongTextGuideCard/index.vue
View File

@@ -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"
class="long-text-guide-card__item"
pressable
:disabled="disabled"
@select="openDetail(item)"
:key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box"
:class="{ 'is-disabled': disabled }"
@click="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"
:key="section.title || index"
class="long-text-guide-card__section"
class="long-text-guide-card__badge font-size-12 font-900"
:class="`is-${item.badgeTone}`"
>
<view class="long-text-guide-card__section-title color-1E293B font-size-15 font-900">{{ section.title }}</view>
<view class="long-text-guide-card__section-text color-475569 font-size-13 font-600">{{ section.content }}</view>
{{ item.badge }}
</view>
<view v-if="activeItem.action" class="long-text-guide-card__action">
<ActionRow
:title="activeItem.action.title"
:subtitle="activeItem.action.subtitle"
:icon="activeItem.action.icon"
tone="amber"
:disabled="disabled"
:payload="activeItem"
@action="$emit('action', $event)"
/>
<view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
{{ item.title }}
</view>
<view class="long-text-guide-card__summary-text color-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="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
<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">