页面优化

zyplayer-doc-ui/wiki-ui/src/views/view/show/Annex.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="wiki-file">
+		<el-upload v-if="storePage.pageAuth.canUploadFile === 1"
+				   :on-success="uploadFileSuccess"
+				   :on-error="uploadFileError"
+				   :before-upload="beforeUpload"
+				   :action="uploadFileUrl"
+				   :data="uploadFormData"
+				   :with-credentials="true" class="action-btn upload-page-file" name="files"
+				   show-file-list multiple :limit="999">
+			<el-button type="primary" :underline="false" :icon="ElIconUpload" style="margin: 10px;width: 100%"> 上传附件</el-button>
+		</el-upload>
+			<el-table v-show="storePage.fileList.length > 0" :data="storePage.fileList" border
+					  style="width: 100%; margin-bottom: 5px">
+				<el-table-column label="文件名" show-overflow-tooltip>
+					<template v-slot="scope">
+						<el-link target="_blank" :href="scope.row.fileUrl" type="primary">{{scope.row.fileName }}
+						</el-link>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createUserName" label="创建人" width="110px"
+								 show-overflow-tooltip></el-table-column>
+				<el-table-column label="文件大小" width="120px">
+					<template v-slot="scope">{{computeFileSize(scope.row.fileSize) }}</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="创建时间" width="160px"></el-table-column>
+				<el-table-column prop="downloadNum" label="下载次数" width="90px">
+					<template v-slot="scope">{{scope.row.downloadNum || 0}}</template>
+				</el-table-column>
+				<el-table-column label="操作" width="90px" v-if="storePage.pageAuth.canDeleteFile == 1">
+					<template v-slot="scope">
+						<el-button @click="deletePageFile(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</div>
+</template>
+
+<script setup>
+	import {Upload as ElIconUpload} from '@element-plus/icons-vue'
+	import {useStorePageData} from "@/store/pageData";
+
+	let storePage = useStorePageData();
+	import {ref} from 'vue';
+	import {ElMessageBox, ElMessage} from 'element-plus';
+	import pageApi from "@/assets/api/page";
+	import unitUtil from "@/assets/lib/UnitUtil";
+
+	let uploadFormData = ref({pageId: 0});
+	let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
+	const beforeUpload = () => {
+		uploadFormData.value.pageId = storePage.pageInfo.id;
+	}
+	const uploadFileError = (err) => {
+		ElMessage.error('上传失败，' + err);
+	}
+	const uploadFileSuccess = (response) => {
+		if (response.errCode === 200) {
+			storePage.fileList.push(response.data);
+			ElMessage.success('上传成功！');
+		} else {
+			ElMessage('上传失败：' + (response.errMsg || '未知错误'));
+		}
+	}
+	const deletePageFile = (row) => {
+		ElMessageBox.confirm('确定要删除此文件吗？', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning',
+		}).then(() => {
+			let param = {id: row.id};
+			pageApi.deletePageFile(param).then(() => {
+				storePage.fileList = storePage.fileList.filter(item => item.id !== row.id);
+			});
+		})
+	}
+	const computeFileSize = (fileSize) => {
+		return unitUtil.computeFileSize(fileSize)
+	}
+</script>

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>

zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue

@@ -0,0 +1,76 @@
+<template>
+	<!--手机扫码查看弹窗-->
+	<el-dialog title="手机扫码查看" v-model="dataItemEditVisible" width="400px">
+		<div style="text-align: center">
+			<div class="mobile-qr">
+				<canvas ref="qrCodeDivRef"></canvas>
+			</div>
+			<div>使用微信或手机浏览器扫一扫查看</div>
+			<div>或 <a target="_blank" :href="qrCodeUrl">直接访问</a></div>
+		</div>
+	</el-dialog>
+</template>
+
+<script setup>
+import {
+	Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import {markRaw} from 'vue'
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage, ElLoading, ElNotification} from 'element-plus'
+import pageApi from "@/assets/api/page";
+import {useStorePageData} from "@/store/pageData";
+import userApi from "@/assets/api/user";
+import QRCode from 'qrcode'
+import {useStoreSpaceData} from "@/store/spaceData";
+
+let storePage = useStorePageData();
+let storeSpace = useStoreSpaceData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+	visible: Boolean,
+	data: Object,
+});
+
+let dataItemEditVisible = ref(false);
+const emit = defineEmits(['update:visible', 'ok']);
+watch(dataItemEditVisible, () => {
+	emit('update:visible', dataItemEditVisible.value);
+});
+watch(() => props.visible, () => {
+	dataItemEditVisible.value = props.visible;
+	initMobileQrScan();
+});
+onMounted(() => {
+	dataItemEditVisible.value = props.visible;
+	initMobileQrScan();
+});
+let qrCodeUrl = ref('');
+let qrCodeDivRef = ref();
+const initMobileQrScan = () => {
+	if (!dataItemEditVisible.value) return;
+	let routeUrl = router.resolve({
+		path: '/page/share/mobile/view',
+		query: {pageId: storePage.pageInfo.id, space: storeSpace.spaceInfo.uuid}
+	});
+	let hostPath = window.location.href.split('#')[0];
+	setTimeout(() => {
+		qrCodeUrl.value = hostPath + routeUrl.href
+		QRCode.toCanvas(qrCodeDivRef.value, qrCodeUrl.value, {
+				scale: 5, height: 250, wight: 250,
+			}, (error) => {
+				if (error) console.error(error);
+			}
+		)
+	}, 0);
+}
+</script>
+
+<style lang="scss">
+.page-auth-dialog {
+}
+</style>

