---wiki正式切换到vue3版本---

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

@@ -1,307 +1,350 @@
 <template>
-	<div style="height: 100%;" class="page-edit-vue">
-		<div style="box-sizing: border-box;background: #f5f5f5;overflow: hidden;">
-			<div style="padding: 8px;font-size: 14px;background: #fff;">
+	<div style="height: 100%" class="page-edit-vue">
+		<div style="box-sizing: border-box; background: #f5f5f5; overflow: hidden">
+			<div style="padding: 8px; font-size: 14px; background: #fff">
 				<el-row>
 					<el-col :span="16">
 						<template v-if="pageId">
 							<span>编辑方式：</span>
-							<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
+							<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="small">
 								<el-option label="Markdown" :value="2"></el-option>
 								<el-option label="HTML" :value="1"></el-option>
 							</el-select>
 						</template>
 						<template v-else>
-							<span style="margin-right: 20px;">父级：{{parentWikiPage.name || '/'}}</span>
+                            <span style="margin-right: 20px">父级：{{ parentWikiPage.name || '/' }}</span>
 							<el-tooltip class="item" content="在根目录创建文档" v-if="parentId">
-								<el-button type="text" @click="changeToRootPath" size="mini" style="padding: 0 10px;">根目录</el-button>
+								<el-link @click="changeToRootPath" size="small" style="padding: 0 10px">根目录</el-link>
 							</el-tooltip>
-							<span style="margin-left: 50px;">编辑方式：</span>
-							<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="mini">
+							<span style="margin-left: 50px">编辑方式：</span>
+							<el-select v-model="wikiPageEdit.editorType" v-on:change="editorTypeChange" :disabled="!!pageId" size="small">
 								<el-option label="Markdown" :value="2"></el-option>
 								<el-option label="HTML" :value="1"></el-option>
 							</el-select>
 						</template>
 					</el-col>
-					<el-col :span="8" style="text-align: right;">
-						<el-button type="primary" v-on:click="createWikiSave(1)" size="mini" icon="el-icon-document-checked">保存并查看</el-button>
-						<el-button type="success" v-on:click="createWikiSave(0)" size="mini" icon="el-icon-check">仅保存</el-button>
-						<el-button v-on:click="createWikiCancel" size="mini" icon="el-icon-back">取消</el-button>
+					<el-col :span="8" style="text-align: right">
+						<el-button type="primary" v-on:click="createWikiSave(1)" size="small" :icon="ElIconDocumentChecked">保存并查看</el-button>
+						<el-button type="success" v-on:click="createWikiSave(0)" size="small" :icon="ElIconCheck">仅保存</el-button>
+						<el-button v-on:click="createWikiCancel" size="small" :icon="ElIconBack">取消</el-button>
 					</el-col>
 				</el-row>
 			</div>
-			<div v-show="wikiPageEdit.editorType===2" style="padding: 0 10px 10px 10px;background: #fff;">
+			<div v-show="wikiPageEdit.editorType === 2" style="padding: 0 10px 10px 10px; background: #fff">
 				<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
-				<mavon-editor ref="mavonEditor" v-model="markdownContent" :toolbars="toolbars"
-				              :externalLink="false"
-				              style="height: calc(100vh - 165px);"
-				              @save="createWikiSave(0)" @imgAdd="addMarkdownImage"
-				              placeholder="请录入文档内容" class="page-content-editor wang-editor-body"/>
+				<mavonEditor
+					ref="mavonEditorRef"
+					v-model="markdownContent"
+					:toolbars="toolbars"
+					:externalLink="false"
+					style="height: calc(100vh - 165px)"
+					@save="createWikiSave(0)"
+					@imgAdd="addMarkdownImage"
+					placeholder="请录入文档内容"
+					class="page-content-editor wang-editor-body"
+				/>
 			</div>
-			<div v-show="wikiPageEdit.editorType===1">
-				<WangEditor ref="wangEditor"></WangEditor>
+			<div v-show="wikiPageEdit.editorType === 1">
+				<WangEditor ref="wangEditorRef"></WangEditor>
 			</div>
-<!--			<div v-show="wikiPageEdit.editorType===1" id="newPageContentDiv" class="page-content-editor" style="height: calc(100vh - 250px);"></div>-->
 		</div>
 	</div>
 </template>
 
-<script>
-	import pageApi from '../../common/api/page'
-	import {mavonEditor} from 'mavon-editor'
-	import 'mavon-editor/dist/markdown/github-markdown.min.css'
-	import 'mavon-editor/dist/css/index.css'
-	import axios from 'axios'
-	import WangEditor from './editor/WangEditor.vue'
+<script setup>
+import {onBeforeUnmount, ref, onMounted, onUnmounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage} from 'element-plus'
+import {
+	DocumentChecked as ElIconDocumentChecked,
+	Check as ElIconCheck,
+	Back as ElIconBack,
+} from '@element-plus/icons-vue'
+import pageApi from '../../assets/api/page'
+import {mavonEditor} from 'mavon-editor'
+import 'mavon-editor/dist/markdown/github-markdown.min.css'
+import 'mavon-editor/dist/css/index.css'
+import axios from 'axios'
+import WangEditor from './editor/WangEditor.vue'
 
