feat: AI测试输出渲染Markdown/流式响应、Coze/Dify适配器优化

- 新增 MarkdownPreview 组件，支持 AI 测试输出 Markdown 渲染 - Coze 适配器优化：支持流式响应、工作流接口调用、SSE事件处理 - Dify 适配器优化：支持停止接口、流式聊天、SSE事件解析 - web-admin 添加 markdown-it 和 highlight.js 依赖 - AI 配置列表页面优化测试对话框输出显示 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 16:24:07 +08:00
parent d3746fa6c7
commit bdb4fd8c8e
9 changed files with 479 additions and 17 deletions
@@ -0,0 +1,119 @@
+<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>