zyplayer-doc-ui/wiki-ui/src/views/view/show/Navigation.vue

@@ -0,0 +1,106 @@
+<template>
+	<div class="navigation-box">
+		<div class="navigation-content-box">
+			<div></div>
+			<div class="nav-heading" :style="{ width: navigationWidth }">
+				<div v-for="item in heading" :class="'heading-item heading-' + item.level" @click="headingItemClick(item)">
+					{{ item.text }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {toRefs, ref, reactive, onMounted, watch, defineEmits, defineProps, defineExpose,} from 'vue'
+import {useStoreDisplay} from '@/store/wikiDisplay.js'
+import {useStorePageData} from "@/store/pageData";
+import {useResizeEvent} from "@/composable/windowsScroll";
+
+let storePage = useStorePageData();
+const storeDisplay = useStoreDisplay();
+let navigationWidth = ref('100px');
+const props = defineProps({
+	heading: {type: Array, default: []},
+});
+onMounted(() => {
+	setTimeout(() => computeNavigationWidth(), 100);
+});
+useResizeEvent(() => {
+	computeNavigationWidth();
+});
+const computeNavigationWidth = () => {
+
+}
+const headingItemClick = (item) => {
+	// 滚动到指定节点
+	item.node.scrollIntoView({
+		behavior: 'smooth',
+		block: 'start',
+		inline: 'nearest',
+	});
+	// 距离顶部高度
+	//console.log(item.node.offsetTop - item.node.scrollHeight)
+}
+</script>
+
+<style lang="scss">
+.navigation-box {
+	width: 100px;
+	position: absolute;
+	top: 150px;
+	right: 10px;
+	z-index: 4;
+
+	.navigation-content-box {
+		position: fixed;
+		background: #fff;
+		border-radius: 8px;
+		padding: 16px;
+		margin-left: -40px;
+		box-shadow: var(--el-box-shadow-lighter);
+	}
+
+	.nav-heading {
+		max-height: calc(100vh - 250px);
+		overflow-y: auto;
+
+		.heading-item {
+			padding: 5px 0;
+			cursor: pointer;
+			color: #646a73;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			&:hover {
+				color: #3370ff;
+			}
+		}
+
+		.heading-1 {
+			padding-left: 0;
+		}
+
+		.heading-2 {
+			padding-left: 16px;
+		}
+
+		.heading-3 {
+			padding-left: 32px;
+		}
+
+		.heading-4 {
+			padding-left: 48px;
+		}
+
+		.heading-5 {
+			padding-left: 64px;
+		}
+
+		.heading-6 {
+			padding-left: 80px;
+		}
+	}
+}
+</style>

zyplayer-doc-ui/wiki-ui/src/views/view/show/PageAuthDialog.vue

