peanut
bdb4fd8c8e
- 新增 MarkdownPreview 组件，支持 AI 测试输出 Markdown 渲染 - Coze 适配器优化：支持流式响应、工作流接口调用、SSE事件处理 - Dify 适配器优化：支持停止接口、流式聊天、SSE事件解析 - web-admin 添加 markdown-it 和 highlight.js 依赖 - AI 配置列表页面优化测试对话框输出显示 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
120 lines
2.2 KiB
Vue
120 lines
2.2 KiB
Vue
<template>
|
|
<div class="markdown-preview" v-html="html"></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import MarkdownIt from 'markdown-it'
|
|
|
|
const props = defineProps<{
|
|
content?: string
|
|
}>()
|
|
|
|
const md = new MarkdownIt({
|
|
html: false,
|
|
linkify: true,
|
|
breaks: true
|
|
})
|
|
|
|
const html = computed(() => md.render(props.content || ''))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.markdown-preview {
|
|
color: rgba(226, 232, 240, 0.92);
|
|
font-size: 14px;
|
|
line-height: 1.75;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.markdown-preview :deep(h1),
|
|
.markdown-preview :deep(h2),
|
|
.markdown-preview :deep(h3),
|
|
.markdown-preview :deep(h4) {
|
|
margin: 14px 0 8px;
|
|
color: var(--ls-text);
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.markdown-preview :deep(h1) {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.markdown-preview :deep(h2) {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.markdown-preview :deep(h3) {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.markdown-preview :deep(p) {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.markdown-preview :deep(ul),
|
|
.markdown-preview :deep(ol) {
|
|
margin: 8px 0 12px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.markdown-preview :deep(li) {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.markdown-preview :deep(blockquote) {
|
|
margin: 12px 0;
|
|
padding: 8px 12px;
|
|
color: rgba(226, 232, 240, 0.78);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-left: 3px solid rgba(255, 171, 145, 0.55);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.markdown-preview :deep(code) {
|
|
padding: 2px 5px;
|
|
color: #ffd6c8;
|
|
background: rgba(255, 171, 145, 0.12);
|
|
border-radius: 4px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.markdown-preview :deep(pre) {
|
|
overflow: auto;
|
|
margin: 12px 0;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.28);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.markdown-preview :deep(pre code) {
|
|
padding: 0;
|
|
color: rgba(226, 232, 240, 0.92);
|
|
background: transparent;
|
|
}
|
|
|
|
.markdown-preview :deep(table) {
|
|
width: 100%;
|
|
margin: 12px 0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.markdown-preview :deep(th),
|
|
.markdown-preview :deep(td) {
|
|
padding: 8px 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.markdown-preview :deep(th) {
|
|
color: var(--ls-text);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.markdown-preview :deep(a) {
|
|
color: #81d4fa;
|
|
}
|
|
</style>
|