页面优化

2024-12-07 20:05:01 +08:00
parent 3dd0df2893
commit db4de0b319
15 changed files with 2197 additions and 35 deletions
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
@@ -0,0 +1,197 @@
+<template>
+	<div class="comment-outer-box">
+		<div class="comment-box" ref="actionTabCommentRef">
+			<div v-if="commentList.length <= 0" class="action-box-empty">暂无评论</div>
+			<div v-else class="comment-list">
+				<el-timeline>
+					<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-popconfirm v-if="canDeleteComment(comment)"
+								               placement="top" width="160" trigger="click"
+								               confirm-button-text="删除"
+								               cancel-button-text="取消"
+								               @confirm="deleteComment(comment.id)"
+								               title="确定要删除此评论吗？">
+									<template #reference>
+										<el-icon class="icon-delete"><ElIconDelete /></el-icon>
+									</template>
+								</el-popconfirm>
+							</div>
+							<pre class="comment-content">{{ comment.content }}</pre>
+						</el-card>
+					</el-timeline-item>
+				</el-timeline>
+			</div>
+		</div>
+		<div class="comment-input-box">
+			<textarea rows="5" placeholder="发表评论" v-model="commentTextInput" :maxlength="500"></textarea>
+			<div class="comment-btn-box">
+				<el-button type="primary" size="small" @click="submitPageComment">发送</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {
+	Delete as ElIconDelete,
+	Loading as ElIconLoading,
+} from '@element-plus/icons-vue'
+import {toRefs, ref, reactive, onMounted, watch, defineProps, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
+import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
+import pageApi from '@/assets/api/page'
+import {useStorePageData} from "@/store/pageData";
+import {useStoreUserData} from "@/store/userData";
+
+let page = {
+	colorArr: ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399', '#303133'],
+	userHeadColor: {},
+}
+// 评论相关
+let commentTextInput = ref('');
+let commentList = ref([]);
+let recommentInfo = ref({});
+
+let route = useRoute();
+let router = useRouter();
+let storePage = useStorePageData();
+let storeUser = useStoreUserData();
+
+watch(() => storePage.pageInfo, (newVal) => {
+	if (storePage.pageInfo.editorType !== 0){
+		loadCommentList();
+	}
+})
+onMounted(() => {
+	loadCommentList();
+});
+let actionTabCommentRef = ref();
+const scrollActionTabComment = () => {
+	setTimeout(() => {
+		let actionTabComment = actionTabCommentRef.value
+		actionTabComment.scrollTop = actionTabComment.scrollHeight
+	}, 0)
+}
+const loadCommentList = () => {
+	if (!storePage.pageInfo || !storePage.pageInfo.id) {
+		return;
+	}
+	cancelCommentUser()
+	pageApi.pageCommentList({pageId: storePage.pageInfo.id}).then((json) => {
+		let commentListRes = json.data || []
+		for (let i = 0; i < commentListRes.length; i++) {
+			commentListRes[i].color = getUserHeadBgColor(commentListRes[i].createUserId)
+			let subCommentList = commentListRes[i].commentList || []
+			for (let j = 0; j < subCommentList.length; j++) {
+				let subItem = subCommentList[j]
+				subItem.color = getUserHeadBgColor(subItem.createUserId)
+			}
+			commentListRes[i].commentList = subCommentList
+			commentListRes[i].visible = false
+		}
+		commentList.value = commentListRes
+		scrollActionTabComment()
+	})
+}
+let canDeleteComment = (row) => {
+	return storeUser.userInfo.id === row.createUserId
+		|| storeUser.userInfo.id === storePage.pageInfo.createUserId
+}
+const deleteComment = (id) => {
+	pageApi.deletePageComment({id: id}).then(() => {
+		// ElMessage.success("删除成功！");
+		loadCommentList()
+	})
+}
+const cancelCommentUser = () => {
+	recommentInfo.value = {}
+}
+const submitPageComment = () => {
+	if (commentTextInput.value.length <= 0) {
+		ElMessage.error('请输入评论内容')
+		return
+	}
+	let param = {
+		pageId: storePage.pageInfo.id,
+		content: commentTextInput.value,
+		parentId: recommentInfo.value.id,
+	}
+	pageApi.updatePageComment(param).then((json) => {
+		let data = json.data
+		data.color = getUserHeadBgColor(data.createUserId)
+		commentTextInput.value = ''
+		loadCommentList()
+	})
+}
+const getUserHeadBgColor = (userId) => {
+	let color = page.userHeadColor[userId]
+	if (!color) {
+		color = page.colorArr[Math.ceil(Math.random() * page.colorArr.length) - 1]
+		page.userHeadColor[userId] = color
+	}
+	return color
+}
+</script>
+
+<style lang="scss">
+.comment-box {
+	padding: 8px;
+	height: calc(100vh - 315px);
+	overflow: auto;
+
+	.comment-card {
+		.comment-user-name {
+			margin-bottom: 10px;
+
+			.icon-delete {
+				color: #888;
+				font-size: 13px;
+				cursor: pointer;
+				float: right;
+				display: none;
+			}
+		}
+
+		.comment-content {
+			padding: 0;
+			color: #666;
+			margin: 0;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+			line-height: 20px;
+		}
+	}
+
+	.comment-card:hover {
+		.icon-delete {
+			display: inline-block;
+		}
+	}
+}
+
+.comment-input-box {
+	width: 100%;
+	background: #fff;
+	border-top: 1px solid #f1f1f1;
+
+	textarea {
+		resize: none;
+		width: 100%;
+		box-sizing: border-box;
+		border: 0;
+		outline: none !important;
+		padding: 10px;
+	}
+
+	.comment-btn-box {
+		text-align: right;
+		padding: 4px 15px 6px 0;
+	}
+}
+</style>