EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一聊天 Markdown 渲染

Browse Source 
- 新增 ChatTimeMarkdown 并在管理端、用户端聊天入口复用

- 收敛聊天页面重复 Markdown 样式，保留工具和思考块独立渲染
This commit is contained in:
陈子默
2026-05-18 09:59:59 +08:00
parent a186066641
commit 0947009ee6
15 changed files with 638 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
View File

@@ -509,33 +509,6 @@ async function handleCopyMessage(item: ChatTimeTimelineItem) {
.chat-history-detail__markdown {
min-width: 0;
font-size: 14px;
line-height: 1.72;
}
.chat-history-detail__markdown :deep(.markdown-body) {
font-size: inherit;
line-height: inherit;
background: transparent;
}
.chat-history-detail__markdown :deep(.markdown-body > :first-child) {
margin-top: 0;
}
.chat-history-detail__markdown :deep(.markdown-body > :last-child) {
margin-bottom: 0;
}
.chat-history-detail__markdown :deep(.markdown-body p) {
font-size: inherit;
line-height: inherit;
}
.chat-history-detail__markdown :deep(pre) {
max-width: 100%;
margin-top: 0;
overflow: auto;
}
.chat-history-detail__tool-panel :deep(.el-collapse-item__wrap) {

7
easyflow-ui-admin/app/src/components/chat/ChatTimeMessageContent.vue
View File

@@ -5,9 +5,8 @@ import type {
} from '@easyflow/types';
import { computed, ref } from 'vue';
import { XMarkdown as ElXMarkdown } from 'vue-element-plus-x';
import { ChatThinkingBlock } from '@easyflow/common-ui';
import { ChatThinkingBlock, ChatTimeMarkdown } from '@easyflow/common-ui';
import { IconifyIcon } from '@easyflow/icons';
import { CircleCheck } from '@element-plus/icons-vue';
@@ -75,7 +74,7 @@ function toggleToolExpanded() {
:status="segment.status"
class="chat-thinking-block-item"
/>
<ElXMarkdown v-else :markdown="segment.content" />
<ChatTimeMarkdown v-else :content="segment.content" />
</template>
</div>
</template>
@@ -125,7 +124,7 @@ function toggleToolExpanded() {
</div>
</template>
<ElXMarkdown v-else :markdown="item.content" />
<ChatTimeMarkdown v-else :content="item.content" />
</template>
<style scoped>

28
easyflow-ui-admin/app/src/views/ai/chat/index.vue
View File

@@ -2274,39 +2274,13 @@ async function deleteSession(targetSession?: SessionItem) {
background: transparent;
}
.chat-workspace__message-bubble.is-assistant :deep(.markdown-body),
.chat-workspace__message-bubble.is-user :deep(.markdown-body),
.chat-workspace__message-bubble.is-tool :deep(.markdown-body) {
font-size: 14px;
line-height: 1.72;
background: transparent;
}
.chat-workspace__message-bubble.is-user :deep(.chat-time-markdown),
.chat-workspace__message-bubble.is-user :deep(.elx-xmarkdown-container),
.chat-workspace__message-bubble.is-user :deep(.elx-xmarkdown-provider) {
width: auto;
max-width: 100%;
}
.chat-workspace__message-bubble.is-assistant :deep(.markdown-body > :first-child),
.chat-workspace__message-bubble.is-user :deep(.markdown-body > :first-child),
.chat-workspace__message-bubble.is-tool :deep(.markdown-body > :first-child) {
margin-top: 0;
}
.chat-workspace__message-bubble.is-assistant :deep(.markdown-body > :last-child),
.chat-workspace__message-bubble.is-user :deep(.markdown-body > :last-child),
.chat-workspace__message-bubble.is-tool :deep(.markdown-body > :last-child) {
margin-bottom: 0;
}
.chat-workspace__message-bubble.is-assistant :deep(.markdown-body p),
.chat-workspace__message-bubble.is-user :deep(.markdown-body p),
.chat-workspace__message-bubble.is-tool :deep(.markdown-body p) {
font-size: inherit;
line-height: inherit;
}
.chat-workspace__message-bubble.is-assistant :deep(pre),
.chat-workspace__message-bubble.is-user :deep(pre),
.chat-workspace__message-bubble.is-tool :deep(pre) {

47
easyflow-ui-admin/app/src/views/publicChat/index.vue
View File

@@ -12,10 +12,9 @@ import {
ref,
watch,
} from 'vue';
import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
import { useRoute, useRouter } from 'vue-router';
import { ChatThinkingBlock } from '@easyflow/common-ui';
import { ChatThinkingBlock, ChatTimeMarkdown } from '@easyflow/common-ui';
import { LOGIN_PATH } from '@easyflow/constants';
import { IconifyIcon } from '@easyflow/icons';
import { $t } from '@easyflow/locales';
@@ -1854,9 +1853,9 @@ function prefetchVisibleVariants() {
]"
>
<template v-if="segment.type === 'text'">
<ElXMarkdown
<ChatTimeMarkdown
class="public-chat-markdown"
:markdown="segment.content"
:content="segment.content"
/>
</template>
<template v-else-if="segment.type === 'thinking'">
@@ -2342,50 +2341,10 @@ function prefetchVisibleVariants() {
box-shadow: 0 2px 6px rgb(15 23 42 / 5%);
}
.public-chat-markdown {
color: var(--pc-ink);
}
.public-chat-thinking-block {
margin-bottom: 8px;
}
.public-chat-markdown :deep(*) {
overflow-wrap: anywhere;
}
.public-chat-markdown :deep(p) {
margin: 0 0 10px;
}
.public-chat-markdown :deep(p:last-child) {
margin-bottom: 0;
}
.public-chat-markdown :deep(a) {
color: var(--pc-primary);
word-break: break-all;
text-decoration: underline;
}
.public-chat-markdown :deep(img) {
display: block;
max-width: min(100%, 420px);
height: auto;
margin: 10px 0;
border: 1px solid #dbe5f1;
border-radius: 10px;
box-shadow: 0 6px 18px rgb(15 23 42 / 8%);
}
.public-chat-markdown :deep(pre) {
padding: 10px 12px;
overflow: auto;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.public-chat-tool-header {
display: flex;
gap: 8px;