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

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

View File

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

View File

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

View File

@@ -1,38 +1,36 @@
<template> <template>
<div class="page-share-view-vue"> <div class="page-share-view-vue">
<el-row type="border-card"> <el-row type="border-card">
<el-row> <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">
<el-col :xs="0" :sm="4" :md="4" :lg="6" :xl="6" v-if="navigationList.length > 0"> <div style="max-width: 1000px; padding-left: 10px; margin: 0 auto">
<Navigation :heading="navigationList"></Navigation> <div class="wiki-title" ref="wikiTitleRef">{{ wikiPage.name }}</div>
</el-col> <div class="wiki-author">
<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"> <span v-if="wikiPage.updateTime">最后修改{{ wikiPage.updateTime }}</span>
<div style="max-width: 1000px; padding-left: 10px; margin: 0 auto"> <span v-else>创建时间{{ wikiPage.createTime }}</span>
<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>
</div> </div>
</el-col> <div class="wiki-files">
</el-row> <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> </el-row>
<div ref="imagePreviewRef"> <div ref="imagePreviewRef">
<el-image-viewer v-if="showImagePreview" <el-image-viewer v-if="showImagePreview"
@@ -168,8 +166,9 @@ const initImageViewerMask = () => {
@import '../../../../assets/lib/wangEditor.css'; @import '../../../../assets/lib/wangEditor.css';
.page-share-view-vue .wiki-title { .page-share-view-vue .wiki-title {
font-size: 20px; font-size: 2em;
text-align: center; text-align: center;
font-weight: bold;
} }
.page-share-view-vue .wiki-author { .page-share-view-vue .wiki-author {