feat: markdown 样式调整
This commit is contained in:
parent
317f7d01dd
commit
5072dc92a3
@ -1,79 +1,85 @@
|
||||
<template>
|
||||
<view class="zero-markdown-view">
|
||||
<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
|
||||
:markdown="true" :content="contentAi">
|
||||
<mp-html
|
||||
:key="mpkey"
|
||||
:selectable="selectable"
|
||||
:scroll-table="scrollTable"
|
||||
:tag-style="tagStyle"
|
||||
:markdown="true"
|
||||
:content="contentAi"
|
||||
>
|
||||
</mp-html>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpHtml from '../mp-html/mp-html';
|
||||
|
||||
import mpHtml from "../mp-html/mp-html";
|
||||
|
||||
export default {
|
||||
name: 'zero-markdown-view',
|
||||
name: "zero-markdown-view",
|
||||
components: {
|
||||
mpHtml
|
||||
mpHtml,
|
||||
},
|
||||
props: {
|
||||
markdown: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
selectable: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
scrollTable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
themeColor: {
|
||||
type: String,
|
||||
default: '#00A6FF'
|
||||
default: "#00A6FF",
|
||||
},
|
||||
codeBgColor: {
|
||||
type: String,
|
||||
default: '#2d2d2d'
|
||||
default: "#2d2d2d",
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: 'PingFang SC, PingFang SC'
|
||||
default: "PingFang SC, PingFang SC",
|
||||
},
|
||||
aiMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
tagStyle: '',
|
||||
mpkey: 'zero'
|
||||
content: "",
|
||||
tagStyle: "",
|
||||
mpkey: "zero",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
contentAi() {
|
||||
if (!this.content) {
|
||||
return //处理特殊情况,比如网络异常导致的响应的 content 的值为空
|
||||
return; //处理特殊情况,比如网络异常导致的响应的 content 的值为空
|
||||
}
|
||||
let htmlString = ''
|
||||
let htmlString = "";
|
||||
// 检查是否有未闭合的代码块
|
||||
const codeBlocks = this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || []
|
||||
const lastBlock = codeBlocks[codeBlocks.length - 1]
|
||||
if (lastBlock && !lastBlock.endsWith('```')) {
|
||||
const codeBlocks =
|
||||
this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || [];
|
||||
const lastBlock = codeBlocks[codeBlocks.length - 1];
|
||||
if (lastBlock && !lastBlock.endsWith("```")) {
|
||||
// 最后一个代码块未闭合,需要补上结束标识符
|
||||
htmlString = this.content + '\n'
|
||||
htmlString = this.content + "\n";
|
||||
} else {
|
||||
htmlString = this.content
|
||||
htmlString = this.content;
|
||||
}
|
||||
return htmlString
|
||||
return htmlString;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
markdown: function (val) {
|
||||
this.content = this.markdown
|
||||
}
|
||||
this.content = this.markdown;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.aiMode) {
|
||||
@ -83,15 +89,14 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.content = this.markdown
|
||||
this.content = this.markdown;
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
initTagStyle() {
|
||||
const themeColor = this.themeColor
|
||||
const codeBgColor = this.codeBgColor
|
||||
const fontFamily = this.fontFamily
|
||||
const themeColor = this.themeColor;
|
||||
const codeBgColor = this.codeBgColor;
|
||||
const fontFamily = this.fontFamily;
|
||||
let zeroStyle = {
|
||||
p: `
|
||||
margin:4px 0;
|
||||
@ -199,13 +204,13 @@ export default {
|
||||
font-size:12px;
|
||||
position: relative;
|
||||
`,
|
||||
}
|
||||
this.tagStyle = zeroStyle
|
||||
};
|
||||
this.tagStyle = zeroStyle;
|
||||
},
|
||||
initTagStyleForAi() {
|
||||
const themeColor = this.themeColor
|
||||
const codeBgColor = this.codeBgColor
|
||||
const fontFamily = this.fontFamily
|
||||
const themeColor = this.themeColor;
|
||||
const codeBgColor = this.codeBgColor;
|
||||
const fontFamily = this.fontFamily;
|
||||
let zeroStyle = {
|
||||
p: `
|
||||
margin:4px 0;
|
||||
@ -321,10 +326,10 @@ export default {
|
||||
position: relative;
|
||||
font-family: ${fontFamily};
|
||||
`,
|
||||
}
|
||||
this.tagStyle = zeroStyle
|
||||
};
|
||||
this.tagStyle = zeroStyle;
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user