mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-13 12:56:49 +08:00
feat: 优化打字机的显示效果,避免 网页闭合标签扰乱
This commit is contained in:
@@ -14,14 +14,13 @@
|
|||||||
<span class="speakLoadingToast pv10">
|
<span class="speakLoadingToast pv10">
|
||||||
<van-loading type="spinner" :color="primaryColor" size="20px" v-if="!message.text" />
|
<van-loading type="spinner" :color="primaryColor" size="20px" v-if="!message.text" />
|
||||||
<span class="loading-text">{{ message.text ? '思考完成' : '思考中...' }}</span>
|
<span class="loading-text">{{ message.text ? '思考完成' : '思考中...' }}</span>
|
||||||
<van-icon name="arrow-up" :class="message.showThink ? 'rate360' : 'rate180'" @click="showThink(message)"
|
<van-icon name="arrow-up" :class="message.showThink ? 'rate360' : 'rate180'" @click="showThink(message)" v-if="message.think" />
|
||||||
v-if="message.think" />
|
|
||||||
</span>
|
</span>
|
||||||
<!--开启思考-->
|
<!--开启思考-->
|
||||||
<p v-html="md.render(message.think)" v-if="message.think && message.showThink" class="thinkText" />
|
<p v-html="md.render(message.think)" v-if="message.think && message.showThink" class="thinkText" />
|
||||||
</span>
|
</span>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<p v-html="render(message)" class='render-container'></p>
|
<p v-html="render(message)" class="render-container"></p>
|
||||||
<span class="speakLoadingToast pv10" v-if="!filterVisible(message)">
|
<span class="speakLoadingToast pv10" v-if="!filterVisible(message)">
|
||||||
<van-loading type="spinner" :color="primaryColor" size="20px" />
|
<van-loading type="spinner" :color="primaryColor" size="20px" />
|
||||||
</span>
|
</span>
|
||||||
@@ -51,7 +50,7 @@ import markdownItKatex from 'markdown-it-katex'
|
|||||||
const md = new MarkdownIt({
|
const md = new MarkdownIt({
|
||||||
html: true,
|
html: true,
|
||||||
linkify: true,
|
linkify: true,
|
||||||
typographer: true,
|
typographer: true
|
||||||
}).use(markdownItKatex)
|
}).use(markdownItKatex)
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -60,21 +59,21 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
messagesList: {
|
messagesList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => []
|
||||||
},
|
},
|
||||||
thinkOk: {
|
thinkOk: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false
|
||||||
},
|
},
|
||||||
isDeep: {
|
isDeep: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
md,
|
md,
|
||||||
primaryColor: '#57a6fc',
|
primaryColor: '#57a6fc'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -85,23 +84,24 @@ export default {
|
|||||||
this.$emit('setProductName', e)
|
this.$emit('setProductName', e)
|
||||||
},
|
},
|
||||||
filterVisible(message) {
|
filterVisible(message) {
|
||||||
// 捕获 不包含 < 的后置标签 ( .*>)
|
|
||||||
let _text = message.text.replace(/(?<![/|<])^\w*>/g, '')
|
|
||||||
// 把 未闭合的标签替换成空白
|
|
||||||
_text = _text.replace(/<\/\w*$/g, '')
|
|
||||||
return _text
|
|
||||||
if (!message.text.startsWith('<')) {
|
if (!message.text.startsWith('<')) {
|
||||||
return message.text
|
let text = message.text
|
||||||
|
// 如果开头是中文,直接返回
|
||||||
|
if (new RegExp('^[\u4e00-\u9fa5]+', 'g').test(text)) return text
|
||||||
|
|
||||||
|
// 捕获 不包含 < 的后置标签 span> /span> a</span>
|
||||||
|
text = text.replace(/^[\/]?[a-zA-z0-9]+[</\w>]+/g, '')
|
||||||
|
// 尝试匹配 </abc> 标签
|
||||||
|
text = text.replace(/^<\/\w+>/g, '')
|
||||||
|
// 尝试把 </ 标签去除
|
||||||
|
text = text.replace(/[<\/]+$/g, '')
|
||||||
|
console.log(text);
|
||||||
|
|
||||||
|
return text
|
||||||
}
|
}
|
||||||
// 只把 text 标签内容渲染
|
// 只把 text 标签内容渲染
|
||||||
let match = /<text>([^<]*)(?:<\/text>)?/.exec(message.text)
|
let match = /<text>([^<]*)(?:<\/text>)?/.exec(message.text)
|
||||||
let text = match ? match[1] : ''
|
let text = match ? match[1] : ''
|
||||||
// 捕获 不包含 < 的后置标签 ( .*>)
|
|
||||||
text = text.replace(/(?<![/|<])^\w*>/g, '')
|
|
||||||
// 把 未闭合的标签替换成空白
|
|
||||||
text = text.replace(/<\/\w*$/g, '')
|
|
||||||
console.log(text);
|
|
||||||
|
|
||||||
return text
|
return text
|
||||||
},
|
},
|
||||||
showThink(message) {
|
showThink(message) {
|
||||||
@@ -119,7 +119,7 @@ export default {
|
|||||||
}
|
}
|
||||||
// 触发父组件的更新事件
|
// 触发父组件的更新事件
|
||||||
this.$emit('update-message', { ...message })
|
this.$emit('update-message', { ...message })
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.md = md
|
window.md = md
|
||||||
|
|||||||
Reference in New Issue
Block a user