开放wiki页文档样式修改，支持图片预览

2021-01-06 22:30:04 +08:00
parent 2dfb089665
commit 6cb2d76bfb
30 changed files with 364 additions and 122 deletions
--- a/zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareLayout.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareLayout.vue
@@ -14,7 +14,7 @@
 							 style="background-color: #fafafa;padding-bottom: 30px;">
 					</el-tree>
 					<!--请手下留情，别删我(╥╯^╰╥)，给我一个露脸的机会，我长的不碍眼的-->
-					<div class="build-info">本文档使用<span @click="aboutDialogVisible = true">zyplayer-doc</span>构建</div>
+					<div class="build-info">本文档使用<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>构建</div>
 				</div>
 			</el-aside>
 			<el-container>
@@ -23,20 +23,6 @@
 				</el-main>
 			</el-container>
 		</el-container>
-		<!--关于弹窗-->
-		<el-dialog title="关于zyplayer-doc-wiki" :visible.sync="aboutDialogVisible" width="600px">
-			<el-form>
-				<el-form-item label="项目地址：">
-					<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>
-				</el-form-item>
-				<el-form-item label="开发人员：">
-					<a target="_blank" href="http://zyplayer.com">暮光：城中城</a>
-				</el-form-item>
-				<el-form-item label="">
-					欢迎加群讨论，QQ群号：466363173，欢迎提交需求，欢迎使用和加入开发！
-				</el-form-item>
-			</el-form>
-		</el-dialog>
 	</div>
 </template>

