页面加载逻辑优化

zyplayer-doc-ui/wiki-ui/src/store/pageData.js

@@ -3,6 +3,8 @@ import {defineStore} from 'pinia';
 export const useStorePageData = defineStore('pageData', {
 	state: () => {
 		return {
+			// 页面加载状态 -1=空间不存在 0=初始值 1=加载中 2=加载成功 3=加载失败
+			pageLoadStatus: 0,
 			pageInfo: {},
 			pageAuth: {},
 			fileList: [],
@@ -15,4 +17,40 @@ export const useStorePageData = defineStore('pageData', {
 			eventPageListUpdate: false,
 		}
 	},
+	getters: {
+		getFirstViewPage: (state) => {
+			return () => {
+				let getPage = (dataList) => {
+					for (let i = 0; i < dataList.length; i++) {
+						let page = dataList[i];
+						if (page.editorType !== 0) {
+							return page;
+						} else if (page.children) {
+							let find = getPage(page.children);
+							if (find) return find;
+						}
+					}
+					return null;
+				}
+				return getPage(state.pageList);
+			}
+		},
+		getPageById: (state) => {
+			return (pageId) => {
+				let getPage = (dataList) => {
+					for (let i = 0; i < dataList.length; i++) {
+						let page = dataList[i];
+						if (page.id === pageId) {
+							return page;
+						} else if (page.children) {
+							let find = getPage(page.children);
+							if (find) return find;
+						}
+					}
+					return null;
+				}
+				return getPage(state.pageList);
+			}
+		},
+	}
 });

zyplayer-doc-ui/wiki-ui/src/views/view/PageLayout.vue

@@ -64,6 +64,6 @@ html, body {
 	background-color: #fff !important;
 	color: #333;
 	height: 60px !important;
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid #f0f0f0;
 }
 </style>

zyplayer-doc-ui/wiki-ui/src/views/view/View.vue

@@ -67,10 +67,10 @@ let emit = defineEmits(['switchSpace', 'changeExpandedKeys', 'loadPageList']);
 onMounted(() => {
 	storeDisplay.currentPage = 'view';
 	storeDisplay.showHeader = true;
-	initQueryParam(route);
+	loadPageDetail(route.params);
 });
-onBeforeRouteUpdate((to) => {
+onBeforeRouteUpdate((updateGuard) => {
-	initQueryParam(to);
+	loadPageDetail(updateGuard.params);
 });
 // 页面展示相关
 let wikiPage = ref({});
@@ -113,10 +113,17 @@ const afterLoadPage = () => {
 		createNavigationHeading();
 	}, 500);
 }
-const loadPageDetail = (pageId) => {
+const loadPageDetail = (query) => {
-	clearHistory();
+	clearPageData();
+	let pageId = query.pageId;
+	let spaceId = query.spaceId;
+	if (!pageId || !spaceId) {
+		return;
+	}
 	pageContent.value = '';
+	storePage.pageLoadStatus = 1;
 	pageApi.pageDetail({id: pageId}).then(async (json) => {
+		storePage.pageLoadStatus = 2;
 		let result = json.data || {};
 		let wikiPageRes = result.wikiPage || {};
 		wikiPageRes.selfZan = result.selfZan || 0;
@@ -150,6 +157,9 @@ const loadPageDetail = (pageId) => {
 		storePage.pageInfo = wikiPageRes;
 		storePage.pageAuth = wikiPageAuth.value;
 		afterLoadPage();
+	}).catch(e => {
+		console.log(e);
+		storePage.pageLoadStatus = 3;
 	});
 	getPageHistory(pageId);
 }
@@ -170,14 +180,6 @@ const createNavigationHeading = () => {
 let spaceId = '';
 let pageId = '';
 let pageContentRef = ref();
-const initQueryParam = (to) => {
-	spaceId = parseInt(to.params.spaceId);
-	pageId = parseInt(to.params.pageId);
-	clearPageData();
-	if (!!pageId) {
-		loadPageDetail(pageId);
-	}
-}
 const clearPageData = () => {
 	wikiPage.value = {};
 	wikiPageAuth.value = {};
@@ -185,6 +187,8 @@ const clearPageData = () => {
 	pageContentShow.value = '';
 	storePage.pageInfo = {};
 	storePage.pageAuth = {};
+	storePage.fileList = [];
+	storePage.pageLoadStatus = 0;
 }
 </script>
 
@@ -202,7 +206,7 @@ const clearPageData = () => {
 			overflow: auto;
 			padding: 30px 20px;
 			position: relative;
-			border-right: 1px solid #eee;
+			border-right: 1px solid #f0f0f0;
 
 			.view-body-box {
 				max-width: 840px;

zyplayer-doc-ui/wiki-ui/src/views/view/aside/LeftAside.vue

@@ -42,7 +42,7 @@
 			</div>
 		</div>
 		<div v-show="!spaceTreeIsClose" class="wiki-page-tree-box">
-			<el-tree ref="wikiPageTreeRef" :current-node-key="props.nowPageId" :data="storePage.wikiPageList"
+			<el-tree ref="wikiPageTreeRef" :current-node-key="props.nowPageId" :data="storePage.pageList"
 			         :default-expanded-keys="wikiPageExpandedKeys" :expand-on-click-node="true"
 			         :filter-node-method="filterPageNode" :props="defaultProps" :draggable="!props.readOnly"
 			         @node-click="handleNodeClick" @node-drop="handlePageDrop" node-key="id" highlight-current
@@ -238,7 +238,7 @@ const openMoveMenu = (onlyMove) => {
 	// visibleMoveMenu.value = true;
 	// moveToPageId.value = storePage.choosePageId
 	// moveToSpaceId.value = storeSpace.chooseSpaceId
-	// moveToWikiPageList.value = storePage.wikiPageList
+	// moveToWikiPageList.value = storePage.pageList
 }
 const openTemplateCreate = (exsit) => {
 	// TODO
@@ -276,9 +276,24 @@ const doRename = (node, data) => {
 const doGetPageList = () => {
 	storePage.pageList = [];
 	storePage.favoritePageList = [];
-	let param = {spaceId: storeSpace.chooseSpaceId};
+	let spaceId = storeSpace.chooseSpaceId;
-	pageApi.pageList(param).then((json) => {
+	pageApi.pageList({spaceId: spaceId}).then((json) => {
-		storePage.wikiPageList = json.data || [];
+		storePage.pageList = json.data || [];
+		// 查看页面
+		if (storePage.pageList.length <= 0) {
+			router.push({path: `/view/${spaceId}`});
+		} else {
+			let routePageId = parseInt(route.params.pageId);
+			let findPage = storePage.getPageById(routePageId);
+			if (findPage) {
+				router.replace({path: `/view/${spaceId}/${routePageId}`});
+			} else {
+				let firstPage = storePage.getFirstViewPage();
+				if (firstPage) {
+					router.replace({path: `/view/${spaceId}/${firstPage.id}`});
+				}
+			}
+		}
 	});
 }
 const doSearchByKeywords = (queryString, callback) => {

zyplayer-doc-ui/wiki-ui/src/views/view/aside/RightHeader.vue

@@ -7,10 +7,15 @@
 					<a-button @click="turnLeftCollapse" v-else type="text" :icon="h(MenuUnfoldOutlined)"></a-button>
 				</div>
 				<div v-if="storeDisplay.currentPage === 'view'" class="title-time-box">
+					<template v-if="storePage.pageLoadStatus===1">
+						<LoadingOutlined style="margin-top: 16px;font-size: 18px;"/>
+					</template>
+					<template v-else-if="storePage.pageLoadStatus===2">
 						<div class="title">
 							<span class="text">{{storePage.pageInfo.name || ''}}</span>
 						</div>
 						<div class="time">最近修改：{{storePage.pageInfo.updateTime || ''}}</div>
+					</template>
 				</div>
 			</div>
 		</el-col>
@@ -78,7 +83,7 @@ import {
 } from '@element-plus/icons-vue'
 import {
 	UserOutlined, EditOutlined, MessageOutlined, CheckOutlined, EllipsisOutlined,
-	MenuFoldOutlined, MenuUnfoldOutlined
+	MenuFoldOutlined, MenuUnfoldOutlined, LoadingOutlined
 } from '@ant-design/icons-vue';
 import {toRefs, ref, reactive, onMounted, watch, defineEmits, h, computed} from 'vue';
 import {useRouter, useRoute} from "vue-router";
@@ -139,7 +144,7 @@ const deleteWikiPage = () => {
 	}).then(() => {
 		pageApi.pageDelete({pageId: storePage.pageInfo.id}).then(() => {
 			pageApi.pageList({spaceId: storeSpace.chooseSpaceId}).then((json) => {
-				storePage.wikiPageList = json.data || [];
+				storePage.pageList = json.data || [];
 			}).then(()=>{
 				router.push({path: '/home', query: {spaceId: storePage.pageInfo.spaceId}});
 			});

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

@@ -136,7 +136,7 @@ const getUserHeadBgColor = (userId) => {
 <style lang="scss">
 .comment-box {
 	padding: 8px;
-	height: calc(100vh - 275px);
+	height: calc(100vh - 285px);
 	overflow: auto;
 
 	.comment-card {