完成碎碎念的整合

 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;

 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![](http://blog.inleft.com/photo/example.jpg)",
                text: "### &ensp;&ensp;十里平湖 \r> ##### (卢照邻)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)",
            }
        },
        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;
            },

 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;
            }

 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;


 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 {

 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>