64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import { marked } from 'marked'
|
|
import includeCode from '@/utils/functions/includeCode'
|
|
|
|
interface Props {
|
|
inversion?: boolean
|
|
error?: boolean
|
|
text?: string
|
|
loading?: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const wrapClass = computed(() => {
|
|
return [
|
|
'text-wrap',
|
|
'p-3',
|
|
'min-w-[20px]',
|
|
'rounded-md',
|
|
props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
|
|
{ 'text-red-500': props.error },
|
|
]
|
|
})
|
|
|
|
const text = computed(() => {
|
|
if (props.text) {
|
|
if (!includeCode(props.text))
|
|
return marked.parse(props.text)
|
|
return props.text
|
|
}
|
|
return ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="wrapClass">
|
|
<template v-if="loading">
|
|
<span class="w-[5px] h-[20px] block animate-blink" />
|
|
</template>
|
|
<template v-else>
|
|
<code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
|
|
<div v-else class="leading-relaxed break-all" v-html="text" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.text-wrap{
|
|
img{
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
a {
|
|
color: #2d5cf6
|
|
}
|
|
}
|
|
|
|
.hljs {
|
|
background-color: #fff0 !important;
|
|
white-space: break-spaces;
|
|
}
|
|
</style>
|