wiki增加历史版本功能，原创使用git方式管理wiki历史版本和查看，修改评论展示区域，修改布局

zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue

@@ -1,104 +1,158 @@
 <template>
 	<div class="page-show-vue">
-		<el-row type="border-card">
-			<div class="wiki-title">
-				{{wikiPage.name}}
-			</div>
-			<div class="wiki-author">
-				<div>
-					<span class="create-user-time">创建：{{wikiPage.createUserName}}　{{wikiPage.createTime}}</span>
-					<span v-show="wikiPage.updateUserName">修改：{{wikiPage.updateUserName}}　{{wikiPage.updateTime}}</span>
-					<div style="float: right;">
-						<el-upload v-if="wikiPageAuth.canUploadFile==1"
-								   class="upload-page-file" :action="uploadFileUrl"
-								   :with-credentials="true"
-								   :on-success="uploadFileSuccess" :on-error="uploadFileError"
-								   name="files" show-file-list multiple :data="uploadFormData" :limit="999"
-								   style="display: inline;margin-right: 10px;">
-							<el-button type="text" icon="el-icon-upload">上传附件</el-button>
-						</el-upload>
-						<el-button v-if="wikiPageAuth.canEdit==1" type="text" icon="el-icon-edit" @click="editWiki">编辑</el-button>
-						<el-dropdown style="margin-left: 10px;" @command="handleMoreCommand">
-							<el-button type="text">
-								更多<i class="el-icon-arrow-down el-icon--right"></i>
-							</el-button>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
-								<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth==1" icon="el-icon-s-check">权限设置</el-dropdown-item>
-								<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" icon="el-icon-share">查看开放文档</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
+		<el-row type="border-card" style="height: 100%;">
+			<el-col :span="actionTabVisible?18:24" style="padding: 20px;border-right: 1px solid #f1f1f1;height: 100%;overflow: auto;">
+				<div style="max-width: 1000px;margin: 0 auto;">
+					<div class="wiki-title">{{wikiPage.name}}</div>
+					<div class="wiki-author">
+						<div>
+							<span class="create-user-time">创建：{{wikiPage.createUserName}}　{{wikiPage.createTime}}</span>
+							<span v-show="wikiPage.updateUserName">修改：{{wikiPage.updateUserName}}　{{wikiPage.updateTime}}</span>
+							<div style="float: right;">
+								<el-button type="text" icon="el-icon-chat-line-round" @click="showCommentWiki" style="margin-right: 10px;">评论</el-button>
+								<el-upload v-if="wikiPageAuth.canUploadFile==1"
+										   class="upload-page-file" :action="uploadFileUrl"
+										   :with-credentials="true"
+										   :on-success="uploadFileSuccess" :on-error="uploadFileError"
+										   name="files" show-file-list multiple :data="uploadFormData" :limit="999"
+										   style="display: inline;margin-right: 10px;">
+									<el-button type="text" icon="el-icon-upload">上传附件</el-button>
+								</el-upload>
+								<el-button v-if="wikiPageAuth.canEdit==1" type="text" icon="el-icon-edit" @click="editWiki">编辑</el-button>
+								<el-dropdown style="margin-left: 10px;" @command="handleMoreCommand">
+									<el-button type="text">
+										更多<i class="el-icon-arrow-down el-icon--right"></i>
+									</el-button>
+									<el-dropdown-menu slot="dropdown">
+										<el-dropdown-item command="showPageHistory" icon="el-icon-time">查看历史版本</el-dropdown-item>
+										<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete==1" icon="el-icon-delete">删除</el-dropdown-item>
+										<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth==1" icon="el-icon-s-check">权限设置</el-dropdown-item>
+										<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" icon="el-icon-share">查看开放文档</el-dropdown-item>
+									</el-dropdown-menu>
+								</el-dropdown>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="wiki-files">
-				<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
-					<el-table-column label="文件名">
-						<template slot-scope="scope">
-							<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName}}</a>
-						</template>
-					</el-table-column>
-					<el-table-column prop="createUserName" label="创建人"></el-table-column>
-					<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
-					<el-table-column prop="downloadNum" label="下载次数" width="80px"></el-table-column>
-					<el-table-column label="操作" width="100px" v-if="wikiPageAuth.canUploadFile==1">
-						<template slot-scope="scope">
-							<el-button size="small" v-on:click="deletePageFile(scope.row)">删除</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-			</div>
-			<div class="wiki-content w-e-text">
-				<div v-html="pageContent.content"></div>
-			</div>
-			<div style="margin-top: 40px; font-size: 14px;">
+					<div class="wiki-files">
+						<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
+							<el-table-column label="文件名">
+								<template slot-scope="scope">
+									<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName}}</a>
+								</template>
+							</el-table-column>
+							<el-table-column prop="createUserName" label="创建人"></el-table-column>
+							<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
+							<el-table-column prop="downloadNum" label="下载次数" width="80px"></el-table-column>
+							<el-table-column label="操作" width="100px" v-if="wikiPageAuth.canUploadFile==1">
+								<template slot-scope="scope">
+									<el-button size="small" v-on:click="deletePageFile(scope.row)">删除</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+					<div class="wiki-content w-e-text">
+						<div v-html="pageHistoryDetail" v-if="!!pageHistoryDetail"></div>
+						<div v-html="pageContent.content" v-else></div>
+					</div>
+					<div style="margin-top: 40px; font-size: 14px;">
 				<span style="vertical-align: top;" class="is-link">
 					<span v-show="wikiPage.selfZan == 0" v-on:click="zanPage(1)"><img src="../../assets/img/zan.png" style="vertical-align: middle;"> 赞</span>
 					<span v-show="wikiPage.selfZan == 1" v-on:click="zanPage(0)"><img src="../../assets/img/zan.png" style="vertical-align: middle;transform: rotateX(180deg);"> 踩</span>
 				</span>
