From 0b0125884c449378a2e80f888a43a2d20974c8df Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 03 Mar 2022 16:20:09 +0800
Subject: [PATCH] 完成碎碎念的整合
---
src/components/group/MyPreviewModal.vue | 26 +++++++-
src/assets/md.less | 4 +
src/components/mini/box12-comment.vue | 38 +++++++-----
src/components/mini/mdDetail.vue | 78 ++++++++++++++++++++++----
src/components/mini/box13-reply.vue | 21 +++---
src/components/mini/tagInfo.vue | 8 ++
6 files changed, 132 insertions(+), 43 deletions(-)
diff --git a/src/assets/md.less b/src/assets/md.less
index 3e3c733..42e1bda 100644
--- a/src/assets/md.less
+++ b/src/assets/md.less
@@ -12,6 +12,10 @@
margin: 10px auto;
}
}
+
+ img{
+ max-width: -webkit-fill-available;
+ }
h1, h2, h3, h4 {
color: #111111;
font-weight: 400;
diff --git a/src/components/group/MyPreviewModal.vue b/src/components/group/MyPreviewModal.vue
index 7fbf894..4fa33aa 100644
--- a/src/components/group/MyPreviewModal.vue
+++ b/src/components/group/MyPreviewModal.vue
@@ -1,11 +1,13 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
+ <a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
:bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
<div style="display: flex;">
- <a-textarea style="height: 750px;min-width: 50%" v-model="text" />
+ <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
+ @keydown.9.native.prevent="tabFunc" />
+
<div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;">
- <vue-markdown :source="text"></vue-markdown>
+ <vue-markdown :source="text"></vue-markdown>
</div>
</div>
</a-modal>
@@ -24,10 +26,26 @@
data() {
return {
visible: false,
- text: "### 十里平湖 \r> ##### (卢照邻) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r",
+ text: "###   十里平湖 \r> ##### (卢照邻) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r",
}
},
methods: {
+ tabFunc() {
+ this.insertInputTxt('myInput', '\t')
+ },
+ insertInputTxt(id, insertTxt) {
+ var elInput = document.getElementById(id);
+ var startPos = elInput.selectionStart
+ var endPos = elInput.selectionEnd
+ if (startPos === undefined || endPos === undefined) return
+ var txt = elInput.value
+ var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
+ elInput.value = result
+ elInput.focus()
+ elInput.selectionStart = startPos + insertTxt.length
+ elInput.selectionEnd = startPos + insertTxt.length
+ },
+
getCalendarContainer(trigger) {
return this.$refs.myModal;
},
diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue
index e2c09c7..4137c73 100644
--- a/src/components/mini/box12-comment.vue
+++ b/src/components/mini/box12-comment.vue
@@ -1,15 +1,15 @@
<template>
<div>
- <replyBox ref="commentBoxId" v-bind="$attrs"></replyBox>
+ <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
<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>
</a-modal>
+
<div class="mySecret" style="max-height:350px ;" 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,7 +30,7 @@
{{temp.visitorNickName}}
</a-tooltip>
</div>
- <div>:</div>
+ <div class="samllPadding">:</div>
</div>
<p slot="content">{{temp.commentContent}}</p>
@@ -54,19 +54,18 @@
{{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>
</a-comment>
@@ -79,7 +78,6 @@
</div>
</div>
</div>
-
<a-row type="flex" justify="center">
<div>
<a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
@@ -153,7 +151,6 @@
},
data() {
return {
- isAllowedComment: true,
page: {
size: "small",
total: 1,
@@ -164,13 +161,16 @@
replyTaget: "",
visible: false,
commentListData: [],
-
}
}
}
</script>
<style lang="less">
+ .samllPadding {
+ padding: 0px 3px 5px;
+ }
+
.visitInfo {
user-select: none;
}
@@ -234,6 +234,7 @@
.ant-comment-inner {
padding: 10px 10px 0px;
+ flex-direction: column;
}
.commentGroup {
@@ -243,6 +244,9 @@
}
.ant-comment-content-detail {
+ padding-left: 50px;
+ padding-top: 5px;
+
p {
margin-bottom: 0px;
}
diff --git a/src/components/mini/box13-reply.vue b/src/components/mini/box13-reply.vue
index 674aa81..3dfebf3 100644
--- a/src/components/mini/box13-reply.vue
+++ b/src/components/mini/box13-reply.vue
@@ -31,17 +31,19 @@
<a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
</a-form-item>
<div>
- <a-button html-type="submit" type="primary" v-if="!showReplyMsgInfo" @click="send()"
- :disabled="isSending">
- 高低整两句
- </a-button>
- <a-button html-type="submit" type="primary" v-else @click="send()" :disabled="isSending">
- 回复Ta
- </a-button>
+ <a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
+ :disabled="isSending || $attrs.isAllowedComment==0">
+ 高低整两句
+ </a-button>
+ <a-button html-type="submit" type="primary" v-else @click="send()"
+ :disabled="isSending || $attrs.isAllowedComment==0">
+ 回复Ta
+ </a-button>
+ <span class="myTip" v-if="$attrs.isAllowedComment==0">很遗憾,评论已关闭</span>
</div>
<div>
- <a-checkbox style="margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
+ <a-checkbox style=" margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
悄悄说..<span class="myTip">(仅登录后可查看)</span>
</a-checkbox>
<!-- <a-checkbox v-model="form.isReceiveMail">
@@ -66,7 +68,6 @@
this.replyHolder = "@" + this.msgInfo.useName;
},
send() {
- console.log(11);
if (this.form.nickName === "") {
this.$message.info("怎么称呼..")
return
@@ -87,7 +88,7 @@
res = false;
}
});
- var articleId=this.$attrs.articleId;
+ var articleId = this.$attrs.articleId;
let commentType = (articleId == null || articleId == undefined) ? 1 : 2;
this.isSending = true;
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 54ac32a..4c75b5a 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -1,11 +1,10 @@
<template>
- <div class="article-meta ">
+ <div class="article-meta">
<div>
<a-button @click="back" style="position: absolute;">
<a-icon type="left" />
</a-button>
</div>
-
<div class="mySecret" v-if="showMsg && !myLock">
<h1>怎样才能让你看到我呢</h1>
@@ -32,9 +31,33 @@
<vue-markdown :source="source"></vue-markdown>
</div>
</div>
- <div class="articleComment">
- <comment ref="myComment" :articleId="articleId"> </comment>
+ <div class="articleInfoMiniData">
+
+ <div class="smallOption" @click="articleOptionHandle('like')">
+ <a-icon type="like" class="samllPadding" />
+ <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
+ </div>
+ <div>
+ <a-icon type="read" class="samllPadding" />
+ <span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span>
+ </div>
+ <div class="smallOption" @click="articleOptionHandle('dislike')">
+ <a-icon type="dislike" style="margin-top: 2px;" />
+ </div>
+ <div>
+ <!-- <a-icon type="folder-open" class="samllPadding" /> -->
+ <a-icon type="book" class="samllPadding" />
+ <span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
+ </div>
+ <div>
+ <a-icon type="calendar" class="samllPadding" />
+ <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
+ </div>
</div>
+ <div class="articleComment">
+ <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
+ </div>
+
</div>
</template>
@@ -57,15 +80,17 @@
},
data() {
return {
- source: "",
+ articelMeta: "",
+ isAllowedComment: 1,
articleId: "",
+ source: "",
showMsg: false,
myLock: false,
errorMsg: '',
secret: '',
search: {
placeholder: "",
- autoFocus: true,
+ autoFocus: false,
backfill: true,
value: '',
disabled: false
@@ -89,10 +114,12 @@
this.queryDetail();
this.$refs.myComment.updateCommentList(this.articleId);
}
- }
-
+ },
},
methods: {
+ articleOptionHandle(type) {
+ this.$message.info(type)
+ },
queryDetail() {
this.showMsg = true;
this.errorMsg = "加载中..";
@@ -121,10 +148,12 @@
placement: 'bottomRight'
});
}
-
return
}
+ // this.test = res.data.isAllowedComment == 1 ? true : false;
+ this.isAllowedComment = res.data.isAllowedComment;
+ this.articelMeta = res.data;
this.$axios
.get(res.data.articleFileURL)
.then((res) => {
@@ -161,6 +190,34 @@
<style lang="less">
@import '../../assets/md.less';
+
+ .smallOption {
+ transition-function: ease-out;
+ transition-duration: 200ms;
+ -webkit-transition-function: ease-out;
+ -webkit-transition-duration: 200ms;
+ -moztransition-function: ease-out;
+ -moztransition-duration: 200ms;
+ -o-transition-function: ease-out;
+ -o-transition-duration: 200ms;
+ }
+
+ .smallOption:hover {
+ transform: scale(1.55, 1.55);
+ -webkit-transform: scale(1.55, 1.55);
+ -moz-transform: scale(1.55, 1.55);
+ -o-transform: scale(1.55, 1.55);
+ }
+
+ .articleInfoMiniData {
+ user-select: none;
+ box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
+ padding: 10px 50px;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
+
.mySecret {
height: 715px;
display: flex;
@@ -170,9 +227,6 @@
align-items: center;
}
- .articleComment {
- margin-top: 20px;
- }
.markdown-body,
.articleComment {
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index 4495ec9..aff50d5 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -48,6 +48,14 @@
<br>
<a-timeline-item color="">
<a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
+ <h3 class="layui-timeline-title">2022-03-03</h3>
+ <span>
+ <router-link to="/comment">碎碎念</router-link> 整合完成
+ </span>
+ <p class="myTip">虽然没啥用,可万一有人想给我留言呢☺☺️</p>
+ </a-timeline-item>
+ <a-timeline-item color="">
+ <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
<h3 class="layui-timeline-title">2022-02-22</h3>
<span style="text-decoration:line-through">全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span>
<p class="myTip">(终于是赶在这个全是2的日子前把旧站有用的数据迁移了过来)</p>
--
Gitblit v1.9.1