feat: v2.7.2 消息样式美化和优化代码 (#111)

* perf: 优化代码

* feat: 美化消息，支持 markdown 全语法

* chore: version 2.7.2

src/views/chat/components/Message/Text.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { marked } from 'marked'
-import includeCode from '@/utils/functions/includeCode'
+import hljs from 'highlight.js'
+
+const props = defineProps<Props>()
+
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  highlight(code) {
+    return hljs.highlightAuto(code).value
+  },
+})
 
 interface Props {
   inversion?: boolean
@@ -10,8 +19,6 @@ interface Props {
   loading?: boolean
 }
 
-const props = defineProps<Props>()
-
 const wrapClass = computed(() => {
   return [
     'text-wrap',
@@ -24,11 +31,8 @@ const wrapClass = computed(() => {
 })
 
 const text = computed(() => {
-  if (props.text) {
-    if (!includeCode(props.text))
-      return marked.parse(props.text)
-    return props.text
-  }
+  if (props.text)
+    return marked(props.text)
   return ''
 })
 </script>
@@ -39,25 +43,13 @@ const text = computed(() => {
       <span class="w-[5px] h-[20px] block animate-blink" />
     </template>
     <template v-else>
-      <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
-      <div v-else class="leading-relaxed break-all" v-html="text" />
+      <div class="leading-relaxed break-all">
+        <div :class="[{ 'markdown-body': !inversion }]" v-html="text" />
+      </div>
     </template>
   </div>
 </template>
 
 <style lang="less">
-.text-wrap{
-  img{
-    max-width: 100%;
-    vertical-align: middle;
-  }
-  a {
-    color: #2d5cf6
-  }
-}
-
-.hljs {
-  background-color: #fff0 !important;
-  white-space: break-spaces;
-}
+@import url(./style.less);
 </style>

src/views/chat/components/Message/index.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import Avatar from './Avatar.vue'
-import Text from './Text.vue'
+import AvatarComponent from './Avatar.vue'
+import TextComponent from './Text.vue'
 import { SvgIcon } from '@/components/common'
 
 interface Props {
@@ -36,14 +36,14 @@ function handleRegenerate() {
       class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
       :class="[inversion ? 'ml-3' : 'mr-3']"
     >
-      <Avatar :image="inversion" />
+      <AvatarComponent :image="inversion" />
     </div>
     <div class="flex flex-col flex-1 text-sm" :class="[inversion ? 'items-end' : 'items-start']">
       <span class="text-xs text-[#b4bbc4]">
         {{ dateTime }}
       </span>
       <div class="flex items-end gap-2 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
-        <Text
+        <TextComponent
           :inversion="inversion"
           :error="error"
           :text="text"

src/views/chat/components/Message/style.less

@@ -0,0 +1,22 @@
+.markdown-body {
+	background-color: transparent;
+	font-size: 14px;
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	pre code,
+	pre tt {
+		line-height: 1.65;
+	}
+
+	.highlight pre,
+	pre {
+		background-color: #fff;
+	}
+}