-				<span style="margin-left: 10px;vertical-align: top;">
+						<span style="margin-left: 10px;vertical-align: top;">
 					<span v-if="wikiPage.selfZan == 0 && wikiPage.zanNum <= 0">成为第一个赞同者</span>
 					<span v-else-if="wikiPage.selfZan == 0 && wikiPage.zanNum > 0"><span class="is-link" v-on:click="showZanPageUser">{{wikiPage.zanNum}}人</span>赞了它</span>
 					<span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum <= 1">我赞了它</span>
 					<span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum > 1"><span class="is-link" v-on:click="showZanPageUser">我和{{wikiPage.zanNum-1}}个其他人</span>赞了它</span>
 				</span>
-				<span style="margin-left: 10px;">
+						<span style="margin-left: 10px;">
 					<i class="el-icon-view" style="font-size: 16px;color: #666;"></i> {{wikiPage.viewNum}}次阅读
 				</span>
-			</div>
-			<div v-show="commentList.length > 0" class="comment-box" style="margin-top: 20px;">
-				<div style="border-bottom: 1px solid #67C23A;padding-bottom: 10px;">评论列表：</div>
-				<div v-for="(comment,index) in commentList" :key="comment.id" :data-id="comment.id" :data-index="index" style="border-bottom: 1px solid #eee;padding: 10px;">
-					<div>
-						<div :style="'background-color: '+comment.color" class="head">{{comment.createUserName.substr(0,1)}}</div>
-					</div>
-					<div style="padding-left: 55px;">
-						{{comment.createUserName}}
-						<span style="color: #888;font-size: 13px;padding-left: 10px;">{{comment.createTime}}</span>
-						<span style="color: #888;font-size: 13px;margin-left: 10px;cursor: pointer;" @click="recommentUser(comment.id, index)">回复</span>
-						<span style="color: #888;font-size: 13px;margin-left: 10px;cursor: pointer;" @click="deleteComment(comment.id)" v-if="canDeleteComment(comment)">删除</span>
-					</div>
-					<pre style="padding: 10px 0 0 55px;">{{comment.content}}</pre>
-					<div v-for="(commentSub,indexSub) in comment.commentList" :key="commentSub.id" :data-id="commentSub.id" :data-index="indexSub" style="border-bottom: 1px solid #eee;padding: 10px;margin-left: 40px;">
-						<div>
-							<div :style="'background-color: '+commentSub.color" class="head">{{commentSub.createUserName.substr(0,1)}}</div>
-						</div>
-						<div style="padding-left: 55px;">
-							{{commentSub.createUserName}}
-							<span style="color: #888;font-size: 13px;padding-left: 10px;">{{commentSub.createTime}}</span>
-							<span style="color: #888;font-size: 13px;margin-left: 10px;cursor: pointer;" @click="deleteComment(commentSub.id)" v-if="canDeleteComment(commentSub)">删除</span>
-						</div>
-						<pre style="padding: 10px 0 0 55px;">{{commentSub.content}}</pre>
 					</div>
 				</div>
