From 7319260f31c9a593418ff17b1ca42e0822c3c4eb Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 10 Jan 2024 22:07:04 +0800 Subject: [PATCH] 改正授权码md5加密 bgm链接修改 允许后置日期提交 简介提交支持 --- src/components/mini/box12-comment.vue | 135 ++++++++++++++++++++++++++++++++++++-------- 1 files changed, 109 insertions(+), 26 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index e2c09c7..c3d651a 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,15 +1,24 @@ <template> <div> - <replyBox ref="commentBoxId" v-bind="$attrs"></replyBox> + <a-collapse v-if="foldReply"> + <a-collapse-panel key="replyPanel" header="回复"> + <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + </a-collapse-panel> + </a-collapse> + <div v-else> + <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + </div> + <a-modal v-model="visible" :title="replyTaget" :footer="null" - :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}"> - <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + :bodyStyle="{'overflow':'overlay','height': '700px','scrollbarWidth': 'none'}"> + <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()" :parseContent="parseContent" + :visible="visible"></replyBox> </a-modal> - <div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0"> + + <div class="mySecret" style="max-height:250px ;" v-if="commentListData.length==0"> <p>空空如也..</p> </div> <div v-for="temp in commentListData" class="commentList"> - <div class="commentGroup"> <a-comment> <div slot="actions" key="comment-nested-reply-to" class="actionList"> @@ -30,10 +39,10 @@ {{temp.visitorNickName}} </a-tooltip> </div> - <div>:</div> + <div class="samllPadding">:</div> </div> - <p slot="content">{{temp.commentContent}}</p> + <p :id="temp.id" slot="content" v-html="parseContent(temp.commentContent)" class="myContent"></p> <a-comment v-for="tempData in temp.replyList"> <div slot="actions" key="comment-nested-reply-to" class="actionList"> @@ -54,21 +63,20 @@ {{tempData.visitorNickName}} </a-tooltip> </div> - <div>:</div> - </div> - - <div slot="content" class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;"> - @<a :href="tempData.replyUserHomePage" target="_blank" - v-if="tempData.replyUserHomePage!=''"> - <a-tooltip placement="bottomLeft" :title="tempData.replyUserName"> + <div class="samllPadding">:</div> + <div class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;"> + @<a :href="tempData.replyUserHomePage" target="_blank" + v-if="tempData.replyUserHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="tempData.replyUserName"> + {{tempData.replyUserName}} + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else> {{tempData.replyUserName}} </a-tooltip> - </a> - <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else> - {{tempData.replyUserName}} - </a-tooltip> + </div> </div> - <p slot="content">{{tempData.commentContent}}</p> + <p :id="tempData.id" slot="content" v-html="parseContent(tempData.commentContent)"></p> </a-comment> </a-comment> @@ -79,7 +87,6 @@ </div> </div> </div> - <a-row type="flex" justify="center"> <div> <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" @@ -92,17 +99,51 @@ <script> import replyBox from "./box13-reply.vue" - import { queryBlogCommentList, queryBlogCommentSubList } from '../../api/blogArticleComment.js' + import OwOjsonConfig from '../../assets/OwO.json' export default { components: { - replyBox + replyBox, + }, + props: { + "foldReply": { + default: false, + }, + }, + mounted() { + let packages = Object.keys(OwOjsonConfig) + for (let i = 0; i < packages.length; i++) { + let opackage = OwOjsonConfig[packages[i]].container + let type = OwOjsonConfig[packages[i]].type + for (let j = 0; j < opackage.length; j++) { + if (type == 'image') { + this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css + + `" src="` + opackage[j].icon + `">` + } + } + } }, methods: { + parseContent(content) { + let tempStrArray = content.match(this.re); + + if (tempStrArray == null) { + return content; + } + + for (var i = 0; i < tempStrArray.length; i++) { + if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) { + continue; + } + content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]]) + } + + return content; + }, updateCommentList(articleId) { queryBlogCommentList({ pageNo: this.page.current, @@ -153,7 +194,6 @@ }, data() { return { - isAllowedComment: true, page: { size: "small", total: 1, @@ -164,13 +204,37 @@ replyTaget: "", visible: false, commentListData: [], - + myOwOConfig: {}, + re: new RegExp(":&\\(\\S*?\\)", "g"), } } } </script> <style lang="less"> + img.biaoqing.quyin { + margin-bottom: 0.2rem; + min-height: 2.5rem; + height: 2em; + } + + .ant-comment img, + .myContent img { + margin-bottom: 0.2rem; + min-height: 2.5rem; + height: 2em; + } + + .myContent { + * { + max-width: 100% !important; + } + } + + .samllPadding { + padding: 0px 3px 5px; + } + .visitInfo { user-select: none; } @@ -206,6 +270,8 @@ justify-content: flex-end; } + + .commentList { a { color: black; @@ -213,6 +279,10 @@ img { user-select: none; + } + + .ant-comment-nested { + margin-left: 20px; } .ant-comment-avatar { @@ -234,18 +304,31 @@ .ant-comment-inner { padding: 10px 10px 0px; + flex-direction: column; } .commentGroup { - border-top: 1px solid #e5e9ef; - margin-bottom: 5px; padding-bottom: 0px; + border-bottom: 1px solid #e5e9ef; + } + + .commentGroup:hover { + background: #e5e9ef; + border-radius: 14px; + border-bottom:none } .ant-comment-content-detail { + padding-left: 50px; + padding-top: 5px; + p { margin-bottom: 0px; } } + + + + } </style> -- Gitblit v1.9.1