feat: markdown 渲染

src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue

@@ -130,9 +130,11 @@
 
     <template v-else>
       <template v-for="entry in renderFieldEntries" :key="entry.key">
-        <view v-if="entry.type === 'text'" class="content-body-text">
-          {{ entry.value }}
-        </view>
+        <ChatMarkdown
+          v-if="entry.type === 'text'"
+          class="content-body-markdown"
+          :text="entry.value"
+        />
 
         <view v-else-if="entry.type === 'image'" class="content-body-image-card">
           <image class="content-body-image" :src="entry.value.image_id" mode="widthFix"
@@ -144,11 +146,14 @@
 
         <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">
-            <view v-if="entry.value.length > 1" class="content-body-list-marker" :style="contentBodyListTextStyle">
-              {{ formatListMarker(index) }}
-            </view>
-            <view class="content-body-list-text" :style="contentBodyListTextStyle">
-              {{ formatLeafValue(item) }}
+            <view class="content-body-list-text">
+              <ChatMarkdown
+                class="content-body-markdown"
+                :text="formatLeafValue(item)"
+                :theme-color="contentBodyMarkdownColor"
+                :font-color="contentBodyMarkdownColor"
+                :font-sub-color="contentBodyMarkdownColor"
+              />
             </view>
           </view>
         </view>
@@ -163,6 +168,7 @@ import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
 import { getAccessToken } from "@/constant/token";
 import { navigateTo } from "@/router";
 import { getRandomTagToneStyle } from "@/utils/tagTone";
+import ChatMarkdown from "../ChatMarkdown/index.vue";
 import {
   LONG_TEXT_KEYS,
   formatLongTextDisplayValue,
@@ -186,9 +192,7 @@ const contentBodyListCardStyle = computed(() => ({
   borderLeft: contentBodyListToneStyle.value.border,
   background: contentBodyListToneStyle.value.background,
 }));
-const contentBodyListTextStyle = computed(() => ({
-  color: contentBodyListToneStyle.value.color,
-}));
+const contentBodyMarkdownColor = computed(() => contentBodyListToneStyle.value.color);
 
 const IGNORED_FIELD_KEYS = ["container_type", "content", "components"];
 
@@ -211,17 +215,6 @@ const formatLeafValue = (value) => {
   return formatLongTextDisplayValue(value, IGNORED_FIELD_KEYS);
 };
 
-const LIST_MARKERS = [
-  "①", "②", "③", "④", "⑤",
-  "⑥", "⑦", "⑧", "⑨", "⑩",
-  "⑪", "⑫", "⑬", "⑭", "⑮",
-  "⑯", "⑰", "⑱", "⑲", "⑳",
-];
-
-const formatListMarker = (index) => {
-  return LIST_MARKERS[index] || `${index + 1}.`;
-};
-
 const toTrimmedText = (value) => {
   if (value === undefined || value === null) return "";
   return String(value).trim();

src/pages/ChatMain/ChatLongAnswer/styles/ParsedValueView.scss

@@ -3,11 +3,8 @@
   flex-direction: column;
 }
 
-.content-body-text {
-  color: #111827;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 20px;
+.content-body-markdown {
+  width: 100%;
 }
 
 .content-body-image-card {
@@ -38,10 +35,8 @@
 .content-body-list-card {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 12px;
+  padding: 12px 16px 12px 0;
   border-radius: 12px;
-  margin-bottom: 8px;
 }
 
 .content-body-list-item {
@@ -49,19 +44,9 @@
   align-items: flex-start;
 }
 
-.content-body-list-marker {
-  width: 22px;
-  flex-shrink: 0;
-  font-size: 15px;
-  font-weight: 800;
-  line-height: 20px;
-}
-
 .content-body-list-text {
   flex: 1;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 20px;
+  min-width: 0;
 }
 
 .detail-action-zone {

src/pages/ChatMain/ChatMarkdown/index.vue

@@ -1,6 +1,12 @@
 <template>
   <view class="container">
-    <zero-markdown-view :markdown="text" :aiMode="true"></zero-markdown-view>
+    <zero-markdown-view
+      :markdown="text"
+      :aiMode="true"
+      :theme-color="themeColor"
+      :font-color="fontColor"
+      :font-sub-color="fontSubColor"
+    ></zero-markdown-view>
   </view>
 </template>
 
@@ -12,6 +18,18 @@ defineProps({
     type: String,
     default: "",
   },
+  themeColor: {
+    type: String,
+    default: "#181B25",
+  },
+  fontColor: {
+    type: String,
+    default: "#181B25",
+  },
+  fontSubColor: {
+    type: String,
+    default: "#717784",
+  },
 });
 </script>