@@ -47,7 +33,6 @@
 		data() {
 			return {
 				leftCollapse: true,
-				aboutDialogVisible: false,
 				defaultProps: {
 					children: 'children',
 					label: 'name'
@@ -126,6 +111,6 @@
 		position: fixed;bottom: 0;left: 0;background: #fafafa;width: 240px;text-align: center;
 		padding: 5px 0;color: #aaa;font-size: 12px;
 	}
-	.build-info span{color: #4183c4;cursor: pointer;}
+	.build-info a{color: #4183c4;cursor: pointer;text-decoration:none;}
 </style>

--- a/zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareMobileLayout.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareMobileLayout.vue
@@ -0,0 +1,116 @@
+<template>
+	<div style="height: 100%;">
+		<el-container>
+			<el-aside width="300px" style="background-color: #fafafa;" v-show="leftCollapse">
+				<div class="logo">{{nowSpaceShow.name}}</div>
+				<div style="padding: 10px;box-sizing: border-box;background: #fafafa;">
+					<el-input v-model="searchKeywords" @keyup.enter.native="searchByKeywords" placeholder="搜索文档" style="margin: 10px 0;">
+						<el-button slot="append" icon="el-icon-search" v-on:click="searchByKeywords"></el-button>
+					</el-input>
+					<el-tree :props="defaultProps" :data="wikiPageList" @node-click="handleNodeClick"
+							 ref="wikiPageTree" :filter-node-method="filterPageNode" highlight-current
+							 :expand-on-click-node="false" :default-expanded-keys="wikiPageExpandedKeys"
+							 node-key="id"
+							 style="background-color: #fafafa;padding-bottom: 30px;">
+					</el-tree>
+					<!--请手下留情，别删我(╥╯^╰╥)，给我一个露脸的机会，我长的不碍眼的-->
+					<div class="build-info">本文档使用<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>构建</div>
+				</div>
+			</el-aside>
+			<el-container>
+				<el-main class="doc-body-box">
+					<router-view></router-view>
+				</el-main>
+			</el-container>
+		</el-container>
+	</div>
+</template>
+
+<script>
+	import pageApi from '../../common/api/page'
+
+	export default {
+		data() {
+			return {
+				leftCollapse: true,
+				defaultProps: {
+					children: 'children',
+					label: 'name'
+				},
+				// 空间搜索相关
+				spaceUuid: '',
+				nowPageId: '',
+				nowSpaceShow: {},
+				// 搜索的输入内容
+				searchKeywords: "",
+				// 页面展示相关
+				wikiPageList:[],
+				wikiPageExpandedKeys: [],
+			}
+		},
+		mounted: function () {
+			this.spaceUuid = this.$route.query.space || '';
+			this.getSpaceInfo();
+			this.doGetPageList(null);
+		},
+		methods: {
+			filterPageNode(value, data) {
+				if (!value) return true;
+				return data.name.indexOf(value) !== -1;
+			},
+			handleNodeClick(data) {
+				if (this.nowPageId == data.id) {
+					return;
+				}
+				console.log("点击节点：", data);
+				this.nowPageId = data.id;
+				this.$router.push({path: '/page/share/view', query: {pageId: data.id, space: this.spaceUuid}});
+			},
+			searchByKeywords() {
+				this.$refs.wikiPageTree.filter(this.searchKeywords);
+			},
+			doGetPageList() {
+				pageApi.openPageList({space: this.spaceUuid}).then(json => {
+					this.wikiPageList = json.data || [];
+					this.nowPageId = '';
+				});
+			},
+			getSpaceInfo() {
+				pageApi.openSpaceInfo({space: this.spaceUuid}).then(json => {
+					this.nowSpaceShow = json.data;
+				});
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	html,body,#app {margin: 0; padding: 0; height: 100%;}
+	pre{margin: 0;white-space: pre-wrap;font-size: 14px; font-family: auto;}
+	.el-menu {box-sizing: border-box;border-right: 0;margin-right: 3px;}
+	.el-header {background-color: #409EFF; color: #333; line-height: 40px; text-align: right;height: 40px !important;}
+	.doc-body-box{
+		overflow-x: hidden;overflow-y: auto;width: 100%;
+		padding: 10px;border-left: 1px solid #f1f1f1; box-sizing: border-box;
+	}
+	.el-tree{margin-right: 3px;}
+	.logo{
+		/*background: #409EFF; cursor: pointer;*/
+		border-bottom: 1px solid #f1f1f1;
+		overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding: 5px 10px;
+		width: 260px; height:40px;line-height:40px;font-size: 25px;color: #666;text-align: center;
+	}
+	.icon-collapse{float: left;font-size: 25px;color: #aaa;cursor: pointer;position: fixed;}
+	.icon-collapse:hover{color: #ccc;}
+	/*评论*/
+	.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;
+	}
+	.build-info{
+		position: fixed;bottom: 0;left: 0;background: #fafafa;width: 240px;text-align: center;
+		padding: 5px 0;color: #aaa;font-size: 12px;
+	}
+	.build-info a{color: #4183c4;cursor: pointer;text-decoration:none;}
+</style>
+
--- a/zyplayer-doc-ui/wiki-ui/src/routes.js
+++ b/zyplayer-doc-ui/wiki-ui/src/routes.js
@@ -1,5 +1,5 @@
 import GlobalLayout from './components/layouts/GlobalLayout'
-import OpenLayout from './components/layouts/ShareLayout'
+import ShareLayout from './components/layouts/ShareLayout'

 let routes = [
 	{path: '/', redirect: '/home'},
@@ -20,12 +20,12 @@ let routes = [
 	{
 		path: '/',
 		name: '页面管理',
-		component: OpenLayout,
+		component: ShareLayout,
 		children: [
-			{path: '/page/share/home', name: 'WIKI-开放文档', component: () => import('@/views/page/share/Home')},
-			{path: '/page/share/view', name: 'WIKI-内容展示', component: () => import('@/views/page/share/View')},
+			{path: '/page/share/home', name: 'WIKI-开放文档', component: () => import('@/views/page/share/pc/Home')},
+			{path: '/page/share/view', name: 'WIKI-内容展示', component: () => import('@/views/page/share/pc/View')},
 		]
-	}
+	},
 ];

 export default routes;
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/View.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/share/View.vue
@@ -1,88 +0,0 @@
-<template>
-	<div class="page-share-view-vue">
-		<el-row type="border-card">
-			<div style="max-width: 950px;margin: 0 auto;">
-				<div class="wiki-title">{{wikiPage.name}}</div>
-				<div class="wiki-author">
-					<span v-show="!wikiPage.updateTime">创建时间：{{wikiPage.createTime}}</span>
-					<span v-show="wikiPage.updateTime">最后修改：{{wikiPage.updateTime}}</span>
-				</div>
-				<div class="wiki-files">
-					<el-table v-show="pageFileList.length > 0" :data="pageFileList" border
-							  style="width: 100%; margin-bottom: 5px;">
-						<el-table-column label="文件名">
-							<template slot-scope="scope">
-								<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName}}</a>
-							</template>
-						</el-table-column>
-						<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
-						<el-table-column prop="downloadNum" label="下载次数" width="80px"></el-table-column>
-					</el-table>
-				</div>
-				<div class="wiki-content w-e-text">
-					<div v-html="pageContent.content"></div>
-				</div>
-			</div>
-		</el-row>
-	</div>
-</template>
-
-<script>
-	import pageApi from '../../../common/api/page'
-	import {mavonEditor, markdownIt} from 'mavon-editor'
-
-	export default {
-		data() {
-			return {
-				spaceUuid: '',
-				nowPageId: '',
-				// 页面展示相关
-				wikiPage: {},
-				pageContent: {},
-				pageFileList: [],
-			};
-		},
-		beforeRouteUpdate(to, from, next) {
-			this.initQueryParam(to);
-			next();
-		},
-		mounted() {
-			this.initQueryParam(this.$route);
-		},
-		methods: {
-			loadPageDetail(pageId) {
-				let param = {pageId: pageId, space: this.spaceUuid};
-				pageApi.openPageDetail(param).then(json => {
-					let wikiPage = json.data.wikiPage || {};
-					wikiPage.selfZan = json.data.selfZan || 0;
-					this.wikiPage = wikiPage;
-					this.pageContent = json.data.pageContent || {};
-					this.pageFileList = json.data.fileList || [];
-					if (this.wikiPage.editorType === 2) {
-						this.pageContent.content = markdownIt.render(this.pageContent.content);
-					}
-					document.title = wikiPage.name || 'WIKI-内容展示';
-				});
-			},
-			initQueryParam(to) {
-				this.spaceUuid = to.query.space;
-				this.nowPageId = to.query.pageId;
-				if (!!this.nowPageId) {
-					this.loadPageDetail(this.nowPageId);
-				}
-			},
-		}
-	}
-
-</script>
-
-<style>
-	.page-share-view-vue .wiki-title{font-size: 20px;text-align: center;}
-	.page-share-view-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
-	.page-share-view-vue .wiki-content{font-size: 14px;}
-	.page-share-view-vue .wiki-content.w-e-text{overflow-y: auto;}
-
-	.page-share-view-vue .upload-page-file .el-upload-list{display: none;}
-	.page-share-view-vue .is-link{color: #1e88e5;cursor: pointer;}
-</style>
-
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue
@@ -0,0 +1,77 @@
+<template>
+	<div style="padding: 10px;" class="page-share-home-vue">
+	</div>
+</template>
+
+<script>
+	import pageApi from '../../../../common/api/page'
+
+	export default {
+		data() {
+			return {
+				totalCount: 0,
+				searchParam: {
+					spaceId: '',
+					newsType: 1,
+					pageNum: 1,
+					pageSize: 20,
+				},
+				spacePageNews: [],
+			};
+		},
+		beforeRouteUpdate(to, from, next) {
+			this.initQueryParam(to);
+			next();
+		},
+		mounted: function () {
+			this.initQueryParam(this.$route);
+		},
+		methods: {
+			getSpacePageNews() {
+				pageApi.openPageNews(this.searchParam).then(json => {
+					this.spacePageNews = json.data || [];
+					this.totalCount = json.total;
+				});
+			},
+			handleSizeChange(val) {
+				this.searchParam.pageSize = val;
+				this.getSpacePageNews();
+			},
+			showPageDetail(row) {
+				this.nowClickPath = {space: row.space, pageId: row.pageId};
+				this.$router.push({path: '/page/share/view', query: this.nowClickPath});
+			},
+			handleCurrentChange(val) {
+				this.searchParam.pageNum = val;
+				this.getSpacePageNews();
+			},
+			initQueryParam(to) {
+				this.searchParam = {
+					space: to.query.space,
+					newsType: 1,
+					pageNum: 1,
+					pageSize: 20,
+				};
+				if (!!this.searchParam.space) {
+					this.getSpacePageNews();
+				}
+			},
+		}
+	}
+</script>
+<style>
+	.page-share-home-vue .empty-news{text-align: center;padding: 100px;}
+	.page-share-home-vue .text-link {
+		color: #444;
+	}
+	.page-share-home-vue .line-box{color: #666;border-bottom: 1px solid #eee;padding: 20px 0;}
+	.page-share-home-vue .line-title{font-size: 14px;}
+	.page-share-home-vue .page-preview-box{}
+	.page-share-home-vue .page-preview-title{cursor: pointer;font-size: 20px;margin: 10px 0 5px 0;color: #3a8ee6;}
+	.page-share-home-vue .page-preview-content{font-size: 16px;margin-bottom: 5px;}
+	.page-share-home-vue .zan-img{vertical-align: middle;margin-top: -3px;}
+	.page-share-home-vue .view-img{font-size: 16px;color: #666;}
+
+	.page-share-home-vue .page-info-box{text-align: right;margin: 20px 0 50px 0;}
+</style>
+
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/Home.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/Home.vue
@@ -10,7 +10,7 @@
 					<div class="page-preview-title" v-on:click="showPageDetail(item)" v-html="item.pageTitle"></div>
 					<div class="page-preview-content" v-html="item.previewContent"></div>
 					<div>
-						<span><img src="../../../assets/img/zan.png" class="zan-img"> {{item.zanNum}}　</span>
+						<span><img src="../../../../assets/img/zan.png" class="zan-img"> {{item.zanNum}}　</span>
 						<span><i class="el-icon-view view-img"></i> {{item.viewNum}}　</span>
 						<span>{{item.updateTime||item.createTime}}</span>
 					</div>
@@ -33,7 +33,7 @@
 </template>

 <script>
-	import pageApi from '../../../common/api/page'
+	import pageApi from '../../../../common/api/page'

 	export default {
 		data() {
--- 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
@@ -0,0 +1,150 @@
+<template>
+	<div class="page-share-view-vue">
+		<el-row type="border-card">
+			<div style="max-width: 950px;margin: 0 auto;">
+				<div class="wiki-title">{{wikiPage.name}}</div>
+				<div class="wiki-author">
+					<span v-if="wikiPage.updateTime">最后修改：{{wikiPage.updateTime}}</span>
+					<span v-else>创建时间：{{wikiPage.createTime}}</span>
+				</div>
+				<div class="wiki-files">
+					<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px;">
+						<el-table-column label="文件名">
+							<template slot-scope="scope">
+								<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName}}</a>
+							</template>
+						</el-table-column>
+						<el-table-column label="文件大小">
+							<template slot-scope="scope">{{computeFileSize(scope.row.fileSize)}}</template>
+						</el-table-column>
+						<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
+						<el-table-column prop="downloadNum" label="下载次数" width="80px"></el-table-column>
+					</el-table>
+				</div>
+				<div ref="pageContent" class="wiki-page-content">
+					<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
+					<div v-html="pageShowDetail" class="wiki-html-content" v-else></div>
+				</div>
+			</div>
+		</el-row>
+		<div ref="imagePreview">
+			<el-image-viewer v-if="showImagePreview" :url-list="showImagePreviewList" :on-close="closeImagePreview" :initial-index="previewInitialIndex"></el-image-viewer>
+		</div>
+	</div>
+</template>
+
+<script>
+	import pageApi from '../../../../common/api/page'
+	import {mavonEditor, markdownIt} from 'mavon-editor'
+	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+	import 'mavon-editor/dist/markdown/github-markdown.min.css'
+	import 'mavon-editor/dist/css/index.css'
+
+	export default {
+		data() {
+			return {
+				spaceUuid: '',
+				nowPageId: '',
+				// 页面展示相关
+				wikiPage: {},
+				pageFileList: [],
+				pageShowDetail: '',
+				// 大图预览
+				previewInitialIndex: 0,
+				showImagePreview: false,
+				showImagePreviewList: [],
+			};
+		},
+		components: {'el-image-viewer': ElImageViewer},
+		beforeRouteUpdate(to, from, next) {
+			this.initQueryParam(to);
+			next();
+		},
+		mounted() {
+			this.initQueryParam(this.$route);
+		},
+		methods: {
+			loadPageDetail(pageId) {
+				let param = {pageId: pageId, space: this.spaceUuid};
+				pageApi.openPageDetail(param).then(json => {
+					let wikiPage = json.data.wikiPage || {};
+					wikiPage.selfZan = json.data.selfZan || 0;
+					this.wikiPage = wikiPage;
+					let pageContent = json.data.pageContent || {};
+					this.pageFileList = json.data.fileList || [];
+					if (this.wikiPage.editorType === 2) {
+						pageContent.content = markdownIt.render(pageContent.content);
+					}
+					this.pageShowDetail = pageContent.content;
+					document.title = wikiPage.name || 'WIKI-内容展示';
+					setTimeout(() => this.previewPageImage(), 500);
+				});
+			},
+			initQueryParam(to) {
+				this.spaceUuid = to.query.space;
+				this.nowPageId = to.query.pageId;
+				if (!!this.nowPageId) {
+					this.loadPageDetail(this.nowPageId);
+				}
+			},
+			computeFileSize(fileSize) {
+				if (!fileSize) {
+					return '-';
+				}
+				let size = "";
+				if (fileSize < 0.1 * 1024) {
+					size = fileSize.toFixed(2) + "B"
+				} else if (fileSize < 0.1 * 1024 * 1024) {
+					size = (fileSize / 1024).toFixed(2) + "KB"
+				} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
+					size = (fileSize / (1024 * 1024)).toFixed(2) + "MB"
+				} else {
+					size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB"
+				}
+				let sizeStr = size + "";
+				let index = sizeStr.indexOf(".");
+				let dou = sizeStr.substr(index + 1, 2);
+				if (dou == "00") {
+					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+				}
+				return size;
+			},
+			closeImagePreview() {
+				this.showImagePreview = false;
+			},
+			previewPageImage() {
+				const imgArr = [];
+				const imgSelector = this.$refs.pageContent.querySelectorAll('img');
+				imgSelector.forEach((item, index) => {
+					imgArr.push(item.src);
+					item.onclick = () => {
+						this.previewInitialIndex = index;
+						this.showImagePreviewList = imgArr;
+						this.showImagePreview = true;
+						setTimeout(() => this.initImageViewerMask(), 0);
+					}
+				});
+			},
+			initImageViewerMask() {
+				// 图片预览遮罩点击隐藏预览框
+				let imageViewerMask = this.$refs.imagePreview.querySelectorAll('.el-image-viewer__mask');
+				imageViewerMask.forEach(item => {
+					item.onclick = () => this.showImagePreview = false;
+				});
+			},
+		}
+	}
+</script>
+
+<style>
+	.page-share-view-vue .wiki-title{font-size: 20px;text-align: center;}
+	.page-share-view-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
+
+	.page-share-view-vue .wiki-page-content img{cursor: pointer;max-width: 100%;}
+	.page-share-view-vue .wiki-page-content img:hover{box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);}
+	.page-share-view-vue .wiki-page-content .wiki-html-content{font-size: 14px;padding: 6px;overflow-y: auto;}
+
+	.page-share-view-vue .upload-page-file .el-upload-list{display: none;}
+	.page-share-view-vue .is-link{color: #1e88e5;cursor: pointer;}
+</style>
+