-			</div>
-			<div style="margin: 20px 0 50px 0;">
-				<el-input type="textarea" v-model="commentTextInput" :rows="5" :placeholder="recommentInfo.placeholder || '请输入评论内容'"></el-input>
-				<div align="right" style="margin-top: 5px;">
-					<el-button type="primary" v-on:click="submitPageComment">提交评论</el-button>
-					<el-button v-on:click="cancelCommentUser" v-show="recommentInfo.id > 0">取消回复</el-button>
-				</div>
-			</div>
+<!--				<div v-show="commentList.length > 0" class="comment-box" style="margin-top: 20px;">-->
+<!--					<div style="border-bottom: 1px solid #67C23A;padding-bottom: 10px;">评论列表：</div>-->
+<!--					<div v-for="(comment,index) in commentList" :key="comment.id" :data-id="comment.id" :data-index="index" style="border-bottom: 1px solid #eee;padding: 10px;">-->
+<!--						<div>-->
+<!--							<div :style="'background-color: '+comment.color" class="head">{{comment.createUserName.substr(0,1)}}</div>-->
+<!--						</div>-->
+<!--						<div style="padding-left: 55px;">-->
+<!--							{{comment.createUserName}}-->
+<!--							<span style="color: #888;font-size: 13px;padding-left: 10px;">{{comment.createTime}}</span>-->
+<!--							<span style="color: #888;font-size: 13px;margin-left: 10px;cursor: pointer;" @click="recommentUser(comment.id, index)">回复</span>-->
+<!--							<span style="color: #888;font-size: 13px;margin-left: 10px;cursor: pointer;" @click="deleteComment(comment.id)" v-if="canDeleteComment(comment)">删除</span>-->
+<!--						</div>-->
+<!--						<pre style="padding: 10px 0 0 55px;">{{comment.content}}</pre>-->
+<!--						<div v-for="(commentSub,indexSub) in comment.commentList" :key="commentSub.id" :data-id="commentSub.id" :data-index="indexSub" style="border-bottom: 1px solid #eee;padding: 10px;margin-left: 40px;">-->
+<!--							<div>-->
+<!--								<div :style="'background-color: '+commentSub.color" class="head">{{commentSub.createUserName.substr(0,1)}}</div>-->
+<!--							</div>-->
+<!--							<div style="padding-left: 55px;">-->
+<!--								{{commentSub.createUserName}}-->
+<!--								<span style="color: #888;font-size: 13px;padding-left: 10px;">{{commentSub.createTime}}</span>-->
+<!--								<span style="color: #888;font-size: 13px;margin-left: 10px;cursor: pointer;" @click="deleteComment(commentSub.id)" v-if="canDeleteComment(commentSub)">删除</span>-->
+<!--							</div>-->
+<!--							<pre style="padding: 10px 0 0 55px;">{{commentSub.content}}</pre>-->
+<!--						</div>-->
+<!--					</div>-->
+<!--				</div>-->
+<!--				<div style="margin: 20px 0 50px 0;">-->
+<!--					<el-input type="textarea" v-model="commentTextInput" :rows="5" :placeholder="recommentInfo.placeholder || '请输入评论内容'"></el-input>-->
+<!--					<div align="right" style="margin-top: 5px;">-->
+<!--						<el-button type="primary" v-on:click="submitPageComment">提交评论</el-button>-->
+<!--						<el-button v-on:click="cancelCommentUser" v-show="recommentInfo.id > 0">取消回复</el-button>-->
+<!--					</div>-->
+<!--				</div>-->
+			</el-col>
+			<el-col :span="6" style="height: 100%;" v-show="actionTabVisible">
+				<i class="el-icon-close close-action-tab" @click="closeActionTab"></i>
+				<el-tabs v-model="actionTabActiveName" @tab-click="actionTabClick">
+					<el-tab-pane label="评论" name="comment">
+						<div class="action-tab-box" ref="actionTabComment" style="padding-bottom: 130px;box-sizing: border-box;height: calc(100vh - 80px);">
+							<div v-if="commentList.length <= 0" class="action-box-empty">暂无评论</div>
+							<el-timeline v-else>
+								<el-timeline-item :timestamp="comment.createTime" placement="top" v-for="comment in commentList">
+									<el-card class="box-card comment-card" :body-style="{ padding: '10px' }">
+										<div :style="'background-color: '+comment.color" class="head">{{comment.createUserName.substr(0,1)}}</div>
+										<div class="comment-user-name">
+											{{comment.createUserName}}
+											<el-popover placement="top" width="160" v-model="comment.visible" v-if="canDeleteComment(comment)">
+												<p>确定要除删此评论吗？</p>
+												<div style="text-align: right; margin: 0">
+													<el-button size="mini" type="text" @click="comment.visible=false">取消</el-button>
+													<el-button type="primary" size="mini" @click="deleteComment(comment.id)">确定</el-button>
+												</div>
+												<i slot="reference" class="el-icon-delete"></i>
+											</el-popover>
+										</div>
+										<pre class="comment-content">{{comment.content}}</pre>
+									</el-card>
+								</el-timeline-item>
+							</el-timeline>
+						</div>
+						<div class="comment-input-box">
+							<textarea rows="5" placeholder="发表评论" v-model="commentTextInput"></textarea>
+							<el-button style="float: right;margin: 2px 5px;" type="primary" size="mini" v-on:click="submitPageComment">发送</el-button>
+						</div>
+					</el-tab-pane>
+					<el-tab-pane label="修改历史" name="history">
+						<div class="action-tab-box">
+							<div v-if="pageHistoryList.length <= 0" class="action-box-empty">暂无修改历史记录</div>
+							<el-timeline v-else>
+								<el-timeline-item v-for="history in pageHistoryList">
+									<el-tag :type="pageHistoryChoice.id == history.id ? 'success':'info'" class="history-item" @click="historyClick(history)">
+										<div>{{history.createUserName}}</div>
+										<div>{{history.createTime}}</div>
+									</el-tag>
+									<i class="el-icon-loading history-loading-status" v-show="history.loading==1"></i>
+									<i class="el-icon-circle-check history-loading-status" v-show="history.loading==2"></i>
+								</el-timeline-item>
+							</el-timeline>
+<!--							<div v-for="i in 100">{{i}}</div>-->
+						</div>
+					</el-tab-pane>
+				</el-tabs>
+			</el-col>
 		</el-row>
 		<!--点赞人员弹窗-->
 		<el-dialog title="赞了它的人" :visible.sync="zanUserDialogVisible" width="600px">
