From db4de0b319ca135e636a34ac581ea1c876c9943a Mon Sep 17 00:00:00 2001
From: sswiki <admin@zyplayer.com>
Date: Sat, 7 Dec 2024 20:05:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zyplayer-doc-ui/wiki-ui/src/routes.js         |  46 +--
 .../src/views/page/aside/RightHeader.vue      |  12 -
 .../wiki-ui/src/views/view/PageLayout.vue     | 197 ++++++++++
 .../wiki-ui/src/views/view/View.vue           | 361 ++++++++++++++++++
 .../wiki-ui/src/views/view/aside/AddMenu.vue  | 124 ++++++
 .../src/views/view/aside/LeftAside.vue        | 356 +++++++++++++++++
 .../src/views/view/aside/RightHeader.vue      | 326 ++++++++++++++++
 .../src/views/view/aside/RightResize.vue      |  76 ++++
 .../wiki-ui/src/views/view/show/Annex.vue     |  80 ++++
 .../wiki-ui/src/views/view/show/Comment.vue   | 197 ++++++++++
 .../views/view/show/MobileQrScanDialog.vue    |  76 ++++
 .../src/views/view/show/Navigation.vue        | 106 +++++
 .../src/views/view/show/PageAuthDialog.vue    | 140 +++++++
 .../src/views/view/show/PageHistory.vue       |  80 ++++
 .../wiki-ui/src/views/view/show/PageZan.vue   |  55 +++
 15 files changed, 2197 insertions(+), 35 deletions(-)
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/View.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/aside/AddMenu.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/aside/LeftAside.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightResize.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/Annex.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/Navigation.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/PageAuthDialog.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/view/show/PageZan.vue

diff --git a/zyplayer-doc-ui/wiki-ui/src/routes.js b/zyplayer-doc-ui/wiki-ui/src/routes.js
index 34332638..0c90a041 100644
--- a/zyplayer-doc-ui/wiki-ui/src/routes.js
+++ b/zyplayer-doc-ui/wiki-ui/src/routes.js
@@ -1,63 +1,63 @@
-import PageLayout from './views/page/PageLayout.vue'
-import ShareLayout from './components/layouts/ShareLayout.vue'
-import ShareMobileLayout from './components/layouts/ShareMobileLayout.vue'
+import PageLayout from './views/view/PageLayout.vue'
+// import ShareLayout from './components/layouts/ShareLayout.vue'
+// import ShareMobileLayout from './components/layouts/ShareMobileLayout.vue'
 
-import Search from './views/page/Search.vue'
+// import Search from './views/page/Search.vue'
 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/page/View.vue'
-import Edit from './views/page/Edit.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 spaceManage from './views/space/Manage.vue'
+// import spaceManage from './views/space/Manage.vue'
 
-import sharePcHome from './views/page/share/pc/Home.vue'
-import sharePcView from './views/page/share/pc/View.vue'
-import shareMobileView from './views/page/share/mobile/View.vue'
+// import sharePcHome from './views/page/share/pc/Home.vue'
+// import sharePcView from './views/page/share/pc/View.vue'
+// import shareMobileView from './views/page/share/mobile/View.vue'
 
 let routes = [
 	{path: '/', redirect: '/home'},
-	{path: '/page/search', name: 'WIKI-全局搜索', component: Search},
+	{path: '/page/search', name: 'WIKI-全局搜索', component: NoAuth},
 	{path: '/common/noAuth', name: 'WIKI-没有权限', component: NoAuth},
 	{
 		path: '/',
 		name: '文档管理',
 		component: PageLayout,
 		children: [
-			{path: '/home', name: 'WIKI文档管理', component: Home},
-			{path: '/user/myInfo', name: 'WIKI-我的信息', component: MyInfo},
-			{path: '/page/show', name: 'WIKI-页面查看', component: Show},
-			{path: '/page/edit', name: 'WIKI-编辑内容', component: Edit},
-			{path: '/space/manage', name: 'WIKI-空间管理', component: spaceManage},
+			{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: '/space/manage', name: 'WIKI-空间管理', component: NoAuth},
 		],
 	},
 	{
 		path: '/',
 		name: 'PC端开放文档',
-		component: ShareLayout,
+		component: NoAuth,
 		children: [
 			{
 				path: '/page/share/home',
 				name: 'WIKI-开放文档',
-				component: sharePcHome,
+				component: NoAuth,
 			},
 			{
 				path: '/page/share/view',
 				name: 'WIKI-内容展示',
-				component: sharePcView,
+				component: NoAuth,
 			},
 		],
 	},
 	{
 		path: '/',
 		name: 'APP端开放文档',
-		component: ShareMobileLayout,
+		component: NoAuth,
 		children: [
 			{
 				path: '/page/share/mobile/view',
 				name: 'WIKI-开放文档-APP',
-				component: shareMobileView,
+				component: NoAuth,
 			},
 		],
 	},
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/page/aside/RightHeader.vue b/zyplayer-doc-ui/wiki-ui/src/views/page/aside/RightHeader.vue
index 9feb86cc..356c1248 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/aside/RightHeader.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/aside/RightHeader.vue
@@ -114,18 +114,6 @@ let turnLeftCollapse = () => {
 	}, 100);
 };
 
