feat: 生成照片的组件搭建

src/model/ChatModel.js

@@ -24,9 +24,11 @@ export const CompName = {
   // 调查问卷卡片
   callSurveyQuestionnaire: "callSurveyQuestionnaire",
   // 打开地图卡片
-  openMapCard: "openMapCard",
+  mapCard: "mapCard",
   // 回答卡片
   longTextCard: "longTextCard",
+  // 生成合成图片
+  generatorPhotoCard: "generatorPhotoCard",
 };
 
 /// 发送的指令类型

src/pages/index/components/chat/ChatMainList/index.vue

@@ -19,8 +19,7 @@
             <template #content v-if="item.toolCall || item.componentName">
               <AnswerComponent v-if="
                 item.componentName === CompName.longTextCard
-              " :answer-text="item.msg" :title="item.title" />
+              " :text="item.msg" :title="item.title" />
-
               <QuickBookingComponent v-if="
                 item.toolCall && item.toolCall.componentName === CompName.quickBookingCard
               " />
@@ -31,7 +30,10 @@
                 item.toolCall && item.toolCall.componentName === CompName.callServiceCard
               " :toolCall="item.toolCall" />
               <OpenMapComponent v-else-if="
-                item.toolCall && item.toolCall.componentName === CompName.openMapCard
+                item.toolCall && item.toolCall.componentName === CompName.mapCard
+              " />
+              <GeneratorPhotoComponent v-else-if="
+                item.toolCall && item.toolCall.componentName === CompName.generateMessageId
               " />
               <Feedback v-else-if="
                 item.toolCall && item.toolCall.componentName === CompName.feedbackCard
@@ -111,6 +113,7 @@ import AttachListComponent from "../../module/AttachListComponent/index.vue";
 import DetailCardCompontent from "../../module/DetailCardCompontent/index.vue";
 import OpenMapComponent from "../../module/OpenMapComponent/index.vue";
 import AnswerComponent from "../../module/AnswerComponent/index.vue";
+import GeneratorPhotoComponent from "../../module/GeneratorPhotoComponent/index.vue";
 import CreateServiceOrder from "@/components/CreateServiceOrder/index.vue";
 import Feedback from "@/components/Feedback/index.vue";
 import AddCarCrad from "@/components/AddCarCrad/index.vue";

src/pages/index/components/module/AnswerComponent/index.vue

@@ -3,16 +3,16 @@
     <!-- 占位撑开 -->
     <view class="w-vw"></view>
     <view class="flex flex-col p-16 border-box">
-      <view class="flex flex-row flex-items-center justify-center">
+      <view class="flex flex-row flex-items-start justify-center">
         <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
         <text class="font-size-16 font-500 text-color-900 ml-6">{{ title }}</text>
       </view>
       <!-- 文字内容，最多显示3行 -->
       <view class="answer-content font-size-12 font-color-600 mt-8">
-        <ChatMarkdown :text="answerText" />
+        <ChatMarkdown :key="textKey" :text="processedText" />
       </view>
       <!-- 超过3行时显示...提示 -->
-      <view class="fles flex-row mt-8" v-if="isOverflow" @click="lookDetailAction">
+      <view class="flex flex-row mt-8" v-if="isOverflow" @click="lookDetailAction">
         <text class="font-size-12 font-400 theme-color-500 mr-4">查看详情</text>
         <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
       </view>
@@ -22,10 +22,11 @@
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue'
+import { defineProps, computed, ref, watch } from "vue";
+
 import ChatMarkdown from "../../chat/ChatMarkdown/index.vue";
 
-const isOverflow = ref(true)
+const isOverflow = ref(false)
 
 // 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
 const props = defineProps({
@@ -33,18 +34,38 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  answerText: {
+  text: {
     type: String,
     default: "",
   }
 });
 
-// 简单判断：12号字体3行约100个字符
+// 用于强制重新渲染的key
-isOverflow.value = props.answerText.length > 100
+const textKey = ref(0);
+
+// 处理文本内容（纯计算，不应有副作用）
+const processedText = computed(() => {
+  if (!props.text) return "";
+  return String(props.text);
+});
+
+// 监听 text 变化：更新 textKey 并同步 isOverflow（合并为单一响应函数，避免冗余）
+watch(
+  () => props.text,
+  (newText, oldText) => {
+    const textStr = newText ? String(newText) : "";
+    isOverflow.value = textStr.length > 100;
+    if (newText !== oldText) {
+      textKey.value++;
+    }
+  },
+  { immediate: true }
+);
 
 const lookDetailAction = () => {
+  const message = props.text ? String(props.text) : "";
   uni.navigateTo({
-    url: `/pages/long-answer/index?message=${props.answerText}`,
+    url: `/pages/long-answer/index?message=${encodeURIComponent(message)}`,
   });
 }
 

src/pages/index/components/module/GeneratorPhotoComponent/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="container w-full border-box border-ff overflow-hidden rounded-24 flex flex-col">
+    <!-- 占位撑开 -->
+    <view class="w-vw"></view>
+    <view class="content flex flex-col m-4 border-box rounded-24">
+      <view class="flex flex-col p-6 border-box flex-items-center justify-center">
+        <image class="w-full rounded-20" src="./images/g_image.png" mode="widthFix" />
+
+        <image class="g_title mt-20" src="./images/g_title.png"  />
+
+        <text class="font-size-14 font-400 color-white my-12 text-center">
+          生成合照写真，一键出片 \n
+          来到小七孔不打个卡再走吗？？？！！！
+        </text>
+
+        <view class="w-full border-box px-12 pb-8 flex flex-row">
+          <view class="btn-bg w-full border-box p-4 rounded-24 flex flex-row">
+            <view class="btn-bg-sub w-full border-box p-16 rounded-20 flex flex-row flex-items-center flex-justify-center color-white text-center font-size-18 font-800">
+              参加活动
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  
+</template>
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

src/pages/index/components/module/GeneratorPhotoComponent/styles/index.scss

@@ -0,0 +1,23 @@
+.container {
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: 0px 9px 34px 0px rgba(27, 9, 91, 0.07);
+}
+
+.content {
+  background: linear-gradient(180deg, $theme-color-100 0%, $theme-color-500 100%);
+  border-radius: 24px 24px 24px 24px;
+  border: 1px solid #FFFFFF;
+}
+
+.g_title {
+  width: 197px;
+  height: 42px;
+}
+
+.btn-bg {
+  background: rgba(255, 255, 255, 0.32);
+}
+
+.btn-bg-sub {
+  box-shadow: inset 0px 0px 41px 0px $theme-color-50, inset 0px 0px 15px 0px $theme-color-100;
+}

src/pages/long-answer/index.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 });
 
 onLoad(({ message = "" }) => {
-  props.answerText = message;
+  props.answerText = decodeURIComponent(message);
 });
 
 </script>

src/static/scss/rounded.scss

@@ -31,6 +31,10 @@
   border-radius: 20px;
 }
 
+.rounded-24 {
+  border-radius: 24px;
+}
+
 .rounded-50 {
   border-radius: 50px;
 }