优化文档展示细节,优化开放文档样式

This commit is contained in:
暮光:城中城
2023-03-02 23:34:59 +08:00
parent a819a8df59
commit 674de356e7
4 changed files with 77 additions and 69 deletions

View File

@@ -9,24 +9,32 @@
<el-button :icon="ElIconSearch" v-on:click="searchByKeywords"></el-button>
</template>
</el-input>
<el-tree
:props="defaultProps"
:data="wikiPageList"
@node-click="handleNodeClick"
ref="wikiPageTreeRef"
:filter-node-method="filterPageNode"
highlight-current
:expand-on-click-node="true"
:default-expanded-keys="wikiPageExpandedKeys"
node-key="id"
style="background-color: #fafafa; padding-bottom: 30px">
<template v-slot="{ node, data }">
<span style="font-size: 14px">
<el-icon><el-icon-document/></el-icon>&nbsp;
<span>{{ node.label }}</span>
</span>
</template>
</el-tree>
<div class="wiki-page-tree-box">
<el-tree
ref="wikiPageTreeRef"
:current-node-key="nowPageId"
:data="wikiPageList"
:default-expanded-keys="wikiPageExpandedKeys"
:expand-on-click-node="true"
:filter-node-method="filterPageNode"
:props="defaultProps"
draggable
highlight-current
node-key="id"
style="background-color: #fafafa"
@node-click="handleNodeClick">
<template v-slot="{ node, data }">
<div class="page-tree-node">
<el-tooltip :content="node.label" placement="top-start" :show-after="1000">
<span class="label">
<el-icon><el-icon-document/></el-icon>
<span class="text">{{ node.label }}</span>
</span>
</el-tooltip>
</div>
</template>
</el-tree>
</div>
<!--请保留申明-->
<div class="build-info">本文档使用<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>构建</div>
</div>

View File

@@ -13,7 +13,7 @@
<span v-else class="create-user-time">{{ wikiPage.createUserName }}  {{wikiPage.createTime}} 创建</span>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-link type="primary" :icon="ElIconChatLineRound" :underline="false" @click="showCommentWiki" style="margin-right: 15px">评论</el-link>
<el-link type="primary" :icon="ElIconChatLineRound" :underline="false" @click="showCommentWiki" style="margin-right: 15px"> 评论</el-link>
<el-upload v-if="wikiPageAuth.canUploadFile === 1"
:on-success="uploadFileSuccess"
:on-error="uploadFileError"
@@ -22,9 +22,9 @@
:with-credentials="true" class="upload-page-file" name="files"
show-file-list multiple :limit="999"
style="display: inline; margin-right: 15px;vertical-align: middle;">
<el-link type="primary" :underline="false" :icon="ElIconUpload">上传附件</el-link>
<el-link type="primary" :underline="false" :icon="ElIconUpload"> 上传附件</el-link>
</el-upload>
<el-link v-if="wikiPageAuth.canEdit === 1" type="primary" :underline="false" :icon="ElIconEdit" @click="editWiki" style="margin-right: 15px;">编辑</el-link>
<el-link v-if="wikiPageAuth.canEdit === 1" type="primary" :underline="false" :icon="ElIconEdit" @click="editWiki" style="margin-right: 15px;"> 编辑</el-link>
<el-dropdown style="margin-right: 15px;vertical-align: middle;" trigger="click" @command="handleMoreCommand">
<el-link type="primary" :underline="false">
更多
@@ -72,8 +72,8 @@
</div>
<div style="margin-top: 40px; font-size: 14px">
<span style="vertical-align: top" class="is-link">
<span v-show="wikiPage.selfZan == 0" v-on:click="zanPage(1)"><img src="../../assets/img/zan.png" style="vertical-align: middle"/></span>
<span v-show="wikiPage.selfZan == 1" v-on:click="zanPage(0)"><img src="../../assets/img/zan.png" style="vertical-align: middle; transform: rotateX(180deg)"/></span>
<span v-show="wikiPage.selfZan == 0" v-on:click="zanPage(1)"><img src="../../assets/img/zan.png" style="vertical-align: middle"/> </span>
<span v-show="wikiPage.selfZan == 1" v-on: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="wikiPage.selfZan == 0 && wikiPage.zanNum <= 0">成为第一个赞同者</span>
@@ -86,7 +86,7 @@
</span>
</span>
<span style="margin-left: 10px">
<el-icon style="font-size: 16px; color: #666;vertical-align: middle;"><el-icon-view/></el-icon>{{ wikiPage.viewNum }}次阅读
<el-icon style="font-size: 16px; color: #666;vertical-align: middle;"><el-icon-view/></el-icon> {{ wikiPage.viewNum }}次阅读
</span>
</div>
</div>
@@ -708,7 +708,7 @@ const initQueryParam = (to) => {
}
.page-show-vue .wiki-title {
font-size: 20px;
font-size: 2em;
text-align: center;
font-weight: bold;
}