-// 清除控制台，和设置逻辑放远一点不容易被察觉
-watch(() => storeUser.ts, () => {
-	console.clear();
-});
-
-watch(() => storePage.favoritePageChange, (newVal) => {
-	if (storePage.needVersion) {
-		ElMessage.warning("不支持在指定版本后收藏页面");
-		return;
-	}
-});
-
 let favoritePage = (favorite) => {
 	storePage.favoritePageChange = {
 		id: storePage.pageInfo.id,
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue
new file mode 100644
index 00000000..3dc4bb0a
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue
@@ -0,0 +1,197 @@
+<template>
+	<div class="global-layout-vue">
+		<el-container>
+			<el-aside v-show="storeDisplay.showMenu" :style="leftAsideStyle" class="left-aside-outer-box">
+				<LeftAside/>
+			</el-aside>
+			<RightResize v-show="storeDisplay.showMenu" v-model="storeDisplay.rightAsideWidth" @change="rightAsideWidthChange"></RightResize>
+			<el-container>
+				<el-header v-if="storeDisplay.showHeader">
+					<RightHeader ref="rightHeaderRef"/>
+				</el-header>
+				<el-main style="padding: 0;">
+					<router-view/>
+				</el-main>
+			</el-container>
+		</el-container>
+	</div>
+</template>
+
+<script setup>
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useStoreDisplay} from '@/store/wikiDisplay.js'
+import LeftAside from './aside/LeftAside.vue'
+import RightHeader from './aside/RightHeader.vue'
+import RightResize from './aside/RightResize.vue'
+import userApi from "@/assets/api/user";
+import {useStoreUserData} from "@/store/userData";
+
+let storeUser = useStoreUserData();
+let storeDisplay = useStoreDisplay();
+onMounted(() => {
+	getSelfUserInfo();
+});
+const rightAsideWidthChange = (width) => {
+	storeDisplay.rightAsideWidth = width;
+	storeDisplay.commentShow = width;
+}
+let leftAsideStyle = computed(() => {
+	return {width: storeDisplay.rightAsideWidth + 'px'};
+});
+const getSelfUserInfo = () => {
+	userApi.getSelfUserInfo().then((json) => {
+		storeUser.userInfo = json.data || {};
+	});
+}
+</script>
+
+<style lang="scss">
+.left-aside-outer-box {
+	border-right: 1px solid #eee;
+	background: #fafafa;
+}
+</style>
+
+<style>
+html,
+body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+.global-layout-vue {
+	height: 100%;
+}
+
+.hidTree {
+	display: none;
+}
+
+#app, .el-container, .el-menu {
+	height: 100%;
+}
+
+.el-header {
+	background-color: #fff !important;
+}
+
+.header-right-user-name {
+	color: #000000;
+	vertical-align: middle;
+}
+
+.el-header {
+	color: #333;
+	height: 60px !important;
+	background-color: #fff !important;
+	border-bottom: 1px solid #eee;
+}
+
+.head-icon {
+	margin-right: 15px;
+	margin-top: 15px;
+	font-size: 16px;
+	cursor: pointer;
+	color: #000000;
+	vertical-align: middle;
+}
+
+.header-user-message .page-info-box {
+	text-align: right;
+	margin-top: 10px;
+}
+
+.upgrade-info {
+	max-height: 150px;
+	overflow-y: auto;
+	word-break: break-all;
+	white-space: pre-wrap;
+	line-height: 26px;
+}
+
+.search-option-item {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.search-option-item .title {
+	font-weight: bold;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.search-option-item .content {
+	font-size: 12px;
+	color: #888;
+}
+
+</style>
+
+<style lang="scss">
+.space-folder-box {
+	position: relative;
+}
+
+.wiki-page-tree-box {
+	.el-tree-node__content {
+		height: 35px;
+		position: relative;
+
+		.page-tree-node {
+			width: 100%;
+
+			.label {
+				.el-icon {
+					vertical-align: middle;
+				}
+
+				.text {
+					margin-left: 5px;
+					vertical-align: middle;
+					max-width: calc(100% - 40px);
+					display: inline-block;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.rename-input {
+				width: 90%;
+			}
+
+			.page-action-box {
+				position: absolute;
+				right: 0;
+				top: 0;
+				height: 35px;
+				line-height: 35px;
+				background: #fff;
+				border-radius: 4px;
+				display: none;
+
+				.page-action-dropdown-btn {
+					padding: 0 8px;
+					height: 35px;
+					margin-top: -1px;
+				}
+
+				.el-button + .el-button {
+					margin-left: 0;
+				}
+			}
+
+			.page-action-box.renaming {
+				display: none !important;
+			}
+		}
+
+		&:hover .page-action-box {
+			display: block;
+		}
+	}
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue
new file mode 100644
index 00000000..e7b944e4
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/View.vue
@@ -0,0 +1,361 @@
+<template>
+	<div class="page-show-vue" v-if="storePage.pageInfo.editorType !== 0">
+		<a-row class="view-body-comment-box">
+			<a-col flex="auto" class="view-body-outer-box">
+				<div class="view-body-box">
+					<div class="wiki-title" ref="wikiTitleRef">{{ storePage.pageInfo.name }}</div>
+					<div id="pageContentBox" ref="pageContentRef" class="wiki-page-content">
+						<div v-if="wikiPage.editorType === 2" v-html="pageShowDetail" class="markdown-body" v-highlight></div>
+						<div v-else v-html="pageShowDetail" class="wang-editor-body"></div>
+					</div>
+					<PageZan></PageZan>
+				</div>
+				<Navigation :heading="navigationList"></Navigation>
+			</a-col>
+			<a-col v-if="storeDisplay.commentShow" flex="280px">
+				<a-tabs v-model:activeKey="actionTabActiveName" class="action-tabs-box">
+					<a-tab-pane tab="评论" key="comment">
+						<Comment></Comment>
+					</a-tab-pane>
+					<a-tab-pane tab="附件" key="files">
+						<Annex/>
+					</a-tab-pane>
+					<a-tab-pane tab="修改历史" key="history">
+						<PageHistory
+							:pageHistoryList="pageHistoryList"
+							:pageHistoryChoice="pageHistoryChoice"
+							:pageHistoryDetail="pageHistoryDetail"
+							@historyClickHandle="historyClickHandle"
+							@previewPageImage="previewPageImage"
+							@createNavigationHeading="createNavigationHeading"/>
+					</a-tab-pane>
+					<template #rightExtra>
+						<el-tooltip content="关闭" placement="top">
+							<a-button @click="closeActionTab" type="text" :icon="h(CloseOutlined)"></a-button>
+						</el-tooltip>
+					</template>
+				</a-tabs>
+			</a-col>
+		</a-row>
+		<ImageViewer ref="imageViewerRef"/>
+	</div>
+</template>
+
+<script setup>
+import { CloseOutlined } from '@ant-design/icons-vue';
+import {toRefs, ref, reactive, onMounted, watch, defineProps, h, nextTick, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
+import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
+import QRCode from 'qrcode'
+import unitUtil from '../../assets/lib/UnitUtil.js'
+import htmlUtil from '../../assets/lib/HtmlUtil.js'
+import pageApi from '../../assets/api/page'
+import userApi from '../../assets/api/user'
+import Navigation from './show/Navigation.vue'
+import Annex from './show/Annex.vue'
+import PageHistory from './show/PageHistory.vue'
+import Comment from './show/Comment.vue'
+import PageZan from './show/PageZan.vue'
+import {mavonEditor} from 'mavon-editor'
+import 'mavon-editor/dist/markdown/github-markdown.min.css'
+import 'mavon-editor/dist/css/index.css'
+import {useStorePageData} from "@/store/pageData";
+import {useStoreDisplay} from "@/store/wikiDisplay";
+import ImageViewer from "@/components/base/ImageViewer.vue";
+
+let route = useRoute();
+let router = useRouter();
+let storeDisplay = useStoreDisplay();
+let storePage = useStorePageData();
+const props = defineProps({
+	spaceInfo: Object,
+});
+let emit = defineEmits(['switchSpace', 'changeExpandedKeys', 'loadPageList']);
+onMounted(() => {
+	storeDisplay.currentPage = 'view';
+	initQueryParam(route);
+});
+onBeforeRouteUpdate((to) => {
+	initQueryParam(to);
+});
+// 页面展示相关
+let wikiPage = ref({});
+let wikiPageAuth = ref({});
+let pageContent = ref({});
+let selfUserId = ref(0);
+// 右侧标签页
+let pageHistoryDetail = ref('');
+let pageShowDetail = ref('');
+let pageHistoryChoice = ref({});
+let pageHistoryList = ref([]);
+let pageHistoryPageNum = ref(1);
+// 左侧导航菜单
+let navigationList = ref([]);
+let actionTabActiveName = ref('comment');
+let imageViewerRef = ref();
+const previewPageImage = () => {
+	if (imageViewerRef.value) {
+		imageViewerRef.value.initViewer(pageContentRef.value);
+	}
+}
+const closeActionTab = () => {
+	storeDisplay.commentShow = false;
+	clearHistory();
+}
+const getPageHistory = (pageId, pageNum) => {
+	if (pageNum === 1) {
+		pageHistoryList.value = [];
+		pageHistoryPageNum.value = 1;
+	}
+	let param = {pageId: pageId, pageNum: pageNum};
+	pageApi.pageHistoryList(param).then((json) => {
+		let historyList = json.data || [];
+		if (historyList.length <= 0) {
+			pageHistoryPageNum.value = 0;
+		} else {
+			historyList.forEach((item) => (item.loading = 0));
+			pageHistoryList.value = pageHistoryList.value.concat(historyList);
+		}
+	})
+}
+const historyClickHandle = (history) => {
+	pageHistoryChoice.value.loading = 0;
+	pageHistoryChoice.value = history;
+	pageHistoryDetail.value = history.content;
+	pageShowDetail.value =history.content;
+}
+const clearHistory = () => {
+	pageHistoryChoice.value.loading = 0;
+	pageHistoryDetail.value = '';
+	pageHistoryChoice.value = {};
+	pageHistoryList.value.forEach((item) => (item.loading = 0));
+	pageShowDetail.value = pageContent.value.content;
+}
+const loadPageDetail = (pageId) => {
+	clearHistory();
+	pageApi.pageDetail({id: pageId}).then(async (json) => {
+		let result = json.data || {};
+		let wikiPageRes = result.wikiPage || {};
+		wikiPageRes.selfZan = result.selfZan || 0;
+		wikiPage.value = wikiPageRes;
+		pageContent.value = result.pageContent || {};
+		storePage.fileList = result.fileList || [];
+		selfUserId.value = result.selfUserId || 0;
+		wikiPageAuth.value = {
+			canEdit: result.canEdit,
+			canDelete: result.canDelete,
+			canUploadFile: result.canUploadFile,
+			canDeleteFile: result.canDeleteFile,
+			canConfigAuth: result.canConfigAuth,
+		}
+		if (wikiPage.value.editorType === 2) {
+			pageContent.value.content = mavonEditor.getMarkdownIt().render(pageContent.value.content);
+		}
+		pageShowDetail.value = pageContent.value.content;
+		// 修改标题
+		document.title = wikiPageRes.name || 'WIKI-内容展示';
+		// 修改最后点击的项，保证刷新后点击编辑能展示编辑的项
+		// if (!lastClickNode.value.id) {
+		// 	lastClickNode.value = {id: wikiPage.id, nodePath: wikiPage.name};
+		// }
+		// 调用父方法切换选择的空间
+		emit('switchSpace', wikiPage.value.spaceId);
+		// 调用父方法展开目录树
+		emit('changeExpandedKeys', pageId);
+		setTimeout(() => {
+			previewPageImage();
+			createNavigationHeading();
+		}, 500);
+		storePage.pageInfo = wikiPageRes;
+		storePage.pageAuth = wikiPageAuth.value;
+	})
+	getPageHistory(pageId, 1)
+}
+let wikiTitleRef = ref();
+const createNavigationHeading = () => {
+	let navigationListVal = htmlUtil.createNavigationHeading()
+	// 标题加到导航里面去
+	if (navigationListVal.length > 0) {
+		let wikiTile = wikiPage.value.name || 'WIKI-内容展示'
+		navigationListVal.unshift({
+			level: 1,
+			node: wikiTitleRef.value,
+			text: wikiTile,
+		})
+	}
+	navigationList.value = navigationListVal;
+}
+let spaceId = '';
+let pageId = '';
+let pageContentRef = ref();
+const initQueryParam = (to) => {
+	spaceId = parseInt(to.params.spaceId);
+	pageId = parseInt(to.params.pageId);
+	if (!!pageId) {
+		loadPageDetail(pageId);
+	}
+}
+</script>
+
+<style lang="scss">
+.page-show-vue {
+	height: 100%;
+	overflow: hidden;
+
+	.view-body-comment-box {
+		height: 100%;
+
+		.view-body-outer-box {
+			height: 100%;
+			overflow: auto;
+			padding: 30px 20px;
+			position: relative;
+			border-right: 1px solid #eee;
+
+			.view-body-box {
+				max-width: 840px;
+				margin: 0 auto;
+
+				.wiki-page-content {
+					margin-top: 30px;
+				}
+			}
+		}
+
+		.ant-tabs-nav {
+			padding: 0 15px;
+		}
+	}
+}
+</style>
+
+<style>
+@import '../../assets/lib/wangEditor.css';
+
+.page-show-vue .icon-collapse {
+	float: left;
+	font-size: 25px;
+	color: #aaa;
+	margin-top: 8px;
+	cursor: pointer;
+}
+
+.page-show-vue .icon-collapse:hover {
+	color: #eee;
+}
+
+.page-show-vue .wiki-title {
+	font-size: 2em;
+	text-align: center;
+	font-weight: bold;
+}
+
+.page-show-vue .create-user-time {
+	margin-right: 20px;
+}
+
+.page-show-vue .wiki-author {
+	font-size: 14px;
+	color: #888;
+	padding: 20px 0;
+	height: 40px;
+	line-height: 40px;
+}
+
+.page-show-vue .wiki-page-content img {
+	cursor: pointer;
+	max-width: 100%;
+}
+
+.page-show-vue .wiki-page-content img:hover {
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+}
+
+.page-show-vue .upload-page-file .el-upload-list {
+	display: none;
+}
+
+.page-show-vue .is-link {
+	color: #1e88e5;
+	cursor: pointer;
+}
+
+.page-show-vue #newPageContentDiv .w-e-text-container {
+	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;
+}
+
+.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
new file mode 100644
index 00000000..3c51fbda
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/AddMenu.vue
@@ -0,0 +1,124 @@
+<template>
+	<a-dropdown :trigger="['click']">
+		<a-button :icon="h(PlusOutlined)" type="text" style="color: #888;"></a-button>
+		<template #overlay>
+			<a-menu>
+				<a-menu-item @click="createWiki(1)">
+					<IconParkWord fill="#498ba7"/> 创建富文本
+				</a-menu-item>
+				<a-menu-item @click="createWiki(2)">
+					<IconDocument fill="#558ff2"/> 创建Markdown
+				</a-menu-item>
+				<a-menu-item @click="createWiki(0)">
+					<FolderOpen fill="#ffd149"/> 创建文件夹
+				</a-menu-item>
+				<a-menu-item @click="createWikiByTemplate()">
+					<IconParkPageTemplate/> 从模板创建
+				</a-menu-item>
+<!--				<a-menu-item key="3">-->
+<!--					<el-tooltip content="支持MD，ZIP格式（图片和MD文件请放到同级目录并配置同级相对路径）" placement="right-start" :show-after="300">-->
+<!--						<a-upload v-model:file-list="fileList" name="file" :multiple="false" :customRequest="doAUpload" class="import-upload">-->
+<!--							<IconParkAfferent/> 导入-->
+<!--						</a-upload>-->
+<!--					</el-tooltip>-->
+<!--				</a-menu-item>-->
+			</a-menu>
+		</template>
+	</a-dropdown>
+</template>
+
+<script setup>
+import { PlusOutlined } from '@ant-design/icons-vue';
+import {FolderOpen, Word as IconParkWord, Afferent as IconParkAfferent, PageTemplate as IconParkPageTemplate,} from '@icon-park/vue-next'
+import {ref, defineProps, defineEmits, h} from 'vue';
+import {useRouter} from "vue-router";
+import {ElMessage} from 'element-plus'
+import pageApi from '@/assets/api/page'
+import axios from "axios";
+import IconDocument from '@/components/base/IconDocument.vue'
+import {useStorePageData} from "@/store/pageData";
+import {useStoreSpaceData} from "@/store/spaceData";
+
+let router = useRouter();
+let storePage = useStorePageData();
+let storeSpace = useStoreSpaceData();
+
+let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/import/upload');
+let fileList = ref([]);
+let emit = defineEmits(['createWikiByTemplate']);
+let props = defineProps({
+	pageId: Number
+});
+const doAUpload = (data) => {
+	let formData = new FormData();
+	formData.append('files', data.file);
+	formData.append('pageId', props.pageId);
+	if (props.pageId === 0) {
+		formData.append('id', storeSpace.chooseSpaceId);
+	}
+	axios({
+		url: uploadFileUrl.value,
+		method: 'post',
+		data: formData,
+		headers: {'Content-Type': 'multipart/form-data'},
+		timeout: 10000,
+		withCredentials: true,
+	}).then((res) => {
+		fileList.value = [];
+		if (res.data.errCode === 200) {
+			ElMessage.success('导入成功');
+		}
+		if (res.data.errCode === 300) {
+			ElMessage.warning(res.data.errMsg);
+			ElMessage.warning('文件太多可能超时，如果是超时，请稍等后刷新查看列表~');
+		}
+		storePage.eventPageListUpdate = !storePage.eventPageListUpdate;
+	}).catch((e) => {
+		fileList.value = [];
+		ElMessage.error('导入失败：' + e.message);
+	});
+}
+const createWikiByTemplate = () => {
+	// TODO
+}
+const createWiki = (editorType) => {
+	if (storeSpace.chooseSpaceId > 0) {
+		let name = "新建文档";
+		if (editorType === 0) name = "新建文件夹";
+		pageApi.updatePage({
+			spaceId: storeSpace.chooseSpaceId,
+			parentId: props.pageId,
+			editorType: editorType,
+			name: name,
+			content: '',
+			preview: ''
+		}).then((json) => {
+			storePage.eventPageListUpdate = !storePage.eventPageListUpdate;
+			ElMessage.success('创建成功');
+			if (editorType !== 0) {
+				router.push({path: '/page/edit', query: {parentId: props.pageId, pageId: json.data.id}});
+			}
+		})
+	} else {
+		ElMessage.warning('请先选择或创建空间');
+	}
+}
+</script>
+
+<style lang="scss">
+.add-menu-dropdown-btn {
+	padding: 0 8px;
+	height: 35px;
+	margin-top: -1px;
+}
+
+.import-upload {
+	.ant-upload-select {
+		display: block;
+
+		.ant-upload {
+			display: block;
+		}
+	}
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/aside/LeftAside.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/LeftAside.vue
new file mode 100644
index 00000000..a79c0e72
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/LeftAside.vue
@@ -0,0 +1,356 @@
+<template>
+	<div class="left-aside-box">
+		<div class="left-aside-top-box">
+			<el-select :model-value="storeSpace.chooseSpaceId" @change="spaceChangeEvents" filterable
+			           placeholder="选择空间" class="choice-space-select">
+				<el-option-group label="" v-if="!props.readOnly">
+					<el-option :key="-1" label="空间管理" :value="-1"></el-option>
+				</el-option-group>
+				<el-option-group label=""></el-option-group>
+				<el-option v-for="item in storeSpace.spaceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+			</el-select>
+			<el-autocomplete v-model="searchKeywords" v-if="!props.readOnly" :fetch-suggestions="doSearchByKeywords"
+			                 @select="handleSearchKeywordsSelect" placeholder="在当前空间搜索"
+			                 popper-class="search-autocomplete-popper" class="search-autocomplete">
+				<template v-slot="{ item }">
+					<div class="search-option-item">
+						<div class="title">
+							<span v-html="item.pageTitle || '-'"></span>
+						</div>
+						<span class="content" v-html="item.previewContent || '-'"></span>
+					</div>
+				</template>
+			</el-autocomplete>
+			<div class="space-folder-box" v-if="!props.readOnly">
+				<el-row justify="space-between">
+					<el-col :span="16">
+						<div class="page-group-tag">
+							<el-tooltip :content="spaceTreeIsClose?'点击展开目录':'点击收起目录'" placement="top">
+								<span class="label" @click="changeDropdownStatus">空间目录</span>
+							</el-tooltip>
+						</div>
+					</el-col>
+					<el-col :span="8" style="text-align: right;">
+						<AddMenu/>
+					</el-col>
+				</el-row>
+			</div>
+		</div>
+		<div v-show="!spaceTreeIsClose" class="wiki-page-tree-box">
+			<el-tree ref="wikiPageTreeRef" :current-node-key="props.nowPageId" :data="storePage.wikiPageList"
+			         :default-expanded-keys="wikiPageExpandedKeys" :expand-on-click-node="true" :class="explanClass"
+			         :filter-node-method="filterPageNode" :props="defaultProps" :draggable="!props.readOnly"
+			         @node-click="handleNodeClick" @node-drop="handlePageDrop" node-key="id" highlight-current
+			         style="background-color: #fafafa;">
+				<template v-slot="{ node, data }">
+					<div class="page-tree-node" @mouseover="changeNodeOptionStatus(data) ">
+						<div class="node-content">
+							<!--图标-->
+							<span class="left-icon">
+								<template v-if="data.editorType === 0">
+									<FolderOpen v-if="node.expanded" class="el-icon"/>
+									<FolderClose v-else class="el-icon"/>
+								</template>
+								<template v-else-if="data.editorType === 1"><IconParkWord class="el-icon"/></template>
+								<template v-else-if="data.editorType === 2"><IconDocument class="el-icon"/></template>
+							</span>
+							<!--标题-->
+							<el-tooltip v-if="data.shareStatus > 0" :content="data.tags" placement="top-start" :show-after="500">
+								<a-tag color="warning" style="margin-inline-end: 4px;padding-inline: 4px;"> {{data.shareStatus === 1 ? '公共模板' : '个人模板'}}</a-tag>
+							</el-tooltip>
+							<a-input v-if="data.renaming" v-model:value="data.name" @blur="doRename(node,data)" @click.stop
+							         class="rename-input" placeholder="请输入文档名称"/>
+							<span v-else style="vertical-align: middle;margin-left: 5px;">
+								<el-tooltip :content="node.label" placement="top-start" :show-after="700">{{ node.label }}</el-tooltip>
+							</span>
+							<!--操作-->
+							<div class="page-action-box" :class="data.renaming?'renaming':''" @click.stop>
+								<AddMenu :pageId="data.id"/>
+								<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
+									<a-button :icon="h(EllipsisOutlined)" type="text" style="color: #888;"></a-button>
+									<template #overlay>
+										<a-menu>
+											<a-menu-item @click="rename(node,data)">
+												<IconParkEditTwo class="el-icon"/> 重命名
+											</a-menu-item>
+											<a-sub-menu title="移动文档">
+												<template #icon>
+													<IconParkIntersection/>
+												</template>
+												<a-menu-item @click="openMoveMenu(false)">
+													<IconParkCopy/> 复制文档
+												</a-menu-item>
+												<a-menu-item @click="openMoveMenu(true)">
+													<IconParkCuttingOne/> 迁移文档
+												</a-menu-item>
+											</a-sub-menu>
+											<a-menu-item v-if="data.editorType !== 0" @click="openTemplateCreate(data.shareStatus !== undefined)">
+												<IconParkPageTemplate/> 设为模板
+											</a-menu-item>
+											<a-menu-item @click="deleteWikiPage(data)">
+												<IconParkDelete class="el-icon"/> 删除
+											</a-menu-item>
+										</a-menu>
+									</template>
+								</a-dropdown>
+							</div>
+						</div>
+					</div>
+				</template>
+			</el-tree>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {
+	FolderClose,
+	FolderOpen,
+	Word as IconParkWord,
+	Copy as IconParkCopy,
+	CuttingOne as IconParkCuttingOne,
+	Intersection as IconParkIntersection,
+	Delete as IconParkDelete,
+	EditTwo as IconParkEditTwo,
+	PageTemplate as IconParkPageTemplate,
+} from '@icon-park/vue-next'
+import { EllipsisOutlined } from '@ant-design/icons-vue';
+import {ref, defineProps, defineEmits, defineExpose, onMounted, h, watch} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import pageApi from '@/assets/api/page'
+import {useStoreDisplay} from "@/store/wikiDisplay";
+import {useStorePageData} from "@/store/pageData";
+import AddMenu from "./AddMenu.vue";
+import IconDocument from "@/components/base/IconDocument.vue";
+import {ElMessageBox, ElMessage} from 'element-plus'
+import {useStoreSpaceData} from "@/store/spaceData";
+import Navigation from "@/views/page/show/Navigation.vue";
+import PageZan from "@/views/page/show/PageZan.vue";
+
+let route = useRoute();
+let router = useRouter();
+let storePage = useStorePageData();
+let storeDisplay = useStoreDisplay();
+let storeSpace = useStoreSpaceData();
+
+let emit = defineEmits(['spaceChangeEvents', 'setNowPageId']);
+let searchKeywords = ref('');
+let descriptorForTree = ref("点击收起目录");
+let explan = ref(false);
+let explanClass = ref("el-tree");
+let wikiPageExpandedKeys = ref([]);
+let defaultProps = ref({children: 'children', label: 'name',});
+let wikiPageTreeRef = ref();
+let props = defineProps({
+	wikiPageList: Array,
+	spaceOptions: Array,
+	nowPageId: Number,
+	choiceSpace: Number,
+	readOnly: Boolean
+});
+onMounted(() => {
+	loadSpaceList();
+});
+watch(() => storePage.eventPageListUpdate, () => {
+	loadSpaceList();
+});
+let nowSpaceShow = ref({});
+const loadSpaceList = (spaceId) => {
+	pageApi.spaceList({}).then((json) => {
+		storeSpace.spaceList = json.data || [];
+		let spaceOptionsNew = [];
+		storeSpace.spaceList.forEach((item) => spaceOptionsNew.push({label: item.name, value: item.id}));
+		storeSpace.spaceOptions = spaceOptionsNew;
+		if (storeSpace.spaceList.length > 0) {
+			let nowSpaceId = spaceId;
+			let nowSpaceShowTemp = storeSpace.spaceList.find((item) => item.id === spaceId);
+			if (!nowSpaceShowTemp) {
+				nowSpaceShowTemp = storeSpace.spaceList[0];
+				nowSpaceId = nowSpaceShowTemp.id;
+			}
+			nowSpaceShow.value = nowSpaceShowTemp;
+			storeSpace.spaceInfo = nowSpaceShowTemp;
+			storeSpace.chooseSpaceId = nowSpaceId;
+			storePage.choosePageId = 0;
+			doGetPageList();
+			// TODO 在首页时跳转
+			try {
+				if (route.path === '/home') {
+					router.push({path: '/home', query: {spaceId: nowSpaceId}});
+				}
+			} catch (e) {
+				console.log(e);
+			}
+		}
+	})
+}
+let optionPageId = ref('');
+const changeNodeOptionStatus = (param) => {
+	optionPageId.value = param.id;
+}
+const assisSetCurrentKey = () => {
+	emit('setNowPageId', route.query.pageId, props.readOnly);
+	if (props.nowPageId) {
+		wikiPageTreeRef.value.setCurrentKey(nowPageId.value);
+	}
+}
+
+const changeWikiPageExpandedKeys = (pageId) => {
+	// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
+	// wikiPageExpandedKeys.value= [pageId];
+}
+const createWikiByTemplate = () => {
+	// TODO
+	// templateManageRef.value.showTemplateManage()
+}
+const choosePageIdFunc = (id) => {
+	storePage.optionPageId = id;
+}
+const rename = (node, data) => {
+	data.renaming = true;
+}
+const openMoveMenu = (onlyMove) => {
+	// TODO
+	// onlyMoveMode.value = onlyMove
+	// visibleMoveMenu.value = true
+	// moveToPageId.value = storePage.choosePageId
+	// moveToSpaceId.value = storeSpace.chooseSpaceId
+	// moveToWikiPageList.value = storePage.wikiPageList
+}
+const openTemplateCreate = (exsit) => {
+	// TODO
+	// templateManageRef.value.showTemplateCreate(exsit)
+}
+const deleteWikiPage = (data) => {
+	let msg = '确定要删除此页面及其所有子页面吗？'
+	ElMessageBox.confirm(msg, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(() => {
+		let param = {pageId: data.id};
+		pageApi.pageDelete(param).then(() => {
+			ElMessage.success('已删除');
+			doGetPageList();
+		});
+	}).catch(() => {
+	});
+}
+const spaceChangeEvents = (data) => {
+	emit('spaceChangeEvents', data, props.readOnly);
+}
+const doRename = (node, data) => {
+	pageApi.renamePage({"id": data.id, "name": data.name}).then((json) => {
+		doGetPageList();
+		ElMessage.success('重命名成功');
+		data.renaming = false;
+	});
+}
+const doGetPageList = () => {
+	let param = {spaceId: storeSpace.chooseSpaceId};
+	pageApi.pageList(param).then((json) => {
+		storePage.wikiPageList = json.data || [];
+	});
+}
+const doSearchByKeywords = (queryString, callback) => {
+	if (!queryString || !queryString.trim()) {
+		callback([]);
+		return;
+	}
+	pageApi.pageNews({spaceId: props.choiceSpace, keywords: queryString}).then((json) => {
+		let spacePageNews = json.data || [];
+		callback(spacePageNews);
+	});
+}
+const handleSearchKeywordsSelect = (item) => {
+	searchKeywords.value = '';
+	router.push({path: '/page/show', query: {pageId: item.pageId}});
+}
+let spaceTreeIsClose = ref(false);
+const changeDropdownStatus = () => {
+	spaceTreeIsClose.value = !spaceTreeIsClose.value;
+}
+const filterPageNode = (value, data) => {
+	if (!value || !data.name) return true;
+	// issues:I2CG72 忽略大小写
+	let name = data.name.toLowerCase();
+	return name.indexOf(value.toLowerCase()) !== -1;
+}
+const searchByKeywords = () => {
+	wikiPageTreeRef.value.filter(searchKeywords.value);
+}
+const handleNodeClick = (data) => {
+	//console.log('点击节点：', data, props.nowPageId)
+	if (data.editorType !== 0) {
+		router.push({path: `/view/${data.spaceId}/${data.id}`});
+	}
+}
+const handlePageDrop = (draggingNode, dropNode, dropType, ev) => {
+	// console.log('tree drop: ', draggingNode.data, dropNode.data, dropType);
+	// 'prev'、'inner'、'next'
+	// before、after、inner
+	var param = {id: draggingNode.data.id, parentId: dropNode.data.parentId};
+	if (dropType == 'inner') {
+		param.parentId = dropNode.data.id;
+	} else if (dropType == 'before') {
+		param.beforeSeq = dropNode.data.seqNo;
+	} else if (dropType == 'after') {
+		param.afterSeq = dropNode.data.seqNo;
+	}
+	pageApi.pageChangeParent(param).then((res) => {
+		doGetPageList();
+	});
+}
+defineExpose({searchByKeywords})
+</script>
+
+<style lang="scss">
+.left-aside-box {
+	height: 100%;
+	box-sizing: border-box;
+	background: #fafafa;
+	display: flex;
+	flex-direction: column;
+
+	.left-aside-top-box {
+		padding: 10px;
+
+		.choice-space-select {
+			width: 100%;
+			margin-bottom: 5px;
+		}
+
+		.search-autocomplete {
+			width: 100%;
+			margin: 10px 0;
+		}
+
+		.page-group-tag {
+			.label {
+				font-size: 12px;
+				padding: 4px 8px;
+				color: #888;
+				cursor: pointer;
+				line-height: 32px;
+				height: 32px;
+				border-radius: 3px;
+				box-sizing: border-box;
+
+				&:hover {
+					background: #eee;
+				}
+			}
+		}
+	}
+
+	.wiki-page-tree-box {
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding-bottom: 10px;
+	}
+}
+
+.search-autocomplete-popper {
+	width: 600px !important;
+}
+</style>
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
new file mode 100644
index 00000000..c5a6f99f
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue
@@ -0,0 +1,326 @@
+<template>
+	<el-row>
+		<el-col :span="12">
+			<div class="left-action-box">
+				<div class="collapse-box">
+					<a-button @click="turnLeftCollapse" v-if="storeDisplay.showMenu" type="text" :icon="h(MenuFoldOutlined)"></a-button>
+					<a-button @click="turnLeftCollapse" v-else type="text" :icon="h(MenuUnfoldOutlined)"></a-button>
+				</div>
+				<div v-if="storeDisplay.currentPage === 'view'" class="title-time-box">
+					<div class="title">
+						<span class="text">{{storePage.pageInfo.name || ''}}</span>
+					</div>
+					<div class="time">最近修改：{{storePage.pageInfo.updateTime || ''}}</div>
+				</div>
+			</div>
+		</el-col>
+		<el-col :span="12" style="text-align: right;">
+			<div class="header-action-box">
+				<template v-if="storeDisplay.currentPage === 'view'">
+					<a-tooltip v-if="storePage.pageAuth.canEdit === 1" title="编辑文档">
+						<a-button class="hover-button hover-bg" @click="editWiki" size="large" :icon="h(EditOutlined)"></a-button>
+					</a-tooltip>
+					<a-tooltip v-else title="没有编辑权限">
+						<span class="disabled-btn-box"><a-button class="hover-button" size="large" :icon="h(EditOutlined)" disabled></a-button></span>
+					</a-tooltip>
+					<a-tooltip title="文档沟通">
+						<a-button class="hover-button hover-bg" @click="showCommentWiki" size="large" :icon="h(MessageOutlined)"></a-button>
+					</a-tooltip>
+					<UserMessagePopover/>
+					<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-more-dropdown">
+						<span style="display:inline-block;margin: 0 12px;">
+							<a-button class="hover-button hover-bg" size="large" :icon="h(EllipsisOutlined)"></a-button>
+						</span>
+						<template #overlay>
+							<a-menu>
+								<a-menu-item @click="editWikiAuth" v-if="storePage.pageAuth.canConfigAuth === 1"><el-icon><ElIconSCheck/></el-icon> 权限设置</a-menu-item>
+								<a-menu-item @click="showOpenPage" v-if="storeSpace.spaceInfo.openDoc === 1"><el-icon><ElIconShare/></el-icon> 查看开放文档</a-menu-item>
+								<a-menu-item @click="showMobileView" v-if="storeSpace.spaceInfo.openDoc === 1"><el-icon><ElIconMobilePhone/></el-icon> 手机端查看</a-menu-item>
+								<a-menu-item @click="exportWord"><el-icon><ElIconDownload/></el-icon>导出为Word</a-menu-item>
+								<a-menu-divider />
+								<a-menu-item @click="deleteWikiPage" v-if="storePage.pageAuth.canDelete === 1" class="delete"><el-icon><ElIconDelete/></el-icon> 删除</a-menu-item>
+							</a-menu>
+						</template>
+					</a-dropdown>
+				</template>
+				<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-user-dropdown">
+					<span style="display:inline-block;">
+						<a-button class="hover-button hover-bg" size="large" :icon="h(UserOutlined)"></a-button>
+					</span>
+					<template #overlay>
+						<a-menu>
+							<a-menu-item @click="showAbout">关于</a-menu-item>
+							<a-menu-item @click="showConsole">控制台</a-menu-item>
+							<a-menu-divider />
+							<a-menu-item @click="userSignOut">退出登录</a-menu-item>
+						</a-menu>
+					</template>
+				</a-dropdown>
+			</div>
+		</el-col>
+	</el-row>
+	<MobileQrScanDialog v-model:visible="mobileScanDialogVisible"/>
+	<PageAuthDialog v-model:visible="pageAuthDialogVisible"/>
+	<AboutDialog v-model:visible="aboutDialogVisible"/>
+	<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
+		<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
+	</form>
+</template>
+
+<script setup>
+import {
+	Fold as ElIconFold,
+	Expand as ElIconExpand,
+	Delete as ElIconDelete,
+	Stamp as ElIconSCheck,
+	Share as ElIconShare,
+	Iphone as ElIconMobilePhone,
+	Download as ElIconDownload,
+	MoreFilled as ElIconMoreFilled,
+	Setting as ElIconSetting,
+	UserFilled as ElIconUserFilled,
+} from '@element-plus/icons-vue'
+import {
+	UserOutlined, EditOutlined, MessageOutlined, CheckOutlined, EllipsisOutlined,
+	MenuFoldOutlined, MenuUnfoldOutlined
+} from '@ant-design/icons-vue';
+import {toRefs, ref, reactive, onMounted, watch, defineEmits, h, computed} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { useStoreDisplay } from '@/store/wikiDisplay.js'
+import { useStorePageData } from '@/store/pageData.js'
+import { useStoreUserData } from '@/store/userData.js'
+import pageApi from "@/assets/api/page";
+import {useStoreSpaceData} from "@/store/spaceData";
+import userApi from "@/assets/api/user";
+import PageAuthDialog from '@/views/page/show/PageAuthDialog.vue'
+import MobileQrScanDialog from '@/views/page/show/MobileQrScanDialog.vue'
+import AboutDialog from "@/views/common/AboutDialog.vue"
+import UserMessagePopover from "../../../components/layouts/UserMessagePopover.vue"
+import {fixRequestUrl} from "@/assets/api/hostUtils";
+
+let router = useRouter();
+let storePage = useStorePageData();
+let storeDisplay = useStoreDisplay();
+let storeUser = useStoreUserData();
+let storeSpace = useStoreSpaceData();
+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}});
+	});
+}
+const showCommentWiki = () => {
+	storeDisplay.commentShow = !storeDisplay.commentShow;
+}
+let pageAuthDialogVisible = ref(false);
+const editWikiAuth = () => {
+	pageAuthDialogVisible.value = true;
+}
+const showOpenPage = () => {
+	if (storeSpace.spaceInfo.openDoc !== 1) {
+		ElMessage.warning('该空间未开放，无法查看开放文档地址');
+	} else {
+		let routeUrl = router.resolve({
+			path: '/page/share/view',
+			query: {pageId: storePage.pageInfo.id, space: storeSpace.spaceInfo.uuid}
+		});
+		window.open(routeUrl.href, '_blank');
+	}
+}
+const deleteWikiPage = () => {
+	ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(() => {
+		pageApi.pageDelete({pageId: storePage.pageInfo.id}).then(() => {
+			pageApi.pageList({spaceId: storeSpace.chooseSpaceId}).then((json) => {
+				storePage.wikiPageList = json.data || []
+			}).then(()=>{
+				router.push({path: '/home', query: {spaceId: storePage.pageInfo.spaceId}});
+			})
+		});
+	}).catch((e) => {
+		console.log(e)
+	});
+}
+// 下载为Word
+let downloadFormRef = ref();
+let downloadFormParam = ref({url: fixRequestUrl('zyplayer-doc-wiki/page/download'), param: {}});
+const exportWord = () => {
+	let pageViewContent = document.getElementById('pageContentBox');
+	let innerHtml = pageViewContent.innerHTML || '';
+	downloadFormParam.value.param = {
+		pageId: storePage.pageInfo.id,
+		content: innerHtml,
+	};
+	setTimeout(() => downloadFormRef.value.submit(), 0);
+}
+// 手机扫码
+let mobileScanDialogVisible = ref(false);
+const showMobileView = () => {
+	if (storeSpace.spaceInfo.openDoc !== 1) {
+		ElMessage.warning('该空间未开放，无法查看开放文档地址');
+	} else {
+		mobileScanDialogVisible.value = true;
+	}
+}
+const userSignOut = () => {
+	userApi.userLogout().then(() => {
+		location.reload();
+	});
+}
+let aboutDialogVisible = ref(false);
+const showAbout = () => {
+	aboutDialogVisible.value = true;
+}
+const showConsole = () => {
+	window.open(import.meta.env.VITE_APP_BASE_API, '_blank')
+}
+</script>
+
+<style lang="scss" scoped>
+.left-action-box {
+	display: flex;
+
+	.collapse-box {
+		line-height: 60px;
+
+		.fold-btn {
+			font-size: 18px;
+			padding: 4px 10px;
+			color: #888 !important;
+		}
+	}
+
+	.title-time-box {
+		flex: 1;
+		padding: 5px 0 6px 10px;
+		overflow: hidden;
+
+		.title {
+			overflow: hidden;
+			white-space: nowrap;
+			-o-text-overflow: ellipsis;
+			text-overflow: ellipsis;
+			line-height: 28px;
+
+			.text {
+				vertical-align: middle;
+			}
+		}
+
+		.time {
+			font-size: 12px;
+			overflow: hidden;
+			white-space: nowrap;
+			-o-text-overflow: ellipsis;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.title-setting-box {
+		.setting-title {
+			font-size: 18px;
+			line-height: 60px;
+			padding-left: 10px;
+
+			.text {
+				display: inline-block;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+.left-action-box {
+	.title-time-box {
+		.title {
+			.i-icon {
+				vertical-align: middle;
+
+				svg {
+					vertical-align: unset;
+				}
+			}
+		}
+	}
+}
+
+.title-setting-box {
+	.setting-title {
+		.tips-icon {
+			vertical-align: 0.1em;
+			margin-left: 6px;
+		}
+	}
+}
+
+.header-action-box {
+	display: inline-block;
+	line-height: 60px;
+
+	.disabled-btn-box {
+		margin-right: 10px;
+	}
+
+	.hover-button {
+		border: 0;
+		box-shadow: unset;
+		width: 54px !important;
+
+		.i-icon svg {
+			vertical-align: inherit;
+		}
+
+		&:hover.hover-bg {
+			background: #eaeaea;
+		}
+
+		& + .hover-button {
+			margin-left: 10px;
+		}
+	}
+}
+
+.header-action-user-dropdown {
+	width: 120px;
+}
+
+.header-action-more-dropdown {
+	width: 140px;
+
+	.delete {
+		color: #f00;
+	}
+
+	.delete.disabled {
+		cursor: not-allowed;
+		color: var(--el-text-color-disabled);
+	}
+
+	.cant-hover {
+		cursor: default;
+	}
+
+	.cant-hover:hover {
+		background: #fff;
+	}
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightResize.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightResize.vue
new file mode 100644
index 00000000..0f179515
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightResize.vue
@@ -0,0 +1,76 @@
+<template>
+	<div ref="rightResizeRef" class="right-resize hide-on-mp" :style="{left: (modelValue-4)+'px'}">
+		<div class="line"></div>
+	</div>
+</template>
+
+<script setup>
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, watch, defineEmits, computed} from 'vue';
+
+const props = defineProps({
+	modelValue: Number,
+	max: {
+		type: Number,
+		default: 600
+	},
+	min: {
+		type: Number,
+		default: 300
+	}
+});
+let emit = defineEmits(['update:modelValue', 'change']);
+
+onMounted(() => {
+	dragChangeRightAsideWidth();
+});
+let rightResizeRef = ref();
+const dragChangeRightAsideWidth = () => {
+	let resize = rightResizeRef.value;
+	resize.onmousedown = e => {
+		let startX = e.clientX;
+		let rightAsideWidth = props.modelValue;
+		// 颜色改变提醒
+		resize.classList.add('active');
+		document.onmousemove = e2 => {
+			// 计算并应用位移量
+			let endX = e2.clientX;
+			let moveLen = startX - endX;
+			if ((moveLen < 0 && rightAsideWidth < props.max) || (moveLen > 0 && rightAsideWidth > props.min)) {
+				startX = endX;
+				rightAsideWidth -= moveLen;
+				rightAsideWidth = Math.max(rightAsideWidth, props.min);
+				rightAsideWidth = Math.min(rightAsideWidth, props.max);
+				emit('update:modelValue', rightAsideWidth);
+				emit('change', rightAsideWidth);
+			}
+		};
+		document.onmouseup = () => {
+			resize.classList.remove('active');
+			document.onmousemove = null;
+			document.onmouseup = null;
+		};
+		return false;
+	};
+}
+</script>
+
+<style scoped>
+.right-resize {
+	height: 100%;
+	padding: 0 4px;
+	cursor: w-resize;
+	z-index: 200;
+	position: absolute;
+}
+
+.right-resize .line {
+	width: 2px;
+	height: 100%;
+}
+
+.right-resize:hover .line,
+.right-resize.active .line {
+	background: #2876d7;
+}
+</style>
+
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Annex.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Annex.vue
new file mode 100644
index 00000000..2e6d9436
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Annex.vue
@@ -0,0 +1,80 @@
+<template>
+	<div class="wiki-file">
+		<el-upload v-if="storePage.pageAuth.canUploadFile === 1"
+				   :on-success="uploadFileSuccess"
+				   :on-error="uploadFileError"
+				   :before-upload="beforeUpload"
+				   :action="uploadFileUrl"
+				   :data="uploadFormData"
+				   :with-credentials="true" class="action-btn upload-page-file" name="files"
+				   show-file-list multiple :limit="999">
+			<el-button type="primary" :underline="false" :icon="ElIconUpload" style="margin: 10px;width: 100%"> 上传附件</el-button>
+		</el-upload>
+			<el-table v-show="storePage.fileList.length > 0" :data="storePage.fileList" border
+					  style="width: 100%; margin-bottom: 5px">
+				<el-table-column label="文件名" show-overflow-tooltip>
+					<template v-slot="scope">
+						<el-link target="_blank" :href="scope.row.fileUrl" type="primary">{{scope.row.fileName }}
+						</el-link>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createUserName" label="创建人" width="110px"
+								 show-overflow-tooltip></el-table-column>
+				<el-table-column label="文件大小" width="120px">
+					<template v-slot="scope">{{computeFileSize(scope.row.fileSize) }}</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="创建时间" width="160px"></el-table-column>
+				<el-table-column prop="downloadNum" label="下载次数" width="90px">
+					<template v-slot="scope">{{scope.row.downloadNum || 0}}</template>
+				</el-table-column>
+				<el-table-column label="操作" width="90px" v-if="storePage.pageAuth.canDeleteFile == 1">
+					<template v-slot="scope">
+						<el-button @click="deletePageFile(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</div>
+</template>
+
+<script setup>
+	import {Upload as ElIconUpload} from '@element-plus/icons-vue'
+	import {useStorePageData} from "@/store/pageData";
+
+	let storePage = useStorePageData();
+	import {ref} from 'vue';
+	import {ElMessageBox, ElMessage} from 'element-plus';
+	import pageApi from "@/assets/api/page";
+	import unitUtil from "@/assets/lib/UnitUtil";
+
+	let uploadFormData = ref({pageId: 0});
+	let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
+	const beforeUpload = () => {
+		uploadFormData.value.pageId = storePage.pageInfo.id;
+	}
+	const uploadFileError = (err) => {
+		ElMessage.error('上传失败，' + err);
+	}
+	const uploadFileSuccess = (response) => {
+		if (response.errCode === 200) {
+			storePage.fileList.push(response.data);
+			ElMessage.success('上传成功！');
+		} else {
+			ElMessage('上传失败：' + (response.errMsg || '未知错误'));
+		}
+	}
+	const deletePageFile = (row) => {
+		ElMessageBox.confirm('确定要删除此文件吗？', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning',
+		}).then(() => {
+			let param = {id: row.id};
+			pageApi.deletePageFile(param).then(() => {
+				storePage.fileList = storePage.fileList.filter(item => item.id !== row.id);
+			});
+		})
+	}
+	const computeFileSize = (fileSize) => {
+		return unitUtil.computeFileSize(fileSize)
+	}
+</script>
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
new file mode 100644
index 00000000..de56895a
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Comment.vue
@@ -0,0 +1,197 @@
+<template>
+	<div class="comment-outer-box">
+		<div class="comment-box" ref="actionTabCommentRef">
+			<div v-if="commentList.length <= 0" class="action-box-empty">暂无评论</div>
+			<div v-else class="comment-list">
+				<el-timeline>
+					<el-timeline-item :timestamp="comment.createTime" placement="top" v-for="comment in commentList">
+						<el-card class="box-card comment-card" :body-style="{ padding: '10px' }">
+							<div :style="'background-color: ' + comment.color" class="head">
+								{{ comment.createUserName.substr(0, 1) }}
+							</div>
+							<div class="comment-user-name">
+								{{ comment.createUserName }}
+								<el-popconfirm v-if="canDeleteComment(comment)"
+								               placement="top" width="160" trigger="click"
+								               confirm-button-text="删除"
+								               cancel-button-text="取消"
+								               @confirm="deleteComment(comment.id)"
+								               title="确定要删除此评论吗？">
+									<template #reference>
+										<el-icon class="icon-delete"><ElIconDelete /></el-icon>
+									</template>
+								</el-popconfirm>
+							</div>
+							<pre class="comment-content">{{ comment.content }}</pre>
+						</el-card>
+					</el-timeline-item>
+				</el-timeline>
+			</div>
+		</div>
+		<div class="comment-input-box">
+			<textarea rows="5" placeholder="发表评论" v-model="commentTextInput" :maxlength="500"></textarea>
+			<div class="comment-btn-box">
+				<el-button type="primary" size="small" @click="submitPageComment">发送</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {
+	Delete as ElIconDelete,
+	Loading as ElIconLoading,
+} from '@element-plus/icons-vue'
+import {toRefs, ref, reactive, onMounted, watch, defineProps, defineEmits, defineExpose, computed} from 'vue';
+import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
+import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
+import pageApi from '@/assets/api/page'
+import {useStorePageData} from "@/store/pageData";
+import {useStoreUserData} from "@/store/userData";
+
+let page = {
+	colorArr: ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399', '#303133'],
+	userHeadColor: {},
+}
+// 评论相关
+let commentTextInput = ref('');
+let commentList = ref([]);
+let recommentInfo = ref({});
+
+let route = useRoute();
+let router = useRouter();
+let storePage = useStorePageData();
+let storeUser = useStoreUserData();
+
+watch(() => storePage.pageInfo, (newVal) => {
+	if (storePage.pageInfo.editorType !== 0){
+		loadCommentList();
+	}
+})
+onMounted(() => {
+	loadCommentList();
+});
+let actionTabCommentRef = ref();
+const scrollActionTabComment = () => {
+	setTimeout(() => {
+		let actionTabComment = actionTabCommentRef.value
+		actionTabComment.scrollTop = actionTabComment.scrollHeight
+	}, 0)
+}
+const loadCommentList = () => {
+	if (!storePage.pageInfo || !storePage.pageInfo.id) {
+		return;
+	}
+	cancelCommentUser()
+	pageApi.pageCommentList({pageId: storePage.pageInfo.id}).then((json) => {
+		let commentListRes = json.data || []
+		for (let i = 0; i < commentListRes.length; i++) {
+			commentListRes[i].color = getUserHeadBgColor(commentListRes[i].createUserId)
+			let subCommentList = commentListRes[i].commentList || []
+			for (let j = 0; j < subCommentList.length; j++) {
+				let subItem = subCommentList[j]
+				subItem.color = getUserHeadBgColor(subItem.createUserId)
+			}
+			commentListRes[i].commentList = subCommentList
+			commentListRes[i].visible = false
+		}
+		commentList.value = commentListRes
+		scrollActionTabComment()
+	})
+}
+let canDeleteComment = (row) => {
+	return storeUser.userInfo.id === row.createUserId
+		|| storeUser.userInfo.id === storePage.pageInfo.createUserId
+}
+const deleteComment = (id) => {
+	pageApi.deletePageComment({id: id}).then(() => {
+		// ElMessage.success("删除成功！");
+		loadCommentList()
+	})
+}
+const cancelCommentUser = () => {
+	recommentInfo.value = {}
+}
+const submitPageComment = () => {
+	if (commentTextInput.value.length <= 0) {
+		ElMessage.error('请输入评论内容')
+		return
+	}
+	let param = {
+		pageId: storePage.pageInfo.id,
+		content: commentTextInput.value,
+		parentId: recommentInfo.value.id,
+	}
+	pageApi.updatePageComment(param).then((json) => {
+		let data = json.data
+		data.color = getUserHeadBgColor(data.createUserId)
+		commentTextInput.value = ''
+		loadCommentList()
+	})
+}
+const getUserHeadBgColor = (userId) => {
+	let color = page.userHeadColor[userId]
+	if (!color) {
+		color = page.colorArr[Math.ceil(Math.random() * page.colorArr.length) - 1]
+		page.userHeadColor[userId] = color
+	}
+	return color
+}
+</script>
+
+<style lang="scss">
+.comment-box {
+	padding: 8px;
+	height: calc(100vh - 315px);
+	overflow: auto;
+
+	.comment-card {
+		.comment-user-name {
+			margin-bottom: 10px;
+
+			.icon-delete {
+				color: #888;
+				font-size: 13px;
+				cursor: pointer;
+				float: right;
+				display: none;
+			}
+		}
+
+		.comment-content {
+			padding: 0;
+			color: #666;
+			margin: 0;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+			line-height: 20px;
+		}
+	}
+
+	.comment-card:hover {
+		.icon-delete {
+			display: inline-block;
+		}
+	}
+}
+
+.comment-input-box {
+	width: 100%;
+	background: #fff;
+	border-top: 1px solid #f1f1f1;
+
+	textarea {
+		resize: none;
+		width: 100%;
+		box-sizing: border-box;
+		border: 0;
+		outline: none !important;
+		padding: 10px;
+	}
+
+	.comment-btn-box {
+		text-align: right;
+		padding: 4px 15px 6px 0;
+	}
+}
+</style>
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
new file mode 100644
index 00000000..fbe02854
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/MobileQrScanDialog.vue
@@ -0,0 +1,76 @@
+<template>
+	<!--手机扫码查看弹窗-->
+	<el-dialog title="手机扫码查看" v-model="dataItemEditVisible" width="400px">
+		<div style="text-align: center">
+			<div class="mobile-qr">
+				<canvas ref="qrCodeDivRef"></canvas>
+			</div>
+			<div>使用微信或手机浏览器扫一扫查看</div>
+			<div>或 <a target="_blank" :href="qrCodeUrl">直接访问</a></div>
+		</div>
+	</el-dialog>
+</template>
+
+<script setup>
+import {
+	Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import {markRaw} from 'vue'
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage, ElLoading, ElNotification} from 'element-plus'
+import pageApi from "@/assets/api/page";
+import {useStorePageData} from "@/store/pageData";
+import userApi from "@/assets/api/user";
+import QRCode from 'qrcode'
+import {useStoreSpaceData} from "@/store/spaceData";
+
+let storePage = useStorePageData();
+let storeSpace = useStoreSpaceData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+	visible: Boolean,
+	data: Object,
+});
+
+let dataItemEditVisible = ref(false);
+const emit = defineEmits(['update:visible', 'ok']);
+watch(dataItemEditVisible, () => {
+	emit('update:visible', dataItemEditVisible.value);
+});
+watch(() => props.visible, () => {
+	dataItemEditVisible.value = props.visible;
+	initMobileQrScan();
+});
+onMounted(() => {
+	dataItemEditVisible.value = props.visible;
+	initMobileQrScan();
+});
+let qrCodeUrl = ref('');
+let qrCodeDivRef = ref();
+const initMobileQrScan = () => {
+	if (!dataItemEditVisible.value) return;
+	let routeUrl = router.resolve({
+		path: '/page/share/mobile/view',
+		query: {pageId: storePage.pageInfo.id, space: storeSpace.spaceInfo.uuid}
+	});
+	let hostPath = window.location.href.split('#')[0];
+	setTimeout(() => {
+		qrCodeUrl.value = hostPath + routeUrl.href
+		QRCode.toCanvas(qrCodeDivRef.value, qrCodeUrl.value, {
+				scale: 5, height: 250, wight: 250,
+			}, (error) => {
+				if (error) console.error(error);
+			}
+		)
+	}, 0);
+}
+</script>
+
+<style lang="scss">
+.page-auth-dialog {
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/Navigation.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Navigation.vue
new file mode 100644
index 00000000..166d9dc5
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/Navigation.vue
@@ -0,0 +1,106 @@
+<template>
+	<div class="navigation-box">
+		<div class="navigation-content-box">
+			<div></div>
+			<div class="nav-heading" :style="{ width: navigationWidth }">
+				<div v-for="item in heading" :class="'heading-item heading-' + item.level" @click="headingItemClick(item)">
+					{{ item.text }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {toRefs, ref, reactive, onMounted, watch, defineEmits, defineProps, defineExpose,} from 'vue'
+import {useStoreDisplay} from '@/store/wikiDisplay.js'
+import {useStorePageData} from "@/store/pageData";
+import {useResizeEvent} from "@/composable/windowsScroll";
+
+let storePage = useStorePageData();
+const storeDisplay = useStoreDisplay();
+let navigationWidth = ref('100px');
+const props = defineProps({
+	heading: {type: Array, default: []},
+});
+onMounted(() => {
+	setTimeout(() => computeNavigationWidth(), 100);
+});
+useResizeEvent(() => {
+	computeNavigationWidth();
+});
+const computeNavigationWidth = () => {
+
+}
+const headingItemClick = (item) => {
+	// 滚动到指定节点
+	item.node.scrollIntoView({
+		behavior: 'smooth',
+		block: 'start',
+		inline: 'nearest',
+	});
+	// 距离顶部高度
+	//console.log(item.node.offsetTop - item.node.scrollHeight)
+}
+</script>
+
+<style lang="scss">
+.navigation-box {
+	width: 100px;
+	position: absolute;
+	top: 150px;
+	right: 10px;
+	z-index: 4;
+
+	.navigation-content-box {
+		position: fixed;
+		background: #fff;
+		border-radius: 8px;
+		padding: 16px;
+		margin-left: -40px;
+		box-shadow: var(--el-box-shadow-lighter);
+	}
+
+	.nav-heading {
+		max-height: calc(100vh - 250px);
+		overflow-y: auto;
+
+		.heading-item {
+			padding: 5px 0;
+			cursor: pointer;
+			color: #646a73;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			&:hover {
+				color: #3370ff;
+			}
+		}
+
+		.heading-1 {
+			padding-left: 0;
+		}
+
+		.heading-2 {
+			padding-left: 16px;
+		}
+
+		.heading-3 {
+			padding-left: 32px;
+		}
+
+		.heading-4 {
+			padding-left: 48px;
+		}
+
+		.heading-5 {
+			padding-left: 64px;
+		}
+
+		.heading-6 {
+			padding-left: 80px;
+		}
+	}
+}
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageAuthDialog.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageAuthDialog.vue
new file mode 100644
index 00000000..b19e399a
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageAuthDialog.vue
@@ -0,0 +1,140 @@
+<template>
+	<!--人员权限弹窗-->
+	<el-dialog title="页面权限" v-model="dataItemEditVisible" width="800px" class="page-auth-dialog">
+		<el-row>
+			<el-select v-model="pageAuthNewUser" filterable remote reserve-keyword autoComplete="new-password" placeholder="请输入名字、邮箱、账号搜索用户" :remote-method="getSearchUserList" :loading="pageAuthUserLoading" style="width: 690px; margin-right: 10px">
+				<el-option v-for="item in searchUserList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
+			</el-select>
+			<el-button @click="addPageAuthUser">添加</el-button>
+		</el-row>
+		<el-table :data="pageAuthUserList" border style="width: 100%; margin: 10px 0">
+			<el-table-column prop="userName" label="用户" width="150"></el-table-column>
+			<el-table-column label="权限">
+				<template v-slot="scope">
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.editPage">编辑</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.deletePage">删除</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileUpload">文件上传</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileDelete">文件删除</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageAuthManage">权限管理</el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" width="80">
+				<template v-slot="scope">
+					<el-button size="small" type="danger" plain @click="deleteUserPageAuth(scope.row)">删除</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<template #footer>
+			<el-button @click="cancelAuth">取消</el-button>
+			<el-button type="primary" @click="saveUserPageAuth">保存配置</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import {
+	Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import {markRaw} from 'vue'
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage, ElLoading, ElNotification} from 'element-plus'
+import pageApi from "@/assets/api/page";
+import {useStorePageData} from "@/store/pageData";
+import userApi from "@/assets/api/user";
+
+let storePage = useStorePageData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+	visible: Boolean,
+	data: Object,
+});
+
+let dataItemEditVisible = ref(false);
+const emit = defineEmits(['update:visible', 'ok']);
+watch(dataItemEditVisible, () => {
+	emit('update:visible', dataItemEditVisible.value);
+});
+watch(() => props.visible, () => {
+	dataItemEditVisible.value = props.visible;
+	initPageAuth();
+});
+onMounted(() => {
+	dataItemEditVisible.value = props.visible;
+	initPageAuth();
+});
+
+// 页面权限
+let pageAuthUserList = ref([]);
+let searchUserList = ref([]);
+let pageAuthNewUser = ref();
+let pageAuthUserLoading = ref(false);
+const initPageAuth = () => {
+	if (!dataItemEditVisible.value) return;
+	pageAuthNewUser.value = '';
+	pageAuthUserList.value = [];
+	let param = {pageId: storePage.pageInfo.id};
+	pageApi.getPageUserAuthList(param).then((json) => {
+		pageAuthUserList.value = json.data || [];
+	});
+}
+const addPageAuthUser = () => {
+	if (!pageAuthNewUser.value) {
+		ElMessage.warning('请先选择用户');
+		return;
+	}
+	// 已添加过的用户不再添加
+	if (pageAuthUserList.value.find((item) => item.userId === pageAuthNewUser.value)) {
+		pageAuthNewUser.value = undefined;
+		return;
+	}
+	// 获取用户
+	let findUser = searchUserList.value.find((item) => item.id === pageAuthNewUser.value);
+	if (findUser) {
+		return;
+	}
+	// 添加用户
+	pageAuthUserList.value.push({
+		userId: findUser.id,
+		userName: findUser.userName,
+		editPage: 0,
+		commentPage: 0,
+		deletePage: 0,
+		pageFileUpload: 0,
+		pageFileDelete: 0,
+		pageAuthManage: 0,
+	})
+	pageAuthNewUser.value = '';
+}
+const getSearchUserList = (query) => {
+	if (!query) return;
+	pageAuthUserLoading.value = true;
+	userApi.getUserBaseInfo({search: query}).then((json) => {
+		searchUserList.value = json.data || [];
+		pageAuthUserLoading.value = false;
+	});
+}
+const saveUserPageAuth = () => {
+	let param = {
+		pageId: storePage.pageInfo.id,
+		authList: JSON.stringify(pageAuthUserList.value),
+	}
+	pageApi.assignPageUserAuth(param).then(() => {
+		ElMessage.success('保存成功！');
+	});
+}
+const cancelAuth = () => {
+	dataItemEditVisible.value = false;
+}
+const deleteUserPageAuth = (row) => {
+	pageAuthUserList.value = pageAuthUserList.value.filter((item) => item.userId !== row.userId);
+}
+</script>
+
+<style lang="scss">
+.page-auth-dialog {
+}
+</style>
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
new file mode 100644
index 00000000..71e55876
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageHistory.vue
@@ -0,0 +1,80 @@
+<template>
+	<div class="action-tab-box">
+		<div v-if="props.pageHistoryList.length <= 0" class="action-box-empty">
+			暂无修改历史记录
+		</div>
+		<el-timeline v-else>
+			<el-timeline-item v-for="history in props.pageHistoryList">
+				<el-tag :type="props.pageHistoryChoice.id === history.id ? history.loading === 3 ? 'danger' : 'success' : 'info'"
+						class="history-item" @click="historyClick(history)">
+					<div>{{ history.createUserName }}</div>
+					<div>{{ history.createTime }}</div>
+				</el-tag>
+				<el-icon class="history-loading-status" v-show="history.loading===1">
+					<el-icon-loading/>
+				</el-icon>
+				<el-icon class="history-loading-status" v-show="history.loading===2">
+					<el-icon-circle-check/>
+				</el-icon>
+				<el-icon class="history-loading-status" v-show="history.loading===3">
+					<el-icon-circle-close/>
+				</el-icon>
+			</el-timeline-item>
+		</el-timeline>
+	</div>
+</template>
+
+<script setup>
+import {
+	CircleCheck as ElIconCircleCheck,
+	CircleClose as ElIconCircleClose,
+	Loading as ElIconLoading,
+} from '@element-plus/icons-vue'
+
+import pageApi from '@/assets/api/page'
+import {mavonEditor} from "mavon-editor";
+import {ref, defineProps, defineEmits} from 'vue';
+import {useStorePageData} from "@/store/pageData";
+let storePage = useStorePageData();
+
+let props= defineProps({
+	pageHistoryList:Array,
+	pageHistoryChoice:Object,
+	pageHistoryDetail:String,
+})
+let emit = defineEmits(['historyClickHandle','previewPageImage','createNavigationHeading'])
+
+const historyClick = (history) => {
+	if (props.pageHistoryChoice.id === history.id && !!props.pageHistoryDetail.value) {
+		return;
+	}
+	// 缓存一下，但如果历史页面多了而且很大就占内存，也可以每次去拉取，先这样吧
+	if (history.content) {
+		history.loading = 2;
+		emit('historyClickHandle',history)
+		setTimeout(() => {
+			emit('previewPageImage',history)
+			emit('createNavigationHeading',history)
+		}, 500)
+	} else {
+		history.loading = 1
+		pageApi.pageHistoryDetail({id: history.id}).then((json) => {
+			history.loading = 2;
+			history.content = json.data || '--';
+			if (storePage.pageInfo.editorType === 2) {
+				history.content = mavonEditor.getMarkdownIt().render(history.content);
+			}
+			emit('historyClickHandle',history)
+			setTimeout(() => {
+				emit('previewPageImage',history)
+				emit('createNavigationHeading',history)
+			}, 500);
+		}).catch(() => {
+			history.loading = 3;
+		});
+	}
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageZan.vue b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageZan.vue
new file mode 100644
index 00000000..4ea9878e
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/view/show/PageZan.vue
@@ -0,0 +1,55 @@
+<template>
+	<div style="margin-top: 40px; font-size: 14px">
+		<span style="vertical-align: top" class="is-link">
+		  <span v-show="storePage.pageInfo.selfZan == 0" @click="zanPage(1)"><img src="../../../assets/img/zan.png" style="vertical-align: middle"/> 赞</span>
+		  <span v-show="storePage.pageInfo.selfZan == 1" @click="zanPage(0)"><img src="../../../assets/img/zan.png" style="vertical-align: middle; transform: rotateX(180deg)"/> 踩</span>
+		</span>
+		<span style="margin-left: 10px; vertical-align: top">
+		  <span v-if="storePage.pageInfo.selfZan == 0 && storePage.pageInfo.zanNum <= 0">成为第一个赞同者</span>
+		  <span v-else-if="storePage.pageInfo.selfZan == 0 && storePage.pageInfo.zanNum > 0">
+			<span class="is-link" @click="showZanPageUser">{{ storePage.pageInfo.zanNum }}人</span>赞了它
+		  </span>
+		  <span v-else-if="storePage.pageInfo.selfZan == 1 && storePage.pageInfo.zanNum <= 1">我赞了它</span>
+		  <span v-else-if="storePage.pageInfo.selfZan == 1 && storePage.pageInfo.zanNum > 1">
+			<span class="is-link" @click="showZanPageUser">我和{{ storePage.pageInfo.zanNum - 1 }}个其他人</span>赞了它
+		  </span>
+		</span>
+		<span style="margin-left: 10px">
+			<el-icon style="font-size: 16px; color: #666;vertical-align: middle;"><el-icon-view/></el-icon> {{ storePage.pageInfo.viewNum }}次阅读
+		</span>
+	</div>
+	<el-dialog title="赞了它的人" v-model="zanUserDialogVisible" width="600px">
+		<el-table :data="zanUserList" border :show-header="false" style="width: 100%; margin-bottom: 5px">
+			<el-table-column prop="createUserName" label="用户"></el-table-column>
+			<el-table-column prop="createTime" label="时间"></el-table-column>
+		</el-table>
+	</el-dialog>
+</template>
+
+<script setup>
+import pageApi from '../../../assets/api/page'
+import {ref} from 'vue';
+import {useStorePageData} from "@/store/pageData";
+import {
+	View as ElIconView,
+} from '@element-plus/icons-vue'
+let zanUserList = ref([]);
+let zanUserDialogVisible = ref(false);
+let storePage = useStorePageData();
+
+const zanPage = (yn) => {
+	let param = {yn: yn, pageId: storePage.pageInfo.id}
+	pageApi.updatePageZan(param).then(() => {
+		storePage.pageInfo.selfZan = yn
+		storePage.pageInfo.zanNum = storePage.pageInfo.zanNum + (yn == 1 ? 1 : -1)
+	})
+}
+const showZanPageUser = () => {
+	zanUserDialogVisible.value = true
+	zanUserList.value = []
+	let param = {pageId: storePage.pageInfo.id}
+	pageApi.pageZanList(param).then((json) => {
+		zanUserList.value = json.data
+	})
+}
+</script>