You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.6 KiB
135 lines
2.6 KiB
<script setup lang="ts">
|
|
import { marked } from "marked";
|
|
|
|
const props = defineProps<{
|
|
text: string;
|
|
}>();
|
|
|
|
marked.setOptions({ breaks: true, gfm: true });
|
|
|
|
const html = computed(() => {
|
|
if (!props.text) return "";
|
|
try {
|
|
return marked.parse(props.text, { async: false }) as string;
|
|
} catch {
|
|
return props.text;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="agent-markdown markdown-body" v-html="html" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.agent-markdown {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: var(--color-ink);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.agent-markdown :deep(p) {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.agent-markdown :deep(p:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.agent-markdown :deep(h1),
|
|
.agent-markdown :deep(h2),
|
|
.agent-markdown :deep(h3),
|
|
.agent-markdown :deep(h4) {
|
|
font-weight: 600;
|
|
margin: 20px 0 8px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.agent-markdown :deep(h1) { font-size: 1.5em; }
|
|
.agent-markdown :deep(h2) { font-size: 1.3em; }
|
|
.agent-markdown :deep(h3) { font-size: 1.15em; }
|
|
.agent-markdown :deep(h4) { font-size: 1em; }
|
|
|
|
.agent-markdown :deep(ul),
|
|
.agent-markdown :deep(ol) {
|
|
margin: 0 0 12px;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.agent-markdown :deep(li) {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.agent-markdown :deep(code) {
|
|
font-family: "SF Mono", "Fira Code", monospace;
|
|
font-size: 0.88em;
|
|
background: var(--color-surface-soft);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.agent-markdown :deep(pre) {
|
|
background: var(--color-surface-dark);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
overflow-x: auto;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.agent-markdown :deep(pre code) {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--color-on-dark);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.agent-markdown :deep(blockquote) {
|
|
border-left: 3px solid var(--color-primary);
|
|
margin: 0 0 12px;
|
|
padding: 4px 16px;
|
|
color: var(--color-body);
|
|
background: var(--color-surface-soft);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.agent-markdown :deep(a) {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.agent-markdown :deep(a:hover) {
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
|
|
.agent-markdown :deep(table) {
|
|
border-collapse: collapse;
|
|
margin: 0 0 12px;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.agent-markdown :deep(th),
|
|
.agent-markdown :deep(td) {
|
|
border: 1px solid var(--color-hairline);
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.agent-markdown :deep(th) {
|
|
background: var(--color-surface-soft);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.agent-markdown :deep(hr) {
|
|
border: none;
|
|
border-top: 1px solid var(--color-hairline);
|
|
margin: 16px 0;
|
|
}
|
|
</style>
|
|
|