View File

@@ -1,5 +1,5 @@
<template>
<div class="page-share-view-vue">
<div class="mobile-share-view-vue">
<van-nav-bar :title="wikiPage.name" class="header">
<template v-slot:left>
<van-icon name="wap-nav" size="20" @click="popupShowChange"></van-icon>
@@ -132,45 +132,46 @@ const previewPageImage = () => {
<style>
@import '../../../../assets/lib/wangEditor.css';
.page-share-view-vue {
.mobile-share-view-vue {
}
.page-share-view-vue .wiki-title {
font-size: 20px;
.mobile-share-view-vue .wiki-title {
font-size: 2em;
text-align: center;
font-weight: bold;
}
.page-share-view-vue .wiki-author {
.mobile-share-view-vue .wiki-author {
font-size: 14px;
color: #888;
height: 40px;
line-height: 40px;
}
.page-share-view-vue .wiki-page-content img {
.mobile-share-view-vue .wiki-page-content img {
cursor: pointer;
max-width: 100%;
}
.page-share-view-vue .wiki-page-content img:hover {
.mobile-share-view-vue .wiki-page-content img:hover {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
.page-share-view-vue .upload-page-file .el-upload-list {
.mobile-share-view-vue .upload-page-file .el-upload-list {
display: none;
}
.page-share-view-vue .is-link {
.mobile-share-view-vue .is-link {
color: #1e88e5;
cursor: pointer;
}
.page-share-view-vue .header {
.mobile-share-view-vue .header {
width: 100%;
height: 46px;
}
.page-share-view-vue .main {
.mobile-share-view-vue .main {
position: absolute;
top: 46px;
bottom: 0;
@@ -180,7 +181,7 @@ const previewPageImage = () => {
padding: 10px;
}
.page-share-view-vue .footer {
.mobile-share-view-vue .footer {
width: 100%;
height: 26px;
position: fixed;

View File

@@ -1,38 +1,36 @@
<template>
<div class="page-share-view-vue">
<el-row type="border-card">
<el-row>
<el-col :xs="0" :sm="4" :md="4" :lg="6" :xl="6" v-if="navigationList.length > 0">
<Navigation :heading="navigationList"></Navigation>
</el-col>
<el-col :xs="24" :sm="navigationList.length > 0 ? 20 : 24" :md="navigationList.length > 0 ? 20 : 24" :lg="navigationList.length > 0 ? 18 : 24" :xl="navigationList.length > 0 ? 18 : 24">
<div style="max-width: 1000px; padding-left: 10px; margin: 0 auto">
<div class="wiki-title" ref="wikiTitleRef">{{ 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 v-slot="scope">
<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName }}</a>
</template>
</el-table-column>
<el-table-column label="文件大小">
<template v-slot="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="pageContentRef" class="wiki-page-content">
<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
</div>
<el-col :xs="24" :sm="navigationList.length > 0 ? 20 : 24" :md="navigationList.length > 0 ? 20 : 24" :lg="navigationList.length > 0 ? 18 : 24" :xl="navigationList.length > 0 ? 18 : 24">
<div style="max-width: 1000px; padding-left: 10px; margin: 0 auto">
<div class="wiki-title" ref="wikiTitleRef">{{ wikiPage.name }}</div>
<div class="wiki-author">
<span v-if="wikiPage.updateTime">最后修改{{ wikiPage.updateTime }}</span>
<span v-else>创建时间{{ wikiPage.createTime }}</span>
</div>
</el-col>
</el-row>
<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 v-slot="scope">
<a target="_blank" :href="scope.row.fileUrl">{{scope.row.fileName }}</a>
</template>
</el-table-column>
<el-table-column label="文件大小">
<template v-slot="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="pageContentRef" class="wiki-page-content">
<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
</div>
</div>
</el-col>
<el-col :xs="0" :sm="4" :md="4" :lg="6" :xl="6" v-if="navigationList.length > 0">
<Navigation :heading="navigationList"></Navigation>
</el-col>
</el-row>
<div ref="imagePreviewRef">
<el-image-viewer v-if="showImagePreview"
@@ -168,8 +166,9 @@ const initImageViewerMask = () => {
@import '../../../../assets/lib/wangEditor.css';
.page-share-view-vue .wiki-title {
font-size: 20px;
font-size: 2em;
text-align: center;
font-weight: bold;
}
.page-share-view-vue .wiki-author {