From e9f1c3b5cf1906a3d57502174d9015e283a44ffe Mon Sep 17 00:00:00 2001
From: sswiki <admin@zyplayer.com>
Date: Tue, 10 Dec 2024 23:24:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/sql/full/full.sql      |   2 +-
 zyplayer-doc-ui/wiki-ui/src/routes.js         |   4 +-
 .../wiki-ui/src/views/page/Edit.vue           |   8 +-
 .../src/views/page/share/mobile/View.vue      |   4 +-
 .../wiki-ui/src/views/page/share/pc/View.vue  |   4 +-
 .../wiki-ui/src/views/space/Manage.vue        |   2 +-
 .../wiki-ui/src/views/view/Edit.vue           | 334 ++++++++++++++++++
 .../wiki-ui/src/views/view/PageLayout.vue     |   1 -
 .../wiki-ui/src/views/view/View.vue           |  68 +---
 .../wiki-ui/src/views/view/aside/AddMenu.vue  |   3 +-
 .../src/views/view/aside/RightHeader.vue      |   9 +-
 .../src/views/view/editor/WangEditor.vue      | 161 +++++++++
 .../wiki-ui/src/views/view/show/Comment.vue   |  12 +
 .../wiki-ui/src/views/view/show/Files.vue     |   8 +-
 .../views/view/show/MobileQrScanDialog.vue    |  12 +
 .../src/views/view/show/PageHistory.vue       |  31 ++
 .../wiki/service/WikiPageUploadService.java   |   8 -
 17 files changed, 573 insertions(+), 98 deletions(-)
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/Edit.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/editor/WangEditor.vue

diff --git a/zyplayer-doc-manage/src/main/resources/sql/full/full.sql b/zyplayer-doc-manage/src/main/resources/sql/full/full.sql
index 4a4c78fe..d731c6a9 100644
--- a/zyplayer-doc-manage/src/main/resources/sql/full/full.sql
+++ b/zyplayer-doc-manage/src/main/resources/sql/full/full.sql
@@ -127,7 +127,7 @@ CREATE TABLE `wiki_page_content`  (
   `update_user_id` bigint(20) NULL DEFAULT NULL COMMENT '修改人ID',
   `update_user_name` varchar(20) NULL DEFAULT NULL COMMENT '修改人名字',
   `update_time` datetime NULL DEFAULT NULL COMMENT '修改时间',
-  `preview` varchar(16000) NULL DEFAULT NULL COMMENT '预览内容',
+  `preview` text NULL DEFAULT NULL COMMENT '预览内容',
   PRIMARY KEY (`id`) USING BTREE,
   UNIQUE INDEX `uk_page_id`(`page_id`) USING BTREE COMMENT '页面ID'
 ) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE utf8mb4_unicode_ci;
diff --git a/zyplayer-doc-ui/wiki-ui/src/routes.js b/zyplayer-doc-ui/wiki-ui/src/routes.js
index 80ea1196..db3a0f2b 100644
--- a/zyplayer-doc-ui/wiki-ui/src/routes.js
+++ b/zyplayer-doc-ui/wiki-ui/src/routes.js
@@ -8,7 +8,7 @@ import NoAuth from './views/common/NoAuth.vue';
 // import Home from './views/home/Home.vue';
 // import MyInfo from './views/user/MyInfo.vue';
 import Show from './views/view/View.vue';
-// import Edit from './views/page/Edit.vue';
+import Edit from './views/view/Edit.vue';
 
 // import spaceManage from './views/space/Manage.vue';
 
