update: md渲染优化与依赖更新(0715 02:07)

This commit is contained in:
Gsh
2025-07-16 00:12:00 +08:00
parent 94b96e3c19
commit 36b7e495f7
5 changed files with 76 additions and 26 deletions

View File

@@ -1,7 +1,6 @@
<!-- 每个回话对应的聊天内容 -->
<script setup lang="ts">
import type { AnyObject } from 'typescript-api-pro';
import type { Sender } from 'vue-element-plus-x';
import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
import type { BubbleListInstance } from 'vue-element-plus-x/types/BubbleList';
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
@@ -10,6 +9,7 @@ import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue'
import { ElIcon, ElMessage } from 'element-plus';
import { useHookFetch } from 'hook-fetch/vue';
import { computed, nextTick, ref, watch } from 'vue';
import { Sender } from 'vue-element-plus-x';
import { useRoute } from 'vue-router';
import { send } from '@/api';
import ModelSelect from '@/components/ModelSelect/index.vue';
@@ -27,6 +27,7 @@ type MessageItem = BubbleProps & {
avatar: string;
thinkingStatus?: ThinkingStatus;
thinlCollapse?: boolean;
reasoning_content?: string;
};
const route = useRoute();
@@ -242,6 +243,7 @@ function addMessage(message: string, isUser: boolean) {
reasoning_content: '',
thinkingStatus: 'start',
thinlCollapse: false,
noStyle: !isUser,
};
bubbleItems.value.push(obj);
}
@@ -292,7 +294,12 @@ function copy(item: any) {
</template>
<!-- 自定义气泡内容 -->
<template #content="{ item }">
<XMarkdown v-if="item.content" class="markdown-body" :markdown="item.content" />
<!-- chat 内容走 markdown -->
<XMarkdown v-if="item.content && (item.role === 'assistant' || item.role === 'system')" class="markdown-body" :markdown="item.content" :themes="{ light: 'github-light', dark: 'github-dark' }" default-theme-mode="dark" />
<!-- user 内容 纯文本 -->
<div v-if="item.content && item.role === 'user'" class="user-content">
{{ item.content }}
</div>
</template>
<!-- 自定义底部 -->
@@ -392,9 +399,21 @@ function copy(item: any) {
overflow: hidden;
border-radius: 12px;
}
.user-content {
// 换行
white-space: pre-wrap;
}
.markdown-body {
background-color: transparent;
}
.markdown-elxLanguage-header-div {
top: -25px !important;
}
// xmarkdown 样式
.elx-xmarkdown-container {
padding: 8px 4px;
}
}
.chat-defaul-sender {
width: 100%;