@@ -178,6 +232,12 @@
                 searchUserList: [],
                 pageAuthNewUser: "",
 				pageAuthUserLoading: false,
+				// 右侧标签页
+				actionTabVisible: false,
+				actionTabActiveName: 'comment',
+				pageHistoryDetail: '',
+				pageHistoryChoice: {},
+				pageHistoryList: [],
 			};
 		},
 		beforeRouteUpdate(to, from, next) {
@@ -210,6 +270,8 @@
 					this.editWikiAuth();
 				} else if (val == 'deletePage') {
 					this.deleteWikiPage();
+				} else if (val == 'showPageHistory') {
+					this.showPageHistory();
 				} else if (val == 'showOpenPage') {
 					if (this.spaceInfo.openDoc != 1) {
 						this.$message.warning("该空间未开放，无法查看开放文档地址");
@@ -288,11 +350,66 @@
 					});
 				}).catch(()=>{});
 			},
+			actionTabClick(tab) {
+				if (tab.name == 'comment') {
+					this.showCommentWiki();
+				} else if (tab.name == 'history') {
+					this.showPageHistory();
+				}
+			},
+			closeActionTab() {
+				this.actionTabVisible = false;
+				this.clearHistory();
+			},
+			showCommentWiki() {
+				this.actionTabVisible = true;
+				this.actionTabActiveName = 'comment';
+				this.scrollActionTabComment();
+			},
+			showPageHistory() {
+				this.actionTabVisible = true;
+				this.actionTabActiveName = 'history';
+				this.clearHistory();
+			},
+			getPageHistory(pageId) {
+				this.pageHistoryList = [];
+				let param = {pageId: pageId, pageNum: 1};
+				pageApi.pageHistoryList(param).then(json => {
+					let pageHistoryList = json.data || [];
+					pageHistoryList.forEach(item => item.loading = 0);
+					this.pageHistoryList = pageHistoryList;
+				});
+			},
+			historyClick(history) {
+				if (this.pageHistoryChoice.id == history.id && !!this.pageHistoryDetail) {
+					return;
+				}
+				this.pageHistoryChoice.loading = 0;
+				this.pageHistoryChoice = history;
+				// 缓存一下，但如果历史页面多了而且很大就占内存，也可以每次去拉取，先这样吧
+				if (history.content) {
+					history.loading = 2;
+					this.pageHistoryDetail = history.content || '内容为空';
+				} else {
+					history.loading = 1;
+					pageApi.pageHistoryDetail({id: history.id}).then(json => {
+						history.loading = 2;
+						this.pageHistoryDetail = json.data || '内容为空';
+						history.content = json.data || '内容为空';
+					});
+				}
+			},
+			clearHistory() {
+				this.pageHistoryChoice.loading = 0;
+				this.pageHistoryDetail = '';
+				this.pageHistoryChoice = {};
+				this.pageHistoryList.forEach(item => item.loading = 0);
+			},
 			loadPageDetail(pageId) {
-				var param = {id: pageId};
-				pageApi.pageDetail(param).then(json => {
+				this.clearHistory();
+				pageApi.pageDetail({id: pageId}).then(json => {
 					let result = json.data || {};
-					var wikiPage = result.wikiPage || {};
+					let wikiPage = result.wikiPage || {};
 					wikiPage.selfZan = result.selfZan || 0;
 					this.wikiPage = wikiPage;
 					this.pageContent = result.pageContent || {};
@@ -320,25 +437,32 @@
 					this.$emit('changeExpandedKeys', pageId);
 				});
 				this.loadCommentList(pageId);
+				this.getPageHistory(pageId);
 			},
 			loadCommentList(pageId) {
-				this.commentList = [];
 				this.cancelCommentUser();
-				var param = {pageId: pageId};
-				pageApi.pageCommentList(param).then(json => {
-					var commentList = json.data || [];
-					for (var i = 0; i < commentList.length; i++) {
+				pageApi.pageCommentList({pageId: pageId}).then(json => {
+					let commentList = json.data || [];
+					for (let i = 0; i < commentList.length; i++) {
 						commentList[i].color = this.getUserHeadBgColor(commentList[i].createUserId);
-						var subCommentList = commentList[i].commentList || [];
-						for (var j = 0; j < subCommentList.length; j++) {
-							var subItem = subCommentList[j];
+						let subCommentList = commentList[i].commentList || [];
+						for (let j = 0; j < subCommentList.length; j++) {
+							let subItem = subCommentList[j];
 							subItem.color = this.getUserHeadBgColor(subItem.createUserId);
 						}
 						commentList[i].commentList = subCommentList;
+						commentList[i].visible = false;
 					}
 					this.commentList = commentList;
+					this.scrollActionTabComment();
 				});
 			},
+			scrollActionTabComment() {
+				setTimeout(() => {
+					let actionTabComment = this.$refs.actionTabComment;
+					actionTabComment.scrollTop = actionTabComment.scrollHeight;
+				}, 0);
+			},
 			zanPage(yn) {
 				var param = {yn: yn, pageId: this.wikiPage.id};
 				pageApi.updatePageZan(param).then(() => {
@@ -361,15 +485,9 @@
 				return this.selfUserId == row.createUserId || this.wikiPage.createUserId == this.selfUserId;
 			},
 			deleteComment(id) {
-				this.$confirm('确定要除删此评论吗？', '提示', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					pageApi.deletePageComment({id: id}).then(() => {
-						this.$message.success("删除成功！");
-						this.loadCommentList(this.parentPath.pageId);
-					});
+				pageApi.deletePageComment({id: id}).then(() => {
+					// this.$message.success("删除成功！");
+					this.loadCommentList(this.parentPath.pageId);
 				});
 			},
 			cancelCommentUser() {
@@ -436,7 +554,7 @@
 	}
 </script>
 <style>
-	.page-show-vue {width: 80%; margin: 0 auto; padding: 20px 0;}
+	.page-show-vue {height: 100%;}
 	.page-show-vue .icon-collapse{float: left;font-size: 25px;color: #aaa;margin-top: 8px;cursor: pointer;}
 	.page-show-vue .icon-collapse:hover{color: #eee;}
 	.page-show-vue .wiki-title{font-size: 20px;text-align: center;font-weight: bold;}
@@ -452,9 +570,54 @@
 	/*编辑框高度*/
 	.page-show-vue #newPageContentDiv .w-e-text-container{height: 600px !important;}
 	/*评论*/
-	.page-show-vue .comment-box .head{
+	.page-show-vue .head{
 		float: left;background-color: #ccc;border-radius: 50%;margin-right: 10px;
 		width: 45px; height: 45px; line-height: 45px;text-align: center;color: #fff;
 	}
+	.page-show-vue .el-tabs__header{
+		margin: 0;
+	}
+	.page-show-vue .el-tabs__nav-wrap{
+		padding: 0 20px;
+	}
+	.page-show-vue .close-action-tab{
+		position: absolute;right: 15px;top: 12px;cursor: pointer;z-index: 1;
+	}
+	.page-show-vue .action-tab-box{
+		height: calc(100vh - 120px);overflow: auto;padding: 20px 10px;
+	}
+	.page-show-vue .action-box-empty{
+		text-align: center;padding-top: 30px;color: #888;font-size: 14px;
+	}
+	.page-show-vue .history-item{
+		height: 55px;line-height: 25px;cursor: pointer;vertical-align: middle;
+	}
+	.page-show-vue .history-loading-status{
+		margin-left: 5px;color: #888;
+	}
+	.page-show-vue .el-timeline{
+		padding-inline-start: 0;
+	}
+	.page-show-vue .comment-user-name{
+		margin-bottom: 10px;
+	}
+	.page-show-vue .comment-content{
+		padding: 0;color: #666;margin: 0;white-space: pre-wrap;word-wrap: break-word;line-height: 20px;
+	}
+	.page-show-vue .comment-input-box{
+		position: absolute;bottom: 0;width: 100%;background: #fff;border-top: 1px solid #f1f1f1;
+	}
+	.page-show-vue .comment-input-box textarea{
+		resize: none;width: 100%;box-sizing: border-box;border: 0;outline:none !important;padding: 10px;
+	}
+	.page-show-vue .comment-card .comment-user-name .el-icon-delete{
+		color: #888;font-size: 13px;cursor: pointer;float: right;display: none;
+	}
+	.page-show-vue .comment-card .comment-user-name .el-icon-delete{
+		color: #888;font-size: 13px;cursor: pointer;float: right;display: none;
+	}
+	.page-show-vue .comment-card:hover .comment-user-name .el-icon-delete{
+		display: inline-block;
+	}
 </style>