@@ -28,7 +28,7 @@ let routes = [
 			{path: '/home', name: 'WIKI文档管理', component: NoAuth},
 			{path: '/user/myInfo', name: 'WIKI-我的信息', component: NoAuth},
 			{path: '/view/:spaceId?/:pageId?', name: 'WIKI-页面查看', component: Show},
-			{path: '/page/edit', name: 'WIKI-编辑内容', component: NoAuth},
+			{path: '/edit/:spaceId/:pageId', name: 'WIKI-编辑内容', component: Edit},
 			{path: '/space/manage', name: 'WIKI-空间管理', component: NoAuth},
 		],
 	},
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/page/Edit.vue b/zyplayer-doc-ui/wiki-ui/src/views/page/Edit.vue
index f7adea2d..a3491802 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/Edit.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/Edit.vue
@@ -214,8 +214,8 @@ const doGetPageList = () => {
 }
 const loadPageDetail = (pageId) => {
 	pageApi.pageDetail({id: pageId}).then((json) => {
-		wikiPage.value = json.data.wikiPage || {}
-		pageContent.value = json.data.pageContent || {}
+		wikiPage.value = json.data.wikiPage || {};
+		pageContent.value = json.data.pageContent || {};
 		pageFileList.value = json.data.fileList || [];
 		// 内容
 		wikiPageEdit.value.pageTitle = wikiPage.value.name;
@@ -234,7 +234,7 @@ const loadPageDetail = (pageId) => {
 const loadParentPageDetail = (pageId) => {
 	if (!pageId) return;
 	pageApi.pageDetail({id: pageId}).then((json) => {
-		parentWikiPage.value = json.data.wikiPage || {}
+		parentWikiPage.value = json.data.wikiPage || {};
 	});
 }
 const cleanPage = () => {
@@ -284,7 +284,7 @@ const addMarkdownImage = (pos, file) => {
 		timeout: 10000,
 		withCredentials: true,
 	}).then((res) => {
-		let urlObj = res.data.data || {}
+		let urlObj = res.data.data || {};
 		if (urlObj.url) {
 			mavonEditorRef.value.$img2Url(pos, urlObj.url);
 		} else {
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue b/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue
index 4af5c9e9..c66f5166 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/View.vue
@@ -69,10 +69,10 @@ const popupShowChange = () => {
 const loadPageDetail = (pageId) => {
 	let param = {pageId: pageId, space: spaceUuid.value}
 	pageApi.openPageDetail(param).then((json) => {
-		let wikiPageRes = json.data.wikiPage || {}
+		let wikiPageRes = json.data.wikiPage || {};
 		wikiPageRes.selfZan = json.data.selfZan || 0
 		wikiPage.value = wikiPageRes;
-		let pageContent = json.data.pageContent || {}
+		let pageContent = json.data.pageContent || {};
 		pageFileList.value = json.data.fileList || [];
 		if (wikiPage.value.editorType === 2) {
 			pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue b/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
index 6e5c643b..3e534ec3 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
@@ -78,10 +78,10 @@ let wikiTitleRef = ref();
 const loadPageDetail = (pageId) => {
 	let param = {pageId: pageId, space: spaceUuid.value}
 	pageApi.openPageDetail(param).then((json) => {
-		let wikiPageRes = json.data.wikiPage || {}
+		let wikiPageRes = json.data.wikiPage || {};
 		wikiPageRes.selfZan = json.data.selfZan || 0
 		wikiPage.value = wikiPageRes;
-		let pageContent = json.data.pageContent || {}
+		let pageContent = json.data.pageContent || {};
 		pageFileList.value = json.data.fileList || [];
 		if (wikiPage.value.editorType === 2) {
 			pageContent.content = mavonEditor.getMarkdownIt().render(pageContent.content);
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/space/Manage.vue b/zyplayer-doc-ui/wiki-ui/src/views/space/Manage.vue
index 6352bcf1..c09aae3e 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/space/Manage.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/space/Manage.vue
@@ -260,7 +260,7 @@ const wikiOnlyShowFavoriteChange = () => {
 }
 const getSpaceSettingList = () => {
 	pageApi.spaceSettingList().then((json) => {
-		let result = json.data || {}
+		let result = json.data || {};
 		userSetting.value = {
 			wiki_only_show_favorite: result.wiki_only_show_favorite || 0,
 		}
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/Edit.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/Edit.vue
new file mode 100644
index 00000000..ef656c11
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/Edit.vue
@@ -0,0 +1,334 @@
+<template>
+	<div style="height: 100%" class="page-edit-vue">
+		<el-row class="fake-header">
+			<el-col style="flex: 0 0 45px;" class="collapse-box">
+				<el-button @click="turnLeftCollapse" v-if="storeDisplay.showMenu" text :icon="ElIconFold" class="fold-btn"></el-button>
+				<el-button @click="turnLeftCollapse" v-else text :icon="ElIconExpand" class="fold-btn"></el-button>
+			</el-col>
+			<el-col style="flex: 1 1 auto;">
+				<el-input v-model="pageTitleEdit" :maxlength="40" placeholder="请输入标题" class="page-title-input" ></el-input>
+			</el-col>
+			<el-col style="flex: 0 0 180px;text-align: right;">
+				<el-button type="primary" @click="createWikiSave(1)" :icon="ElIconDocumentChecked">保存</el-button>
+				<el-button @click="createWikiCancel" :icon="ElIconBack" style="margin-right: 5px;">取消</el-button>
+			</el-col>
+		</el-row>
+		<div style="box-sizing: border-box;background: #f5f5f5;overflow: hidden">
+			<div v-if="wikiPage.editorType === 1">
+				<WangEditor ref="wangEditorRef" :pageId="pageId"></WangEditor>
+			</div>
+			<div v-else-if="wikiPage.editorType === 2" style="padding: 10px; background: #fff;">
+				<mavonEditor ref="mavonEditorRef" v-model="markdownContent" :toolbars="toolbars" :externalLink="false"
+				             @save="createWikiSave(0)" @imgAdd="addMarkdownImage" placeholder="请录入文档内容"
+				             class="page-content-editor wang-editor-body" style="height: calc(100vh - 100px);z-index: 1;"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<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,
+	Fold as ElIconFold,
+	Expand as ElIconExpand,
+	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';
+import {useStoreSpaceData} from "@/store/spaceData";
+import {useStorePageData} from "@/store/pageData";
+import {useStoreDisplay} from "@/store/wikiDisplay";
+
+// 编辑相关
+let pageTitleEdit = ref('');
+let wikiPage = ref({});
+let isUnlock = ref(false);
+// 页面ID，有值代表编辑
+let spaceId = '';
+let pageId = 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, // 预览
+};
+let storeSpace = useStoreSpaceData();
+let storePage = useStorePageData();
+let storeDisplay = useStoreDisplay();
+let route = useRoute();
+let router = useRouter();
+onMounted(() => {
+	initQueryParam(route);
+	storeDisplay.showHeader = false;
+	window.onunload = () => unlockPage();
+	window.onbeforeunload = () => unlockPage();
+});
+onBeforeRouteUpdate((to) => {
+	initQueryParam(to);
+});
+onUnmounted(() => {
+	unlockPage();
+});
+const turnLeftCollapse = () => {
+	storeDisplay.showMenu = !storeDisplay.showMenu;
+}
+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 (wikiPage.value.editorType === 1) {
+		content = wangEditorRef.value.getContent();
+		preview = wangEditorRef.value.getPreview();
+	} else if (wikiPage.value.editorType === 2) {
+		content = markdownContent.value;
+		const showContentSelector = mavonEditorRef.value.querySelectorAll('.v-show-content');
+		if (showContentSelector && showContentSelector.length > 0) {
+			preview = showContentSelector[0].textContent;
+		}
+	}
+	if (!pageTitleEdit.value) {
+		ElMessage.warning('标题不能为空');
+		return;
+	}
+	let param = {id: pageId.value, name: pageTitleEdit.value, content: content, preview: preview};
+	pageApi.updatePage(param).then((json) => {
+		ElMessage.success('保存成功！');
+		storePage.eventPageListUpdate = !storePage.eventPageListUpdate;
+		if (saveAfter === 1) {
+			router.push({path: `/view/${spaceId}/${pageId.value}`});
+		}
+	});
+}
+const loadPageDetail = () => {
+	pageApi.pageDetail({id: pageId.value}).then(async (json) => {
+		wikiPage.value = json.data.wikiPage || {};
+		pageTitleEdit.value = wikiPage.value.name;
+		let pageContent = json.data.pageContent || {};
+		let pageContentVal = pageContent.content || '';
+		await nextTick();
+		if (wikiPage.value.editorType === 1) {
+			wangEditorRef.value.setContent(pageContentVal);
+		} else if (wikiPage.value.editorType === 2) {
+			markdownContent.value = pageContentVal;
+		}
+	});
+}
+const initQueryParam = (to) => {
+	spaceId = parseInt(to.params.spaceId);
+	pageId.value = parseInt(to.params.pageId);
+	if (!spaceId || !pageId.value) {
+		return;
+	}
+	loadPageDetail();
+	pageApi.pageLock({pageId: pageId.value}).catch((json) => {
+		ElMessageBox.alert(json.errMsg || '未知错误', '错误', {
+			confirmButtonText: '确定',
+			callback: () => {
+				router.back();
+			},
+		});
+	});
+}
+let mavonEditorRef = ref();
+const addMarkdownImage = (pos, file) => {
+	let formData = new FormData();
+	formData.append('files', file);
+	formData.append('pageId', pageId.value);
+	axios({
+		url: fileUploadUrl.value, method: 'post', data: formData, timeout: 10000,
+		headers: {'Content-Type': 'multipart/form-data'}, 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);
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.page-edit-vue {
+	.parent-name {
+		margin-right: 20px;
+		max-width: 300px;
+		display: inline-block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		vertical-align: middle;
+	}
+}
+</style>
+
+<style lang="scss">
+.fake-header {
+	color: #333;
+	height: 60px !important;
+	line-height: 60px !important;
+
+	.fold-btn {
+		font-size: 18px;
+		padding: 4px 10px;
+		margin-left: 6px;
+		color: #888 !important;
+	}
+
+	.page-title-input {
+		padding: 0 6px;
+		width: 100%;
+		font-size: 20px;
+		border-bottom: 1px solid #ddd;
+
+		.el-input__wrapper {
+			border: 0;
+			box-shadow: unset;
+		}
+	}
+
+	.title-info-view-right {
+		text-align: right;
+		margin-top: 10px;
+		font-size: 14px;
+		color: #454343;
+
+		.split {
+			padding: 0 4px;
+		}
+	}
+}
+
+.page-edit-vue {
+	.page-content-editor {
+		ol {
+			list-style: decimal;
+		}
+
+		ul {
+			list-style: disc;
+		}
+	}
+}
+</style>
+
+<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 .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 .markdown-body table {
+	display: table;
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue
index 191371e8..b9c75b2c 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue
@@ -33,7 +33,6 @@ onMounted(() => {
 });
 const rightAsideWidthChange = (width) => {
 	storeDisplay.rightAsideWidth = width;
-	storeDisplay.commentShow = width;
 }
 let leftAsideStyle = computed(() => {
 	return {width: storeDisplay.rightAsideWidth + 'px'};
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue
index c508b045..8e25464f 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue
@@ -66,6 +66,7 @@ const props = defineProps({
 let emit = defineEmits(['switchSpace', 'changeExpandedKeys', 'loadPageList']);
 onMounted(() => {
 	storeDisplay.currentPage = 'view';
+	storeDisplay.showHeader = true;
 	initQueryParam(route);
 });
 onBeforeRouteUpdate((to) => {
@@ -264,63 +265,6 @@ const initQueryParam = (to) => {
 	height: 600px !important;
 }
 
-.page-show-vue .head {
-	float: left;
-	background-color: #ccc;
-	border-radius: 50%;
-	margin-right: 10px;
-	width: 45px;
-	height: 45px;
-	line-height: 45px;
-	text-align: center;
-	color: #fff;
-}
-
-.page-show-vue .el-tabs__header {
-	margin: 0;
-}
-
-.page-show-vue .el-tabs__nav-wrap {
-	padding: 0 20px;
-}
-
-.page-show-vue .close-action-tab {
-	position: absolute;
-	right: 15px;
-	top: 12px;
-	cursor: pointer;
-	z-index: 1;
-}
-
-.page-show-vue .action-tab-box {
-	height: calc(100vh - 120px);
-	overflow: auto;
-	padding: 20px 10px;
-}
-
-.page-show-vue .action-box-empty {
-	text-align: center;
-	padding-top: 30px;
-	color: #888;
-	font-size: 14px;
-}
-
-.page-show-vue .history-item {
-	height: 55px;
-	line-height: 25px;
-	cursor: pointer;
-	vertical-align: middle;
-}
-
-.page-show-vue .history-loading-status {
-	margin-left: 5px;
-	color: #67c23a;
-}
-
-.page-show-vue .history-loading-status.el-icon-circle-close {
-	color: #f56c6c;
-}
-
 .page-show-vue .el-timeline {
 	padding-inline-start: 0;
 }
@@ -328,14 +272,4 @@ const initQueryParam = (to) => {
 .page-show-vue .markdown-body table {
 	display: table;
 }
-
-.mobile-qr {
-	width: 250px;
-	height: 250px;
-	border: 1px solid #ccc;
-	display: inline-block;
-	border-radius: 4px;
-	margin-bottom: 10px;
-	padding: 5px;
-}
 </style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/aside/AddMenu.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/AddMenu.vue
index b47aba02..de3f4607 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/aside/AddMenu.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/AddMenu.vue
@@ -99,7 +99,8 @@ const createPage = (editorType, confirmName) => {
 		storePage.eventPageListUpdate = !storePage.eventPageListUpdate;
 		ElMessage.success('创建成功');
 		if (editorType !== 0) {
-			router.push({path: '/page/edit', query: {parentId: props.pageId, pageId: json.data.id}});
+			let newPageId = json.data.id;
+			router.push({path: `/edit/${storeSpace.chooseSpaceId}/${newPageId}`});
 		}
 	});
 }
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue
index 84d5b35d..12981191 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue
@@ -104,20 +104,13 @@ const emit = defineEmits(['collapse']);
 
 let turnLeftCollapse = () => {
 	storeDisplay.showMenu = !storeDisplay.showMenu;
-	setTimeout(() => {
-		if (storeDisplay.showMenu) {
-			storeDisplay.rightAsideWidth = 301;
-		} else {
-			storeDisplay.rightAsideWidth = 1;
-		}
-	}, 100);
 };
 const editWiki = () => {
 	// 锁定页面并进入编辑页面
 	storePage.pageIsUnlock = false;
 	let param = {pageId: storePage.pageInfo.id};
 	pageApi.pageLock(param).then(() => {
-		router.push({path: '/page/edit', query: {pageId: storePage.pageInfo.id}});
+		router.push({path: `/edit/${storePage.pageInfo.spaceId}/${storePage.pageInfo.id}`});
 	});
 }
 const showCommentWiki = () => {
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/editor/WangEditor.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/editor/WangEditor.vue
new file mode 100644
index 00000000..95970610
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/editor/WangEditor.vue
@@ -0,0 +1,161 @@
+<template>
+	<div class="wang-editor-box">
+		<div class="editor-toolbar-box fix-top">
+			<Toolbar class="editor-toolbar" :defaultConfig="toolbarConfig" :editor="editorRef"/>
+		</div>
+		<div class="wang-editor-content">
+			<div class="editor-container">
+				<div @click="pageEditorBodyClick" class="page-editor-body">
+					<Editor :defaultConfig="editorConfig" @onCreated="handleCreated"/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<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";
+
+let route = useRoute();
+const props = defineProps({
+	pageId: Number
+});
+let toolbarConfig = {
+	excludeKeys: ["fullScreen", "undo", "redo", "emotion", "|", "lineHeight", "fontFamily"],
+};
+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',
+			// 最大支持500M图片上传
+			maxFileSize: 500 * 1024 * 1024,
+			withCredentials: true,
+			meta: {pageId: props.pageId},
+		},
+		uploadVideo: {
+			server: import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/wangEditor/upload',
+			fieldName: 'files',
+			// 最大支持30M图片上传
+			maxFileSize: 30 * 1024 * 1024,
+			withCredentials: true,
+			meta: {pageId: props.pageId},
+		}
+	}
+});
+const editorRef = shallowRef();
+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 getContent = () => {
+	return editorRef.value.getHtml();
+}
+const getPreview = () => {
+	return editorRef.value.getText();
+}
+const setContent = (content) => {
+	editorRef.value.select([]);
+	editorRef.value.deleteFragment();
+	editorRef.value.dangerouslyInsertHtml(content);
+}
+onBeforeUnmount(() => {
+	const editor = editorRef.value;
+	if (editor == null) return;
+	editor.destroy();
+});
+defineExpose({setContent, getContent, getPreview});
+</script>
+
+<style lang="scss">
+.w-e-bar-item-group {
+	.w-e-bar-item-menus-container {
+		/**不知为何按钮和下拉之间总是差了那么一点，导致没法点击到下拉框，给他移上去一点*/
+		top: -2px;
+	}
+}
+</style>
+
+<style>
+.wang-editor-box {
+	background-color: #f5f5f5;
+}
+
+.wang-editor-box .top-container {
+	border-bottom: 1px solid #e8e8e8;
+	padding-left: 30px;
+}
+
+.wang-editor-box .editor-toolbar .w-e-bar {
+	background: #FCFCFC;
+}
+
+.wang-editor-box .editor-toolbar {
+	width: 980px;
+	background-color: #FCFCFC;
+	margin: 0 auto;
+}
+
+.wang-editor-box .editor-toolbar-box {
+	border-bottom: 1px solid #e8e8e8;
+	background-color: #FCFCFC;
+}
+
+.wang-editor-box .editor-toolbar-box.fix-top {
+	/*position: fixed;*/
+	/*top: 40px;*/
+	/*z-index: 1;*/
+	/*text-align: center;*/
+	/*background: #fff;*/
+	/*width: 100%;*/
+}
+
+.wang-editor-box .wang-editor-content {
+	padding: 20px 0;
+	overflow: auto;
+	height: calc(100vh - 140px);
+}
+
+.wang-editor-box .w-e-bar-item {
+	height: 39px;
+}
+
+.wang-editor-box .editor-container {
+	width: 850px;
+	margin: 0 auto;
+	background-color: #fff;
+	padding: 20px 50px 50px 50px;
+	border: 1px solid #e8e8e8;
+	box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
+}
+
+.wang-editor-box .title-container {
+	padding: 20px 0;
+	border-bottom: 1px solid #e8e8e8;
+}
+
+.wang-editor-box .title-container input {
+	font-size: 30px;
+	border: 0;
+	outline: none;
+	width: 100%;
+	line-height: 1;
+}
+
+.wang-editor-box .page-editor-body {
+	margin-top: 20px;
+	min-height: 600px;
+}
+</style>
+
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
index 69d460b9..af7b4a6d 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
@@ -146,6 +146,18 @@ const getUserHeadBgColor = (userId) => {
 	overflow: auto;
 
 	.comment-card {
+		.head {
+			float: left;
+			background-color: #ccc;
+			border-radius: 50%;
+			margin-right: 10px;
+			width: 45px;
+			height: 45px;
+			line-height: 45px;
+			text-align: center;
+			color: #fff;
+		}
+
 		.comment-user-name {
 			margin-bottom: 10px;
 
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Files.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Files.vue
index 9ad2fb61..f822b147 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Files.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Files.vue
@@ -165,8 +165,14 @@ const computeFileSize = (fileSize) => {
 
 	.head {
 		float: left;
+		background-color: #ccc;
+		border-radius: 50%;
 		margin-right: 10px;
-		line-height: 40px;
+		width: 45px;
+		height: 45px;
+		line-height: 45px;
+		text-align: center;
+		color: #fff;
 	}
 
 	.files-user-name .time {
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue
index 06a88d0e..d3c70a3d 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue
@@ -80,3 +80,15 @@ const initMobileQrScan = () => {
 	}, 0);
 }
 </script>
+
+<style scoped lang="scss">
+.mobile-qr {
+	width: 250px;
+	height: 250px;
+	border: 1px solid #ccc;
+	display: inline-block;
+	border-radius: 4px;
+	margin-bottom: 10px;
+	padding: 5px;
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue
index 97085918..ec00344b 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue
@@ -68,3 +68,34 @@ const historyClick = (history) => {
 	}
 }
 </script>
+
+<style lang="scss" scoped>
+.action-tab-box {
+	height: calc(100vh - 120px);
+	overflow: auto;
+	padding: 20px 10px;
+
+	.action-box-empty {
+		text-align: center;
+		padding-top: 30px;
+		color: #888;
+		font-size: 14px;
+	}
+
+	.history-item {
+		height: 55px;
+		line-height: 25px;
+		cursor: pointer;
+		vertical-align: middle;
+	}
+
+	.history-loading-status {
+		margin-left: 5px;
+		color: #67c23a;
+	}
+
+	.history-loading-status.el-icon-circle-close {
+		color: #f56c6c;
+	}
+}
+</style>
diff --git a/zyplayer-doc-wiki/src/main/java/org/dromara/zyplayer/wiki/service/WikiPageUploadService.java b/zyplayer-doc-wiki/src/main/java/org/dromara/zyplayer/wiki/service/WikiPageUploadService.java
index 02e04146..125c7b3a 100644
--- a/zyplayer-doc-wiki/src/main/java/org/dromara/zyplayer/wiki/service/WikiPageUploadService.java
+++ b/zyplayer-doc-wiki/src/main/java/org/dromara/zyplayer/wiki/service/WikiPageUploadService.java
@@ -41,19 +41,11 @@ public class WikiPageUploadService {
     private final UserMessageService userMessageService;
     private final WikiPageHistoryService wikiPageHistoryService;
 
-
     public Object update(WikiPage wikiPage, String content, String preview) {
         DocUserDetails currentUser = DocUserUtil.getCurrentUser();
         WikiPageContent pageContent = new WikiPageContent();
         pageContent.setContent(content);
-        if (wikiPage.getEditorType() == 2) {
-            preview = MDToText.mdToText(preview);
-        }
         pageContent.setPreview(preview);
-        // 数据库是varchar(16000)，所以如果不开启es的话搜索超过16000的文章就搜不到~，es存preview不截断
-        if (StringUtils.isNotBlank(preview) && preview.length() > 16000) {
-            pageContent.setPreview(preview.substring(0, 16000));
-        }
         if (StringUtils.isBlank(wikiPage.getName())) {
             return "标题不能为空！";
         }