feat: 添加预览组件

2026-05-25 16:32:40 +08:00
parent cf13fc7e9b
commit e0a28c87fb
3 changed files with 282 additions and 2 deletions
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -103,20 +103,26 @@
                  item.toolCall.componentName === CompName.mapCard
                "
              />
-              <GeneratorPhotoComponent
+              <!-- <GeneratorPhotoComponent
                v-else-if="
                  item.toolCall &&
                  item.toolCall.componentName ===
                    CompName.aigcPhotoGeneratorCard
                "
                :toolCall="item.toolCall"
-              />
+              /> -->
              <!-- <ZModuleC01
                v-else-if="
                  item.toolCall &&
                  item.toolCall.componentName === CompName.aigcPhotoGeneratorCard
                "
              /> -->
+              <LongTextGuideCardPreview
+                v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.aigcPhotoGeneratorCard
+              " :componentName="item.toolCall.componentName" />
+              

              <Feedback
                v-else-if="
@@ -244,6 +250,7 @@ import AnswerComponent from "../../ChatModule/AnswerComponent/index.vue";
 import GeneratorPhotoComponent from "../../ChatModule/GeneratorPhotoComponent/index.vue";

 import ZModuleC01 from "../../ChatModule/ZModuleC01/index.vue";
+import LongTextGuideCardPreview from "../../ChatModule/LongTextGuideCardPreview/index.vue";

 import CreateServiceOrder from "@/components/CreateServiceOrder/index.vue";
 import Feedback from "@/components/Feedback/index.vue";
--- a/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+    <!-- 占位撑开 -->
+    <view class="w-vw"></view>
+    <view class="flex flex-col px-16 pt-16 pb-12 border-box">
+
+      <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 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>
+        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+      </view>
+
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+import { defineProps,computed } from "vue";
+const props = defineProps({
+  componentName: {
+    type: String,
+    default: 'longTextCard',
+  },
+});
+
+const longTextCard = {
+  badge: "漂流攻略",
+  badgeTone: "amber",
+  title: "下水之前，先听小七唠两句",
+  summary: "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
+  footer: "点击查看完整攻略",
+}
+
+const longTextCardSnap = {
+  badge: "景点故事",
+  badgeTone: "blue",
+  title: "小七孔古桥 · 走了三百年的石拱",
+  summary: "小七孔古桥是一座三百岁的七孔石桥，小七孔的名字就从这儿来…",
+  footer: "点击查看完整介绍",
+}
+
+const longTextCardRoute = {
+  badge: "路线指引",
+  badgeTone: "green",
+  title: "漂完卧龙潭，顺道去鸳鸯湖",
+  summary: "卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
+  footer: "点击查看完整路线",
+}
+
+const longTextCardScenicSpot = {
+  badge: "拍照攻略",
+  badgeTone: "indigo",
+  title: "鸳鸯湖玻璃船，这样拍才不亏",
+  summary: "玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…",
+  footer: "点击查看完整攻略",
+}
+
+const item = computed(() => {
+  switch (props.componentName) {
+    case 'longTextCard':
+      return longTextCard;
+    case 'longTextCardSnap':
+      return longTextCardSnap;
+    case 'longTextCardRoute':
+      return longTextCardRoute;
+    case 'longTextCardScenicSpot':
+      return longTextCardScenicSpot;
+    default:
+      return longTextCard;
+  }
+});
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
--- a/src/pages/ChatModule/LongTextGuideCardPreview/styles/index.scss
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/styles/index.scss
@@ -0,0 +1,186 @@
+.long-text-guide-card__summary-card {
+  min-height: 178px;
+  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__summary-card:active {
+  transform: scale(0.985);
+}
+
+.long-text-guide-card__summary-card.is-disabled {
+  opacity: 0.55;
+}
+
+.long-text-guide-card__badge {
+  display: inline-flex;
+  width: fit-content;
+  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__summary-footer {
+  margin-top: 24px;
+}
+
+.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);
+}