feat: 消息组件 回答组件

src/model/ChatModel.js

@@ -25,6 +25,8 @@ export const CompName = {
   callSurveyQuestionnaire: "callSurveyQuestionnaire",
   // 打开地图卡片
   openMapCard: "openMapCard",
+  // 回答卡片
+  answerCard: "answerCard",
 };
 
 /// 发送的指令类型

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

@@ -10,6 +10,7 @@
       :scroll-with-animation="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower">
       <!-- welcome栏 -->
       <ChatTopWelcome ref="welcomeRef" :mainPageDataModel="mainPageDataModel" />
+      <NoticeMessage></NoticeMessage>
 
       <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
         <template v-if="item.msgType === MessageRole.AI">
@@ -26,6 +27,9 @@
               <OpenMapComponent v-else-if="
                 item.toolCall.componentName === CompName.openMapCard
               " />
+              <AnswerComponent v-else-if="
+                item.toolCall.componentName === CompName.answerCard
+              " />
               <Feedback v-else-if="
                 item.toolCall.componentName === CompName.feedbackCard
               " :toolCall="item.toolCall" />
@@ -90,6 +94,7 @@ import {
 } from "@/constant/constant";
 import { MessageRole, CompName } from "@/model/ChatModel";
 import ChatTopWelcome from "../ChatTopWelcome/index.vue";
+import NoticeMessage from "../NoticeMessage/index.vue";
 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
 import ChatCardAI from "../ChatCardAi/index.vue";
 import ChatCardMine from "../ChatCardMine/index.vue";
@@ -103,6 +108,7 @@ import RecommendPostsComponent from "../../module/RecommendPostsComponent/index.
 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 CreateServiceOrder from "@/components/CreateServiceOrder/index.vue";
 import Feedback from "@/components/Feedback/index.vue";
 import AddCarCrad from "@/components/AddCarCrad/index.vue";

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

@@ -0,0 +1,31 @@
+<template>
+
+  <view class="border-box pl-12 pr-12">
+    <view class="wrap rounded-20 bg-white relative overflow-hidden">
+      <view class="flex flex-col p-16 mr-110 border-box">
+        <view class="flex flex-row flex-items-center justify-center">
+          <view class="w-24 h-24 rounded-full bg-theme-color-500 flex flex-items-center flex-justify-center">
+            <uni-icons type="sound" size="16" color="#ffffff"/>
+          </view>
+          <text class="font-size-16 font-500 text-color-900 ml-6">临时提醒</text>
+        </view>
+        <view class="font-size-12 font-color-600 mt-8">现在拥堵严重请绕道而行现在拥堵严重，请绕道而行现在拥堵严重，请绕道而行现在拥堵严重请绕道而行现在拥堵严重，请绕道而行现在拥堵严重，请绕道而行</view>
+      </view>
+      <image class="mt-4 object-cover absolute right-0 bottom-0 bg-image" src="./notice_bg_img.png"/>
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.bg-image {
+  width: 140px;
+  height: 96px;
+}
+.mr-110 {
+    margin-right: 110px;
+}
+</style>

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

@@ -0,0 +1,50 @@
+<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 p-16 border-box">
+      <view class="flex flex-row flex-items-center 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">游玩划重点</text>
+      </view>
+      <!-- 文字内容，最多显示3行 -->
+      <view class="answer-content font-size-12 font-color-600 mt-8">
+        {{ answerText }}
+      </view>
+      <!-- 超过3行时显示...提示 -->
+      <view class="fles flex-row mt-8" v-if="isOverflow">
+        <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>
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isOverflow = ref(true)
+
+// 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
+const answerText = '建议一定要去「东华门」看角楼夕阳，那里是摄影师的私藏机位。御花园目前的玉兰花开得正好，别忘了抬头看看红墙上的猫。建议一定要去「东华门」看角楼夕阳，那里是摄影师的私藏机位。御花园目前的玉兰花开得正好，别忘了抬头看看红墙上的猫。'
+
+// 简单判断：12号字体3行约100个字符
+isOverflow.value = answerText.length > 100
+
+</script>
+
+<style scoped lang="scss">
+.icon-active {
+  margin-top: 1px;
+  color: $theme-color-500;
+}
+.answer-content {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 16px;
+}
+</style>

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

@@ -9,7 +9,7 @@
                 </view>
             </view>
             <view class="center ml-12">
-                <view class="font-color-800 font-size-14">打开导览地图</view>
+                <view class="font-color-900 font-size-14">打开导览地图</view>
                 <view class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</view>
             </view>
             <view class="ml-12 flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">

src/static/scss/height.scss

@@ -45,3 +45,7 @@
 .h-80 {
   height: 80px;
 }
+
+.h-96 {
+  height: 96px;
+}

src/static/scss/margin.scss

@@ -130,3 +130,7 @@
 .ml-30 {
   margin-left: 30px;
 }
+
+.mr-88 {
+  margin-right: 88px;
+}