feat: 样式的调整

src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue

@@ -1,9 +1,18 @@
 <template>
   <view v-if="shouldRenderField" class="parsed-value">
     <template v-for="entry in renderFieldEntries" :key="entry.key">
-      <view v-if="entry.type === 'text'" class="content-body-text">
-        {{ entry.value }}
-      </view>
+      <template v-if="entry.type === 'text'">
+        <image v-if="entry.key === LONG_TEXT_KEYS.contentImage"
+          class="content-body-image"
+          :src="entry.value"
+          mode="widthFix"
+          @click="handlePreviewClick(entry.value)"
+        />
+        <view v-else  class="content-body-text">
+          {{ entry.value }}
+        </view>
+      </template>
+      
       <view v-else-if="entry.type === 'image'" class="content-body-image-card">
         <image
           class="content-body-image"
@@ -15,28 +24,61 @@
           {{ entry.value.caption }}
         </view>
       </view>
-      <view
-        v-else-if="entry.type === 'list'"
-        class="content-body-list-card"
-        :style="contentBodyListCardStyle"
-      >
-        <view
-          v-for="(item, index) in entry.value"
-          :key="index"
-          class="content-body-list-item"
+      <template v-else-if="entry.type === 'list'">
+        <template v-if="entry.key === LONG_TEXT_KEYS.questionSuggest">
+          <view class="detail-action-label">继续追问</view>
+          <view class="detail-faq-wrap">
+            <view
+              v-for="question in entry.value"
+              :key="question"
+              class="detail-faq-chip"
+              @click="sendReply(question)"
+            >
+              {{ question }}
+            </view>
+          </view>
+        </template>
+
+        <view v-else
+          class="content-body-list-card"
+          :style="contentBodyListCardStyle"
         >
-          <view class="content-body-list-text" :style="contentBodyListTextStyle">
-            {{ formatLeafValue(item) }}
+          <view v-for="(item, index) in entry.value"
+            :key="index"
+            class="content-body-list-item"
+          >
+            <view class="content-body-list-text" :style="contentBodyListTextStyle">
+              {{ formatLeafValue(item) }}
+            </view>
           </view>
         </view>
-      </view>
+      </template>
+
+      <template v-else-if="entry.type === 'object'">
+        <template v-if="entry.key === LONG_TEXT_KEYS.spotLocate">
+          <view class="detail-action-zone">
+            <view class="detail-action-label">查看景点详情</view>
+            <view class="detail-action-card is-raised">
+              <view v-if="poiTag" class="poi-mini-tag">{{ entry.value.sopt_tag }}</view>
+              <view class="poi-mini-body">
+                <view class="poi-mini-title">{{ entry.value.sopt_name }}</view>
+                <view class="poi-mini-desc">{{ entry.value.spot_description }}</view>
+                <button class="detail-solid-button" @click.stop="openMap(entry.value)">带我去</button>
+              </view>
+            </view>
+          </view>
+        </template>
+        
+      </template>
     </template>
   </view>
 </template>
 
 <script setup>
 import { computed, defineProps, ref } from "vue";
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
 import { getRandomTagToneStyle } from "@/utils/tagTone";
+import { LONG_TEXT_KEYS } from "@/utils/longTextCard";
 
 const props = defineProps({
   fieldKey: {
@@ -181,6 +223,22 @@ const renderFieldEntries = computed(() => {
 const isIgnoredField = computed(() => IGNORED_FIELD_KEYS.includes(props.fieldKey));
 const shouldRenderField = computed(() => renderFieldEntries.value.length > 0);
 
+const openMap = (spot) => {
+  const latitude = spot.latitude;
+  const longitude = spot.longitude;
+  const address = spot.name || '';
+  uni.getLocation({ type: 'gcj02', success: () => {
+    uni.openLocation({ latitude, longitude, address });
+  }, fail: () => {
+    uni.openLocation({ latitude, longitude, address });
+  }});
+};
+
+const sendReply = (item) => {
+  uni.navigateBack();
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+
 const handlePreviewClick = (imageUrl) => {
   uni.previewImage({
     current: imageUrl,
@@ -191,56 +249,5 @@ const handlePreviewClick = (imageUrl) => {
 </script>
 
 <style scoped lang="scss">
-.parsed-value {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.content-body-text {
-  color: #111827;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
-.content-body-image-card {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.content-body-image {
-  width: 100%;
-  display: block;
-  border-radius: 8px;
-  background: #f3f4f6;
-}
-
-.content-body-image-caption {
-  color: #6b7280;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18px;
-}
-
-.content-body-list-card {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 12px;
-  border-radius: 12px;
-}
-
-.content-body-list-item {
-  display: flex;
-  align-items: flex-start;
-}
-
-.content-body-list-text {
-  flex: 1;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 20px;
-}
+@import "./styles/ParsedValueView.scss";
 </style>