@@ -0,0 +1,140 @@
+<template>
+	<!--人员权限弹窗-->
+	<el-dialog title="页面权限" v-model="dataItemEditVisible" width="800px" class="page-auth-dialog">
+		<el-row>
+			<el-select v-model="pageAuthNewUser" filterable remote reserve-keyword autoComplete="new-password" placeholder="请输入名字、邮箱、账号搜索用户" :remote-method="getSearchUserList" :loading="pageAuthUserLoading" style="width: 690px; margin-right: 10px">
+				<el-option v-for="item in searchUserList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
+			</el-select>
+			<el-button @click="addPageAuthUser">添加</el-button>
+		</el-row>
+		<el-table :data="pageAuthUserList" border style="width: 100%; margin: 10px 0">
+			<el-table-column prop="userName" label="用户" width="150"></el-table-column>
+			<el-table-column label="权限">
+				<template v-slot="scope">
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.editPage">编辑</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.deletePage">删除</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileUpload">文件上传</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileDelete">文件删除</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageAuthManage">权限管理</el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" width="80">
+				<template v-slot="scope">
+					<el-button size="small" type="danger" plain @click="deleteUserPageAuth(scope.row)">删除</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<template #footer>
+			<el-button @click="cancelAuth">取消</el-button>
+			<el-button type="primary" @click="saveUserPageAuth">保存配置</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import {
+	Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import {markRaw} from 'vue'
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage, ElLoading, ElNotification} from 'element-plus'
+import pageApi from "@/assets/api/page";
+import {useStorePageData} from "@/store/pageData";
+import userApi from "@/assets/api/user";
+
+let storePage = useStorePageData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+	visible: Boolean,
+	data: Object,
+});
+
+let dataItemEditVisible = ref(false);
+const emit = defineEmits(['update:visible', 'ok']);
+watch(dataItemEditVisible, () => {
+	emit('update:visible', dataItemEditVisible.value);
+});
+watch(() => props.visible, () => {
+	dataItemEditVisible.value = props.visible;
+	initPageAuth();
+});
+onMounted(() => {
+	dataItemEditVisible.value = props.visible;
+	initPageAuth();
+});
+
+// 页面权限
+let pageAuthUserList = ref([]);
+let searchUserList = ref([]);
+let pageAuthNewUser = ref();
+let pageAuthUserLoading = ref(false);
+const initPageAuth = () => {
+	if (!dataItemEditVisible.value) return;
+	pageAuthNewUser.value = '';
+	pageAuthUserList.value = [];
+	let param = {pageId: storePage.pageInfo.id};
+	pageApi.getPageUserAuthList(param).then((json) => {
+		pageAuthUserList.value = json.data || [];
+	});
+}
+const addPageAuthUser = () => {
+	if (!pageAuthNewUser.value) {
+		ElMessage.warning('请先选择用户');
+		return;
+	}
+	// 已添加过的用户不再添加
+	if (pageAuthUserList.value.find((item) => item.userId === pageAuthNewUser.value)) {
+		pageAuthNewUser.value = undefined;
+		return;
+	}
+	// 获取用户
+	let findUser = searchUserList.value.find((item) => item.id === pageAuthNewUser.value);
+	if (findUser) {
+		return;
+	}
+	// 添加用户
+	pageAuthUserList.value.push({
+		userId: findUser.id,
+		userName: findUser.userName,
+		editPage: 0,
+		commentPage: 0,
+		deletePage: 0,
+		pageFileUpload: 0,
+		pageFileDelete: 0,
+		pageAuthManage: 0,
+	})
+	pageAuthNewUser.value = '';
+}
+const getSearchUserList = (query) => {
+	if (!query) return;
+	pageAuthUserLoading.value = true;
+	userApi.getUserBaseInfo({search: query}).then((json) => {
+		searchUserList.value = json.data || [];
+		pageAuthUserLoading.value = false;
+	});
+}
+const saveUserPageAuth = () => {
+	let param = {
+		pageId: storePage.pageInfo.id,
+		authList: JSON.stringify(pageAuthUserList.value),
+	}
+	pageApi.assignPageUserAuth(param).then(() => {
+		ElMessage.success('保存成功！');
+	});
+}
+const cancelAuth = () => {
+	dataItemEditVisible.value = false;
+}
+const deleteUserPageAuth = (row) => {
+	pageAuthUserList.value = pageAuthUserList.value.filter((item) => item.userId !== row.userId);
+}
+</script>
+
+<style lang="scss">
+.page-auth-dialog {
+}
+</style>

zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="action-tab-box">
+		<div v-if="props.pageHistoryList.length <= 0" class="action-box-empty">
+			暂无修改历史记录
+		</div>
+		<el-timeline v-else>
+			<el-timeline-item v-for="history in props.pageHistoryList">
+				<el-tag :type="props.pageHistoryChoice.id === history.id ? history.loading === 3 ? 'danger' : 'success' : 'info'"
+						class="history-item" @click="historyClick(history)">
+					<div>{{ history.createUserName }}</div>
+					<div>{{ history.createTime }}</div>
+				</el-tag>
+				<el-icon class="history-loading-status" v-show="history.loading===1">
+					<el-icon-loading/>
+				</el-icon>
+				<el-icon class="history-loading-status" v-show="history.loading===2">
+					<el-icon-circle-check/>
+				</el-icon>
+				<el-icon class="history-loading-status" v-show="history.loading===3">
+					<el-icon-circle-close/>
+				</el-icon>
+			</el-timeline-item>
+		</el-timeline>
+	</div>
+</template>
+
+<script setup>
+import {
+	CircleCheck as ElIconCircleCheck,
+	CircleClose as ElIconCircleClose,
+	Loading as ElIconLoading,
+} from '@element-plus/icons-vue'
+
+import pageApi from '@/assets/api/page'
+import {mavonEditor} from "mavon-editor";
+import {ref, defineProps, defineEmits} from 'vue';
+import {useStorePageData} from "@/store/pageData";
+let storePage = useStorePageData();
+
+let props= defineProps({
+	pageHistoryList:Array,
+	pageHistoryChoice:Object,
+	pageHistoryDetail:String,
+})
+let emit = defineEmits(['historyClickHandle','previewPageImage','createNavigationHeading'])
+
+const historyClick = (history) => {
+	if (props.pageHistoryChoice.id === history.id && !!props.pageHistoryDetail.value) {
+		return;
+	}
+	// 缓存一下，但如果历史页面多了而且很大就占内存，也可以每次去拉取，先这样吧
+	if (history.content) {
+		history.loading = 2;
+		emit('historyClickHandle',history)
+		setTimeout(() => {
+			emit('previewPageImage',history)
+			emit('createNavigationHeading',history)
+		}, 500)
+	} else {
+		history.loading = 1
+		pageApi.pageHistoryDetail({id: history.id}).then((json) => {
+			history.loading = 2;
+			history.content = json.data || '--';
+			if (storePage.pageInfo.editorType === 2) {
+				history.content = mavonEditor.getMarkdownIt().render(history.content);
+			}
+			emit('historyClickHandle',history)
+			setTimeout(() => {
+				emit('previewPageImage',history)
+				emit('createNavigationHeading',history)
+			}, 500);
+		}).catch(() => {
+			history.loading = 3;
+		});
+	}
+}
+</script>
+
+<style lang="scss">
+</style>

zyplayer-doc-ui/wiki-ui/src/views/view/show/PageZan.vue

@@ -0,0 +1,55 @@
+<template>
+	<div style="margin-top: 40px; font-size: 14px">
+		<span style="vertical-align: top" class="is-link">
+		  <span v-show="storePage.pageInfo.selfZan == 0" @click="zanPage(1)"><img src="../../../assets/img/zan.png" style="vertical-align: middle"/> 赞</span>
+		  <span v-show="storePage.pageInfo.selfZan == 1" @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 v-if="storePage.pageInfo.selfZan == 0 && storePage.pageInfo.zanNum <= 0">成为第一个赞同者</span>
+		  <span v-else-if="storePage.pageInfo.selfZan == 0 && storePage.pageInfo.zanNum > 0">
+			<span class="is-link" @click="showZanPageUser">{{ storePage.pageInfo.zanNum }}人</span>赞了它
+		  </span>
+		  <span v-else-if="storePage.pageInfo.selfZan == 1 && storePage.pageInfo.zanNum <= 1">我赞了它</span>
+		  <span v-else-if="storePage.pageInfo.selfZan == 1 && storePage.pageInfo.zanNum > 1">
+			<span class="is-link" @click="showZanPageUser">我和{{ storePage.pageInfo.zanNum - 1 }}个其他人</span>赞了它
+		  </span>
+		</span>
+		<span style="margin-left: 10px">
+			<el-icon style="font-size: 16px; color: #666;vertical-align: middle;"><el-icon-view/></el-icon> {{ storePage.pageInfo.viewNum }}次阅读
+		</span>
+	</div>
+	<el-dialog title="赞了它的人" v-model="zanUserDialogVisible" width="600px">
+		<el-table :data="zanUserList" border :show-header="false" style="width: 100%; margin-bottom: 5px">
+			<el-table-column prop="createUserName" label="用户"></el-table-column>
+			<el-table-column prop="createTime" label="时间"></el-table-column>
+		</el-table>
+	</el-dialog>
+</template>
+
+<script setup>
+import pageApi from '../../../assets/api/page'
+import {ref} from 'vue';
+import {useStorePageData} from "@/store/pageData";
+import {
+	View as ElIconView,
+} from '@element-plus/icons-vue'
+let zanUserList = ref([]);
+let zanUserDialogVisible = ref(false);
+let storePage = useStorePageData();
+
+const zanPage = (yn) => {
+	let param = {yn: yn, pageId: storePage.pageInfo.id}
+	pageApi.updatePageZan(param).then(() => {
+		storePage.pageInfo.selfZan = yn
+		storePage.pageInfo.zanNum = storePage.pageInfo.zanNum + (yn == 1 ? 1 : -1)
+	})
+}
+const showZanPageUser = () => {
+	zanUserDialogVisible.value = true
+	zanUserList.value = []
+	let param = {pageId: storePage.pageInfo.id}
+	pageApi.pageZanList(param).then((json) => {
+		zanUserList.value = json.data
+	})
+}
+</script>