开放wiki页文档样式修改，支持图片预览
This commit is contained in:
暮光：城中城
@@ -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>
|
||||
|
||||
77
zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue
Normal file
77
zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue
Normal file
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
150
zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
Normal file
150
zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
Normal file
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user