Compare commits

..

No commits in common. "cf2a3ba19a0d6c36921293fccc76175160d9d419" and "cb57af854f220cb560d63fbe580411e5c2e08661" have entirely different histories.

3 changed files with 179 additions and 206 deletions

View File

@ -1,10 +1,7 @@
<template> <template>
<view class="container"> <view class="container">
<view v-for="item in recommendThemeList" :key="item.themeName"> <view v-for="item in recommendThemeList" :key="item.themeName">
<RecommendPostsList <RecommendPostsList :recommendTheme="item" />
v-if="item.recommendPostsList.length > 0"
:recommendTheme="item"
/>
</view> </view>
</view> </view>
</template> </template>

View File

@ -13,26 +13,7 @@ function Markdown (vm) {
Markdown.prototype.onUpdate = function (content) { Markdown.prototype.onUpdate = function (content) {
if (this.vm.markdown) { if (this.vm.markdown) {
// return marked(content) return marked(content)
// 先处理内容,确保只有双波浪号才被解析为删除线
// 使用临时占位符保护单个波浪号
let processedContent = content;
// 1. 先保护双波浪号删除线语法
processedContent = processedContent.replace(/~~([^~]+?)~~/g, '__STRIKETHROUGH_START__$1__STRIKETHROUGH_END__');
// 2. 将剩余的单个波浪号转换为HTML实体
processedContent = processedContent.replace(/~/g, '&#126;');
// 3. 恢复双波浪号删除线语法
processedContent = processedContent.replace(/__STRIKETHROUGH_START__/g, '~~').replace(/__STRIKETHROUGH_END__/g, '~~');
return marked(processedContent, {
gfm: true,
breaks: false,
pedantic: false,
sanitize: false,
});
} }
} }

View File

@ -1,179 +1,174 @@
<template> <template>
<view class="zero-markdown-view"> <view class="zero-markdown-view">
<mp-html <mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
:key="mpkey" :markdown="true" :content="contentAi">
:selectable="selectable" </mp-html>
:scroll-table="scrollTable" </view>
: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 = const codeBlocks = this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || []
this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || []; const lastBlock = codeBlocks[codeBlocks.length - 1]
const lastBlock = codeBlocks[codeBlocks.length - 1]; if (lastBlock && !lastBlock.endsWith('```')) {
if (lastBlock && !lastBlock.endsWith("```")) { // ,
// , htmlString = this.content + '\n'
htmlString = this.content + "\n"; } else {
} else { htmlString = this.content
htmlString = this.content; }
} return htmlString
return htmlString; },
}, },
}, watch: {
watch: { markdown: function (val) {
markdown: function (val) { this.content = this.markdown
this.content = this.markdown; }
}, },
}, created() {
created() { if (this.aiMode) {
if (this.aiMode) { this.initTagStyleForAi();
this.initTagStyleForAi(); } else {
} else { this.initTagStyle();
this.initTagStyle(); }
} },
}, mounted() {
mounted() { this.content = this.markdown
this.content = this.markdown; },
},
methods: { methods: {
initTagStyle() {
const themeColor = this.themeColor; initTagStyle() {
const codeBgColor = this.codeBgColor; const themeColor = this.themeColor
const fontFamily = this.fontFamily; const codeBgColor = this.codeBgColor
let zeroStyle = { const fontFamily = this.fontFamily
p: ` let zeroStyle = {
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;
@ -181,87 +176,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;
@ -269,32 +264,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;
@ -302,23 +297,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};
@ -326,16 +321,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>