-	export default {
-		props: ['spaceId'],
-		data() {
-			return {
-				editor: {},
-				// 编辑相关
-				wikiPageEdit: {
-					editorType: 2,
-					pageTitle: "",
-				},
-				wikiPage: {},
-				parentWikiPage: {},
-                isUnlock: false,
-				// 页面ID，有值代表编辑
-				pageId: '',
-				// 父级，有值代表在此父级新建文档
-				parentId: '',
-				markdownContent: '',
-				toolbars: {
-					bold: true, // 粗体
-					italic: true, // 斜体
-					header: true, // 标题
-					underline: true, // 下划线
-					strikethrough: true, // 中划线
-					mark: true, // 标记
-					superscript: true, // 上角标
-					subscript: true, // 下角标
-					quote: true, // 引用
-					ol: true, // 有序列表
-					ul: true, // 无序列表
-					link: true, // 链接
-					imagelink: true, // 图片链接
-					code: true, // code
-					table: true, // 表格
-					fullscreen: true, // 全屏编辑
-					readmodel: true, // 沉浸式阅读
-					/* 1.3.5 */
-					undo: true, // 上一步
-					redo: true, // 下一步
-					trash: true, // 清空
-					save: true, // 保存（触发events中的save事件）
-					/* 1.4.2 */
-					navigation: true, // 导航目录
-					/* 2.1.8 */
-					alignleft: true, // 左对齐
-					aligncenter: true, // 居中
-					alignright: true, // 右对齐
-					/* 2.2.1 */
-					subfield: true, // 单双栏模式
-					preview: true, // 预览
-				},
-				fileUploadUrl: process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
-			};
-		},
-		components: {
-			WangEditor, mavonEditor,
-		},
-		destroyed: function () {
-            this.unlockPage();
-		},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted: function () {
-			this.initEditor();
-			this.initQueryParam(this.$route);
-			let that = this;
-			window.onunload = function () {
-				that.unlockPage();
-			};
-			window.onbeforeunload = function () {
-				that.unlockPage();
-			};
-		},
-		methods: {
-			changeToRootPath() {
-				// 没有父级，就是在根目录创建
-				this.parentId = '';
-				this.parentWikiPage = {};
-			},
-			editorTypeChange() {
-			},
-            unlockPage() {
-			    // 防止各种事件重复调这个接口，只需要调一次就好了
-				if (this.isUnlock) return;
-				this.isUnlock = true;
-				pageApi.pageUnlock({pageId: this.pageId});
-            },
-			createWikiCancel() {
-				this.$confirm('确定要取消编辑吗？您编辑的内容将不会被保存哦~', '提示', {
-					confirmButtonText: '确定',
-					cancelButtonText: '继续编辑',
-					type: 'warning'
-				}).then(() => {
-					this.unlockPage();
-					this.$router.back();
-				});
-			},
-			createWikiSave(saveAfter) {
-				let content = '', preview = '';
-				if (this.wikiPageEdit.editorType === 2) {
-					content = this.markdownContent;
-					preview = this.markdownContent;
-				} else {
-					let pageData = this.$refs.wangEditor.getPageData();
-					content = pageData.html;
-					preview = pageData.text;
-					this.wikiPageEdit.pageTitle = pageData.title;
-				}
-				if (!this.wikiPageEdit.pageTitle) {
-					this.$message.warning("标题不能为空");
-					return;
-				}
-				// 修改内容时强制不能修改父路径，只能在目录上拖动修改
-				let parentId = (this.pageId > 0) ? '' : this.parentId;
-				let param = {
-					spaceId: this.spaceId,
-					parentId: parentId,
-					id: this.wikiPage.id,
-					name: this.wikiPageEdit.pageTitle,
-					editorType: this.wikiPageEdit.editorType,
-					content: content,
-					preview: preview,
-				};
-				pageApi.updatePage(param).then(json => {
-					this.$message.success("保存成功！");
-					// 重新加载左侧列表，跳转到展示页面
-					this.$emit('loadPageList');
-					this.pageId = json.data.id;
-					if (saveAfter == 1) {
-						this.$router.push({path: '/page/show', query: {pageId: this.pageId}});
-					} else {
-						this.loadPageDetail(this.pageId);
-					}
-				});
-			},
-			loadPageDetail(pageId) {
-				pageApi.pageDetail({id: pageId}).then(json => {
-					this.wikiPage = json.data.wikiPage || {};
-					this.pageContent = json.data.pageContent || {};
-					this.pageFileList = json.data.fileList || [];
-					// 内容
-					this.wikiPageEdit.pageTitle = this.wikiPage.name;
-					this.wikiPageEdit.editorType = this.wikiPage.editorType;
-					if (this.wikiPageEdit.editorType === 2) {
-						this.markdownContent = this.pageContent.content || "";
-					} else {
-						// this.editor.txt.html(this.pageContent.content || "");
-						setTimeout(() => {
-							this.$refs.wangEditor.setTitle(this.wikiPage.name || "");
-							this.$refs.wangEditor.setHtml(this.pageContent.content || "");
-						}, 0);
-					}
-				});
-			},
-			loadParentPageDetail(pageId) {
-				if (!pageId) return;
-				pageApi.pageDetail({id: pageId}).then(json => {
-					this.parentWikiPage = json.data.wikiPage || {};
-				});
-			},
-			cleanPage() {
-				this.wikiPage = {};
-				this.pageContent = {};
-				this.pageFileList = [];
-				this.wikiPageEdit.pageTitle = "";
-				if (!!this.editor.txt) {
-					this.editor.txt.html("");
-				}
-			},
-			initQueryParam(to) {
-				// pageId和parentId二选一，传了pageId代表编辑页面，否则代表新建页面
-				this.pageId = to.query.pageId;
-				this.parentId = to.query.parentId;
-				if (!!this.pageId) {
-					this.loadPageDetail(this.pageId);
-					pageApi.pageLock({pageId: this.pageId}).catch(json => {
-						let that = this;
-						this.$alert(json.errMsg || '未知错误', '错误', {
-							confirmButtonText: '确定',
-							callback: () => {
-								that.$router.back();
-							}
-						});
-					});
-				} else {
-					this.loadParentPageDetail(this.parentId);
-					this.cleanPage();
-				}
-			},
-			addMarkdownImage(pos, file) {
-				let formData = new FormData();
-				formData.append('files', file);
-				axios({
-					url: this.fileUploadUrl,
-					method: 'post',
-					data: formData,
-					headers: {'Content-Type': 'multipart/form-data'},
-					timeout: 10000,
-					withCredentials: true
-				}).then(res => {
-					let urlObj = res.data.data || {};
-					if (urlObj.url) {
-						this.$refs.mavonEditor.$img2Url(pos, urlObj.url);
-					} else {
-						this.$message.warning("上传失败，返回数据为空");
-					}
-				}).catch(e => {
-					this.$message.warning("上传失败：" + e.message);
-				});
-			},
-			initEditor() {
-				// this.editor = new WangEditor('#newPageContentDiv');
-				// this.editor.customConfig.uploadImgServer = process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload';
-				// this.editor.customConfig.zIndex = 100;
-				// this.editor.customConfig.uploadFileName = 'files';
-				// this.editor.customConfig.uploadImgMaxLength = 1;
-				// this.editor.customConfig.pasteFilterStyle = false;
-				// this.editor.customConfig.withCredentials = true;
-				// this.editor.create();
-			},
+let editor = ref({});
+// 编辑相关
+let wikiPageEdit = ref({editorType: 2, pageTitle: '',});
+let wikiPage = ref({});
+let pageContent = ref({});
+let pageFileList = ref([]);
+let parentWikiPage = ref({});
+let isUnlock = ref(false);
+// 页面ID，有值代表编辑
+let pageId = ref('');
+// 父级，有值代表在此父级新建文档
+let parentId = ref('');
+let markdownContent = ref('');
+let fileUploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload');
+let toolbars = {
+	bold: true, // 粗体
+	italic: true, // 斜体
+	header: true, // 标题
+	underline: true, // 下划线
+	strikethrough: true, // 中划线
+	mark: true, // 标记
+	superscript: true, // 上角标
+	subscript: true, // 下角标
+	quote: true, // 引用
+	ol: true, // 有序列表
+	ul: true, // 无序列表
+	link: true, // 链接
+	imagelink: true, // 图片链接
+	code: true, // code
+	table: true, // 表格
+	fullscreen: true, // 全屏编辑
+	readmodel: true, // 沉浸式阅读
+	/* 1.3.5 */
+	undo: true, // 上一步
+	redo: true, // 下一步
+	trash: true, // 清空
+	save: true, // 保存（触发events中的save事件）
+	/* 1.4.2 */
+	navigation: true, // 导航目录
+	/* 2.1.8 */
+	alignleft: true, // 左对齐
+	aligncenter: true, // 居中
+	alignright: true, // 右对齐
+	/* 2.2.1 */
+	subfield: true, // 单双栏模式
+	preview: true, // 预览
+};
+const props = defineProps({
+	spaceId: Number,
+});
+let emit = defineEmits(['loadPageList']);
+onBeforeRouteUpdate((to) => {
+	initQueryParam(to);
+});
+let route = useRoute();
+let router = useRouter();
+onUnmounted(() => {
+	unlockPage()
+});
+onMounted(() => {
+	initEditor()
+	initQueryParam(route)
+	let that = this
+	window.onunload = function () {
+		that.unlockPage()
+	}
+	window.onbeforeunload = function () {
+		that.unlockPage()
+	}
+})
+const changeToRootPath = () => {
+	// 没有父级，就是在根目录创建
+	parentId.value = ''
+	parentWikiPage.value = {}
+}
+const editorTypeChange = () => {
+}
+const unlockPage = () => {
+	// 防止各种事件重复调这个接口，只需要调一次就好了
+	if (isUnlock.value) return
+	isUnlock.value = true
+	pageApi.pageUnlock({pageId: pageId.value})
+}
+const createWikiCancel = () => {
+	ElMessageBox.confirm('确定要取消编辑吗？您编辑的内容将不会被保存哦~', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '继续编辑',
+		type: 'warning',
+	}).then(() => {
+		unlockPage()
+		router.back()
+	})
+}
+let wangEditorRef = ref();
+const createWikiSave = (saveAfter) => {
+	let content = '',
+		preview = ''
+	if (wikiPageEdit.value.editorType === 2) {
+		content = markdownContent.value
+		preview = markdownContent.value
+	} else {
+		let pageData = wangEditorRef.value.getPageData()
+		content = pageData.html
+		preview = pageData.text
+		wikiPageEdit.value.pageTitle = pageData.title
+	}
+	if (!wikiPageEdit.value.pageTitle) {
+		ElMessage.warning('标题不能为空')
+		return
+	}
+	// 修改内容时强制不能修改父路径，只能在目录上拖动修改
+	let parentIdVal = pageId.value > 0 ? '' : parentId.value
+	let param = {
+		spaceId: props.spaceId,
+		parentId: parentIdVal,
+		id: wikiPage.value.id,
+		name: wikiPageEdit.value.pageTitle,
+		editorType: wikiPageEdit.value.editorType,
+		content: content,
+		preview: preview,
+	}
+	pageApi.updatePage(param).then((json) => {
+		ElMessage.success('保存成功！')
+		// 重新加载左侧列表，跳转到展示页面
+		emit('loadPageList')
+		pageId.value = json.data.id
+		if (saveAfter == 1) {
+			router.push({
+				path: '/page/show',
+				query: {pageId: pageId.value},
+			})
+		} else {
+			loadPageDetail.value(pageId.value)
 		}
+	})
+}
+const loadPageDetail = (pageId) => {
+	pageApi.pageDetail({id: pageId}).then((json) => {
+		wikiPage.value = json.data.wikiPage || {}
+		pageContent.value = json.data.pageContent || {}
+		pageFileList.value = json.data.fileList || []
+		// 内容
+		wikiPageEdit.value.pageTitle = wikiPage.value.name
+		wikiPageEdit.value.editorType = wikiPage.value.editorType
+		if (wikiPageEdit.value.editorType === 2) {
+			markdownContent.value = pageContent.value.content || ''
+		} else {
+			// editor.value.txt.html(pageContent.value.content || "");
+			setTimeout(() => {
+				wangEditorRef.value.setTitle(wikiPage.value.name || '')
+				wangEditorRef.value.setHtml(pageContent.value.content || '')
+			}, 0)
+		}
+	})
+}
+const loadParentPageDetail = (pageId) => {
+	if (!pageId) return
+	pageApi.pageDetail({id: pageId}).then((json) => {
+		parentWikiPage.value = json.data.wikiPage || {}
+	})
+}
+const cleanPage = () => {
+	wikiPage.value = {}
+	pageContent.value = {}
+	pageFileList.value = []
+	wikiPageEdit.value.pageTitle = ''
+	if (!!editor.value.txt) {
+		editor.value.txt.html('')
 	}
-
+}
+const initQueryParam = (to) => {
+	// pageId和parentId二选一，传了pageId代表编辑页面，否则代表新建页面
+	pageId.value = to.query.pageId
+	parentId.value = to.query.parentId
+	if (!!pageId.value) {
+		loadPageDetail(pageId.value)
+		pageApi.pageLock({pageId: pageId.value}).catch((json) => {
+			ElMessageBox.alert(json.errMsg || '未知错误', '错误', {
+				confirmButtonText: '确定',
+				callback: () => {
+					router.back()
+				},
+			})
+		})
+	} else {
+		loadParentPageDetail(parentId.value)
+		cleanPage()
+	}
+}
+let mavonEditorRef = ref();
+const addMarkdownImage = (pos, file) => {
+	let formData = new FormData()
+	formData.append('files', file)
+	axios({
+		url: fileUploadUrl.value,
+		method: 'post',
+		data: formData,
+		headers: {'Content-Type': 'multipart/form-data'},
+		timeout: 10000,
+		withCredentials: true,
+	}).then((res) => {
+		let urlObj = res.data.data || {}
+		if (urlObj.url) {
+			mavonEditorRef.value.$img2Url(pos, urlObj.url)
+		} else {
+			ElMessage.warning('上传失败，返回数据为空')
+		}
+	}).catch((e) => {
+		ElMessage.warning('上传失败：' + e.message)
+	})
+}
+const initEditor = () => {
+}
 </script>
+
 <style>
-	.page-edit-vue .icon-collapse{float: left;font-size: 25px;color: #aaa;margin-top: 8px;cursor: pointer;}
-	.page-edit-vue .icon-collapse:hover{color: #eee;}
-	.page-edit-vue .wiki-title{font-size: 20px;}
-	.page-edit-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
-	.page-edit-vue .wiki-content{font-size: 14px;}
-	.page-edit-vue .wiki-content.w-e-text{overflow-y: auto;}
+.page-edit-vue .icon-collapse {
+	float: left;
+	font-size: 25px;
+	color: #aaa;
+	margin-top: 8px;
+	cursor: pointer;
+}
 
-	.page-edit-vue .upload-page-file .el-upload-list{display: none;}
-	.page-edit-vue .is-link{color: #1e88e5;cursor: pointer;}
-	/*编辑框高度*/
-	.page-edit-vue #newPageContentDiv .w-e-text-container{height: 100% !important;}
-	/*评论*/
-	.page-edit-vue .comment-box .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-edit-vue .page-content-editor{
-		padding: 10px 0;
-	}
-	.page-edit-vue .page-title-input{
-		padding-bottom: 10px;
-	}
+.page-edit-vue .icon-collapse:hover {
+	color: #eee;
+}
+
+.page-edit-vue .wiki-title {
+	font-size: 20px;
+}
+
+.page-edit-vue .wiki-author {
+	font-size: 14px;
+	color: #888;
+	padding: 20px 0;
+	height: 40px;
+	line-height: 40px;
+}
+
+.page-edit-vue .wiki-content {
+	font-size: 14px;
+}
+
+.page-edit-vue .wiki-content.w-e-text {
+	overflow-y: auto;
+}
+
+.page-edit-vue .upload-page-file .el-upload-list {
+	display: none;
+}
+
+.page-edit-vue .is-link {
+	color: #1e88e5;
+	cursor: pointer;
+}
+
+.page-edit-vue #newPageContentDiv .w-e-text-container {
+	height: 100% !important;
+}
+
+.page-edit-vue .comment-box .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-edit-vue .page-content-editor {
+	padding: 10px 0;
+}
+
+.page-edit-vue .page-title-input {
+	padding-bottom: 10px;
+}
 </style>
-

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

@@ -1,118 +1,144 @@
 <template>
-	<div style="background: #f1f1f1;min-height: 100%;" class="page-search-vue">
+	<div style="background: #f1f1f1; min-height: 100%" class="page-search-vue">
 		<div style="max-width: 1200px;margin: 0 auto;background: #fff;padding: 20px;min-height: 100%;box-sizing: border-box;">
-			<div style="margin-bottom: 20px;">
-				<el-row :gutter="20" style="max-width: 700px; margin: 0 auto;">
+			<div style="margin-bottom: 20px">
+				<el-row :gutter="20" style="max-width: 700px; margin: 0 auto">
 					<el-col :span="20">
-						<el-input v-model="searchParam.keywords" @keyup.enter.native="getSpacePageNews" placeholder="" style="width: 100%;"></el-input>
+						<el-input v-model="searchParam.keywords" @keyup.enter="getSpacePageNews" placeholder="" style="width: 100%"></el-input>
 					</el-col>
 					<el-col :span="4">
-						<el-button type="primary" @click="getSpacePageNews" icon="el-icon-search">搜索一下</el-button>
+						<el-button type="primary" @click="getSpacePageNews" :icon="ElIconSearch">搜索一下</el-button>
 					</el-col>
 				</el-row>
 			</div>
 			<div v-if="spacePageNews.length <= 0" class="empty-news">暂无数据</div>
 			<div v-else class="line-box" v-for="item in spacePageNews">
 				<div class="line-title">
-					<span class="text-link">{{item.createUserName}}</span> 发布于 <span class="text-link">{{item.spaceName}}</span>
+					<span class="text-link">{{ item.createUserName }}</span> 发布于
+					<span class="text-link">{{ item.spaceName }}</span>
 				</div>
 				<div class="page-preview-box">
 					<div class="page-preview-title" v-on:click="showPageDetail(item)" v-html="item.pageTitle"></div>
 					<div class="page-preview-content" v-html="item.previewContent"></div>
-					<div>
-						<span><img src="../../assets/img/zan.png" class="zan-img"> {{item.zanNum}}　</span>
-						<span><i class="el-icon-view view-img"></i> {{item.viewNum}}　</span>
-						<span>{{item.updateTime||item.createTime}}</span>
+				<div>
+                    <span><img src="../../assets/img/zan.png" class="zan-img"/>{{ item.zanNum }}　</span>
+						<span><el-icon class="view-img"><el-icon-view/></el-icon>{{ item.viewNum }}　</span>
+						<span>{{ item.updateTime || item.createTime }}</span>
 					</div>
 				</div>
 			</div>
 			<div class="page-info-box">
 				<el-pagination
-						@size-change="handleSizeChange"
-						@current-change="handleCurrentChange"
-						:page-sizes="[20, 50, 100]"
-						:page-size="20"
-						:current-page="searchParam.pageNum"
-						layout="prev, pager, next, jumper, sizes, total"
-						:total="totalCount"
-				>
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+					:page-sizes="[20, 50, 100]"
+					:page-size="20"
+					:current-page="searchParam.pageNum"
+					layout="prev, pager, next, jumper, sizes, total"
+					:total="totalCount">
 				</el-pagination>
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-	import pageApi from '../../common/api/page'
+<script setup>
+import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage} from 'element-plus'
+import {View as ElIconView, Search as ElIconSearch} from '@element-plus/icons-vue'
+import pageApi from '../../assets/api/page'
 
-	export default {
-		data() {
-			return {
-				totalCount: 0,
-				searchParam: {
-					spaceId: '',
-					keywords: '',
-					newsType: 1,
-					pageNum: 1,
-					pageSize: 20,
-				},
-				spacePageNews:[],
-			};
-		},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted: function () {
-			this.initQueryParam(this.$route);
-		},
-		methods: {
-			getSpacePageNews() {
-				pageApi.pageSearchByEs(this.searchParam).then(json => {
-					this.spacePageNews = json.data || [];
-					this.totalCount = json.total;
-				});
-			},
-			handleSizeChange(val) {
-				this.searchParam.pageSize = val;
-				this.getSpacePageNews();
-			},
-			showPageDetail(row) {
-				window.open('#/page/show?pageId=' + row.pageId);
-			},
-			handleCurrentChange(val) {
-				this.searchParam.pageNum = val;
-				this.getSpacePageNews();
-			},
-			initQueryParam(to) {
-				this.searchParam = {
-					keywords: to.query.keywords,
-					spaceId: to.query.spaceId,
-					newsType: 1,
-					pageNum: 1,
-					pageSize: 20,
-				};
-				this.getSpacePageNews();
-			},
-		}
+let route = useRoute();
+let router = useRouter();
+onMounted(() => {
+	initQueryParam(route);
+});
+let totalCount = ref(0);
+let searchParam = ref({
+	spaceId: '',
+	keywords: '',
+	newsType: 1,
+	pageNum: 1,
+	pageSize: 20,
+});
+let spacePageNews = ref([]);
+const getSpacePageNews = () => {
+	pageApi.pageSearchByEs(searchParam.value).then((json) => {
+		spacePageNews.value = json.data || []
+		totalCount.value = json.total
+	})
+}
+const handleSizeChange = (val) => {
+	searchParam.value.pageSize = val
+	getSpacePageNews()
+}
+const showPageDetail = (row) => {
+	window.open('#/page/show?pageId=' + row.pageId)
+}
+const handleCurrentChange = (val) => {
+	searchParam.value.pageNum = val
+	getSpacePageNews()
+}
+const initQueryParam = (to) => {
+	searchParam.value = {
+		keywords: to.query.keywords,
+		spaceId: to.query.spaceId,
+		newsType: 1,
+		pageNum: 1,
+		pageSize: 20,
 	}
+	getSpacePageNews()
+}
 </script>
+
 <style>
-	.page-search-vue .empty-news{text-align: center;padding: 100px;}
+.page-search-vue .empty-news {
+	text-align: center;
+	padding: 100px;
+}
 
-	.page-search-vue .text-link {
-		color: #444;
-		/*cursor: pointer;*/
-		/*font-weight: bold;*/
-	}
-	.page-search-vue .line-box{color: #666;border-bottom: 1px solid #eee;padding: 20px 0;}
-	.page-search-vue .line-title{font-size: 14px;}
-	.page-search-vue .page-preview-box{}
-	.page-search-vue .page-preview-title{font-size: 18px;margin: 10px 0 5px 0;color: #3a8ee6;cursor: pointer;}
-	.page-search-vue .page-preview-content{font-size: 16px;margin-bottom: 5px;}
-	.page-search-vue .zan-img{vertical-align: middle;margin-top: -3px;}
-	.page-search-vue .view-img{font-size: 16px;color: #666;}
+.page-search-vue .text-link {
+	color: #444;
+}
 
-	.page-search-vue .page-info-box{text-align: right;margin: 20px 0 50px 0;}
+.page-search-vue .line-box {
+	color: #666;
+	border-bottom: 1px solid #eee;
+	padding: 20px 0;
+}
+
+.page-search-vue .line-title {
+	font-size: 14px;
+}
+
+.page-search-vue .page-preview-box {
+}
+
+.page-search-vue .page-preview-title {
+	font-size: 18px;
+	margin: 10px 0 5px 0;
+	color: #3a8ee6;
+	cursor: pointer;
+}
+
+.page-search-vue .page-preview-content {
+	font-size: 16px;
+	margin-bottom: 5px;
+}
+
+.page-search-vue .zan-img {
+	vertical-align: middle;
+	margin-top: -3px;
+}
+
+.page-search-vue .view-img {
+	font-size: 16px;
+	color: #666;
+}
+
+.page-search-vue .page-info-box {
+	text-align: right;
+	margin: 20px 0 50px 0;
+}
 </style>
-

zyplayer-doc-ui/wiki-ui/src/views/page/components/Navigation.vue

@@ -1,102 +1,113 @@
 <template>
 	<div class="navigation">
-		<div ref="navigation" style="display: inline-block;width: 100%;"></div>
-		<div class="navigation-heading" :style="{width: navigationWidth}">
-			<div v-for="item in heading" :class="'heading-item heading-'+item.level" @click="headingItemClick(item)">
-				{{item.text}}
+		<div ref="navigationRef" style="display: inline-block; width: 100%"></div>
+		<div class="navigation-heading" :style="{ width: navigationWidth }">
+			<div v-for="item in heading" :class="'heading-item heading-' + item.level" @click="headingItemClick(item)">
+				{{ item.text }}
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-	export default {
-		props: {
-			heading: {
-				type: Array,
-				default: []
-			},
-		},
-		data() {
-			return {
-				navigationWidth: '100px',
-			};
-		},
-		watch: {
-			'$store.state.global.rightAsideWidth'() {
-				this.computeNavigationWidth();
-			}
-		},
-		mounted() {
-			window.onresize = () => {
-				this.computeNavigationWidth();
-			}
-			setTimeout(() => this.computeNavigationWidth(), 100);
-		},
-		methods: {
-			computeNavigationWidth() {
-				this.navigationWidth = window.getComputedStyle(this.$refs.navigation, null).width;
-			},
-			headingItemClick(item) {
-				// 滚动到指定节点
-				item.node.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
-				// 距离顶部高度
-				//console.log(item.node.offsetTop - item.node.scrollHeight)
-			},
-		}
+<script setup>
+import {
+	toRefs,
+	ref,
+	reactive,
+	onMounted,
+	watch,
+	defineEmits,
+	defineProps,
+	defineExpose,
+} from 'vue'
+import {useStoreDisplay} from '@/store/wikiDisplay.js'
+
+const storeDisplay = useStoreDisplay()
+let navigationWidth = ref('100px')
+const props = defineProps({
+	heading: {
+		type: Array,
+		default: [],
+	},
+})
+onMounted(() => {
+	window.onresize = () => {
+		computeNavigationWidth()
 	}
+	setTimeout(() => computeNavigationWidth(), 100)
+})
+watch(() => storeDisplay.viewMenuWidth, (newVal) => {
+	computeNavigationWidth()
+})
+let navigationRef = ref();
+const computeNavigationWidth = () => {
+	navigationWidth.value = window.getComputedStyle(
+		navigationRef.value,
+		null
+	).width
+}
+const headingItemClick = (item) => {
+	// 滚动到指定节点
+	item.node.scrollIntoView({
+		behavior: 'smooth',
+		block: 'start',
+		inline: 'nearest',
+	})
+	// 距离顶部高度
+	//console.log(item.node.offsetTop - item.node.scrollHeight)
+}
 </script>
+
 <style>
-	.navigation {
-		width: 100%;
-	}
+.navigation {
+	width: 100%;
+}
 
-	.navigation-heading {
-		position: fixed;
-		z-index: 4;
-		top: 150px;
-		max-height: calc(100vh - 250px);
-		width: 100%;
-		overflow-y: auto;
-		padding-left: 16px;
-		box-sizing: border-box;
-	}
+.navigation-heading {
+	position: fixed;
+	z-index: 4;
+	top: 150px;
+	max-height: calc(100vh - 250px);
+	width: 100%;
+	overflow-y: auto;
+	padding-left: 16px;
+	box-sizing: border-box;
+}
 
-	.navigation-heading .heading-item {
-		padding: 5px 0;
-		cursor: pointer;
-		color: #646a73;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
+.navigation-heading .heading-item {
+	padding: 5px 0;
+	cursor: pointer;
+	color: #646a73;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 
-	.navigation-heading .heading-item:hover {
-		color: #3370ff;
-	}
+.navigation-heading .heading-item:hover {
+	color: #3370ff;
+}
 
-	.navigation-heading .heading-1 {
-		padding-left: 0;
-	}
+.navigation-heading .heading-1 {
+	padding-left: 0;
+}
 
-	.navigation-heading .heading-2 {
-		padding-left: 16px;
-	}
+.navigation-heading .heading-2 {
+	padding-left: 16px;
+}
 
-	.navigation-heading .heading-3 {
-		padding-left: 32px;
-	}
+.navigation-heading .heading-3 {
+	padding-left: 32px;
+}
 
-	.navigation-heading .heading-4 {
-		padding-left: 48px;
-	}
+.navigation-heading .heading-4 {
+	padding-left: 48px;
+}
 
-	.navigation-heading .heading-5 {
-		padding-left: 64px;
-	}
+.navigation-heading .heading-5 {
+	padding-left: 64px;
+}
 
-	.navigation-heading .heading-6 {
-		padding-left: 80px;
-	}
+.navigation-heading .heading-6 {
+	padding-left: 80px;
+}
 </style>
-

zyplayer-doc-ui/wiki-ui/src/views/page/editor/WangEditor.vue

@@ -2,105 +2,105 @@
 	<div class="wang-editor-box">
 		<div class="editor-toolbar-box fix-top">
 			<Toolbar class="editor-toolbar"
-					:editorId="editorId"
-					:defaultConfig="toolbarConfig"
-					:mode="mode"
+			         :defaultConfig="toolbarConfig"
+			         :mode="mode"
+			         :editor="editorRef"
 			/>
 		</div>
 		<div class="wang-editor-content">
 			<div class="editor-container">
 				<div class="title-container">
-					<input v-model="pageTitle" placeholder="请输入标题">
+					<input v-model="pageTitle" placeholder="请输入标题" :maxlength="50">
+				</div>
+				<div @click="pageEditorBodyClick" class="page-editor-body">
+					<Editor :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated"/>
 				</div>
-				<Editor ref="editorTextArea" class="editor-text-area"
-						:editorId="editorId"
-						:defaultConfig="editorConfig"
-						:mode="mode"
-				/>
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-	import '@wangeditor/editor/dist/css/style.css'
-	import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
-	export default {
-		props: ['spaceId'],
-		data() {
-			return {
-				editorId: `w-e-${Math.random().toString().slice(-5)}`,
-				toolbarConfig: {
-					excludeKeys: [
-						"fullScreen", "undo" , "redo"
-					],
-				},
-				editorConfig: {
-					placeholder: '请输入文档内容',
-					scroll: false,
-					MENU_CONF: {
-						uploadImage: {
-							server: process.env.VUE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
-							fieldName: 'files',
-							// 最大支持50M图片上传
-							maxFileSize: 50 * 1024 * 1024,
-							withCredentials: true,
-						}
-					}
-				},
-				mode: 'default', // or 'simple'
-				defaultHtml: '',
-				editor: {},
-				pageTitle: '',
-			};
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import {DomEditor} from '@wangeditor/editor'
+import {onBeforeUnmount, ref, shallowRef, onMounted, watch, defineProps, defineExpose} from 'vue'
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
+import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
+
+const props = defineProps({
+});
+
+let toolbarConfig = {
+	excludeKeys: [
+		"fullScreen", "undo", "redo", "emotion", "|", "lineHeight", "fontFamily"
+	],
+};
+
+let route = useRoute();
+let editorConfig = ref({
+	placeholder: '请输入文档内容',
+	scroll: false,
+	MENU_CONF: {
+		uploadImage: {
+			server: import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
+			fieldName: 'files',
+			// 最大支持50M图片上传
+			maxFileSize: 50 * 1024 * 1024,
+			withCredentials: true,
+			meta: {pageId: route.params.pageId},
 		},
-		components: {
-			Editor, Toolbar,
-		},
-		beforeDestroy() {
-			let editor = getEditor(this.editorId);
-			if (editor == null) return;
-			editor.destroy();
-			removeEditor(this.editorId);
-		},
-		mounted: function () {
-			setTimeout(() => {
-				this.initEditor();
-			}, 0);
-		},
-		methods: {
-			initEditor() {
-				// 点击空白处 focus 编辑器
-				let editorTextArea = this.$refs.editorTextArea.$el;
-				editorTextArea.addEventListener('click', e => {
-					if (e.target.className === 'editor-text-area') {
-						let editor = getEditor(this.editorId);
-						editor.blur();
-						editor.focus(true); // focus 到末尾
-					}
-				});
-			},
-			getPageData() {
-				let editor = getEditor(this.editorId);
-				return {
-					title: this.pageTitle,
-					html: editor.getHtml(),
-					text: editor.getText(),
-				};
-			},
-			setTitle(title) {
-				this.pageTitle = title;
-			},
-			setHtml(content) {
-				let editor = getEditor(this.editorId);
-				editor.select([]);
-				editor.deleteFragment();
-				editor.dangerouslyInsertHtml(content);
-			},
+		uploadVideo: {
+			server: import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
+			fieldName: 'files',
+			// 最大支持300M图片上传
+			maxFileSize: 300 * 1024 * 1024,
+			withCredentials: true,
+			meta: {pageId: route.params.pageId},
 		}
 	}
+});
+let mode = 'default';
+let defaultHtml = '';
+const editorRef = shallowRef()
+let pageTitle = ref('');
 
+const handleCreated = (editor) => {
+	editorRef.value = editor;
+}
+
+const pageEditorBodyClick = (e) => {
+	if (e.target.classList && e.target.classList.contains('page-editor-body')) {
+		editorRef.value.blur();
+		editorRef.value.focus(true);
+	}
+}
+
+const getPageData = () => {
+	return {
+		title: pageTitle.value,
+		html: editorRef.value.getHtml(),
+		text: editorRef.value.getText(),
+	};
+}
+const setTitle = (title) => {
+	pageTitle.value = title;
+}
+
+const setHtml = (content) => {
+	editorRef.value.select([]);
+	editorRef.value.deleteFragment();
+	editorRef.value.dangerouslyInsertHtml(content);
+}
+
+onBeforeUnmount(() => {
+	const editor = editorRef.value;
+	if (editor == null) return;
+	editor.destroy();
+});
+
+defineExpose({setTitle, setHtml, getPageData});
 </script>
+
 <style>
 .wang-editor-box {
 	background-color: #f5f5f5;
@@ -110,8 +110,12 @@
 	padding-left: 30px;
 }
 
+.wang-editor-box .editor-toolbar .w-e-bar {
+	background: #FCFCFC;
+}
+
 .wang-editor-box .editor-toolbar {
-	width: 1200px;
+	width: 980px;
 	background-color: #FCFCFC;
 	margin: 0 auto;
 }
@@ -130,7 +134,10 @@
 .wang-editor-box .wang-editor-content {
 	padding: 20px 0;
 	overflow: auto;
-	height: calc(100vh - 170px);
+	height: calc(100vh - 136px);
+}
+.wang-editor-box .w-e-bar-item {
+	height: 39px;
 }
 
 .wang-editor-box .editor-container {
@@ -155,7 +162,7 @@
 	line-height: 1;
 }
 
-.wang-editor-box .editor-text-area {
+.wang-editor-box .page-editor-body {
 	margin-top: 20px;
 	min-height: 600px;
 }

zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue

@@ -1,29 +1,31 @@
 <template>
 	<div class="page-share-view-vue">
 		<van-nav-bar :title="wikiPage.name" class="header">
-			<van-icon name="wap-nav" slot="left" size="20" @click="popupShowChange"></van-icon>
+			<template v-slot:left>
+				<van-icon name="wap-nav" size="20" @click="popupShowChange"></van-icon>
+			</template>
 		</van-nav-bar>
 		<el-row type="border-card" class="main">
-			<div style="max-width: 950px;margin: 0 auto;">
+			<div style="max-width: 950px; margin: 0 auto">
 				<div class="wiki-author">
-					<span v-if="wikiPage.updateTime">最后修改：{{wikiPage.updateTime}}</span>
-					<span v-else>创建时间：{{wikiPage.createTime}}</span>
+					<span v-if="wikiPage.updateTime">最后修改：{{ wikiPage.updateTime }}</span>
+					<span v-else>创建时间：{{ wikiPage.createTime }}</span>
 				</div>
 				<div class="wiki-files">
-					<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
+					<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 v-slot="scope">
+								<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName }}</a>
 							</template>
 						</el-table-column>
 						<el-table-column label="文件大小">
-							<template slot-scope="scope">{{computeFileSize(scope.row.fileSize)}}</template>
+							<template v-slot="scope">{{computeFileSize(scope.row.fileSize) }}</template>
 						</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>
 				</div>
-				<div ref="pageContent" class="wiki-page-content">
+				<div ref="pageContentRef" class="wiki-page-content">
 					<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
 					<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
 				</div>
@@ -32,119 +34,156 @@
 	</div>
 </template>
 
-<script>
-	import pageApi from '../../../../common/api/page'
-	import {mavonEditor} from 'mavon-editor'
-	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-	import { ImagePreview } from 'vant';
-	import 'mavon-editor/dist/markdown/github-markdown.min.css'
-	import 'mavon-editor/dist/css/index.css'
+<script setup>
+import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage} from 'element-plus'
+import pageApi from '../../../../assets/api/page'
+import {mavonEditor} from 'mavon-editor'
+import {ImagePreview} from 'vant'
+import 'mavon-editor/dist/markdown/github-markdown.min.css'
+import 'mavon-editor/dist/css/index.css'
 
-	export default {
-		data() {
-			return {
-				spaceUuid: '',
-				nowPageId: '',
-				// 页面展示相关
-				wikiPage: {},
-				pageFileList: [],
-				pageShowDetail: '',
-				// 大图预览
-				previewInitialIndex: 0,
-				showImagePreviewList: [],
-			};
-		},
-		components: {'el-image-viewer': ElImageViewer},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted() {
-			this.initQueryParam(this.$route);
-		},
-		methods: {
-			popupShowChange() {
-				this.$emit("popupShow", true);
-			},
-			loadPageDetail(pageId) {
-				let param = {pageId: pageId, space: this.spaceUuid};
-				pageApi.openPageDetail(param).then(json => {
-					let wikiPage = json.data.wikiPage || {};
-					wikiPage.selfZan = json.data.selfZan || 0;
-					this.wikiPage = wikiPage;
-					let pageContent = json.data.pageContent || {};
-					this.pageFileList = json.data.fileList || [];
-					if (this.wikiPage.editorType === 2) {
-						pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
-					}
-					this.pageShowDetail = pageContent.content;
-					document.title = wikiPage.name || 'WIKI-内容展示';
-					setTimeout(() => this.previewPageImage(), 500);
-				});
-			},
-			initQueryParam(to) {
-				this.spaceUuid = to.query.space;
-				this.nowPageId = to.query.pageId;
-				if (!!this.nowPageId) {
-					this.loadPageDetail(this.nowPageId);
-				}
-			},
-			computeFileSize(fileSize) {
-				if (!fileSize) {
-					return '-';
-				}
-				let size = "";
-				if (fileSize < 0.1 * 1024) {
-					size = fileSize.toFixed(2) + "B"
-				} else if (fileSize < 0.1 * 1024 * 1024) {
-					size = (fileSize / 1024).toFixed(2) + "KB"
-				} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
-					size = (fileSize / (1024 * 1024)).toFixed(2) + "MB"
-				} else {
-					size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB"
-				}
-				let sizeStr = size + "";
-				let index = sizeStr.indexOf(".");
-				let dou = sizeStr.substr(index + 1, 2);
-				if (dou == "00") {
-					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
-				}
-				return size;
-			},
-			previewPageImage() {
-				const imgArr = [];
-				const imgSelector = this.$refs.pageContent.querySelectorAll('img');
-				imgSelector.forEach((item, index) => {
-					imgArr.push(item.src);
-					item.onclick = () => {
-						this.previewInitialIndex = index;
-						this.showImagePreviewList = imgArr;
-						ImagePreview({
-							images: imgArr,
-							startPosition: index,
-						});
-					}
-				});
-			},
+let spaceUuid = ref('');
+let nowPageId = ref('');
+// 页面展示相关
+let wikiPage = ref({});
+let pageFileList = ref([]);
+let pageShowDetail = ref('');
+// 大图预览
+let previewInitialIndex = ref(0);
+let showImagePreviewList = ref([]);
+
+let emit = defineEmits(['popupShow']);
+onBeforeRouteUpdate((to) => {
+	initQueryParam(to);
+});
+let route = useRoute();
+let router = useRouter();
+onMounted(() => {
+	initQueryParam(route);
+});
+const popupShowChange = () => {
+	emit('popupShow', true)
+}
+const loadPageDetail = (pageId) => {
+	let param = {pageId: pageId, space: spaceUuid.value}
+	pageApi.openPageDetail(param).then((json) => {
+		let wikiPageRes = json.data.wikiPage || {}
+		wikiPageRes.selfZan = json.data.selfZan || 0
+		wikiPage.value = wikiPageRes
+		let pageContent = json.data.pageContent || {}
+		pageFileList.value = json.data.fileList || []
+		if (wikiPage.value.editorType === 2) {
+			pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content)
 		}
+		pageShowDetail.value = pageContent.content
+		document.title = wikiPageRes.name || 'WIKI-内容展示'
+		setTimeout(() => previewPageImage(), 500)
+	})
+}
+const initQueryParam = (to) => {
+	spaceUuid.value = to.query.space
+	nowPageId.value = to.query.pageId
+	if (!!nowPageId.value) {
+		loadPageDetail(nowPageId.value)
 	}
+}
+const computeFileSize = (fileSize) => {
+	if (!fileSize) {
+		return '-'
+	}
+	let size = ''
+	if (fileSize < 0.1 * 1024) {
+		size = fileSize.toFixed(2) + 'B'
+	} else if (fileSize < 0.1 * 1024 * 1024) {
+		size = (fileSize / 1024).toFixed(2) + 'KB'
+	} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
+		size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB'
+	} else {
+		size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
+	}
+	let sizeStr = size + ''
+	let index = sizeStr.indexOf('.')
+	let dou = sizeStr.substr(index + 1, 2)
+	if (dou == '00') {
+		return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+	}
+	return size
+}
+let pageContentRef = ref();
+const previewPageImage = () => {
+	const imgArr = []
+	const imgSelector = pageContentRef.value.querySelectorAll('img')
+	imgSelector.forEach((item, index) => {
+		imgArr.push(item.src)
+		item.onclick = () => {
+			previewInitialIndex.value = index
+			showImagePreviewList.value = imgArr
+			ImagePreview({
+				images: imgArr,
+				startPosition: index,
+			})
+		}
+	})
+}
 </script>
 
 <style>
-	@import "../../../../common/lib/wangEditor.css";
+@import '../../../../assets/lib/wangEditor.css';
 
-	.page-share-view-vue{}
-	.page-share-view-vue .wiki-title{font-size: 20px;text-align: center;}
-	.page-share-view-vue .wiki-author{font-size: 14px;color: #888;height: 40px;line-height: 40px;}
+.page-share-view-vue {
+}
 
-	.page-share-view-vue .wiki-page-content img{cursor: pointer;max-width: 100%;}
-	.page-share-view-vue .wiki-page-content img:hover{box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);}
+.page-share-view-vue .wiki-title {
+	font-size: 20px;
+	text-align: center;
+}
 
-	.page-share-view-vue .upload-page-file .el-upload-list{display: none;}
-	.page-share-view-vue .is-link{color: #1e88e5;cursor: pointer;}
+.page-share-view-vue .wiki-author {
+	font-size: 14px;
+	color: #888;
+	height: 40px;
+	line-height: 40px;
+}
 
-	.page-share-view-vue .header{width:100%;height:46px;}
-	.page-share-view-vue .main{position:absolute;top:46px;bottom: 0;right:0;left:0;overflow:auto;padding: 10px;}
-	.page-share-view-vue .footer{width:100%;height:26px;position:fixed;bottom:0}
+.page-share-view-vue .wiki-page-content img {
+	cursor: pointer;
+	max-width: 100%;
+}
+
+.page-share-view-vue .wiki-page-content img:hover {
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+}
+
+.page-share-view-vue .upload-page-file .el-upload-list {
+	display: none;
+}
+
+.page-share-view-vue .is-link {
+	color: #1e88e5;
+	cursor: pointer;
+}
+
+.page-share-view-vue .header {
+	width: 100%;
+	height: 46px;
+}
+
+.page-share-view-vue .main {
+	position: absolute;
+	top: 46px;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+	padding: 10px;
+}
+
+.page-share-view-vue .footer {
+	width: 100%;
+	height: 26px;
+	position: fixed;
+	bottom: 0;
+}
 </style>
-

zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/Home.vue

@@ -1,18 +1,19 @@
 <template>
-	<div style="padding: 10px;" class="page-share-home-vue">
-		<div style="max-width: 800px;margin: 0 auto;">
+	<div style="padding: 10px" class="page-share-home-vue">
+		<div style="max-width: 800px; margin: 0 auto">
 			<div v-if="spacePageNews.length <= 0" class="empty-news">暂无数据</div>
 			<div v-else class="line-box" v-for="item in spacePageNews">
 				<div class="line-title">
-					<span class="text-link">{{item.createUserName}}</span> 发布于 <span class="text-link">{{item.spaceName}}</span>
+					<span class="text-link">{{ item.createUserName }}</span> 发布于
+					<span class="text-link">{{ item.spaceName }}</span>
 				</div>
 				<div class="page-preview-box">
 					<div class="page-preview-title" v-on:click="showPageDetail(item)" v-html="item.pageTitle"></div>
 					<div class="page-preview-content" v-html="item.previewContent"></div>
 					<div>
-						<span><img src="../../../../assets/img/zan.png" class="zan-img"> {{item.zanNum}}　</span>
-						<span><i class="el-icon-view view-img"></i> {{item.viewNum}}　</span>
-						<span>{{item.updateTime||item.createTime}}</span>
+						<span><img src="../../../../assets/img/zan.png" class="zan-img"/>{{ item.zanNum }}　</span>
+						<span><el-icon class="view-img"><el-icon-view/></el-icon> {{ item.viewNum }}　</span>
+						<span>{{ item.updateTime || item.createTime }}</span>
 					</div>
 				</div>
 			</div>
@@ -24,83 +25,109 @@
 					:page-size="20"
 					:current-page="searchParam.pageNum"
 					layout="prev, pager, next, jumper, sizes, total"
-					:total="totalCount"
-				>
+					:total="totalCount">
 				</el-pagination>
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-	import pageApi from '../../../../common/api/page'
+<script setup>
+import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage} from 'element-plus'
+import {View as ElIconView} from '@element-plus/icons-vue'
+import pageApi from '../../../../assets/api/page'
 
-	export default {
-		data() {
-			return {
-				totalCount: 0,
-				searchParam: {
-					spaceId: '',
-					newsType: 1,
-					pageNum: 1,
-					pageSize: 20,
-				},
-				spacePageNews: [],
-			};
-		},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted: function () {
-			this.initQueryParam(this.$route);
-		},
-		methods: {
-			getSpacePageNews() {
-				pageApi.openPageNews(this.searchParam).then(json => {
-					this.spacePageNews = json.data || [];
-					this.totalCount = json.total;
-				});
-			},
-			handleSizeChange(val) {
-				this.searchParam.pageSize = val;
-				this.getSpacePageNews();
-			},
-			showPageDetail(row) {
-				this.nowClickPath = {space: row.space, pageId: row.pageId};
-				this.$router.push({path: '/page/share/view', query: this.nowClickPath});
-			},
-			handleCurrentChange(val) {
-				this.searchParam.pageNum = val;
-				this.getSpacePageNews();
-			},
-			initQueryParam(to) {
-				this.searchParam = {
-					space: to.query.space,
-					newsType: 1,
-					pageNum: 1,
-					pageSize: 20,
-				};
-				if (!!this.searchParam.space) {
-					this.getSpacePageNews();
-				}
-			},
-		}
+let totalCount = ref(0);
+let searchParam = ref({spaceId: '', newsType: 1, pageNum: 1, pageSize: 20,});
+let spacePageNews = ref([]);
+onBeforeRouteUpdate((to) => {
+	initQueryParam(to);
+});
+let route = useRoute();
+let router = useRouter();
+onMounted(() => {
+	initQueryParam(route);
+});
+const getSpacePageNews = () => {
+	pageApi.openPageNews(searchParam.value).then((json) => {
+		spacePageNews.value = json.data || []
+		totalCount.value = json.total
+	})
+}
+const handleSizeChange = (val) => {
+	searchParam.value.pageSize = val
+	getSpacePageNews()
+}
+const showPageDetail = (row) => {
+	let nowClickPath = {space: row.space, pageId: row.pageId}
+	router.push({path: '/page/share/view', query: nowClickPath})
+}
+const handleCurrentChange = (val) => {
+	searchParam.value.pageNum = val
+	getSpacePageNews()
+}
+const initQueryParam = (to) => {
+	searchParam.value = {
+		space: to.query.space,
+		newsType: 1,
+		pageNum: 1,
+		pageSize: 20,
 	}
+	if (!!searchParam.value.space) {
+		getSpacePageNews()
+	}
+}
 </script>
+
 <style>
-	.page-share-home-vue .empty-news{text-align: center;padding: 100px;}
-	.page-share-home-vue .text-link {
-		color: #444;
-	}
-	.page-share-home-vue .line-box{color: #666;border-bottom: 1px solid #eee;padding: 20px 0;}
-	.page-share-home-vue .line-title{font-size: 14px;}
-	.page-share-home-vue .page-preview-box{}
-	.page-share-home-vue .page-preview-title{cursor: pointer;font-size: 20px;margin: 10px 0 5px 0;color: #3a8ee6;}
-	.page-share-home-vue .page-preview-content{font-size: 16px;margin-bottom: 5px;}
-	.page-share-home-vue .zan-img{vertical-align: middle;margin-top: -3px;}
-	.page-share-home-vue .view-img{font-size: 16px;color: #666;}
+.page-share-home-vue .empty-news {
+	text-align: center;
+	padding: 100px;
+}
 
-	.page-share-home-vue .page-info-box{text-align: right;margin: 20px 0 50px 0;}
+.page-share-home-vue .text-link {
+	color: #444;
+}
+
+.page-share-home-vue .line-box {
+	color: #666;
+	border-bottom: 1px solid #eee;
+	padding: 20px 0;
+}
+
+.page-share-home-vue .line-title {
+	font-size: 14px;
+}
+
+.page-share-home-vue .page-preview-box {
+}
+
+.page-share-home-vue .page-preview-title {
+	cursor: pointer;
+	font-size: 20px;
+	margin: 10px 0 5px 0;
+	color: #3a8ee6;
+}
+
+.page-share-home-vue .page-preview-content {
+	font-size: 16px;
+	margin-bottom: 5px;
+}
+
+.page-share-home-vue .zan-img {
+	vertical-align: middle;
+	margin-top: -3px;
+}
+
+.page-share-home-vue .view-img {
+	font-size: 16px;
+	color: #666;
+}
+
+.page-share-home-vue .page-info-box {
+	text-align: right;
+	margin: 20px 0 50px 0;
+}
 </style>
-

zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue

@@ -5,28 +5,28 @@
 				<el-col :xs="0" :sm="4" :md="4" :lg="6" :xl="6" v-if="navigationList.length > 0">
 					<Navigation :heading="navigationList"></Navigation>
 				</el-col>
-				<el-col :xs="24" :sm="navigationList.length > 0?20:24" :md="navigationList.length > 0?20:24" :lg="navigationList.length > 0?18:24" :xl="navigationList.length > 0?18:24">
-					<div style="max-width: 1000px;padding-left: 10px;margin: 0 auto;">
-						<div class="wiki-title" ref="wikiTitle">{{wikiPage.name}}</div>
+				<el-col :xs="24" :sm="navigationList.length > 0 ? 20 : 24" :md="navigationList.length > 0 ? 20 : 24" :lg="navigationList.length > 0 ? 18 : 24" :xl="navigationList.length > 0 ? 18 : 24">
+					<div style="max-width: 1000px; padding-left: 10px; margin: 0 auto">
+						<div class="wiki-title" ref="wikiTitleRef">{{ wikiPage.name }}</div>
 						<div class="wiki-author">
-							<span v-if="wikiPage.updateTime">最后修改：{{wikiPage.updateTime}}</span>
-							<span v-else>创建时间：{{wikiPage.createTime}}</span>
+                            <span v-if="wikiPage.updateTime">最后修改：{{ wikiPage.updateTime }}</span>
+							<span v-else>创建时间：{{ wikiPage.createTime }}</span>
 						</div>
 						<div class="wiki-files">
-							<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
+							<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 v-slot="scope">
+										<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName }}</a>
 									</template>
 								</el-table-column>
 								<el-table-column label="文件大小">
-									<template slot-scope="scope">{{computeFileSize(scope.row.fileSize)}}</template>
+									<template v-slot="scope">{{computeFileSize(scope.row.fileSize) }}</template>
 								</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>
 						</div>
-						<div ref="pageContent" class="wiki-page-content">
+						<div ref="pageContentRef" class="wiki-page-content">
 							<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
 							<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
 						</div>
@@ -34,142 +34,169 @@
 				</el-col>
 			</el-row>
 		</el-row>
-		<div ref="imagePreview">
-			<el-image-viewer v-if="showImagePreview" :url-list="showImagePreviewList" :on-close="closeImagePreview" :initial-index="previewInitialIndex"></el-image-viewer>
+		<div ref="imagePreviewRef">
+			<el-image-viewer v-if="showImagePreview"
+			                 :url-list="showImagePreviewList"
+			                 :on-close="closeImagePreview"
+			                 :initial-index="previewInitialIndex">
+			</el-image-viewer>
 		</div>
 	</div>
 </template>
 
-<script>
-	import pageApi from '../../../../common/api/page'
-	import {mavonEditor} from 'mavon-editor'
-	import unitUtil from '../../../../common/lib/UnitUtil.js'
-	import htmlUtil from '../../../../common/lib/HtmlUtil.js'
-	import Navigation from '../../components/Navigation.vue'
-	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-	import 'mavon-editor/dist/markdown/github-markdown.min.css'
-	import 'mavon-editor/dist/css/index.css'
+<script setup>
+import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage} from 'element-plus'
+import pageApi from '../../../../assets/api/page'
+import {mavonEditor} from 'mavon-editor'
+import unitUtil from '../../../../assets/lib/UnitUtil.js'
+import htmlUtil from '../../../../assets/lib/HtmlUtil.js'
+import Navigation from '../../components/Navigation.vue'
+import 'mavon-editor/dist/markdown/github-markdown.min.css'
+import 'mavon-editor/dist/css/index.css'
 
-	export default {
-		data() {
-			return {
-				spaceUuid: '',
-				nowPageId: '',
-				// 页面展示相关
-				wikiPage: {},
-				pageFileList: [],
-				pageShowDetail: '',
-				// 大图预览
-				previewInitialIndex: 0,
-				showImagePreview: false,
-				showImagePreviewList: [],
-				navigationList: [],
-			};
-		},
-		components: {'el-image-viewer': ElImageViewer, Navigation},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted() {
-			this.initQueryParam(this.$route);
-		},
-		methods: {
-			loadPageDetail(pageId) {
-				let param = {pageId: pageId, space: this.spaceUuid};
-				pageApi.openPageDetail(param).then(json => {
-					let wikiPage = json.data.wikiPage || {};
-					wikiPage.selfZan = json.data.selfZan || 0;
-					this.wikiPage = wikiPage;
-					let pageContent = json.data.pageContent || {};
-					this.pageFileList = json.data.fileList || [];
-					if (this.wikiPage.editorType === 2) {
-						pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
-					}
-					this.pageShowDetail = pageContent.content;
-					let wikiTile = wikiPage.name || 'WIKI-内容展示';
-					document.title = wikiTile;
-					setTimeout(() => {
-						this.previewPageImage();
-						let navigationList = htmlUtil.createNavigationHeading();
-						// 标题加到导航里面去
-						if (navigationList.length > 0) {
-							navigationList.unshift({
-								level: 1,
-								node: this.$refs.wikiTitle,
-								text: wikiTile
-							});
-						}
-						this.navigationList = navigationList;
-					}, 500);
-				});
-			},
-			initQueryParam(to) {
-				this.spaceUuid = to.query.space;
-				this.nowPageId = to.query.pageId;
-				if (!!this.nowPageId) {
-					this.loadPageDetail(this.nowPageId);
-				}
-			},
-			computeFileSize(fileSize) {
-				if (!fileSize) {
-					return '-';
-				}
-				let size = "";
-				if (fileSize < 0.1 * 1024) {
-					size = fileSize.toFixed(2) + "B"
-				} else if (fileSize < 0.1 * 1024 * 1024) {
-					size = (fileSize / 1024).toFixed(2) + "KB"
-				} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
-					size = (fileSize / (1024 * 1024)).toFixed(2) + "MB"
-				} else {
-					size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB"
-				}
-				let sizeStr = size + "";
-				let index = sizeStr.indexOf(".");
-				let dou = sizeStr.substr(index + 1, 2);
-				if (dou == "00") {
-					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
-				}
-				return size;
-			},
-			closeImagePreview() {
-				this.showImagePreview = false;
-			},
-			previewPageImage() {
-				const imgArr = [];
-				const imgSelector = this.$refs.pageContent.querySelectorAll('img');
-				imgSelector.forEach((item, index) => {
-					imgArr.push(item.src);
-					item.onclick = () => {
-						this.previewInitialIndex = index;
-						this.showImagePreviewList = imgArr;
-						this.showImagePreview = true;
-						setTimeout(() => this.initImageViewerMask(), 0);
-					}
-				});
-			},
-			initImageViewerMask() {
-				// 图片预览遮罩点击隐藏预览框
-				let imageViewerMask = this.$refs.imagePreview.querySelectorAll('.el-image-viewer__mask');
-				imageViewerMask.forEach(item => {
-					item.onclick = () => this.showImagePreview = false;
-				});
-			},
+let spaceUuid = ref('');
+let nowPageId = ref('');
+// 页面展示相关
+let wikiPage = ref({});
+let pageFileList = ref([]);
+let pageShowDetail = ref('');
+// 大图预览
+let previewInitialIndex = ref(0);
+let showImagePreview = ref(false);
+let showImagePreviewList = ref([]);
+let navigationList = ref([]);
+
+onBeforeRouteUpdate((to) => {
+	initQueryParam(to);
+});
+let route = useRoute();
+let router = useRouter();
+onMounted(() => {
+	initQueryParam(route);
+});
+let wikiTitleRef = ref();
+const loadPageDetail = (pageId) => {
+	let param = {pageId: pageId, space: spaceUuid.value}
+	pageApi.openPageDetail(param).then((json) => {
+		let wikiPage = json.data.wikiPage || {}
+		wikiPage.selfZan = json.data.selfZan || 0
+		wikiPage.value = wikiPage
+		let pageContent = json.data.pageContent || {}
+		pageFileList.value = json.data.fileList || []
+		if (wikiPage.value.editorType === 2) {
+			pageContent.content = mavonEditor
+				.getMarkdownIt()
+				.render(pageContent.content)
 		}
+		pageShowDetail.value = pageContent.content
+		let wikiTile = wikiPage.name || 'WIKI-内容展示'
+		document.title = wikiTile
+		setTimeout(() => {
+			previewPageImage()
+			let navigationList = htmlUtil.createNavigationHeading()
+			// 标题加到导航里面去
+			if (navigationList.length > 0) {
+				navigationList.unshift({
+					level: 1,
+					node: wikiTitleRef.value,
+					text: wikiTile,
+				})
+			}
+			navigationList.value = navigationList
+		}, 500)
+	})
+}
+const initQueryParam = (to) => {
+	spaceUuid.value = to.query.space
+	nowPageId.value = to.query.pageId
+	if (!!nowPageId.value) {
+		loadPageDetail(nowPageId.value)
 	}
+}
+const computeFileSize = (fileSize) => {
+	if (!fileSize) {
+		return '-'
+	}
+	let size = ''
+	if (fileSize < 0.1 * 1024) {
+		size = fileSize.toFixed(2) + 'B'
+	} else if (fileSize < 0.1 * 1024 * 1024) {
+		size = (fileSize / 1024).toFixed(2) + 'KB'
+	} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
+		size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB'
+	} else {
+		size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
+	}
+	let sizeStr = size + ''
+	let index = sizeStr.indexOf('.')
+	let dou = sizeStr.substr(index + 1, 2)
+	if (dou == '00') {
+		return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+	}
+	return size
+}
+const closeImagePreview = () => {
+	showImagePreview.value = false
+}
+let pageContentRef = ref();
+const previewPageImage = () => {
+	const imgArr = []
+	const imgSelector = pageContentRef.value.querySelectorAll('img')
+	imgSelector.forEach((item, index) => {
+		imgArr.push(item.src)
+		item.onclick = () => {
+			previewInitialIndex.value = index
+			showImagePreviewList.value = imgArr
+			showImagePreview.value = true
+			setTimeout(() => initImageViewerMask.value(), 0)
+		}
+	})
+}
+let imagePreviewRef = ref();
+const initImageViewerMask = () => {
+	// 图片预览遮罩点击隐藏预览框
+	let imageViewerMask = imagePreviewRef.value.querySelectorAll(
+		'.el-image-viewer__mask'
+	)
+	imageViewerMask.forEach((item) => {
+		item.onclick = () => (showImagePreview.value = false)
+	})
+}
 </script>
 
 <style>
-	@import "../../../../common/lib/wangEditor.css";
+@import '../../../../assets/lib/wangEditor.css';
 
-	.page-share-view-vue .wiki-title{font-size: 20px;text-align: center;}
-	.page-share-view-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
+.page-share-view-vue .wiki-title {
+	font-size: 20px;
+	text-align: center;
+}
 
-	.page-share-view-vue .wiki-page-content img{cursor: pointer;max-width: 100%;}
-	.page-share-view-vue .wiki-page-content img:hover{box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);}
+.page-share-view-vue .wiki-author {
+	font-size: 14px;
+	color: #888;
+	padding: 20px 0;
+	height: 40px;
+	line-height: 40px;
+}
 
-	.page-share-view-vue .upload-page-file .el-upload-list{display: none;}
-	.page-share-view-vue .is-link{color: #1e88e5;cursor: pointer;}
+.page-share-view-vue .wiki-page-content img {
+	cursor: pointer;
+	max-width: 100%;
+}
+
+.page-share-view-vue .wiki-page-content img:hover {
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+}
+
+.page-share-view-vue .upload-page-file .el-upload-list {
+	display: none;
+}
+
+.page-share-view-vue .is-link {
+	color: #1e88e5;
+	cursor: pointer;
+}
 </style>
-

zyplayer-doc-ui/wiki-ui/src/views/page/show/Comment.vue

@@ -0,0 +1,202 @@
+<template>
+	<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"></textarea>
+		<el-button style="float: right; margin: 2px 5px" type="primary" size="small" v-on:click="submitPageComment">发送</el-button>
+	</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) => {
+	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.value(subItem.createUserId)
+			}
+			commentListRes[i].commentList = subCommentList
+			commentListRes[i].visible = false
+		}
+		commentList.value = commentListRes
+		scrollActionTabComment()
+	})
+}
+const recommentUser = (id, index) => {
+	recommentInfo.value = {
+		id: id,
+		index: index,
+		placeholder: '回复' + (index + 1) + '楼',
+	}
+}
+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 - 100px);
+  overflow: auto;
+
+  .comment-list {
+	padding-bottom: 130px;
+  }
+
+  .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 {
+  position: absolute;
+  bottom: 0;
+  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;
+  }
+}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+	<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 ? 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 {
+	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 route = useRoute();
+let router = useRouter();
+let storePage = useStorePageData();
+let storeUser = useStoreUserData();
+
+let pageHistoryDetail = ref('');
+let pageHistoryChoice = ref({});
+let pageHistoryList = ref([]);
+let pageHistoryPageNum = ref(1);
+
+watch(() => storePage.pageInfo, (newVal) => {
+})
+onMounted(() => {
+});
+</script>
+
+<style lang="scss">
+</style>