zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: markdown 样式调整

Browse Source
This commit is contained in:
zoujing
2025-09-09 21:31:36 +08:00
parent 317f7d01dd
commit 5072dc92a3
1 changed files with 182 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
uni_modules/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue
View File

@@ -1,174 +1,179 @@
<template> <template>
<view class="zero-markdown-view"> <view class="zero-markdown-view">
<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle" <mp-html
:markdown="true" :content="contentAi"> :key="mpkey"
</mp-html> :selectable="selectable"
</view> :scroll-table="scrollTable"
:tag-style="tagStyle"
:markdown="true"
:content="contentAi"
>
</mp-html>
</view>
</template> </template>
<script> <script>
import mpHtml from '../mp-html/mp-html'; import mpHtml from "../mp-html/mp-html";
export default { export default {
name: 'zero-markdown-view', name: "zero-markdown-view",
components: { components: {
mpHtml mpHtml,
}, },
props: { props: {
markdown: { markdown: {
type: String, type: String,
default: '' default: "",
}, },
selectable: { selectable: {
type: [Boolean, String], type: [Boolean, String],
default: true default: true,
}, },
scrollTable: { scrollTable: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
themeColor: { themeColor: {
type: String, type: String,
default: '#00A6FF' default: "#00A6FF",
}, },
codeBgColor: { codeBgColor: {
type: String, type: String,
default: '#2d2d2d' default: "#2d2d2d",
}, },
fontFamily: { fontFamily: {
type: String, type: String,
default: 'PingFang SC, PingFang SC' default: "PingFang SC, PingFang SC",
}, },
aiMode: { aiMode: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
return { return {
content: '', content: "",
tagStyle: '', tagStyle: "",
mpkey: 'zero' mpkey: "zero",
}; };
}, },
computed: { computed: {
contentAi() { contentAi() {
if (!this.content) { if (!this.content) {
return //处理特殊情况，比如网络异常导致的响应的 content 的值为空 return; //处理特殊情况，比如网络异常导致的响应的 content 的值为空
} }
let htmlString = '' let htmlString = "";
// 检查是否有未闭合的代码块 // 检查是否有未闭合的代码块
const codeBlocks = this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || [] const codeBlocks =
const lastBlock = codeBlocks[codeBlocks.length - 1] this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || [];
if (lastBlock && !lastBlock.endsWith('```')) { const lastBlock = codeBlocks[codeBlocks.length - 1];
// 最后一个代码块未闭合,需要补上结束标识符 if (lastBlock && !lastBlock.endsWith("```")) {
htmlString = this.content + '\n' // 最后一个代码块未闭合,需要补上结束标识符
} else { htmlString = this.content + "\n";
htmlString = this.content } else {
} htmlString = this.content;
return htmlString }
}, return htmlString;
}, },
watch: { },
markdown: function (val) { watch: {
this.content = this.markdown markdown: function (val) {
} this.content = this.markdown;
}, },
created() { },
if (this.aiMode) { created() {
this.initTagStyleForAi(); if (this.aiMode) {
} else { this.initTagStyleForAi();
this.initTagStyle(); } else {
} this.initTagStyle();
}, }
mounted() { },
this.content = this.markdown mounted() {
}, this.content = this.markdown;
},
methods: { methods: {
initTagStyle() {
initTagStyle() { const themeColor = this.themeColor;
const themeColor = this.themeColor const codeBgColor = this.codeBgColor;
const codeBgColor = this.codeBgColor const fontFamily = this.fontFamily;
const fontFamily = this.fontFamily let zeroStyle = {
let zeroStyle = { p: `
p: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
line-height:1.65; line-height:1.65;
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
margin:4px 0; margin:4px 0;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
padding:3px 10px 1px; padding:3px 10px 1px;
border-bottom: 2px solid ${themeColor}; border-bottom: 2px solid ${themeColor};
border-top-right-radius:3px; border-top-right-radius:3px;
border-top-left-radius:3px; border-top-left-radius:3px;
`, `,
// 二级标题 // 二级标题
h2: ` h2: `
margin:4px 0; margin:4px 0;
font-size: 18px; font-size: 18px;
text-align:center; text-align:center;
color:${themeColor}; color:${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:bolder; font-weight:bolder;
padding-left:10px; padding-left:10px;
// border:1px solid ${themeColor}; // border:1px solid ${themeColor};
`, `,
// 三级标题 // 三级标题
h3: ` h3: `
margin:4px 0; margin:4px 0;
font-size: 16px; font-size: 16px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
padding-left:10px; padding-left:10px;
border-left:3px solid ${themeColor}; border-left:3px solid ${themeColor};
`, `,
// 引用 // 引用
blockquote: ` blockquote: `
margin:4px 0; margin:4px 0;
font-size:15px; font-size:15px;
font-family: ${fontFamily}; font-family: ${fontFamily};
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
`, `,
// 列表 // 列表
ul: ` ul: `
margin: 4px 0; margin: 4px 0;
color: #555; color: #555;
`, `,
li: ` li: `
margin: 4px 0; margin: 4px 0;
color: #555; color: #555;
`, `,
// 链接 // 链接
a: ` a: `
// color: ${themeColor}; // color: ${themeColor};
`, `,
// 加粗 // 加粗
strong: ` strong: `
font-weight: border; font-weight: border;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 斜体 // 斜体
em: ` em: `
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
letter-spacing:0.3em; letter-spacing:0.3em;
`, `,
// 分割线 // 分割线
hr: ` hr: `
height:1px; height:1px;
padding:0; padding:0;
border:none; border:none;
@@ -176,87 +181,87 @@ export default {
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0)); background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
margin:10px 0; margin:10px 0;
`, `,
// 表格 // 表格
table: ` table: `
border-spacing:0; border-spacing:0;
overflow:auto; overflow:auto;
min-width:100%; min-width:100%;
margin:10px 0; margin:10px 0;
border-collapse: collapse; border-collapse: collapse;
`, `,
th: ` th: `
border: 1px solid #202121; border: 1px solid #202121;
color: #555; color: #555;
`, `,
td: ` td: `
color:#555; color:#555;
border: 1px solid #555555; border: 1px solid #555555;
`, `,
pre: ` pre: `
border-radius: 5px; border-radius: 5px;
white-space: pre; white-space: pre;
background: ${codeBgColor}; background: ${codeBgColor};
font-size:12px; font-size:12px;
position: relative; position: relative;
`, `,
} };
this.tagStyle = zeroStyle this.tagStyle = zeroStyle;
}, },
initTagStyleForAi() { initTagStyleForAi() {
const themeColor = this.themeColor const themeColor = this.themeColor;
const codeBgColor = this.codeBgColor const codeBgColor = this.codeBgColor;
const fontFamily = this.fontFamily const fontFamily = this.fontFamily;
let zeroStyle = { let zeroStyle = {
p: ` p: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
line-height:1.55; line-height:1.55;
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
margin:4px 0; margin:4px 0;
font-size: 20px; font-size: 20px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 二级标题 // 二级标题
h2: ` h2: `
margin:4px 0; margin:4px 0;
font-size: 18px; font-size: 18px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 三级标题 // 三级标题
h3: ` h3: `
margin:4x 0; margin:4x 0;
font-size: 16px; font-size: 16px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 四级标题 // 四级标题
h4: ` h4: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 五级标题 // 五级标题
h5: ` h5: `
margin:4px 0; margin:4px 0;
font-size: 14px; font-size: 14px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 六级标题 // 六级标题
h6: ` h6: `
margin:4px 0; margin:4px 0;
font-size: 12px; font-size: 12px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 引用 // 引用
blockquote: ` blockquote: `
margin:4px 0; margin:4px 0;
font-size:14px; font-size:14px;
color: #777777; color: #777777;
@@ -264,32 +269,32 @@ export default {
padding: 0 10px; padding: 0 10px;
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 列表 // 列表
ul: ` ul: `
margin: 4px 0; margin: 4px 0;
color: #555; color: #555;
`, `,
li: ` li: `
margin: 4px 0; margin: 4px 0;
color: #555; color: #555;
`, `,
// 链接 // 链接
a: ` a: `
// color: ${themeColor}; // color: ${themeColor};
`, `,
// 加粗 // 加粗
strong: ` strong: `
font-weight: border; font-weight: border;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 斜体 // 斜体
em: ` em: `
color: ${themeColor}; color: ${themeColor};
letter-spacing:0.3em; letter-spacing:0.3em;
`, `,
// 分割线 // 分割线
hr: ` hr: `
height:1px; height:1px;
padding:0; padding:0;
border:none; border:none;
@@ -297,23 +302,23 @@ export default {
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0)); background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
margin:4px 0; margin:4px 0;
`, `,
// 表格 // 表格
table: ` table: `
border-spacing:0; border-spacing:0;
overflow:auto; overflow:auto;
min-width:100%; min-width:100%;
margin:4px 0; margin:4px 0;
border-collapse: collapse; border-collapse: collapse;
`, `,
th: ` th: `
border: 1px solid #202121; border: 1px solid #202121;
color: #555; color: #555;
`, `,
td: ` td: `
color:#555; color:#555;
border: 1px solid #555555; border: 1px solid #555555;
`, `,
pre: ` pre: `
border-radius: 5px; border-radius: 5px;
white-space: pre; white-space: pre;
background: ${codeBgColor}; background: ${codeBgColor};
@@ -321,16 +326,16 @@ export default {
position: relative; position: relative;
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
} };
this.tagStyle = zeroStyle this.tagStyle = zeroStyle;
}, },
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.zero-markdown-view { .zero-markdown-view {
padding: 0; padding: 0;
position: relative; position: relative;
} }
</style> </style>